/* Clínica Mirai — the bust page. Layout and motion follow the "Kin OS" spec; colour and type are Mirai's
   (tokens.css). The content sections at the end carry everything from the old clinicamirai.pt. */

*, ::before, ::after { box-sizing: border-box; }
html { background: var(--site); }
html, body { overflow-x: clip; overscroll-behavior: none; }
body {
  margin: 0; color: var(--ink-1);
  font: 400 var(--t-m)/var(--lh-m) var(--font-text); letter-spacing: var(--tr-m);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
em { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Stage ---------- */
.stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.stage.is-framed { overflow: hidden; background: var(--site); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Header ---------- */
/* One thin glass bar, barely taller than its labels: the brand lockup (a large script M with MIRAI CLINIC set wide
   and centred on its height, on the bar's own glass), the sections in the middle, and the gold booking button.
   "Tratamentos" drops a panel with the six areas, their treatments and a search; "Marcar consulta" goes to the
   contacts (#atendimento). The panel is a sibling of the bar, not a child, so its own backdrop blur sees the page
   and not the bar. */
.hd {
  --hd-inset: calc(var(--u) * 3); --hd-row: calc(var(--u) * 27); --hd-h: calc(var(--hd-row) + var(--hd-inset) * 2);
  --hd-ink: #cfc5b8;
  position: fixed; top: 12px; left: 0; right: 0; z-index: 10;
  width: min(calc(var(--u) * 1080), calc(100% - 24px)); margin: 0 auto;
  font-size: calc(var(--u) * 12.5); font-weight: 500; line-height: 1; white-space: nowrap;
}
.hd__bar {
  display: flex; align-items: center; height: var(--hd-h); padding: var(--hd-inset) var(--hd-inset) var(--hd-inset) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 9);
  background: rgba(74, 62, 53, .55);
  backdrop-filter: blur(calc(var(--u) * 24)) saturate(1.3) brightness(.6);
  -webkit-backdrop-filter: blur(calc(var(--u) * 24)) saturate(1.3) brightness(.6);
  transition: background-color 400ms var(--ease-out);
}
.hd.is-light .hd__bar { background: rgba(51, 43, 37, .78); }
.hd__logo { display: flex; align-items: center; gap: calc(var(--u) * 11); margin-right: var(--s24); }
.mark {
  width: calc(var(--u) * 26); height: calc(var(--u) * 20); background: var(--gold);
  -webkit-mask: url(img/mirai-m-mark.svg) center / contain no-repeat; mask: url(img/mirai-m-mark.svg) center / contain no-repeat;
}
.hd__logo .mark { width: calc(var(--u) * 35); height: calc(var(--u) * 26); }
.hd__word { font: 400 calc(var(--u) * 14) / 1 var(--font-display); letter-spacing: .34em; margin-right: -.34em; padding-top: 1px; color: var(--ivory); }
.hd__nav { display: flex; gap: 2px; margin: 0 auto; }
.hd__nav a, .hd__nav button, .hd__btn {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: var(--hd-row); padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 6); text-transform: uppercase; letter-spacing: var(--tr-caps);
}
.hd button { font: inherit; letter-spacing: var(--tr-caps); border: 0; cursor: pointer; }
.hd__nav a, .hd__nav button { color: var(--hd-ink); background: none; transition: color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
.hd__nav [aria-expanded="true"] { color: var(--ink-1); background: rgba(243, 239, 232, .06); }
.hd__btn { padding: 0 calc(var(--u) * 14); background: var(--gold); color: var(--espresso);
           transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
.hd__btn:active { transform: scale(var(--press)); }
@media (hover: hover) and (pointer: fine) {
  .hd__nav a:hover, .hd__nav button:hover { color: var(--ink-1); background: rgba(243, 239, 232, .06); }
  .hd__btn:hover { background: #d2bc7e; }
}
.js .hd__bar { animation: hd-in var(--dur-in) var(--ease-expo) backwards; }
@keyframes hd-in { from { opacity: 0; transform: translateY(calc(var(--in-y) * -1)); filter: blur(var(--in-blur)); } }

/* Panels. */
.hd__drop {
  position: absolute; top: calc(100% + 6px); padding: var(--s24); border-radius: var(--r-l);
  color: var(--ink-1); white-space: normal; line-height: 1.4; font-size: calc(var(--u) * 14); font-weight: 400; letter-spacing: 0;
  background: rgba(58, 49, 42, .82); backdrop-filter: blur(calc(var(--u) * 28)) saturate(1.3); -webkit-backdrop-filter: blur(calc(var(--u) * 28)) saturate(1.3);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5);
  opacity: 0; translate: 0 -6px; filter: blur(6px); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out), translate 360ms var(--ease-expo), filter var(--dur-ui), visibility 0s var(--dur-ui);
}
.hd__drop.is-open { opacity: 1; translate: 0 0; filter: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.hd__h { margin: 0 0 var(--s12); font-size: calc(var(--u) * 11); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.hd__menu { left: 50%; margin-left: calc(min(calc(var(--u) * 760), 100vw - 48px) / -2); width: min(calc(var(--u) * 760), 100vw - 48px);
            display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s24); }
.hd__areas, .hd__trs { list-style: none; margin: 0; padding: 0; display: grid; }
.hd__areas { gap: 2px; }
.hd__areas button { width: 100%; text-align: left; display: grid; grid-template-columns: calc(var(--u) * 28) 1fr auto; align-items: baseline; gap: var(--s8);
                    padding: calc(var(--u) * 9) var(--s12); border-radius: var(--r-s); background: none; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.hd__areas button span { font: 300 calc(var(--u) * 13) var(--font-display); color: var(--champagne); }
.hd__areas button b { font-weight: 500; color: var(--ink-1); }
.hd__areas button i { font-style: normal; font-size: calc(var(--u) * 12); color: var(--ink-3); }
.hd__areas button:hover, .hd__areas button[aria-current="true"] { background: rgba(243, 239, 232, .08); }
.hd__search { display: flex; align-items: center; gap: var(--s8); height: calc(var(--u) * 40); padding: 0 var(--s12); margin-bottom: var(--s12);
              border-radius: var(--r-s); background: rgba(243, 239, 232, .08); color: var(--ink-3); }
.hd__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hd__search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink-1); font: inherit; }
.hd__search input::placeholder { color: var(--ink-3); }
.hd__trs { gap: 1px; max-height: calc(var(--u) * 280); overflow: auto; }
.hd__trs a { display: flex; justify-content: space-between; gap: var(--s12); padding: var(--s8) var(--s12); border-radius: var(--r-xs); color: var(--ink-2); }
.hd__trs a:hover { background: rgba(243, 239, 232, .06); color: var(--ink-1); }
.hd__trs small { color: var(--ink-3); font-size: calc(var(--u) * 11); letter-spacing: .08em; text-transform: uppercase; }
.hd__trs .none { padding: var(--s8) var(--s12); color: var(--ink-3); }

@media (max-width: 767px) {
  .hd { top: 8px; width: calc(100% - 16px); --hd-row: 32px; --hd-inset: 4px; }
  .hd__nav { display: none; }
  .hd__logo { margin-right: auto; }
  .hd__logo { gap: 8px; }
  .hd__logo .mark { width: 32px; height: 24px; }
  .hd__word { font-size: 12px; letter-spacing: .22em; margin-right: -.22em; }
  .hd__btn { font-size: 11px; padding: 0 10px; }
}

/* ---------- Badge (shared) ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  height: calc(var(--u) * 32); padding: 0 var(--s12); border-radius: var(--r-s);
  background: rgba(243, 239, 232, .12); backdrop-filter: var(--chip-blur); -webkit-backdrop-filter: var(--chip-blur);
  font-size: var(--t-s); font-weight: 500; line-height: 1; color: var(--ink-1); white-space: nowrap;
}
.badge__dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--champagne); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 0; }
.hero__title {
  position: absolute; z-index: 0; left: 0; right: 0; margin: 0;
  top: calc(var(--bust-top, calc(107% - min(78%, 98.4vw))) + 40px);
  --ty: -50%; transform: translateY(var(--ty));
  font-family: var(--font-display); font-size: var(--title-fs, calc((100vw - 48px) / 6.4)); font-weight: 300;
  line-height: var(--lh-d1); letter-spacing: 0; text-transform: uppercase; text-align: center; white-space: nowrap;
  color: var(--taupe);
  -webkit-mask-image: radial-gradient(var(--hrx, 24vh) var(--hry, 30vh) at var(--hx, 50%) var(--hy, 130%), transparent 0%, transparent 64%, #000 100%);
  mask-image: radial-gradient(var(--hrx, 24vh) var(--hry, 30vh) at var(--hx, 50%) var(--hy, 130%), transparent 0%, transparent 64%, #000 100%);
}
@media (max-width: 767px) {
  /* Two lines would sit behind the head on a phone, so the title rests just above the bust instead. */
  .hero__title { white-space: normal; --ty: -100%; top: calc(var(--bust-top, 30%) + 8px); }
  .hero__title span { display: block; }
}
.hero__note {
  position: fixed; left: 24px; bottom: 24px; z-index: 3;
  font-size: var(--t-l); line-height: var(--lh-l); letter-spacing: var(--tr-l);
}
.hero__lead { margin: 0; color: var(--ink-1); text-wrap: balance; font-family: var(--font-display); font-weight: 300; }
.hero__l { display: block; }
.hero__sub { display: block; color: var(--ink-3); font-style: italic; }
@media (max-width: 767px) {
  .hero__note { left: 16px; right: 16px; bottom: 20px; font-size: calc(var(--t-m) * 1.15); }
  .hero__sub { color: var(--ink-2); }
  /* The bust sits behind the text on phones; a glass card keeps the copy readable over it. */
  .screen__head { padding: 16px; border-radius: var(--r-l); background: var(--glass); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); }
}
.js .hero__title { animation: title-in var(--dur-in) var(--ease-expo) backwards; }
.js .hero__lead { animation: block-in var(--dur-in) var(--ease-expo) 60ms backwards; }
@keyframes title-in { from { opacity: 0; transform: translateY(calc(var(--ty) + var(--in-y))); filter: blur(var(--in-blur)); } }
@keyframes block-in { from { opacity: 0; transform: translateY(var(--in-y)); filter: blur(var(--in-blur)); } }

.hero__title, .hero__lead {
  transition: opacity 1100ms var(--ease-expo), translate 1100ms var(--ease-expo), scale 1100ms var(--ease-expo), filter 1100ms var(--ease-expo), visibility 0s;
}
.hero__lead { transition-delay: 80ms; }
.is-hero-out .hero__title, .is-hero-out .hero__lead {
  opacity: 0; visibility: hidden;
  transition: opacity 700ms cubic-bezier(.45, 0, .55, 1), translate 700ms var(--ease-out), scale 700ms var(--ease-out), filter 700ms var(--ease-out), visibility 0s 760ms;
}
.is-hero-out .hero__title { translate: 0 -4vh; scale: .97; filter: blur(16px); }
.is-hero-out .hero__lead { translate: 0 -16px; filter: blur(10px); }
.is-hero-out .hero__lead { transition-delay: 70ms, 70ms, 70ms, 70ms, 830ms; }
.is-hero-out .hero__note { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__title, .js .hero__lead { animation: none; }
  .hero__title, .hero__lead,
  .is-hero-out .hero__title, .is-hero-out .hero__lead {
    translate: none; scale: none; filter: none; transition: opacity 200ms ease, visibility 0s;
  }
}

/* Hero layouts. The site uses Assinatura with the Japanese title (main.js); ?title=atual|lados|base|editorial|vertical
   and ?jp=0 are the other concepts, kept for the lab (desktop only). */
.title-jp .hero__title { font-family: "Shippori Mincho", var(--font-display); font-weight: 400; text-transform: none; }
@media (min-width: 768px) {
  /* Lados: MIRAI and CLINIC stand either side of the face, on its eye line; the line sits centred underneath. */
  .title-lados .hero__title { display: flex; justify-content: space-between; padding: 0 3vw; top: 47vh; font-size: 7.6vw; -webkit-mask-image: none; mask-image: none; }
  .title-lados.title-jp .hero__title { font-size: 6.4vw; }
  .title-lados .hero__note { left: 0; right: 0; text-align: center; font-size: calc(var(--t-l) * .9); }
  .title-lados .hero__l { display: inline; }

  /* Base: the title runs across the foot of the window, cut by the bottom edge, with the face rising out of it;
     the line moves to the top left. */
  .title-base .hero__title { top: auto; bottom: 0; --ty: 14%; color: #5d5249; -webkit-mask-image: none; mask-image: none; }
  .title-base .hero__note { top: 13vh; bottom: auto; }

  /* Assinatura: a quiet signature over the face, set small and wide; the line centred under the chin. */
  .title-assinatura .hero__title { top: 17vh; font-size: calc(var(--u) * 24); letter-spacing: .62em; margin-right: -.62em; color: var(--sand); -webkit-mask-image: none; mask-image: none; }
  .title-assinatura.title-jp .hero__title { top: 15vh; font-size: calc(var(--u) * 46); letter-spacing: .42em; margin-right: -.42em; }
  .title-assinatura .hero__note { left: 0; right: 0; bottom: 4vh; text-align: center; font-size: calc(var(--t-l) * .72); }
  .title-assinatura .hero__l { display: inline; }

  /* Editorial: no big title; the line itself is the display type, split either side of the face. */
  .title-editorial .hero__title { display: none; }
  .title-editorial .hero__note { inset: 0; font-size: clamp(32px, 3.6vw, 64px); line-height: 1.05; pointer-events: none; }
  .title-editorial .hero__l { position: absolute; top: 40vh; max-width: 26vw; }
  .title-editorial .hero__l:first-child { left: 4vw; }
  .title-editorial .hero__l:nth-child(2) { right: 4vw; top: 52vh; text-align: right; }
  .title-editorial .hero__sub { position: absolute; left: 0; right: 0; bottom: 5vh; text-align: center; font-size: calc(var(--t-l) * .8); }

  /* Vertical: the title stands up the left edge, top to bottom (Japanese reads upright here); the line bottom
     right. */
  .title-vertical .hero__title { left: 2vw; right: auto; top: 50%; writing-mode: vertical-rl; font-size: 12.5vh; line-height: 1; -webkit-mask-image: none; mask-image: none; }
  .title-vertical.title-jp .hero__title { font-size: 13vh; letter-spacing: .12em; }
  .title-vertical .hero__note { left: auto; right: 24px; text-align: right; }
}

@media (max-width: 767px) {
  /* Assinatura on a phone: the signature on one line above the face. */
  .title-assinatura .hero__title { white-space: nowrap; --ty: -100%; top: calc(var(--bust-top, 30%) - 12px); font-size: 17px; letter-spacing: .5em; margin-right: -.5em;
                                   color: var(--sand); -webkit-mask-image: none; mask-image: none; }
  .title-assinatura .hero__title span { display: inline; }
  .title-assinatura.title-jp .hero__title { font-size: 30px; letter-spacing: .38em; margin-right: -.38em; }
}

/* Ten more hero layouts for the gallery (?title=…, lab only; gallery: title-gallery.html). Each has a desktop and a
   phone version. They all keep the Japanese title and the line, and none of them overlaps the face. */
:is(.title-coluna, .title-canto, .title-queixo, .title-eco, .title-pilha, .title-legenda, .title-cantos, .title-bilingue,
    .title-lateral, .title-rodape) .hero__title { -webkit-mask-image: none; mask-image: none; color: var(--sand); white-space: nowrap; }
:is(.title-coluna, .title-canto, .title-queixo, .title-eco, .title-pilha, .title-legenda, .title-cantos, .title-bilingue,
    .title-lateral, .title-rodape) .hero__l { display: inline; }
/* Shared phone base: one line, no fitted size. */
@media (max-width: 767px) {
  :is(.title-coluna, .title-canto, .title-queixo, .title-legenda, .title-bilingue, .title-lateral, .title-rodape) .hero__title span { display: inline; }
}

/* 1 Coluna: the title stands upright down the right edge; the line bottom left. */
.title-coluna .hero__title { left: auto; right: 5vw; top: 50%; --ty: -50%; writing-mode: vertical-rl; font-size: calc(var(--u) * 40); letter-spacing: .5em; line-height: 1; }
@media (max-width: 767px) { .title-coluna .hero__title { right: 14px; font-size: 22px; letter-spacing: .45em; } }

/* 2 Canto: a diagonal; the title small at the top left, the line at the bottom right. */
.title-canto .hero__title { left: 24px; right: auto; top: 13vh; --ty: 0%; font-size: calc(var(--u) * 34); letter-spacing: .32em; text-align: left; }
.title-canto .hero__note { left: auto; right: 24px; text-align: right; }
@media (max-width: 767px) {
  .title-canto .hero__title { left: 16px; top: 76px; font-size: 22px; }
  .title-canto .hero__note { left: 16px; right: 16px; }
}

/* 3 Queixo: turned over; the line opens above the face and the signature closes under the chin. */
.title-queixo .hero__title { top: auto; bottom: 5vh; --ty: 0%; font-size: calc(var(--u) * 32); letter-spacing: .5em; margin-right: -.5em; }
.title-queixo .hero__note { left: 0; right: 0; top: 11vh; bottom: auto; text-align: center; font-size: calc(var(--t-l) * .8); }
@media (max-width: 767px) {
  .title-queixo .hero__title { bottom: 7vh; font-size: 24px; letter-spacing: .42em; margin-right: -.42em; }
  .title-queixo .hero__note { left: 16px; right: 16px; top: 10vh; font-size: 18px; }
}

/* 4 Eco: the title huge and faint behind the face, like a watermark; the line bottom left. */
.title-eco .hero__title { top: 50%; --ty: -50%; font-size: 15vw; letter-spacing: .02em; color: rgba(217, 207, 193, .1); }
/* The intro opens with the title (main.js): its letters fade in quickly in reading order, with a faint warm tint,
   just before the mask's sweep starts (lib/cloud.js). Held back until their font is ready. */
.js.intro-wait .hero__title, .js.is-intro .hero__title { animation: none; }
.js.intro-wait .hero__title i { opacity: 0; }
.hero__title i { font-style: normal; }
.is-intro .hero__title i { animation: eco-char .7s var(--ease-out) backwards; }
.is-intro .hero__title i:nth-child(2) { animation-delay: .08s; }
.is-intro .hero__title i:nth-child(3) { animation-delay: .16s; }
.is-intro .hero__title i:nth-child(4) { animation-delay: .24s; }
.is-intro .hero__title i:nth-child(5) { animation-delay: .32s; }
.is-intro .hero__title span + span i:nth-child(1) { animation-delay: .4s; }
.is-intro .hero__title span + span i:nth-child(2) { animation-delay: .48s; }
@keyframes eco-char {
  0% { opacity: 0; filter: blur(6px); color: rgba(230, 207, 162, 0); }
  50% { opacity: 1; filter: blur(0); color: rgba(230, 207, 162, .16); }
}
@media (max-width: 767px) {
  .title-eco .hero__title { top: 50%; --ty: -50%; left: 0; right: 0; writing-mode: vertical-rl; font-size: 13vh; white-space: nowrap; line-height: 1; margin: 0 auto; width: max-content; }
  .title-eco .hero__title span { display: inline; }
}

/* 5 Pilha: クリニック over 未来, stacked in a column at the left, with the line beneath it. */
.title-pilha .hero__title { left: 6vw; right: auto; top: 33vh; --ty: 0%; font-size: 4.6vw; line-height: 1.15; letter-spacing: .12em; text-align: left; color: var(--ivory); }
.title-pilha .hero__title span { display: block; }
.title-pilha .hero__note { left: 6vw; bottom: auto; top: calc(33vh + 4.6vw * 2.5); font-size: calc(var(--t-l) * .75); }
.title-pilha .hero__l { display: block; }
@media (max-width: 767px) {
  .title-pilha .hero__title { left: 16px; top: 74px; font-size: 34px; }
  .title-pilha .hero__note { left: 16px; top: auto; bottom: 20px; font-size: 18px; }
}

/* 6 Legenda: a museum label; the small title sits just above the line, both at the bottom left. */
.title-legenda .hero__title { left: 24px; right: auto; top: auto; bottom: calc(24px + var(--t-l) * 1.12 * 3 + 18px); --ty: 0%; font-size: calc(var(--u) * 20); letter-spacing: .5em; text-align: left; }
@media (max-width: 767px) { .title-legenda .hero__title { left: 16px; bottom: 112px; font-size: 16px; } }

/* 7 Cantos: クリニック in the top-left corner and 未来 in the bottom-right, framing the face; the line bottom left. */
.title-cantos .hero__title { inset: 0; height: 100vh; --ty: 0%; font-size: 6vw; color: var(--sand); }
.title-cantos .hero__title span { position: absolute; letter-spacing: .1em; }
.title-cantos .hero__title span:first-child { left: 24px; top: 12vh; }
.title-cantos .hero__title span:last-child { right: 24px; bottom: 4vh; }
@media (max-width: 767px) {
  .title-cantos .hero__title { font-size: 40px; top: 0; }
  .title-cantos .hero__title span:first-child { left: 16px; top: 74px; }
  .title-cantos .hero__title span:last-child { right: 16px; bottom: 116px; }
}

/* 8 Bilíngue: the Japanese signature over the face with MIRAI CLINIC set small beneath it; the line under the chin. */
.title-bilingue .hero__title { top: 12vh; --ty: 0%; font-size: calc(var(--u) * 46); letter-spacing: .42em; margin-right: -.42em; }
.title-bilingue .hero__title::after { content: "MIRAI CLINIC"; display: block; margin-top: .55em; font: 400 calc(var(--u) * 13) / 1 var(--font-display); letter-spacing: .6em; color: var(--taupe); }
.title-bilingue .hero__note { left: 0; right: 0; bottom: 4vh; text-align: center; font-size: calc(var(--t-l) * .72); }
@media (max-width: 767px) {
  .title-bilingue .hero__title { top: calc(var(--bust-top, 30%) - 16px); --ty: -100%; font-size: 28px; letter-spacing: .36em; margin-right: -.36em; }
  .title-bilingue .hero__title::after { font-size: 11px; }
}

/* 9 Lateral: the title and the line as one text block to the right of the face, centred on it. */
.title-lateral .hero__title { left: 67vw; right: auto; top: 40vh; --ty: -100%; font-size: calc(var(--u) * 34); letter-spacing: .32em; text-align: left; }
.title-lateral .hero__note { left: 67vw; right: 24px; bottom: auto; top: 43vh; font-size: calc(var(--t-l) * .78); }
.title-lateral .hero__l { display: block; }
@media (max-width: 767px) {
  .title-lateral .hero__title { left: 16px; top: 74px; --ty: 0%; font-size: 22px; }
  .title-lateral .hero__note { left: 16px; top: 112px; font-size: 17px; }
  .title-lateral .hero__l { display: inline; }
}

/* 10 Rodapé: a footer band; the title at the left and the line at the right, on one baseline under a hairline. */
.title-rodape .hero__title { left: 24px; right: auto; top: auto; bottom: 30px; --ty: 0%; font-size: calc(var(--u) * 30); letter-spacing: .36em; text-align: left; }
.title-rodape .hero__note { left: auto; right: 24px; text-align: right; font-size: calc(var(--t-l) * .66); }
.title-rodape .hero__note::before { content: ""; position: fixed; left: 24px; right: 24px; bottom: calc(24px + var(--t-l) * .66 * 1.12 * 2 + 22px); height: 1px; background: rgba(243, 239, 232, .16); }
@media (max-width: 767px) {
  .title-rodape .hero__title { left: 16px; bottom: auto; top: 74px; font-size: 20px; }
  .title-rodape .hero__note { left: 16px; right: 16px; text-align: left; font-size: 17px; }
  .title-rodape .hero__note::before { left: 16px; right: 16px; top: 112px; bottom: auto; }
}

/* ---------- OS section ---------- */
.os { position: relative; z-index: 3; height: 420vh; }
.os__pin { position: sticky; top: 0; height: 100vh; overflow: clip; pointer-events: none; }
.frame-head {
  position: absolute; z-index: 1; top: 5.5%; left: 0; right: 0;
  display: grid; justify-items: center; gap: var(--s16); opacity: 0; transform-origin: 50% 0; text-align: center;
}
.frame-head__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--t-l); line-height: var(--lh-l); letter-spacing: var(--tr-l); color: var(--ink-1); }
.frame-head__title span { display: block; color: var(--ink-3); font-style: italic; }
.frame-head__note { margin: calc(var(--s8) * -1) 0 0; font-size: calc(var(--u) * 11); letter-spacing: .04em; color: var(--ink-3); }

.ow {
  position: absolute; isolation: isolate; will-change: transform, opacity; contain: layout style; opacity: 0;
  border-radius: var(--r-m); background: rgba(51, 43, 37, calc(.8 * var(--glass, 0))); box-shadow: var(--l-lift);
  color: var(--ink-1); font-size: var(--t-s); line-height: 1.2; letter-spacing: var(--tr-s);
  --ink-2: #ddd4c8; --ink-3: #c4bab0;
}
.ow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(58, 49, 42); opacity: var(--solid, 1); pointer-events: none; }
.ow.has-glass {
  backdrop-filter: blur(calc(var(--u) * 16 * var(--glass))) saturate(calc(1 + .3 * var(--glass)));
  -webkit-backdrop-filter: blur(calc(var(--u) * 16 * var(--glass))) saturate(calc(1 + .3 * var(--glass)));
}
/* Before/after cards. The after image sits on top, clipped from the right; --x (0–100) is how much of it shows,
   driven by scroll. The divider line fades in as it leaves one edge and out as it reaches the other. */
.ba { display: grid; gap: var(--s8); margin: 0; padding: calc(var(--u) * 6) calc(var(--u) * 6) var(--s8); border-radius: var(--r-l); }
.ba__view {
  --x: 0; position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: calc(var(--r-l) - var(--u) * 6);
}
.ba__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba__after { clip-path: inset(0 calc(100% - var(--x) * 1%) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 1.5px; margin-left: -.75px; background: var(--ivory);
            box-shadow: 0 0 calc(var(--u) * 8) rgba(0, 0, 0, .35); opacity: clamp(0, min(var(--x), 100 - var(--x)) / 6, 1); }
.ba__tag { position: absolute; bottom: var(--s8); padding: calc(var(--u) * 3) var(--s8); border-radius: var(--r-xs); font-size: calc(var(--u) * 11); line-height: 1.2;
           letter-spacing: .06em; text-transform: uppercase; color: var(--ivory); background: rgba(42, 35, 30, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
           transition: opacity var(--dur-ui) var(--ease-out); }
.ba__tag--before { right: var(--s8); opacity: clamp(0, (92 - var(--x)) / 10, 1); }
.ba__tag--after { left: var(--s8); opacity: clamp(0, (var(--x) - 8) / 10, 1); }
.ba figcaption { display: grid; gap: 2px; padding: 0 calc(var(--u) * 6); font-weight: 500; line-height: 1.25; }
.ba figcaption span { font-weight: 400; color: var(--ink-3); }

.ba--toxina { left: 4vw; top: 19vh; width: calc(var(--u) * 270); z-index: 4; }
.ba--laser-co2 { left: 19vw; top: 45vh; width: calc(var(--u) * 150); z-index: 6; }
.ba--blefaroplastia { left: 4.5vw; top: 64vh; width: calc(var(--u) * 240); z-index: 5; }
.ba--labios { left: 67vw; top: 13vh; width: calc(var(--u) * 220); z-index: 4; }
.ba--peeling { left: 65vw; top: 47vh; width: calc(var(--u) * 140); z-index: 6; }
.ba--papada { left: 75vw; top: 58vh; width: calc(var(--u) * 260); z-index: 5; }

@media (max-width: 767px) {
  .ba--wide { display: none; }
  .ba--toxina { left: 4vw; top: 7vh; width: 44vw; }
  .ba--labios { left: 56vw; top: 7vh; width: 38vw; }
  .ba--blefaroplastia { left: 4vw; top: 62vh; width: 46vw; }
  .ba--papada { left: 50vw; top: 66vh; width: 46vw; }
  .ba figcaption span { display: none; }
  /* The frame is narrow here: the headline wraps inside it, and the badge (under the top cards) goes. */
  .frame-head .badge { display: none; }
  .frame-head { top: 9%; }
  .frame-head__title, .frame-head__note { max-width: 50vw; white-space: normal; }
}

/* ---------- Text screens ---------- */
/* Each screen holds its copy in place: the pin sticks to the window for the section's length while the bust moves
   around it, and the copy fades and sharpens in and out where it stands (reveal.js, by scroll). */
.screen { position: relative; z-index: 2; height: 220vh; }
.screen__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.screen__col { display: grid; gap: var(--s72); width: min(calc(var(--u) * 520), 38vw); }
.screen--right .screen__col { margin-left: 56vw; }
.screen--left .screen__col { margin-left: 24px; }
.screen__head { display: grid; gap: var(--s24); }
.screen__title { margin: 0; font-family: var(--font-display); font-size: calc(var(--t-l) * 1.15); font-weight: 300; line-height: var(--lh-l); letter-spacing: var(--tr-l); color: var(--ink-1); }
.screen__sub { display: block; color: var(--ink-3); font-style: italic; }
.screen__text { margin: 0; max-width: 40ch; color: var(--ink-2); }
@media (max-width: 767px) {
  .screen__pin { align-items: flex-end; padding-bottom: 12vh; }
  .screen__col, .screen--right .screen__col, .screen--left .screen__col { width: auto; margin: 0 16px; gap: var(--s48); }
}

.panel {
  display: grid; gap: var(--s24); padding: var(--s24); border-radius: var(--r-l);
  background: rgba(58, 49, 42, .56); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter);
  --ink-3: #c2b8ad;
}
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s16); }
.panel__title { margin: 0; font-size: var(--t-m); font-weight: 500; color: var(--ink-1); }
.panel__note { margin: 0; font-size: var(--t-s); color: var(--ink-3); }
/* A panel that is a link (the team faces → the Equipa section). */
a.panel { color: inherit; transition: background-color var(--dur-ui) var(--ease-out); }
.panel--link .panel__note { display: flex; justify-content: space-between; gap: var(--s16); }
.panel__more { color: var(--ink-2); white-space: nowrap; }
.panel__more i { display: inline-block; font-style: normal; transition: translate var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.panel:hover { background: rgba(70, 59, 51, .66); }
  a.panel:hover .panel__more { color: var(--ink-1); }
  a.panel:hover .panel__more i { translate: 3px 0; }
}
.panel__note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 239, 232, .3); }

:root { --rv-in: 1200ms; --rv-out: 520ms; }

.faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.faces li { aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: var(--fill-1); }
.faces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.units { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); }
.units p { margin: 0 0 var(--s12); font-size: var(--t-s); color: var(--ink-2); }
.units .units__city { margin-bottom: var(--s4); font-family: var(--font-display); font-size: calc(var(--t-m) * 1.2); color: var(--ink-1); }
.units__btn {
  display: inline-flex; align-items: center; height: calc(var(--u) * 36); padding: 0 var(--s12); border-radius: var(--r-s);
  background: var(--gold); color: var(--espresso); font-size: var(--t-s); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.units__btn:active { transform: scale(var(--press)); }
@media (hover: hover) and (pointer: fine) { .units__btn:hover { background: #d2bc7e; } }

/* Reveal cascade. */
.js .rv {
  --rv-y: 32px; opacity: 0; transform: translateY(var(--rv-y)); filter: blur(calc(var(--u) * 12));
  transition: opacity var(--rv-out) var(--ease-out), transform var(--rv-out) var(--ease-out), filter var(--rv-out) var(--ease-out);
}
.js [data-dir="up"]:not(.is-in) .rv, .js .rv[data-dir="up"]:not(.is-in) { --rv-y: -24px; }
.js .rv--word { display: inline-block; --rv-y: .35em; filter: blur(calc(var(--u) * 10)); }
.js .rv--panel { filter: none; }
.js .rv--panel { --rv-y: 48px; }
.js .is-in .rv, .js .rv.is-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity var(--rv-in) var(--ease-expo), transform var(--rv-in) var(--ease-expo), filter var(--rv-in) var(--ease-expo);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js .is-in .rv--word { transition-duration: 1100ms; }
/* On the pinned screens nothing moves: the copy only fades and sharpens, panels included. */
.js .screen .rv { --rv-y: 0px; }
.js .screen .rv--panel { filter: blur(calc(var(--u) * 12)); }
.js .screen .is-in .rv--panel, .js .screen .rv--panel.is-in { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .is-in .rv, .js .rv.is-in { transform: none; filter: none; transition: opacity 200ms ease; transition-delay: 0ms; }
}

/* ---------- Bottom veil ---------- */
.veil { position: fixed; left: 0; right: 0; bottom: 0; height: 16vh; z-index: 2; pointer-events: none; }
.veil i { position: absolute; inset: 0; }
/* Gallery layouts that set type along the bottom edge: the veil (for scrolling copy) stays off while the hero is up. */
.veil { transition: opacity 600ms var(--ease-out); }
html:is(.title-queixo, .title-cantos, .title-rodape, .title-eco):not(.is-hero-out) .veil { opacity: 0; }

/* ---------- Content sections (everything from the old clinicamirai.pt) ---------- */
.sect { position: relative; z-index: 2; background: var(--site); padding: var(--s120) var(--gutter); }
.sect + .sect { border-top: 1px solid var(--rule); }
.sect--light { background: var(--ivory); color: var(--espresso); --ink-1: var(--espresso); --ink-2: #5e554d; --ink-3: var(--taupe); --rule: var(--l-rule); --fill-1: var(--l-fill-1); --fill-2: var(--l-fill-2); }
.sect__in { max-width: calc(var(--u) * 1240); margin: 0 auto; }
.sect__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s48); align-items: end; margin-bottom: var(--s72); }
.kicker { margin: 0 0 var(--s16); font-size: var(--t-s); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--champagne); }
.sect--light .kicker { color: var(--wood); }
.sect__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--d-2); line-height: var(--lh-d2); letter-spacing: -.02em; color: var(--ink-1); text-wrap: balance; }
.sect__title em { color: var(--champagne); }
.sect--light .sect__title em { color: var(--wood); }
.lede { margin: 0; color: var(--ink-2); max-width: 52ch; }
.lede + .lede { margin-top: var(--s16); }
.prose p { margin: 0 0 var(--s16); color: var(--ink-2); max-width: 64ch; }
.prose p:last-child { margin-bottom: 0; }
.cta {
  display: inline-flex; align-items: center; gap: var(--s12); height: var(--btn-h); padding: 0 var(--s24); margin-top: var(--s32);
  border-radius: var(--r-s); background: var(--gold); color: var(--espresso);
  font-size: var(--t-s); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caps);
  transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.cta--ghost { background: var(--fill-2); color: var(--ink-1); }
.cta:active { transform: scale(var(--press)); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #d2bc7e; } .cta--ghost:hover { background: var(--fill-3); } }

/* About. */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s72); }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s24); margin-top: var(--s48); }
.mv div { padding: var(--s24); border-radius: var(--r-l); background: var(--fill-1); }
.mv h3 { margin: 0 0 var(--s8); font-family: var(--font-display); font-weight: 400; font-size: calc(var(--t-m) * 1.25); color: var(--ink-1); }
.mv p { margin: 0; color: var(--ink-2); font-size: var(--t-s); line-height: 1.5; }
.timeline { display: grid; gap: var(--s24); margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: calc(var(--u) * 90) 1fr; gap: var(--s16); padding-top: var(--s16); border-top: 1px solid var(--rule); }
.timeline b { font-family: var(--font-display); font-weight: 300; font-size: calc(var(--t-l) * 1.1); line-height: 1; color: var(--wood); }
.timeline p { margin: 0; color: var(--ink-2); }

/* Treatments: six areas, then the full catalogue. */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s16); margin: 0 0 var(--s72); padding: 0; list-style: none; }
.area { display: grid; gap: var(--s12); padding: var(--s24); border-radius: var(--r-l); background: rgba(58, 49, 42, .7); }
.area .n { font-family: var(--font-display); font-size: var(--t-s); color: var(--champagne); }
.area h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: calc(var(--t-m) * 1.3); line-height: 1.15; }
.area p { margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); }
.area .tags { color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tr-caps); font-size: calc(var(--t-s) * .85); }
.trs + .trs { margin-top: var(--s72); }
.trs__title { margin: 0 0 var(--s24); padding-bottom: var(--s12); border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-weight: 300; font-size: var(--t-l); line-height: var(--lh-l); }
.trs__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s32) var(--s24); margin: 0; padding: 0; list-style: none; }
.tr h4 { margin: 0 0 var(--s8); font-family: var(--font-display); font-weight: 400; font-size: calc(var(--t-m) * 1.15); line-height: 1.2; color: var(--ink-1); }
.tr p { margin: 0; font-size: var(--t-s); line-height: 1.55; color: var(--ink-2); }

/* Team. */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 260), 1fr)); gap: var(--s32) var(--s24); margin: 0; padding: 0; list-style: none; }
.member .window { aspect-ratio: 640 / 736; border-radius: var(--r-l); overflow: hidden; background: var(--fill-1); margin-bottom: var(--s16); }
.member .window img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { margin: 0 0 var(--s4); font-family: var(--font-display); font-weight: 400; font-size: calc(var(--t-m) * 1.2); }
.member .role { margin: 0 0 var(--s8); font-size: var(--t-s); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--champagne); }
.member p { margin: 0 0 var(--s8); font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); }
.member ul { margin: var(--s8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s4); }
.member li { font-size: calc(var(--t-s) * .92); color: var(--ink-3); padding-left: var(--s12); position: relative; }
.member li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--champagne); }

/* Units. */
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s24); }
.unit { padding: var(--s32); border-radius: var(--r-l); background: rgba(58, 49, 42, .7); }
.unit h3 { margin: 0 0 var(--s16); font-family: var(--font-display); font-weight: 300; font-size: var(--d-2); line-height: 1; }
.unit p { margin: 0 0 var(--s12); color: var(--ink-2); }
.unit a[href^="tel"] { font-variant-numeric: tabular-nums; }
.unit .ctas { display: flex; flex-wrap: wrap; gap: var(--s12); }
.unit .cta { margin-top: var(--s16); }

/* Footer. */
.foot { position: relative; z-index: 2; background: var(--site); padding: var(--s72) var(--gutter) var(--s48); border-top: 1px solid var(--rule); }
.foot__grid { max-width: calc(var(--u) * 1240); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s32); }
.foot h4 { margin: 0 0 var(--s12); font-size: var(--t-s); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--ink-3); }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s8); font-size: var(--t-s); color: var(--ink-2); }
.foot__brand { display: flex; align-items: center; gap: var(--s12); font-family: var(--font-display); font-size: calc(var(--t-m) * 1.3); letter-spacing: .12em; }
.foot__brand .mark { width: calc(var(--u) * 40); height: calc(var(--u) * 30); }
.foot__base { max-width: calc(var(--u) * 1240); margin: var(--s48) auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s12); font-size: var(--t-s); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink-1); } }

@media (max-width: 1000px) {
  .areas, .trs__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .sect { padding: var(--s72) 16px; }
  .sect__top, .about, .unit-grid, .mv { grid-template-columns: 1fr; }
  .areas, .trs__list { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .units { grid-template-columns: 1fr; }
}

/* Lab switchers (?lab). */
.lab { position: fixed; right: 12px; bottom: 12px; z-index: 20; display: grid; gap: 4px; max-width: calc(100% - 24px);
       padding: 4px; border-radius: 12px; background: rgba(42, 35, 30, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
       font: 500 12px/1 var(--font-text); }
.lab div { display: flex; flex-wrap: wrap; gap: 4px; }
.lab a { padding: 8px 10px; border-radius: 8px; color: var(--sand); }
.lab a[aria-current] { background: var(--gold); color: var(--espresso); }

/* ---------- OS-section clinic variants (?os=…) ----------
   Shared: these sit on the ivory ground beside an arch or moon window, so they drop the dark software glass for
   paper, sand and print, set type in Fraunces, and keep the spec's fly-in from the camera. */
.pv, .ps, .pg, .pw { background: none; box-shadow: none; color: var(--espresso); --ink-2: #5e554d; --ink-3: var(--taupe); font-size: var(--t-s); line-height: 1.4; }
.pv::before, .ps::before, .pg::before, .pw::before { content: none; }
.pv.has-glass, .ps.has-glass, .pg.has-glass, .pw.has-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
.pv p, .ps p, .pg p, .pw p, .pv h3, .ps h3 { margin: 0; }
.pv__kicker { font-size: calc(var(--u) * 11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--wood); }
.pv__head { margin-top: var(--s12) !important; font-family: var(--font-display); font-weight: 300; font-size: calc(var(--u) * 40); line-height: 1.08; letter-spacing: -.02em; color: var(--espresso); }
.pv__head em { color: var(--wood); }
/* Paper: a soft lift instead of a hard shadow, small corners like card stock. */
.paper { background: #fbf8f3; border-radius: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -18) rgba(51, 43, 37, .28), 0 1px 2px rgba(51, 43, 37, .08); }

/* Papel. */
.pv--title { left: 5vw; top: 15vh; width: calc(var(--u) * 380); }
.pv--appt { left: 9vw; top: 46vh; width: calc(var(--u) * 250); padding: var(--s24); display: grid; gap: var(--s8); background: #fbf8f3; border-radius: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -18) rgba(51, 43, 37, .28); border-top: calc(var(--u) * 3) solid var(--gold); }
.pv__date { font-family: var(--font-display); font-size: calc(var(--u) * 24); line-height: 1.1; color: var(--espresso); }
.pv__line { color: var(--espresso); }
.pv__muted { color: var(--taupe); }
.pv--print { margin: 0; padding: calc(var(--u) * 8) calc(var(--u) * 8) var(--s12); background: #fbf8f3; border-radius: calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -18) rgba(51, 43, 37, .3); display: grid; gap: var(--s8); }
.pv--print img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.pv--print figcaption { font-family: var(--font-display); font-style: italic; font-size: calc(var(--u) * 13); color: var(--taupe); text-align: center; }
.pv--print-a { left: 21vw; top: 66vh; width: calc(var(--u) * 150); height: calc(var(--u) * 200); grid-template-rows: 1fr auto; rotate: -3deg; }
.pv--print-b { left: 69vw; top: 66vh; width: calc(var(--u) * 140); height: calc(var(--u) * 186); grid-template-rows: 1fr auto; rotate: 2.5deg; }
.pv--note { left: 70vw; top: 13vh; width: calc(var(--u) * 250); padding: var(--s24); background: #efe7dc; border-radius: calc(var(--u) * 4); rotate: 1.5deg; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -16) rgba(51, 43, 37, .25); }
.pv--note p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: calc(var(--u) * 26); line-height: 1.15; color: var(--espresso); }
.pv--note span { display: block; margin-top: var(--s12); color: var(--wood); }
.pv--plan { left: 72vw; top: 38vh; width: calc(var(--u) * 260); padding: var(--s24); background: #fbf8f3; border-radius: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -18) rgba(51, 43, 37, .28); }
.pv--plan ol { margin: var(--s12) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--s8); }
.pv--plan li { counter-increment: s; display: flex; gap: var(--s12); padding-top: var(--s8); border-top: 1px solid rgba(51, 43, 37, .1); font-family: var(--font-display); font-size: calc(var(--u) * 16); }
.pv--plan li::before { content: "0" counter(s); font-family: var(--font-text); font-size: calc(var(--u) * 11); color: var(--wood); padding-top: .3em; }
.pv--seal { left: 84vw; top: 68vh; width: calc(var(--u) * 128); height: calc(var(--u) * 128); border-radius: 50%; background: var(--espresso); color: var(--sand); display: grid; place-items: center; align-content: center; gap: var(--s8); text-align: center; font-size: calc(var(--u) * 10); letter-spacing: var(--tr-caps); text-transform: uppercase; line-height: 1.5; }
.pv__m { width: calc(var(--u) * 40); height: calc(var(--u) * 30); background: var(--gold); -webkit-mask: url(img/mirai-m-mark.svg) center / contain no-repeat; mask: url(img/mirai-m-mark.svg) center / contain no-repeat; }

/* Percurso. */
.ps--title { left: 5vw; top: 13vh; width: calc(var(--u) * 360); }
.ps--1, .ps--2, .ps--3, .ps--4 { width: calc(var(--u) * 250); padding: var(--s24); background: #e9e1d6; border-radius: var(--r-l); display: grid; gap: var(--s8); }
.ps b { font-family: var(--font-display); font-weight: 300; font-size: calc(var(--u) * 34); line-height: 1; color: var(--wood); }
.ps h3 { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--u) * 19); color: var(--espresso); }
.ps p { color: #5e554d; }
.ps--1 { left: 6vw; top: 38vh; }
.ps--2 { left: 9vw; top: 64vh; }
.ps--3 { left: 76vw; top: 14vh; }
.ps--4 { left: 78vw; top: 41vh; }
.ps--doc { left: 77vw; top: 70vh; margin: 0; display: flex; align-items: center; gap: var(--s12); }
.ps--doc img { width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.ps--doc figcaption { font-family: var(--font-display); font-size: calc(var(--u) * 16); }
.ps--doc figcaption span { display: block; font-family: var(--font-text); font-size: calc(var(--u) * 11); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--wood); }

/* Galeria. */
.pg--title { left: 5vw; top: 10vh; width: calc(var(--u) * 360); }
.pg:is(figure) { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: var(--s8); }
.pg img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: calc(var(--u) * 2); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -20) rgba(51, 43, 37, .35); }
.pg figcaption { font-size: calc(var(--u) * 10); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--espresso); }
.pg figcaption span { display: block; margin-top: 2px; color: var(--taupe); }
.pg--1 { left: 7vw; top: 33vh; width: calc(var(--u) * 170); height: calc(var(--u) * 240); }
.pg--1 img, .pg--5 img { object-position: 50% 20%; }
.pg--2 { left: 13vw; top: 66vh; width: calc(var(--u) * 150); height: calc(var(--u) * 180); }
.pg--3 { left: 2vw; top: 66vh; width: calc(var(--u) * 120); height: calc(var(--u) * 160); }
.pg--4 { left: 80vw; top: 10vh; width: calc(var(--u) * 150); height: calc(var(--u) * 200); }
.pg--5 { left: 84vw; top: 42vh; width: calc(var(--u) * 150); height: calc(var(--u) * 210); }
.pg--6 { left: 69vw; top: 72vh; width: calc(var(--u) * 180); height: calc(var(--u) * 160); }

/* Palavras. */
.pw { white-space: nowrap; font-family: var(--font-display); font-weight: 300; font-size: calc(var(--u) * 44); line-height: 1; letter-spacing: -.02em; color: var(--espresso); }
.pw em { color: var(--wood); }
.pw--kanji { left: 6vw; top: 36vh; font-family: "Yuji Mai", var(--font-display); font-size: calc(var(--u) * 120); color: var(--wood); letter-spacing: 0; }
.pw--kanji span { display: block; margin-top: var(--s12); font-family: var(--font-text); font-size: calc(var(--u) * 11); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--taupe); }
.pw--a { left: 7vw; top: 15vh; }
.pw--b { left: 73vw; top: 16vh; }
.pw--c { left: 79vw; top: 45vh; color: var(--taupe); }
.pw--d { left: 74vw; top: 74vh; }
.pw--e { left: 12vw; top: 76vh; color: var(--taupe); }
.pw--f { left: 0; right: 0; margin: 0 auto; width: max-content; top: 91vh; font-size: calc(var(--u) * 22); }

.frame-head[hidden] { display: none; }

/* ---------- Loader (lib/loader.js, ?loader=…) ----------
   Sits where the mask will be, between the stage and the copy; fades in after a short wait and out as the sweep
   starts. --p is the download share (0–1). */
.ld { position: fixed; left: 0; right: 0; top: 50%; z-index: 2; display: grid; place-items: center; gap: 18px;
  transform: translateY(-50%); pointer-events: none; opacity: 0; filter: blur(6px);
  transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out); }
.ld.is-in { opacity: 1; filter: none; }
.ld.is-done { opacity: 0; filter: blur(8px); transition-duration: 800ms; }

/* Marca: the M, a faint outline of itself, filling with gold from the bottom. */
.ld--marca { grid-template-areas: "m"; }
.ld__m { grid-area: m; width: 110px; height: 110px;
  -webkit-mask: url(img/mirai-m-mark.svg) center / contain no-repeat; mask: url(img/mirai-m-mark.svg) center / contain no-repeat; }
.ld__m--base { background: var(--sand); opacity: .2; }
.ld__m--fill { background: linear-gradient(to top, var(--gold), var(--champagne));
  clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); transition: clip-path 300ms linear; }
.ld--marca.is-unknown .ld__m--fill { clip-path: none; animation: ld-breathe 2.4s ease-in-out infinite; }
.ld--marca.is-done .ld__m--fill { filter: drop-shadow(0 0 14px rgba(199, 174, 102, .6)); }
@keyframes ld-breathe { 50% { opacity: .35; } }

/* Grãos: sixty grains in a ring, lit in turn; the ring turns slowly so it never looks frozen. */
.ld__ring { width: 128px; height: 128px; animation: ld-turn 14s linear infinite; }
.ld__ring circle { fill: var(--sand); opacity: .22; transition: opacity 400ms ease, fill 400ms ease; }
.ld__ring circle.on { fill: var(--champagne); opacity: 1; }
.ld--graos.is-unknown .ld__ring { animation-duration: 3s; }
@keyframes ld-turn { to { rotate: 1turn; } }

/* Linha: a hairline that grows from the centre, over a quiet word. On finishing it runs out to both edges. */
.ld__line { display: block; height: 1.5px; width: min(28vw, 320px); background: rgba(217, 207, 193, .14); position: relative; overflow: hidden; }
.ld__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--champagne) 20%, var(--gold) 50%, var(--champagne) 80%, transparent);
  transform: scaleX(var(--p, 0)); transition: transform 300ms linear; }
.ld--linha.is-unknown .ld__line::after { transform: none; animation: ld-slide 1.8s var(--ease-out) infinite; }
.ld__word { font: italic 300 calc(var(--t-m) * 1.05) / 1 var(--font-display); color: var(--ink-3); letter-spacing: .02em; }
.ld--linha.is-done .ld__line { width: 100vw; transition: width 800ms var(--ease-out); }
@keyframes ld-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .ld, .ld.is-done { filter: none; transition: opacity 200ms ease; }
  .ld__ring, .ld--marca.is-unknown .ld__m--fill, .ld--linha.is-unknown .ld__line::after { animation: none; }
}