*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #332D56;
  --ink-2: #4E6688;
  --mint: #71C0BB;
  --mint-hover: #58B5AF;
  --glow: #E3EEB2;
  --paper: #FFFFFF;
  --veil: #F5F7FA;
  --text: #332D56;
  --text-2: #4E6688;
  --line: rgba(78, 102, 136, .22);
  --line-dark: rgba(255, 255, 255, .18);
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: min(1180px, calc(100% - 48px));
  --section: clamp(88px, 10vw, 144px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font: 400 clamp(1.0625rem, 1.03rem + .12vw, 1.125rem)/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.45rem + 2vw, 3.6rem); line-height: 1.16; letter-spacing: -.025em; }
h3 { font-size: clamp(1.12rem, 1rem + .45vw, 1.42rem); line-height: 1.35; }
p { text-wrap: pretty; }
.shell { width: var(--shell); margin-inline: auto; }
.section-space { padding-block: var(--section); }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 12px 18px; background: var(--mint); color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  color: var(--paper); border-bottom: 1px solid var(--line-dark);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.site-header.is-scrolled { background: rgba(51, 45, 86, .96); }
@supports (backdrop-filter: blur(10px)) { .site-header.is-scrolled { backdrop-filter: blur(14px); background: rgba(51, 45, 86, .88); } }
.site-header__inner { height: 88px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 40px; }
.brand img { width: 180px; height: auto; }
.desktop-nav { justify-self: center; display: flex; align-items: center; gap: clamp(22px, 2.5vw, 42px); }
.desktop-nav a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .08em; transition: color 160ms ease; }
.desktop-nav a:hover { color: var(--paper); }
.header-cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid rgba(255,255,255,.42); border-radius: 8px; color: var(--paper); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.header-cta:hover { border-color: var(--mint); background: rgba(113,192,187,.1); }
.menu-toggle, .mobile-nav { display: none; }

.hero { min-height: 860px; height: min(920px, 100svh); position: relative; overflow: hidden; color: var(--paper); background: var(--ink); }
.hero__inner { height: 100%; position: relative; }
.hero__copy { position: relative; z-index: 4; width: min(470px, 42%); padding-top: clamp(145px, 18vh, 180px); }
.hero__specialties { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; color: var(--glow); font-size: .67rem; line-height: 1.5; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero__specialties span { color: rgba(227,238,178,.7); font-size: .76em; line-height: 1; }
.hero h1 { max-width: 10ch; font-size: clamp(3.3rem, 5.1vw, 5.2rem); line-height: 1.04; font-weight: 400; letter-spacing: -.045em; }
.hero h1 em { color: var(--glow); font-weight: 400; }
.hero__lead { max-width: none; margin-top: 26px; color: #D9DCE8; font-size: clamp(.94rem, .9rem + .18vw, 1.06rem); line-height: 1.72; }
.hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 26px; border-radius: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.button--primary { color: var(--ink); background: var(--mint); }
.button--primary:hover { background: var(--mint-hover); }
.button--dark { color: var(--paper); background: var(--ink); }
.button--dark:hover { background: var(--ink-2); }
.text-link, .arrow-link { text-underline-offset: 5px; text-decoration-thickness: 1px; }
.text-link { color: rgba(255,255,255,.86); font-size: .85rem; }
.text-link span, .arrow-link span { display: inline-block; margin-left: 8px; color: var(--mint); }
.hero__portrait { position: absolute; z-index: 2; right: -48px; bottom: 88px; width: min(62vw, 790px); height: calc(100% - 120px); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.hero__portrait > img { position: absolute; z-index: 2; bottom: 0; left: 50%; width: auto; max-width: none; height: clamp(620px, 86vh, 790px); transform: translateX(-50%); object-fit: contain; object-position: bottom; filter: drop-shadow(0 24px 30px rgba(18,14,42,.25)); }
.hero-art > img { height: clamp(620px, 80vh, 700px); }
.hero-art__base { opacity: 1; }
.hero-art__signature { z-index: 3; opacity: 1; clip-path: inset(0 100% 0 0); filter: none; }
.hero-art.is-writing .hero-art__signature { animation: signature-write 3.2s .35s cubic-bezier(.42,0,.18,1) forwards; }
@keyframes signature-write {
  0% { clip-path: inset(0 100% 0 0); }
  22% { clip-path: inset(0 76% 0 0); }
  48% { clip-path: inset(0 48% 0 0); }
  68% { clip-path: inset(0 31% 0 0); }
  100% { clip-path: inset(0); }
}
.hero__bottom { position: absolute; z-index: 6; inset: auto 0 0; border-top: 1px solid var(--line-dark); background: rgba(51,45,86,.72); }
.hero__bottom-inner { min-height: 64px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding-block: 12px; color: rgba(255,255,255,.68); font-size: .72rem; letter-spacing: .05em; }
.hero__bottom-inner > p { justify-self: start; text-align: left; font-size: .84rem; letter-spacing: .06em; }
.hero__bottom-inner a { justify-self: end; }
.hero__bottom a { color: var(--paper); text-decoration: none; }
.hero__bottom a span { margin-left: 12px; color: var(--mint); }
.hero-enter { animation: hero-in 520ms var(--ease) both; }
.hero-enter[data-delay="1"] { animation-delay: 70ms; }
.hero-enter[data-delay="2"] { animation-delay: 140ms; }
.hero-enter[data-delay="3"] { animation-delay: 210ms; }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.section-kicker { margin-bottom: 22px; color: var(--ink-2); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker--light { color: var(--glow); }
.manifesto__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(48px, 8vw, 120px); align-items: start; }
.manifesto h2 { max-width: 16ch; }
.manifesto__body { padding-top: 46px; color: var(--text-2); }
.manifesto__body p + p { margin-top: 20px; }
.arrow-link { display: inline-block; margin-top: 32px; color: var(--ink); font-size: .82rem; font-weight: 600; }

.conditions { color: var(--paper); background: var(--ink-2); }
.section-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 80px; align-items: end; margin-bottom: 58px; }
.section-heading h2 { color: var(--paper); }
.section-heading > p { max-width: 46ch; color: #D9DCE8; }
.conditions .section-heading { grid-template-columns: .82fr 1.18fr; align-items: center; }
.conditions .section-heading h2 { font-size: clamp(2.15rem, 1.7rem + 1.35vw, 3.05rem); }
.conditions .section-heading > p { max-width: 58ch; justify-self: end; font-size: .94rem; line-height: 1.68; }
.conditions__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.conditions__list li { min-height: 92px; display: grid; grid-template-columns: 62px 1.1fr .9fr; gap: 30px; align-items: center; border-bottom: 1px solid var(--line-dark); transition: background-color 160ms ease, padding 160ms ease; }
.conditions__list li:hover { padding-inline: 18px; background: rgba(255,255,255,.035); }
.conditions__list span { color: var(--mint); font-size: .7rem; letter-spacing: .1em; }
.conditions__list strong { font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .55vw, 1.46rem); font-weight: 400; }
.conditions__list small { color: rgba(255,255,255,.58); font-size: .82rem; }
.conditions__extra { margin-top: 28px; color: rgba(255,255,255,.55); font-size: .78rem; }

.about { background: var(--veil); }
.about__grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(56px, 8vw, 112px); align-items: center; }
.about__image { margin: 0; }
.about__image-frame { position: relative; overflow: hidden; border-radius: 10px 10px 120px 10px; }
.about__image-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(51,45,86,.08); pointer-events: none; }
.about__image img { width: 100%; aspect-ratio: .81; object-fit: cover; object-position: center 26%; }
.about__image figcaption { max-width: 40ch; margin-top: 16px; color: var(--text-2); font-size: .75rem; line-height: 1.55; }
.about__content { max-width: 590px; }
.about__content h2 { margin-bottom: 28px; }
.about__content > p:not(.section-kicker) { color: var(--text-2); }
.about__content .about__intro { margin-bottom: 20px; color: var(--ink); font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); }
.credentials { margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credentials summary { min-height: 68px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.credentials summary::-webkit-details-marker { display: none; }
.credentials summary span { color: var(--mint-hover); font-size: 1.4rem; font-weight: 400; transition: transform 160ms ease; }
.credentials[open] summary span { transform: rotate(45deg); }
.credentials ul { margin: 0 0 28px; padding-left: 22px; color: var(--text-2); font-size: .9rem; }
.credentials li + li { margin-top: 10px; }

.treatment { color: var(--paper); background: var(--ink); }
.treatment__intro { display: grid; grid-template-columns: 1.15fr .7fr; gap: clamp(48px, 8vw, 120px); align-items: end; margin-bottom: 72px; }
.treatment__context { max-width: 62ch; margin-bottom: 28px; color: rgba(255,255,255,.7); font-size: clamp(.92rem, .88rem + .14vw, 1rem); line-height: 1.72; }
.treatment__intro h2 { max-width: 17ch; }
.treatment__intro > p { color: #D9DCE8; }
.treatment__body { display: grid; grid-template-columns: .94fr 1.06fr; gap: clamp(48px, 7vw, 96px); align-items: start; }
.treatment__stage { position: sticky; top: 112px; width: 100%; height: auto; aspect-ratio: 5 / 6; margin: 0; overflow: hidden; border-radius: 10px; background: #282342; }
.treatment__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transform: scale(1.015); transition: opacity 420ms var(--ease), transform 620ms var(--ease); }
.treatment__stage img.is-active { opacity: 1; transform: scale(1); }
.treatment__steps { list-style: none; margin: 0; padding: 0; }
.treatment__steps li { min-height: 66vh; display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-content: center; padding: 56px 0; border-top: 1px solid var(--line-dark); opacity: .4; transition: opacity 240ms ease; }
.treatment__steps li:last-child { border-bottom: 1px solid var(--line-dark); }
.treatment__steps li.is-active { opacity: 1; }
.treatment__step-image { display: none; }
.treatment__steps span { padding-top: 4px; color: var(--mint); font-size: .7rem; letter-spacing: .1em; }
.treatment__steps h3 { color: var(--paper); font-weight: 400; }
.treatment__steps p { max-width: 48ch; margin-top: 10px; color: rgba(255,255,255,.65); font-size: .9rem; }

.content-hub { background: var(--paper); }
.content-hub__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(60px, 9vw, 130px); }
.content-hub__heading h2 { max-width: 13ch; }
.content-hub__heading > p:not(.section-kicker) { max-width: 40ch; margin-top: 24px; color: var(--text-2); }
.content-hub__heading .button { margin-top: 34px; }
.content-index { border-top: 1px solid var(--line); }
.content-index a { min-height: 138px; display: grid; grid-template-columns: 120px 1fr 24px; gap: 26px; align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color 160ms ease, padding 160ms ease; }
.content-index a:hover { padding-inline: 16px; background: var(--veil); }
.content-index__type { color: var(--text-2); font-size: .69rem; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.content-index strong { font-family: var(--serif); font-size: clamp(1.05rem, .98rem + .42vw, 1.35rem); line-height: 1.45; font-weight: 400; }
.content-index a > span:last-child { color: var(--mint-hover); font-size: 1.15rem; }

.testimonials { overflow: hidden; color: var(--paper); background: var(--ink); }
.testimonials__heading { display: grid; grid-template-columns: 1.1fr .72fr; gap: clamp(52px, 9vw, 130px); align-items: end; margin-bottom: clamp(64px, 8vw, 112px); }
.testimonials__heading h2 { max-width: 14ch; color: var(--paper); }
.testimonials__heading > p { max-width: 48ch; color: rgba(255,255,255,.64); font-size: .9rem; }
.testimonials__viewport { border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.testimonial { min-height: 360px; display: grid; grid-template-columns: 72px 1fr 210px; gap: clamp(24px, 4vw, 62px); align-items: center; padding-block: clamp(58px, 7vw, 92px); animation: testimonial-in 320ms var(--ease) both; }
.testimonial[hidden] { display: none; }
.testimonial__number { align-self: start; padding-top: 11px; color: var(--mint); font-size: .68rem; letter-spacing: .12em; }
.testimonial blockquote { max-width: 30ch; margin: 0; color: var(--paper); font: 400 clamp(1.45rem, 1.05rem + 1.25vw, 2.35rem)/1.45 var(--serif); letter-spacing: -.025em; }
.testimonial > p { align-self: end; color: rgba(255,255,255,.58); font-size: .75rem; line-height: 1.55; }
.testimonial > p strong, .testimonial > p span { display: block; }
.testimonial > p strong { margin-bottom: 7px; color: var(--glow); font-size: .78rem; font-weight: 600; letter-spacing: .08em; }
.testimonials__controls { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 28px; }
.testimonials__controls button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; color: var(--paper); background: transparent; cursor: pointer; font: 400 1.1rem/1 var(--sans); transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.testimonials__controls button:hover { color: var(--ink); border-color: var(--mint); background: var(--mint); }
.testimonials__controls span { min-width: 58px; color: rgba(255,255,255,.6); font-size: .68rem; letter-spacing: .1em; text-align: center; }
@keyframes testimonial-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.faq { background: var(--veil); }
.faq__grid { display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(60px, 9vw, 130px); }
.faq__heading { position: sticky; top: 122px; align-self: start; }
.faq__heading h2 { max-width: 12ch; }
.faq__heading > p:last-child { max-width: 38ch; margin-top: 24px; color: var(--text-2); }
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(1rem, .96rem + .3vw, 1.22rem); line-height: 1.4; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary span { flex: none; color: var(--mint-hover); font: 400 1.4rem/1 var(--sans); transition: transform 160ms ease; }
.faq__list details[open] summary span { transform: rotate(45deg); }
.faq__list details p { max-width: 60ch; padding: 0 48px 28px 0; color: var(--text-2); font-size: .92rem; }

.appointment { position: relative; overflow: hidden; padding-block: clamp(100px, 12vw, 168px); color: var(--paper); background: var(--ink); }
.appointment__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .72fr; gap: clamp(60px, 10vw, 150px); align-items: start; }
.appointment h2 { max-width: 15ch; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 4.2rem); font-weight: 400; }
.appointment__details { padding-top: 42px; }
.appointment__details p { color: #D9DCE8; }
.appointment__details p + p { margin-top: 20px; }
.appointment__details .button { margin-top: 36px; }
.appointment__phone { display: block; width: max-content; margin-top: 18px; color: var(--paper); font-size: .85rem; text-underline-offset: 5px; }

.site-footer { padding-block: 72px 28px; color: rgba(255,255,255,.68); background: #282342; }
.site-footer__top { display: grid; grid-template-columns: 1.5fr .7fr 1fr; gap: 70px; }
.site-footer__brand img { width: 190px; }
.site-footer__brand p { max-width: 38ch; margin-top: 22px; font-size: .85rem; }
.site-footer h3 { margin-bottom: 18px; color: var(--glow); font: 600 .68rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.site-footer__top > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer a { margin-bottom: 11px; color: rgba(255,255,255,.72); font-size: .82rem; text-decoration: none; }
.site-footer a:hover { color: var(--paper); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .67rem; letter-spacing: .04em; }

.floating-whatsapp { position: fixed; z-index: 90; right: 22px; bottom: 22px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--glow); box-shadow: 0 8px 24px rgba(18,14,42,.22); transition: background-color 160ms ease; }
.floating-whatsapp:hover { background: #D7E690; }
.floating-whatsapp svg { width: 26px; }

@media (max-width: 1080px) {
  .site-header__inner { grid-template-columns: 190px 1fr auto; gap: 22px; }
  .desktop-nav { gap: 20px; }
  .hero__portrait { right: -120px; width: 64vw; }
}

@media (max-width: 880px) {
  :root { --shell: min(100% - 40px, 720px); }
  .desktop-nav, .header-cta { display: none; }
  .site-header__inner { height: 76px; grid-template-columns: 1fr auto; }
  .brand img { width: 160px; }
  .menu-toggle { width: 48px; height: 48px; display: grid; align-content: center; gap: 7px; padding: 0 13px; border: 1px solid rgba(255,255,255,.36); border-radius: 8px; color: inherit; background: transparent; cursor: pointer; }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav { position: fixed; inset: 76px 0 0; z-index: 99; padding: 28px 20px; background: var(--ink); }
  .mobile-nav:not([hidden]) { display: flex; flex-direction: column; }
  .mobile-nav a { min-height: 62px; display: flex; align-items: center; border-bottom: 1px solid var(--line-dark); color: var(--paper); text-decoration: none; font-family: var(--serif); font-size: 1.2rem; }

  .hero { min-height: 820px; height: min(860px, 100svh); max-height: none; }
  .hero__copy { width: 62%; padding-top: 130px; }
  .hero h1 { font-size: clamp(3rem, 8.2vw, 4.3rem); }
  .hero__portrait { right: -150px; width: 76vw; }
  .hero__portrait > img { height: min(58vh, 570px); }

  .manifesto__grid { grid-template-columns: 1fr; gap: 34px; }
  .manifesto__body { grid-column: auto; padding-top: 0; }
  .section-heading, .treatment__intro { grid-template-columns: 1fr; gap: 26px; }
  .conditions .section-heading { grid-template-columns: 1fr; align-items: start; }
  .conditions .section-heading > p { justify-self: start; }
  .conditions__list li { grid-template-columns: 46px 1fr; gap: 18px; padding-block: 22px; }
  .conditions__list small { grid-column: 2; margin-top: -16px; }
  .about__grid, .treatment__body, .content-hub__grid, .faq__grid, .appointment__grid { grid-template-columns: 1fr; }
  .about__image { max-width: 620px; }
  .about__content { max-width: 650px; }
  .treatment__stage { display: none; }
  .treatment__steps li { min-height: 0; grid-template-columns: 46px 1fr; padding: 42px 0; opacity: 1; }
  .treatment__step-image { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 5 / 6; margin-bottom: 18px; border-radius: 8px; object-fit: cover; object-position: center top; }
  .faq__heading { position: static; }
  .content-hub__grid, .faq__grid { gap: 58px; }
  .content-hub__heading h2, .faq__heading h2 { max-width: 16ch; }
  .testimonials__heading { grid-template-columns: 1fr; gap: 26px; }
  .testimonial { grid-template-columns: 48px 1fr; }
  .testimonial > p { grid-column: 2; align-self: auto; }
  .appointment__details { padding-top: 0; }
}

@media (min-width: 621px) and (max-width: 880px) {
  .hero { min-height: 1300px; height: auto; }
  .hero__inner { height: 1300px; }
  .hero__copy { width: 100%; max-width: 650px; padding-top: 118px; }
  .hero__specialties { flex-wrap: nowrap; gap: 6px; font-size: .58rem; letter-spacing: .05em; white-space: nowrap; }
  .hero h1 { max-width: 9ch; font-size: clamp(3.7rem, 8.5vw, 4.6rem); }
  .hero__lead { max-width: 62ch; margin-top: 20px; font-size: .95rem; line-height: 1.62; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero__portrait { right: 50%; bottom: 64px; width: min(86vw, 660px); height: 560px; transform: translateX(50%); }
  .hero__portrait > img { height: min(72vw, 560px); }
  .floating-whatsapp { bottom: 82px; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100% - 32px); --section: 82px; }
  .hero { min-height: 1220px; height: auto; max-height: none; }
  .hero__inner { height: 1220px; }
  .hero__copy { width: 100%; padding-top: 118px; }
  .hero__specialties { max-width: none; flex-wrap: nowrap; gap: 3px; margin-bottom: 18px; font-size: clamp(.62rem, 2.75vw, .8rem); letter-spacing: .018em; white-space: nowrap; }
  .hero__specialties span { font-size: .8em; opacity: .8; }
  .hero h1 { max-width: 9ch; font-size: clamp(2.8rem, 13vw, 4rem); }
  .hero__lead { max-width: none; margin-top: 16px; font-size: .95rem; line-height: 1.64; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 24px; }
  .hero__actions .button { min-height: 50px; }
  .hero__portrait { right: -28px; bottom: 105px; width: 112vw; height: 440px; }
  .hero__portrait > img { height: 440px; }
  .hero__bottom-inner { min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: .61rem; }
  /* o CRM e o RQE sao exigidos pela Resolucao CFM 2.336/2023: nao podem sumir */
  .hero__bottom-inner > p { color: var(--glow); font-size: clamp(.58rem, 2.2vw, .72rem); letter-spacing: .025em; white-space: nowrap; }
  .hero__bottom-inner > a { font-size: clamp(.56rem, 2.1vw, .68rem); white-space: nowrap; }
  .hero__bottom a span { margin-left: 5px; }

  .manifesto__grid { grid-template-columns: 1fr; gap: 20px; }
  .manifesto__body { grid-column: auto; margin-top: 10px; }
  .section-heading { margin-bottom: 40px; }
  .conditions__list li { min-height: 0; }
  .conditions__list li:hover { padding-inline: 0; }
  .conditions__list strong { font-size: 1.03rem; }
  .conditions__list small { font-size: .75rem; line-height: 1.5; }

  .about__grid { gap: 50px; }
  .about__image-frame { border-radius: 8px 8px 70px 8px; }
  .treatment__intro { margin-bottom: 48px; }
  .treatment__body { gap: 44px; }
  .treatment__steps li { grid-template-columns: 40px 1fr; padding-block: 24px; }
  .treatment__step-image { margin-bottom: 14px; }
  .testimonials__heading { margin-bottom: 52px; }
  .testimonial { min-height: 0; grid-template-columns: 34px 1fr; gap: 20px 12px; padding-block: 44px; }
  .testimonial blockquote { font-size: 1.28rem; line-height: 1.52; }
  .testimonial > p { grid-column: 2; }
  .testimonials__controls { justify-content: space-between; }

  .content-index a { min-height: 124px; grid-template-columns: 1fr 20px; gap: 8px 18px; padding-block: 18px; }
  .content-index a:hover { padding-inline: 0; }
  .content-index__type { grid-column: 1; }
  .content-index strong { grid-column: 1; }
  .content-index a > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .faq__list summary { min-height: 78px; font-size: 1rem; }
  .faq__list details p { padding-right: 0; }

  .appointment { padding-block: 90px; }
  .appointment h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .site-footer__top { grid-template-columns: 1fr; gap: 38px; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; margin-top: 44px; }
  .floating-whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

@media (max-width: 420px) {
  .hero__bottom-inner { gap: 6px; }
  .hero__bottom-inner > p { font-size: .55rem; letter-spacing: 0; }
  .hero__bottom-inner > a { font-size: .55rem; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-art__signature { clip-path: inset(0); }
}

/* ==========================================================================
   Header: fundo garantido
   Em y=0 o header e transparente por design (sobre o hero escuro). Com o
   menu aberto isso deixava a faixa de 76px vazada. E a translucidez de .88
   com backdrop-filter falha em alguns navegadores mobile, o que explica
   "perder a cor de fundo ao longo do site".
   ========================================================================== */

/* com o menu aberto o header e sempre opaco, em qualquer posicao */
body.menu-open .site-header,
body.menu-open .site-header.is-scrolled {
  background-color: #332D56 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent;
}

/* rolado: praticamente opaco, para nao depender do backdrop-filter */
.site-header.is-scrolled { background: rgba(51, 45, 86, .97); }
@supports (backdrop-filter: blur(10px)) {
  .site-header.is-scrolled { backdrop-filter: blur(14px); background: rgba(51, 45, 86, .94); }
}

/* CTA de secao: mesmo botao repetido ao longo da pagina.
   Largura natural do botao, centralizado. Nunca esticado. */
.section-cta { display: flex; justify-content: center; margin-top: 44px; }
.section-cta .button { width: auto; }

/* ==========================================================================
   Dores que trato: entrada por scroll
   No desktop o efeito e :hover, que nao existe em toque. A traducao para
   mobile e a entrada item a item conforme a lista aparece.
   ========================================================================== */

.conditions__list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              background-color 160ms ease, padding 160ms ease;
}
.conditions__list li.is-in { opacity: 1; transform: none; }

/* se o JS nao rodar, o conteudo aparece do mesmo jeito */
.no-js .conditions__list li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .conditions__list li { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   Páginas de documento legal
   ========================================================================== */

.page-legal { background: var(--paper); }
.legal-hero { padding: 152px 0 56px; background: var(--ink); color: var(--paper); }
.legal-hero__eyebrow { color: var(--glow); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; }
.legal-hero h1 { max-width: 20ch; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 400; line-height: 1.14; }
.legal-hero__lead { max-width: 56ch; margin-top: 20px; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.7; }

.legal__body { max-width: 74ch; color: var(--text-2); }
.legal__body h2 { margin: 56px 0 18px; color: var(--ink); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); font-weight: 400; line-height: 1.25; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { margin: 34px 0 12px; color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.legal__body h4 { margin: 26px 0 10px; color: var(--ink); font-family: var(--sans); font-size: .94rem; font-weight: 600; }
.legal__body p { margin-bottom: 14px; font-size: .97rem; line-height: 1.8; }
.legal__body a { color: var(--ink); text-underline-offset: 3px; }
.legal__body a:hover { color: var(--mint-hover); }

@media (max-width: 620px) {
  .legal-hero { padding: 120px 0 44px; }
  .legal__body p { font-size: .95rem; }
}

/* link da LGPD como botão de linha */
.legal__lei {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; margin-top: 8px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-family: var(--sans); font-size: .82rem;
  font-weight: 600; letter-spacing: .04em; text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.legal__lei:hover { background: var(--veil); border-color: var(--ink); color: var(--ink); }

/* ========================================================================== 
   Página Sobre
   ========================================================================== */

.page-sobre { background: var(--paper); }
.page-sobre .site-header { background: rgba(51,45,86,.96); }
@supports (backdrop-filter: blur(10px)) {
  .page-sobre .site-header { background: rgba(51,45,86,.92); backdrop-filter: blur(14px); }
}

/* Convite inicial: claro, acolhedor e diretamente ligado à fotografia. */
.sobre-hero { padding: 120px 0 54px; background: var(--veil); }
.sobre-hero__grid {
  min-height: min(720px, calc(100dvh - 120px));
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(380px, .82fr);
  gap: clamp(52px, 8vw, 112px); align-items: center;
}
.sobre-hero__copy { padding-block: 36px; }
.sobre-hero .section-kicker { margin-bottom: 18px; color: var(--mint-hover); }
.sobre-hero h1 {
  max-width: 13ch; color: var(--ink); font-weight: 400;
  font-size: clamp(2.2rem, 1.55rem + 2.45vw, 3.65rem); line-height: 1.1; letter-spacing: -.035em;
}
.sobre-hero__lead { max-width: 47ch; margin-top: 28px; color: var(--text-2); font-size: clamp(.98rem, .94rem + .15vw, 1.07rem); line-height: 1.78; }
.sobre-hero__link {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; padding-block: 6px;
  color: var(--ink); font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-decoration: underline; text-decoration-color: rgba(51,45,86,.35); text-underline-offset: 6px;
}
.sobre-hero__link span { color: var(--mint-hover); transition: transform 180ms var(--ease); }
.sobre-hero__link:hover span { transform: translateY(3px); }
.sobre-hero__foto { width: min(100%, 500px); justify-self: end; margin: 0; overflow: hidden; border-radius: 10px 10px 112px 10px; }
.sobre-hero__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 34%; }

/* A história ganha uma abertura ampla, sem caixas ou ornamentos. */
.origem { scroll-margin-top: 88px; }
.origem__inner { max-width: 1040px; }
.origem__cabecalho { max-width: 800px; margin-bottom: clamp(54px, 7vw, 92px); }
.origem__cabecalho h2 { max-width: 17ch; font-size: clamp(2.2rem, 1.45rem + 2.6vw, 4rem); }
.origem__cabecalho h2 em { color: var(--mint-hover); font-weight: 400; line-height: 1.14; }
.origem__apresentacao { max-width: 54ch; margin-top: 26px; color: var(--text-2); }
.origem__texto { width: min(100%, 680px); margin-left: clamp(0px, 12vw, 150px); }
.origem__abre { margin-bottom: 30px; color: var(--ink); font: 400 clamp(1.3rem, 1.12rem + .72vw, 1.8rem)/1.48 var(--serif); }
.origem__abre strong { color: var(--mint-hover); font-weight: 400; font-style: italic; }
.origem__texto p { margin-bottom: 20px; color: var(--text-2); line-height: 1.84; }
.origem__citacao {
  width: min(100%, 780px); margin: clamp(52px, 7vw, 88px) 0 0 auto; padding: 34px 0 0;
  border-top: 1px solid var(--line); color: var(--ink);
  font: italic 400 clamp(1.2rem, 1rem + .78vw, 1.72rem)/1.62 var(--serif);
}

/* A escuta faz a transição da história pessoal para a prática clínica. */
.escuta { background: var(--veil); }
.escuta__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(56px, 9vw, 130px); align-items: end; }
.escuta__grid > div { max-width: 720px; }
.escuta__frase { color: var(--ink); font: 400 clamp(1.75rem, 1.25rem + 1.72vw, 3rem)/1.38 var(--serif); letter-spacing: -.025em; }
.escuta__frase em { color: var(--mint-hover); font-weight: 400; line-height: 1.14; }
.escuta__nota { padding-bottom: 8px; color: var(--text-2); font-size: .95rem; line-height: 1.8; }

/* Formação: a fotografia ancora o percurso enquanto os marcos avançam. */
.formacao { background: var(--paper); }
.formacao__grid { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(0, 1fr); gap: clamp(48px, 5vw, 72px); align-items: start; }
.formacao__foto {
  position: sticky; top: 100px; width: min(100%, 550px); margin: 0; overflow: hidden;
  border-radius: 112px 10px 10px 10px;
}
.formacao__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.formacao__topo { max-width: none; margin-bottom: 28px; padding-top: 18px; }
.formacao__topo h2 { max-width: 24ch; color: var(--ink); font-size: clamp(2rem, 1.55rem + 1.25vw, 2.7rem); line-height: 1.2; }
.formacao__linha { list-style: none; margin: 0; padding: 0; }
.formacao__linha li {
  min-height: max(260px, 36vh); display: grid; grid-template-columns: 48px 1fr; gap: 22px; align-content: center;
  padding: 34px 0; opacity: .34; transform: scale(.975); transform-origin: left center;
  transition: opacity 300ms var(--ease), transform 420ms var(--ease);
}
.formacao__linha li + li { border-top: 1px solid var(--line); }
.formacao__linha li.is-active { opacity: 1; transform: none; }
.formacao__num { padding-top: 7px; color: var(--mint-hover); font-size: .7rem; font-weight: 600; letter-spacing: .1em; }
.formacao__linha strong { display: block; color: var(--ink); font: 400 clamp(1.3rem, 1.12rem + .65vw, 1.75rem)/1.35 var(--serif); }
.formacao__linha small { display: block; max-width: 40ch; margin-top: 10px; color: var(--text-2); font-size: .9rem; line-height: 1.65; }

/* Abordagem: um bloco denso, mas organizado por princípios. */
.abordagem { background: var(--ink-2); color: var(--paper); }
.abordagem__grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(64px, 9vw, 126px); align-items: start; }
.abordagem .section-kicker { color: var(--glow); }
.abordagem h2 { max-width: 13ch; color: var(--paper); font-size: clamp(2rem, 1.5rem + 1.65vw, 3.15rem); }
.abordagem__intro > p:not(.section-kicker) { max-width: 43ch; margin-top: 26px; color: rgba(255,255,255,.72); font-size: .97rem; line-height: 1.82; }
.abordagem__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 42px; margin: 0; padding: 0; list-style: none; }
.abordagem__lista li { min-height: 154px; padding: 25px 0; border-top: 1px solid var(--line-dark); }
.abordagem__lista strong { display: block; color: var(--paper); font: 400 1.08rem/1.4 var(--serif); }
.abordagem__lista span { display: block; margin-top: 7px; color: rgba(255,255,255,.62); font-size: .86rem; line-height: 1.62; }

/* O projeto editorial funciona como uma passagem breve. */
.frescura { padding-block: clamp(72px, 8vw, 110px); background: var(--veil); }
.frescura__inner { display: block; text-align: center; }
.frescura h2 { color: var(--ink); font-size: clamp(2rem, 1.55rem + 1.4vw, 3rem); }
.frescura__copy { max-width: 54ch; margin: 26px auto 0; }
.frescura__copy p { margin-bottom: 28px; color: var(--text-2); line-height: 1.8; }

/* Fechamento tipográfico unido ao rodapé. */
.sobre-fecho { padding-block: clamp(86px, 10vw, 144px); background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--line-dark); }
.sobre-fecho__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(56px, 9vw, 128px); align-items: end; }
.sobre-fecho__inner > p { max-width: 18ch; color: var(--paper); font: 400 clamp(2rem, 1.35rem + 2.25vw, 3.8rem)/1.26 var(--serif); letter-spacing: -.03em; }
.sobre-fecho__acao { max-width: 43ch; }
.sobre-fecho__acao span { display: block; margin-bottom: 30px; color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.76; }

@media (max-width: 899px) {
  .sobre-hero { padding: 120px 0 72px; }
  .sobre-hero__grid { min-height: auto; grid-template-columns: 1fr; gap: 44px; }
  .sobre-hero__copy { padding-block: 26px 0; }
  .sobre-hero h1 { max-width: 15ch; }
  .sobre-hero__foto { width: min(100%, 600px); justify-self: start; }

  .escuta__grid, .abordagem__grid, .frescura__inner, .sobre-fecho__inner { grid-template-columns: 1fr; }
  .escuta__nota { max-width: 52ch; }

  .formacao__grid { grid-template-columns: 1fr; gap: 54px; }
  .formacao__foto { position: static; top: auto; width: min(100%, 600px); }
  .formacao__topo { margin-bottom: 46px; padding-top: 0; }
  .formacao__linha li { min-height: 0; padding: 30px 0; opacity: 1; transform: none; }
  .abordagem__lista { margin-top: 10px; }
  .frescura__copy { max-width: 58ch; }
}

@media (min-width: 900px) and (max-height: 700px) {
  .formacao__foto { width: min(100%, 455px); }
}

@media (max-width: 620px) {
  .sobre-hero { padding: 106px 0 56px; }
  .sobre-hero__grid { gap: 34px; }
  .sobre-hero h1 { font-size: clamp(2rem, 9.6vw, 2.75rem); }
  .sobre-hero__lead { margin-top: 22px; }
  .sobre-hero__link { margin-top: 24px; }
  .sobre-hero__foto { border-radius: 8px 8px 74px 8px; }
  .formacao__foto { border-radius: 74px 8px 8px 8px; }

  .origem__cabecalho { margin-bottom: 46px; }
  .origem__texto { margin-left: 0; }
  .origem__citacao { margin-top: 48px; padding-top: 26px; }

  .escuta__grid { gap: 34px; }
  .formacao__grid { gap: 42px; }
  .formacao__linha li { grid-template-columns: 38px 1fr; gap: 14px; }
  .abordagem__lista { grid-template-columns: 1fr; }
  .abordagem__lista li { min-height: 0; }
  .frescura__inner, .sobre-fecho__inner { gap: 34px; }
  .frescura .button { width: auto; }
  .sobre-fecho .button { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sobre-hero__link span, .formacao__linha li { transition: none; }
}