/*
verde escuro #1c4738
verde botoes #207a5a
verde claro/destaque #49a923
verde botoes hero #12c312  
*/

:root{
     --bg:#ffffff;
     --muted:#6b7280;
     --panel:#f8fafc;
     --border:#e6e7eb;
     --txt-color-1: #1c4738;
     --txt-color-2: #207a5a;
     --accent-1:#49a923;
     --accent-2:#12c312;
     --grad: linear-gradient(90deg,var(--accent-1),var(--accent-2));
     --radius:18px;
     --glass: rgba(255,255,255,0.7);
     --container:1200px;
}
 *{
    box-sizing:border-box
}
 body{
    font-family: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
     margin:0;
     color:#0f172a;
     background:var(--bg);
     -webkit-font-smoothing:antialiased
}
 a{
    color:inherit;
     text-decoration:none
}
 .container{
    max-width:var(--container);
     margin:0 auto;
     padding:0 24px
}
/* Header */
 header{
     top:0;
     z-index:40;
  /*
     backdrop-filter: blur(6px);
     background:rgba(255,255,255,0.85);
     border-bottom:1px solid var(--border)*/
  position: absolute;
  width: 100%;
}
 .nav{
    display:flex;
     align-items:center;
     justify-content:space-between;
     gap:16px;
     padding:25px 0;
  
}
#mobileMenu {
 display: none;
}
#mobileMenu .container
{
  display: flex;
 flex-direction: column;
 gap: 5px;

}
#mobileMenu a {
 color: #FFF;
 padding: 15px 0;
 border-top: 1px solid rgba( 255, 255, 255,.1)
}
header.menu-fixo {
 background: #1c4738;
 position: sticky;
 animation: menu_in .3s forwards;
 top: 0;
 box-shadow: 1px 3px 8px rgba(0 0 0 /.25)
}
header.menu-fixo .nav{
 padding: 10px 20px
}
header:has([aria-expanded="true"]) {

}
header:has([aria-expanded="true"]) #mobileMenu .container{ 
 
 padding: 20px 20px 10px;
}
@keyframes menu_in{
   from {opacity: 0; top: -30px;}
  to {opacity: 1; top: 0}
}
 .brand{
    display:flex;
     align-items:center;
     gap:10px
}
.brand strong {
 display: none
}
 .logo{
    
}
.logo-positivo{
 display: none;
}
 nav.main{
    display:flex;
     gap:20px;
     align-items:center
}
 nav.main a{
    font-size:16px;
     color: #FFF
}
 .btn-primary{

     padding:8px 16px;
     border-radius:18px;
     border:none;
     font-weight:600;
  color: #FFF;
  background: var(--accent-1);
  text-align: center;
  
}
.nav .btn-primary {
     color: #FFF;
     background:var(--accent-2);
}
 .btn-ghost{
    border:1px solid var(--border);
     padding:8px 16px;
     border-radius:18px;
     color:#374151
}
 .mobile-toggle{
    display:none;
    color: var(--accent-2);
    background: none;
     border: none;
  font-size: 26px;
  cursor: pointer;
  border-radius: 9px;
  transition: all .2s;
}
.mobile-toggle[aria-expanded="true"] {
 color: #FFF;
 background: rgba(0,0,0,.1);
 box-shadow: 1px 2px 4px  rgba(0,0,0,.15) inset
}

/* Hero */
 .hero{
    padding: 90px 10px 40px;
  background: #285545;
    background: linear-gradient(0deg, #285545 50%,#183329);

}
 .hero-grid{
    display:grid;
     grid-template-columns:1fr;
     gap:28px;
     align-items:center
}
 .headline{
    font-size:36px;
    line-height: 1.25em;
    font-weight:800;
    color: #FFF;
}
.certificado {
 display: inline-block;
 background: #32784e;
 padding: 4px 25px 4px 50px;
 border-radius: 30px;
 position: relative;
 font-size: .9em;
}
.certificado:before {
 content: " ";
 display: block;
 background: var(--accent-2) url(../img/verify.png) no-repeat center;
 position: absolute;
 width: 38px;
 aspect-ratio: 1;
 left: -15px;
 top: 50%;
 transform: translateY(-50%);
 border-radius: 100%;
 
}
 .highlight{
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
     -webkit-background-clip:text;
     background-clip:text;
     color:transparent
}
 .lead{
    margin-top:14px;
    color: #f9f1cb;
}
 .actions{
    margin-top:22px;
     display:flex;
     gap:12px;
     flex-wrap:wrap;
}
.hero .btn-ghost, .hero .btn-primary  {
 color: #FFF;
 min-width: 250px;
 text-align: center;
}


 .muted-note{
    margin-top:12px;
     color:#9aa3b2;
     font-size:13px
}
/*hero flex*/
.hero:has(.hero-flex) {
 padding-bottom: 0;
}
.hero-flex {
 display: flex;
 align-items: center;
 padding: 0 ;
 gap: 20px;
 color: #FFF;
 min-height: 70vh;
 background: url(../img/bg-hero-coruja.png) no-repeat right bottom 10% / 55%
}
.hero-flex .col-content {
 max-width: 45%;
}
.hero-flex .col-img
{
 width: 100%;
 align-content: end;
}
.hero-flex .btn-primary {
 color: #FFF;
 background: var(--accent-2)
}

.lista-details {
 font-size: .9em;
 margin: 20px 0;
}
.lista-details li {
 list-style: url(../img/ico-check.png);
padding: 5px 10px 0px 0;
 margin-left: -10px
}

/* Chat card */
 .chat-card{
    border-radius:28px;
     border:1px solid var(--border);
     padding:18px;
     background:var(--panel);
     box-shadow:0 6px 18px rgba(15,23,42,0.04)
}
 .sim{
    background:white;
     border-radius:16px;
     padding:12px
}
 .msg{
    display:flex;
     gap:10px;
     align-items:flex-start
}
 .avatar{
    width:34px;
     height:34px;
     border-radius:999px;
     background:rgba(14,165,233,0.08)
}
 .bubble{
    padding:10px 12px;
     border-radius:14px;
     border:1px solid #eee;
     background:white;
     max-width:75%
}
 .bubble.user{
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
     color:white;
     border:none
}

/* KPIs */
 .kpis{
    display:grid;
     grid-template-columns:1fr;
     gap:12px;
     padding:24px 0
}
 .kpi{
    background:white;
     border-radius:16px;
     padding:18px;
     border:1px solid var(--border);
     text-align:center
}
 .kpi .num{
    font-size:26px;
     font-weight:800;
     color:var(--accent-1)
}
 .kpi .lbl{
    color:var(--muted);
     margin-top:6px
}
/* Sections */
 section{
    padding:48px 0;
    scroll-margin-top: 50px;
}
 h2{
    font-size: 32px;
     margin:0;
     color: var(--txt-color-1);
}
.container>h2 {
 text-align: center;
 max-width: 50ch;
 margin: auto;
}

 p.lead-small{
    color:var(--muted);
     margin-top:8px;
  text-align: center
}
 .grid-3{
    display:grid;
     grid-template-columns:1fr;
     gap:18px
}
/*como funciona*/
#como-funciona {
 background: #e5fedb;
}
#como-funciona .grid-me{
 grid-template-columns: 1fr 1fr;
}
#como-funciona h2, #como-funciona .lead-small {
 text-align: left;
}
#como-funciona .col-content:has(.steps)  {
 align-content: center;
}
.steps {
  counter-reset: passos;
}
.step {
 counter-increment: passos;
 position: relative;
 padding: 20px 0  0 55px;
 overflow: hidden;
}
.step:before {
 content: counter(passos);
 position: absolute;
 display: grid;
 place-items: center;
 background: var(--accent-1);
 width: 32px;
 font-size: 20px;
 font-weight: 800;
 color: #FFF;
 border-radius: 100%;
 aspect-ratio: 1;
 margin-left: -50px;
 top: 30px;
 z-index: 10;
}
.step:after {
 content: "";
 width: 4px;
 height: 100%;
 background: var(--accent-1);
 position: absolute ;
 left: 19px;
 top: 0;
 z-index: 0;
}
.step:first-of-type:after {
  top: 50px;
}
.step:last-of-type:after {
  height: 50px;
}
.step-ico {
 background: var(--accent-1);
 display:inline-grid;
 width: 86px;
 place-items: center;
 aspect-ratio: 1;
 border-radius: 100%;
 left: 0;
 margin-top: -20px;
 position: absolute;
}
.step h3 {
 color: var(--accent-1);
 margin: 0;
}
.lista-com-icones
{
 list-style: none;
 margin: 20px 0;
 padding: 0;
}
.lista-com-icones li {
 display: flex;
 gap: 15px;
 align-items: center;
 padding: 10px 0;
 border-top: 1px solid rgba(0 0 0 / .1)
}
.lista-com-icones li:last-child{
  border-bottom: 1px solid rgba(0 0 0 / .1)
}
#como-funciona .col-content:has(ul) {
 background: #FFF;
 border-radius: 20px;
 box-shadow: 2px 5px 20px rgba(0 0 0 / .2);
 padding: 20px 30px;

}

/*\\*/
.cards-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1em;
}
 .card{
    background:white;
     border-radius:16px;
     padding:18px;
     border:1px solid var(--border)
}
/* Plans */
#planos .container {
 position: relative;
}
 .plans{
    display:grid;
     grid-template-columns:1fr;
     gap: 16px;
  margin: 30px 0 20px;
}

 .plan{
    border-radius: 9px;
     padding:18px;
     background:white;
     box-shadow: 6px 0 62px rgba(144, 163, 177, .35);
     transition: all .3s;

}
.popular {
 outline: 2px solid var(--accent-1)
}
.plan:hover {
      box-shadow: 6px 0 62px rgba(144, 163, 177, .75), 0 0 5px rgba(144, 163, 177);
}
.plan-header {
 background: #f4f7f9;
 text-align: center;
 margin: -18px -18px 20px;
 padding: 30px 10px;
 border-radius: 10px;
}
.plan-header h3 {
 font-size: 26px;
 color: var(--accent-1)
}
 .plan .price{
    font-size: 18px;
     font-weight:300;
   line-height: 150%;
  color: var(--muted);
}
.plan .qtd-users {
     color:var(--muted);
}
.plan .plan-subject {
  font-weight: 600;
 color: var(--txt-color-2)
}
.plan .price:not(:has(strong)){
      font-weight:600;
 font-size: 25px;
}
.plan .price strong {
 font-size: 60px;
 font-weight: 600;
 letter-spacing: -2px;
 color: var(--txt-color-1);
}
.plan .price.special strong {
  font-size: 35px
}

.plan .price strong sup {
 font-size: 25px;
}
.plan li::before{
 content: url(../img/check.png);
 position: absolute;
 left: 0;
 top: 3px
 
}
.plan ul {
 padding: 0 10px;
}
.plan li {
 padding: 10px 10px 10px 35px;
 position: relative;
 list-style: none;
 
}
.plan [class^=btn] {
 margin: auto;
 display: grid;
 width: 85%;
 place-items: center;
 margin-bottom: 10px;
}
.plan .btn-ghost
{
 border: none;
 text-decoration: underline;
}
.btn-ghost.accent {
 color: var(--accent-1)
}
 .badge{
    position:absolute;
     left:50%;
     transform: translateX(-50%);
     top:-16px;
     background:var(--accent-1);
     color:white;
     padding:0 30px;
     line-height: 30px;
     border-radius:999px;
     font-weight:400;
     font-size: 15px;
     white-space: nowrap
}
/*switch*/


        .toggle-switch-container {
          --primary-color: var(--accent-1);
          --text-color-active: #ffffff;
          --text-color-inactive: #555555;
          --toggle-background: #eeeeee;
          --animation-duration: 0.3s;

          display: flex;
          align-items: center;
          position: absolute;
          background-color: var(--toggle-background);
          border-radius: 50px;
          padding: 5px;
          width: 240px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         right: 24px;
         top: 10px;
        }
        @media screen and (max-width: 1024px){
         .toggle-switch-container {
          position: relative;
          margin: 10px auto;
         }
        }
        .toggle-checkbox {
            display: none;
        }

        .toggle-label {
            flex-grow: 1;
            text-align: center;
            padding: 10px 0;
            cursor: pointer;
            z-index: 2;
            font-size: .9em;
            transition: color var(--animation-duration);
            user-select: none;
        }

        .monthly-label {
            color: var(--text-color-active);
        }

        .yearly-label {
            color: var(--text-color-inactive);
        }

        .toggle-switch {
            position: absolute;
            width: calc(50% - 5px);
            height: calc(100% - 10px);
            background-color: var(--primary-color);
            border-radius: 50px;
            top: 5px;
            left: 5px;
            z-index: 1;
            transition: transform var(--animation-duration) ease-in-out;
        }

        .toggle-checkbox:checked ~ .toggle-switch {
            transform: translateX(100%);
        }

        .toggle-checkbox:checked ~ .monthly-label {
            color: var(--text-color-inactive);
        }

        .toggle-checkbox:checked ~ .yearly-label {
            color: var(--text-color-active);
        }




/* Integrations & footer */
 .logos{
    display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:10px
}
 footer{
    background:#1c4738;
     padding:50px 0;
  color: #FFF;
  text-align: center
}
 .footer-grid{
    display:grid;
     grid-template-columns:1fr;
}
.social, .footer-menu{
 list-style: none;
 display: flex;
 gap: 20px;
 align-items: center;
 justify-content: center;
 border-bottom: 1px solid rgba(255,255,255,.05);
 margin: 0;
 padding: 30px 0
}
.footer-menu a:hover {
 text-decoration: underline;
 color: var(--accent-2)
}
.social img {
 opacity: .25;
 width: 90%
}
.social a:hover img
{
 opacity: 1
}
footer h2 {
  padding: 40px 0 0;
 font-weight: 200;
}
.desenvolvido-no-br {
 font-size: .9em;
 font-weight: 300;
 letter-spacing: .8px;
 color: #0bb547;
}
.desenvolvido-no-br img {
 vertical-align: middle;
 width: 24px;
 margin-right: 5px;
}
footer h2 {
 color: #FFF;
}

.selos{
 display: flex;
 justify-content: center;
 gap: 30px;
 flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.05);
 padding-top: 40px;
 margin-top: 40px;

}
.selos img
{
 vertical-align: middle;
}

 footer #copy{
     padding-top:35px;
     text-align:center;
     font-size:13px;
  font-weight: 300;
  opacity: .5
}
#copy a {
 text-decoration: underline
}
/* FAQ */
 details{
    background:#f5f7fa;
     padding:14px;
}
 summary{
    list-style:none;
     cursor:pointer;
     display:flex;
     align-items:center;
     justify-content:space-between;
     font-weight:600;
     font-size: 20px;
   position: relative;
}
summary::after,summary::before{
  content: "";
  display: block;
 width: 22px;
 height: 3px;
 background: var(--accent-1);
 position: absolute;
 right: 0;
 border-radius: 5px;
 transition: all .2s;
}
summary::before{
  transform: rotate(90deg)
}
details[open] {
 outline: 2px solid var(--accent-1);
 color: var(--accent-1)
}
details[open] summary::before {
   transform: rotate(0deg);
   opacity: 0;
}

.note {
    margin-top:10px;
    font-size:12px;
    color: #94a3b8;
    text-align : center;
}
/*sobre*/
#sobre {
 background: #1c4738 url(../img/bg-sobre-a-dokify.png) no-repeat right -60% bottom / 72% auto;
 color: #FFF;
 padding-bottom: 0;
}
#sobre .grid-me {
 gap: 50px;
}

#sobre .col-content *:not(.btn-primary)
{
 text-align: left;
 color: #FFF;
}
#sobre .grid-me .col-img {
 margin-bottom: -6px;
  align-content: end;
}
#sobre .col-img img {
 align-self: end;
}
#sobre .btn-primary {
 margin: 10px 0;
 display: inline-block;
}

/*cta*/
#cta {
 overflow: hidden;
 background-color: #e5fedb;
}
#cta h2 {
 font-size: 2.8em;
 line-height: 120%;
}
#cta .lead-small{
 text-align: left
}
#cta .col-content{
 place-content: center;
 display: flex;
 flex-direction: column;
}
#cta .col-img img
{
 width: 100%;
 position: relative
}

/* Responsive */
@media(max-width: 1240px) {
 .logo img {
  max-width: 180px;
 }
 .container.nav, .hero .hero-flex {
  padding-right: 20px;
  padding-left: 20px;
 }
}
@media(max-width: 980px) {
  .hero-flex{
   padding: 80px 0 0
  }
 .hero-flex .col-content{
  max-width: unset;
  text-align: center;
 }
 .hero .hero-flex {
  flex-wrap: wrap; }

 .hero-flex .col-img img {
  max-width: 80%;
  margin: 0 auto;
  display: block;
  width: auto;
 }
 .actions {  justify-content: center;}
 .lista-details {
  margin: 20px auto;
  max-width: 50ch;
  
 }
 .lista-details li{
  text-align: left;
 }
#como-funciona h2, #como-funciona .lead-small {
 text-align: center
}
 .steps {
  margin: 0 auto 40px;
  max-width: 80%;
 }

 
 #cta .grid-me {
  gap: 30px;
  display: grid;
  text-align: center;
 }
 #cta .lead-small{
  text-align: center
 }
 #cta .btn-primary{
  white-space: nowrap
 }
}

 @media(min-width:768px){
     .hero-grid{
        grid-template-columns:1fr 460px
    }
     .kpis{
        grid-template-columns:repeat(3,1fr)
    }
     .grid-me {
       display: grid;
       grid-template-columns:1fr 460px;
       gap: 20px;
     }
       .col-img {
      place-content: center;
     }
     .col-img img {
      width: 100%;
     }

     .grid-3{
        grid-template-columns:repeat(3,1fr)
    }
     .plans{
        grid-template-columns:repeat(4,1fr)
    }
     nav.main{
        display:flex
    }
     .mobile-toggle{
        display:none
    }
     .logos{
        grid-template-columns:repeat(4,1fr)
    }
     .footer-grid{
        display: grid
    }
}
@media (max-width: 1100px) {
     .plans{
        grid-template-columns:repeat(2,1fr)
    }
}
 @media(max-width:767px){
     nav.main{
        display:none
    }
     .mobile-toggle{
        display:block
    }
   .col-img { 
   place-items: center;
   }
    .col-img img {
     max-width: 100%;
     display: block
    }
}

 @media(max-width:600px){
     .plans{
        grid-template-columns:1fr
    }

 }