/* ============================================================
   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}

/* ---------- Header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px 0;transition:background-color .35s ease,box-shadow .35s ease,padding .35s ease}
.top.is-scrolled{background:rgba(242,247,250,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding:8px 0}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.top__brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
.top__name{font-family:var(--serif);font-size:1.25rem;color:var(--ink);letter-spacing:-.01em}
.top__role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--off);padding-top:clamp(2.5rem,6vw,5rem)}
.hero__glow{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 70% at 84% 78%,rgba(121,170,199,.42),transparent 70%),
  radial-gradient(40% 40% at 12% 8%,rgba(220,234,243,.9),transparent 70%)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:stretch}
.hero__copy{align-self:center;padding:clamp(1rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem)}
.hero h1{margin-bottom:1.4rem;max-width:20ch}
.hero .lead{max-width:54ch;margin-bottom:2rem}
.hero__cta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.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}
@media(prefers-reduced-motion:reduce){.hero h1 .w{opacity:1;transform:none;transition:none}}

.hero__photo{position:relative;align-self:stretch;margin:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:32px 32px 0 0;background:
  radial-gradient(70% 60% at 50% 100%,rgba(121,170,199,.55),rgba(121,170,199,.18) 60%,transparent 100%),
  linear-gradient(180deg,var(--cream),var(--champ-2));min-height:480px}
.hero__photo img{position:relative;z-index:1;width:100%;height:100%;min-height:480px;object-fit:cover;object-position:50% 15%}
.hero__ring{position:absolute;left:50%;bottom:-20%;width:110%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),rgba(255,255,255,.08) 70%,transparent 100%);z-index:0}
.hero__ring::before{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(27,54,72,.18)}
.hero__tag{position:absolute;z-index:2;left:clamp(16px,2.5vw,28px);top:clamp(16px,2.5vw,28px);background:var(--white);border-radius:16px;padding:.9rem 1.15rem;box-shadow:var(--shadow-hover);display:flex;flex-direction:column;line-height:1.3;max-width:220px}
.hero__tag strong{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--olive);letter-spacing:-.01em}
.hero__tag span{font-size:.8rem;color:var(--muted)}

/* ---------- 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(.22,1.2,.36,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){
  .hero{padding-top:calc(70px + 2rem)}
  .hero__grid{grid-template-columns:1fr;gap:1rem}
  .hero__copy{display:contents}
  .hero__copy>.eyebrow{order:1}
  .hero__copy>.hero__cred{order:2}
  .hero__copy>h1{order:3;margin-bottom:0}
  .hero__copy>.lead{order:5}
  .hero__copy>.hero__cta{order:6;padding-bottom:1rem}
  .hero__photo{order:4;max-width:560px;margin-inline:auto;width:100%;min-height:0;margin-top:0;padding-top:0;margin-bottom:-3.5rem;overflow:visible;border-radius:28px 28px 0 0}
  .hero__photo img{width:100%;min-height:0;aspect-ratio:4/5}
  .hero__photo{flex-wrap:wrap}
  .hero__photo img{order:1}
  .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}
  .top__name{font-size:1.05rem}
  .top__role{display:none}
  .btn{width:100%;text-align:center}
  .btn--sm{width:auto}
  .hero h1{max-width:none}
  .hero__tag strong{font-size:1.15rem}
  .hero__photo{border-radius:24px 24px 0 0}
  .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,.hero__cta{align-items:stretch}
  .final__cta .micro,.method__cta .micro,.hero__cta .micro{text-align:center;max-width:none}
  .goldline{height:56px;margin-bottom:1.6rem}
}

/* Override: CTA visível na primeira dobra (desktop baixo, ex. 1366x768) */
@media (min-width:901px) and (max-height:820px){
  .hero{padding-top:1.25rem}
  .hero__copy{padding:.5rem 0 1.5rem}
  .hero h1{font-size:clamp(2rem,4.6vh,3rem);margin-bottom:.8rem}
  .hero .lead{font-size:1rem;line-height:1.5;margin-bottom:1rem}
}

/* Override: hero inteiro cabe na viewport (desktop) */
@media (min-width:901px){
  /* altura do hero = altura do texto (com teto), nao a viewport inteira */
  .hero{padding-top:clamp(1rem,2.5vh,2rem);min-height:0}
  .hero__grid{max-height:min(82svh,760px)}
  .hero__copy{padding:0 0 1.2rem;align-self:center}
  .hero__photo{min-height:420px;max-height:min(82svh,760px)}
  .hero__photo img{height:100%;min-height:0;max-height:min(82svh,760px)}
  .hero h1{font-size:clamp(1.9rem,min(4.1vw,5.2vh),3.2rem)}
  .hero .lead{margin-bottom:1.5rem}
}

/* Tag da foto: canto inferior direito, na metade de baixo da imagem */
.hero__tag{top:auto;left:auto;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px)}

/* 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)}

/* Indicador de rolagem (mouse) */
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:block;text-decoration:none;opacity:.85;transition:opacity .3s}
.scroll-hint:hover{opacity:1}
.scroll-hint__mouse{display:block;width:26px;height:42px;border:2px solid var(--olive);border-radius:14px;position:relative;background:rgba(242,247,250,.6);backdrop-filter:blur(4px)}
.scroll-hint__wheel{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--olive);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.scroll-hint__wheel{animation:none}}
@media (max-width:900px){.scroll-hint{display:none}}

/* Mobile: credencial como parágrafo sob o nome; tag da foto oculta */
.hero__cred{display:none}
@media (max-width:900px){
  .hero{padding-top:1.5rem}
  .eyebrow{margin-bottom:.35rem}
  .hero__cred{display:block;font-size:.9rem;font-weight:600;color:var(--olive-2);margin-bottom:1.1rem}
  .hero__tag{display:none}
  .hero__photo{margin-top:.5rem;padding-top:0;overflow:hidden}
}

/* Desktop: hero ocupa a viewport inteira; foto estica, texto centrado */
@media (min-width:901px){
  .hero__grid{min-height:calc(100svh - clamp(1rem,2.5vh,2rem));align-items:stretch}
  .hero__copy{align-self:center;padding:2rem 0 3.5rem}
  .hero__photo{height:auto;align-self:stretch}
  .hero__photo img{height:100%;max-height:none}
}

/* Mobile: balão "Médica Nutróloga / RQE" sobre a foto, canto inferior direito */
@media (max-width:900px){
  .hero__cred{display:none}
  .hero__photo{position:relative;overflow:hidden;border-radius:24px}
  .hero__photo img{order:0}
  .hero__tag{display:flex;position:absolute;order:0;right:12px;bottom:33%;left:auto;top:auto;margin:0;width:auto;max-width:70%;flex-direction:column;align-items:flex-start;gap:0;padding:.7rem .9rem;border-radius:12px}
  .hero__tag strong{font-size:1.05rem}
  .hero__tag span{font-size:.75rem}
}

/* Nome no topo: assinatura manuscrita */
.hero .eyebrow{font-family:"Ms Madi","Brush Script MT",cursive;font-size:clamp(30px,3.4vh,38px);font-weight:400;letter-spacing:0;text-transform:none;color:var(--olive);line-height:1;margin-bottom:.6rem}

.hero .eyebrow{font-size:clamp(22px,2.6vh,28px)}

.hero .eyebrow{font-family:"Ms Madi","Brush Script MT",cursive;font-size:clamp(24px,2.9vh,32px)}

/* Í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}

/* Mobile: hero centralizado */
@media (max-width:900px){
  .hero__copy{text-align:center}
  .hero h1,.hero .lead{margin-inline:auto}
  .hero__cta{align-items:center}
  .hero .btn{justify-content:center;text-align:center}
  .hero .micro{margin-inline:auto}
}

.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}

/* Destaque verde no “está tudo normal” do hero (igual modelo 03) */
.hero h1 em{color:#2B5E80;font-style:normal;font-weight:inherit}

/* 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}

/* Hero com foto vazada: card transparente, sem corte na imagem */
.hero__photo{background:none;border-radius:0;overflow:visible}
.hero__photo img{min-height:0;height:auto;object-fit:contain;align-self:flex-end}
.hero__ring{display:none}

/* fade transparente na base do retrato */
.hero__photo img{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 38%,rgba(0,0,0,.45) 62%,transparent 80%);
  mask-image:linear-gradient(to bottom,#000 0,#000 38%,rgba(0,0,0,.45) 62%,transparent 80%);
}

/* Desktop: texto a esquerda, foto a direita. Empilhado so no mobile. */
@media(min-width:901px){
  .hero__grid{grid-template-columns:1.05fr .95fr}
  .hero__copy{padding-bottom:clamp(3rem,6vw,5rem)}
  .hero__photo{align-self:stretch;max-width:560px;margin-inline:0;margin-left:auto;width:100%}
}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__copy{padding-bottom:1.5rem}
  .hero__photo{align-self:center;max-width:520px;margin-inline:auto;width:100%}
}

@media(max-width:900px){
  /* mobile, nesta ordem: nome, titulo, texto, foto, CTA.
     .hero__copy usa display:contents, entao a ordem sai do `order` de cada filho.
     O hero inteiro cabe na primeira dobra: a foto absorve a sobra com flex:1. */
  .hero{padding-top:.75rem;height:100svh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .hero .wrap.hero__grid{flex:1;display:flex;flex-direction:column;gap:.35rem;min-height:0}
  .hero__copy{display:contents}
  .hero__copy>.eyebrow{order:1;margin-bottom:.1rem}
  .hero__copy>.hero__cred{order:2;margin-bottom:.35rem}
  .hero__copy>h1{order:3;margin-bottom:.35rem}
  .hero__copy>.lead{order:4;margin-bottom:.35rem}
  .hero__photo{order:5;flex:1 1 0;min-height:0;max-width:420px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:center;overflow:visible}
  .hero__photo img{width:auto;max-width:100%;height:100%;max-height:100%;min-height:0;aspect-ratio:auto;object-fit:contain}
  .hero__copy>.hero__cta{order:6;flex:0 0 auto;padding-bottom:.75rem;margin-top:.35rem}
}

@media(max-width:900px){
  /* telas curtas: encolhe texto e CTA para sobrar altura para a foto */
  .hero h1{font-size:clamp(1.55rem,4.4vh,2.1rem);line-height:1.12}
  .hero .lead{font-size:clamp(.9rem,1.85vh,1rem);line-height:1.45}
  .hero__cta .btn{padding:.8rem 1.5rem;min-height:46px}
  .hero__cta .micro{font-size:.72rem;line-height:1.35}
  .hero__photo{min-height:30svh}
}
@media(max-width:900px){
  /* o fade da mascara deixa a base da foto vazia: encurta o fade e sobe o CTA */
  .hero__photo img{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 78%,rgba(0,0,0,.5) 92%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 78%,rgba(0,0,0,.5) 92%,transparent 100%);
  }
  .hero__copy>.hero__cta{margin-top:-1.25rem}
}
@media(max-width:900px){
  /* a foto preenche a sobra e o excesso e cortado, ancorado no rosto */
  .hero__photo{overflow:hidden}
  .hero__photo img{width:100%;max-width:100%;height:100%;object-fit:cover;object-position:50% 0%}
}
@media(max-width:900px){
  /* foto entre o nome e o titulo */
  .hero__photo{order:2}
  .hero__copy>.hero__cred{order:3}
  .hero__copy>h1{order:4}
  .hero__copy>.lead{order:5}
  .hero__copy>.hero__cta{order:6;margin-top:.35rem}
}
@media(max-width:900px){
  /* foto ~12% menor nos dois eixos, sem mudar o enquadramento */
  .hero__photo{flex:0 1 auto;width:100%;max-width:420px;height:39svh;max-height:41svh;margin-inline:auto}
}

/* 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,.hero__cred,.btn{text-wrap:balance}
p,li,.lead,.micro,summary,figcaption{text-wrap:pretty}
@media(max-width:900px){
  /* zoom intermediario: a img fica mais estreita que a caixa, entao o `cover`
     amplia menos (fator ~0.25 em vez de 0.32) e ainda corta a base. */
  .hero__photo img{width:77%;max-width:77%;height:100%;margin-inline:auto;display:block;object-fit:cover;object-position:50% 0%}
}
@media(max-width:900px){
  .hero__copy>h1{margin-top:.9rem}
}
@media(max-width:900px){
  /* CTA do hero acompanha o texto do botao em vez de esticar na largura toda */
  .hero__cta{align-items:center}
  .hero__cta .btn{width:auto;max-width:100%;align-self:center;padding:1.15rem 2.1rem;min-height:60px}
}
@media(max-width:900px){
  /* todos os elementos do hero agrupados e centrados nos dois eixos */
  .hero .wrap.hero__grid{justify-content:center;align-items:center;text-align:center}
  .hero__copy>.eyebrow,.hero__copy>.hero__cred,.hero__copy>h1,.hero__copy>.lead{width:100%}
  .hero__cta{width:100%;align-items:center;text-align:center}
  .hero__cta .micro{text-align:center}
}

/* Fundo atras da foto: disco champagne + anel fino, para o hero nao ficar liso.
   Reaproveita o .hero__ring que ja existe no HTML. */
.hero__ring{
  display:block;position:absolute;left:50%;top:50%;
  width:min(86%,380px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(188,214,231,.42) 0%,rgba(188,214,231,.22) 55%,rgba(188,214,231,0) 74%);
}
.hero__ring::before{display:none}
.hero__photo{position:relative;isolation:isolate}
.hero__photo img{position:relative;z-index:1}
@media(max-width:900px){
  .hero__ring{width:min(78%,300px);top:53%}
}

/* Glow do canto inferior direito na mesma cor/intensidade do disco atras dela */
.hero__glow{background:
  radial-gradient(60% 70% at 84% 78%,rgba(188,214,231,.42),rgba(188,214,231,.22) 55%,rgba(188,214,231,0) 74%),
  radial-gradient(40% 40% at 12% 8%,rgba(220,234,243,.9),transparent 70%)}

/* CTA do hero no mesmo verde do destaque "esta tudo normal" */
.hero__cta .btn--dark{background:#2B5E80;border-color:#2B5E80}
.hero__cta .btn--dark:hover{background:#244E6A}

/* 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)}
/* cantos inferiores da hero arredondados */
.hero{border-bottom-left-radius:clamp(20px,5vw,36px);border-bottom-right-radius:clamp(20px,5vw,36px)}

/* verde puxado para o pastel (menos saturado, mais claro) */
.hero h1 em{color:#4986AF}
.hero__cta .btn--dark{background:#3778A3;border-color:#3778A3}
.hero__cta .btn--dark:hover{background:#316C93}

/* verde acinzentado, claro (sage) */
.hero h1 em{color:#8398A6}
.hero__cta .btn--dark{background:#728896;border-color:#728896}
.hero__cta .btn--dark:hover{background:#657B89}
.hero h1 em{color:#6F8593}
.hero__cta .btn--dark{background:#5F7583;border-color:#5F7583}
.hero__cta .btn--dark:hover{background:#546774}
.hero h1 em{color:#4081AC}
.hero__cta .btn--dark{background:#337099;border-color:#337099}
.hero__cta .btn--dark:hover{background:#2D6387}
/* verde pastel: matiz verde puxado, saturacao media, claro */
.hero h1 em{color:#4F95C4}
.hero__cta .btn--dark{background:#3D85B5;border-color:#3D85B5}
.hero__cta .btn--dark:hover{background:#3677A2}
.hero h1 em{color:#4C8FBB}
.hero__cta .btn--dark{background:#3B7FAD;border-color:#3B7FAD}
.hero__cta .btn--dark:hover{background:#34719A}
@media(max-width:900px){
  /* hero um pouco menor que a viewport: aparece uma fatia da secao seguinte */
  .hero{height:92svh}
}

/* atras do hero (visivel nos cantos arredondados) fica branco puro */
main{background:var(--white)}
@media(max-width:900px){
  /* card "Medica Nutrologa · RQE" mais para baixo sobre a foto */
  .hero__tag{bottom:4%}
}

/* 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}}
@media(max-width:900px){
  /* overflow:hidden cortava a sombra do card em quina reta;
     o object-fit:cover ja recorta a imagem sozinho, entao nao precisa dele */
  .hero__photo{overflow:visible}
}

/* h1, lead e micro do hero travados na largura horizontal do botao.
   --cta-w e medida em JS a partir do proprio .btn (ver index.html). */
.hero .lead,.hero__cta .micro{max-width:var(--cta-w,none)}
.hero h1{max-width:none}
@media(max-width:900px){
  .hero h1,.hero .lead,.hero__cta .micro{margin-inline:auto}
}
.hero__tag{
  background:linear-gradient(145deg,rgba(255,255,255,.6),rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(18px) saturate(165%) brightness(102%);
  backdrop-filter:blur(18px) saturate(165%) brightness(102%);
  border-color:rgba(255,255,255,.58);
}
/* vidro transparente: praticamente so o blur, sem veu branco */
.hero__tag{
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  border-color:rgba(255,255,255,.45);
  box-shadow:0 8px 26px rgba(27,54,72,.12),inset 0 1px 0 rgba(255,255,255,.6);
}

/* h1 quebra SO nos <br> do HTML: nada de quebra automatica.
   O font-size ganha um teto em vw para a linha mais longa nao vazar. */
.hero h1{white-space:nowrap;text-wrap:nowrap}
@media(min-width:901px){
  .hero h1{font-size:min(clamp(1.9rem,min(4.1vw,5.2vh),3.2rem),3.4vw)}
}
@media(max-width:900px){
  .hero h1{font-size:min(clamp(1.55rem,4.4vh,2.1rem),7.6vw)}
}
.hero__tag{
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(26px) saturate(120%) brightness(112%);
  backdrop-filter:blur(26px) saturate(120%) brightness(112%);
  border-color:rgba(255,255,255,.6);
}

/* Secao "Se nada disso resolveu": titulo e cards centralizados */
#tentou .sec-head{text-align:center}
#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}

/* Retrato do hero: slot de 520px no desktop — o 1082w cobre DPR2 sem upscale */
@media(min-width:901px){
  .hero__photo{max-width:520px}
  /* card "Médica Nutróloga · RQE" no canto inferior direito da foto */
  .hero__tag{top:auto;left:auto;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px)}
}

/* ---------- 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}
}

/* Card da credencial: sem blur, fundo dissolve ate transparente nas bordas */
.hero__tag{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:radial-gradient(120% 140% at 30% 40%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 45%,rgba(255,255,255,.35) 72%,rgba(255,255,255,0) 100%);
  border:0;
  box-shadow:none;
}

/* 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}

/* CTA do hero com texto branco */
.hero__cta .btn--dark,.hero__cta .btn--dark:hover{color:#fff}
.hero__cta .btn--dark svg{color:#fff}

/* 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}
.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)}

/* Desktop: a foto do hero nao ultrapassa o topo nem a base do bloco de texto.
   Zera o padding do copy para a linha do grid medir o texto real, e prende a
   imagem a 100% dessa altura. */
@media(min-width:901px){
  .hero__grid{align-items:stretch}
  .hero__copy{padding-block:0;align-self:center}
  .hero__photo{align-self:stretch;height:100%;max-height:100%;min-height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
  .hero__photo img{height:100%;max-height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom center}
}
@media(min-width:901px){
  /* a linha do grid passa a ser medida SO pelo texto: a imagem sai do fluxo
     (position:absolute) e preenche a altura resultante. */
  .hero__grid{min-height:0;max-height:none;align-items:stretch}
  .hero__photo{position:relative;align-self:stretch;height:auto;min-height:0;overflow:hidden}
  .hero__photo img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;max-height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom center}
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
}

/* 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)}
}
@media(min-width:901px){
  /* hero nao precisa ocupar a viewport inteira no desktop */
  .hero{min-height:0;padding-block:clamp(2rem,4vh,3.5rem) clamp(2.5rem,5vh,4rem)}
  .scroll-hint{display:none}
}

/* ---------- 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{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}
}

/* Hero no desktop: microcopy centralizado no eixo do botao
   e card "Medica Nutrologa" um pouco mais acima */
@media(min-width:901px){
  .hero__cta .micro{width:var(--cta-w,auto);text-align:center}
  .hero__tag{bottom:clamp(44px,5vw,78px)}
}

/* 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 no desktop: o lead deixa de ficar preso na largura do botao e ocupa
   a coluna de texto inteira, que termina no meio da hero. */
@media(min-width:901px){
  .hero .lead{max-width:none;text-wrap:pretty}
}

/* Cards flutuando sobre a foto do hero (referencia: graciele-desinflama):
   branco solido, sombra macia, entrada em "pop" e sobe-e-desce continuo.
   scale/translate individuais para nao brigar com o transform do reveal. */
.hero__tag{
  background:#fff;border:0;border-radius:16px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 12px 26px -14px rgba(27,54,72,.45);
  animation:tag-pop .7s cubic-bezier(.2,.8,.2,1) 1.2s both,tag-bob 5s ease-in-out 1.2s infinite;
}
.hero__tag.hero__tag--plan{max-width:none;
  top:46%;left:clamp(10px,1.8vw,22px);right:auto;bottom:auto;
  animation-delay:1.5s,2s;
}
@keyframes tag-pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@keyframes tag-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(prefers-reduced-motion:reduce){.hero__tag{animation:none}}

/* 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){
  .hero .wrap.hero__grid{width:min(1320px,100% - 2*var(--gutter));min-height:min(78svh,760px)}
  .hero h1{font-size:min(clamp(2rem,7vh,3.7rem),4vw)}
  .hero .lead{font-size:clamp(1.1rem,1.5vw,1.35rem)}
  .hero__photo{max-width:640px}
  /* 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){
  .hero h1{font-size:min(clamp(1.55rem,4.6vh,2.3rem),8.1vw)}
  h2{font-size:clamp(1.6rem,6.9vw,2.4rem)}
}

/* Balao "No mesmo dia": legenda em 2 linhas equilibradas; no celular encosta
   na borda esquerda da foto para nao cobrir o rosto. */
.hero__tag--plan span{max-width:9.5em;text-wrap:balance}
@media(max-width:900px){
  .hero__tag.hero__tag--plan{left:-6px;top:52%;padding:.6rem .8rem}
  .hero__tag--plan strong{font-size:.95rem}
  .hero__tag--plan span{font-size:.7rem}
}

/* 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}
@media(max-width:900px){
  /* foto nova: o fade ficava em cima da mao e do queixo; agora so nos ultimos 10% */
  .hero__photo img{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%);
  }
}
@media(max-width:900px){
  /* foto nova: o rosto fica mais baixo no quadro; os baloes descem para nao cobrir boca e queixo */
  .hero__tag.hero__tag--plan{top:78%}
  .hero__tag:not(.hero__tag--plan){bottom:-18px}
}
@media(min-width:901px){
  /* foto nova: a foto tem exatamente a altura do bloco de texto (do nome ao microcopy),
     centralizada na linha, sem passar para cima nem para baixo. A hero nao muda de altura.
     --copy-h vem do script no fim do index.html. */
  .hero__photo{align-self:center;height:var(--copy-h,100%)}
  /* o braco apoiado (a mesa saiu no recorte) se dissolve, em vez de flutuar */
  .hero__photo img{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,rgba(0,0,0,.55) 76%,transparent 90%);
    mask-image:linear-gradient(to bottom,#000 0,#000 62%,rgba(0,0,0,.55) 76%,transparent 90%);
  }
}

/* ---------- 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}