/* ============================================================
   EVO PEPTÍDEOS — design system do funil de protocolo (verde)
   Compartilhado por todas as páginas de evo-protocolo.
   Paleta verde nativa da Evo, igual à de public/emagrecimento2.html.
   Fraunces (display) + Inter (texto).
   ============================================================ */

:root{
  --noite:#0e241b;      /* seções escuras (hero, resultados, rodapé) */
  --noite-2:#173425;    /* escuro secundário */
  --marca:#17392b;      /* verde da marca / cor de ação */
  --acao:#1f4a38;       /* hover de ação */
  --banda:#dff0e2;      /* faixas claras */
  --nevoa:#f3f7f2;      /* fundo neutro suave */
  --borda:#d9e6da;
  --acento:#8fd3a8;     /* destaque sobre fundo escuro */
  --acento-suave:#eaf4ec;
  --tinta:#1d2b22;      /* texto principal */
  --tinta-suave:#55655a;/* texto secundário */
  --branco:#ffffff;

  /* Realce. REGRA DE USO: dourado = a substância, a coisa ativa;
     verde = o corpo, o processo, a estrutura. Sem essa regra o dourado
     vira decoração e mata justamente o que faz o desenho da molécula
     funcionar — ele é o único desenho do site com uma segunda cor.
     --realce-tinta existe porque --realce sobre branco dá 2,2:1. */
  --realce:#E0A33D;         /* traço e preenchimento da substância */
  --realce-tinta:#8F6E37;   /* texto de realce — 4,72:1 sobre branco */

  --fonte-display:'Fraunces',Georgia,serif;
  --fonte-texto:'Inter',system-ui,-apple-system,Arial,sans-serif;

  --arco:999px 999px 20px 20px; /* janela em arco: assinatura visual da página */
  --raio:20px;
  --larg:1200px;
}

/* ---------- Reset e base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{
  font-family:var(--fonte-texto);
  font-size:1.0625rem;line-height:1.6;
  color:var(--tinta);background:var(--branco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--fonte-display);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.container{max-width:var(--larg);margin-inline:auto;padding-inline:24px}

/* Rótulo pequeno acima dos títulos de seção */
.olho{
  display:inline-block;font-size:.8125rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--marca);margin-bottom:16px;
}
.secao-escura .olho,.cta-final .olho{color:var(--acento)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:500;font-size:1rem;text-decoration:none;
  padding:16px 32px;border-radius:999px;border:2px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-claro{background:var(--branco);color:var(--noite)}
.btn-claro:hover{background:var(--banda)}
.btn-azul{background:var(--marca);color:var(--branco)}
.btn-azul:hover{background:var(--acao)}
.btn-contorno{border-color:var(--borda);color:var(--tinta);background:transparent}
.btn-contorno:hover{background:var(--nevoa)}
.btn .seta{transition:transform .18s ease}
.btn:hover .seta{transform:translateX(4px)}

/* ============================================================
   1. HEADER — versão enxuta de LP: logo + entrar + CTA.
   Transparente sobre o hero escuro; ganha fundo sólido ao rolar.
   ============================================================ */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:50;
  color:var(--branco);
  transition:background .25s ease,box-shadow .25s ease;
}
.topo.rolou{background:var(--noite);box-shadow:0 8px 30px rgba(14,36,27,.35)}
/* Páginas sem hero escuro (legais, erro): o header é transparente com texto e
   logo brancos, então sobre fundo claro tudo sumiria até o usuário rolar.
   Nessas páginas ele já nasce sólido. */
body:not(:has(.hero)) .topo{background:var(--noite);box-shadow:0 8px 30px rgba(14,36,27,.25)}
/* Exige .topo: o padding existe para limpar o header sólido. O questionário
   não tem .topo (usa .qtopo, sticky) e herdava 72px de vazio morto no alto
   de toda tela de pergunta. */
body:not(:has(.hero)):has(.topo) main{padding-top:72px}
@supports not selector(:has(*)){
  /* Sem :has() não dá para detectar a ausência do hero — o header fica sólido
     em todo lugar. Perde-se a sobreposição no hero, nada fica ilegível. */
  .topo{background:var(--noite)}
}
.topo-inner{
  max-width:var(--larg);margin-inline:auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.topo .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.topo .logo img{height:34px;width:auto;filter:brightness(0) invert(1)}
.logo-texto{
  font-family:var(--fonte-texto);font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
}
.rodape .logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;text-decoration:none}
.rodape .logo .logo-texto{font-size:.8rem}
.topo-acoes{display:flex;align-items:center;gap:20px}
.topo-acoes .entrar{text-decoration:none;font-size:.95rem;opacity:.85}
.topo-acoes .entrar:hover{opacity:1}
.topo-acoes .btn{padding:11px 22px;font-size:.9rem}

/* ---------- CTA flutuante (só mobile) ----------
   Só existe abaixo de 768px, onde o polegar não alcança o header.
   Fica sempre na tela; por isso o CTA do header sai no mobile,
   para não repetir o mesmo botão duas vezes. */
.barra-cta{display:none}
@media (max-width:768px){
  .barra-cta{
    display:block;position:fixed;inset:auto 0 0 0;z-index:48;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .barra-cta .btn{
    display:flex;justify-content:center;width:100%;padding:15px 24px;
    box-shadow:0 10px 30px rgba(14,36,27,.3);
  }
  .topo-acoes .btn{display:none}
}

/* ============================================================
   2. HERO — roxo profundo: texto à esquerda, composição de
   imagens em arco à direita (foto grande + app + caixa).
   ============================================================ */
.hero{
  background:var(--noite);color:var(--branco);
  padding:150px 0 90px;position:relative;overflow:clip;
}
.hero::before{ /* brilho radial da marca, discreto */
  content:"";position:absolute;inset:-20% -10% auto;height:80%;
  background:radial-gradient(55% 60% at 50% 0%,rgba(46,92,68,.4),transparent 70%);
  pointer-events:none;
}
.hero-grade{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:56px;align-items:center;
}
.hero-chip{
  display:inline-block;font-size:.85rem;font-weight:500;
  padding:8px 18px;border-radius:999px;
  border:1px solid rgba(143,211,168,.5);color:var(--acento);
  margin-bottom:28px;
}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.25rem);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero-sub{font-size:1.15rem;opacity:.85;max-width:560px;margin-bottom:32px}
.hero-provas{display:flex;flex-wrap:wrap;gap:12px}
.hero-provas li{
  font-size:.9rem;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
}

/* Composição de imagens do hero: foto grande em arco + duas menores
   (mulher / app / caixa), como no layout de referência. */
.hero-galeria{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-galeria .hero-img-grande{grid-column:1/-1;height:320px}
/* foto retrato: ancora no topo para não cortar o rosto */
.hero-galeria .hero-img-grande img{object-position:center top}
.hero-img-peq{
  height:210px;border-radius:var(--raio);overflow:hidden;
  background:var(--banda);
}
.hero-img-peq img{width:100%;height:100%;object-fit:cover;object-position:center}

/* ============================================================
   3. BANNER DA OFERTA — faixa chamativa do mês
   ============================================================ */
.banner-oferta{background:var(--banda)}
.banner-oferta .container{
  display:flex;align-items:center;justify-content:center;gap:14px 32px;
  flex-wrap:wrap;padding-block:26px;text-align:center;
}
.banner-oferta strong{
  font-family:var(--fonte-display);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.8rem);
}
.banner-oferta strong em{font-style:normal;color:var(--marca)}

/* ============================================================
   4. PROPOSTA DE VALOR — desconto em destaque + benefícios
   ============================================================ */
.oferta-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}
.oferta-grade .arco{height:560px}
/* foto retrato: ancora o recorte no topo para não cortar o rosto */
.oferta-grade .arco img{object-position:center top}
.oferta-beneficios{margin:28px 0 36px}
.oferta-beneficios li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--banda)}
.oferta-beneficios li:last-child{border-bottom:1px solid var(--banda)}
.oferta-beneficios .sinal{
  flex:none;width:26px;height:26px;border-radius:50%;margin-top:3px;
  display:grid;place-items:center;font-size:.8rem;font-weight:500;
  background:var(--banda);color:var(--marca);
}
.oferta-beneficios strong{display:block;font-weight:500}
.oferta-beneficios small{font-size:.875rem;color:var(--tinta-suave)}

/* ---------- Base das seções ---------- */
.secao{padding:110px 0}
.secao-cabeca{max-width:640px;margin-bottom:60px}
.secao-cabeca h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:16px}
.secao-cabeca p{color:var(--tinta-suave)}
.secao-cabeca.centro{margin-inline:auto;text-align:center}

/* ============================================================
   5. NÚMEROS (seção escura) — prova social da escala
   ============================================================ */
.secao-escura{background:var(--noite);color:var(--branco)}
.secao-escura .secao-cabeca p{color:rgba(255,255,255,.7)}
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-bottom:20px}
.numero{border:1px solid rgba(255,255,255,.18);border-radius:var(--raio);padding:32px 28px}
.numero strong{font-family:var(--fonte-display);font-weight:400;font-size:clamp(2.8rem,5vw,4rem);display:block;color:var(--acento)}
.numero span{font-size:.95rem;opacity:.8}
.fonte-estudo{font-size:.8rem;opacity:.5;margin-bottom:40px}

/* ============================================================
   6. DENTRO DO PLANO — ficha em 2x2, sem card e sem ícone
   ============================================================ */
/* --gutter zera no mobile e derruba junto os paddings da calha. */
.plano-lista{
  --gutter:48px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--borda);
}
.plano-item{padding:40px 0;border-bottom:1px solid var(--borda)}
.plano-item:nth-child(odd){padding-right:var(--gutter);border-right:1px solid var(--borda)}
.plano-item:nth-child(even){padding-left:var(--gutter)}
.plano-icone{
  width:34px;height:34px;margin-bottom:20px;
  color:var(--marca);stroke-width:1.5;
}
.plano-item h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:12px}
.plano-item p{color:var(--tinta-suave);max-width:46ch}

/* ============================================================
   7. DEPOIMENTOS (seção escura) — carrossel com setas e bolinhas
   (rolagem nativa + snap, scrollbar escondida)
   ============================================================ */
.depo-topo{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:60px;
}
.depo-topo .secao-cabeca{margin-bottom:0}
.depo-nav{display:flex;gap:12px}
.depo-nav button{
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--branco);
  display:grid;place-items:center;
  transition:background .15s ease,opacity .15s ease;
}
.depo-nav button:hover{background:rgba(255,255,255,.12)}

/* ---------- peso óptico de ícone ----------
   stroke-width é em unidades do viewBox, então o peso NA TELA é
   sw x (px de render / 24). Autorado, o site tinha 13 valores e dois
   grupos ópticos — ~1,6px nos cards de mecanismo e ~2,1px nos de plano,
   a duas rolagens de distância na mesma página. O alvo aqui é 1,8px para
   todo ícone e o sw sai da conta, não do gosto.
   Propriedade CSS vence atributo de apresentação: o stroke-width inline
   dos glifos fica sobrescrito sem precisar tocar nos três HTMLs. */
.menu-btn svg{stroke-width:1.66}           /* 26px -> 1,80 */
.depo-nav button svg{stroke-width:2.16}    /* 20px -> 1,80 */
.contato .icone svg{width:24px;height:24px;stroke-width:1.8}
.plano-icone{stroke-width:1.27}            /* 34px -> 1,80 */
/* Redesign duotone (spec-glifos.md): nos containers de ícone redesenhados o
   peso vira LITERAL via non-scaling-stroke — a conta acima deixa de existir
   para eles. vector-effect NÃO herda: mirar a FORMA, nunca [stroke].
   .fx = massa da própria cor a 14% (stroke:none obrigatório — o fill herda
   stroke do wrapper e ganharia borda dupla). .d2 = detalhe interno fino. */
:is(.mec-icone,.contato .icone) svg :is(path,circle,rect,line,polyline,ellipse),
svg.plano-icone :is(path,circle,rect,line,polyline,ellipse),
.dg-caminho svg :is(path,circle,rect,line,polyline,ellipse){vector-effect:non-scaling-stroke;stroke-width:1.8}
:is(.mec-icone,.contato .icone) svg .d2,svg.plano-icone .d2,.dg-caminho svg .d2{stroke-width:1.2}
:is(.mec-icone,.contato .icone) svg .fx,svg.plano-icone .fx,.dg-caminho svg .fx{fill:currentColor;opacity:.14;stroke:none}
/* Glifos COMPOSTOS dentro dos desenhos grandes (dg-linha etc.): o <g class=
   "glifo"> declara color= para alimentar o fill:currentColor do .fx — o
   currentColor de SVG lê a propriedade CSS color, não o stroke do grupo. */
.desenho svg .glifo :is(path,circle,rect,line,polyline,ellipse){vector-effect:non-scaling-stroke;stroke-width:1.8}
.desenho svg .glifo .d2{stroke-width:1.2}
.desenho svg .glifo .fx{fill:currentColor;opacity:.14;stroke:none}
.depo-nav button:disabled{opacity:.3;cursor:default;background:transparent}
.depo-trilho{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(420px,82vw);
  gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.depo-trilho::-webkit-scrollbar{display:none}
.depo-dots{display:flex;gap:8px;margin-top:28px}
.depo-dots button{
  width:10px;height:10px;border-radius:999px;border:0;padding:0;
  background:rgba(255,255,255,.25);transition:width .2s ease,background .2s ease;
}
.depo-dots button.ativo{width:28px;background:var(--acento)}
.depo{
  scroll-snap-align:start;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--raio);
  padding:32px;display:flex;flex-direction:column;gap:18px;
}
.depo blockquote{font-size:1.02rem;line-height:1.55;opacity:.9;flex-grow:1}
.depo blockquote::before{
  content:"“";display:block;font-family:var(--fonte-display);
  font-size:3rem;line-height:.6;color:var(--acento);margin-bottom:12px;
}
.depo footer strong{display:block;font-weight:500}
.depo footer span{font-size:.85rem;opacity:.6}
.depo-nota{font-size:.8rem;opacity:.5;margin-top:20px}
.depo-cta{margin-top:44px}

/* ============================================================
   8. TRATAMENTOS — 3 cards sobre faixa lilás com fade
   ============================================================ */
.sec-tratamentos{background:linear-gradient(to bottom,var(--branco),var(--nevoa) 30%,var(--nevoa) 70%,var(--branco))}
.tratamentos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
/* Cada card é uma imagem única: moldura, foto, título, texto e selo já vêm
   embutidos no WebP. O raio no <img> faz a sombra do hover acompanhar os
   cantos arredondados que estão desenhados dentro da própria imagem. */
.trat-card{display:block;transition:transform .2s ease}
.trat-card img{width:100%;height:auto;border-radius:var(--raio);transition:box-shadow .2s ease}
.trat-card:hover{transform:translateY(-4px)}
.trat-card:hover img{box-shadow:0 18px 40px rgba(23,57,43,.12)}
.trat-nota{margin-top:36px;text-align:center;font-size:.9rem;color:var(--tinta-suave)}
.trat-nota a{color:var(--marca)}


/* Corpo do card de tratamento: a referência usava uma imagem única com
   texto embutido; aqui a foto do produto é real e o texto é HTML. */
.trat-card{
  background:var(--branco);border:1px solid var(--borda);
  border-radius:var(--raio);overflow:hidden;
}
.trat-card img{border-radius:0;aspect-ratio:3/2;object-fit:cover}
.trat-corpo{padding:24px 26px 28px}
.trat-corpo .olho{margin-bottom:8px}
.trat-corpo h3{font-size:1.45rem;margin-bottom:8px}
.trat-corpo p{font-size:.95rem;color:var(--tinta-suave);margin-bottom:16px}
/* Copy de produto no card: promessa curta, depois os fatos rotulados.
   O <dl> mantém rótulo e valor amarrados semanticamente. */
.trat-lead{font-size:1rem;line-height:1.5;color:var(--tinta);font-weight:500;margin-bottom:16px}
/* Nada de gap no grid aqui: ele separaria o rótulo do próprio valor com a
   mesma distância que separa um fato do outro. O espaçamento vai no dd. */
.trat-fatos{margin:0 0 18px}
.trat-fatos dt{
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marca);margin-bottom:2px;
}
.trat-fatos dd{margin:0 0 14px;font-size:.9rem;line-height:1.5;color:var(--tinta-suave)}
.trat-fatos dd:last-child{margin-bottom:0}
/* O preço saiu dos cards: aqui a gente diz o que cada peptídeo FAZ, e quem
   define indicação e valor é a avaliação. Sobra a duração do protocolo, que
   é informação útil e não é oferta. */
.trat-meta{display:block;font-size:.85rem;color:var(--tinta-suave);padding-top:14px;border-top:1px solid var(--borda)}

/* ============================================================
   9. SIMULADOR — calculadora de perda de peso (24,2%, NEJM 2023)
   ============================================================ */
.calc{
  background:var(--branco);color:var(--tinta);border-radius:var(--raio);
  border:1px solid var(--borda);
  padding:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;
}
.calc h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px}
.calc .calc-fonte{font-size:.8rem;color:var(--tinta-suave);margin-top:14px}
.calc-controle label{font-size:.9rem;font-weight:500;display:block;margin-bottom:10px}
.calc-controle output{font-weight:500}
.calc-controle input[type=range]{
  width:100%;appearance:none;-webkit-appearance:none;height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--marca),var(--borda));
  margin:14px 0 26px;
}
.calc-controle input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--branco);border:3px solid var(--marca);cursor:grab;
}
.calc-controle input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--branco);border:3px solid var(--marca);cursor:grab;
}
.calc-resultado{
  background:var(--nevoa);border:1px solid var(--borda);
  border-radius:var(--raio);padding:22px 26px;
}
.calc-resultado small{display:block;font-size:.85rem;color:var(--tinta-suave)}
.calc-resultado strong{font-family:var(--fonte-display);font-weight:400;font-size:2.6rem;color:var(--marca)}
.calc-controle .btn{margin-top:22px}
.secao-escura .calc{margin-bottom:72px}

/* ============================================================
   10. EQUIPE — fita marquee com fotos em arco e legendas
   ============================================================ */
.equipe-cabeca{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.equipe-cabeca .secao-cabeca{margin-bottom:0}
.avaliacao{
  font-size:.95rem;background:var(--nevoa);border:1px solid var(--borda);
  border-radius:var(--raio);padding:18px 24px;max-width:280px;
}
.avaliacao strong{font-family:var(--fonte-display);font-weight:400;font-size:1.9rem;display:block;color:var(--marca)}
.temas{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:56px}
.temas li{
  font-size:.9rem;padding:9px 18px;border-radius:999px;
  background:var(--nevoa);border:1px solid var(--borda);
}
/* ÓRFÃO desde 2026-08-29: o marquee de rostos de banco saiu das 4 páginas e
   foi substituído pelo bloco .eq-* (nº 20). Mantido sem uso por regra de não
   apagar; o markup está em _backups/*.pre-equipe-20260829-152442.
   Nota: a regra .equipe-trilho .duplicado abaixo SEMPRE foi morta — a classe
   .duplicado nunca existiu no HTML (as cópias usavam aria-hidden), então sob
   prefers-reduced-motion o marquee mostrava 12 rostos, 6 deles repetidos. */
.equipe-fita{overflow:hidden} /* fita ocupa a largura toda da tela */
.equipe-trilho{display:flex;width:max-content;gap:24px;animation:desliza 45s linear infinite;padding-inline:12px}
.arco{border-radius:var(--arco);overflow:hidden;background:var(--banda)}
.arco img{width:100%;height:100%;object-fit:cover}
.equipe-pessoa{width:220px;flex:none;text-align:center}
.equipe-pessoa .arco{height:270px;margin-bottom:14px}
.equipe-pessoa strong{display:block;font-weight:500;font-size:.98rem}
.equipe-pessoa span{font-size:.85rem;color:var(--tinta-suave)}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ============================================================
   11. FAQ — título fixo à esquerda, acordeão nativo (<details>)
   ============================================================ */
.faq-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.faq-lateral{position:sticky;top:120px}
.faq-lateral .secao-cabeca{margin-bottom:28px}
.faq-lateral .secao-cabeca a{color:var(--marca)}
.faq-lista details{border-bottom:1px solid var(--banda)}
.faq-lista summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;
  padding:24px 4px;font-weight:500;font-size:1.08rem;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{ /* "+" que vira "×" quando aberto */
  content:"+";font-family:var(--fonte-display);font-size:1.6rem;line-height:1;
  color:var(--marca);transition:transform .2s ease;flex:none;
}
.faq-lista details[open] summary::after{transform:rotate(45deg)}
.faq-lista .faq-corpo{padding:0 4px 26px;color:var(--tinta-suave);font-size:.98rem}
.faq-lista .faq-corpo p+p{margin-top:10px}

/* ============================================================
   12. CTA FINAL — texto à esquerda, foto em arco na base
   ============================================================ */
.cta-final{background:var(--noite);color:var(--branco);overflow:clip}
.cta-final .container{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:end;
  padding-top:110px;
}
.cta-final h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:18px}
.cta-final h2 em{font-style:normal;color:var(--acento)}
.cta-final p{opacity:.8;margin-bottom:36px;max-width:460px}
.cta-final .arco{height:420px;border-radius:999px 999px 0 0}
.cta-final .cta-texto{padding-bottom:110px}

/* ============================================================
   13. CONTATO — três canais de atendimento
   ============================================================ */
.contatos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.contato{
  background:var(--nevoa);border:1px solid var(--borda);
  border-radius:var(--raio);padding:32px 28px;text-align:center;
}
.contato .icone{
  width:56px;height:56px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;
  background:var(--banda);color:var(--marca);
}
.contato h3{font-size:1.2rem;margin-bottom:6px}
.contato a{font-size:.95rem;color:var(--marca)}

/* ============================================================
   14. FOOTER
   ============================================================ */
.rodape{background:var(--noite);color:var(--branco);border-top:1px solid rgba(255,255,255,.12);padding:64px 0 40px}
.rodape-grade{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:48px;margin-bottom:48px}
.rodape .logo img{height:40px;width:auto;filter:brightness(0) invert(1)}
.rodape .sobre{font-size:.9rem;opacity:.65;max-width:340px}
.rodape h4{font-family:var(--fonte-texto);font-weight:500;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:18px}
.rodape li{margin-bottom:12px}
.rodape a{text-decoration:none;font-size:.95rem;opacity:.85}
.rodape a:hover{opacity:1;text-decoration:underline}
.rodape-base{
  border-top:1px solid rgba(255,255,255,.12);padding-top:28px;
  display:flex;flex-direction:column;gap:14px;
  font-size:.85rem;opacity:.6;
}
.rodape-base a{font-size:.85rem;text-decoration:underline}

/* ---------- Revelação suave no scroll (classe via JS) ---------- */
.revela{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.revela.visivel{opacity:1;transform:none}

/* ---------- Acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .equipe-trilho{animation:none;width:auto;flex-wrap:wrap}
  .equipe-trilho .duplicado{display:none}
  .revela{opacity:1;transform:none;transition:none}
  .btn,.trat-card{transition:none}
}


/* ============================================================
   BLOCOS EXCLUSIVOS DA HOME (plano.html)
   Nav completa, hero centralizado com arcos, marquee de USPs,
   passos numerados e cartão de farmácias.
   ============================================================ */
.topo nav{display:flex;gap:36px}
.topo nav a{
  text-decoration:none;font-size:.95rem;opacity:.85;
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:opacity .15s,border-color .15s;
}
.topo nav a:hover{opacity:1;border-color:var(--acento)}
.topo-acoes{display:flex;align-items:center;gap:20px}
.topo-acoes .entrar{text-decoration:none;font-size:.95rem;opacity:.85}
.topo-acoes .entrar:hover{opacity:1}
.topo-acoes .btn{padding:11px 22px;font-size:.9rem}
.menu-btn{display:none;background:none;border:0;color:inherit;width:44px;height:44px}
.menu-btn svg{display:block;margin:auto}

/* Menu mobile: painel em tela cheia (classe .menu-aberto no <html>) */
.menu-mobile{display:none}
html.menu-aberto .menu-mobile{
  display:flex;flex-direction:column;gap:8px;
  position:fixed;inset:0;z-index:49;
  background:var(--noite);color:var(--branco);
  padding:110px 32px 40px;font-size:1.35rem;
}
.menu-mobile a{text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
html.menu-aberto{overflow:hidden}


.hero-texto{position:relative;text-align:center;max-width:980px;margin-inline:auto}
.hero-chip{
  display:inline-block;font-size:.85rem;font-weight:500;
  padding:8px 18px;border-radius:999px;
  border:1px solid rgba(143,211,168,.5);color:var(--acento);
  margin-bottom:28px;
}
.hero h1{font-size:clamp(2.75rem,6.4vw,4.75rem);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero-sub{font-size:1.15rem;opacity:.85;max-width:620px;margin:0 auto 36px}
.hero-cta{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.hero-cta .link-suave{color:var(--branco);opacity:.75;text-decoration:none;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.hero-cta .link-suave:hover{opacity:1}
.hero-nota{margin-top:18px;font-size:.85rem;opacity:.55}

/* Composição de arcos na base do hero */
/* minmax(0,1fr) em todos os grids: impede que o min-content dos itens
   estique o body além da viewport em telas estreitas */
.hero-arcos{
  position:relative;margin-top:64px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:24px;
  align-items:end;max-width:980px;margin-inline:auto;padding-inline:24px;
}
.arco{border-radius:var(--arco);overflow:hidden;background:var(--banda)}
.arco img{width:100%;height:100%;object-fit:cover}
.hero-arcos .arco-central{height:400px}
.cartao-flutuante{
  position:relative;border-radius:var(--raio);
  padding:22px 24px;font-size:.95rem;line-height:1.45;
}
.cartao-flutuante strong{
  font-family:var(--fonte-display);font-weight:400;
  display:block;font-size:2rem;margin-bottom:4px;
}
.hero-arcos .cartao-esq{background:var(--banda);color:var(--tinta);margin-bottom:32px}
.hero-arcos .cartao-dir{border:1px solid rgba(255,255,255,.25);color:var(--branco);margin-bottom:32px}


.faixa{background:var(--banda);color:var(--tinta);overflow:hidden;padding:20px 0}
.faixa-trilho{display:flex;width:max-content;animation:desliza 28s linear infinite}
.faixa ul{display:flex;align-items:center;gap:44px;padding-inline:22px;white-space:nowrap}
.faixa li{display:flex;align-items:center;gap:44px;font-weight:500;font-size:1rem}
.faixa li::after{content:"✦";color:var(--marca);font-size:.8rem}



.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.passos::before{ /* linha da jornada, na altura do centro dos ícones */
  content:"";position:absolute;top:44px;left:6%;right:6%;
  border-top:2px dashed var(--borda);
}
.passo{position:relative;background:var(--branco)}
/* MORTO: nenhum .passo-icone existe no HTML — a seção de passos virou
   .passo--card com foto (bloco 16). Mantido comentado, não apagado.
   Se voltar, o stroke-width tem que sair da conta de peso óptico:
   36px pediria 1,20, não 1,5 (que renderizava 2,25px, o mais pesado do site).
.passo-icone{
  width:88px;height:88px;border-radius:50%;
  border:1px solid var(--borda);background:var(--nevoa);
  display:grid;place-items:center;
  margin-bottom:20px;position:relative;z-index:1;
}
.passo-icone svg{width:36px;height:36px;color:var(--marca);stroke-width:1.5}
*/
.passo-num{font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--marca)}
.passo h3{font-size:1.35rem;margin:6px 0 10px}
.passo p{font-size:.95rem;color:var(--tinta-suave)}


.farmacias{
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;align-items:center;
  background:var(--nevoa);border:1px solid var(--borda);
  border-radius:var(--raio);padding:48px;
}
.farmacias .arco{height:300px}
.farmacias h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:14px}
.farmacias p{color:var(--tinta-suave);font-size:.98rem}
.farmacias p+p{margin-top:12px}
.farmacias a{color:var(--marca)}


/* ---------- Comparação: Com a Evo vs. por conta própria ---------- */
.sec-comparacao{background:linear-gradient(to bottom,var(--branco),var(--banda) 26%,var(--banda) 78%,var(--branco))}
.versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;max-width:960px;margin-inline:auto}
.versus-col{border-radius:var(--raio);padding:40px}
.versus-com{background:var(--noite);color:var(--branco)}
.versus-sem{background:var(--branco);border:1px solid var(--borda);color:var(--tinta-suave)}
.versus-col h3{font-size:1.6rem;margin-bottom:28px}
.versus-sem h3{color:var(--tinta)}
.versus-col li{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.15)}
.versus-sem li{border-top-color:var(--banda)}
.versus-col li .sinal{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:500}
.versus-com li .sinal{background:var(--acento);color:var(--noite)}
.versus-sem li .sinal{background:var(--nevoa);color:var(--tinta-suave);border:1px solid var(--borda)}
.versus-col li strong{display:block;font-weight:500}
.versus-com li strong{color:var(--branco)}
.versus-col li small{font-size:.875rem;opacity:.75}
.versus-cta{text-align:center;margin-top:48px}


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

/* ---------- Responsivo dos blocos da home ---------- */
@media (max-width:1000px){
  .passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
  .passos::before{display:none}
  .farmacias{grid-template-columns:1fr;padding:32px}
  .farmacias .arco{max-width:340px}
}
@media (max-width:768px){
  .topo nav,.topo-acoes .entrar{display:none}
  .menu-btn{display:block}
  .hero-arcos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-inline:16px}
  .hero-arcos .arco-central{grid-column:1/-1;order:-1;height:300px}
  .hero-arcos .cartao-esq,.hero-arcos .cartao-dir{margin-bottom:0}
  .passos{grid-template-columns:1fr}
  html.menu-aberto .barra-cta{display:none}
}
@media (max-width:480px){
  .hero-arcos{grid-template-columns:minmax(0,1fr)}
  .hero-arcos .arco-central{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .faixa-trilho,.equipe-trilho{animation:none}
  .faixa-trilho{width:auto;flex-wrap:wrap}
  .faixa ul[aria-hidden]{display:none}
}

/* ---------- Responsivo ---------- */
@media (max-width:1000px){
  .hero-grade{grid-template-columns:1fr;gap:44px}
  .hero-galeria{max-width:520px}
  .oferta-grade{grid-template-columns:1fr;gap:36px}
  .oferta-grade .arco{height:340px;max-width:420px}
  .numeros{grid-template-columns:1fr}
  .plano-lista{--gutter:28px}
  .plano-item{padding:32px 0}
  .tratamentos{grid-template-columns:1fr;justify-items:center}
  .trat-card{width:100%;max-width:400px} /* empilhado, a imagem não pode esticar */
  .calc{grid-template-columns:1fr;padding:32px}
  .faq-grade{grid-template-columns:1fr;gap:24px}
  .faq-lateral{position:static}
  .contatos{grid-template-columns:1fr}
  .cta-final .container{grid-template-columns:1fr}
  .cta-final .cta-texto{padding-bottom:0}
  .cta-final .arco{height:320px;max-width:420px;margin-inline:auto}
  .rodape-grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:768px){
  .secao{padding:72px 0}
  .topo-acoes .entrar{display:none}
  .hero{padding:120px 0 72px}
  .plano-lista{grid-template-columns:1fr;--gutter:0px}
  .plano-item{padding:28px 0}
  .plano-item:nth-child(odd){border-right:0}
  .equipe-pessoa{width:180px}
  .equipe-pessoa .arco{height:220px}
  .rodape-grade{grid-template-columns:1fr}
  /* folga para a barra de CTA fixa não cobrir o fim do rodapé */
  .rodape{padding-bottom:124px}
}


/* ============================================================
   16. PASSOS ILUSTRADOS — variante em card com foto e selo
   O grid .passos continua o mesmo; muda só a pele de cada item.
   .passos--cards desliga a linha tracejada da jornada, que foi
   desenhada para cruzar o centro dos círculos de 88px e não faz
   sentido nenhum passando por cima de fotografia.
   ============================================================ */
.passos--cards::before{display:none}
.passos-cta{margin-top:44px;text-align:center}
.passo--card{
  background:var(--branco);border:1px solid var(--borda);
  border-radius:var(--raio);padding:14px 14px 26px;text-align:center;
  box-shadow:0 6px 24px rgba(23,57,43,.05);
}
.passo-figura{position:relative;margin:0 0 20px}
/* height:auto é obrigatório: o <img> carrega os atributos width/height
   reais (620x414) e sem isso o 414 vence como altura usada. */
.passo-figura img{width:100%;height:auto;display:block;border-radius:14px}
.passo-selo{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:38px;height:38px;border-radius:12px;
  background:var(--marca);color:var(--branco);
  display:grid;place-items:center;
  font-family:var(--fonte-display);font-size:1.05rem;line-height:1;
  box-shadow:0 6px 18px rgba(23,57,43,.20);
}
.passo--card h3{font-size:1.2rem;margin:0 0 8px}
.passo--card p{font-size:.92rem;color:var(--tinta-suave);margin:0}

/* ============================================================
   17. MECANISMO — a molécula e as três fechaduras
   ============================================================ */
.mol{max-width:640px;margin:48px auto 8px;text-align:center}
.mol svg{width:100%;height:auto;display:block}
.mol-cap{font-weight:600;font-size:1.05rem;color:var(--tinta);margin:10px 0 0}
.mol-src{font-size:.78rem;color:var(--tinta-suave);margin:8px 0 0;line-height:1.5}

/* As três ligações são desenhadas VISÍVEIS por padrão. O traçado é só
   enfeite e só entra quando o observador de .revela marca .visivel —
   inclusive no ramo de fallback. Assim nenhum caminho de execução
   deixa a molécula desconectada dos receptores. */
/* pathLength="1" em cada ligação: com dasharray fixo de 220 a ligação central
   (42 unidades) ficava invisível ~80% da animação e depois saltava, enquanto
   as curvas externas (~135) varriam suave. Agora as três traçam proporcional. */
.mol-lig{stroke-dasharray:1;stroke-dashoffset:0}
.revela .mol-lig{stroke-dashoffset:1}
.revela.visivel .mol-lig{animation:molDraw .6s ease forwards}
.revela.visivel .mol-lig:nth-child(2){animation-delay:.15s}
.revela.visivel .mol-lig:nth-child(3){animation-delay:.3s}
@keyframes molDraw{to{stroke-dashoffset:0}}

.mecs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.mec{
  background:var(--nevoa);border:1px solid var(--borda);
  border-radius:var(--raio);padding:30px 28px;
}
.mec-icone{
  width:52px;height:52px;border-radius:14px;
  background:var(--acento-suave);color:var(--marca);
  display:grid;place-items:center;margin-bottom:20px;
}
.mec-icone svg{width:26px;height:26px;stroke-width:1.66}  /* 26px -> 1,80 óptico */
.mec .olho{margin-bottom:6px}
.mec h3{font-size:1.2rem;margin:0 0 10px}
.mec p{font-size:.94rem;color:var(--tinta-suave);margin:0}

/* ============================================================
   18. DESENHOS EXPLICATIVOS — moldura comum
   ============================================================ */
.desenho{max-width:760px;margin:0 auto}
/* a linha do tempo tem 5 colunas de rótulo: em 760px o texto fica ilegível */
.desenho--largo{max-width:1140px}
.desenho svg{width:100%;height:auto;display:block}
.desenho-nota{
  font-size:.78rem;line-height:1.5;color:var(--tinta-suave);
  text-align:center;margin:14px auto 0;max-width:60ch;
}
.secao-escura .desenho-nota{color:rgba(255,255,255,.6)}

@media (max-width:1000px){
  .mecs{grid-template-columns:1fr;gap:18px}
}
@media (max-width:768px){
  .mol{margin-top:32px}
  .passo--card{padding:12px 12px 22px}
}

/* ============================================================
   19. LINHA DO TEMPO + CAMINHO DO FRASCO
   ============================================================ */
/* Um SVG não restack de horizontal para vertical: são dois desenhos,
   trocados no breakpoint. O móvel é aria-hidden porque repete o mesmo
   conteúdo do desktop, que já carrega title e desc. */
/* .desenho svg{display:block} (bloco 18) tem especificidade maior que uma
   classe sozinha e vencia o toggle — os dois desenhos apareciam juntos em
   toda largura. Por isso o seletor abaixo repete o contexto. */
.desenho svg.dg-linha--mob{display:none}
.desenho svg.dg-linha--desk{display:block}
/* Capitel e setas animam SÓ por transform. Nada nasce com opacity:0: se o
   observador não rodar, o desenho fica levemente fora de pose, nunca invisível.
   A barra de compliance e a cauda aberta não animam — a ausência delas mudaria
   o significado do desenho. */
.fase-cap{transition:transform .45s ease}
.revela .fase-cap{transform:scaleY(.86);transform-box:fill-box;transform-origin:50% 100%}
.revela.visivel .fase-cap{transform:none}
.revela.visivel .fase-cap--2{transition-delay:.10s}
.revela.visivel .fase-cap--3{transition-delay:.20s}
.fase-seta{transition:transform .45s ease}
.revela .fase-seta{transform:translateX(-10px)}
.revela.visivel .fase-seta{transform:none}
.revela.visivel .fase-seta--2{transition-delay:.14s}
.revela.visivel .fase-seta--3{transition-delay:.24s}
/* No desktop os chevrons apontam para a direita e deslizam em X. No mobile
   apontam para BAIXO — deslizar de lado é transversal ao gesto. */
.revela .dg-linha--mob .fase-seta{transform:translateY(-8px)}
.revela.visivel .dg-linha--mob .fase-seta{transform:none}

.dg-caminho{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:0 12px;margin-top:44px}
.dg-frasco{width:100%;height:auto;display:block}
/* Os três <span class="dg-chevron"> eram markup morto: display:none e
   nenhuma regra reativando em breakpoint nenhum. O caminho — que é o nome
   e o ponto do desenho — nunca era desenhado. Agora existe, e os spans
   ganham coluna própria no grid (4 cards + 3 conectores = 7 itens). */
.dg-chevron{
  display:block;justify-self:center;align-self:center;
  width:11px;height:11px;
  border-top:2px solid var(--acento);
  border-right:2px solid var(--acento);
  transform:rotate(45deg);
}

@media (max-width:900px){
  .desenho svg.dg-linha--desk{display:none}
  /* O teto de 340px deixava 45px de margem morta de cada lado num aparelho
   de 430. Solto, o desenho cresce com a tela e a tipografia sobe junto. */
.desenho svg.dg-linha--mob{display:block;max-width:460px;margin-inline:auto}
  .dg-caminho{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .dg-chevron{display:none}   /* 7 itens em 2 colunas desalinham */
}
@media (max-width:480px){
  .dg-caminho{grid-template-columns:minmax(0,1fr);max-width:260px;margin-inline:auto}
  /* empilhado, o conector aponta para BAIXO — a mesma lição da .fase-seta:
     seta lateral é transversal ao gesto de rolagem. */
  .dg-chevron{display:block;transform:rotate(135deg);margin:2px 0}
}
@media (prefers-reduced-motion:reduce){
  .fase-cap,.revela .fase-cap,
  .fase-seta,.revela .fase-seta,
  .revela .dg-linha--mob .fase-seta{transform:none;transition:none}
  /* O ramo else do observador (index.html) adiciona .visivel em tudo quando
     reduced-motion casa — o que DISPARAVA molDraw justamente para quem pediu
     menos movimento. Era o único elemento animado do site sem essa saída. */
  .mol-lig,.revela .mol-lig,.revela.visivel .mol-lig{stroke-dashoffset:0;animation:none}
}

/* ============================================================
   20. EQUIPE — os seis temas, desenhados
   ============================================================ */
/* Herda a construção de .equipe-pessoa (arco + rótulo + linha), que é a
   silhueta NATIVA desta seção: o desenho entra no lugar exato onde estava a
   foto de banco. Sem borda e sem caixa de propósito — a index já tem .mecs,
   .dg-caminho, .passo--card e .versus, e um quinto card-com-moldura seria só
   mais uma variação do mesmo recurso. */
.eq-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}
.eq-tema{text-align:center}
.eq-arco{border-radius:var(--arco);overflow:hidden;background:var(--banda);margin-bottom:14px}

/* O desenho é o CONTEÚDO do arco, não um glifo dentro de uma pastilha: ocupa a
   largura inteira. É o que separa este bloco do .mec-icone de 26px. */
.eq-arco svg{display:block;width:100%;height:auto}

/* Peso óptico sem tabela de breakpoint. O alvo da casa é 1,8px na tela, e o
   sw bruto não significa nada porque o peso é sw x (px de render / viewBox) —
   estes cards vão de ~384px (3 col) a ~165px (2 col a 390), o que exigiria
   tres valores mágicos. `non-scaling-stroke` resolve o peso em px de TELA, e
   1,8 passa a ser literalmente o alvo, em qualquer largura.
   Propriedade CSS vence atributo de apresentação: os SVG não setam stroke-width. */
.eq-arco svg :is(path,circle,rect,line,polyline,polygon,ellipse){
  vector-effect:non-scaling-stroke;stroke-width:1.8;
}
/* Mira a FORMA, não o atributo [stroke]: vector-effect não é herdado, então um
   desenho que declarasse stroke num <g> deixaria os filhos com o peso errado e
   um seletor [stroke] não pegaria. */

.eq-tema strong{display:block;font-weight:500;font-size:1.02rem;color:var(--tinta);line-height:1.3}
.eq-tema span{display:block;font-size:.85rem;color:var(--tinta-suave);margin-top:5px;line-height:1.45}

/* Sem animação de traço aqui, de propósito: o .revela da grade já dá a entrada,
   e traço animado é a única coisa do site que já nasceu invisível para quem
   pede prefers-reduced-motion (ver a saída explícita do .mol-lig no bloco 19).
   Menos peça móvel, menos armadilha. */

@media (max-width:900px){
  .eq-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:420px){
  .eq-grade{gap:22px 14px}
  .eq-tema strong{font-size:.94rem}
  .eq-tema span{font-size:.8rem}
}