/* Dra. Vickie White · home v5
   Merge of v3 (white theme, film, Sobre, laboratório, closing layout) and v4 (cards, Onde atendo,
   Primeira consulta, Dúvidas, photoreal fecundação) + a new hero: two microscopes and the eyepiece.
   Every moving value is written by assets/app.js render(y); this file sets sizes, stacking and the
   static fallbacks. Rectangles only (radius 0-2px). */

@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/raleway-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/raleway-latin-700-normal.woff2") format("woff2"); }

:root {
  /* brand sheet (vickie-tokens.json) */
  --branco: #FFFDF7;
  --creme: #FAEBE0;
  --champanhe: #F6E3D4;
  --areia: #E8CBB9;
  --caramelo: #AF9079;
  --mocha: #92725B;
  --cafe: #5C473E;
  --cacau: #3C261B;

  --ink: var(--cacau);
  --ink-soft: var(--cafe);
  --line: rgba(60, 38, 27, 0.16);
  --line-strong: rgba(60, 38, 27, 0.42);
  --r: 2px;

  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-text: "Raleway", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4.4vw, 72px);
  --bar-h: 64px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --vh: 1vh;
}
@supports (height: 100svh) { :root { --vh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--branco); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--branco); color: var(--ink);
  font-family: var(--f-text); font-weight: 300; font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
::selection { background: var(--champanhe); color: var(--cacau); }
:focus-visible { outline: 2px solid var(--mocha); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
em { font-style: italic; }
strong { font-weight: 700; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cacau); color: var(--branco); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }

.display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.display em { font-style: italic; color: var(--mocha); }
.caps { font-family: var(--f-text); font-weight: 300; font-size: 0.72rem; letter-spacing: 0.55em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: var(--r); border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--cacau); color: var(--branco); }
.btn--light { background: var(--champanhe); color: var(--cacau); }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--cafe); }
  .btn--light:hover { background: var(--branco); }
  .link:hover { color: var(--mocha); }
}
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1.1rem; }
.link { font-weight: 700; font-size: 0.95rem; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }

/* reticle: four thin corner ticks around a frame (v3) */
.ret { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 3; border: 0 solid var(--line-strong); }
.ret--tl { left: -9px; top: -9px; border-left-width: 1px; border-top-width: 1px; }
.ret--tr { right: -9px; top: -9px; border-right-width: 1px; border-top-width: 1px; }
.ret--bl { left: -9px; bottom: -9px; border-left-width: 1px; border-bottom-width: 1px; }
.ret--br { right: -9px; bottom: -9px; border-right-width: 1px; border-bottom-width: 1px; }

/* ---------- bar (v3: thin, folio of the chapter) ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  background: rgba(255, 253, 247, 0.94); border-bottom: 1px solid var(--line);
  transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}
@supports (backdrop-filter: blur(8px)) { .bar { background: rgba(255, 253, 247, 0.86); backdrop-filter: blur(8px); } }
.bar__brand { display: inline-flex; align-items: center; min-height: 44px; }
.logo-ph { display: block; width: 30px; height: 30px; border-radius: var(--r); background: linear-gradient(135deg, #8F6F59, #EAD8CA); }
.bar__folio { font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-soft); padding-left: 20px; border-left: 1px solid var(--line); min-width: 11em; transition: color 240ms var(--ease); }
.bar__nav { display: flex; gap: 26px; margin-left: auto; }
.bar__nav a { text-decoration: none; font-size: 0.86rem; min-height: 44px; display: inline-flex; align-items: center; }
.bar__nav a:hover { text-decoration: underline; }
.bar__cta { min-height: 42px; font-size: 0.92rem; padding: 0 18px; }
body.bar-dark .bar { background: rgba(60, 38, 27, 0.9); color: var(--creme); border-bottom-color: rgba(250, 235, 224, 0.16); }
body.bar-dark .bar__folio { color: var(--areia); border-left-color: rgba(250, 235, 224, 0.2); }
body.bar-dark .bar__cta { background: var(--champanhe); color: var(--cacau); }

/* =====================================================================
   1 + 2 · intro: microscopes -> eyepiece -> the film
   ===================================================================== */
.intro { position: relative; height: calc(var(--vh) * 330); background: var(--cacau); }
.intro__mark { position: absolute; left: 0; top: calc(var(--vh) * 96); width: 1px; height: 1px; }
.intro__stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; background: var(--branco); contain: paint; }
.intro__stage.is-dark { background: var(--cacau); }

/* film layer: section 2 in its final layout */
.intro__film {
  position: absolute; inset: 0; z-index: 1; color: var(--creme);
  display: grid; grid-template-columns: auto minmax(250px, 1fr); grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 3.4vw, 56px); align-content: start;
  padding: calc(var(--bar-h) + 3.2vh) var(--gutter) 4vh;
}
.film__title { grid-column: 1 / -1; font-size: clamp(2.4rem, 4.2vw, 4.4rem); color: var(--creme); padding-bottom: 2.6vh; }
.film__title em { color: var(--champanhe); }
.film__frame {
  position: relative; grid-column: 1; align-self: start; aspect-ratio: 16 / 9; background: #2a1a12; overflow: hidden;
  width: min(calc(100vw - 2 * var(--gutter) - 330px), calc((var(--vh) * 100 - var(--bar-h) - 7.2vh - 2.6vh - 4.6rem) * 16 / 9));
  clip-path: circle(0px at 50% 50%); will-change: clip-path;
}
.film__poster, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__video { opacity: 0; }
.film__video.is-live { opacity: 1; }
.film__side { grid-column: 2; display: flex; flex-direction: column; min-height: 0; align-self: stretch; }
.film__explain { max-width: 34ch; }
.film__explain .caps { color: var(--areia); letter-spacing: 0.42em; padding-bottom: 12px; border-bottom: 1px solid rgba(250, 235, 224, 0.2); margin-bottom: 16px; }
.film__explain p:not(.caps) { font-size: 1rem; line-height: 1.62; color: var(--creme); }
.film__explain p + p:not(.caps) { margin-top: 12px; color: var(--areia); }
.film__caps { position: relative; margin-top: auto; min-height: 11.5rem; }
.film__bar { position: relative; height: 1px; background: rgba(250, 235, 224, 0.24); margin-bottom: 26px; }
.film__fill { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--champanhe); transform-origin: 0 0; transform: scaleX(0); }
.film__cap { position: absolute; left: 0; right: 0; top: 27px; font-size: 1rem; line-height: 1.58; color: var(--creme); opacity: 0; }
.film__cap strong { display: block; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.6rem; letter-spacing: -0.01em; color: var(--champanhe); margin-bottom: 6px; }
.film__note { margin-top: 14px; font-size: 0.74rem; letter-spacing: 0.08em; color: var(--caramelo); }
.film__title, .film__side { opacity: 0; }

/* hero layer: the two microscopes and the title */
.intro__hero { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intro__hero a { pointer-events: auto; }
.mic { position: absolute; left: 0; top: 0; height: calc(var(--vh) * 88); aspect-ratio: 876 / 1286; will-change: transform, opacity, filter; transform-origin: 0 0; }
.mic--r { aspect-ratio: 882 / 1294; }
.mic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.mic__luz { opacity: 0; }
.hero__copy {
  position: absolute; left: 50%; top: 50%; width: min(600px, 42vw); text-align: center;
  transform: translate(-50%, -50%); will-change: transform, opacity;
  display: flex; flex-direction: column; align-items: center;
}
.hero__kicker { font-size: 0.64rem; letter-spacing: 0.42em; margin-bottom: 26px; }
.hero__title { font-size: clamp(3rem, 5vw, 5.4rem); }
.hero__lede { margin-top: 22px; max-width: 34ch; font-size: 1.08rem; color: var(--ink-soft); }
.hero__cta { margin-top: 30px; }

/* the eyepiece: dark everywhere except the circular field */
.ocular {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  --ox: 50%; --oy: 50%; --or: 40px; --soft: 0.93;
  background: radial-gradient(circle var(--or) at var(--ox) var(--oy), rgba(60, 38, 27, 0) 0, rgba(60, 38, 27, 0) calc(var(--or) * var(--soft)), rgba(30, 18, 12, 0.9) calc(var(--or) * (var(--soft) + (1 - var(--soft)) * 0.8)), var(--cacau) var(--or));
}

/* =====================================================================
   3 · sobre (v3)
   ===================================================================== */
.sobre { position: relative; padding: 11vh 0 9vh; background: var(--branco); }
.sobre__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.slide { position: relative; margin: 0; transform-origin: 50% 100%; }
.slide picture, .slide > img { display: block; overflow: hidden; }
.slide img { width: 100%; height: auto; }
.slide__m { position: relative; }
.sobre__photo { position: sticky; top: calc(var(--bar-h) + 6vh); }
.sobre__kicker { margin-bottom: 20px; letter-spacing: 0.42em; }
.sobre__name { font-size: clamp(3rem, 6vw, 6rem); }
.sobre__claim { margin-top: 18px; font-size: clamp(1.6rem, 2.4vw, 2.3rem); color: var(--mocha); }
.sobre__p { margin-top: 26px; max-width: 62ch; }
.edu__h { margin-top: 44px; padding-bottom: 14px; border-bottom: 1px solid var(--line); letter-spacing: 0.42em; }
.edu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.edu li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: opacity 200ms linear; }
.edu__t { font-family: var(--f-display); font-size: 1.24rem; letter-spacing: -0.01em; line-height: 1.25; }
.edu__p { font-size: 0.92rem; color: var(--ink-soft); }

/* =====================================================================
   4 · laboratório (v3, short, no microscope)
   ===================================================================== */
.lab { position: relative; padding: 9vh 0 9vh; background: var(--branco); border-top: 1px solid var(--line); }
.lab__head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 90px); align-items: end; padding-bottom: 6vh; }
.lab__title { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.lab__intro { max-width: 46ch; color: var(--ink-soft); }
.lab__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: 6vh; perspective: 1400px; align-items: start; }
.lab__item .slide__m { overflow: hidden; }
.lab__item .slide__m picture, .lab__item .slide__m img { width: 100%; height: 100%; object-fit: cover; }
.lab__item--a { grid-column: 1 / span 6; }
.lab__item--a .slide__m { aspect-ratio: 4 / 3; }
.lab__item--b { grid-column: 7 / span 3; margin-top: 10vh; }
.lab__item--c { grid-column: 10 / span 3; margin-top: 4vh; }
.lab__item--b .slide__m, .lab__item--c .slide__m { aspect-ratio: 3 / 4; }
.lab__item figcaption { margin-top: 14px; max-width: 44ch; font-size: 0.93rem; color: var(--ink-soft); padding-top: 12px; border-top: 1px solid var(--line); }
.lab__item figcaption strong { color: var(--ink); font-weight: 700; }

/* =====================================================================
   5 · tratamentos (v4 cards on the white theme)
   ===================================================================== */
.trat { position: relative; padding: 10vh 0 8vh; background: var(--branco); }
.trat__head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 90px); align-items: end; padding-bottom: 6vh; }
.trat__title { font-size: clamp(2.8rem, 5.4vw, 5.6rem); }
.trat__intro { color: var(--ink-soft); max-width: 40ch; }
.stack { position: relative; }
.deck {
  --d-bg: var(--creme); --d-ink: var(--cacau); --d-soft: var(--cafe); --d-line: rgba(60, 38, 27, .2); --d-em: var(--mocha);
  position: sticky; top: calc(var(--bar-h) + 22px + var(--i) * 18px);
  height: min(470px, calc(var(--vh) * 100 - var(--bar-h) - 140px)); min-height: 420px; margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 1fr; overflow: clip; border-radius: var(--r);
  background: var(--d-bg); color: var(--d-ink); border: 1px solid var(--d-line);
  box-shadow: 0 -12px 30px -24px rgba(60, 38, 27, .35), 0 30px 60px -40px rgba(60, 38, 27, .45);
  transform-origin: 50% 0; will-change: transform;
}
.deck:last-child { margin-bottom: 0; }
.deck--creme     { --d-bg: var(--creme); }
.deck--cafe      { --d-bg: var(--cafe); --d-ink: var(--creme); --d-soft: var(--champanhe); --d-line: rgba(250, 235, 224, .22); --d-em: var(--champanhe); }
.deck--champanhe { --d-bg: var(--champanhe); --d-em: var(--cafe); }
.deck--cacau     { --d-bg: var(--cacau); --d-ink: var(--creme); --d-soft: var(--areia); --d-line: rgba(175, 144, 121, .38); --d-em: var(--caramelo); }
.deck--branco    { --d-bg: var(--branco); }
.deck--flip .deck__copy { order: 2; }
.deck__copy { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 52px); min-width: 0; }
.deck__label { display: flex; align-items: center; gap: 12px; font-size: 0.68rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--d-soft); }
.sq { width: 8px; height: 8px; background: currentColor; display: inline-block; flex: none; }
.deck__title { margin-top: auto; font-family: var(--f-display); font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(2.2rem, 3.4vw, 3.4rem); text-wrap: balance; }
.deck__line { margin-top: 12px; font-family: var(--f-display); font-size: 1.25rem; color: var(--d-ink); }
.deck__line em { color: var(--d-em); }
.deck__p { margin-top: 16px; max-width: 46ch; color: var(--d-soft); font-size: 1rem; }
.deck__foot {
  margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--d-line); display: flex; align-items: center; justify-content: space-between;
  text-decoration: none; font-weight: 700; font-size: 0.92rem; min-height: 44px; color: var(--d-ink);
}
.arrow { width: 26px; height: 1px; background: currentColor; position: relative; transition: width .18s var(--ease); }
.arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .deck__foot:hover .arrow { width: 40px; } }
.deck__media { position: relative; margin: 12px; overflow: clip; background: var(--cacau); }
.deck__bg { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; max-width: none; filter: blur(2px) saturate(.9); }
.deck__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60, 38, 27, .16), rgba(60, 38, 27, .4)); }
.deck__shot {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: min(56%, 320px); aspect-ratio: 4 / 5;
  transform: translate(-50%, -50%); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 253, 247, .5), 0 24px 48px -28px rgba(10, 6, 4, .6);
}
.deck__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* =====================================================================
   6 · onde atendo (v4 on white)
   ===================================================================== */
.atendo { position: relative; overflow: clip; background: linear-gradient(180deg, var(--branco) 0%, var(--creme) 100%); padding: 10vh 0; }
.atendo__arches { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(146, 114, 91, .2); stroke-width: 1; will-change: transform; }
.atendo__grid { position: relative; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.atendo__title { font-size: clamp(3.2rem, 7.4vw, 7.6rem); line-height: .92; }
.atendo__clinic { margin-top: 1.8rem; font-family: var(--f-display); font-style: italic; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.15; color: var(--cafe); }
.atendo__desc { margin-top: 1.1rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.7; color: var(--cafe); max-width: 32em; }
.atendo__list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .2rem; max-width: 30rem; }
.atendo__list li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid rgba(146, 114, 91, .25); }
.atendo__list li::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--mocha); flex: none; }
.atendo__addr { margin-top: 1.5rem; font-style: normal; line-height: 1.6; color: var(--cafe); }
.atendo__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.atendo__window { position: relative; margin: 0; height: min(calc(var(--vh) * 78), 780px); overflow: hidden; background: var(--areia); box-shadow: 0 50px 90px -50px rgba(92, 71, 62, .55); }
.atendo__clip { position: absolute; inset: 0; clip-path: inset(0 0 0 0); will-change: clip-path; }
.atendo__img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 35%; will-change: transform; }

/* =====================================================================
   7 · primeira consulta (v4, intact: lateral rail with three photos)
   ===================================================================== */
.passos { position: relative; background: linear-gradient(180deg, var(--creme) 0%, var(--branco) 100%); }
.passos__stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; display: flex; align-items: center; }
.rail { display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 3.4rem); padding: var(--bar-h) var(--gutter) 0; will-change: transform; }
.rail__item { flex: 0 0 auto; }
.rail__head { width: min(28vw, 26rem); }
.passos__title { font-size: clamp(3rem, 6.4vw, 6.6rem); line-height: .95; }
.passos__sub { margin-top: 1.4rem; font-size: 1.15rem; color: var(--cafe); max-width: 22em; }
.step { position: relative; width: min(26vw, 24rem); }
.step__img { height: min(calc(var(--vh) * 50), 470px); overflow: hidden; box-shadow: 0 40px 70px -40px rgba(92, 71, 62, .6); }
.step__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.step__n { position: absolute; left: -.08em; top: calc(min(calc(var(--vh) * 50), 470px) - .62em); font-family: var(--f-display); font-style: italic; font-size: clamp(5rem, 8vw, 8rem); line-height: 1; color: var(--mocha); text-shadow: 0 8px 26px rgba(250, 235, 224, .9); }
.step__t { margin-top: 2.6rem; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2vw, 1.95rem); line-height: 1.15; }
.step__p { margin-top: .6rem; font-size: 1.04rem; color: var(--cafe); }
.rail__end { width: min(26vw, 24rem); display: grid; gap: 1.4rem; justify-items: start; }
.rail__note { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.rail__where { font-size: .98rem; color: var(--cafe); }

/* =====================================================================
   8 · dúvidas (v4, light)
   ===================================================================== */
.faq { position: relative; background: var(--branco); padding: 10vh 0; }
.faq__grid { position: relative; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq__head { position: sticky; top: calc(var(--bar-h) + 6vh); }
.faq__title { font-size: clamp(3rem, 6vw, 6.2rem); line-height: .95; }
.faq__sub { margin-top: 1.4rem; font-size: 1.1rem; color: var(--cafe); max-width: 22em; }
.faq__list { border-top: 1px solid rgba(92, 71, 62, .22); }
.faq details { border-bottom: 1px solid rgba(92, 71, 62, .22); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 1.35rem 3rem 1.35rem 0; min-height: 44px; font-family: var(--f-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 18px; height: 1.5px; background: var(--cacau); transition: transform .2s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 3rem 1.6rem 0; font-size: 1.04rem; line-height: 1.75; color: var(--cafe); max-width: 40em; }
.js:not(.is-static) [data-in]:not(.is-in) > * { opacity: 0; transform: translateY(14px); }
[data-in] > * { transition: opacity .62s var(--ease), transform .62s var(--ease); }

/* =====================================================================
   9 · fechamento: fecundação (v3 layout + v4 photoreal egg + glass front plane)
   ===================================================================== */
.close { position: relative; height: calc(var(--vh) * 165); background: var(--branco); border-top: 1px solid var(--line); }
.close__stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; }
.fec { position: absolute; left: 50%; top: 52%; width: min(calc(var(--vh) * 58), 38vw); aspect-ratio: 1; transform: translate(-50%, -50%); will-change: transform; z-index: 1; }
.fec__egg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fec__zona { position: absolute; inset: 2.5%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(146, 114, 91, 0) 80%, rgba(120, 84, 60, .32) 88%, rgba(146, 114, 91, 0) 97%); }
.fec__pn { position: absolute; width: 13%; aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none; filter: blur(.4px);
  background: radial-gradient(circle at 50% 50%, rgba(255, 236, 222, .34) 0 54%, rgba(160, 104, 82, .26) 62%, rgba(160, 104, 82, 0) 70%); }
.fec__pn--a { left: 44.5%; top: 49%; }
.fec__pn--b { left: 56%; top: 52%; width: 12%; }
.fec__sp { position: absolute; left: 0; top: 0; width: 64%; height: auto; max-width: none; opacity: 0; transform-origin: 100% 50%; will-change: transform, opacity; filter: brightness(.86) contrast(1.06); }
.fec__spark { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background:
    radial-gradient(closest-side, rgba(255, 250, 238, 1) 0 14%, rgba(236, 184, 120, .9) 26%, rgba(200, 140, 90, .38) 50%, rgba(200, 140, 90, 0) 100%),
    linear-gradient(90deg, rgba(196, 136, 84, 0) 0, rgba(196, 136, 84, .85) 50%, rgba(196, 136, 84, 0) 100%) center / 100% 2px no-repeat,
    linear-gradient(0deg, rgba(196, 136, 84, 0) 0, rgba(196, 136, 84, .85) 50%, rgba(196, 136, 84, 0) 100%) center / 2px 100% no-repeat; }
.fec__front { position: absolute; left: 50%; bottom: -20vh; z-index: 2; width: max(1500px, 112vw); transform: translateX(-50%); will-change: transform; pointer-events: none; }
.fec__front img { width: 100%; height: auto; max-width: none; }
.fec__front::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 40vh; background: var(--branco); }
.close__blocks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cb { position: absolute; pointer-events: auto; }
.cb--invite { left: var(--gutter); top: 50%; width: min(27vw, 420px); transform: translateY(-50%); }
.close__title { font-size: clamp(2rem, 2.9vw, 3.1rem); line-height: 1.06; }
.close__title em { display: block; margin-top: .2em; }
.cb--invite .btn { margin-top: 34px; }
.cb--where { right: var(--gutter); top: calc(var(--bar-h) + 12vh); width: min(22vw, 320px); }
.cb--nav { right: var(--gutter); bottom: 8vh; width: min(22vw, 320px); }
.cb .caps { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; letter-spacing: .42em; }
.cb__name { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.25; }
.cb address { font-style: normal; margin-top: 8px; color: var(--ink-soft); }
.cb--nav nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.cb--nav nav a { text-decoration: none; font-size: 0.92rem; min-height: 34px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .cb--nav nav a:hover { text-decoration: underline; } }
.cb__reg { margin-top: 16px; font-size: 0.8rem; color: var(--ink-soft); display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.cb__reg .logo-ph { grid-row: span 2; }

/* footer: cocoa strip, legal line */
.foot { background: var(--cacau); color: var(--areia); padding: 4vh 0; }
.foot__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.82rem; }

/* =====================================================================
   phone: its own composition, scene by scene (390 x 844)
   ===================================================================== */
@media (max-width: 899px) {
  :root { --bar-h: 58px; }
  body { font-size: 1rem; }
  .bar { gap: 12px; }
  .bar__nav { display: none; }
  .bar__folio { min-width: 0; padding-left: 12px; font-size: 0.6rem; letter-spacing: 0.28em; margin-right: auto; white-space: nowrap; }
  .bar__cta { min-height: 44px; padding: 0 12px; font-size: 0.82rem; }

  .intro { height: calc(var(--vh) * 330); }
  .intro__mark { top: calc(var(--vh) * 100); }
  .intro__film { display: flex; flex-direction: column; padding: calc(var(--bar-h) + 16px) 0 14px; }
  .film__title { padding: 0 var(--gutter) 12px; font-size: 2.3rem; }
  .film__frame { width: 100%; aspect-ratio: 680 / 720; max-height: calc(var(--vh) * 56); flex: 0 0 auto; }
  .film__side { margin: 14px var(--gutter) 0; position: relative; flex: 1 1 auto; }
  .film__explain { position: absolute; left: 0; right: 0; top: 0; max-width: none; }
  .film__explain .caps { display: none; }
  .film__explain p:not(.caps) { font-size: 0.95rem; line-height: 1.55; }
  .film__caps { margin-top: 0; min-height: 8.6rem; }
  .film__bar { margin-bottom: 14px; }
  .film__cap { top: 15px; font-size: 0.93rem; line-height: 1.5; }
  .film__cap strong { font-size: 1.28rem; margin-bottom: 2px; }
  .film__note { display: none; }

  .mic { height: calc(var(--vh) * 40); }
  .hero__copy { width: calc(100% - 2 * var(--gutter)); top: 40%; }
  .hero__kicker { font-size: 0.56rem; letter-spacing: 0.26em; margin-bottom: 16px; }
  .hero__title { font-size: clamp(2.3rem, 10.6vw, 3rem); }
  .hero__lede { margin-top: 14px; font-size: 0.98rem; max-width: 28ch; }
  .hero__cta { margin-top: 20px; }

  .sobre { padding: 10vh 0 8vh; }
  .sobre__grid { grid-template-columns: 1fr; gap: 32px; }
  .sobre__photo { position: relative; top: auto; width: 72%; }
  .edu { grid-template-columns: 1fr; }
  .edu li { padding: 11px 0; }
  .edu__t { font-size: 1.08rem; }
  .sobre__name { font-size: 2.9rem; }
  .edu__h { margin-top: 40px; }

  .lab { padding: 9vh 0 8vh; }
  .lab__head, .trat__head { grid-template-columns: 1fr; gap: 16px; padding-bottom: 5vh; }
  .lab__title { font-size: 2.6rem; }
  .lab__grid { grid-template-columns: 1fr 1fr; row-gap: 5vh; column-gap: 14px; perspective: 900px; }
  .lab__item--a { grid-column: 1 / -1; }
  .lab__item--a .slide__m { aspect-ratio: 4 / 5; }
  .lab__item--b, .lab__item--c { grid-column: auto; margin-top: 0; }
  .lab__item--c { margin-top: 6vh; }
  .lab__item figcaption { font-size: 0.85rem; }

  .trat { padding: 9vh 0 8vh; }
  .trat__title { font-size: 2.8rem; }
  .stack { padding: 0 14px; }
  .deck { position: relative; top: auto; height: auto; min-height: 0; grid-template-columns: 1fr; margin-bottom: 18px; }
  .deck--flip .deck__copy { order: 0; }
  .deck__media { order: -1; height: 230px; margin: 10px 10px 0; }
  .deck__shot { width: auto; height: 86%; }
  .deck__copy { padding: 20px 20px 16px; }
  .deck__title { margin-top: 14px; font-size: 2rem; }
  .deck__line { font-size: 1.08rem; margin-top: 6px; }
  .deck__p { margin-top: 10px; font-size: 0.95rem; line-height: 1.55; }
  .deck__foot { margin-top: 18px; }

  .atendo { padding: 9vh 0; }
  .atendo__grid { grid-template-columns: 1fr; gap: 32px; }
  .atendo__window { order: -1; height: calc(var(--vh) * 60); }
  .atendo__title { font-size: 3.4rem; }

  .rail { gap: 1.4rem; padding-top: var(--bar-h); }
  .rail__head { width: 80vw; }
  .passos__title { font-size: 3rem; }
  .step { width: 74vw; }
  .step__img { height: calc(var(--vh) * 40); }
  .step__n { top: calc(var(--vh) * 40 - .62em); font-size: 5rem; }
  .step__t { margin-top: 2rem; }
  .rail__end { width: 80vw; }

  .faq { padding: 9vh 0; }
  .faq__grid { grid-template-columns: 1fr; gap: 28px; }
  .faq__head { position: static; }
  .faq__title { font-size: 2.9rem; }
  .faq summary { font-size: 1.12rem; }

  .close { height: calc(var(--vh) * 200); }
  .fec { width: 74vw; top: calc(var(--vh) * 33); }
  .fec__front { width: 220vw; bottom: calc(var(--vh) * 24); }
  .fec__front::after { height: calc(var(--vh) * 26); }
  .cb { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 22px; transform: none; }
  .cb--invite { top: auto; transform: none; }
  .close__title { font-size: 1.85rem; }
  .cb--invite .btn { margin-top: 18px; }
  .cb--where, .cb--nav { right: var(--gutter); width: auto; }
  .foot__base { flex-direction: column; gap: 8px; }
  [data-tilt] { transform-origin: 50% 100%; will-change: transform; }
}

/* =====================================================================
   reduced motion: complete still compositions, no pinned space
   ===================================================================== */
.is-static .intro { height: auto; background: var(--cacau); }
.is-static .intro__stage { position: relative; height: auto; overflow: visible; background: var(--cacau); contain: none; display: flex; flex-direction: column; }
.is-static .intro__hero { order: -1; overflow: hidden; }
.is-static .hero__copy { transform: translate(-50%, -50%); }
.is-static .intro__hero { position: relative; height: max(calc(var(--vh) * 100), 640px); background: var(--branco); }
.is-static .mic--l { top: auto; bottom: -4vh; transform: translateX(-30%); }
.is-static .mic--r { left: auto; right: 0; top: auto; bottom: -4vh; transform: translateX(30%); }
.is-static .mic__luz { opacity: 1; }
.is-static .intro__film { position: relative; inset: auto; min-height: calc(var(--vh) * 100); }
.is-static .film__frame { clip-path: none; }
.is-static .film__title, .is-static .film__side { opacity: 1; }
.is-static .film__explain { position: relative; }
.is-static .film__explain-2 { display: block; }
.is-static .film__caps { min-height: 0; margin-top: 24px; }
.is-static .film__cap { position: relative; top: auto; opacity: 1; margin-bottom: 14px; }
.is-static .film__bar { display: none; }
.is-static .film__video { opacity: 1; }
.is-static .ocular { display: none; }
.is-static .deck { position: relative; top: auto; margin-bottom: 1.5rem; }
.is-static .passos { height: auto !important; }
.is-static .passos__stage { position: relative; height: auto; padding: 7rem 0 6rem; }
.is-static .rail { flex-wrap: wrap; align-items: flex-start; transform: none !important; row-gap: 3rem; }
.is-static .close { height: auto; }
.is-static .close__stage { position: relative; height: auto; display: grid; gap: 40px; padding: calc(var(--bar-h) + 8vh) var(--gutter) 8vh; overflow: visible; }
.is-static .fec { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: min(70vw, 440px); }
.is-static .fec__pn { opacity: 1; transform: translate(-50%, -50%); }
.is-static .fec__sp, .is-static .fec__spark, .is-static .fec__front { display: none; }
.is-static .close__blocks { position: relative; inset: auto; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.is-static .cb { position: relative; inset: auto; transform: none; width: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* =====================================================================
   v6 · surgical changes on top of v5 (brief-home-v6.md)
   ===================================================================== */

/* 1 · menu: v4 floating pill merged with the v3 straight lines. One variable turns it square. */
:root { --nav-radius: 14px 4px 14px 4px; --bar-h: 86px; }
.bar {
  inset: 14px var(--gutter) auto var(--gutter); height: 60px; padding: 0 8px 0 10px; gap: 20px;
  border: 1px solid var(--line); border-radius: var(--nav-radius);
  box-shadow: 0 18px 40px -26px rgba(60, 38, 27, .35);
}
.bar .logo-ph { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 253, 247, .5); }
.bar__folio { display: none; }
.bar__nav { gap: 22px; }
.bar__nav a { font-size: .64rem; letter-spacing: .42em; text-transform: uppercase; }
.bar__cta { border-radius: 10px 3px 10px 3px; min-height: 44px; }
body.bar-dark .bar { background: rgba(60, 38, 27, .82); border-color: rgba(250, 235, 224, .16); }

/* 7 · hero: Vickie, whole and melted into the white, behind the microscopes */
.hero__scene {
  position: absolute; margin: 0; z-index: 0; left: 45vw; top: calc(var(--bar-h) - 24px);
  height: calc(var(--vh) * 100 - var(--bar-h) + 24px); aspect-ratio: 4 / 5; overflow: hidden;
  -webkit-mask-image: radial-gradient(58% 60% at 50% 42%, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 100%);
          mask-image: radial-gradient(58% 60% at 50% 42%, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 100%);
  will-change: transform, opacity, filter;
}
.hero__scene picture, .hero__photo { display: block; width: 100%; height: 100%; }
.hero__photo { object-fit: cover; object-position: 50% 18%; max-width: none; transform-origin: 50% 30%; will-change: transform; }
.mic { z-index: 1; }
.hero__copy { z-index: 2; left: 25vw; top: 50%; width: min(440px, 30vw); text-align: left; align-items: flex-start; transform: translate(0, -50%); }
.hero__kicker { margin-bottom: 20px; }
.hero__title { font-size: clamp(2.8rem, 4.2vw, 4.6rem); }
.hero__cv { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); width: 100%; }
.hero__cv li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .86rem; line-height: 1.35; color: var(--cafe); }
.hero__cv strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.02rem; color: var(--cacau); }
.hero__cta { margin-top: 26px; }

/* 8 · the field of the eyepiece: a soft circular mask over the film (set by JS) */
.film__frame { clip-path: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ocular { --soft: .6; background: radial-gradient(circle var(--or) at var(--ox) var(--oy), rgba(60, 38, 27, 0) 0, rgba(60, 38, 27, 0) calc(var(--or) * var(--soft)), rgba(60, 38, 27, .78) calc(var(--or) * .9), var(--cacau) var(--or)); }

/* 2 · tratamentos: v3 cards (light, rectangular, photo on the right), v4 stacking, centred stack */
.trat .stack { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.deck {
  top: calc(var(--bar-h) + 2vh + var(--i) * 16px);
  height: min(480px, calc(var(--vh) * 100 - var(--bar-h) - 110px)); min-height: 420px; margin-bottom: 28px;
  box-shadow: 0 -10px 30px -22px rgba(60, 38, 27, .3), 0 26px 50px -34px rgba(60, 38, 27, .4);
}
.deck--branco { --d-bg: var(--branco); --d-em: var(--mocha); }
.deck--creme  { --d-bg: var(--creme); --d-soft: #4E3B32; }
.deck__media { margin: 14px; background: var(--creme); }
.deck__media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.deck__media img { width: 100%; height: 100%; object-fit: cover; }
.deck__media::after { display: none; }
.deck__media .ret { border-color: rgba(255, 253, 247, .75); }
.deck__media .ret--tl { left: 14px; top: 14px; }
.deck__media .ret--br { right: 14px; bottom: 14px; }

/* 3 · primeira consulta: pinned lateral travel, a line pulls each step in */
.pc { position: relative; background: linear-gradient(180deg, var(--creme) 0%, var(--branco) 100%); }
.pc__stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; }
.pc__intro { position: absolute; left: 50%; top: 50%; width: min(1000px, 86vw); text-align: center; transform: translate(-50%, -50%); will-change: transform, opacity; }
.pc__t2 { font-size: clamp(3rem, 5.4vw, 5.6rem); line-height: .98; }
.pc__t2 em, .pc__title em { color: var(--mocha); }
.pc__sub2 { margin-top: 1.2rem; font-size: 1.18rem; color: var(--cafe); }
.pc__track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; padding: var(--bar-h) var(--gutter) 0; will-change: transform; }
.pc__line { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pc__path { fill: none; stroke: var(--mocha); stroke-width: 1.4; stroke-linecap: round; }
.pc__head { position: relative; flex: 0 0 auto; width: min(24vw, 22rem); will-change: transform, opacity; }
.pc__title { font-size: clamp(3rem, 5.4vw, 5.6rem); line-height: .95; }
.pc__title em { display: block; }
.pc__sub { margin-top: 1.2rem; font-size: 1.1rem; color: var(--cafe); max-width: 20em; }
.pc__steps { position: relative; display: flex; align-items: flex-start; gap: clamp(4rem, 8vw, 9rem); list-style: none; margin: 0; padding: 0; }
.pc__step { position: relative; flex: 0 0 auto; width: min(24vw, 22rem); }
.pc__img { margin: 0; height: min(calc(var(--vh) * 40), 400px); overflow: hidden; box-shadow: 0 40px 70px -40px rgba(92, 71, 62, .6); will-change: transform; }
.pc__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pc__n { margin-top: 10px; font-family: var(--f-display); font-style: italic; font-size: clamp(5.5rem, 8vw, 8.5rem); line-height: .9; color: var(--mocha); will-change: transform; }
.pc__st { margin-top: 34px; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.85rem); line-height: 1.15; }
.pc__sp { margin-top: .5rem; font-size: 1.02rem; color: var(--cafe); }
.pc__end { position: relative; flex: 0 0 auto; width: min(26vw, 24rem); margin-left: clamp(4rem, 8vw, 9rem); display: grid; gap: 1.4rem; justify-items: start; }
.pc__note { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.pc__where { font-size: .98rem; color: var(--cafe); }

/* 4 · instagram */
.ig { position: relative; padding: 11vh 0 9vh; background: var(--branco); border-top: 1px solid var(--line); }
.ig__head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 90px); align-items: end; }
.ig__kicker { margin-bottom: 14px; letter-spacing: .42em; }
.ig__title { font-size: clamp(2.8rem, 5vw, 5rem); }
.ig__intro { color: var(--cafe); max-width: 40ch; }
.ig__profile { margin-top: 10px; gap: 12px; }
.ig__rail { list-style: none; margin: 6vh 0 0; padding: 0 var(--gutter); display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; cursor: grab; }
.ig__rail::-webkit-scrollbar { display: none; }
.ig__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.ig__item { flex: 0 0 clamp(220px, 21vw, 300px); scroll-snap-align: start; }
.ig__item a { display: block; text-decoration: none; color: inherit; }
.ig__item figure { margin: 0; }
.ig__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--creme); }
.ig__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); -webkit-user-drag: none; user-select: none; }
.ig__img::after { content: ""; position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; opacity: .85; background: var(--branco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .ig__item a:hover .ig__img img { transform: scale(1.04); } }
.ig__item figcaption { padding-top: 12px; border-top: 1px solid var(--line); margin-top: 12px; }
.ig__tag { display: block; font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; color: var(--mocha); }
.ig__cap { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.45; color: var(--cacau); }
.ig__controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 3vh; }
.ig__btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: transparent; color: var(--cacau); cursor: pointer; border-radius: var(--r); transition: background-color .16s var(--ease); }
.ig__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) { .ig__btn:hover { background: var(--champanhe); } }

/* 5 · dúvidas as a conversation (adapted from faq-chat-accordion, static, no React) */
.faq__cta { margin-top: 2rem; }
.chat { max-width: 760px; }
.chat__stamp { font-size: .8rem; color: var(--mocha); margin-bottom: 18px; letter-spacing: .04em; }
.chat__item { margin-bottom: 10px; }
.chat__h { margin: 0; font: inherit; }
.chat__q { display: flex; align-items: center; gap: 16px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--cacau); font: inherit; min-height: 44px; }
.chat__qt { display: inline-block; max-width: 36rem; padding: 12px 16px; background: var(--champanhe); border-radius: 4px 4px 4px 0; font-family: var(--f-text); font-weight: 300; font-size: 1.02rem; line-height: 1.45; transition: background-color .2s var(--ease); }
.chat__q[aria-expanded="true"] .chat__qt { background: var(--areia); }
@media (hover: hover) and (pointer: fine) { .chat__q:hover .chat__qt { background: var(--areia); } }
.chat__icon { position: relative; flex: none; width: 16px; height: 16px; color: var(--mocha); }
.chat__icon::before, .chat__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
.chat__icon::after { transform: rotate(90deg); }
.chat__q[aria-expanded="true"] .chat__icon { color: var(--cacau); }
.chat__q[aria-expanded="true"] .chat__icon::after { transform: rotate(0deg); }
.chat__a { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .4s var(--ease), opacity .4s var(--ease), visibility 0s linear .4s; }
.chat__a.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.chat__clip { overflow: hidden; min-height: 0; }
.chat__bubble { margin: 8px 0 8px clamp(28px, 8vw, 72px); max-width: 32rem; padding: 14px 18px; background: var(--cacau); color: var(--creme); border-radius: 4px 4px 0 4px; }
.chat__text { position: relative; margin: 0; font-family: var(--f-text); font-weight: 300; font-size: .98rem; line-height: 1.62; }
.js .chat__full { color: transparent; }
.chat__typed { position: absolute; inset: 0; }
.chat__typed::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: caret 1s steps(2) infinite; }
.chat__text.is-done .chat__full { color: inherit; }
.chat__text.is-done .chat__typed { display: none; }
@keyframes caret { 50% { opacity: 0; } }

/* 6 · fechamento: v3 egg, low front bench, exit to the cocoa footer */
.close { height: calc(var(--vh) * 190); }
.close__stage { background: var(--branco); }
.fec { top: 45%; width: min(calc(var(--vh) * 52), 34vw); z-index: 1; }
.fec__egg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; will-change: opacity; }
.fec__egg--b { opacity: 0; }
.fec__svg { position: absolute; inset: -40%; width: 180%; height: 180%; overflow: visible; pointer-events: none; }
.fec__ring { fill: none; stroke: #9C7E64; stroke-width: 2; opacity: 0; }
.fec__sperm path { fill: none; stroke: rgba(92, 71, 62, .55); stroke-width: 2.2; stroke-linecap: round; }
.fec__sperm ellipse { fill: rgba(175, 144, 121, .55); stroke: rgba(92, 71, 62, .8); stroke-width: 1.6; }
.close__blocks { z-index: 2; }
.cb--invite { top: 44%; }
.cb--where { top: calc(var(--bar-h) + 6vh); }
.cb--nav { bottom: calc(15vh + 6vh); }
.cb--nav nav a { min-height: 30px; }
.bench { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: max(15vh, 112px); background: var(--branco); border-top: 1px solid var(--line-strong); box-shadow: 0 -40px 60px -34px rgba(60, 38, 27, .2); will-change: transform; }
.bench::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(175, 144, 121, .35); }
.bench__in { max-width: 1360px; height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(160px, 1fr) 3fr minmax(160px, 1fr); align-items: center; gap: 24px; }
.bench__k { font-size: .66rem; letter-spacing: .42em; text-transform: uppercase; color: var(--cafe); }
.bench__phrases { position: relative; height: 2.8rem; overflow: hidden; }
.bench__p { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--f-display); font-size: clamp(1.4rem, 2.2vw, 2.1rem); letter-spacing: -.02em; color: var(--cacau); opacity: 0; will-change: transform, opacity; }
.bench__p em { color: var(--mocha); margin-left: .25em; }
.bench__bar { justify-self: end; position: relative; width: min(160px, 100%); height: 1px; background: var(--line); }
.bench__fill { position: absolute; inset: 0; background: var(--mocha); transform-origin: 0 0; transform: scaleX(0); }

/* footer: the cocoa ground the bench gives way to */
.foot { background: var(--cacau); color: var(--areia); padding: 9vh 0 4vh; }
.foot__grid { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 40px; align-items: start; }
.foot__id { display: flex; gap: 16px; align-items: center; }
.foot__name { font-family: var(--f-display); font-size: 1.5rem; color: var(--creme); }
.foot__reg { font-size: .86rem; }
.foot .caps { color: var(--caramelo); margin-bottom: 10px; letter-spacing: .42em; }
.foot__where p:not(.caps) { font-size: .92rem; line-height: 1.6; }
.foot__act { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot .link { color: var(--creme); }
.foot__base { margin-top: 6vh; padding-top: 18px; border-top: 1px solid rgba(250, 235, 224, .16); font-size: .8rem; }

@media (max-width: 899px) {
  :root { --bar-h: 72px; }
  .bar { inset: 10px 10px auto 10px; height: 52px; padding: 0 6px 0 8px; gap: 10px; }
  .bar .logo-ph { width: 34px; height: 34px; }
  .bar__folio { display: block; padding-left: 10px; font-size: .56rem; letter-spacing: .26em; }
  .bar__cta { min-height: 40px; padding: 0 12px; font-size: .8rem; }

  .hero__scene { left: 50%; top: calc(var(--bar-h) - 6px); height: calc(var(--vh) * 31); aspect-ratio: 1; margin-left: calc(var(--vh) * -15.5);
    -webkit-mask-image: radial-gradient(50% 50% at 50% 48%, #000 56%, rgba(0, 0, 0, .5) 76%, transparent 100%);
            mask-image: radial-gradient(50% 50% at 50% 48%, #000 56%, rgba(0, 0, 0, .5) 76%, transparent 100%); }
  .hero__copy { left: 50%; top: calc(var(--bar-h) + var(--vh) * 31); width: calc(100% - 2 * var(--gutter)); align-items: center; text-align: center; transform: translate(-50%, 0); }
  .hero__kicker { margin-bottom: 10px; }
  .hero__title { font-size: clamp(2rem, 8.6vw, 2.4rem); }
  .hero__cv { margin-top: 14px; max-width: 300px; }
  .hero__cv li { padding: 5px 0; font-size: .74rem; }
  .hero__cv strong { display: inline; font-size: .84rem; margin-right: 4px; }
  .hero__cv li:nth-child(n+3) { display: none; }
  .hero__cta { margin-top: 14px; }
  .mic { height: calc(var(--vh) * 30); }

  .trat .stack { padding: 0 14px; }
  .deck { position: relative; top: auto; height: auto; min-height: 0; grid-template-columns: 1fr; margin-bottom: 18px; }
  .deck__media { order: -1; height: 240px; margin: 10px 10px 0; }

  .pc { height: auto !important; }
  .pc__stage { position: relative; height: auto; overflow: visible; }
  .pc__intro { display: none; }
  .pc__track { position: relative; height: auto; flex-direction: column; align-items: stretch; padding: 10vh var(--gutter) 10vh 58px; transform: none !important; }
  .pc__head { width: auto; }
  .pc__title { font-size: 3rem; }
  .pc__steps { flex-direction: column; gap: 8vh; margin: 7vh 0 0 !important; }
  .pc__step { width: auto; }
  .pc__img { height: calc(var(--vh) * 42); }
  .pc__n { font-size: 5rem; }
  .pc__st { margin-top: 24px; }
  .pc__end { width: auto; margin: 8vh 0 0; }

  .ig { padding: 9vh 0 8vh; }
  .ig__head { grid-template-columns: 1fr; gap: 14px; }
  .ig__title { font-size: 2.6rem; }
  .ig__rail { margin-top: 4vh; }
  .ig__item { flex-basis: 66vw; }

  .chat__bubble { margin-left: 28px; }
  .chat__qt { font-size: .98rem; }

  .close { height: calc(var(--vh) * 210); }
  .fec { width: 70vw; top: calc(var(--vh) * 33); }
  .cb, .cb--where, .cb--nav { bottom: calc(max(13vh, 96px) + 16px); }
  .bench { height: max(13vh, 96px); }
  .bench__in { grid-template-columns: 1fr auto; }
  .bench__k { display: none; }
  .bench__p { justify-content: flex-start; font-size: 1.3rem; }
  .bench__bar { width: 64px; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* reduced motion: still compositions */
.is-static .pc { height: auto !important; }
.is-static .pc__stage { position: relative; height: auto; overflow: visible; }
.is-static .pc__intro, .is-static .pc__line { display: none; }
.is-static .pc__track { position: relative; height: auto; flex-wrap: wrap; align-items: flex-start; gap: 3rem; padding: 12vh var(--gutter); transform: none !important; }
.is-static .pc__steps { flex-wrap: wrap; margin-left: 0 !important; }
.is-static .pc__end { margin-left: 0; }
.is-static .close { height: auto; }
.is-static .close__stage { position: relative; height: auto; display: grid; gap: 40px; padding: calc(var(--bar-h) + 6vh) var(--gutter) 6vh; overflow: visible; }
.is-static .fec { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: min(70vw, 440px); }
.is-static .fec__egg--a { opacity: 0; }
.is-static .fec__egg--b { opacity: 1; }
.is-static .fec__svg, .is-static .fec__spark { display: none; }
.is-static .close__blocks { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.is-static .bench { position: relative; transform: none !important; }
.is-static .bench__p:first-child { opacity: 1; }

/* v6 · longer intro: her scene + the light + one long dive, then the film */
.intro { height: calc(var(--vh) * 420); }
.intro__mark { top: calc(var(--vh) * 172); }
@media (max-width: 899px) { .intro { height: calc(var(--vh) * 400); } .intro__mark { top: calc(var(--vh) * 162); } }
.is-static .intro { height: auto; }
.is-static .hero__copy { left: 25vw; transform: translate(0, -50%); }
@media (max-width: 899px) { .is-static .hero__copy { left: 50%; transform: translate(-50%, 0); } }

.pc__link { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.pc__head { z-index: 2; }
.is-static .pc__link { display: none; }
@media (max-width: 899px) { .pc__link { display: none; } }
/* the bench reads as a real front plane: a warm ledge, darker than the page */
.bench { background: linear-gradient(180deg, var(--champanhe) 0%, var(--creme) 100%); border-top: 1px solid rgba(146, 114, 91, .55); box-shadow: 0 -30px 50px -26px rgba(60, 38, 27, .28), inset 0 1px 0 rgba(255, 253, 247, .9); }

.close { height: calc(var(--vh) * 220); }
@media (max-width: 899px) { .close { height: calc(var(--vh) * 230); } }
.is-static .close { height: auto; }

/* desktop dive: the Flow clip, scrubbed */
.dive { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; visibility: hidden; transform-origin: 0 0; pointer-events: none; overflow: hidden; background: var(--cacau); will-change: transform, opacity; }
.dive__poster, .dive__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dive__video { opacity: 0; }
.dive__video.is-live { opacity: 1; }
@media (max-width: 899px) { .dive { display: none; } .cb--where, .cb--nav { top: auto; } }
.is-static .dive { display: none; }

.intro { height: calc(var(--vh) * 450); }
.intro__mark { top: calc(var(--vh) * 202); }
@media (max-width: 899px) { .intro { height: calc(var(--vh) * 400); } .intro__mark { top: calc(var(--vh) * 162); } }
.is-static .intro { height: auto; }

@media (min-width: 900px) { .hero__copy { width: min(380px, 24vw); } .hero__scene { left: 49vw; } }

/* her photo melts into the white on every side: the mask reaches zero before the box edge */
@media (min-width: 900px) { .hero__scene { -webkit-mask-image: radial-gradient(50% 52% at 50% 44%, #000 44%, rgba(0, 0, 0, .55) 70%, transparent 100%); mask-image: radial-gradient(50% 50% at 50% 44%, #000 44%, rgba(0, 0, 0, .55) 70%, transparent 100%); } }
.is-static .mic--l { transform: translateX(-46%); }
.is-static .mic--r { transform: translateX(46%); }

@media (max-width: 899px) { .bench__p { white-space: normal; font-size: 1.08rem; line-height: 1.15; } .bench__phrases { height: 2.6rem; } }

/* the phone now has its own 9:16 dive clip */
@media (max-width: 899px) { .dive { display: block; } }
.is-static .dive { display: none; }

/* =====================================================================
   v6 · refino 1 (brief-home-v6-refino-1.md): smooth in real time, new Primeira consulta, the v5 lake
   ===================================================================== */

/* dive: frame sequence in a canvas; the phone window closes by scale + counter-scale (no clip-path) */
.dive__seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 0 0; }
.dive__seq.is-live { opacity: 1; }
.dive__poster { transform-origin: 0 0; }
.dive { contain: strict; }

/* tratamentos: the card underneath dims with an overlay's opacity, not filter: brightness */
.deck { --dim: 0; }
.deck::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #1d120c; opacity: var(--dim); }

/* onde atendo: a veil slides away (transform), no animated clip-path */
.atendo__clip { clip-path: none; will-change: auto; }
.atendo__window { will-change: transform; }
.atendo__veil { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, var(--champanhe), var(--areia)); will-change: transform; pointer-events: none; }
.atendo__img { will-change: transform; }
.js:not(.is-static) .atendo__text > * { will-change: transform, opacity; }
@media (max-width: 899px) { .atendo__veil { display: none; } }
.is-static .atendo__veil { display: none; }

/* instagram: the arrows sit in the middle of the screen, under the carousel */
.ig__controls { justify-content: center; max-width: none; }

/* primeira consulta (desktop): everything sized from the width available, so the final state fits one screen */
.pc .w { display: inline-block; will-change: transform; }
.pc__intro { visibility: hidden; pointer-events: none; }
.pc__t2, .pc__sub2 { white-space: nowrap; }
@media (min-width: 900px) {
  .pc__track { gap: var(--pc-gap, 32px); }
  .pc__head { width: var(--pc-head, 22vw); }
  .pc__title, .pc__t2 { font-size: var(--pc-title, 4.4rem); }
  .pc__sub, .pc__sub2 { font-size: var(--pc-sub, 1.1rem); margin-top: 1rem; }
  .pc__steps { gap: var(--pc-gap, 32px); margin: 0 !important; }
  .pc__step { width: var(--pc-step, 22vw); }
  .pc__img { height: var(--pc-photo, 46vh); }
  .pc__n { font-size: var(--pc-num, 7rem); }
  .pc__st { font-size: var(--pc-st, 1.6rem); margin-top: 26px; }
  .pc__sp { font-size: calc(var(--pc-st, 1.6rem) * 0.62); }
  .pc__end { width: var(--pc-end, 20vw); margin-left: 0; }
  .pc__note { font-size: var(--pc-note, 2.6rem); }
  .pc__link { will-change: transform, opacity; }
}

/* fechamento: the section slides in under Dúvidas, the lake is there as soon as the questions end */
.ig, .faq { position: relative; z-index: 2; background: var(--branco); }
.close { position: relative; z-index: 1; height: calc(var(--vh) * 340); margin-top: calc(var(--vh) * -100); border-top: 0; }
.close__stage { background: var(--branco); }
.fec { top: 50%; width: min(calc(var(--vh) * 56), 37vw); z-index: 1; }
.fec__egg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.close__blocks { z-index: 2; }
.fec__front { z-index: 3; bottom: -20vh; }
.cb--invite { top: 44%; }
.cb--where { top: calc(var(--bar-h) + 6vh); }
.cb--nav { top: 46%; bottom: auto; }
@media (max-width: 899px) {
  .close { height: calc(var(--vh) * 340); margin-top: calc(var(--vh) * -100); }
  .fec { width: 70vw; top: calc(var(--vh) * 34); }
  .fec__front { width: 230vw; bottom: -6vh; }
  .close__blocks { z-index: 4; }
  .cb, .cb--where, .cb--nav { top: auto; bottom: calc(var(--vh) * 6); }
}
.is-static .close { margin-top: 0; height: auto; }

/* refino 1 · hero over the dive: her photo and the copy sit above the frames and fade with the same progress */
.intro__hero { z-index: 4; }
.ocular { z-index: 5; }

/* refino 1 · film timeline: one small egg per stage on the bar; it fills when the bar reaches it */
.film__bar { overflow: visible; margin-bottom: 46px; }
.film__cap { top: 46px; }
.tl-dot { position: absolute; top: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  border: 1px solid rgba(232, 203, 185, .75); background: #3a2419; }
.tl-dot__core { position: absolute; inset: 2.5px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FBE9DA, #E2B394 60%, #B9826A); transform: scale(.18); opacity: .15; will-change: transform, opacity; }
.tl-dot__ring { position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(246, 227, 212, .7); opacity: 0; will-change: transform, opacity; }
.tl-dot__lab { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--areia); opacity: .45; }
.tl-dot:first-of-type .tl-dot__lab { }
@media (max-width: 899px) {
  .film__bar { margin-bottom: 40px; }
  .film__cap { top: 40px; }
  .tl-dot__lab { font-size: .56rem; letter-spacing: .08em; }
}
.is-static .tl-dot { display: none; }

/* refino 1: her photo stays clear of the right microscope, so the cross-fade into the clip keeps the same depth */
@media (min-width: 900px) { .hero__scene { left: 43vw; -webkit-mask-image: radial-gradient(44% 50% at 50% 44%, #000 42%, rgba(0, 0, 0, .5) 70%, transparent 100%); mask-image: radial-gradient(44% 50% at 50% 44%, #000 42%, rgba(0, 0, 0, .5) 70%, transparent 100%); } }

/* refino 1 · depth order of the passage: microscopes in front of her and the copy; the lens (the clip seen
   through the eyepiece) in front of the microscope. The clip layer is always opaque; the lens window grows. */
.intro__hero { z-index: 4; }
.hero__scene { z-index: 0; }
.hero__copy { z-index: 2; }
.mic { z-index: 6; }
.dive { z-index: 5; background: transparent; opacity: 1; contain: none; }
.dive__inner { position: absolute; inset: 0; transform-origin: 0 0; }
.dive__lens { position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; transform-origin: 50% 50%; background: #120b08; will-change: transform; }
.dive__pic { position: absolute; will-change: transform; }
.dive__pic .dive__poster, .dive__pic .dive__seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.dive__lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: var(--glass, 1);
  box-shadow: inset 0 0 0 var(--ring, 6px) #0c0a0a, inset 0 0 0 calc(var(--ring, 6px) * 1.35) rgba(30, 22, 24, .92);
  background: radial-gradient(circle at 38% 34%, rgba(196, 170, 226, .32), rgba(130, 100, 150, .14) 16%, rgba(0, 0, 0, 0) 38%), radial-gradient(circle, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .4) 78%); }

/* refino 1 · item 9: the travelling words carry nothing behind them */
.pc .w { will-change: auto; background: transparent; box-shadow: none; outline: 0; }
.pc .w { overflow: visible; padding: .1em 0 .22em; margin: -.1em 0 -.22em; }
.pc__title, .pc__t2, .pc__head, .pc__intro { overflow: visible; }

.hero__veil { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(28, 16, 14, .5) 0, rgba(18, 10, 8, .72) 55%, rgba(12, 7, 5, .9) 100%); will-change: opacity; }
.is-static .hero__veil { display: none; }

.hero__veil { background: radial-gradient(circle at 50% 50%, rgba(16, 9, 8, .78) 0, rgba(12, 7, 5, .9) 60%, rgba(8, 5, 4, .97) 100%); }
.dive__veil { position: absolute; inset: 0; z-index: 2; background: #0c0705; opacity: 0; pointer-events: none; will-change: opacity; }
.dive__inner { z-index: 1; }

/* the microscope is re-rasterised at its current scale (sharp eyepiece while it comes to the camera) */
.mic { will-change: auto; }

/* refino 1 · item 11: one explanation per stage, stacked in the same cell (height of the longest, nothing jumps) */
.film__ex-stack { display: grid; }
.film__ex { grid-area: 1 / 1; will-change: transform, opacity; }
.film__ex p + p { margin-top: 12px; color: var(--areia); }
.film__ex p { font-size: 1rem; line-height: 1.62; color: var(--creme); }
.is-static .film__ex { position: relative; }
@media (max-width: 899px) {
  .film__explain { position: relative; }
  .film__explain .caps { display: block; font-size: .56rem; padding-bottom: 6px; margin-bottom: 8px; }
  .film__ex .film__explain-2 { display: none; }
  .film__ex p { font-size: .9rem; line-height: 1.5; }
  .film__side { display: flex; flex-direction: column; gap: 10px; }
  .film__caps { margin-top: 6px; }
}

/* the eyepiece the camera goes into is a 4x re-render of the same lens, aligned on the cut-out, so it stays sharp
   at the end of the zoom (crop 768..1024 x 72..328 of the 1024x1536 original; cut-out box starts at 110, 128) */

.mic-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; visibility: hidden; }
.is-static .mic-canvas { display: none; }

/* =====================================================================
   phone composition of its own (brief-home-v6-mobile.md). Desktop untouched: everything below is phone-only
   or hides phone-only pieces on desktop.
   ===================================================================== */
.hero__page { position: absolute; inset: 0; will-change: transform; }
.hero__fade, .hero__mkicker, .hero__phrase, .hero__sub, .hero__scroll { display: none; }
.tl-dot { left: var(--pos, 0%); }
@media (max-width: 899px) {
  .intro { height: calc(var(--vh) * 460); }
  .intro__mark { top: calc(var(--vh) * 236); }
  /* 1 · hero: real photo full-bleed, no oval, no halo; fade to the page colour; centred copy and a pill CTA */
  .hero__scene { left: 0; top: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; z-index: 0;
    -webkit-mask-image: none; mask-image: none; }
  .hero__photo { object-position: 50% 12%; }
  .hero__fade { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, var(--branco) 0%, var(--branco) 42%, rgba(255, 253, 247, .82) 66%, rgba(255, 253, 247, 0) 100%); }
  .hero__page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 253, 247, .85), rgba(255, 253, 247, 0)); }
  .hero__mkicker { display: block; position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + 6px); z-index: 2; text-align: center;
    font-size: .54rem; letter-spacing: .3em; color: var(--cafe); }
  .hero__copy { top: auto; bottom: calc(var(--vh) * 7); left: 50%; width: calc(100% - 2 * var(--gutter)); align-items: center; text-align: center; transform: translate(-50%, 0); }
  .hero__copy .hero__kicker, .hero__cv { display: none; }
  .hero__title { font-size: clamp(2.2rem, 10vw, 2.7rem); }
  .hero__sub { display: block; margin-top: 12px; max-width: 30ch; font-size: .98rem; line-height: 1.5; color: var(--cafe); }
  .hero__cta { width: 100%; max-width: 20rem; min-height: 54px; margin-top: 22px; border-radius: 999px; font-size: 1.06rem; }
  .hero__scroll { display: block; margin-top: 16px; width: 1px; height: 26px; background: rgba(60, 38, 27, .35); }
  /* 2 · the phrase between the microscopes */
  .hero__phrase { display: block; position: absolute; left: 50%; top: 50%; z-index: 3; width: 56vw; text-align: center;
    font-size: clamp(1.9rem, 8.6vw, 2.3rem); line-height: 1.05; transform: translate(-50%, -50%); will-change: transform, opacity; }
  .mic { height: calc(var(--vh) * 40); }
  /* 3 · the film, vertical and full-bleed; text on top; vertical timeline on the left edge */
  .intro__film { display: block; padding: 0; }
  .intro__film::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64%; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(34, 20, 14, .94) 0%, rgba(34, 20, 14, .8) 52%, rgba(34, 20, 14, 0) 100%); }
  .film__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  .film__poster, .film__video { object-position: 66% 50%; }
  .film__title { position: absolute; z-index: 2; top: calc(var(--bar-h) + 8px); left: 44px; right: var(--gutter); padding: 0; font-size: 1.5rem; }
  .film__side { position: absolute; z-index: 2; top: calc(var(--bar-h) + 52px); left: 44px; right: var(--gutter); margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .film__caps { order: -1; position: static; min-height: 10.5rem; margin: 0; }
  .film__cap { top: 0; font-size: 1rem; line-height: 1.5; transform-origin: 0 0; }
  .film__cap strong { font-size: 2.15rem; line-height: 1.05; margin-bottom: 8px; }
  .film__bar { position: absolute; left: -26px; top: 0; width: 1px; height: calc(var(--vh) * 62); margin: 0; background: rgba(250, 235, 224, .28); }
  .film__fill { transform-origin: 0 0; }
  .tl-dot { left: 0; top: var(--pos, 0%); }
  .tl-dot__lab { top: 50%; left: 14px; transform: translateY(-50%); }
  .film__explain .caps { font-size: .56rem; }
  .film__note { display: none; }
  /* 4 · primeira consulta: the line comes down, everything rises from below (no lateral entrance) */
  .pc__img, .pc__n { transform-origin: 50% 100%; }
}

/* refino 1 · desktop fixes 22/10 (2): film smaller, timeline bigger; closing scene stays pinned and the footer rises over it */
@media (min-width: 900px) {
  .intro__film { grid-template-columns: auto minmax(300px, 1fr); }
  .film__frame { width: min(calc((100vw - 2 * var(--gutter)) * .6), calc((var(--vh) * 100 - var(--bar-h) - 7.2vh - 2.6vh - 4.6rem) * 16 / 9)); }
  .film__side { padding-top: 4px; }
  .film__explain { max-width: 46ch; }
  .film__bar { margin: 18px 0 64px; height: 2px; }
  .film__fill { height: 2px; }
  .film__cap { top: 64px; }
  .film__caps { min-height: 13rem; }
  .tl-dot { width: 24px; height: 24px; margin: -11px 0 0 -12px; border-width: 1.5px; box-shadow: 0 0 0 6px rgba(232, 203, 185, .08), 0 0 18px rgba(246, 227, 212, .18); }
  .tl-dot__core { inset: 3.5px; }
  .tl-dot__ring { inset: -8px; }
  .tl-dot__lab { top: 34px; font-size: .8rem; letter-spacing: .12em; opacity: .7; }
  .tl-dot:first-of-type .tl-dot__lab { left: 0; transform: none; }
}
.close { height: calc(var(--vh) * 340 + var(--foot-h, 0px)); }
.foot { position: relative; z-index: 5; margin-top: calc(-1 * var(--foot-h, 0px)); box-shadow: 0 -18px 40px rgba(34, 20, 14, .14); }
.is-static .close { height: auto; }
.is-static .foot { margin-top: 0; }
@media (min-width: 900px) { .tl-dot--first .tl-dot__lab { left: -6px; transform: none; } }

/* refino 1 · text sharpness (22/10): text blocks are centred by layout, never by translate(-50%) */
.hero__copy { will-change: auto; }
@media (min-width: 900px) {
  .hero__copy { top: 0; bottom: 0; justify-content: center; transform: none; }
  .is-static .hero__copy { top: 0; bottom: 0; transform: none; }
}
.pc__intro { left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: max-content; transform: none; will-change: auto; }
.pc__head, .pc__n, .film__ex, .js:not(.is-static) .atendo__text > * { will-change: auto; }
@media (max-width: 899px) {
  .hero__copy { left: var(--gutter); right: var(--gutter); width: auto; transform: none; }
  .is-static .hero__copy { left: var(--gutter); right: var(--gutter); width: auto; transform: none; }
  .hero__phrase { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 56vw; height: max-content; transform: none; will-change: auto; }
}
@media (min-width: 900px) { .cb--invite { top: 0; bottom: 12%; height: max-content; margin: auto 0; transform: none; } }

/* refino 1 · instagram runs on its own (transform loop); native horizontal scroll replaced */
.ig__view { overflow: hidden; touch-action: pan-y; cursor: grab; }
.ig__rail { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
.ig__rail.is-drag { cursor: grabbing; }
.ig__item { scroll-snap-align: none; }
.ig__item img { pointer-events: none; }
@media (min-width: 900px) { .film__frame { align-self: center; } }

/* phone · round 2 (22/10): hero page owns its copy; white ground for the phrase screen; film text at the bottom */
.hero__bg { display: none; }
@media (max-width: 899px) {
  .hero__bg { display: block; position: absolute; inset: 0; z-index: 0; background: var(--branco); pointer-events: none; }
  .hero__mkicker { text-shadow: 0 1px 10px rgba(255, 253, 247, .9); }
  /* film: the image breathes on top and in the middle; the text sits at the bottom, under the thumb */
  .intro__film::after { top: auto; bottom: 0; height: 56%;
    background: linear-gradient(to top, rgba(34, 20, 14, .92) 0%, rgba(34, 20, 14, .85) 45%, rgba(34, 20, 14, 0) 100%); }
  .intro__film::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(34, 20, 14, .6), rgba(34, 20, 14, 0)); }
  .film__title { top: calc(var(--bar-h) + 10px); left: var(--gutter); font-size: 1.15rem; }
  .film__side { inset: 0; top: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
    padding: 0 var(--gutter) calc(26px + env(safe-area-inset-bottom)) var(--gutter); pointer-events: none; }
  .film__explain { display: contents; }
  .film__explain > .caps { order: 1; margin: 0 0 10px; padding-bottom: 8px; font-size: .56rem; color: var(--areia); }
  .film__caps { order: 2; position: relative; min-height: 0; height: 2.7rem; margin: 0 0 10px; }
  .film__cap { top: 0; font-size: 0; line-height: 0; }
  .film__cap strong { font-size: 2.1rem; line-height: 1.1; margin: 0; }
  .film__ex-stack { order: 3; }
  .film__ex p { font-size: .95rem; line-height: 1.55; }
  /* vertical timeline on the left edge, ending above the text block */
  .film__bar { position: absolute; left: 20px; top: calc(var(--bar-h) + 64px); width: 2px; height: calc(var(--vh) * 30); margin: 0; background: rgba(250, 235, 224, .3); }
  .film__fill { width: 100%; height: 100%; transform-origin: 0 0; }
  .tl-dot { left: 1px; top: var(--pos, 0%); }
  .tl-dot__lab { top: 0; left: 26px; line-height: 15px; transform: none; font-size: .62rem; letter-spacing: .14em; opacity: .85; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
}
@media (max-width: 899px) {
  /* captions stacked in one grid cell, so the timeline can be placed against the whole screen */
  .film__caps { position: static; display: grid; height: auto; min-height: 2.4rem; }
  .film__cap { position: relative; grid-area: 1 / 1; top: auto; }
}
@media (max-width: 899px) {
  .film__bar { background: rgba(250, 235, 224, .45); }
  .tl-dot__lab { top: -2px; padding: 2px 9px; line-height: 15px; border-radius: 999px; background: rgba(34, 20, 14, .62); color: var(--creme); text-shadow: none; }
}
@media (max-width: 899px) {
  /* tratamentos: the cards stack as on the desktop — sticky under the menu, the next one rises over it,
     the ones behind step back (scale + veil) and show ~12 px of their top edge */
  .deck { position: sticky; top: calc(var(--bar-h) + 10px + var(--i) * 12px); height: auto; margin-bottom: 18px; }
  .deck__media { height: min(210px, calc(var(--vh) * 25)); }
  .deck__title { margin-top: 10px; font-size: 1.85rem; }
  .deck__p { margin-top: 8px; font-size: .92rem; line-height: 1.5; }
  .deck__foot { margin-top: 14px; }
}

/* footer, compact (22/10): ~200–230 px on the desktop; it rises over the pinned closing scene */
.foot { padding: 44px 0 22px; }
.foot__grid { align-items: start; }
.foot__id { align-items: flex-start; }
.foot__base { margin-top: 26px; padding-top: 14px; }
@media (max-width: 899px) {
  .foot { padding: 32px 0 calc(18px + env(safe-area-inset-bottom)); }
  .foot__grid { gap: 20px; }
  .foot__base { margin-top: 20px; padding-top: 12px; }
}
@media (max-width: 899px) {
  /* fechamento: pinned scene, recomposed for one phone screen — title + CTA on top, the egg in the middle,
     Onde atendo + Navegação in two compact columns over the lake; the footer rises over it at the end */
  .fec { width: 56vw; top: calc(var(--vh) * 52); }
  .cb { bottom: auto; }
  .cb--invite { top: calc(var(--bar-h) + 6px); bottom: auto; left: var(--gutter); right: var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; }
  .close__title { font-size: 1.42rem; line-height: 1.12; }
  .close__title em { margin-top: .15em; }
  .cb--invite .btn { margin-top: 12px; min-height: 48px; border-radius: 999px; padding: 0 26px; }
  .cb--where, .cb--nav { top: auto; bottom: calc(var(--vh) * 3 + env(safe-area-inset-bottom)); width: calc(50% - var(--gutter) - 8px); }
  .cb--where { left: var(--gutter); right: auto; }
  .cb--nav { right: var(--gutter); left: auto; }
  .cb--where .caps, .cb--nav .caps { font-size: .5rem; letter-spacing: .3em; padding-bottom: 6px; margin-bottom: 8px; }
  .cb--where .cb__name { font-size: .92rem; line-height: 1.25; }
  .cb--where address, .cb--where p:not(.caps):not(.cb__name) { font-size: .76rem; line-height: 1.45; margin-top: 4px; }
  .cb--nav nav { grid-template-columns: 1fr; column-gap: 0; }
  .cb--nav nav a { font-size: .76rem; min-height: 22px; }
  .cb__reg { display: none; }
}
@media (max-width: 899px) {
  .close { height: calc(var(--vh) * 315 + var(--foot-h, 0px)); }
  .pc__track { padding-top: 7vh; padding-bottom: 7vh; }
}

/* back to top: discreet cocoa circle, bottom right; appears after the immersive opening */
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--cacau); color: var(--creme); cursor: pointer; padding: 0;
  box-shadow: 0 10px 24px -10px rgba(34, 20, 14, .55);
  opacity: 0; transform: translate3d(0, 14px, 0); visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.totop.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
.totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.totop:focus-visible { outline: 2px solid var(--champanhe); outline-offset: 3px; }
.totop { border: 1px solid rgba(250, 235, 224, .35); }
@media (hover: hover) and (pointer: fine) { .totop:hover { background: var(--cafe); } }
@media (max-width: 899px) { .totop { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .totop, .totop.is-on { transition: none; } }
@media (max-width: 899px) { .foot__base { padding-right: 62px; } }