/* ============================================================
   MODELO 05 — CLÍNICA CONTEMPORÂNEA
   Mesma família visual da LP de referência (Núcleo Maia v4.1):
   cards com sombra difusa, botões pílula com brilho, hairline
   dourada, molduras finas nas fotos, FAQ com "+", fechamento
   escuro, FAB e barra de progresso. Traduzido para a paleta da
   Dra. Patrícia: off-white, champagne e verde oliva.
   Plus Jakarta Sans (títulos) + Manrope (corpo) + Ms Madi (assinatura).
   ============================================================ */
:root{
  --off:#F2F7FA;
  --cream:#E0EAF1;
  --white:#FFFFFF;
  --champ:#C7AE79;
  --champ-2:#BCD6E7;
  --olive:#1B3648;
  --olive-2:#24465D;
  --olive-soft:#DCEAF3;
  --ink:#191F23;
  --text:#424C53;
  --muted:#81898E;
  --line:rgba(25,31,35,.10);

  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Plus Jakarta Sans","Manrope",system-ui,sans-serif;

  --radius:22px;
  --shadow:0 0 30px rgba(27,54,72,.08);
  --shadow-hover:0 18px 44px rgba(27,54,72,.16);
  --wrap:1140px;
  --gutter:clamp(20px,4vw,48px);
}
body{background:var(--off);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.7}
main{overflow-x:clip}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.wrap-narrow{width:min(800px,100% - 2*var(--gutter));margin-inline:auto}
.center{text-align:center}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:400;letter-spacing:-.015em;line-height:1.08;font-variation-settings:"opsz" 72}
h1{font-size:clamp(2.1rem,min(4.1vw,6.6vh),3.35rem);line-height:1.08}
h2{font-size:clamp(1.9rem,3.9vw,3rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.25}
h2 em,h1 em{font-style:italic;font-weight:300;color:var(--olive-2)}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);margin-bottom:1.1rem}
.eyebrow--champ{color:var(--champ)}
.lead{font-size:clamp(1.05rem,1.55vw,1.2rem);line-height:1.65;color:var(--text)}
.micro{font-size:.84rem;line-height:1.5;color:var(--muted);max-width:52ch}
.micro--light{color:rgba(242,247,250,.68)}
.sec-head{max-width:680px;margin-bottom:clamp(2.4rem,5vw,3.8rem)}
.sec-head.center{margin-inline:auto}
.sec-head h2{margin-bottom:1.1rem}
.sec-head .lead{max-width:56ch}
.sec-head.center .lead{margin-inline:auto}

/* ---------- Botões ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;font-family:var(--sans);font-weight:700;font-size:.98rem;line-height:1.25;text-decoration:none;padding:1.05rem 2rem;border-radius:999px;min-height:52px;text-align:left;transition:transform .28s ease,box-shadow .28s ease,background-color .28s ease}
.btn svg{flex:none;transition:transform .3s ease}
.btn:hover svg{transform:translateX(3px)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-130%);transition:transform .7s ease}
.btn:hover::after{transform:translateX(130%)}
.btn--dark{background:var(--olive);color:var(--off)}
.btn--dark:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(27,54,72,.28)}
.btn--light{background:var(--off);color:var(--olive)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.32)}
.btn--sm{padding:.65rem 1.15rem;min-height:40px;font-size:.86rem;background:var(--olive);color:var(--off)}
.btn--sm:hover{background:var(--olive-2)}
:focus-visible{outline:3px solid var(--champ);outline-offset:3px}

/* ---------- Seções ---------- */
.sec{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0}
.sec--white{background:var(--white)}
.sec--cream{background:var(--cream)}
.sec--olive{background:var(--olive);color:var(--cream)}
.sec--olive h2,.sec--olive h3{color:var(--off)}
.goldline{width:1px;height:80px;background:linear-gradient(var(--champ),transparent);margin:0 auto 2.4rem}

/* ---------- Sintomas ---------- */
.signs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.sign{position:relative;background:var(--off);border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.6rem 1.7rem}
.sign__n{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--champ);letter-spacing:.08em;margin-bottom:1.1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.sign p{font-size:.98rem;line-height:1.6}
.sign strong{font-family:var(--serif);font-weight:500;font-size:1.28rem;color:var(--ink);letter-spacing:-.01em;line-height:1.25;display:inline}

/* ---------- Comparativo ---------- */
.cmp{display:grid;grid-template-columns:1fr 1.08fr;gap:1.1rem;align-items:stretch}
.cmp__col{border-radius:var(--radius);padding:2.1rem 1.9rem}
.cmp__col h3{margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.cmp__col li{position:relative;padding:.85rem 0 .85rem 1.8rem;font-size:.98rem;line-height:1.5;border-bottom:1px dashed var(--line)}
.cmp__col li:last-child{border-bottom:0}
.cmp__col li::before{position:absolute;left:0;top:.95rem;width:1rem;text-align:center;font-weight:700;line-height:1}
.cmp__col--plain{background:var(--white);color:var(--text);border:1px solid var(--line)}
.cmp__col--plain li::before{content:"–";color:var(--muted)}
.cmp__col--dra{background:var(--olive);color:var(--cream);box-shadow:var(--shadow-hover);transform:translateY(-14px)}
.cmp__col--dra h3{color:var(--off);border-color:rgba(242,247,250,.18)}
.cmp__col--dra li{border-color:rgba(242,247,250,.14)}
.cmp__col--dra li::before{content:"✓";color:var(--champ)}

/* ---------- O que você já tentou ---------- */
.tried{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem)}
.tried__item{padding-top:1.4rem;border-top:1px solid var(--champ)}
.tried__item h3{margin-bottom:.9rem}
.tried__item p{font-size:.98rem}

/* ---------- Como funciona ---------- */
.method .sec-head h2{max-width:14ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:st}
.step{position:relative;background:rgba(242,247,250,.05);border:1px solid rgba(242,247,250,.14);border-radius:var(--radius);padding:2.1rem 1.7rem 2rem;transition:background-color .35s ease,transform .35s ease}
.step:hover{background:rgba(242,247,250,.09);transform:translateY(-4px)}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--champ);color:var(--olive);font-family:var(--serif);font-size:1.35rem;font-weight:500;margin-bottom:1.3rem}
.step h3{margin-bottom:.8rem;font-size:1.3rem}
.step p{font-size:.96rem;color:rgba(224,234,241,.86)}
.method__foot{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(242,247,250,.14)}
.note{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.45;color:var(--off);font-weight:300}
.method__cta{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}

/* ---------- Quem vai te atender ---------- */
.who__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.2rem,6vw,5.5rem);align-items:center}
.frame{padding:10px;border:1px solid var(--champ-2);border-radius:32px;background:var(--off);margin:0}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.frame--dark{border-color:rgba(199,174,121,.4);background:rgba(242,247,250,.04)}
.who__photo img{aspect-ratio:auto}
.who__text h2{margin-bottom:1.2rem}
.who__bio{font-size:1.02rem;margin-bottom:1.8rem}
.facts{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem}
.facts li{display:flex;flex-direction:column;line-height:1.2}
.facts strong{font-family:var(--serif);font-weight:500;font-size:2rem;color:var(--olive);letter-spacing:-.02em}
.facts span{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.quote{margin-top:clamp(3rem,6vw,5rem);position:relative;padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,5vw,4.5rem);background:var(--off);border-radius:var(--radius);border:1px solid var(--line)}
.quote::before{content:"“";position:absolute;top:-.1em;left:clamp(1rem,3vw,2.4rem);font-family:var(--serif);font-size:7rem;line-height:1;color:var(--champ);opacity:.55}
.quote p{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.45;color:var(--ink);max-width:62ch}
.quote footer{margin-top:1.4rem;font-size:.9rem;font-weight:700;color:var(--olive)}
.quote footer span{display:block;font-weight:500;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.2rem}

/* ---------- Depoimento ---------- */
.review{position:relative;margin:0;background:var(--white);border-radius:var(--radius);padding:clamp(2.2rem,4vw,3rem) clamp(1.6rem,4vw,3rem);box-shadow:var(--shadow);text-align:center}
.review__mark{display:block;font-family:var(--serif);font-size:4rem;line-height:.6;color:var(--champ);margin-bottom:1.2rem}
.review blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--ink)}
.review figcaption{margin-top:1.4rem;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.pending{margin:1rem auto 0;max-width:60ch;text-align:center;font-size:.78rem;line-height:1.5;color:#9a4a3a;background:rgba(154,74,58,.06);border:1px dashed rgba(154,74,58,.4);border-radius:10px;padding:.6rem .9rem}
.say__cta{margin-top:2.4rem}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.35rem 0;font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.18rem;line-height:1.3;transition:color .25s}
.faq summary:hover{color:var(--olive)}
.faq summary::after{content:"+";font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1;color:var(--champ);flex:none;transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.5rem;font-size:.98rem;max-width:62ch}

/* ---------- Fechamento ---------- */
.final{position:relative;overflow:hidden;background:var(--olive);color:var(--cream);padding:clamp(4.5rem,9vw,7.5rem) 0 2.5rem}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 90% 20%,rgba(121,170,199,.16),transparent 70%);pointer-events:none}
.final__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.final h2{color:var(--off);max-width:16ch;margin-bottom:1.4rem}
.final__text p:not(.eyebrow):not(.micro){max-width:54ch;margin-bottom:1rem;color:rgba(224,234,241,.9)}
.final__cta{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start;margin-top:1.8rem}
.final__photo{max-width:440px;justify-self:end}
.final__photo img{aspect-ratio:3/4;object-position:center 20%}
.final__addr{position:relative;display:block;font-style:normal;font-size:.84rem;color:rgba(224,234,241,.6);margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid rgba(242,247,250,.14)}
footer.site{padding:1.6rem 0;font-size:.8rem;color:var(--muted);text-align:center;background:var(--off)}

/* ---------- FAB + progresso ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--olive);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(27,54,72,.35);opacity:0;transform:translateY(-140px) scale(.7);pointer-events:none;transition:opacity .2s ease,background-color .25s}

/* Efeito drop: cai de cima e quica ao encostar */
.fab.is-on{opacity:1;pointer-events:auto;animation:fabDrop .72s cubic-bezier(.25,1,.5,1) forwards}
@keyframes fabDrop{
  0%{transform:translateY(-140px) scale(.7)}
  55%{transform:translateY(0) scale(1.14,.86)}
  70%{transform:translateY(-14px) scale(.96,1.05)}
  85%{transform:translateY(0) scale(1.06,.95)}
  100%{transform:translateY(0) scale(1)}}
.fab:hover{background:var(--olive-2)}
.fab.is-landed{animation:none;transform:none;transition:opacity .2s ease,transform .25s ease,background-color .25s}
.fab.is-landed:hover{background:var(--olive-2);transform:scale(1.06)}
.fab svg{width:26px;height:26px;fill:var(--off)}
#progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--champ);transform-origin:0 50%;transform:scaleX(0);z-index:99}
@media(prefers-reduced-motion:reduce){
  #progress{display:none}
}

/* ============================================================
   Responsivo
   ============================================================ */
@media(max-width:1024px){
  .signs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .cmp{grid-template-columns:1fr}
  .cmp__col--dra{transform:none}
  .tried{grid-template-columns:1fr;gap:1.8rem}
  .steps{grid-template-columns:1fr}
  .method__foot{grid-template-columns:1fr}
  .who__grid{grid-template-columns:1fr;gap:2rem}
  .who__photo{max-width:480px;margin-inline:auto;width:100%}
  .final__grid{grid-template-columns:1fr}
  .final__photo{justify-self:center;max-width:380px;width:100%;order:-1}
}
@media(max-width:640px){
  body{font-size:1rem}
  .sec{padding:3.6rem 0}
  .btn{width:100%;text-align:center}
  .btn--sm{width:auto}
  .signs{grid-template-columns:1fr;gap:.85rem}
  .sign{padding:1.5rem 1.3rem 1.4rem}
  .cmp__col{padding:1.6rem 1.3rem}
  .step{padding:1.7rem 1.4rem}
  .frame{padding:6px;border-radius:22px}
  .frame img{border-radius:16px}
  .facts{gap:1rem 1.6rem}
  .facts strong{font-size:1.6rem}
  .quote{padding:2.4rem 1.3rem 1.8rem}
  .quote::before{font-size:5rem;left:1rem}
  .faq summary{font-size:1.05rem;padding:1.1rem 0}
  .final{padding-top:3.6rem}
  .final__photo{max-width:300px}
  .final__cta,.method__cta{align-items:stretch}
  .final__cta .micro,.method__cta .micro{text-align:center;max-width:none}
  .goldline{height:56px;margin-bottom:1.6rem}
}

/* Cards sem borda */
.sign,.cmp__col--plain,.step,.quote{border:0}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;font-variation-settings:normal}
h1 em,h2 em{font-weight:400;font-style:normal;color:var(--olive-2)}

/* Mobile: credencial como parágrafo sob o nome; tag da foto oculta */
@media (max-width:900px){
  .eyebrow{margin-bottom:.35rem}
}

/* Ícones no lugar da numeração, centralizados */
.sign{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--olive-soft);color:var(--olive)}
.ico svg{width:26px;height:26px}

.ico{background:none;border:0;width:auto;height:auto}
.ico svg{width:32px;height:32px}

/* Cards: título em bloco separado do texto */
.sign strong{display:block;margin-bottom:8px}

/* Traço dourado encostado na foto do hero (sem respiro branco acima) */
#sintomas .goldline{margin-top:calc(clamp(4.5rem,9vw,7.5rem) * -1)}

/* Foto vazada da Dra.: sem moldura, sem fundo, sem cantos arredondados */
.who__photo.frame{padding:0;border:0;background:none;border-radius:0}
.who__photo.frame img{border-radius:0;height:auto;object-fit:contain}

/* "Quem vai te atender": texto ao lado da foto no desktop,
   centralizado abaixo dela no mobile */
.who__grid{align-items:center}
.who__text{text-align:left}
@media(max-width:900px){
  .who__grid{grid-template-columns:1fr}
  .who__photo{order:1}
  .who__text{order:2;text-align:center}
  .who__text .facts{justify-content:center}
  .who__text .facts li{align-items:center}
}

/* Lapidação da seção "Quem vai te atender" */
.who .eyebrow{font-size:.88rem;letter-spacing:.16em;margin-bottom:.8rem}
.who__photo{max-width:460px}

/* foto ~12% menor, menos ar em volta */
.who__bio{margin-bottom:1rem}
.who__bio strong{font-weight:600;color:var(--ink)}
.who__bio--local{color:var(--muted);font-size:.95rem;margin-bottom:1.8rem}
.facts__wide strong{font-size:1.15rem;letter-spacing:0}
.facts__wide span{max-width:26ch}

/* Depoimento da Dra.: menor e em itálico */
.quote p{font-size:clamp(1.02rem,1.45vw,1.2rem);font-style:italic;line-height:1.55}
.quote{text-align:center}
.quote p{margin-inline:auto}
.quote::before{left:clamp(1rem,3vw,2.4rem);transform:none}
.quote footer{text-align:right}

/* Nenhuma linha termina com palavra orfa: balance equilibra titulos,
   pretty impede que a ultima linha do paragrafo fique com uma palavra so. */
h1,h2,h3,.eyebrow,.btn{text-wrap:balance}
p,li,.lead,.micro,summary,figcaption{text-wrap:pretty}

/* Traço dourado nasce exatamente no fim do hero, em qualquer largura:
   zera o padding do topo da seção em vez de compensar com margem negativa. */
#sintomas{padding-top:0}
#sintomas .goldline{margin-top:0;margin-bottom:clamp(2rem,5vw,3.2rem)}

/* atras do hero (visivel nos cantos arredondados) fica branco puro */
main{background:var(--white)}

/* Seta do CTA vira calendario no hover/foco (crossfade + giro curto) */
.btn__ico{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;flex:0 0 16px}
.btn__ico svg{grid-area:1/1;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.65,.2,1)}
.btn__ico-arrow{opacity:1;transform:none}
.btn__ico-cal{opacity:0;transform:rotate(-25deg) scale(.7)}
.btn:hover .btn__ico-arrow,.btn:focus-visible .btn__ico-arrow{opacity:0;transform:translateX(8px) scale(.7)}
.btn:hover .btn__ico-cal,.btn:focus-visible .btn__ico-cal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .btn__ico svg{transition:opacity .01s}
  .btn:hover .btn__ico-arrow{transform:none}
  .btn__ico-cal{transform:none}
}

/* Secao "Se nada disso resolveu": titulo e cards centralizados */
#tentou .sec-head{text-align:center;margin-inline:auto}
/* "Por que 15 minutos...": titulo e texto centralizados */
.compare .sec-head{text-align:center;margin-inline:auto}
.compare .sec-head .lead{margin-inline:auto}
#tentou .tried__item{text-align:center}

/* Coluna do convenio: X vermelho no lugar do traco */
.cmp__col--plain li::before{content:"✕";color:#B4443A;font-size:.92em}

/* ---------- Sintomas em carrossel infinito ---------- */
.signs-marquee{position:relative;overflow:hidden;--fade:clamp(40px,10vw,140px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.signs-marquee__track{display:flex;width:max-content;animation:signs-scroll 46s linear infinite}
.signs-marquee:hover .signs-marquee__track,.signs-marquee:focus-within .signs-marquee__track{animation-play-state:paused}
.signs-marquee .signs{display:flex;gap:1.1rem;padding-right:1.1rem;margin:0}
.signs-marquee .sign{flex:0 0 auto;width:clamp(260px,24vw,330px);display:flex;flex-direction:column}
@keyframes signs-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .signs-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .signs-marquee__track{animation:none}
  .signs-marquee .signs[aria-hidden="true"]{display:none}
}

/* ---------- Avaliacoes do Google em carrossel infinito ---------- */
.gr-score{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem .7rem;margin-top:.9rem}
.gr-score strong{font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1}
.gr-score a{font-size:.9rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.gr-score a:hover{color:var(--olive)}
.gr__stars{color:#F2A73B;letter-spacing:.06em;font-size:1rem;line-height:1}
.reviews-marquee{position:relative;margin-top:clamp(1.8rem,4vw,2.8rem);overflow:hidden;--fade:clamp(40px,10vw,140px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.reviews-marquee__track{display:flex;width:max-content;animation:signs-scroll 70s linear infinite}
.reviews-marquee:hover .reviews-marquee__track,.reviews-marquee:focus-within .reviews-marquee__track{animation-play-state:paused}
.reviews{display:flex;gap:1.1rem;padding:.4rem 1.1rem .4rem 0;margin:0;list-style:none}
.gr{flex:0 0 auto;width:clamp(300px,28vw,380px);display:flex;flex-direction:column;gap:.7rem;
  background:var(--white);border-radius:18px;padding:1.1rem 1.25rem;box-shadow:var(--shadow);text-align:left}
.gr__top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem}
.gr__av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}

/* Avatar anonimizado: monograma no lugar da foto real do Google */
.gr__av--mono{display:flex;align-items:center;justify-content:center;
  background:var(--olive);color:var(--off);font-weight:600;font-size:1rem;
  letter-spacing:.01em;line-height:1;user-select:none}
.gr__role{font-weight:400;color:var(--muted);font-size:.8rem}
.gr__name{font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3;margin:0}
.gr__meta{display:flex;align-items:center;gap:.45rem;margin:.15rem 0 0;font-size:.78rem;color:var(--muted)}
.gr__g{flex:0 0 auto;align-self:start}
.gr__text{font-size:.92rem;line-height:1.5;color:var(--text);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.gr__link{margin-top:auto;font-size:.82rem;font-weight:600;color:var(--olive);text-decoration:none}
.gr__link:hover{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .reviews-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .reviews-marquee__track{animation:none}
  .reviews[aria-hidden="true"]{display:none}
}
@media(max-width:640px){
  .reviews-marquee{--fade:24px}
  .gr{width:82vw;max-width:320px}
}

/* Selos da Dra. lado a lado numa linha, no desktop e no mobile */
.who__text .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.2rem 1.4rem;align-items:start;justify-content:stretch}
.who__text .facts li{min-width:0}
.who__text .facts strong{font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.15}
.who__text .facts span{font-size:.76rem}
@media(max-width:900px){
  /* 2 por linha: cabe texto maior que numa fila de 4 */
  .who__text .facts{grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem;text-align:center}
  .who__text .facts li{align-items:center}
  .who__text .facts strong{font-size:clamp(1.15rem,5vw,1.5rem);letter-spacing:-.01em}
  .who__text .facts span{font-size:.8rem;line-height:1.3}
}

/* A sombra dos cards (blur 30px) era cortada pelo overflow:hidden do marquee,
   que so tinha .4rem de folga vertical. Abre espaco e compensa com margem negativa
   para o bloco nao crescer no layout. */
.reviews{padding-block:34px}
.reviews-marquee{margin-block:calc(clamp(1.8rem,4vw,2.8rem) - 34px) -34px}

/* Carrossel controlado por JS: sem animacao CSS e sem pausa no hover */
.signs-marquee__track,.reviews-marquee__track{animation:none!important;will-change:transform}
.signs-marquee:hover .signs-marquee__track,.signs-marquee:focus-within .signs-marquee__track,.reviews-marquee:hover .reviews-marquee__track,.reviews-marquee:focus-within .reviews-marquee__track{animation-play-state:running}
.reviews-marquee,.signs-marquee{user-select:none;-webkit-user-select:none}
.reviews-marquee img,.signs-marquee img{-webkit-user-drag:none;user-drag:none}

/* Todos os CTAs no mesmo verde do CTA do hero */
.btn--dark,.btn--light{background:#3B7FAD;border-color:#3B7FAD;color:#fff}
.btn--dark:hover,.btn--light:hover{background:#34719A;border-color:#34719A;color:#fff}
.btn--dark svg,.btn--light svg{color:#fff}
/* CTA sobre fundo claro (btn--dark fora do hero) = mesma cor do CTA do hero */
.btn--dark{background:#2D5374;border-color:#2D5374;box-shadow:0 10px 24px -12px rgba(33,62,88,.55)}
.btn--dark:hover{background:#244560;border-color:#244560}
.fab{background:#3B7FAD}
.fab:hover{background:#34719A}

/* Carrossel de avaliacoes limitado a mesma largura dos outros elementos:
   o fade passa a acontecer na margem do conteudo, nao na borda da viewport. */
.reviews-marquee{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;--fade:clamp(28px,5vw,72px)}

/* Mapa do consultorio no fechamento */
.final__map{margin-top:clamp(1.4rem,3vw,2.2rem)}
.final__map iframe{display:block;width:100%;height:clamp(220px,32vw,340px);border:0;border-radius:var(--radius);
  filter:grayscale(.25) contrast(.95);background:rgba(242,247,250,.06)}
.final__maplink{display:inline-block;margin-top:.9rem;font-size:.86rem;font-weight:600;color:var(--champ);text-decoration:none}
.final__maplink:hover{text-decoration:underline;text-underline-offset:3px}

/* Mapa ocupa metade da largura no desktop; full no mobile */
@media(min-width:901px){
  .final__map iframe{width:50%;height:clamp(240px,20vw,300px)}
}

/* ---------- Fechamento: endereco/contato a esquerda, mapa a direita ---------- */
.final__local{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);
  align-items:start;margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid rgba(242,247,250,.14)}
.final__label{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--champ);margin:0 0 .7rem}
.final__label+.final__label,.final__note+.final__label,.final__who+.final__label{margin-top:1.8rem}
.final__local .final__addr{position:static;display:block;font-style:normal;margin:0;padding:0;border:0;
  font-size:1rem;line-height:1.6;color:rgba(224,234,241,.92)}
.final__note{margin:.7rem 0 0;font-size:.86rem;color:rgba(224,234,241,.6)}
.final__social{display:flex;flex-wrap:wrap;gap:.7rem;list-style:none;margin:0;padding:0}
.final__social a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;border:1px solid rgba(242,247,250,.22);color:var(--off);text-decoration:none;
  transition:background-color .25s ease,border-color .25s ease}
.final__social a:hover{background:rgba(242,247,250,.1);border-color:rgba(242,247,250,.4)}
.final__social svg{flex:0 0 auto}
.final__map{margin-top:0}
.final__map iframe{display:block;width:100%;height:clamp(240px,24vw,330px);border:0;border-radius:var(--radius);
  filter:grayscale(.25) contrast(.95);background:rgba(242,247,250,.06)}
@media(max-width:900px){
  .final__local{grid-template-columns:1fr;gap:2rem}
  .final__map iframe{height:240px}
}
.final__who{margin:0 0 .2rem;font-size:1.05rem;line-height:1.5;color:rgba(224,234,241,.92)}
.final__who span{font-size:.86rem;color:rgba(224,234,241,.62)}

/* Fechamento centralizado no mobile */
@media(max-width:900px){
  .final__text{text-align:center}
  .final h2{max-width:none;margin-inline:auto}
  .final__text p:not(.eyebrow):not(.micro){margin-inline:auto}
  .final__cta{align-items:center}
}

/* "eu não me reconheço mais" no mesmo verde do "está tudo normal" do hero */
#t-sintomas em,#t-tentou em,#t-compare em,#t-res em{color:#4C8FBB;font-style:normal;font-weight:inherit}

/* Mobile: sintomas viram cards estaticos empilhados, sem carrossel */
@media(max-width:900px){
  .signs-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .signs-marquee .signs{display:grid;grid-template-columns:1fr;gap:1rem;padding:0}
  .signs-marquee .sign{width:auto}
}

/* Icones dos sintomas no mesmo verde dos destaques */
.sign .ico{color:#4C8FBB}

/* Passos "Como funciona" centralizados */
.step{text-align:center}
.step__n{margin-inline:auto}

/* Nota do "Como funciona" centralizada */
.method__foot .note{text-align:left}
@media(max-width:900px){
  .method__foot .note{text-align:center}
}

/* Mobile: 5 credenciais em 2+2+1, com a ultima centralizada na linha inteira */
@media(max-width:900px){
  .who__text .facts li:last-child:nth-child(odd){grid-column:1 / -1}
}

/* Microcopy do CTA do metodo centralizado no eixo do botao */
@media(min-width:901px){
  .method__cta{width:fit-content}
  .method__cta .micro{width:100%;max-width:none;text-align:center}
}

/* Mobile: head do "Como funciona" centralizado */
@media(max-width:900px){
  .method .sec-head{text-align:center}
  .method .sec-head h2{margin-inline:auto}
}

/* Mobile: assinatura da Dra. acima da foto no fechamento */
@media(max-width:900px){
  .final__grid{display:flex;flex-direction:column}
  .final__text{display:contents}
  .final__text>.eyebrow{order:1}
  .final__photo{order:2}
  .final__text>h2{order:3}
  .final__text>p:not(.eyebrow){order:4}
  .final__text>.final__cta{order:5}
}

/* Textos de CTA e de cards em carrossel nao selecionaveis.
   Os links dentro dos cards seguem clicaveis. */
@media (prefers-reduced-motion:reduce){
  .fab.is-on{animation:none;transform:none}
}
.btn,.fab,.sign,.gr__top,.gr__text{
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.gr__link{user-select:auto;position:relative;z-index:2}

/* Hero maior e hierarquia h1 > h2.
   Desktop: a hero ganha um wrap mais largo (1320px) para o h1, que so quebra
   nos <br>, poder crescer sem invadir a foto; a foto cresce junto.
   O teto em vw vem da linha mais longa do h1 (~10.9em) contra a coluna. */
@media(min-width:901px){
  /* mesma logica da graciele-desinflama: h1 da hero e a maior fonte; h2 ~70% dele */
  h2{font-size:clamp(1.75rem,3vw,2.5rem)}
}
@media(max-width:900px){
  h2{font-size:clamp(1.6rem,6.9vw,2.4rem)}
}

/* Secao "Antes e depois": carrossel infinito (mesmo JS das avaliacoes).
   Altura fixa e largura automatica: nenhuma foto e cortada, mesmo com
   proporcoes diferentes. O padding-right do .res__list iguala o gap para a
   emenda entre a lista e o clone ficar invisivel. */
.res{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.res .sec-head{margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.res-marquee{--res-h:clamp(340px,42vw,500px);--res-gap:clamp(.8rem,1.6vw,1.2rem);
  position:relative;overflow:hidden;cursor:grab;--fade:clamp(24px,8vw,120px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.res-marquee:active{cursor:grabbing}
.res-marquee__track{display:flex;width:max-content;will-change:transform}
.res__list{display:flex;flex:0 0 auto;gap:var(--res-gap);padding:.4rem var(--res-gap) 1.8rem 0;margin:0}
.res__item{flex:0 0 auto;margin:0;border-radius:18px;overflow:hidden;
  background:var(--white);box-shadow:0 12px 26px -16px rgba(27,54,72,.45)}
.res__item img{display:block;height:var(--res-h);width:auto;max-width:none;
  -webkit-user-drag:none;user-select:none;pointer-events:none}
.res__note{text-align:center;max-width:60ch;margin:.4rem auto 0}
@media(prefers-reduced-motion:reduce){
  .res-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;cursor:auto}
  .res-marquee .res__list[aria-hidden="true"]{display:none}
}

/* ---------- Variante azul: botão flutuante do WhatsApp permanece verde ---------- */
.fab,.fab.is-landed{background:#72895F}
.fab:hover,.fab.is-landed:hover{background:#657A54}

/* ---------- Versoes azuis: sem dourado. Em fundo escuro vira branco; em fundo claro, azul ---------- */
:root{--champ:#FFFFFF}
.frame--dark{border-color:rgba(255,255,255,.4)}
.goldline{background:linear-gradient(#8FBAD6,transparent)}
.tried__item{border-top-color:#8FBAD6}
.sign__n,.faq summary::after{color:#3B7FAD}
.quote::before,.review__mark{color:#8FBAD6}
#progress{background:#3B7FAD}
:focus-visible{outline-color:#3B7FAD}
.sec--olive :focus-visible,.final :focus-visible{outline-color:#fff}

/* ============================================================
   HERO "Azul Sereno" (mockup aprovado 2026-10-14)
   Foto full-bleed + véu claro à esquerda, header com monograma,
   H1 em Libre Caslon Text, corpo em Montserrat (só no hero),
   faixa de 3 fatos e 2 cards de vidro sobre a foto.
   --u = 1px do mockup (1672x940), escalado pela viewport.
   ============================================================ */
.hero{
  /* so largura: 1px em 1672, teto em 1920 (mesma escala de antes em 1920x1080) */
  --u:clamp(.45px,calc(100vw / 1672),calc(1920px / 1672));
  --hz-serif:var(--serif);
  --hz-script:"Italianno","Cormorant Garamond",Georgia,serif;
  --hz-sans:var(--sans);
  --hz-ink:#213E58;
  --hz-text:#2E4A63;
  --hz-soft:#4D6A83;
  --hz-accent:#4C8FBB; /* = --olive-2 global, mesma cor do destaque dos h2 ("eu não me reconheço mais") */
  --hz-btn:#2D5374;
  --hz-btn-hover:#24465F;
  --hz-bg:#F2F6F9;
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--hz-bg) url("data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAADQAwCdASoYAA0APtFWo0uoJKMhsAgBABoJYgCdAGjQKt21EN1CiAAA/vzpW3ARqMUYejB0ud6EUkdHjfFUdRt7VC/pNvF948SxHG3YqAB/+45skM0biL0/zvXst8u9Y0+l1Zw98sstMlWmtUQqk5FmT5+slR0ozmeu6Tc2lG8ZoK9M7ej8AAAA") right top/auto 100% no-repeat;
  font-family:var(--hz-sans);color:var(--hz-text);
  display:flex;flex-direction:column;
  padding:0 calc(112 * var(--u)) 0 calc(121 * var(--u));
}
/* Foto acompanha o HERO, nao a viewport: altura = altura do hero, largura
   pela proporcao real da foto, ancorada a direita. Sem zoom e sem corte
   vertical (rosto e bancada sempre inteiros). Hero mais "estreito" que a foto:
   sobra corta pela esquerda (so parede). Mais "largo" (ultrawide): a foto
   termina antes da borda e funde no fundo pelo fade (ver min-width:1921px). */
.hero__bg,.hero__cards{position:absolute;top:0;right:0;bottom:0;left:auto;height:100%;aspect-ratio:2731/1536}
.hero__bg{z-index:-2;display:block;min-width:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:100% 30%;display:block}
@media(min-width:1921px){
  .hero__bg{min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
}
/* Veu em 2 camadas, sem editar a foto:
   .hero__bg::after = tinta fria (multiply) que puxa o cinza da foto para azul-gelo;
   o proprio veu = luz difusa branco-azulada so na faixa do texto. */
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(55% 75% at 0% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),
  linear-gradient(90deg,rgba(247,250,252,.96) 0%,rgba(244,248,251,.9) 24%,rgba(240,246,250,.72) 36%,rgba(236,243,248,.38) 44%,rgba(236,243,248,.1) 50%,rgba(236,243,248,0) 55%)}
.hero__bg::after{content:"";position:absolute;inset:0;background:rgb(246,249,254);mix-blend-mode:multiply;pointer-events:none}

/* ---------- Header ---------- */
.hero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;padding-top:calc(35 * var(--u))}
.hero__brand{display:flex;align-items:flex-start;gap:calc(36 * var(--u));margin-left:calc(-4 * var(--u));color:var(--hz-btn)}
.hero__mono{width:calc(47 * var(--u));height:auto;flex:none;min-width:30px}
.hero__brandtext{display:flex;flex-direction:column;margin:0;padding-top:calc(8 * var(--u))}
.hero__name{font-family:var(--hz-script);font-style:normal;font-weight:400;font-size:max(26px,calc(46 * var(--u)));line-height:1;color:var(--hz-btn);letter-spacing:-.005em}
.hero__role{font-size:max(9.5px,calc(12.5 * var(--u)));font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--hz-soft);margin-top:calc(5 * var(--u))}
.hero__motto{display:flex;align-items:center;gap:calc(14 * var(--u));margin:0;padding-top:calc(18 * var(--u));font-size:max(9.5px,calc(10.8 * var(--u)));font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(24,44,66,.45),0 0 12px rgba(24,44,66,.45)}
.hero__motto::after{content:none}

/* ---------- Texto ---------- */
.hero__copy{position:relative;margin-top:calc(40 * var(--u));max-width:calc(660 * var(--u));padding-bottom:calc(101 * var(--u))}
.hero__eyebrow{display:flex;align-items:center;gap:calc(20 * var(--u));margin:0 0 calc(18 * var(--u));font-size:max(10.5px,calc(13 * var(--u)));font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#3E5A72;line-height:1.3}
.hero__mname{display:none}
.mnav__btn,.mnav__panel{display:none} /* menu so existe no mobile */
.hero__swipe{display:none}
.hero__sprig{flex:none;width:calc(132 * var(--u));height:calc(22 * var(--u));overflow:visible}
.hero__motto .hero__sprig{width:calc(72 * var(--u));margin-left:calc(6 * var(--u));filter:drop-shadow(0 1px 3px rgba(24,44,66,.5))}
.hero h1{font-family:var(--hz-serif);font-weight:600;font-size:max(34px,calc(55.5 * var(--u)));line-height:1.1;letter-spacing:-.025em;color:var(--hz-ink);white-space:nowrap;margin:0 0 calc(23 * var(--u));font-variation-settings:normal;text-wrap:nowrap}
.hero h1 em{font-style:normal;font-weight:600;color:var(--hz-accent)}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.hero h1.in .w{opacity:1;transform:none}
.hero__lead{font-size:max(16px,calc(18 * var(--u)));line-height:1.64;color:var(--hz-text);max-width:33.4em;margin:0 0 calc(32 * var(--u));font-weight:400;text-wrap:pretty}
.hero__lead strong{font-weight:inherit}
@media(max-width:1180px){.hero__br{display:none}}

/* CTA */
.hero .hero__btn{display:inline-flex;align-items:center;gap:calc(14 * var(--u));min-height:max(52px,calc(66 * var(--u)));padding:0 calc(34 * var(--u)) 0 calc(31 * var(--u));border-radius:999px;background:var(--hz-btn);border:0;color:#fff;font-family:var(--hz-sans);font-weight:500;font-size:max(15px,calc(17 * var(--u)));letter-spacing:0;box-shadow:0 10px 24px -12px rgba(33,62,88,.55);text-align:left}
.hero .hero__btn:hover{background:var(--hz-btn-hover);color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(33,62,88,.6)}
.hero .hero__btn:hover svg.hero__wa{transform:none}
.hero__wa{width:max(24px,calc(32 * var(--u)));height:auto;flex:none}
.hero__btntext{margin-right:calc(8 * var(--u))}
.hero .hero__btn .btn__ico{width:20px;height:20px;flex-basis:20px}
.hero .hero__btn .btn__ico svg{width:20px;height:20px}

/* Faixa de fatos */
.hero__facts{display:flex;align-items:center;margin:calc(42 * var(--u)) 0 0;padding:0;list-style:none}
.hero__facts li{white-space:nowrap;display:flex;align-items:center;gap:calc(16 * var(--u));font-size:max(9.5px,calc(11 * var(--u)));font-weight:500;letter-spacing:.045em;line-height:1.45;text-transform:uppercase;color:#3E5A72}
.hero__facts li+li{position:relative;margin-left:calc(22 * var(--u));padding-left:calc(22 * var(--u))}
.hero__facts li+li::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:rgba(62,90,114,.32)}
.hero__facts li:nth-child(1){padding-right:calc(2 * var(--u))}
.hero__facts b{font-weight:700}
.hero__ficon{display:grid;place-items:center;width:max(34px,calc(46 * var(--u)));aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,rgba(248,251,253,.8) 0%,rgba(238,244,249,.68) 100%);border:1px solid rgba(255,255,255,.65);-webkit-backdrop-filter:blur(14px) saturate(.8) brightness(1.08);backdrop-filter:blur(14px) saturate(.8) brightness(1.08);color:#2F5373;flex:none;box-shadow:0 6px 16px -6px rgba(30,60,100,.28),0 1px 3px rgba(30,60,100,.1)} /* mesmo vidro dos badges */
.hero__ficon svg{width:60%;height:60%}

/* ---------- Cards de vidro ---------- */
/* mesma caixa da foto (regra .hero__bg,.hero__cards): % = coordenada na foto */
.hero__cards{pointer-events:none}
.hero__card{position:absolute;margin:0;display:flex;align-items:center;gap:calc(16 * var(--u));
  padding:calc(16 * var(--u)) calc(26 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u));
  border-radius:calc(31 * var(--u));
  background:linear-gradient(160deg,rgba(248,251,253,.8) 0%,rgba(238,244,249,.68) 100%);
  border:1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(14px) saturate(.8) brightness(1.08);backdrop-filter:blur(14px) saturate(.8) brightness(1.08);
  box-shadow:0 24px 60px -24px rgba(40,70,110,.24);
  animation:hz-pop .7s cubic-bezier(.2,.8,.2,1) 1s both}
.hero__card--crm{left:79%;top:29%}
.hero__card--plan{left:74.2%;top:65.6%;animation-delay:1.25s}
.hero__cicon{display:grid;place-items:center;width:max(32px,calc(46 * var(--u)));aspect-ratio:1;border-radius:50%;background:linear-gradient(140deg,#2A5680 0%,#3A6A95 100%);color:#fff;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 4px 10px -4px rgba(30,60,100,.35)}

.hero__card--plan .hero__cicon svg{width:76%;height:76%}
.hero__cicon svg{width:58%;height:58%}
.hero__ctext{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.hero__ctext strong{font-weight:600;font-size:max(13px,calc(17.2 * var(--u)));color:#2E5E8A;letter-spacing:-.005em}
.hero__ctext span{font-size:max(10.5px,calc(13.5 * var(--u)));color:#56718C;font-weight:500;margin-top:calc(4 * var(--u))}
/* Entrada do hero: CSS puro (nao depende do IntersectionObserver,
   que ignora os ultimos 8% da viewport e escondia o CTA no celular) */
/* "Role para baixo": mouse com rodinha + linha, no canto inferior direito, sobre a bancada */
.hero__scroll{position:absolute;right:calc(46 * var(--u));bottom:calc(62 * var(--u));z-index:3;display:grid;grid-template-columns:auto auto;align-items:start;column-gap:calc(20 * var(--u));color:#fff;text-shadow:0 1px 6px rgba(20,36,54,.55);filter:drop-shadow(0 1px 4px rgba(20,36,54,.45));text-decoration:none;opacity:.85;transition:opacity .3s ease;animation:hz-fade 1s 1s both}
.hero__scroll:hover,.hero__scroll:focus-visible{opacity:1}
.hero__scroll:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:6px}
.hero__mouse{position:relative;display:block;width:max(16px,calc(22 * var(--u)));height:max(26px,calc(35 * var(--u)));border:1.3px solid currentColor;border-radius:999px}
.hero__mouse::after{content:"";position:absolute;left:50%;top:calc(100% + 6px);width:1px;height:max(14px,calc(18 * var(--u)));background:currentColor;opacity:.7}
.hero__wheel{position:absolute;left:50%;top:22%;width:2px;height:max(5px,calc(6 * var(--u)));margin-left:-1px;border-radius:2px;background:currentColor;animation:hz-wheel 1.9s ease-in-out infinite}
.hero__scroll-t{padding-top:max(2px,calc(3 * var(--u)));font-family:var(--hz-sans);font-size:max(9.5px,calc(10.5 * var(--u)));font-weight:500;line-height:1.55;letter-spacing:.14em;text-transform:uppercase}
@keyframes hz-swipe-up{0%{transform:translateY(10px);opacity:0}30%{opacity:1}75%{transform:translateY(-6px);opacity:1}100%{transform:translateY(-9px);opacity:0}}
@keyframes hz-wheel-m{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes hz-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(calc(9 * var(--u)));opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes hz-fade{from{opacity:0}to{opacity:.85}}
@media(prefers-reduced-motion:reduce){.hero__scroll{animation:none}.hero__wheel,#sintomas .goldline::after,.hero__swipe-arrow{animation:none}}
@media(max-width:1180px){.hero__scroll{display:none}}
.hero__lead,.hero__cta,.hero__facts{animation:hz-up .7s cubic-bezier(.2,.65,.2,1) both}
.hero__lead{animation-delay:.25s}.hero__cta{animation-delay:.4s}.hero__facts{animation-delay:.55s}
@keyframes hz-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hz-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero h1 .w{opacity:1;transform:none;transition:none}
  .hero__card,.hero__lead,.hero__cta,.hero__facts{animation:none}
  .hero .hero__btn:hover{transform:none}
}

/* ---------- Tablet / desktop estreito ---------- */
@media(min-width:761px) and (max-width:1180px) and (orientation:landscape){
  .hero{padding-inline:clamp(28px,5vw,64px)}
  .hero__veil{background:linear-gradient(90deg,rgba(247,250,252,.97) 0%,rgba(244,248,251,.92) 38%,rgba(240,246,250,.5) 52%,rgba(240,246,250,0) 64%)}
  .hero__copy{max-width:54%}
  .hero__lead{max-width:none}
  .hero__card--crm{left:auto;right:3%;top:24%}
  .hero__card--plan{left:auto;right:5%;top:68%}
  .hero__card{width:auto}
  .hero__facts{flex-wrap:wrap;row-gap:12px}
}

/* ---------- Mobile (e tablet em retrato) ----------
   Ordem: header -> foto com fade -> H1 -> texto -> CTA -> fatos -> badges.
   Nada sobreposto ao titulo; badges em linha, no fluxo, depois do CTA. */
@media(max-width:760px),(orientation:portrait) and (max-width:1100px){
  .hero{z-index:50;--pw:min(82vw,500px);--ph:calc(var(--pw) * 1.25);--pt:0px;min-height:0;display:block;
    padding:calc(var(--pt) + var(--ph) * .745) 0 0;
    background:linear-gradient(180deg,#E3EAEF 0,#E9EFF3 calc(var(--ph) * .45),#F1F5F8 calc(var(--ph) * .8),#F4F7FA 100%)}
  .hero__bg{position:absolute;z-index:0;top:var(--pt);bottom:auto;right:auto;left:calc(49% - var(--pw) * .458);width:var(--pw);min-width:0;height:var(--ph);aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 66%,transparent 84%),linear-gradient(90deg,transparent 0,#000 24%,#000 95%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 66%,transparent 84%),linear-gradient(90deg,transparent 0,#000 24%,#000 95%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .hero__bg img{object-position:50% 0}
  .hero__veil{inset:0 0 auto 0;height:110px;z-index:1;background:linear-gradient(180deg,rgba(236,241,245,.6) 0%,rgba(236,241,245,0) 100%)}
  /* topo do mobile: so a logo (monograma) + menu sanduiche, sobre a foto */
  .hero__top{display:flex;position:absolute;z-index:6;top:0;left:0;right:0;align-items:flex-start;justify-content:space-between;padding:14px 14px 0 22px;background:none}
  .hero__brand{margin:0;color:var(--hz-btn)}
  .hero__mono{display:block;width:20px;min-width:0}
  .hero__brandtext{display:none}
  .mnav__btn{display:grid;place-content:center;gap:5px;width:46px;height:46px;margin-top:-1px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hz-btn);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mnav__btn span{display:block;width:20px;height:1.7px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
  .mnav__btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
  .mnav__btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mnav__btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}
  .mnav__btn:focus-visible{outline:2px solid var(--hz-btn);outline-offset:0}
  .mnav__panel{display:block;position:absolute;top:66px;right:14px;left:14px;max-width:360px;margin-left:auto;padding:8px;border-radius:22px;
    background:linear-gradient(160deg,rgba(248,251,253,.9) 0%,rgba(238,244,249,.84) 100%);border:1px solid rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(16px) saturate(.9) brightness(1.06);backdrop-filter:blur(16px) saturate(.9) brightness(1.06);
    box-shadow:0 24px 50px -20px rgba(30,60,100,.4),0 2px 6px rgba(30,60,100,.08);
    opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  .mnav__panel.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
  .mnav__panel ul{list-style:none;margin:0;padding:0}
  .mnav__panel li+li{border-top:1px solid rgba(62,90,114,.12)}
  .mnav__panel ul a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--hz-ink);text-decoration:none}
  .mnav__panel ul a:hover{background:rgba(255,255,255,.6)}
  .mnav__panel a:focus-visible{outline:2px solid var(--hz-btn);outline-offset:-2px}
  .hero__mname{display:flex;justify-content:center;margin:0 0 10px}
  .hero__mname .hero__name{font-size:32px;color:var(--hz-btn);text-shadow:none}
  .hero__brand{gap:11px;margin:0;align-items:center}
  .hero__mono{width:22px;min-width:0}
  .hero__brandtext{padding:0}
  .hero__name{font-size:22px}
  .hero__role{font-size:9.5px;margin-top:4px;letter-spacing:.3em}
  .hero__motto{display:none}
  .hero__copy{position:relative;z-index:2;margin:0;max-width:none;padding:0 20px 30px;text-align:center}
  .hero__eyebrow{display:none}
  .hero h1{font-size:min(7.5vw,34px);line-height:1.12;margin-bottom:14px;letter-spacing:-.015em;-webkit-text-stroke:0}
  .hero__lead{font-size:15px;line-height:1.55;max-width:none;margin-bottom:18px;text-wrap:pretty}
  .hero__cta{display:block}
  .hero .hero__btn{width:100%;justify-content:center;min-height:56px;padding:0 14px;font-size:clamp(13.5px,3.9vw,16px);gap:9px;white-space:nowrap}
  .hero__btntext{margin-right:2px}
  .hero__wa{width:24px}
  .hero__facts{margin:22px max(-12px,calc((100% - 520px) / 2)) 0;display:grid;grid-template-columns:.9fr 1fr 1.25fr;align-items:start}
  .hero__facts li{white-space:nowrap;flex-direction:column;align-items:center;text-align:center;gap:9px;font-size:10px;letter-spacing:.03em;line-height:1.45;padding:0 4px;color:#3E5A72}
  .hero__facts li+li{margin:0;padding-left:4px}
  .hero__facts li+li::before{top:6%;bottom:6%}
  .hero__facts br{display:inline}
  .hero__facts b,.hero__f2{font-weight:700;color:var(--hz-ink);font-size:11px;letter-spacing:.02em}
  .hero__f2 b{font-size:inherit}
  .hero__ficon{width:35px}
  /* badge CRM: pilula de vidro com lotus, ao lado do rosto */
  .hero__cards{position:absolute;inset:0 0 auto 0;height:calc(var(--pt) + var(--ph));aspect-ratio:auto;width:auto;display:block;padding:0;z-index:3;pointer-events:none}
  .hero__card{position:absolute;width:auto;min-width:0;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;
    background:linear-gradient(160deg,rgba(248,251,253,.84) 0%,rgba(238,244,249,.72) 100%);-webkit-backdrop-filter:blur(12px) saturate(.85) brightness(1.06);backdrop-filter:blur(12px) saturate(.85) brightness(1.06);border:1px solid rgba(255,255,255,.7);box-shadow:0 14px 30px -16px rgba(30,60,100,.38)}
  .hero__card--crm{left:auto;right:12px;top:58%} /* posicao original: lado direito, na altura da mao */
  .hero__card--plan{display:none}
  .hero__cicon{display:grid;width:25px;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 3px 8px -3px rgba(30,60,100,.35)}
  /* mobile: mouse animado fixo no rodape da 1a dobra (so o icone); some ao rolar. Substitui o tracinho de #sintomas */
  #sintomas .goldline{visibility:hidden} /* mantem o espaco entre o hero e o titulo */
  .hero__scroll{display:block;position:fixed;left:50%;right:auto;bottom:14px;transform:translateX(-50%);z-index:40;padding:4px;border-radius:0;background:none;box-shadow:none;color:#2D5374;text-shadow:none;filter:drop-shadow(0 0 3px rgba(255,255,255,.9));opacity:1;animation:none;transition:opacity .35s ease,transform .35s ease}
  .hero__scroll.is-gone{opacity:0;transform:translate(-50%,10px);pointer-events:none}
  .hero__scroll-t{display:none}
  /* no celular: setinha subindo no lugar do mouse */
  .hero__mouse{display:none}
  .hero__swipe{display:block;width:26px;height:30px;overflow:hidden}
  .hero__swipe svg{display:block;width:100%;height:100%;overflow:visible}
  .hero__swipe-arrow{animation:hz-swipe-up 1.6s cubic-bezier(.3,0,.2,1) infinite}
  .hero__ctext{white-space:nowrap;align-items:flex-start;text-align:left}
  .hero__ctext strong{font-size:10.5px;line-height:1.2}
  .hero__ctext span{font-size:8.5px;letter-spacing:-.01em;line-height:1.3;margin-top:1px}
}

/* ============================================================
   RAMOS (pedido do cliente 2026-10-14)
   Hero: ramo de oliveira preenchido, desfocado, entrando pelas bordas
   (folha: assets/img/ramo-folha.svg). Acima da foto/veu, abaixo do texto.
   Demais sections: textura de ramos cinza, sem blur, via sprite <symbol>
   no topo do <body> (#rm-a reto, #rm-b curvo, #rm-c com galho, #rm-d raminho).
   ============================================================ */
.hero__leaf{position:absolute;z-index:-1;pointer-events:none;width:calc(430 * var(--u));aspect-ratio:560/520;
  background:url(assets/img/ramo-folha.svg) center/contain no-repeat;filter:blur(calc(7 * var(--u)));opacity:.42}
.hero__leaf--l{left:calc(-200 * var(--u));top:46%;rotate:-35deg}
.hero__leaf--r{width:calc(380 * var(--u));right:calc(-112 * var(--u));bottom:calc(-120 * var(--u));rotate:42deg;scale:-1 1}

.sec,.final{isolation:isolate}
.rm{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;color:#7E8C97}
.rm svg{position:absolute;top:var(--y);width:var(--w);height:auto;aspect-ratio:1/1.6;fill:currentColor;opacity:.17;filter:blur(3px);
  transform:rotate(var(--r,0)) scaleX(var(--f,1))}
.rm .l{left:calc(var(--w) * -.32)}
.rm .r{right:calc(var(--w) * -.32)}
.sec--cream .rm{color:#6E8191}
.sec--olive .rm,.final .rm{color:#D4E0E8}
.sec--olive .rm svg,.final .rm svg{opacity:.09}

@media(max-width:760px),(orientation:portrait) and (max-width:1100px){
  .hero__leaf{z-index:1;width:180px;filter:blur(3px);opacity:.45}
  .hero__leaf--l{left:-92px;bottom:auto;top:calc(var(--ph) * .26);rotate:-35deg}
  .hero__leaf--r{width:170px;right:-90px;bottom:auto;top:calc(var(--ph) * -.04);rotate:42deg}
  .rm svg{width:calc(var(--w) * .55);opacity:.1}
  .rm .l{left:calc(var(--w) * -.28)}
  .rm .r{right:calc(var(--w) * -.28)}
  .rm .k2{display:none}
}

/* Mobile: bloco "Onde eu atendo" (nome, CRM, endereco, contato, maps) todo centralizado */
@media(max-width:760px){
  .final__info{text-align:center}
  .final__social{justify-content:center}
  .final__local .final__map{text-align:center}
  .final__maplink{display:inline-block}
}

/* contraste AA (Lighthouse): nota dos resultados e rodape */
.res__note,footer.site{color:#5E6870}

@media(max-width:760px) and (prefers-reduced-motion:reduce),(orientation:portrait) and (max-width:1100px) and (prefers-reduced-motion:reduce){.mnav__panel,.mnav__panel.is-open,.mnav__btn span{transition:none}}

/* 3 itens do hero clicaveis -> passos da secao "Como funciona" */
.hero__flink{display:flex;flex-direction:inherit;align-items:inherit;gap:inherit;text-align:inherit;color:inherit;text-decoration:none;border-radius:14px;-webkit-tap-highlight-color:transparent}
.hero__facts li{gap:0}
.hero__flink{gap:calc(16 * var(--u))}
.hero__flink .hero__ficon{transition:transform .25s cubic-bezier(.25,1,.5,1),box-shadow .25s ease}
.hero__flink:hover .hero__ficon{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(30,60,100,.35),0 1px 3px rgba(30,60,100,.1)}
.hero__flink:hover>span:last-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hero__flink:focus-visible{outline:2px solid #2D5374;outline-offset:6px}
.step{scroll-margin-top:90px}
.step:target{animation:step-flash 1.6s ease-out 1}
@keyframes step-flash{0%{box-shadow:0 0 0 0 rgba(143,186,214,.0)}25%{box-shadow:0 0 0 6px rgba(143,186,214,.55)}100%{box-shadow:0 0 0 0 rgba(143,186,214,0)}}
@media(max-width:760px),(orientation:portrait) and (max-width:1100px){.hero__flink{gap:9px;flex-direction:column;align-items:center;min-height:44px}}
@media(prefers-reduced-motion:reduce){.hero__flink .hero__ficon{transition:none}.step:target{animation:none}}
.hero__card--crm .hero__cicon svg{width:72%;height:72%;stroke-width:1.45}

/* "eu nao me reconheco mais" grifado: faixa de marca-texto azul clara na metade de baixo */
#t-sintomas em,#t-tentou em,#t-compare em{background:linear-gradient(transparent 58%,rgba(143,186,214,.38) 58%,rgba(143,186,214,.38) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}

/* icones nos titulos da comparacao (convenio x minha consulta) */
.cmp__col h3{display:flex;align-items:center;gap:.7rem}
.cmp__ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%}
.cmp__ico svg{width:22px;height:22px}
.cmp__col--plain .cmp__ico{background:#EEF1F4;color:#7A8690;box-shadow:0 6px 16px -6px rgba(30,60,100,.28),0 1px 3px rgba(30,60,100,.1)}
.cmp__col--dra .cmp__ico{background:rgba(242,247,250,.12);color:#fff;box-shadow:0 8px 18px -6px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.2)}

/* credenciais da Dra.: cada item dentro de um badge de vidro (mesmo padrao dos badges do hero) */
.who__text .facts li{align-self:stretch;padding:12px 14px;border-radius:18px;
  background:linear-gradient(160deg,rgba(248,251,253,.92) 0%,rgba(238,244,249,.8) 100%);border:1px solid rgba(255,255,255,.75);
  box-shadow:0 14px 30px -18px rgba(30,60,100,.38),0 1px 3px rgba(30,60,100,.08)}
.who__text .facts strong{color:#2D5374}
.who__text .facts span{color:#56718C}
.who__text .facts{gap:.8rem}
/* citacao da Dra. solta, estilo revista: sem caixa, so aspa azul + linha fina em cima */
#dra .quote{background:none;border:0;border-radius:0;box-shadow:none;padding:clamp(2.4rem,4vw,3rem) clamp(.5rem,4vw,3rem) 0;margin-inline:auto;max-width:860px}
#dra .quote::after{content:"";position:absolute;top:0;left:50%;width:64px;height:2px;margin-left:-32px;border-radius:2px;background:#8FBAD6}
#dra .quote::before{left:50%;top:.18em;transform:translateX(-50%);font-size:5.5rem;opacity:.5}
#dra .quote p{padding-top:2.2rem}
/* aspa colada no inicio da frase (inline), nao solta acima */
#dra .quote::before{content:none}
#dra .quote p{padding-top:1.4rem}
#dra .quote p::before{content:"“";font-family:var(--serif);font-style:normal;font-weight:600;font-size:2.6em;line-height:0;color:#8FBAD6;vertical-align:-.38em;margin-right:.06em}
#dra .quote p{max-width:none;text-wrap:balance}
#dra .quote{max-width:940px}
@media(max-width:760px){#dra .quote p{text-wrap:pretty}}