/* ===============================
   Base & Paleta (tema invertido)
   =============================== */
:root{
  --c-primary: #029aa6;
  --c-primary-10: rgba(2,154,166,.18);
  --c-primary-15: rgba(2,154,166,.28);

  /* Azul escuro mais “vivo”, no tom dos manuais */
  --c-dark: #063554;      /* azul escuro principal */
  --c-bg:   #084869;      /* fundo do body, um pouco mais claro */

  /* textos para esse fundo azul */
  --c-text:   #f3f8fb;    /* texto principal bem claro */
  --c-text-2: #d2e8f5;    /* texto secundário */
  --c-text-3: #9fb4c9;    /* texto terciário */

  /* borda mais suave para fundo azul */
  --c-border: rgba(15,23,42,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-bg);            /* fundo padrão azul escuro */
  color:var(--c-text);               /* texto claro por padrão */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}

/* Links */
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

/* Utils mínimos */
.container-padrao{max-width:1152px;margin:0 auto}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-3{gap:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}

/* -------------------------------
   Header / Navegação
   ------------------------------- */
header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(4,15,30,.92);     /* antes branco translúcido → agora azul escuro translúcido */
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid rgba(15,23,42,.9);
}
header nav{padding:.75rem 0}

/* -------------------------------
   Tipografia
   ------------------------------- */
.titulo-principal{
  font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size: clamp(28px, 4vw, 44px);
  color: #f9fafb;                    /* título bem claro no fundo escuro */
}
.titulo-secundario{
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(22px, 3vw, 36px);
  color: #e5f4f7;                    /* subtítulo claro */
}
.texto-base{color:var(--c-text-2); font-size:1.05rem}
.text-secundaria{color:var(--c-primary)}

/* -------------------------------
   Seções
   ------------------------------- */
section{
  padding: 3rem 0;
  background: transparent;           /* fundo padrão vem do body (azul escuro) */
}
#hero{
  padding-top: 1.25rem;
  padding-bottom: 1.6rem;
  background:
    radial-gradient(circle at top left, rgba(2,154,166,.28), transparent 55%);
}

/* bloco originalmente “claro” vira uma faixa levemente mais clara de azul */
.bloco-claro{
  background: color-mix(in oklab, var(--c-dark) 70%, var(--c-primary) 30%);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}

/* -------------------------------
   Grid utilitário
   ------------------------------- */
.grid{display:grid; gap: 2rem}
@media (min-width: 768px){
  .md\:grid-cols-2{grid-template-columns: 1fr 1fr}
  .md\:grid-cols-3{grid-template-columns: repeat(3, 1fr)}
}

/* -------------------------------
   Cards de Preço
   ------------------------------- */
.card-preco{
  background:#ffffff;                /* CARD branco sobre fundo azul */
  color:#0f172a;                     /* texto escuro dentro do card */
  border:1px solid #e2e8f0;
  border-radius:16px; padding:1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
  text-align:center; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.card-preco img{
  width:100%; display:block;
  border:1px solid #e2e8f0;
  border-radius:16px
}
.card-preco h4{
  margin:.85rem 0 .35rem;
  font-size:1.05rem;
  color: #0f172a;
}
.card-preco .faixa-precos{
  display:flex; flex-direction:column; align-items:center;
  gap:.2rem; margin:.35rem 0 .25rem
}
.card-preco .preco-ancora{
  font-size:.95rem;
  color:#64748b;
  text-decoration: line-through
}
.card-preco .preco-parcelado{
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.01em;
  line-height:1.1
}
.card-preco .preco-avista{
  font-size:1.05rem;
  font-weight:700;
  color: var(--c-primary)
}
.card-preco .btn-primaria{margin-top:.9rem; width:100%}

/* Destaque Combo */
.destaque-combo{
  border:2px solid var(--c-primary);
  background: rgba(2,154,166,.07);
  border-radius: 20px; padding: 1.75rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.preco-combo{
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  color: var(--c-primary)
}

/* -------------------------------
   Botões (globais)
   ------------------------------- */
.btn-primaria,.btn-secundaria{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; padding:.9rem 1.2rem; font-weight:700;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor:pointer; border: 1px solid transparent;
}
.btn-primaria{
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(2,154,166,.28)
}
.btn-primaria:hover{filter:brightness(.95)}
.btn-primaria:active{transform:translateY(1px)}
.btn-secundaria{
  background:#ffffff;                /* agora sempre botão branco */
  color:#0f172a;                     /* texto escuro no botão claro */
  border-color:#e2e8f0;
}
.btn-secundaria:hover{background:#f8fafc}

/* -------------------------------
   Barra de aprovados
   ------------------------------- */
#barra-aprovados{
  background: var(--c-primary); height: 12px; border-radius: 999px;
  width:0%; transition: width .3s ease;
}
#contador-aprovados{color:var(--c-text-2)}

/* -------------------------------
   Rodapé
   ------------------------------- */
.rodape{
  border-top:1px solid rgba(15,23,42,.8);
  background: #020617;               /* rodapé azul bem escuro */
  color:var(--c-text-3);
  font-size:.95rem; padding: 2.25rem 0
}

/* -------------------------------
   Helpers
   ------------------------------- */
.rounded-2xl{border-radius:16px}
.border{border:1px solid var(--c-border)}
.text-center{text-align:center}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.pt-14{padding-top:3.5rem}
img{max-width:100%; height:auto; display:block}

/* Botões no bloco de preços ocupam largura do card em telas pequenas */
@media (max-width: 480px){
  .card-preco .btn-primaria{width:100%}
}

/* Acessibilidade */
a:focus, button:focus{
  outline:2px solid color-mix(in oklab, var(--c-primary) 40%, #fff);
  outline-offset:2px; border-radius:12px;
}

/* ===============================
   HERO (layout + ajustes finos)
   =============================== */

/* Grid base (mobile): title -> media -> bar -> ctas */
.hero-grid{
  display:grid;
  column-gap: 2rem;
  row-gap: .6rem;
  grid-template-areas:
    "title"
    "media"
    "bar"
    "ctas";
}

/* Desktop: 2 colunas e linhas esticadas */
@media (min-width: 768px){
  .hero-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title media"
      "bar   media"
      "ctas  media";
    align-items: stretch;
  }
}

/* Áreas do grid */
.hero-title{ grid-area: title; }
.hero-bar  { grid-area: bar; }
.hero-ctas { grid-area: ctas; }

/* Texto acima da barra – reduz a distância (1) */
#hero .subtitle{
  margin: .25rem 0 .35rem;
}

/* Barra: reduz a distância para baixo (2) */
.hero-bar{ margin-top: 0; }
.hero-bar > .flex{ margin-bottom: .25rem; }

/* Coluna da imagem */
.hero-media{
  grid-area: media;
  position: relative;
  min-height: 520px;
}

.hero-media .hero-img{
  position:absolute; right:0; bottom:0;
  height:100%; width:auto; max-height:640px;
  object-fit:contain; display:block; pointer-events:none;
}

/* BOTÕES do HERO – altura confortável e sem “stretch” */
section#hero .hero-ctas{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top: 0;
}
section#hero .hero-ctas .btn-primaria,
section#hero .hero-ctas .btn-secundaria{
  padding: 1rem 1.1rem !important;
  line-height: 1.1 !important;
  font-size: .97rem;
  height:auto !important;
  min-height:0 !important;
}


/* ====== HERO: remover “folga” embaixo do médico ====== */
#hero{ padding-bottom: 0 !important; }

/* (opcional) se quiser que a próxima seção encoste bem, diminua o padding-top dela */
#comunidade{ padding-top: 2rem; }

/* ====== HERO: reduzir pela metade as distâncias 1 e 2 ====== */
.hero-grid{ row-gap: .3rem !important; }

#hero .subtitle{ margin: .12rem 0 .18rem !important; }

#hero .hero-bar > .flex{ margin-bottom: .125rem !important; }
#hero .hero-bar .mb-2{ margin-bottom: .125rem !important; }

#hero .hero-ctas{ margin-top: 0 !important; }

#hero .hero-ctas .btn-primaria,
#hero .hero-ctas .btn-secundaria{
  padding: .78rem 1.1rem !important;
  line-height: 1.1 !important;
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 767px){
  #hero .hero-ctas{
    margin-top: .8rem !important;
  }
}

@media (max-width: 767px){
  #hero{
    padding-bottom: 1.2rem !important;
  }
}

@media (max-width: 767px){
  .hero-grid{
    row-gap: .75rem !important;
  }
}

/* Vídeo responsivo 16:9 */
.video-wrapper{
  position:relative; padding-bottom:56.25%; height:0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.video-wrapper iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border: 0;
}

/* Coluna de texto: força empilhamento e alinha botão embaixo */
#plataforma .plataforma-texto{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.75rem;
}

/* Pequeno respiro entre título e grid */
#plataforma .titulo-secundario{ margin-bottom:.5rem; }

/* Mobile: um pouco mais de espaço entre vídeo e texto */
@media (max-width: 767px){
  #plataforma .grid{ row-gap: 1rem; }
}


/* ===============================
   2.11 · Dúvidas (contato + FAQ)
   =============================== */
.duvidas-sec{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-primary) 26%, var(--c-dark)) 0%,
    var(--c-dark) 100%
  );
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 3rem 0;
  color: var(--c-text);             /* texto claro dentro do bloco */
}

/* Card do WhatsApp (CARD branco em cima do fundo azul) */
.wa-card{
  display:flex; align-items:center; gap:.8rem;
  background:#fff;
  color:#0f172a;
  border:1px solid #e2e8f0;
  border-radius:14px; padding:.9rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.wa-icon{
  width:42px; height:42px; min-width:42px;
  display:grid; place-items:center;
  border-radius:10px;
  background: var(--c-primary-10);
  color: var(--c-primary);
}
.wa-icon i{ font-size: 22px; line-height: 1; }

.wa-title{ font-weight:800; color: #0f172a; }
.wa-sub{ color: #475569; font-size:.98rem }

/* Redes sociais minimalistas */
.sociais{ display:flex; gap:.9rem }
.sociais a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid #e2e8f0;
  border-radius:10px; background:#fff;
  color:#0f172a;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.sociais a:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  color: var(--c-primary);
  border-color: color-mix(in oklab, var(--c-primary) 25%, #cbd5e1);
}
.sociais i{ font-size: 18px; line-height: 1; }

/* ===== FAQ minimalista ===== */
.faq-q{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;

  padding: .9rem 0;
  color: var(--c-text);            /* pergunta clara */
  font-weight: 800;
  text-align: left;
  display: flex; align-items: center; justify-content: space-between;

  border-bottom: 1px solid rgba(148,163,184,.45);
  transition: color .15s ease;
}

/* primeira linha com borda superior para fechar o bloco */
.faq-item:first-child .faq-q{
  border-top: 1px solid rgba(148,163,184,.45);
}

/* foco acessível */
.faq-q:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--c-primary) 40%, #fff);
  outline-offset: 2px;
  border-radius: 8px;
}

/* resposta fechada por padrão */
.faq-a{
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height .25s ease, padding .25s ease;
  color: var(--c-text-2);
}

/* ===== Ícone “+ → –” (linhas) ===== */
.faq-ico{
  width: 18px; height: 18px;
  position: relative;
  display: inline-block;
  margin-left: .75rem;
}

/* traço horizontal */
.faq-ico::before,
.faq-ico::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: var(--c-text-2);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}
/* traço vertical (forma o +) */
.faq-ico::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ===== Estado aberto ===== */
.faq-item.is-open .faq-a{
  max-height: 320px;
  padding: .5rem 0 1rem;
}
/* quando aberto: virar “–” */
.faq-item.is-open .faq-ico::after{
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-item.is-open .faq-ico::before,
.faq-item.is-open .faq-ico::after{
  background: var(--c-primary);
}


/* ===== Alinhamento perfeito do topo no bloco de Dúvidas ===== */

#duvidas .container-padrao{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  align-items: start;
}
@media (min-width: 768px){
  #duvidas .container-padrao{ grid-template-columns: 1fr 1fr; }
}

#duvidas .container-padrao > div > :first-child{
  margin-top: 0 !important;
}

#duvidas .faq{ margin-top:0; padding-top:0; }

#duvidas .faq .faq-item:first-child .faq-q{
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* ===============================
   2.9 · Garantia
   =============================== */

/* Fundo agora azul suave */
.garantia-sec{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-primary) 20%, var(--c-dark)) 0%,
    var(--c-dark) 100%
  );
  padding: 2.5rem 0;
  border-top: 1px solid var(--c-border);
  color: var(--c-text);
}

/* Cartão interno BRANCO */
.garantia-card{
  background: #ffffff;
  color:#0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  padding: 2rem 1.5rem;
}

/* Grid: empilhado no mobile, 2 colunas no desktop */
.garantia-grid{
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 900px){
  .garantia-grid{
    grid-template-columns: 420px 1fr;
    gap: 2.25rem;
  }
}

/* Coluna do selo */
.garantia-media{
  display: grid;
  place-items: center;
}
.garantia-selo{
  width: 60%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
}

/* Coluna da copy */
.garantia-copy{
  text-align: left;
}
.garantia-title{
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(26px, 3.2vw, 42px);
  color: #0f172a;
}
.garantia-lead{
  margin-top: .9rem;
  font-size: clamp(16px, 1.3vw, 18px);
  color: #475569;
}
.garantia-text{
  margin-top: .75rem;
  color: #475569;
}

/* Botão alinhado à esquerda e com respiro */
.garantia-btn{
  margin-top: 1.25rem;
  display: inline-flex;
}

/* Ajustes em telas muito pequenas */
@media (max-width: 480px){
  .garantia-card{ padding: 1.5rem 1rem; }
  .garantia-btn{ width: 100%; justify-content: center; }
}


/* ===============================
   2.10 · Quem sou eu
   =============================== */
.quem-sec{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-dark) 80%, #020b16) 0%,
    var(--c-bg) 100%
  );
  padding-top: 3.25rem;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  color: var(--c-text);
}

/* grid */
.quem-grid{
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* desktop: 2 colunas */
@media (min-width: 992px){
  .quem-grid{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.25rem;
  }
}

/* título e textos */
.quem-title{
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(28px, 4vw, 46px);
  color: #f9fafb;
  margin: 0 0 1rem 0;
}
.quem-lead{
  color: var(--c-text-2);
  font-size: clamp(16px, 1.25vw, 18px);
  margin-bottom: .9rem;
}
.quem-text{
  color: var(--c-text-2);
  margin-top: .35rem;
}

/* coluna da imagem */
.quem-media{
  position: relative;
  min-height: clamp(380px, 48vw, 680px);
  order: 2;
}

.quem-img{
  position: absolute;
  right: -20px;
  bottom: -1px;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

/* mobile: empilha, imagem por último */
@media (max-width: 991px){
  .quem-grid{
    grid-template-columns: 1fr;
  }
  .quem-media{
    order: 2;
    min-height: 360px;
    margin-top: .75rem;
  }
  .quem-img{
    right: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
  }
}



/* ===============================
   2.5 · O que vou receber
   =============================== */
.receber-sec{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-dark) 88%, #0e1b2a) 0%,
    color-mix(in oklab, var(--c-dark) 78%, #0e1b2a) 100%
  );
  padding: 3.5rem 0;
  color: #eaf3f6;
}

.receber-grid{
  display: grid; gap: 2rem;
}
@media (min-width: 992px){
  .receber-grid{
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2.25rem;
  }
}

.receber-left .titulo-secundario{ color:#fff }
.receber-left .texto-base{
  color: color-mix(in oklab, #ffffff 82%, var(--c-text-2));
  max-width: 56ch;
}

/* Cartão do acordeão (direita) */
.receber-right{ display:flex }
.receber-card{
  width:100%;
  background: color-mix(in oklab, var(--c-dark) 72%, #0e1b2a);
  border: 1px solid color-mix(in oklab, var(--c-primary) 14%, var(--c-dark));
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

/* ===== Acordeão (reaproveita estrutura do FAQ) ===== */
#receber .faq{ margin:0 }

/* Botão da pergunta */
#receber .faq-q{
  width: 100%;
  padding: 1rem 1.15rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex; align-items: center; justify-content: space-between;
  color:#e8f4f8;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .15s ease;
}
#receber .faq-q:hover{ color: #fff; }

/* resposta fechada por padrão */
#receber .faq-a{
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  color: color-mix(in oklab, #ffffff 86%, var(--c-text-2));
  transition: max-height .25s ease, padding .25s ease;
}

/* aberto */
#receber .faq-item.is-open .faq-a{
  max-height: 320px;
  padding: .5rem 1rem 1rem;
}

/* numeração e título à esquerda */
.acc-num{
  font-weight: 800;
  font-size:.95rem;
  color: color-mix(in oklab, var(--c-primary) 92%, #fff);
  margin-right:.8rem;
  letter-spacing:.5px;
  min-width: 2.1ch;
}
.acc-title{ flex:1; display:inline-block }

/* ícone + / – com a sua cor primária */
#receber .faq-ico{
  width: 18px; height: 18px; position: relative; display:inline-block; margin-left:.75rem;
}
#receber .faq-ico::before,
#receber .faq-ico::after{
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:2px;
  background: color-mix(in oklab, #ffffff 85%, var(--c-primary));
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}
#receber .faq-ico::after{ transform: translate(-50%, -50%) rotate(90deg) }
#receber .faq-item.is-open .faq-ico::after{ transform: translate(-50%, -50%) rotate(0deg) }
#receber .faq-item.is-open .faq-ico::before,
#receber .faq-item.is-open .faq-ico::after{ background: var(--c-primary); }

#receber .faq > .faq-item:first-child .faq-q{ border-top: 0 }
#receber .faq > .faq-item:last-child  .faq-q{ border-bottom: 0 }

.acc-list{
  margin: .25rem 0 1rem 0;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.acc-list li{ margin:.25rem 0 }

@media (max-width: 991px){
  .receber-sec{ padding: 2.75rem 0 }
  .receber-card{ border-radius: 16px }
  #receber .faq-q{ padding: .9rem .95rem }
}

#receber .faq-a { display: block; }


/* ===============================
   2.4 · Primeiros depoimentos
   =============================== */
.depos-sec{
  background: color-mix(in oklab, var(--c-dark) 85%, #020b16);
  padding: 3rem 0;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  color: var(--c-text);
}

.depos-grid{
  display:grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px){
  .depos-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px){
  .depos-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Cartão da imagem do depoimento (CARD branco) */
.depo-card{
  margin:0; padding:0;
  background:#fff;
  color:#0f172a;
  border:1px solid #e2e8f0;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 
              0 12px 32px rgba(0,0,0, .32);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Mantém proporção vertical 680x800 e cobre o cartão */
.depo-card img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio: 17 / 20;
  object-fit: cover;
}

/* ===============================
   2.7 · Depoimentos (Carrossel)
   =============================== */
.carrossel-sec{
  background: color-mix(in oklab, var(--c-dark) 88%, #020b16);
  padding: 3rem 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}

/* viewport rola horizontalmente */
.carrossel-viewport{
  position: relative;
  margin-top: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}
.carrossel-viewport::-webkit-scrollbar{ display:none; }

.carrossel-track{
  display: inline-flex;
  gap: 1rem;
  padding: .25rem;
}

/* Cada imagem ocupa largura fixa responsiva */
.depo-img{
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 360px);
  height: auto;
  aspect-ratio: 17 / 20;
  object-fit: cover;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  user-select: none;
}

@media (prefers-reduced-motion: reduce){
  #depoimentos-carrossel .carrossel-viewport{ scroll-behavior: auto; }
  #depoimentos-carrossel .carrossel-track{ transition: none; }
}

/* Forçar botão em 1 linha no mobile */
@media (max-width: 480px){
  header .btn-primaria,
  header a.btn-primaria {
    white-space: nowrap;
    font-size: 0.85rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

/* Centralizar botões no mobile (exceto o do header) */
@media (max-width: 767px){
  .btn-primaria,
  .btn-secundaria{
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
  }

  header .btn-primaria,
  header .btn-secundaria{
    margin-left: 0;
    margin-right: 0;
  }

  #hero .hero-ctas{
    justify-content: center;
  }
}

/* ===== CENTRALIZAÇÃO DE BOTÕES NO MOBILE (exceto header) ===== */
@media (max-width: 767px){
  section a.btn-primaria,
  section a.btn-secundaria,
  section button.btn-primaria,
  section button.btn-secundaria{
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  header .btn-primaria,
  header .btn-secundaria{
    display: inline-flex;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .card-preco .btn-primaria,
  .card-preco .btn-secundaria{
    display: flex;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===== Comunidade (desktop): título no topo, texto centralizado, botão na base ===== */
@media (min-width: 992px){
  #comunidade .container-padrao{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  #comunidade .container-padrao > div:nth-child(2){
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  #comunidade .container-padrao > div:nth-child(2) h2{
    margin: 0 0 1rem;
  }

  #comunidade .container-padrao > div:nth-child(2) p{
    display: block !important;
    margin-top: auto;
    margin-bottom: auto;
  }

  #comunidade .container-padrao > div:nth-child(2) .btn-primaria{
    margin-top: auto;
    align-self: flex-start;
  }
}

/* ===== Comunidade: ordem no mobile ===== */
@media (max-width: 767px){
  #comunidade .container-padrao{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "image"
      "cta";
    row-gap: .8rem;
    align-items: start;
  }

  #comunidade .container-padrao > div{
    display: contents;
  }

  #comunidade .container-padrao > div:last-child h2{ grid-area: title; margin: 0; }
  #comunidade .container-padrao > div:last-child p{ grid-area: text;  margin: .25rem 0 0; }

  #comunidade .container-padrao > div:first-child img{
    grid-area: image;
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  #comunidade .container-padrao > div:last-child .btn-primaria{
    grid-area: cta;
    align-self: start;
    justify-self: center;
    margin: .6rem auto 0 auto !important;
  }
}

/* MOBILE: reduzir ~10% os "primeiros depoimentos" (grid) */
@media (max-width: 767px){
  .depos-sec .depo-card{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .depos-sec .depos-grid{
    row-gap: 1rem;
  }
}

/* RECEBER: não esticar as colunas no desktop */
@media (min-width: 992px){
  .receber-grid{
    align-items: start;
  }
  .receber-right{
    align-items: flex-start;
  }
  .receber-card{
    height: auto;
    align-self: start;
  }
}

/* RECEBER: centralizar verticalmente o bloco da direita em relação ao da esquerda */
@media (min-width: 992px){
  .receber-grid{
    align-items: center;
  }
}


/* RECEBER — layout do grid e ordem dos itens */
@media (min-width: 992px){
  .receber-left .titulo-secundario{ margin-top: 0; }
  .receber-right{
    align-self: start;
    padding-top: .35rem;
  }
  .receber-grid{
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left right"
      "left cta";
    column-gap: 2.25rem;
    align-items: start;
  }

  .receber-left   { grid-area: left;  align-self: start; }
  .receber-right  { grid-area: right; align-self: start; }
  .receber-cta    { grid-area: cta;   justify-self: start; margin-top: 0.75rem; }
}

/* Mobile: botão centralizado */
@media (max-width: 991px){
  .receber-cta{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }
}

/* ====== Plataforma: reordenar no MOBILE (<= 767px) ====== */
@media (max-width: 767px){
  #plataforma .grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    align-items: start;
    grid-template-areas:
      "title"
      "text"
      "video"
      "cta";
    row-gap: 0.75rem;
  }

  #plataforma .plataforma-texto{ display: contents; }

  #plataforma .plataforma-texto .titulo-secundario{ grid-area: title; }
  #plataforma .plataforma-texto .texto-base{ grid-area: text; }

  #plataforma .video-wrapper{ grid-area: video; margin: .5rem 0; }

  #plataforma .plataforma-texto .btn-primaria{
    grid-area: cta;
    justify-self: center;
    margin-top: .75rem;
  }
}

/* ====== Desktop (>= 768px): volta ao normal ====== */
@media (min-width: 768px){
  #plataforma .plataforma-texto{ display: block; }
}

/* Alinhar a base do botão com a base do vídeo (mantendo GRID) */
@media (min-width: 992px){
  #plataforma .grid{
    align-items: end !important;
    column-gap: 2.25rem;
  }

  #plataforma .plataforma-texto{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
  }

  #plataforma .plataforma-texto .btn-primaria{
    margin-top: auto;
  }
}



/* Rodapé no mobile: links em cima, © embaixo */
@media (max-width: 480px){
  .rodape .container-padrao{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .rodape .container-padrao > .flex{
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
  }

  .rodape .container-padrao > div:first-child{
    font-size: 0.82rem;
    line-height: 1.4;
  }
}

/* ====== Combo Box ====== */
.combo-box{
  position: relative;
  background: #eaf7f8;              /* card claro */
  color:#0f172a;
  border: 1px solid var(--c-primary, #0097a4);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);

  max-width: 700px;
  margin: 2rem auto 0;
}

/* selo */
.selo-mais-vendido{
  position: absolute;
  top: -12px;
  right: 20px;
  background: #f44336;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .35rem .65rem;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

/* textos */
.combo-eyebrow{
  font-weight: 800;
  font-size: 1.1rem;
  color: #00303a;
}

.combo-de{
  font-size: .95rem;
  color: #777;
  margin-top: .25rem;
}
.combo-de span{
  text-decoration: line-through;
}

.combo-parcelado{
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-primary, #0097a4);
  margin: .25rem 0;
}
.combo-parcelado strong{
  font-weight: 900;
}

.combo-avista{
  font-size: 1rem;
  color: #333;
}

.combo-box .btn-primaria{
  margin-top: .75rem;
}

/* Centralizar ícones sociais no mobile */
@media (max-width: 768px){
  .sociais {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 1.5rem;
  }
 
}


.titulo-principal{
  color: #ffffff;              /* mantém "Ebooks" bem forte */
}

.titulo-destaque{
  color: #3fe0e6;              /* teal mais claro e contraste alto */
  font-weight: 900;
}



/* ============================
   AJUSTES HERO – ALTURA + IMAGEM
   ============================ */

/* altura mais enxuta do hero */
#hero{
  padding-top: 2.2rem !important;
  padding-bottom: 2.2rem !important;
}

/* grid com tudo centralizado na vertical no desktop */
@media (min-width: 992px){
  .hero-grid{
    align-items: center !important;
  }
}

/* coluna da imagem: sem min-height gigante e com flex */
.hero-media{
  min-height: auto !important;          /* remove os 520px */
  display: flex;
  align-items: center;
  justify-content: flex-end;            /* continua encostando à direita */
}

/* imagem volta a ser “normal”, limitada na altura */
.hero-media .hero-img{
  position: static !important;          /* sai do absolute */
  height: auto !important;
  max-height: 340px;                    /* altura máxima no desktop */
  width: auto;
}

/* mobile: hero ainda mais compacto e imagem menor */
@media (max-width: 767px){
  #hero{
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
  }

  .hero-media{
    justify-content: center;            /* centra a imagem no mobile */
  }

  .hero-media .hero-img{
    max-height: 260px;
  }
}

/* botão mais próximo do texto */
.hero-ctas{
  margin-top: 1.25rem !important;
}

}