/* CSS não-crítico da LP.
   O CSS crítico da hero está inline em index.html para não atrasar o LCP.
   Este arquivo recebe o restante das seções conforme forem construídas
   (prova social, calculadora, /obrigado etc). */

/* ── Menu da topbar (abre pelo ícone sanduíche) ─────────────── */
.nav-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:20px;
  min-width:200px;
  background:rgba(239,231,216,0.94);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:0.5px solid rgba(255,255,255,0.55);   /* linha clara em volta — estilo Apple */
  border-radius:14px;
  box-shadow:0 12px 30px -10px rgba(61,42,31,0.28),
             inset 0 1px 0 rgba(255,255,255,0.6);   /* brilho superior interno */
  padding:6px;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity 0.18s ease,transform 0.18s ease;
}
.nav-menu.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.nav-menu a{
  padding:11px 14px;
  border-radius:6px;
  font-weight:500;
  font-size:15px;
  color:var(--chocolate);
  text-decoration:none;
}
.nav-menu a:hover,
.nav-menu a:active{
  background:rgba(61,42,31,0.06);
}
.nav-menu .nav-menu-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:6px;
  text-align:center;
  background:#25D366;   /* verde WhatsApp */
  color:#fff;
  font-weight:700;
  border-radius:999px;  /* pílula */
}
.nav-menu .nav-menu-cta .wpp-glyph{width:17px;height:17px}
.nav-menu .nav-menu-cta:hover,
.nav-menu .nav-menu-cta:active{
  background:#1FB855;
}
/* alvos das âncoras não ficam sob a topbar sticky */
#sec-precos,#sec-sobre,#sec-deslocamento{
  scroll-margin-top:74px;
}

/* ── Seção 2 — benefício concreto ───────────────────────────── */
.beneficio{
  --foto-w:80%;          /* largura da foto; o H2 acompanha via cálculo abaixo */
  background:var(--cru);
  padding:60px 0 64px;   /* respiro vertical; sem padding lateral p/ foto full-bleed */
}
.beneficio-titulo{
  font-weight:800;
  font-size:26px;
  line-height:1.03;      /* apertado: duas linhas como um título só quebrado */
  color:#3D2A1F;
  padding:0 calc((100% - var(--foto-w)) / 2);  /* borda alinhada com a da foto */
  margin-bottom:5px;    /* respiro antes da foto */
}
.beneficio-titulo .destaque{
  font-size:1.5em;       /* "Sem estresse!" 50% maior que "Sem filas" */
}
.beneficio-foto{
  display:block;
  width:var(--foto-w);   /* 30% menor que a largura do container */
  height:auto;           /* mantém a proporção real 960×641 */
  margin:0 auto;         /* centralizada */
  border-radius:6px;     /* cantos levemente arredondados, consistente com a foto da hero */
}
.beneficio-sub{
  margin-top:36px;       /* respiro depois da foto */
  padding:0 calc((100% - var(--foto-w)) / 2);  /* borda alinhada com a da foto */
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  color:rgba(61,42,31,0.62);  /* chocolate suavizado, tom intermediário/acinzentado */
}
/* corpo causa → consequência: duas linhas empilhadas, sem lista/caixa/ícone.
   Hierarquia por contraste tipográfico, não por decoração. */
.beneficio-mecanismo{
  margin:52px auto 0;    /* ar generoso entre a foto e a 1ª linha */
  max-width:min(var(--foto-w),30ch);   /* leitura confortável, não estica */
  text-align:center;
  font-weight:700;       /* linha com leve destaque — o mecanismo */
  font-style:italic;
  font-size:20px;
  line-height:1.3;
  color:#3D2A1F;         /* chocolate escuro, mesma cor do H1 */
}
.beneficio-ganho{
  margin:8px auto 0;     /* respiro entre as duas linhas */
  max-width:min(var(--foto-w),34ch);
  text-align:center;
  font-weight:400;       /* tom mais quieto — o ganho */
  font-size:16px;
  line-height:1.5;
  color:rgba(61,42,31,0.6);
}
@media (min-width:480px){
  .beneficio-titulo{font-size:34px}
}

/* ── Seção 3 — nossa estrutura ──────────────────────────────── */
.estrutura{
  --foto-w:80%;
  background:var(--cru);
  padding:72px 0 72px;   /* respiro generoso separando das seções vizinhas */
}
.estrutura-titulo{
  font-weight:800;
  font-size:26px;
  line-height:1.03;
  color:var(--chocolate);   /* chocolate, conforme pedido */
  text-align:center;
  padding:0 calc((100% - var(--foto-w)) / 2);
  margin-bottom:28px;    /* respiro entre título e foto */
}
/* Carrossel em pilha (foto da frente + espiadas laterais) */
.estrutura{overflow-x:clip}   /* trava scroll horizontal das espiadas */
.equip-stack-wrap{
  width:100%;
}
.equip-stack{
  position:relative;
  width:60%;
  max-width:280px;
  aspect-ratio:4/5;
  margin:0 auto;
}
.equip-card{
  position:absolute;inset:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--musgo);
  box-shadow:0 16px 34px -10px rgba(61,42,31,0.5),
             0 6px 14px -6px rgba(61,42,31,0.32);
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s,filter .45s;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  will-change:transform,opacity;
}
.equip-card img{width:100%;height:100%;object-fit:cover;display:block}
.equip-card.front{transform:none;z-index:4;opacity:1;filter:none;cursor:default}
.equip-card.right{transform:translate(36%,4%) rotate(7deg) scale(.82);z-index:2;opacity:.92;filter:brightness(.93)}
.equip-card.left {transform:translate(-36%,4%) rotate(-7deg) scale(.82);z-index:2;opacity:.92;filter:brightness(.93)}
.equip-card.back {transform:translate(0,8%) scale(.72);z-index:1;opacity:.4;filter:brightness(.9)}
@media (prefers-reduced-motion:reduce){.equip-card{transition:none}}
.equip-ctrls{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:26px;
}
.equip-arrow{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid rgba(61,42,31,0.18);
  background:var(--cru);color:var(--copper);
  font-size:22px;font-weight:800;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.equip-arrow:hover,.equip-arrow:active{
  background:rgba(139,111,71,0.12);border-color:var(--copper);
}
.equip-dots{display:flex;gap:7px;align-items:center}
.equip-dot{
  width:7px;height:7px;border-radius:50%;background:rgba(61,42,31,0.22);
  border:0;padding:0;cursor:pointer;transition:background .2s,width .2s;
}
.equip-dot.on{background:var(--copper);width:20px;border-radius:999px}
.estrutura-sub{
  margin:36px auto 0;    /* respiro depois da foto */
  max-width:min(var(--foto-w),30ch);   /* leitura confortável, igual ao sub benefício */
  text-align:center;
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  color:#3D2A1F;   /* chocolate escuro, mesma cor do H1 */
}
.estrutura-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* 2 por linha → 3 linhas com 6 cards */
  gap:14px;
  width:var(--foto-w);   /* mesma largura da foto da seção de benefícios */
  margin:32px auto 0;    /* respiro entre a foto e os cards */
}
.estrutura-card{
  background:#D8C6AB;    /* marrom claro/areia — menos contraste que o chocolate */
  border-radius:12px;
  box-shadow:0 8px 20px -10px rgba(61,42,31,0.30);   /* sombra leve */
  padding:22px 16px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.estrutura-card-icone{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--musgo);   /* círculo em musgo p/ o ícone */
  margin-bottom:14px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cru);          /* traço do ícone (currentColor) */
}
.estrutura-card-icone svg{
  width:24px;height:24px;display:block;
}
.estrutura-card-texto{
  margin:0;
  font-weight:500;
  font-size:13px;
  line-height:1.35;
  color:var(--chocolate);   /* chocolate escuro sobre o card claro */
}
@media (min-width:480px){
  .estrutura-titulo{font-size:34px}
}

/* ── Seção 4 — sobre a Dra. (fundo musgo) ──────────────────── */
.sobre{
  --foto-w:80%;
  background:var(--musgo);
  padding:72px 0 72px;
}
.sobre-foto{
  position:relative;     /* ancora a faixa que corre no rodapé da foto */
  display:block;
  width:var(--foto-w);
  aspect-ratio:4/5;      /* retrato, igual à hero */
  margin:0 auto;
  background:var(--chocolate);   /* placeholder enquanto não há foto */
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 20px 44px -16px rgba(0,0,0,0.45);
}
.sobre-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.sobre-texto{
  margin-top:24px;       /* respiro depois da foto */
  padding:0 calc((100% - var(--foto-w)) / 2);
  text-align:center;
}
.sobre-nome{
  display:block;
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  color:var(--cru);
}
.sobre-crmv{
  display:block;
  margin-top:4px;
  font-weight:400;
  font-size:13px;
  color:rgba(239,231,216,0.7);   /* cru suavizado sobre o musgo */
}
.sobre-frase{
  margin-top:18px;
  padding:0 calc((100% - var(--foto-w)) / 2);
  text-align:center;
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:rgba(239,231,216,0.88);   /* cru suavizado sobre o musgo */
}
/* faixa de credenciais que corre da direita p/ esquerda,
   ancorada no rodapé do bloco da foto da Dra. */
.sobre-faixa{
  position:absolute;
  left:0;right:0;bottom:0;
  width:100%;
  overflow:hidden;
  background:rgba(239,231,216,0.72);   /* efeito vidro, igual à topbar */
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  padding:9px 0;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sobre-faixa{background:rgba(239,231,216,0.55)}
}
.sobre-faixa-track{
  display:flex;
  width:max-content;
  animation:sobre-marquee 22s linear infinite;
}
.sobre-faixa-grupo{
  display:flex;
  flex-shrink:0;
}
.sobre-faixa-grupo span{
  padding:0 22px;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.01em;
  white-space:nowrap;
  color:var(--musgo);   /* texto em musgo sobre a faixa clara */
}
/* separador entre as credenciais */
.sobre-faixa-grupo span::before{
  content:"•";
  margin-right:22px;
  color:var(--copper);
}
@keyframes sobre-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .sobre-faixa-track{animation:none}
}

/* ── Seção 5 — avaliações (prints do Google) ───────────────── */
.avaliacoes{
  --bloco-w:80%;
  background:var(--cru);
  padding:104px 0 72px;   /* respiro maior separando da seção musgo acima */
  overflow-x:clip;        /* trava o vazamento do reveal--right (prints) */
}
.avaliacoes-titulo{
  font-weight:800;
  font-size:26px;
  line-height:1.03;
  color:var(--chocolate);
  text-align:center;
  padding:0 calc((100% - var(--bloco-w)) / 2);
  margin-bottom:28px;
}
/* faixa horizontal com scroll-snap — sem JS */
.avaliacoes-prints{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px calc((100% - var(--bloco-w)) / 2) 8px;
  scrollbar-width:none;   /* Firefox */
}
.avaliacoes-prints::-webkit-scrollbar{display:none}   /* WebKit */
.avaliacoes-print{
  flex:0 0 82.8%;        /* deixa "espiar" o próximo print */
  max-width:299px;
  aspect-ratio:1/1;      /* casa com o print do Google (~quadrado) */
  scroll-snap-align:center;
  background:#fff;
  border:0.5px solid rgba(61,42,31,0.10);
  border-radius:16px;
  box-shadow:0 10px 26px -12px rgba(61,42,31,0.28);
}
.avaliacoes-print img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:16px;
}
/* pontos indicadores do carrossel */
.avaliacoes-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:20px;
}
.avaliacoes-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(61,42,31,0.22);
  border:0;padding:0;cursor:pointer;
  transition:background 0.2s ease,transform 0.2s ease;
}
.avaliacoes-dot.is-active{
  background:var(--musgo);
  transform:scale(1.25);
}
.avaliacoes-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:fit-content;    /* abraça o texto em vez de esticar */
  max-width:var(--bloco-w);
  margin:28px auto 0;
  background:#fff;      /* branco puro */
  color:#3D2A1F;        /* chocolate escuro, mesma cor do H1 */
  font-weight:500;      /* menos pesada */
  font-size:13px;       /* discreto — não compete com o CTA principal */
  text-decoration:none;
  padding:9px 18px;
  border-radius:999px;  /* pílula */
  box-shadow:0 6px 16px -8px rgba(61,42,31,0.22);   /* sombra suave */
}
.avaliacoes-link-g{
  width:15px;height:15px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.avaliacoes-link-g svg{width:15px;height:15px;display:block}

/* ── Seção 6 — tabela de consulta de preços ────────────────── */
.precos{
  --bloco-w:88%;
  background:var(--cru);
  padding:88px 0 80px;
  overflow-x:clip;   /* trava o vazamento do reveal--left (âncora) */
}
.precos > *{
  width:var(--bloco-w);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.precos-label{
  text-align:center;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--copper);
}
.precos-titulo{
  margin-top:10px;
  text-align:center;
  font-weight:800;
  font-size:28px;
  line-height:1.12;
  color:#3D2A1F;
}
/* Âncora — Consulta */
.precos-ancora{
  margin-top:32px;
  background:var(--musgo);
  border-radius:16px;
  padding:22px 22px 20px;
  box-shadow:0 16px 34px -16px rgba(61,42,31,0.4);
}
.precos-ancora-linha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.precos-ancora-nome{
  font-weight:700;
  font-size:19px;
  color:var(--cru);
}
.precos-ancora-preco{
  font-weight:800;
  font-size:34px;
  line-height:1;
  color:#E4C58A;   /* dourado/âmbar claro — contraste sobre o musgo */
}
.precos-ancora-desc{
  margin-top:10px;
  font-weight:400;
  font-size:14px;
  line-height:1.45;
  color:rgba(239,231,216,0.72);
}
/* Tabela de referência */
.precos-tabela{
  margin-top:16px;
  background:#F6EFE1;   /* off-white quente, distinto do fundo da página */
  border:1px solid rgba(61,42,31,0.10);
  border-radius:16px;
  overflow:hidden;
}
.precos-row,
.precos-subrow,
.precos-acordeao-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
}
.precos-row + .precos-row,
.precos-tabela > .precos-row,
.precos-acordeao + .precos-row{
  border-top:1px solid rgba(61,42,31,0.09);
}
.precos-item-nome{
  font-weight:500;
  font-size:15px;
  color:var(--chocolate);
}
.precos-item-preco{
  font-weight:700;
  font-size:15px;
  color:#3D2A1F;
  white-space:nowrap;
}
/* Acordeão de vacinas */
.precos-acordeao{
  border-bottom:1px solid rgba(61,42,31,0.09);
}
.precos-acordeao-head{
  width:100%;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.precos-acordeao-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.precos-badge{
  font-weight:600;
  font-size:11px;
  color:var(--copper);
  background:rgba(139,111,71,0.14);
  padding:2px 9px;
  border-radius:999px;
}
.precos-chevron{
  color:var(--copper);
  display:flex;
  transition:transform 0.22s ease;
}
.precos-chevron svg{width:16px;height:16px;display:block}
.precos-acordeao.is-open .precos-chevron{transform:rotate(180deg)}
.precos-acordeao-body{
  display:none;
  flex-direction:column;
  background:rgba(61,42,31,0.035);   /* leve distinção p/ indicar aninhamento */
}
.precos-acordeao.is-open .precos-acordeao-body{display:flex}
.precos-subrow{
  padding-left:30px;   /* recuo à esquerda — sublinha */
}
.precos-subrow + .precos-subrow{
  border-top:1px solid rgba(61,42,31,0.07);
}
.precos-subrow .precos-item-nome{font-weight:400;font-size:14px}
.precos-subrow .precos-item-preco{font-weight:600;font-size:14px}
/* Nota legal */
.precos-nota-legal{
  margin-top:16px;
  font-weight:400;
  font-size:11.5px;
  line-height:1.5;
  color:rgba(61,42,31,0.55);
}
/* Deslocamento por região */
.precos-desloc{
  margin-top:24px;
  background:rgba(139,111,71,0.12);   /* leve lavado de copper — distingue da tabela */
  border:1px solid rgba(139,111,71,0.28);
  border-radius:16px;
  padding:20px 18px;
}
.precos-desloc-label{
  font-weight:700;
  font-size:15px;
  color:var(--chocolate);
  text-align:center;
  margin-bottom:12px;
}
.precos-select-wrap{
  position:relative;
}
.precos-select-wrap::after{   /* seta customizada em copper */
  content:"";
  position:absolute;
  right:16px;top:50%;
  width:10px;height:10px;
  margin-top:-6px;
  border-right:2px solid var(--copper);
  border-bottom:2px solid var(--copper);
  transform:rotate(45deg);
  pointer-events:none;
}
.precos-select{
  -webkit-appearance:none;appearance:none;
  width:100%;
  font:inherit;
  font-size:15px;
  color:var(--chocolate);
  background:var(--cru);
  border:1px solid rgba(61,42,31,0.16);
  border-radius:10px;
  padding:13px 40px 13px 14px;
  cursor:pointer;
}
.precos-desloc-hint{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.45;
  color:rgba(61,42,31,0.55);
}
.precos-desloc-result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(61,42,31,0.12);
}
.precos-desloc-result-label{
  font-weight:500;font-size:14px;color:var(--chocolate);
}
.precos-desloc-result-valor{
  font-weight:700;font-size:16px;color:#3D2A1F;
}
/* Parcelamento */
.precos-parcela{
  margin-top:24px;
  text-align:center;
  font-size:14px;
  color:#3D2A1F;   /* chocolate escuro */
}
.precos-parcela strong{font-weight:800;font-size:16px;color:#3D2A1F}
/* CTA — WhatsApp para dúvidas */
.precos-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:16px;
  background:#128C4B;
  color:var(--cru);
  text-align:center;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  padding:16px 0;
  border-radius:4px;
}
/* Nota de variação clínica */
.precos-nota-var{
  margin-top:16px;
  text-align:center;
  font-size:11.5px;
  line-height:1.5;
  color:rgba(61,42,31,0.5);
}
@media (min-width:480px){
  .precos-titulo{font-size:32px}
}

/* ── Seção 7 — CTA final (fecho de conversão) ──────────────── */
.fecho{
  --fecho-bg:var(--musgo);   /* fundo escuro do fecho — trocar aqui */
  --bloco-w:88%;
  background:var(--fecho-bg);
  padding:110px 0 96px;      /* arejado: muito ar em volta de poucos elementos */
  text-align:center;
}
.fecho > *{
  width:var(--bloco-w);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.fecho-afirmacao{
  font-weight:800;
  font-size:30px;            /* maior peso tipográfico da seção */
  line-height:1.15;
  color:var(--cru);
  text-align:center;
  max-width:min(100%,18ch);
  margin-left:auto;
  margin-right:auto;
  overflow-wrap:break-word;
  word-break:break-word;
}
.fecho-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:fit-content;
  min-width:min(var(--bloco-w),300px);
  margin-top:44px;
  background:var(--cru);     /* alto contraste sobre o fundo escuro */
  color:#3D2A1F;
  font-weight:800;
  font-size:17px;
  text-decoration:none;
  padding:18px 36px;
  border-radius:4px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,0.5);
}
.fecho-risco{
  margin-top:18px;
  font-weight:400;
  font-size:13.5px;
  line-height:1.5;
  color:rgba(239,231,216,0.62);   /* quieto, contraste menor */
}
.fecho-assinatura{
  margin-top:72px;           /* respiro grande antes da assinatura */
  font-weight:400;
}
.fecho-assinatura-nome{
  display:block;
  font-size:13px;
  color:rgba(239,231,216,0.7);
}
.fecho-assinatura-area{
  display:block;
  margin-top:6px;
  font-size:11.5px;
  color:rgba(239,231,216,0.5);
}
@media (min-width:480px){
  .fecho-afirmacao{font-size:36px}
}

/* ── Reveal ao rolar — elementos se assentam na tela ────────── */
/* Base: fade-up (sobe 22px). Variantes mudam só a posição inicial;
   todas animam apenas opacity/transform (GPU, zero layout). */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.55s ease,transform 0.55s cubic-bezier(0.22,1,0.36,1);
  /* sem will-change: 30+ camadas permanentes custam memória em mobile;
     o navegador promove sozinho durante a transição */
}
.reveal--left {transform:translateX(-18px)}   /* desliza da esquerda */
.reveal--right{transform:translateX(18px)}    /* desliza da direita */
.reveal--fade{                                 /* assenta no lugar (fade + leve escala) */
  transform:scale(0.97);
  transition-duration:0.7s;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}