/* Casa Vitalis — LPs (Vercel) — assets/css/vitalis.css
   Versão: v3 — 2026-09-16 13:14 (America/Sao_Paulo)
   MOBILE-FIRST: base = celular; @media (min-width) amplia. Paleta tirada das fotos da Dra. */
:root{
  --floresta:#1C2B29;      /* parede verde do ensaio */
  --floresta-2:#243734;
  --salvia:#8FA197;        /* verde claro de apoio */
  --caramelo:#B8672F;      /* camisa do ensaio */
  --caramelo-claro:#E0A574;
  --vinho:#6B2731;
  --pedra:#ECEAE4; --papel:#F7F5F0; --tinta:#18201F; --tinta-2:#4E5856;
  --linha:rgba(24,32,31,.14); --linha-clara:rgba(247,245,240,.22);
  --display:"Bodoni Moda","Didot",Georgia,serif;
  --texto:"Jost",system-ui,sans-serif;
  --r:4px; --max:1180px; --g:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--texto);color:var(--tinta);background:var(--papel);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--caramelo-claro);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--g)}

/* ---------- tipografia (base mobile) ---------- */
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--caramelo)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.01em}
h1{font-size:clamp(2.35rem,10.5vw,5.4rem)}
h2{font-size:clamp(1.95rem,7.5vw,3.4rem)}
h3{font-size:1.45rem}
h1 em,h2 em{font-style:italic;color:var(--caramelo)}
.lead{font-size:1.08rem;font-weight:300;color:var(--tinta-2);max-width:34em}
.aviso{font-size:.78rem;color:var(--tinta-2)}

/* ---------- topo ---------- */
.topo{position:absolute;inset:0 0 auto;z-index:5;padding:14px 0;color:var(--papel)}
.topo .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.marca{font-family:var(--display);font-size:1.12rem;line-height:1.1;text-decoration:none;color:var(--papel)}
.marca small{display:block;font-family:var(--texto);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8;margin-top:3px}
.topo .btn{display:none}

/* ---------- botões (alvo mínimo 48px) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;cursor:pointer;font:500 1rem/1.2 var(--texto);letter-spacing:.03em;padding:14px 24px;border-radius:var(--r);text-decoration:none;text-align:center;transition:background .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-vinho{background:var(--vinho);color:var(--papel)}
.btn-caramelo{background:var(--caramelo);color:#fff}
.btn-claro{background:var(--papel);color:var(--floresta)}
.btn-linha{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn[disabled]{opacity:.5;cursor:not-allowed}
@media(hover:hover){.btn-vinho:hover{background:#561e27}.btn-caramelo:hover{background:#9f5424}.btn-claro:hover{background:#fff}.btn-linha:hover{background:rgba(255,255,255,.08)}}

/* ---------- hero: foto sangrando no topo, texto abaixo ---------- */
.hero{background:var(--floresta);color:var(--papel);position:relative;overflow:hidden}
.hero-foto{position:relative;height:min(118vw,620px);margin:0}
.hero-foto picture,.hero-foto img{width:100%;height:100%}
.hero-foto img{object-fit:cover;object-position:var(--pos,60% 20%)}
.hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(28,43,41,.55) 0,rgba(28,43,41,0) 22%,rgba(28,43,41,0) 58%,var(--floresta) 100%)}
.hero-txt{position:relative;margin-top:-72px;padding-bottom:48px;z-index:1}
.hero h1{margin:12px 0 16px}
.hero .lead{color:rgba(247,245,240,.82)}
.hero-acoes{display:grid;gap:10px;margin-top:26px}
.credencial{display:flex;gap:14px;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--linha-clara);font-size:.82rem;color:rgba(247,245,240,.72)}
.credencial b{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--papel)}
.hero-simples .wrap{padding-top:96px;padding-bottom:48px}

/* ---------- seções ---------- */
section{padding:64px 0}
.sec-pedra{background:var(--pedra)}
.sec-escura{background:var(--floresta);color:var(--papel)}
.sec-escura .lead{color:rgba(247,245,240,.78)}
.sec-vinho{background:var(--vinho);color:var(--papel)}
.sec-vinho .eyebrow,.sec-escura .eyebrow{color:var(--caramelo-claro)}
.cab{max-width:760px;margin-bottom:36px}
.cab h2{margin:12px 0 14px}

/* sinais: lista 1 coluna no celular */
.sinais{display:grid;border-top:1px solid var(--linha)}
.sinal{display:grid;grid-template-columns:40px 1fr;gap:2px 14px;padding:18px 0;border-bottom:1px solid var(--linha)}
.sinal svg{grid-row:span 2;width:28px;height:28px;stroke:var(--vinho);fill:none;stroke-width:1.4;margin-top:2px}
.sinal b{font-weight:500}
.sinal span{color:var(--tinta-2);font-size:.95rem}

/* etapas do atendimento: sequência real */
.etapas{display:grid;gap:26px;counter-reset:e}
.etapa{border-left:1px solid var(--linha-clara);padding-left:18px}
.etapa::before{counter-increment:e;content:"Etapa " counter(e);display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--caramelo-claro);margin-bottom:8px}
.etapa h3{margin-bottom:6px}
.etapa p{font-size:.95rem;color:rgba(247,245,240,.78)}

/* sobre: foto grande + história em primeira pessoa */
.sobre{display:grid;gap:28px}
.sobre-foto{position:relative;margin:0 calc(var(--g) * -1)}
.sobre-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:var(--pos,50% 25%)}
.citacao{font-family:var(--display);font-style:italic;font-size:1.55rem;line-height:1.25;color:var(--caramelo);margin:18px 0}
.fatos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;padding-top:20px;border-top:1px solid var(--linha)}
.sec-escura .fatos{border-color:var(--linha-clara)}
.fatos div{font-size:.84rem;color:var(--tinta-2)}
.sec-escura .fatos div{color:rgba(247,245,240,.7)}
.fatos b{display:block;font-family:var(--display);font-weight:400;font-size:1.7rem;color:inherit;line-height:1.1}
.sec-escura .fatos b{color:var(--papel)}
.sec-pedra .fatos b,.fatos b{color:var(--tinta)}
.sec-escura .fatos b{color:var(--papel)}

/* ===== quiz: termômetro de vitalidade (assinatura) ===== */
.quiz{display:grid;gap:22px;background:var(--papel);border-radius:var(--r);padding:22px 18px 26px;box-shadow:0 24px 60px rgba(28,43,41,.12)}
.termo{display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--papel);padding:8px 0;z-index:2}
.termo-wrap{flex:1}
.termo-tubo{position:relative;height:16px;border-radius:40px;background:var(--pedra);box-shadow:inset 0 0 0 1px var(--linha);overflow:hidden}
.termo-nivel{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:linear-gradient(to right,var(--salvia),var(--caramelo) 55%,var(--vinho));transition:width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1)}
.termo-marcas,.termo-legenda{display:none}
.termo-bulbo{flex:none;width:46px;height:46px;border-radius:50%;background:var(--vinho);display:grid;place-items:center;color:var(--papel);font-family:var(--display);font-size:1rem}
.q-passo{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--caramelo);margin-bottom:10px}
.q-pergunta{font-family:var(--display);font-size:1.6rem;line-height:1.18;margin-bottom:20px;min-height:2.4em}
.q-opcoes{display:grid;gap:10px}
.q-op{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;text-align:left;background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:14px 16px;font:400 1.02rem/1.3 var(--texto);color:var(--tinta);cursor:pointer;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.q-op::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--salvia)}
.q-op[aria-pressed="true"]{border-color:var(--vinho)}
.q-op[aria-pressed="true"]::before{background:var(--vinho);border-color:var(--vinho);box-shadow:inset 0 0 0 4px #fff}
@media(hover:hover){.q-op:hover{border-color:var(--caramelo)}}
.q-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.q-voltar{background:none;border:0;font:inherit;color:var(--tinta-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.q-voltar[hidden]{display:none}
.q-resultado h3{font-size:1.8rem;margin:6px 0 10px}
.q-resultado p{color:var(--tinta-2)}

/* ---------- formulário ---------- */
.form{display:grid;gap:14px}
.campo label{display:block;font-size:.82rem;font-weight:500;margin-bottom:6px}
.campo input,.campo select{width:100%;min-height:52px;font:400 16px var(--texto);padding:12px 14px;border:1px solid var(--linha);border-radius:var(--r);background:#fff;color:var(--tinta);-webkit-appearance:none;appearance:none}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--tinta-2) 50%),linear-gradient(135deg,var(--tinta-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--caramelo);box-shadow:0 0 0 3px rgba(184,103,47,.18)}
.campo .erro{display:none;color:var(--vinho);font-size:.8rem;margin-top:4px}
.campo.invalido input,.campo.invalido select{border-color:var(--vinho)}
.campo.invalido .erro{display:block}
.aceite{display:flex;gap:12px;align-items:flex-start;font-size:.82rem;color:var(--tinta-2);line-height:1.45}
.aceite input{margin-top:2px;accent-color:var(--vinho);width:20px;height:20px;flex:none}
.form .btn{width:100%}
.form-msg{font-size:.9rem;color:var(--vinho);min-height:1.2em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* captação */
.captar{display:grid;gap:28px}
.caixa{background:var(--papel);color:var(--tinta);border-radius:var(--r);padding:24px 18px;box-shadow:0 24px 60px rgba(28,43,41,.14)}

/* capa do guia */
.capa{width:min(62vw,300px);aspect-ratio:3/4;margin:0 auto;background:var(--floresta-2);color:var(--papel);border-radius:2px 10px 10px 2px;padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:14px 20px 44px rgba(0,0,0,.35),inset 6px 0 0 rgba(0,0,0,.25);transform:rotate(-3deg);overflow:hidden;position:relative}
.capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.capa>*{position:relative}
.capa h3{font-size:1.9rem;line-height:1}
.capa h3 em{color:var(--caramelo-claro)}
.capa small{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.indice{list-style:none;border-top:1px solid var(--linha-clara)}
.indice li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--linha-clara)}
.indice li span:last-child{font-family:var(--display);font-style:italic;color:var(--caramelo-claro)}

/* hub: frentes */
.frentes{display:grid;border-top:1px solid var(--linha)}
.frente{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--linha);text-decoration:none;min-height:88px}
.frente .eyebrow{display:block;margin-bottom:6px}
.frente h3{font-size:1.6rem;margin-bottom:4px}
.frente p{color:var(--tinta-2);font-size:.93rem}
.frente .seta{font-size:1.5rem;color:var(--vinho);transition:transform .2s}
.frente.breve{pointer-events:none;opacity:.5}
@media(hover:hover){.frente:hover .seta{transform:translateX(6px)}}

/* rodapé */
.rodape{background:var(--tinta);color:rgba(247,245,240,.7);padding:44px 0 96px;font-size:.88rem}
.rodape .wrap{display:grid;gap:22px}
.rodape a{text-decoration:none;display:inline-block;padding:6px 0}

/* barra fixa de ação no celular */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:8px;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));background:rgba(247,245,240,.96);backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .3s}
.barra.on{transform:none}
.barra .btn{flex:1;min-height:48px;padding:10px 12px;font-size:.92rem}
.barra .btn-zap{flex:0 0 52px;padding:0;background:#1f7a4d;color:#fff}
.barra svg{width:24px;height:24px;fill:currentColor}

/* revelar */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.termo-nivel,.barra{transition:none}html{scroll-behavior:auto}}

/* ================= ≥ 700px (tablet) ================= */
@media(min-width:700px){
  :root{--g:32px}
  body{font-size:18px}
  section{padding:88px 0}
  .hero-acoes{display:flex;flex-wrap:wrap}
  .sinais{grid-template-columns:1fr 1fr;column-gap:40px}
  .etapas{grid-template-columns:1fr 1fr;gap:36px}
  .fatos{grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px}
  .form{grid-template-columns:1fr 1fr}
  .form .full{grid-column:1/-1}
  .form .btn{width:auto}
  .frentes{grid-template-columns:1fr 1fr;column-gap:40px}
  .quiz{padding:36px}
  .caixa{padding:36px}
  .rodape{padding-bottom:44px}
  .rodape .wrap{grid-template-columns:1fr auto}
  .rodape .aviso{grid-column:1/-1}
}

/* ================= ≥ 1000px (desktop) ================= */
@media(min-width:1000px){
  .topo{padding:24px 0}
  .topo .btn{display:inline-flex;min-height:44px;padding:10px 18px;font-size:.88rem}
  .marca{font-size:1.35rem}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;min-height:min(94vh,880px);padding-top:100px}
  .hero-foto{order:2;height:auto;align-self:stretch;margin:0}
  .hero-foto::after{background:linear-gradient(to right,var(--floresta) 0,rgba(28,43,41,0) 28%),linear-gradient(to bottom,rgba(28,43,41,.5) 0,rgba(28,43,41,0) 25%)}
  .hero-txt{margin-top:0;padding:40px 0 80px}
  .hero-simples .wrap{display:block;min-height:0;padding-top:140px}
  .etapas{grid-template-columns:repeat(4,1fr)}
  .sobre{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
  .sobre-foto{margin:0}
  .sobre-foto img{border-radius:var(--r)}
  .quiz{grid-template-columns:110px 1fr;gap:48px;padding:48px}
  .termo{flex-direction:column;position:static;padding:0}
  .termo-wrap{position:relative;display:flex;justify-content:center;width:100%}
  .termo-tubo{width:34px;height:auto;min-height:340px}
  .termo-nivel{inset:auto 0 0 0;width:auto;height:var(--p,0%);background:linear-gradient(to top,var(--salvia),var(--caramelo) 55%,var(--vinho))}
  .termo-marcas{display:flex;position:absolute;top:10px;bottom:10px;left:calc(50% + 26px);flex-direction:column;justify-content:space-between;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
  .termo-bulbo{width:58px;height:58px;margin-top:-12px;font-size:1.25rem;position:relative}
  .termo-legenda{display:block;margin-top:10px;font-size:.72rem;text-align:center;color:var(--tinta-2)}
  .q-pergunta{font-size:2.2rem}
  .captar{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .capa{width:320px}
  .barra{display:none}
}

/* variações de hero */
.hero-foto.sem-grad{height:auto;display:grid;place-items:center;padding:92px 0 40px}
.hero-foto.sem-grad::after{display:none}
.hero-simples .hero-txt{margin-top:0}
@media(min-width:1000px){.hero-foto.sem-grad{padding:60px 0}}
.hero-foto.sem-grad + .hero-txt{margin-top:0}
.capa picture{position:absolute;inset:0}
.capa picture img{opacity:.42}
.termo-bulbo{font-variant-numeric:lining-nums;letter-spacing:-.02em}
.hero-txt{padding-left:var(--g);padding-right:var(--g)}
@media(min-width:1000px){.hero .wrap{padding-left:var(--g)!important;padding-right:0!important}.hero-txt{padding-left:0}}