/* ============================================================
   Landing pages · Dr. Juliano Machado
   Base compartilhada pelas páginas de campanha (Meta Ads / Google Ads).
   Paleta oficial: navy #0B2742 + dourado #C6A15B.
   ============================================================ */

/* fontes variáveis servidas daqui, só o subconjunto latino (cobre o pt-BR) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#0B2742;
  --navy-deep:#071A2E;
  --gold:#C6A15B;
  --gold-soft:#E0C48F;
  --cream:#F7F4EF;
  --ink:#16202C;
  --muted:#5C6B7A;
  --line:#E2DDD4;

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.0625rem;
  --t-lg:1.375rem; --t-xl:2rem; --t-2xl:2.75rem; --t-3xl:4rem;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.7s;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Inter,system-ui,sans-serif; font-size:var(--t-md); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Fraunces,Georgia,serif; font-weight:600; line-height:1.12; margin:0}
h1,h2,h3,p,li,blockquote{overflow-wrap:break-word}
p{margin:0 0 var(--s2)}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s3)}
.center{text-align:center}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s2) var(--s3);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-solid{background:rgba(11,39,66,.94); box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav__brand{font-family:Fraunces,serif; font-size:var(--t-md); color:#fff; text-decoration:none}
.nav__brand span{color:var(--gold)}
/* logo branca: 40px na barra (arquivo em 3x); height:auto preserva a proporção */
.nav__logo{display:block; height:40px; width:auto}
@media(max-width:680px){ .nav__logo{height:34px} }
.nav__links{display:flex; gap:var(--s3); align-items:center}
.nav__links a{color:rgba(255,255,255,.82); text-decoration:none; font-size:var(--t-sm)}
.nav__links a:hover{color:#fff}

/* botão do menu — só aparece no celular */
.nav__hamb{
  display:none; width:44px; height:44px; flex:none; margin-left:auto;
  align-items:center; justify-content:center; gap:5px; flex-direction:column;
  background:none; border:0; padding:0; cursor:pointer;
}
.nav__hamb span{display:block; width:22px; height:2px; background:#fff; transition:transform .3s var(--ease), opacity .2s}
.nav.is-aberto .nav__hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-aberto .nav__hamb span:nth-child(2){opacity:0}
.nav.is-aberto .nav__hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{
  display:inline-block; padding:14px 26px; border-radius:2px;
  background:var(--gold); color:var(--navy-deep); text-decoration:none;
  font-weight:600; font-size:var(--t-sm); letter-spacing:.02em;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{background:var(--gold-soft); transform:translateY(-1px)}
.btn--lg{padding:17px 34px; font-size:var(--t-md)}
.btn--ghost{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy)}
.btn--ghost:hover{background:var(--navy); color:#fff}

/* ---------- cena scroll cinema ---------- */
.scene{position:relative; height:380vh; background:#0A0A0B}
.scene--hero{height:460vh}
.scene__sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#0A0A0B}
.scene__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .85s var(--ease);
}
.scene__video.is-ready{opacity:1}
.scene__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 84% at 50% 44%, rgba(10,10,11,0) 38%, rgba(10,10,11,.74) 100%),
    linear-gradient(0deg, rgba(10,10,11,.93) 0%, rgba(10,10,11,.28) 36%, rgba(10,10,11,0) 58%);
}
.scene__copy{
  position:absolute; z-index:3; left:0; right:0; bottom:11vh;
  padding:0 var(--s3); color:#fff; text-align:center;
}
.scene__copy > div{max-width:680px; margin:0 auto}
.scene__copy .eyebrow{color:var(--gold); margin-bottom:var(--s2); text-shadow:0 2px 14px rgba(0,0,0,.95)}
/* rótulo dentro do h1 (SEO): desfaz o que ele herdaria do título */
h1 > .eyebrow{
  display:block; font-family:Inter,system-ui,sans-serif; font-weight:400; line-height:1.65;
}
.scene__copy h1,
.scene__copy h2{
  color:#fff; font-size:clamp(1.7rem,4.2vw,2.9rem); margin:0 auto var(--s2);
  text-shadow:0 2px 26px rgba(0,0,0,.9);
}
.scene__copy p{
  color:rgba(255,255,255,.84); font-size:var(--t-sm); margin:0 auto var(--s2); max-width:56ch;
  text-shadow:0 2px 16px rgba(0,0,0,.95);
}
.scene__copy p:last-child{margin-bottom:0}
.scene__alert{
  color:#fff !important; border-left:2px solid var(--gold);
  padding-left:var(--s2); text-align:left; max-width:48ch !important;
}
.scene__alert strong{color:var(--gold-soft)}
.scene__cta{margin-top:var(--s3) !important}
.scene__loader{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:#0A0A0B; color:rgba(255,255,255,.55);
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  transition:opacity .6s var(--ease);
}
.scene__loader.is-gone{opacity:0; pointer-events:none}
.scene__hint{
  position:absolute; z-index:3; left:50%; bottom:var(--s3); transform:translateX(-50%);
  color:rgba(255,255,255,.5); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; transition:opacity .4s var(--ease);
}

/* mostrador */
.dial{
  position:absolute; z-index:3; right:var(--s5); top:50%; transform:translateY(-50%);
  text-align:right; color:#fff; padding:var(--s3) var(--s3) var(--s3) var(--s6);
  background:radial-gradient(ellipse at 80% 50%, rgba(10,10,11,.8) 0%, rgba(10,10,11,0) 72%);
}
.dial__label{
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:var(--s1); text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.dial__value{
  font-family:Fraunces,serif; font-size:clamp(2rem,4.6vw,3.4rem);
  color:var(--gold); font-variant-numeric:tabular-nums; line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.95);
}
.dial__unit{
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-top:var(--s1);
}
.dial__ticks{margin-top:var(--s3); margin-left:auto; width:120px; height:3px; background:rgba(255,255,255,.16); position:relative; overflow:hidden}
.dial__fill{position:absolute; left:0; top:0; height:100%; width:0%; background:var(--gold)}
@media(max-width:860px){
  .scene{height:340vh} .scene--hero{height:400vh}
  .dial{right:var(--s3); top:var(--s7); transform:none; padding-left:var(--s5)}
  .dial__ticks{width:84px}
  .scene__copy{bottom:8vh}
}

/* ---------- seções ---------- */
.section{padding:var(--s8) 0}
.section--tight{padding:var(--s6) 0}
.section--navy{background:var(--navy); color:#fff}
.section--deep{background:var(--navy-deep); color:#fff}
.section--navy h2,.section--deep h2{color:#fff}
.eyebrow{font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s2)}
.section--navy .eyebrow,.section--deep .eyebrow{color:var(--gold-soft)}
h2,
/* o agendamento usa h1 no lugar do h2 (era a unica pagina sem h1) */
.section--deep h1{font-size:clamp(1.6rem,3.6vw,var(--t-2xl)); max-width:22ch; margin-bottom:var(--s3)}
.center h1{margin-left:auto; margin-right:auto}
.center h2{margin-left:auto; margin-right:auto}
.lead{font-size:var(--t-lg); color:var(--muted); max-width:58ch; line-height:1.5}
.center .lead{margin-left:auto; margin-right:auto}
.section--navy .lead,.section--deep .lead{color:rgba(255,255,255,.75)}

.capsule{background:#fff; border-left:3px solid var(--gold); padding:var(--s4); max-width:72ch; box-shadow:0 1px 3px rgba(11,39,66,.06)}
.capsule p:last-child{margin-bottom:0}

.grid{display:grid; gap:var(--s3)}
/* itens de grid têm min-width:auto e não encolhem abaixo do conteúdo:
   sem isto, um endereço comprido estoura a página no celular */
.grid > *, .split > *{min-width:0}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} }

.card{background:#fff; padding:var(--s4); border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 32px rgba(11,39,66,.09)}
.card h3{font-size:var(--t-lg); margin-bottom:var(--s1)}
.card p{color:var(--muted); font-size:var(--t-sm); margin-bottom:0}
.card__num{font-family:Fraunces,serif; color:var(--gold); font-size:var(--t-sm); letter-spacing:.1em; margin-bottom:var(--s2)}
.card__acoes{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line);
}
.card__link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-sm); font-weight:600; color:var(--navy); text-decoration:none;
}
.card__link:hover{color:var(--gold)}
.card__link svg{width:16px; height:16px; fill:var(--gold); flex:none}
.card__link--mapa{color:var(--muted); font-weight:500}
.card__link--mapa:hover{color:var(--navy)}
.section--navy .card__acoes,.section--deep .card__acoes{border-top-color:rgba(255,255,255,.14)}
.section--navy .card__link,.section--deep .card__link{color:#fff}
.section--navy .card__link--mapa,.section--deep .card__link--mapa{color:rgba(255,255,255,.7)}
.section--navy .card,.section--deep .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1)}
.section--navy .card h3,.section--deep .card h3{color:#fff}
.section--navy .card p,.section--deep .card p{color:rgba(255,255,255,.72)}

.steps{display:grid; gap:var(--s4)}
.step{display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:start}
.step__n{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold); font-family:Fraunces,serif}
.step h3{font-size:var(--t-lg); margin-bottom:4px}
.step p{font-size:var(--t-sm); margin:0; color:var(--muted)}
.section--navy .step h3,.section--deep .step h3{color:#fff}
.section--navy .step p,.section--deep .step p{color:rgba(255,255,255,.72)}

.signals{display:grid; gap:var(--s2)}
.signal{padding:var(--s3); background:#fff; border:1px solid var(--line); border-left:2px solid var(--gold); font-weight:500}
.section--navy .signal,.section--deep .signal{background:rgba(255,255,255,.05); border:none; border-left:2px solid var(--gold)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:var(--s4)} }
/* height:auto é obrigatório: os atributos width/height do <img> (que existem
   para reservar espaço e evitar CLS) viram estilo de apresentação e anulam o
   aspect-ratio, esticando o retrato. */
.portrait{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--line)}

.convenios{display:flex; flex-wrap:wrap; gap:var(--s2)}
.convenio{padding:10px 18px; border:1px solid var(--line); background:#fff; font-size:var(--t-sm); color:var(--muted)}

.quote{margin:0; padding:var(--s4); background:rgba(255,255,255,.05)}
.quote p{color:rgba(255,255,255,.88)}
.quote footer{color:var(--gold-soft); font-size:var(--t-sm)}

.faq details{border-bottom:1px solid var(--line); padding:var(--s3) 0}
.faq summary{cursor:pointer; font-family:Fraunces,serif; font-size:var(--t-lg); list-style:none; display:flex; justify-content:space-between; gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--gold); font-size:var(--t-xl); line-height:1}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:var(--s2); color:var(--muted); max-width:70ch}

.cta{background:var(--navy-deep); color:#fff; text-align:center; padding:var(--s8) var(--s3)}
.cta h2{margin:0 auto var(--s3); color:#fff}
.cta .lead{margin:0 auto var(--s4); color:rgba(255,255,255,.75)}
.cta__note{font-size:var(--t-xs); color:rgba(255,255,255,.5); margin-top:var(--s3)}

.foot{background:var(--navy-deep); color:rgba(255,255,255,.55); padding:var(--s5) 0; font-size:var(--t-sm)}
.foot__row{display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.foot a{color:rgba(255,255,255,.72)}

.reveal{opacity:0; transform:translateY(22px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ============================================================
   CONTINUIDADE: a jornada é uma só, as páginas são etapas dela
   ============================================================ */

/* transição suave entre páginas (Chrome); sem ela cada clique "pisca" */
@view-transition{ navigation:auto }

/* item do menu da página atual */
.nav__links a[aria-current="page"]{
  color:#fff; position:relative;
}
.nav__links a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--gold);
}

/* trilha de etapas */
.trilha{background:#fff; border-bottom:1px solid var(--line); padding:var(--s3) 0}
.trilha__lista{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  flex-wrap:wrap; margin:0; padding:0; list-style:none;
}
.trilha__item{
  display:flex; align-items:center; gap:var(--s1);
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.trilha__item a{text-decoration:none}
.trilha__item a:hover{color:var(--navy)}
.trilha__n{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); font-size:11px; letter-spacing:0; color:var(--muted);
}
.trilha__item.is-feita .trilha__n{background:var(--gold); border-color:var(--gold); color:var(--navy-deep)}
.trilha__item.is-atual{color:var(--navy); font-weight:600}
.trilha__item.is-atual .trilha__n{border-color:var(--navy); color:var(--navy)}
.trilha__sep{color:var(--line)}
@media(max-width:680px){ .trilha__item:not(.is-atual) span:last-child{display:none} }

/* próximo passo no fim da página */
.proximo{background:var(--cream); padding:var(--s7) 0}
.proximo__card{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold);
  padding:var(--s5); max-width:720px; margin:0 auto; text-align:center;
}
.proximo__rotulo{
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--s2);
}
.proximo__card h2{font-size:var(--t-xl); margin:0 auto var(--s2)}
.proximo__card p{color:var(--muted); font-size:var(--t-sm); max-width:52ch; margin:0 auto var(--s4)}
.proximo__links{display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap}

/* ============================================================
   FORMULÁRIO DE AGENDAMENTO
   ============================================================ */
.form{
  background:#fff; padding:var(--s5); max-width:720px; margin:0 auto;
  border:1px solid var(--line); text-align:left;
}
.form__linha{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-bottom:var(--s3)}
@media(max-width:680px){ .form__linha{grid-template-columns:1fr} }
.form__campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.form__campo--largo{grid-column:1 / -1}
.form label{
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.form input, .form select, .form textarea{
  font-family:inherit; font-size:var(--t-md); color:var(--ink);
  padding:13px 14px; border:1px solid var(--line); border-radius:2px;
  background:#fff; width:100%; min-width:0;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(198,161,91,.18);
}
.form textarea{resize:vertical; min-height:90px}
.form__opcoes{display:flex; gap:var(--s2); flex-wrap:wrap}
.form__opcao{
  flex:1; min-width:120px; position:relative;
}
.form__opcao input{position:absolute; opacity:0; width:0; height:0}
.form__opcao span{
  display:block; text-align:center; padding:12px 8px; border:1px solid var(--line);
  border-radius:2px; cursor:pointer; font-size:var(--t-sm);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.form__opcao input:checked + span{border-color:var(--gold); background:rgba(198,161,91,.12); font-weight:600}
.form__opcao input:focus-visible + span{box-shadow:0 0 0 3px rgba(198,161,91,.25)}
.form__erro{color:#B3261E; font-size:var(--t-xs); margin-top:4px; display:none}
.form__campo.tem-erro input, .form__campo.tem-erro select{border-color:#B3261E}
.form__campo.tem-erro .form__erro{display:block}
.form__envio{margin-top:var(--s4); text-align:center}
.form__nota{font-size:var(--t-xs); color:var(--muted); margin-top:var(--s3); text-align:center}
.form button[type=submit]{border:none; cursor:pointer; font-family:inherit}

/* dois CTAs lado a lado: o link de texto no escuro ficava ilegível */
.botoes{display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap}
.btn--zap{
  display:inline-flex; align-items:center; gap:10px;
  background:#1EA95A; color:#fff;
}
.btn--zap:hover{background:#178C4A}
.btn--zap svg{width:20px; height:20px; fill:currentColor; flex:none}
@media(max-width:560px){ .botoes{flex-direction:column} .botoes .btn{width:100%; text-align:center; justify-content:center} }

/* ---------- depoimentos do Google ---------- */
.depoimentos{background:var(--navy-deep); color:#fff}
.depoimentos h2{color:#fff; margin-bottom:var(--s5)}
.depo__resumo{
  display:flex; align-items:center; justify-content:center; gap:var(--s5);
  flex-wrap:wrap; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  padding:var(--s4) var(--s5); margin-bottom:var(--s6);
}
.depo__nota{display:flex; align-items:center; gap:var(--s2)}
.depo__nota strong{font-family:Fraunces,serif; font-size:3.2rem; line-height:1; color:#fff}
.depo__qtd{font-size:var(--t-sm); color:rgba(255,255,255,.65)}
.depo__aviso{font-size:var(--t-sm); color:rgba(255,255,255,.72); max-width:34ch; margin:0}
.depo__aviso strong{color:var(--gold-soft)}
.depo__estrelas{display:block; color:var(--gold); letter-spacing:2px; font-size:var(--t-sm)}
.depo__estrelas--grande{font-size:var(--t-lg); letter-spacing:3px}

.depo__grade{columns:3; column-gap:var(--s3)}
@media(max-width:980px){ .depo__grade{columns:2} }
@media(max-width:680px){ .depo__grade{columns:1} }
.depo{
  break-inside:avoid; margin:0 0 var(--s3);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  padding:var(--s4); display:inline-block; width:100%;
}
.depo__topo{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3)}
.depo__avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; font-weight:600; font-size:var(--t-sm);
}
/* quando é foto real do perfil: object-fit evita distorcer, e height:auto
   seria errado aqui — o avatar é sempre um círculo de 42px */
img.depo__avatar{display:block; object-fit:cover; background:rgba(255,255,255,.1)}
.depo__nome{display:block; font-weight:600; color:#fff; font-size:var(--t-sm)}
.depo__texto{
  margin:0; font-size:var(--t-md); line-height:1.6; color:rgba(255,255,255,.92);
  font-family:Fraunces,Georgia,serif;
}
.depo__fonte{
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid rgba(255,255,255,.1);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
@media(max-width:680px){
  .depo__resumo{flex-direction:column; text-align:center; gap:var(--s3); padding:var(--s4)}
  .depo__aviso{max-width:none}
}

/* ---------- calendário de disponibilidade ---------- */
.agenda{display:grid; gap:var(--s3); margin-top:var(--s1)}

/* passo 2: os 3 próximos dias livres em destaque */
.agenda__dias{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.agenda__chip{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px;
  border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer;
  font-family:inherit; color:var(--ink); min-height:66px;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.agenda__chip:hover{border-color:var(--gold)}
.agenda__chip-dow{font-size:var(--t-xs); color:var(--muted)}
.agenda__chip-data{font-family:Fraunces,serif; font-size:var(--t-lg); font-weight:600; color:var(--navy)}
.agenda__chip.is-sel{background:var(--navy); border-color:var(--navy)}
.agenda__chip.is-sel .agenda__chip-dow{color:var(--gold-soft)}
.agenda__chip.is-sel .agenda__chip-data{color:#fff}
.agenda__link{
  background:none; border:0; padding:0; font:inherit; font-size:var(--t-sm);
  color:var(--navy); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.agenda__mais{margin-top:var(--s2)}
.agenda__outras{
  justify-self:start; background:none; border:0; padding:4px 0; font:inherit;
  font-size:var(--t-sm); color:var(--navy); font-weight:600; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.agenda__outras[hidden], .agenda__cal[hidden]{display:none}
/* esqueleto enquanto a agenda responde: a tela não "trava" em branco */
.is-esqueleto{
  pointer-events:none; border-color:transparent !important; min-height:44px;
  background:linear-gradient(90deg,#EEE9E0 25%,#F7F4EE 50%,#EEE9E0 75%) !important;
  background-size:200% 100% !important; animation:esqueleto 1.2s linear infinite;
}
.agenda__chip.is-esqueleto{min-height:66px}
@keyframes esqueleto{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .is-esqueleto{animation:none} }
.agenda__cal{border:1px solid var(--line); padding:var(--s3); background:#fff}
.agenda__topo{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3)}
.agenda__mes{font-family:Fraunces,serif; font-size:var(--t-md); text-transform:capitalize}
.agenda__nav{
  width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:2px;
  cursor:pointer; font-size:16px; line-height:1; color:var(--navy);
}
.agenda__nav:disabled{opacity:.35; cursor:default}
.agenda__grade{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.agenda__dow{
  text-align:center; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding-bottom:6px;
}
.agenda__dia{
  aspect-ratio:1; border:1px solid transparent; background:transparent; border-radius:2px;
  font-family:inherit; font-size:var(--t-sm); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; position:relative;
}
.agenda__dia[disabled]{color:#C9C9C9; cursor:default}
.agenda__dia--livre{border-color:var(--gold); color:var(--navy); font-weight:600}
.agenda__dia--livre::after{
  content:''; position:absolute; bottom:5px; width:4px; height:4px;
  border-radius:50%; background:var(--gold);
}
.agenda__dia--sel{background:var(--navy); border-color:var(--navy); color:#fff}
.agenda__dia--sel::after{background:var(--gold-soft)}
.agenda__horarios{border:1px solid var(--line); padding:var(--s3); background:#fff; min-height:180px}
.agenda__rotulo{
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:var(--s2);
}
.agenda__vazio{color:var(--muted); font-size:var(--t-sm); margin:0}
/* 4 por linha: os 4 horários iniciais cabem numa linha só, até no celular */
.agenda__lista{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
@media (min-width:700px){ .agenda__lista{grid-template-columns:repeat(6,minmax(0,1fr))} }
.agenda__hora{
  padding:11px 6px; border:1px solid var(--line); background:#fff; border-radius:2px;
  font-family:inherit; font-size:var(--t-sm); color:var(--ink); cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.agenda__hora:hover{border-color:var(--gold)}
.agenda__hora--sel{background:var(--gold); border-color:var(--gold); color:var(--navy-deep); font-weight:600}
.agenda__hora--ocupado{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-style:dashed; background:#F4F1EB; color:#A8A095; cursor:default;
  text-decoration:line-through; font-size:var(--t-xs);
}
.agenda__hora--ocupado small{font-size:9px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none}
.agenda__rodape{margin:var(--s2) 0 0; font-size:var(--t-xs); color:var(--muted)}
.agenda__rodape a{color:var(--navy); font-weight:600}
.agenda__escolha{
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--navy);
}
.agenda__escolha b{font-family:Fraunces,serif}
.agenda__aviso{font-size:var(--t-xs); color:var(--muted); margin:var(--s2) 0 0}

/* botão flutuante de WhatsApp */
.zap-flutua{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:100px; text-decoration:none;
  background:#1EA95A; color:#fff; font-weight:600; font-size:var(--t-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.26);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.zap-flutua:hover{background:#178C4A; transform:translateY(-2px)}
.zap-flutua svg{width:20px; height:20px; flex:none; fill:currentColor}
@media(max-width:680px){
  .zap-flutua{right:12px; bottom:12px; padding:13px 16px}
  .zap-flutua span{display:none}
}
@media print{ .zap-flutua{display:none} }

@media(prefers-reduced-motion:reduce){
  /* NUNCA colapsar a altura da cena: zera o scrollable e trava o progresso em 0.
     Corta-se só o que se move sozinho. */
  .reveal{opacity:1; transform:none; transition:none}
  .card{transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   CELULAR — 90% dos pacientes chegam por aqui.
   Três regras guiam este bloco:
   1. o menu não pode sumir (são 7 páginas de campanha);
   2. nada que se toca pode ser menor que ~44px;
   3. a escala de espaço do desktop é grande demais numa tela de
      360px — os tokens encolhem aqui e o site inteiro encolhe junto.
   ============================================================ */
@media(max-width:860px){

  /* ---- o menu vira painel ---- */
  .nav{padding:12px var(--s2)}
  .nav__brand{font-size:1rem}
  .nav__hamb{display:flex}

  .nav__links{
    position:fixed; left:0; right:0; top:60px;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,26,46,.985);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));
    max-height:calc(100svh - 60px); overflow-y:auto;
    /* fechado: recolhido e inerte. Sem visibility o link continua focável. */
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
    box-shadow:0 18px 40px rgba(0,0,0,.4);
  }
  .nav.is-aberto .nav__links{transform:none; opacity:1; visibility:visible; pointer-events:auto}

  /* no painel todo item é uma faixa inteira — alvo generoso para o polegar */
  .nav__links a:not(.btn){
    display:block; padding:15px 4px; font-size:var(--t-md);
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .nav__links a[aria-current="page"]{color:var(--gold)}
  .nav__links a[aria-current="page"]::after{display:none}
  .nav__links .btn{margin-top:var(--s2); text-align:center; padding:16px 20px}

  /* ---- cenas ---- */
  /* svh em vez de vh: a barra de endereço do celular muda a vh no meio da
     rolagem e a cena inteira mudaria de altura junto. */
  .scene{height:280svh} .scene--hero{height:320svh}
  .scene__copy{bottom:calc(64px + 3vh)}
  .scene__hint{bottom:calc(64px + 6px)}
  .dial{
    right:var(--s2); top:76px; transform:none;
    padding:var(--s2) var(--s2) var(--s2) var(--s5);
  }
  .dial__ticks{width:72px; margin-top:var(--s2)}
}

@media(max-width:680px){
  /* ---- escala ---- */
  :root{
    --s5:36px; --s6:44px; --s7:52px; --s8:64px;
    --t-lg:1.25rem;
  }
  .wrap{padding:0 var(--s2)}
  .section{padding:var(--s8) 0}
  .card{padding:var(--s3)}
  .capsule{padding:var(--s3)}
  .cta{padding:var(--s8) var(--s2)}
  .split{gap:var(--s4)}

  /* ---- alvos de toque ---- */
  .card__acoes{gap:var(--s2) var(--s4)}
  .card__link{min-height:44px}
  /* telefone e endereço são links soltos dentro do parágrafo do cartão:
     sem altura própria ficam com 19px, metade de um alvo de dedo */
  .card p a{display:inline-flex; align-items:center; min-height:44px}
  .nav__brand{display:inline-flex; align-items:center; min-height:44px}
  .trilha__item a{display:inline-flex; align-items:center; min-height:44px}
  #agenda-proximo{min-height:44px}
  .foot__row{flex-direction:column; gap:var(--s1)}
  .foot__row a{display:inline-block; padding:9px 0}
  .faq summary{padding:6px 0}
  .form input, .form select, .form textarea{min-height:48px}
  /* 16px é o piso: abaixo disso o iOS dá zoom ao focar o campo e
     o paciente cai num layout deslocado que ele não pediu. */
  .form input, .form select, .form textarea{font-size:16px}

  /* ---- formulário e calendário ---- */
  /* o respiro do desktop custa 96px dos 360 da tela — e esses 96px
     saem das sete colunas do calendário, não do texto. */
  .form{padding:var(--s2)}
  .agenda__cal{padding:12px}
  .agenda__grade{gap:3px; grid-template-columns:repeat(7,minmax(0,1fr))}
  /* aspect-ratio:1 junto com min-height:44px vira LARGURA 44: sete
     colunas de 44 não cabem em 360px e o calendário sai da tela.
     No celular a altura garante o alvo do polegar e a largura cede. */
  .agenda__dia{aspect-ratio:auto; min-height:44px; font-size:var(--t-sm)}
  .agenda__nav{width:44px; height:44px}
  .agenda__hora{min-height:44px; padding:10px 2px}
  .agenda__horarios{padding:14px}

  /* ---- barra de ação fixa ----
     substitui o botão flutuante: as duas saídas (agendar e WhatsApp)
     ficam sempre debaixo do polegar, que é onde a mão já está. */
  .barra-mobile{
    display:grid; grid-template-columns:1fr 1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(7,26,46,.97);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.12);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .barra-mobile a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:56px; text-decoration:none; font-weight:600; font-size:var(--t-sm);
  }
  .barra-mobile svg{width:19px; height:19px; fill:currentColor; flex:none}
  .barra-mobile__agendar{background:var(--gold); color:var(--navy-deep)}
  .barra-mobile__zap{background:#1EA95A; color:#fff}
  .zap-flutua{display:none}
  /* sem isto a barra cobre a última linha do rodapé */
  body{padding-bottom:56px}
}

/* fora do celular a barra não existe */
@media(min-width:681px){ .barra-mobile{display:none} }
@media print{ .barra-mobile{display:none} }

/* ============================================================
   CENAS NO CELULAR: o quadro inteiro, não um pedaço dele
   ------------------------------------------------------------
   A tela do celular é 9:16 e o vídeo é 16:9. Com `cover` o
   navegador joga fora 68% da LARGURA — e joga fora as bordas,
   que é exatamente onde mora a informação destas cenas (a moto
   que aparece pelo lado é o assunto do glaucoma). Aqui o vídeo
   passa a caber inteiro no topo e o texto ocupa o resto.
   O hero continua em `cover`: ali o assunto é o centro.
   ============================================================ */
@media(max-width:860px){
  /* a barra fixa come o topo do quadro: o vídeo desce a altura dela */
  :root{--nav-h:60px}
  .scene .scene__sticky{
    background-color:#0A0A0B; background-size:contain;
    background-position:center var(--nav-h); background-repeat:no-repeat;
  }
  .scene .scene__video{object-fit:contain; object-position:center var(--nav-h)}
  /* o escurecimento existia para o texto ficar legível SOBRE a imagem;
     agora o texto fica abaixo dela, no preto */
  .scene .scene__scrim{
    background:linear-gradient(to bottom,
      rgba(10,10,11,0) calc(52vw + var(--nav-h)),
      rgba(10,10,11,.92) calc(62vw + var(--nav-h)));
  }
  /* 56.25vw é a altura do quadro 16:9 na largura da tela */
  .scene .scene__copy{
    top:calc(56.25vw + var(--nav-h) + var(--s3)); bottom:calc(64px + var(--s2));
    display:flex; align-items:center;
  }
  /* o mostrador encosta no pé do vídeo: na faixa preta ele batia no botão */
  .scene .dial{
    top:calc(56.25vw + var(--nav-h) - 96px); bottom:auto; right:var(--s2);
    transform:none; padding:var(--s2);
    /* sem um véu atrás, o número dourado some sobre a parte clara do quadro */
    background:linear-gradient(to left, rgba(10,10,11,.8) 30%, rgba(10,10,11,0));
  }
  .scene .dial__value{font-size:1.6rem}
  .scene .dial__ticks{margin-top:var(--s1)}
}

/* ---------- aviso de cookies (só aparece em produção) ---------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  gap:var(--s4); flex-wrap:wrap;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(7,26,46,.97); color:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 -8px 30px rgba(0,0,0,.3);
}
.consent__txt{margin:0; font-size:var(--t-sm); max-width:62ch}
.consent__bts{display:flex; gap:var(--s2); flex:none}
.consent .btn{padding:12px 22px}
.consent .btn--ghost{color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.consent .btn--ghost:hover{background:#fff; color:var(--navy)}
@media(max-width:680px){
  /* no celular a barra de ação já ocupa o pé da tela: o aviso sobe */
  .consent{bottom:56px; padding:var(--s3) var(--s2); gap:var(--s3)}
  .consent__bts{width:100%}
  .consent__bts .btn{flex:1; text-align:center}
}

/* ============================================================
   FAIXA LATERAL: cartões e avaliações empilhados somavam várias telas
   de celular. Deslizando para o lado, cada bloco cabe em uma. O pedaço
   do cartão seguinte na borda é o convite; os pontos dizem quantos faltam.
   ============================================================ */
/* ============================================================
   CENAS LENTAS (catarata e glaucoma): 40% mais rolagem para a mesma
   transição. O blur da catarata espalha a borda do quadro; a escala
   leve esconde o halo escuro que ele criaria no contorno.
   ============================================================ */
.scene.scene--lenta{height:530vh}
.scene.scene--hero.scene--lenta{height:640vh}
.scene[data-blur] .scene__video{transform:scale(1.05)}
@media(max-width:1100px){
  .scene.scene--lenta{height:475vh}
  .scene.scene--hero.scene--lenta{height:560vh}
}
@media(max-width:680px){
  .scene.scene--lenta{height:390svh}
  .scene.scene--hero.scene--lenta{height:450svh}
}

.faixa__pontos{display:none}
@media(max-width:680px){
  .faixa{
    display:flex; columns:auto; gap:var(--s2);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--s2);
    margin-inline:calc(-1 * var(--s2)); padding:0 var(--s2) var(--s1);
    scrollbar-width:none;
  }
  .faixa::-webkit-scrollbar{display:none}
  .faixa > *{flex:0 0 86%; min-width:0; margin:0; scroll-snap-align:start}
  /* enquadramento: a avaliação inteira cabe acima da barra fixa */
  .faixa .card{padding:var(--s3)}
  .faixa .depo{padding:var(--s3); display:flex; flex-direction:column}
  .faixa .depo__topo{margin-bottom:var(--s2)}
  .faixa .depo__texto{font-size:1rem; line-height:1.55; flex:1}
  .faixa .depo__fonte{margin-top:var(--s2); padding-top:var(--s1); font-size:10px}
  /* o reveal espera o cartão entrar na tela; à direita, fora dela, ele
     chegaria em branco quando o dedo o trouxesse */
  .faixa > .reveal{opacity:1; transform:none}
  .faixa__pontos{display:flex; justify-content:center; gap:8px; margin-top:var(--s2)}
  .faixa__pontos span{
    width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.25;
    transition:opacity .25s ease, transform .25s ease;
  }
  .faixa__pontos span.is-on{background:var(--gold); opacity:1; transform:scale(1.35)}
}

/* ============================================================
   MENU: grupo "Tratamentos" + rodapé com todos os links
   ============================================================ */
.nav__grupo{position:relative}
.nav__grupo-bt{
  display:inline-flex; align-items:center; gap:7px; padding:0;
  background:none; border:0; cursor:pointer; font:inherit; font-size:var(--t-sm);
  color:rgba(255,255,255,.82);
}
.nav__grupo-bt::after{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s ease;
}
.nav__grupo-bt:hover{color:#fff}
.nav__grupo:has([aria-current="page"]) > .nav__grupo-bt{color:var(--gold)}
/* o padding-top é a ponte: sem ele o mouse cai no vão e o submenu fecha */
.nav__sub{
  position:absolute; top:100%; left:-18px; z-index:60; min-width:220px;
  display:none; flex-direction:column; padding:14px 0 8px;
}
.nav__sub::before{
  content:""; position:absolute; inset:10px 0 0; z-index:-1;
  background:rgba(11,39,66,.98); box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.nav__sub a{padding:10px 18px; white-space:nowrap}
.nav__sub a[aria-current="page"]{color:var(--gold)}
.nav__sub a[aria-current="page"]::after{display:none}
@media(hover:hover) and (min-width:861px){ .nav__grupo:hover .nav__sub{display:flex} }
.nav__grupo.is-aberto .nav__sub{display:flex}
.nav__grupo.is-aberto .nav__grupo-bt::after{transform:translateY(2px) rotate(225deg)}
@media(max-width:860px){
  /* no painel do celular o grupo vira um título com a lista já aberta */
  .nav__grupo-bt{
    width:100%; padding:15px 4px 6px; pointer-events:none;
    font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft);
  }
  .nav__grupo-bt::after{display:none}
  .nav__sub{position:static; display:flex; min-width:0; padding:0 0 0 14px}
  .nav__sub::before{display:none}
  .nav__sub a{padding:13px 4px}
}

/* Instagram: ícone no menu (texto só no painel do celular) e botão no "Sobre" */
.nav__insta{display:inline-flex; align-items:center; gap:8px}
.nav__insta svg{width:20px; height:20px; flex:none}
.nav__insta span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media(max-width:860px){ .nav__insta span{position:static; width:auto; height:auto; overflow:visible; clip:auto} }
.btn--insta{display:inline-flex; align-items:center; gap:10px}
.btn--insta svg{width:18px; height:18px; flex:none}

/* Agendamento ligado ao CRM: dica, consentimento, status e confirmação */
.form__dica{display:block; margin-top:6px; font-size:var(--t-sm); color:var(--muted)}
.form__dica[hidden]{display:none}
.form__check{display:flex; gap:12px; align-items:flex-start; text-align:left; cursor:pointer;
  font-size:var(--t-sm); line-height:1.5; min-height:44px}
.form__check input{width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--navy)}
.form__status{margin:var(--s2) 0 0; font-size:var(--t-sm); color:var(--muted)}
.form__status--erro{color:#9B2C2C}
.form__status a{color:var(--navy); font-weight:600}
#erro-horario{display:none}
.tem-erro #erro-horario{display:block}
.agenda__grade.is-carregando{opacity:.45}
.form--ok{text-align:left; max-width:520px; margin:0 auto}
.form__ok-titulo{font-family:Fraunces,serif; font-size:var(--t-lg); color:var(--navy); margin:0 0 var(--s2)}
.form__ok-linha{margin:0 0 6px; font-size:var(--t-md)}

/* ---------- assistente de agendamento em 4 passos (29/09/2026) ---------- */
.wiz{scroll-margin-top:90px}
.wiz__passos{
  list-style:none; margin:0 0 var(--s4); padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); position:relative;
}
.wiz__passo{
  display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;
  font-size:var(--t-xs); color:var(--muted); text-align:center;
}
/* linha entre os círculos */
.wiz__passo + .wiz__passo::before{
  content:''; position:absolute; top:17px; right:calc(50% + 22px); left:calc(-50% + 22px);
  height:2px; background:var(--line);
}
.wiz__passo.is-feita + .wiz__passo::before,
.wiz__passo.is-atual::before{background:var(--gold)}
.wiz__n{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--line); background:#fff; font-weight:600; color:var(--muted);
  font-size:var(--t-sm);
}
.wiz__passo.is-atual{color:var(--navy); font-weight:600}
.wiz__passo.is-atual .wiz__n{border-color:var(--navy); background:var(--navy); color:#fff}
.wiz__passo.is-feita .wiz__n{border-color:var(--gold); background:var(--gold); color:var(--navy-deep)}
.wiz__passo.is-alcancavel{cursor:pointer}
.wiz__passo.is-alcancavel:hover .wiz__nome{text-decoration:underline}
.wiz__etapa{border:0; margin:0; padding:0; min-width:0; display:grid; gap:var(--s3)}
.wiz__etapa[hidden]{display:none}
.wiz__titulo{
  padding:0; font-family:Fraunces,serif; font-size:var(--t-lg); color:var(--navy); outline:none;
}
.wiz__titulo{margin:0 0 6px; line-height:1.25}
.wiz__sub{margin:-10px 0 4px; color:var(--muted); font-size:var(--t-sm)}
.wiz__rotulo{font-weight:600; color:var(--navy); font-size:var(--t-sm)}
.wiz__acoes{display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:var(--s2)}
.wiz__acoes .btn--lg{margin-left:auto}
@media (max-width:560px){
  .wiz__acoes .btn{padding:14px 16px; font-size:var(--t-sm)}
  .wiz__acoes .btn--lg{flex:1}
}
.wiz .btn{border:none; cursor:pointer; font-family:inherit}
.wiz .btn--ghost{box-shadow:inset 0 0 0 1px var(--navy)}
.wiz .form__linha{margin-bottom:0}
.wiz .form__check{margin:0; text-transform:none; letter-spacing:normal; font-weight:400;
  font-size:var(--t-sm); color:var(--muted)}

/* opções em cartão (tipo, unidade, convênio) */
.escolhas{display:grid; gap:10px}
.escolhas--2{grid-template-columns:1fr 1fr}
.form .escolha{position:relative; cursor:pointer; display:block;
  text-transform:none; letter-spacing:normal; font-weight:400; color:var(--ink); font-size:inherit}
.escolha[hidden]{display:none}
.escolha input{position:absolute; opacity:0; width:1px; height:1px}
.escolha span{
  display:flex; align-items:center; gap:12px; min-height:52px; padding:12px 14px;
  border:1px solid var(--line); border-radius:4px; background:#fff; font-size:var(--t-sm);
  color:var(--ink); transition:border-color .15s var(--ease), background .15s var(--ease);
}
/* o "radio" desenhado */
.escolha span::before{
  content:''; flex:none; width:18px; height:18px; border-radius:50%;
  border:2px solid #B9B2A6; background:#fff; box-sizing:border-box;
}
.escolha:hover span{border-color:var(--gold)}
.escolha input:checked + span{border-color:var(--navy); background:rgba(11,39,66,.05); font-weight:600}
.escolha input:checked + span::before{border:5px solid var(--navy)}
.escolha input:focus-visible + span{box-shadow:0 0 0 3px rgba(198,161,91,.35)}
.form__campo.tem-erro .escolha span{border-color:#E4B4B0}
@media (max-width:420px){
  .escolha span{padding:10px 12px; gap:10px}
  .wiz__nome{font-size:11px}
}
.form__ok-lista{margin:0; display:grid; gap:0}
.form__ok-lista > div{display:grid; grid-template-columns:auto 1fr; gap:var(--s2);
  padding:10px 0; border-bottom:1px solid rgba(11,39,66,.08)}
.form__ok-lista > div:last-child{border-bottom:0}
.form__ok-lista dt{font-weight:600; color:var(--navy); font-size:var(--t-sm)}
.form__ok-lista dd{margin:0; font-size:var(--t-md); text-align:right; overflow-wrap:anywhere}
@media (max-width:520px){
  .form__ok-lista > div{grid-template-columns:1fr; gap:2px}
  .form__ok-lista dd{text-align:left}
}
.form--ok .form__nota{margin-top:var(--s3)}

/* Política de Privacidade: texto corrido, coluna de leitura */
.politica__topo{padding:calc(var(--s7) + 50px) 0 var(--s6)}
.politica .wrap,.politica__topo .wrap{max-width:760px}
.politica__topo h1{color:#fff; font-size:clamp(2rem,4vw,2.8rem); margin-bottom:var(--s1)}
.politica__topo h1 > .eyebrow{margin-bottom:var(--s2)}
.politica__data{color:rgba(255,255,255,.65); font-size:var(--t-sm); margin:0}
.politica{padding-top:var(--s6)}
.politica h2{font-size:var(--t-lg); max-width:none; margin:var(--s5) 0 var(--s2)}
.politica ul{padding-left:1.2em; margin:0}
.politica li{margin-bottom:6px}
.politica a{color:var(--navy)}

/* assinatura de revisão médica, logo acima do rodapé */
.revisao{background:var(--paper, #F7F4EE); border-top:1px solid var(--line); padding:var(--s3) 0}
.revisao p{margin:0 auto; max-width:70ch; text-align:center; font-size:var(--t-sm); color:var(--muted); line-height:1.6}
.revisao strong{color:var(--ink); font-weight:600}

.foot__grade{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:var(--s4);
  padding-bottom:var(--s4); margin-bottom:var(--s3); border-bottom:1px solid rgba(255,255,255,.1);
}
.foot__grade > *{min-width:0}
.foot__logo{display:block; height:40px; width:auto; margin-bottom:var(--s2)}
.foot__col b{display:block; color:#fff; font-weight:600; margin-bottom:var(--s1)}
.foot__col ul{list-style:none; margin:0; padding:0}
.foot__col li a{display:inline-flex; align-items:center; min-height:36px; color:rgba(255,255,255,.72); text-decoration:none}
.foot__col li a:hover{color:#fff}
.foot__col p{margin:0; line-height:1.6}
@media(max-width:860px){ .foot__grade{grid-template-columns:1fr 1fr} }
@media(max-width:520px){
  .foot__grade{grid-template-columns:1fr}
  .foot__col li a{min-height:44px}
}