:root{
  --navy:#2D374F;
  --white:#ffffff;
  --yellow:#FFCA40;
  --azul:#2D374F;
--amarelo:#FFCA40;
--roxo:#6760A8;
--cinza:#E6E6E6 ;
  --container: 1180px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    background: var(--cinza);
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* container */
.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

/* TOP BAR */
.topbar{
  background:var(--navy);
  color:var(--cinza);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding: 14px 0;
}

/* Logo */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.brand__logo{
  height:48px;          /* ajusta aqui pra ficar igual */
  width:auto;
  display:block;
}

/* Menu desktop */
.menu{
  display:flex;
  align-items:center;
  gap:34px;             /* espaçamento parecido com o print */
}
.menu a{
  color:var(--white);
  text-decoration:none;
  font-weight:800;
  font-size:16px;       /* tamanho parecido com o print */
  letter-spacing:0.2px;
}
.menu a:hover{ opacity: .9; 
  color:var(--amarelo);
font-size:20px ;}

/* Burger (aparece só no mobile) */
.burger{
  display:none;
  width:46px;
  height:42px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:0;
}
.burger span{
  display:block;
  height:4px;
  width:100%;
  background:var(--white);
  border-radius:999px;
  margin:7px 0;
}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 50;
}

/* Drawer (menu lateral) */
.drawer{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width: 320px;
  max-width: 86vw;
  background: var(--navy);
  color: var(--white);
  z-index: 60;

  transform: translateX(-105%);
  transition: transform .22s ease;
  padding: 18px;
}
.drawer.is-open{
  transform: translateX(0);
}

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.drawer__brand img{
  height:48px;
  width:auto;
  display:block;
}
.drawer__close{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--white);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  cursor:pointer;
  font-size: 18px;
}

.drawer__nav{
  display:flex;
  flex-direction:column;
  padding-top: 14px;
}
.drawer__nav a{
  color: var(--white);
  text-decoration:none;
  font-weight:800;
  font-size: 18px;
  padding: 12px 10px;
  border-radius: 12px;
}
.drawer__nav a:hover{
  background: var(--roxo);
  color: var(--amarelo);
}

/* HERO: banner responsivo mantendo a arte inteira */
.hero{
  position: relative;
  width: 100%;
  background-color: #6760A8;

  /* <<< MUITO IMPORTANTE >>> 
     coloque aqui a proporção real do seu hero.png
     (se não souber agora, use esse e depois ajustamos) */
  aspect-ratio: 1536 / 768;

  background-image: url("assets/hero.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* não corta */
}

/* Opcional: evita ficar “baixinho” em telas muito altas */
@media (min-height: 800px){
  .hero{
    min-height: 600px;
  }
}

/* botão ancorado por % (não quebra em outras telas) */
.hero__btn{
  position: absolute;

  /* ajuste fino aqui (bem mais estável que px) */
  left: 18%;
  top: 78%;

  transform: translateY(-50%);

  background: #FFCA40;
  color: #1b243b;

  padding: 16px 34px;
  border-radius: 999px;

  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.2vw, 22px);

  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  white-space: nowrap;
}
/* =========================
   DIVISÓRIA COM IMAGEM
   ========================= */

.divider{
  width: 100%;
  height: 46px; /* ajuste conforme sua arte */
  
  background-image: url("assets/divisoria.png");
  background-repeat: repeat-x;   /* repete só na horizontal */
  background-position: center;
  background-size: auto 100%;    /* mantém altura da imagem */
  margin-top: 10px;
}
/* =====================
   COMO FUNCIONA
   ===================== */

.como-funciona{
  background: #EFEFEF;

}

.como-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.como-texto h2{
  color: var(--roxo);
  margin-bottom: 16px;
}

.como-intro{
  font-weight: 600;
  margin-bottom: 28px;
}

.como-passos{
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.como-passos li{
  margin-bottom: 18px;
}

.como-passos strong{
  display: block;
  color: #2D374F;
}

.como-passos span{
  font-size: 14px;
  color: #333;
}

.btn-ver-planos{
  display: inline-block;
  background: #FFCA40;
  color: #1b243b;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.como-imagem img{
  width: 100%;
  max-width: 480px;
  display: block;
  margin: auto;
}
/* =====================
   PRA QUEM É – COM DIAGONAL (igual ao original)
   ===================== */

.pra-quem{
  position: relative;
  background: #2D374F;   /* azul escuro */
  color: #fff;
  overflow: hidden;

  /* espaço interno */
  padding: 90px 0 80px;
}

/* cria o corte diagonal no topo */
.pra-quem::before{
  content: "";
  position: absolute;
  left: 0;
  top: -70px;              /* sobe a peça diagonal */
  width: 100%;
  height: 140px;

  /* cor do fundo da seção de cima (cinza) */
  background: #EFEFEF;

  /* diagonal */
  transform: skewY(-2deg);
  transform-origin: top left;
}

/* conteúdo centralizado */
.pra-quem-conteudo{
  position: relative;
  z-index: 1;

  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* título */
.pra-quem h2{
  color: #FFCA40;
  font-weight: 800;
  margin: 0 0 12px;
  font-size: 33px;
}

/* texto */
.pra-quem p{
  margin: 0 0 33px;
  font-size: 20px;
  font-weight: 700;
}

/* lista centralizada com bullets amarelos */
.pra-quem-lista{
  list-style: none;
  padding: 0;
  margin: 0;
}

.pra-quem-lista li{
  margin: 22px 0;
  font-size: 18px;
}

.pra-quem-lista li::before{
  content: "•";
  color: #FFCA40;
  margin-right: 8px;
}

/* =====================
   DIVISÓRIA AMARELO + ROXO COM DEGRADÊ
   ===================== */

.divider-2{
  width: 100%;
  height: 48px;

  /* gradiente resolve a quebra visual */
  background:
  linear-gradient(
    to bottom,
     #2d374f 0%,
      #E6E6E6 70%,
       #E6E6E6 100%)
;

  position: relative;
  overflow: hidden;
}

/* imagem por cima do gradiente */
.divider-2::after{
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("assets/divisoria2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  pointer-events: none;
}



/* =====================
   PLANOS
   ===================== */

.planos{
  background:#EFEFEF;
  padding: 70px 0 90px;
}

.planos__titulo{
  text-align:center;
  font-size: 38px;
  font-weight: 900;
  color:#2D374F;
  margin: 0 0 36px;
}

.planos__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: stretch;
}

.plano{
  position:relative;
  border-radius: 34px;
  padding: 22px 22px 20px;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  min-height: 520px;
}

.plano__top{
  display:flex;
  justify-content:center;
  margin-bottom: 16px;
}

.plano__nome{
  display:inline-block;
  background:#2D374F;
  color:#fff;
  font-weight: 800;
  padding: 7px 40px;
  border-radius: 14px;
  font-size: 18px;
}

.plano__tag{
  position:absolute;
  top:-12px;
  left: 50%;
  transform: translateX(-50%);
  background:#2D374F;
  color:#fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 12px;
}

.plano__tag--right{
  left:auto;
  right: 22px;
  transform:none;
}

.plano__desc{
  text-align:center;
  font-size: 12.5px;
  color:#4b5563;
  margin: 0 0 16px;
  min-height: 42px;
}

.plano__lista{
  list-style:none;
  padding: 0;
  margin: 0 0 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  font-size: 13px;
  color:#2D374F;
  font-weight: 600;
}

.plano__lista li{
  position:relative;
  padding-left: 18px;
}
.plano__lista li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#2D374F;
  font-weight: 900;
}

.plano__preco{
  margin-top:auto;
  text-align:center;
  padding-top: 10px;
  color:#2D374F;
  font-weight: 900;
}

.plano__moeda{ font-size: 16px; margin-right: 6px; }
.plano__valor{ font-size: 54px; line-height: 1; }
.plano__mes{ font-size: 18px; font-weight: 800; opacity:.9; }

.plano__btn{
  margin: 14px auto 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 140px;

  padding: 10px 22px;
  border-radius: 999px;

  font-weight: 900;
  font-size: 13px;
  text-decoration:none;

  background:#FFCA40;
  color:#1b243b;

  cursor: pointer;

  /* animação */
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

/* HOVER */
.plano__btn:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

/* clique */
.plano__btn:active{
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}


/* Presença (roxo) */
.plano--presenca{
  background:#6a63b7;
  color:#fff;
}
.plano--presenca .plano__desc{ color: rgba(255,255,255,.9); }
.plano--presenca .plano__lista{ color:#fff; }
.plano--presenca .plano__lista li::before{ color:#fff; }
.plano--presenca .plano__nome{ background:#2D374F; }
.plano__preco--destaque{ color:#FFCA40; }

/* Pró (amarelo) */
.plano--pro{
  background:#FFCA40;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
.plano--pro .plano__desc{ color:#1b243b; }
.plano__lista--escura{ color:#1b243b; }
.plano__lista--escura li::before{ color:#1b243b; }

.plano__preco--pro{ color:#2D374F; }
.plano__btn--escuro{
  background:#2D374F;
  color:#fff;
}

/* Botão amarelo no roxo */
.plano__btn--amarelo{
  background:#FFCA40;
  color:#1b243b;
}


/* =====================
   DIFERENCIAIS
   ===================== */

.diferenciais{
  background:#6a63b7; /* roxo do layout */
  padding: 70px 0 80px;
}

.diferenciais__titulo{
  text-align:center;
  color:#fff;
  font-weight: 900;
  letter-spacing: .5px;
  margin: 0 0 28px;
  font-size: 22px;
}

.diferenciais__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dif-card{
  border-radius: 18px;
  padding: 22px 16px 16px;
  min-height: 220px;
  position: relative;
}

.dif-card--escuro{
  background:#2D374F;
  color:#fff;
}

.dif-card--amarelo{
  background:#FFCA40;
  color:#1b243b;
}

.dif-card__num{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  margin: 0 auto 10px;
  font-size: 18px;

  background:#FFCA40;
  color:#1b243b;
}

.dif-card--amarelo .dif-card__num{
  background:#2D374F;
  color:#fff;
}

.dif-card__title{
  text-align:center;
  font-weight: 900;
  font-size: 16px;
  margin: 0 0 8px;
}

.dif-card__text{
  text-align:center;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
  opacity: .95;
}

/* Hover leve (opcional, fica bonito) */
.dif-card{
  transition: transform .2s ease, box-shadow .2s ease;
}
.dif-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}
/* =====================
   SEÇÃO B2B
   ===================== */

.b2b{
  background:var(--azul); /* azul escuro */
  color: #fff;
  padding: 80px 0;
  overflow: hidden;
}

.b2b__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: center;
}

.b2b__texto h2{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
  color: #FFCA40;
}

.b2b__texto p{
  margin: 0 0 18px;
  font-size: 16px;
  opacity: .95;
}

.b2b__lista{
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.b2b__lista li{
  position: relative;
  padding-left: 18px;
  font-weight: 600;
}

.b2b__lista li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #FFCA40;
  font-weight: 900;
}

/* Botão (mesma vibe do site + animado) */
.b2b__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #FFCA40;
  color: #1b243b;

  padding: 14px 26px;
  border-radius: 999px;

  font-weight: 900;
  text-decoration: none;

  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.b2b__btn:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  background: #ffd95e;
}

.b2b__btn:active{
  transform: translateY(-1px) scale(.98);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

/* Card lateral */
.b2b__card{
  position: relative;
  border-radius: 22px;
  padding: 22px;
  background: var(--roxo);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.b2b__badge{
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--amarelo); 
  color: var(--azul);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}

.b2b__card h3{
    color: var(--amarelo);
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
}

.b2b__card p{
  margin: 0;
  opacity: .95;
  line-height: 1.45;
}
/* Imagem do card B2B */
.b2b__img{
  width: 100%;
            /* ajuste se quiser maior/menor */
  object-fit: contain;     /* não corta a arte */
  display: block;

  margin: 6px 0 14px;
  padding: 8px;

  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}


/* =====================
   FAQ
   ===================== */

.faq{
  background: #EFEFEF;
  padding: 80px 0;
}

.faq__titulo{
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  color: #2D374F;
  margin-bottom: 40px;
}

.faq__lista{
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq__item{
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  overflow: hidden;
}

.faq__pergunta{
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2D374F;
  text-align: left;
}

.faq__icon{
  font-size: 22px;
  font-weight: 900;
  color: #FFCA40;
  transition: transform .25s ease;
}

.faq__resposta{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.faq__resposta p{
  padding: 0 22px 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

/* ativo */
.faq__item.ativo .faq__resposta{
  max-height: 300px;
}

.faq__item.ativo .faq__icon{
  transform: rotate(45deg);
}

/* =====================
   SOBRE / QUEM ESTÁ POR TRÁS
   ===================== */

.sobre{
  background: #ffffff;
  padding: 90px 0;
}

.sobre__grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: center;
}

/* Foto */
.sobre__foto{
  display: flex;
  justify-content: center;
}

.sobre__foto img{
  width: 100%;
  max-width: 320px;
  border-radius: 28px;
  object-fit: cover;

  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Texto */
.sobre__texto h2{
  font-size: 32px;
  font-weight: 900;
  color: #2D374F;
  margin-bottom: 18px;
}

.sobre__texto p{
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 14px;
}

.sobre__texto strong{
  color: var(--roxo);
}

/* =====================
   CTA FINAL
   ===================== */

.cta-final{
  background:var(--roxo);
  padding: 70px 0 80px;
}

.cta-final__box{
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.cta-final__box h2{
  color: #FFCA40;
  font-weight: 900;
  font-size: 30px;
  margin: 0 0 14px;
}

.cta-final__box p{
  color: #ffffff;
  opacity: .95;
  margin: 0 0 22px;
  font-size: 16px;
}

/* Botão WhatsApp animado */
.cta-final__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #FFCA40;
  color: #1b243b;

  padding: 14px 26px;
  border-radius: 999px;

  font-weight: 900;
  text-decoration: none;

  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.cta-final__btn:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  background: #ffd95e;
}

.cta-final__btn:active{
  transform: translateY(-1px) scale(.98);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

@media (max-width: 768px){
  .cta-final__box h2{ font-size: 22px; }
  .cta-final__box p{ font-size: 15px; }
}

/* =====================
   FOOTER
   ===================== */

.footer{
  background: var(--azul);
  color: #fff;
}

.footer__grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 22px;
  padding: 26px 0;
}

.footer__logo{
  height: 54px;
  width: auto;
  display:block;
}

.footer__cnpj{
  margin: 8px 0 0;
  font-size: 14px;
  opacity: .9;
}

.footer__social{
  display:flex;
  gap: 12px;
  align-items:center;
}

.footer__icon{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, background-color .2s ease;
  text-decoration:none;
}

.footer__icon svg{
  width: 22px;
  height: 22px;
  fill: #FFCA40;
}

.footer__icon:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.14);
}

.footer__bottom{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 14px 0;
  text-align:center;
  opacity: .9;
  font-size: 13px;
}

/* Responsivo footer */
@media (max-width: 820px){
  .footer__grid{
    flex-direction: column;
    text-align:center;
  }
}


/* Responsivo */
@media (max-width: 900px){
  .sobre__grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sobre__foto{
    margin-bottom: 24px;
  }

  .sobre__texto h2{
    font-size: 26px;
  }
}


/* Mobile: diminui um pouco */
@media (max-width: 980px){
  .b2b__img{
   
  }
}


/* Responsivo */
@media (max-width: 980px){
  .b2b__grid{
    grid-template-columns: 1fr;
  }
  .b2b__texto h2{
    font-size: 24px;
  }
}


/* Responsivo */
@media (max-width: 1100px){
  .diferenciais__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .diferenciais__grid{
    grid-template-columns: 1fr;
  }
  .diferenciais__titulo{
    font-size: 18px;
  }
  .dif-card{
    min-height: auto;
  }
}

/* Responsivo */
@media (max-width: 1200px){
  .planos__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .planos__grid{ grid-template-columns: 1fr; }
  .planos__titulo{ font-size: 30px; }
  .plano{ min-height: auto; }
}



@media (max-width: 768px){
  .pra-quem{
    padding: 70px 0 60px;
  }

  .pra-quem::before{
    top: -55px;
    height: 110px;
    transform: skewY(-4deg);
  }
}


/* mobile */
@media (max-width: 900px){
  .como-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .como-imagem{
    margin-top: 40px;
  }
}


/* mobile: um pouco mais baixa */
@media (max-width: 768px){
  .divider{
    height: 36px;
  }
}


  .hero__btn{
    left: 11%;
  
    padding: 9px 19px;
  }

/* Responsivo: no mobile some menu desktop e aparece burger */
@media (max-width: 980px){
  .menu--desktop{ display:none; }
  .burger{ display:block; }
  .brand__logo{ height:42px; }
}