/* ============================================================
   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).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

: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;

  --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)}
body:not(:has(.hero)) 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)}
.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}
.trat-preco{font-family:var(--fonte-display);font-size:1.35rem;color:var(--marca)}
.trat-preco small{display:block;font-family:var(--fonte-texto);font-size:.8rem;color:var(--tinta-suave)}

/* ============================================================
   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);
}
.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:820px;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)}
.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}
}