/* Clínica Aurora (exemplo Folg). Tokens vêm do Folg Agency Design System (ds/tokens). */
:root{ --gutter:clamp(1.25rem,5vw,4rem); --ease:var(--ease-out); }
html{scroll-behavior:smooth;background:var(--onyx-900);scroll-padding-top:5rem}
body{overflow-x:hidden;background:var(--surface-page)}
.wrap{max-width:var(--max-content);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(4.5rem,10vw,7.5rem)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
::selection{background:var(--green-600);color:#fff}
h1,h2,h3{font-family:var(--font-display)}
.h-xl{font-size:clamp(2rem,4.8vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:var(--tracking-display);max-width:20ch;text-wrap:balance}
.h-display{font-size:clamp(2.6rem,7vw,5rem);font-weight:800;line-height:1.02;letter-spacing:var(--tracking-display);max-width:16ch;text-wrap:balance}
.overline{font:700 var(--text-overline)/1 var(--font-display);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--brand);margin-bottom:1.1rem}
.overline--w{color:var(--green-200)}
.lead{font-size:var(--text-body-lg);line-height:var(--leading-body);color:var(--text-secondary);max-width:52ch;margin-top:1.25rem}
.lead--w{color:rgba(255,255,255,.78)}

/* progresso + selo */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--green-400);transform:scaleX(0);transform-origin:0 50%}
.seal{position:relative;z-index:70;background:var(--onyx-1000);color:rgba(255,255,255,.86);text-align:center;font:500 .8125rem/1.3 var(--font-body);padding:.55rem 1rem;letter-spacing:.02em}

/* header */
.top{position:fixed;left:0;right:0;top:var(--seal-h,0px);z-index:60;padding-block:1rem;border-bottom:1px solid transparent;transition:background var(--duration-slow) var(--ease),padding var(--duration-slow) var(--ease),border-color var(--duration-slow),top var(--duration-slow)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.top.scrolled{top:0;padding-block:.6rem;background:rgba(14,14,14,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(255,255,255,.08)}
.top.light{background:rgba(255,255,255,.78);border-color:var(--border-subtle)}
.top.light .brand,.top.light .nav a{color:var(--text-primary)}
.brand{display:inline-flex;align-items:baseline;gap:.5rem;color:#fff;text-decoration:none;font-family:var(--font-display)}
.brand b{font-size:1.6rem;font-weight:800;letter-spacing:-.04em}
.brand small{font:600 .65rem/1 var(--font-display);letter-spacing:.22em;text-transform:uppercase;opacity:.7;align-self:center}
.brand__dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--green-400);align-self:center;box-shadow:0 0 0 4px rgba(63,185,166,.25)}
.brand:hover{opacity:1}
.nav{display:none;gap:1.75rem}
.nav a{color:rgba(255,255,255,.85);font:500 .95rem/1 var(--font-body)}

/* botões (pílula, DS) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:var(--radius-pill);padding:.95rem 1.7rem;font:600 .98rem/1 var(--font-display);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--duration-base) var(--ease-standard),transform var(--duration-fast),box-shadow var(--duration-base)}
.btn:hover{opacity:1}
.btn:active{transform:scale(.98)}
.btn-brand{background:var(--green-600);color:#fff;box-shadow:var(--shadow-brand-glow)}
.btn-brand:hover{background:var(--green-700)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-lg{padding:1.2rem 2.1rem;font-size:1.05rem}
.btn-sm{padding:.7rem 1.2rem;font-size:.88rem}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--green-400);opacity:0;animation:pulse 2.8s var(--ease) infinite;pointer-events:none}
.pulse::after{animation-delay:1.4s}
@keyframes pulse{0%{inset:0;opacity:.55}100%{inset:-14px;opacity:0}}
.row-act{display:inline-block;margin-top:1.2rem;font:600 .95rem/1 var(--font-display);color:var(--brand)}
.row-act--w{color:#fff}

/* marcadores numerados na lateral (DS) */
.marks{display:none;position:fixed;left:1.4rem;top:50%;transform:translateY(-50%);z-index:40;flex-direction:column;gap:.9rem}
.marks a{font:700 .78rem/1 var(--font-display);letter-spacing:.14em;color:rgba(14,14,14,.32);transition:color var(--duration-base),transform var(--duration-base)}
.marks.on-dark a{color:rgba(255,255,255,.38)}
.marks a.act{color:var(--brand);transform:translateX(4px)}
.marks.on-dark a.act{color:var(--green-300)}
@media (min-width:88rem){.marks{display:flex}}

/* HERO: texto no fundo escuro, foto em painel arredondado (DS: dark hero) */
.hero{background:var(--onyx-900);padding-block:calc(var(--seal-h,0px) + 6.4rem) 4.5rem;overflow:hidden}
.hero__grid{display:grid;gap:2.4rem;align-items:center}
.hero__body{max-width:36rem}
.hero .overline{color:var(--green-300)}
.hero h1{color:#fff;font-size:clamp(2.9rem,7.2vw,5.4rem);font-weight:800;line-height:1.02;letter-spacing:var(--tracking-display)}
.hero .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero .line>span{display:block}
.hero__sub{margin-top:1.5rem;color:rgba(255,255,255,.78);font-size:clamp(1rem,2vw,1.15rem);max-width:44ch;line-height:1.7}
.hero__cta{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.9rem}
.hero__visual{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-2xl);aspect-ratio:4/5;background:var(--onyx-800)}
.hero__photo{position:absolute;inset:-7% 0;z-index:-2;will-change:transform}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:38% 50%;transform:scale(1.07);animation:kb 24s var(--ease) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero__motif{position:absolute;right:-10%;top:-2%;width:86%;opacity:.85;z-index:-1;pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path 2.2s var(--ease) .7s}
.js .hero.go .hero__motif{clip-path:inset(0 0 0 0)}
.hero__float{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:1.1rem 1.3rem;box-shadow:var(--shadow-lifted)}
.hero__float p{margin-top:.7rem;font-size:.92rem;line-height:1.55;color:var(--text-secondary)}
.chip-ok{display:inline-flex;background:var(--green-100);color:var(--green-700);font:600 .8rem/1 var(--font-display);padding:.5rem .8rem;border-radius:var(--radius-pill)}
.js .hero .line>span{transform:translateY(110%);transition:transform 1.2s var(--ease);transition-delay:calc(var(--i,0)*120ms + 250ms)}
.js .hero.go .line>span{transform:none}
.js .hero__sub,.js .hero__cta,.js .hero__visual,.js .hero__float{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:850ms}
.js .hero__cta{transition-delay:1000ms}.js .hero__visual{transition-delay:400ms}.js .hero__float{transition-delay:1500ms}
.js .hero.go .hero__sub,.js .hero.go .hero__cta,.js .hero.go .hero__visual,.js .hero.go .hero__float{opacity:1;transform:none}
@media (min-width:56rem){
  .hero__grid{grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem)}
  .hero__visual{aspect-ratio:auto;min-height:min(72svh,680px)}
  .hero__float{left:auto;right:1.4rem;bottom:1.4rem;width:19rem}
}

/* faixa (marquee) */
.band{background:var(--green-600);color:#fff;overflow:hidden;padding-block:1.1rem}
.band__track{display:flex;width:max-content;animation:marq 46s linear infinite}
.band:hover .band__track{animation-play-state:paused}
.band__group{display:flex;align-items:center;flex:none}
.band__group span{font:700 clamp(1.1rem,2.4vw,1.6rem)/1 var(--font-display);letter-spacing:-.01em;padding-inline:1.6rem;white-space:nowrap}
.band__group i{width:.55rem;height:.55rem;border-radius:50%;background:var(--green-200);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* cabeçalhos de seção */
.head{margin-bottom:clamp(2.4rem,5vw,4rem)}
.head--row{display:grid;gap:1.4rem}
.head--w .h-xl{color:#fff}

/* tratamentos */
.grid-t{display:grid;gap:1rem}
.card{position:relative;isolation:isolate;overflow:hidden;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:box-shadow var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease)}
.card:hover{box-shadow:var(--shadow-lifted);transform:translateY(-2px)}
.card h3{font-size:clamp(1.4rem,2.4vw,1.75rem);font-weight:700;letter-spacing:var(--tracking-heading)}
.card p{margin-top:.7rem;color:var(--text-secondary);font-size:1rem;line-height:1.65}
.card--photo{display:flex;flex-direction:column}
.card__img{position:relative;aspect-ratio:4/5;background:var(--green-100);overflow:hidden}
.card__img--wide{aspect-ratio:16/10}
.card__img img,.about__img img,.person__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .card__img img,.person:hover .person__img img{transform:scale(1.04)}
.card__txt{padding:1.5rem 1.6rem 1.7rem}
.card--green{background:var(--green-600);padding:clamp(1.6rem,3vw,2.2rem);min-height:17rem;display:flex;flex-direction:column;justify-content:flex-end}
.card--green h3,.card--green p{color:#fff}.card--green p{color:rgba(255,255,255,.82)}
.card--white{padding:clamp(1.6rem,3vw,2.2rem);min-height:17rem;display:flex;flex-direction:column;justify-content:flex-end}
.tile-doodle{position:absolute;top:1.3rem;left:1.3rem;width:5.2rem;height:5.2rem;object-fit:contain;padding:.9rem;background:rgba(255,255,255,.12);border-radius:var(--radius-md);z-index:-1}
.tile-doodle--g{background:var(--green-100)}
@media (min-width:56rem){
  .grid-t{grid-template-columns:repeat(12,1fr)}
  .card--photo:not(.card--wide){grid-column:span 5;grid-row:span 2}
  .card--green{grid-column:span 7}
  .card--white{grid-column:span 7}
  .card--wide{grid-column:span 12;flex-direction:row;align-items:stretch}
  .card--wide .card__img{width:44%;aspect-ratio:auto;min-height:18rem}
  .card--wide .card__txt{align-self:center;padding:2rem 2.6rem}
  .head--row{grid-template-columns:1fr 1fr;align-items:end}
}

/* clínica */
.panel-muted{background:var(--surface-muted)}
.about{display:grid;gap:3rem;align-items:center}
.about__photo{position:relative}
.about__img{position:relative;aspect-ratio:3/2;border-radius:var(--radius-2xl);overflow:hidden;background:var(--green-100);box-shadow:var(--shadow-card)}
.about__img img{will-change:transform}
.motif{position:absolute;right:-8%;bottom:-16%;width:80%;pointer-events:none;overflow:visible}
.motif path{fill:none;stroke:var(--green-600);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.9;stroke-dasharray:1800;stroke-dashoffset:0;transition:stroke-dashoffset var(--duration-motif) var(--ease-standard)}
.js .about__photo:not(.in) .motif path{stroke-dashoffset:1800}
.ticks{margin-top:1.8rem;display:grid;gap:.9rem}
.ticks li{display:flex;gap:.8rem;align-items:flex-start;font-weight:500}
.ticks svg{flex:none;width:22px;height:22px;margin-top:.15rem;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:56rem){.about{grid-template-columns:6fr 5fr;gap:clamp(3rem,7vw,6rem)}}

/* equipe */
.team{display:grid;gap:1rem}
.person{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease)}
.person:hover{box-shadow:var(--shadow-lifted);transform:translateY(-2px)}
.person__img{position:relative;aspect-ratio:4/5;background:var(--green-100);overflow:hidden}
.person h3{font-size:1.4rem;font-weight:700;padding:1.3rem 1.5rem 0}
.person p{padding:.2rem 1.5rem 1.5rem;color:var(--brand);font-weight:600}
@media (min-width:48rem){.team{grid-template-columns:repeat(3,1fr)}.person:nth-child(2){margin-top:2.4rem}}

/* depoimentos (fundo verde chapado) */
.panel-green{position:relative;background:var(--green-600);overflow:hidden;isolation:isolate}
.green__doodles{position:absolute;right:-6%;top:-8%;width:min(56%,720px);opacity:.14;z-index:-1;pointer-events:none}
.quotes{display:grid;gap:1rem}
.quote{margin:0;background:#fff;border-radius:var(--radius-lg);padding:1.8rem 1.8rem 1.6rem;box-shadow:var(--shadow-lifted);display:flex;flex-direction:column;gap:1.4rem;transition:transform var(--duration-slow) var(--ease)}
.quote:hover{transform:translateY(-2px)}
.quote__tag{align-self:flex-start;background:var(--green-100);color:var(--green-700);font:700 .68rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;padding:.45rem .7rem;border-radius:var(--radius-pill)}
.quote blockquote{margin:0;font:600 1.15rem/1.55 var(--font-display);letter-spacing:-.01em;color:var(--text-primary)}
.quote figcaption{display:flex;align-items:center;gap:.9rem;margin-top:auto}
.quote .av{position:relative;width:3.4rem;height:3.4rem;border-radius:50%;overflow:hidden;background:var(--green-100);flex:none}
.quote .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quote b{display:block;font:700 1rem/1.2 var(--font-display)}
.quote small{color:var(--text-secondary);font-size:.85rem}
.fine{margin-top:1.6rem;color:rgba(255,255,255,.72);font-size:.85rem;max-width:none}
@media (min-width:56rem){.quotes{grid-template-columns:repeat(3,1fr)}}

/* como funciona */
.steps{display:grid;border-top:1px solid var(--border-subtle);counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:1rem 2rem;align-items:start;padding-block:1.8rem;border-bottom:1px solid var(--border-subtle);transition:padding-left var(--duration-slow) var(--ease)}
.steps li:hover{padding-left:.8rem}
.steps b{font:800 clamp(2.4rem,6vw,3.6rem)/1 var(--font-display);color:var(--green-600);letter-spacing:-.04em;min-width:2.4ch}
.steps h3{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:700}
.steps p{color:var(--text-secondary);margin-top:.4rem;max-width:52ch}
.faq{margin-top:clamp(2.6rem,6vw,4rem);display:grid;gap:.8rem;max-width:52rem}
.faq details{background:var(--surface-muted);border-radius:var(--radius-md);padding:1.1rem 1.4rem}
.faq summary{cursor:pointer;font:600 1.05rem/1.4 var(--font-display);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:700;color:var(--brand);font-size:1.4rem;line-height:1;transition:transform var(--duration-base)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.8rem;color:var(--text-secondary)}

/* CTA final */
.cta{position:relative;background:var(--onyx-900);color:#fff;overflow:hidden;isolation:isolate;padding-block:clamp(5rem,12vw,9rem)}
.cta__motif{position:absolute;right:-8%;top:50%;width:min(70%,900px);transform:translateY(-50%);opacity:.16;z-index:-1;pointer-events:none}
.cta h2{color:#fff}
.cta__btns{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem}
.cta address{margin-top:2.4rem;font-style:normal;color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.7}

/* rodapé */
footer{background:var(--onyx-1000);color:rgba(255,255,255,.7);padding-block:2.6rem 6.5rem;font-size:.85rem}
.foot{display:grid;gap:1.6rem}
.foot p{max-width:60ch;margin-top:.8rem;color:rgba(255,255,255,.6)}
.foot__credit{display:inline-flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.7);align-self:end}
.foot__credit img{height:1.7rem;width:auto}
@media (min-width:48rem){.foot{grid-template-columns:1fr auto;align-items:end}footer{padding-bottom:2.6rem}}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-subtle);transform:translateY(110%);transition:transform .6s var(--ease)}
.sticky.on{transform:none}.sticky .btn{width:100%}

/* reveal (DS: fade + 16px) */
.js [data-r]{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js [data-r].in{opacity:1;transform:none}
.js [data-r="left"]{transform:translateX(-16px)}
.js [data-r="left"].in{transform:none}

@media (min-width:64rem){.nav{display:flex}}
@media (min-width:48rem){.sticky{display:none}}
@media (max-width:47.99rem){.brand small{display:none}.hero__cta .btn{width:100%}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .js [data-r],.js .hero .line>span,.js .hero__sub,.js .hero__cta,.js .hero__float{opacity:1!important;transform:none!important}
  .hero__motif{clip-path:none!important}.js .about__photo:not(.in) .motif path{stroke-dashoffset:0}
}
.tile-doodle--g{background:var(--green-600)}