/* Dr. Vinicius Marques Rodrigues — folha única (o build concatena os @import). */
/* ==========================================================================
   TOKENS — fonte única de verdade (Brandbook Dr. Vinicius Marques Rodrigues)
   O JS lê os tokens de motion daqui (scripts/core/tokens.js).
   ========================================================================== */

/* Newsreader instanciada a partir dos originais (assets-src/fonts, ver README):
   normal fixa em 500 — único peso usado no estilo normal (59 kB em vez de 129 kB);
   itálico 400–500. O eixo óptico (opsz) é mantido: títulos grandes ganham desenho de display. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/newsreader-latin-500-opsz.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-latin-italic-400-500-opsz.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallbacks métricos aproximados — reduzem salto de layout durante o swap */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia');
  size-adjust: 94%;
  ascent-override: 98%;
  descent-override: 26%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

:root {
  /* ---- Paleta final ---- */
  --c-azul: #163447;       /* Azul Profundo — autoridade, estabilidade */
  --c-marfim: #F4F0E8;     /* Marfim — respiro, proximidade */
  --c-grafite: #2B2B2B;    /* Grafite — precisão, leitura */
  --c-mineral: #536B78;    /* Azul Mineral — destaques funcionais */
  --c-cinza: #B7B0A6;      /* Cinza Quente — apoio, equilíbrio */

  /* ---- Variações tonais (Brandbook p. "Cor") ---- */
  --c-azul-80: #425A67;  --c-azul-60: #6F7F87;  --c-azul-40: #9BA5A8;  --c-azul-20: #C8CAC8;
  --c-mineral-80: #73868E; --c-mineral-60: #93A0A5; --c-mineral-40: #B4BBBB; --c-mineral-20: #D4D5D2;
  --c-grafite-80: #535251; --c-grafite-60: #7B7A77; --c-grafite-40: #A4A19C; --c-grafite-20: #CCC9C2;
  --c-cinza-80: #C3BDB3;  --c-cinza-60: #CFCAC0;  --c-cinza-40: #DCD6CE;  --c-cinza-20: #E8E3DB;

  /* ---- Papéis (superfície clara, padrão) ---- */
  --bg: var(--c-marfim);
  --fg: var(--c-grafite);
  --fg-strong: var(--c-azul);
  --fg-muted: var(--c-grafite-80);      /* 6.7:1 sobre Marfim */
  --fg-quiet: var(--c-grafite-60);      /* 3.8:1 — apenas texto grande */
  --line: rgb(43 43 43 / 0.2);
  --line-strong: var(--c-azul);

  /* ---- Tipografia ---- */
  --font-serif: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.125rem, min(9.2vw, 1.2rem + 6vw), 7.5rem); /* no mobile: uma frase do hero por linha */
  --fs-h1: clamp(2.375rem, 1.35rem + 4vw, 6rem);
  --fs-h1-col: clamp(1.875rem, max(min(8.9vw, 2.375rem), 5.2vw), 5rem); /* h1 em coluna editorial: medido para que cada linha autoral caiba (Newsreader ≈ 9.7 × font-size para 20 caracteres) */
  --fs-h2: clamp(1.875rem, 1.25rem + 2.4vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --w-serif: 500;        /* Newsreader — Medium (peso prioritário) */
  --tracking-display: -0.022em;
  --tracking-head: -0.015em;
  --tracking-label: 0.16em;

  /* ---- Espaço — módulo 8 px ---- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;   --s-5: 2.5rem;
  --s-6: 3rem;    --s-8: 4rem;   --s-10: 5rem;  --s-12: 6rem;  --s-16: 8rem;  --s-20: 10rem;

  --margin: clamp(1.25rem, 5.2vw, 6rem);
  --gutter: clamp(1rem, 1.7vw, 1.5rem);
  --section: clamp(6rem, 12vw, 12.5rem);
  --measure: 36rem;

  --hd-h: 5.5rem;
  --hd-h-compact: 4rem;

  /* ---- Motion ----
     orient: chega rápido e assenta devagar — "controlado e inevitável"
     inout:  deslocamentos espaciais (recortes, cenas)
     calm:   respiro editorial (muito lento) */
  --ease-orient: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-calm: cubic-bezier(0.33, 0, 0.15, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;
  --dur-4: 1000ms;
  --dur-5: 1600ms;

  --z-header: 50;
  --z-menu: 40;
}

@media (max-width: 1179px) {
  :root {
    --hd-h: 4.5rem;
    --hd-h-compact: 3.75rem;
  }
}

/* Superfície profunda — aplicada por contexto (hero, painéis azuis, menu) */
.surface-dark {
  --bg: var(--c-azul);
  --fg: var(--c-marfim);
  --fg-strong: var(--c-marfim);
  --fg-muted: var(--c-azul-20);          /* 7:1 sobre Azul Profundo */
  --fg-quiet: var(--c-azul-40);          /* 5:1 */
  --line: rgb(244 240 232 / 0.22);
  --line-strong: var(--c-marfim);
  color: var(--fg);
}

/* ==========================================================================
   BASE — reset, tipografia, utilitários, acessibilidade
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-marfim);
  scroll-padding-top: var(--hd-h-compact);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
p, h1, h2, h3, h4, li, dd { overflow-wrap: break-word; }

::selection { background: var(--c-azul); color: var(--c-marfim); }
.surface-dark ::selection { background: var(--c-marfim); color: var(--c-azul); }

/* Foco: a mesma linha fina da marca, com recuo — visível em qualquer superfície */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }
main:focus, [tabindex='-1']:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--c-azul);
  color: var(--c-marfim);
  font-size: var(--fs-small);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-orient);
}
.skip:focus { transform: none; }

/* ---------- Tipografia ---------- */

.display,
.h1,
.h2,
.h3 {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-optical-sizing: auto;
  color: var(--fg-strong);
  text-wrap: balance;
}
.display {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: var(--tracking-head);
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

em, .it { font-style: italic; }

/* Linha autoral com máscara (reveal por linha).
   Folga vertical/horizontal para não cortar descendentes e itálicos. */
.ln {
  display: block;
  overflow: hidden;
  padding: 0.2em 0.12em 0.14em 0;
  margin: -0.2em -0.12em -0.14em 0;
}
.ln__i { display: block; }

/* Placeholder factual — identificável e discreto */
.ph {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-mineral);
  background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px) left bottom / 100% 1px no-repeat;
  padding-bottom: 2px;
}
.surface-dark .ph { color: var(--c-azul-40); }

.note {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  padding-left: var(--s-2);
  border-left: 1px solid var(--line);
  max-width: var(--measure);
}

/* ---------- Grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- Lenis ---------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Transição entre páginas (View Transitions nativas) ---------- */

@view-transition { navigation: auto; }

.hd { view-transition-name: header; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 420ms var(--ease-inout) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 720ms var(--ease-orient) 120ms both;
  }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-2vh); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(3vh); } }

/* ---------- Estados iniciais de reveal (somente com motion confirmada) ---------- */

/* Dentro de um palco ativo (html.motion.stage) quem define os estados é a cena. */
html.motion [data-reveal='fade']:not(html.motion.stage [data-scene-desktop] *),
html.motion [data-reveal='row']:not(html.motion.stage [data-scene-desktop] *) {
  opacity: 0;
}
html.motion [data-reveal='lines']:not(html.motion.stage [data-scene-desktop] *) .ln__i,
html.motion [data-reveal='line']:not(html.motion.stage [data-scene-desktop] *) .ln__i {
  transform: translateY(130%);
}
html.motion [data-reveal='media']:not(html.motion.stage [data-scene-desktop] *) {
  clip-path: inset(100% 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   ASSINATURA — geometria derivada do SVG oficial (unidades do viewBox 2086×447)
   --wm-w = largura de "Dr. Vinicius". Todas as outras medidas são proporções
   fixas dessa largura: a construção nunca se altera, só a configuração.
   ========================================================================== */

.wm {
  --wm-w: 150px;
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--wm-w) * 1.322106);
  height: calc(var(--wm-w) * 0.286114);
  color: inherit;
}

.wm svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  transform-origin: 0 0;
  transition: transform var(--dur-3) var(--ease-orient);
}

/* Principal (empilhada) */
.wm__name {
  width: var(--wm-w);
  height: calc(var(--wm-w) * 0.142214);
  transform: translateX(calc(var(--wm-w) * 0.162034));
}
.wm__sub {
  width: calc(var(--wm-w) * 1.322106);
  height: calc(var(--wm-w) * 0.076543);
  transform: translateY(calc(var(--wm-w) * 0.209571));
}

/* Horizontal — sobrenome a 80%, alinhado à linha de base do nome */
.wm[data-layout='row'],
.hd.is-compact .hd__wm {
  width: calc(var(--wm-w) * 2.102586);
  height: calc(var(--wm-w) * 0.145981);
}
.wm[data-layout='row'] .wm__name,
.hd.is-compact .hd__wm .wm__name {
  transform: none;
}
.wm[data-layout='row'] .wm__sub,
.hd.is-compact .hd__wm .wm__sub {
  transform: translate(calc(var(--wm-w) * 1.044901), calc(var(--wm-w) * 0.084747)) scale(0.8);
}

/* ==========================================================================
   CTA — derivado do MARCADOR (cápsula + seta). O preenchimento cresce da
   esquerda para a direita: o gesto acompanha a direção da seta.
   ========================================================================== */

.cta {
  --cta-fg: var(--c-marfim);
  --cta-bg: var(--c-azul);
  --cta-fg-hover: var(--c-azul);
  --cta-fill: var(--c-marfim);
  --cta-border: var(--c-azul);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-3) 0 1.625rem;
  border: 1px solid var(--cta-border);
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--dur-3) var(--ease-orient), border-color var(--dur-3);
  -webkit-tap-highlight-color: transparent;
}
.cta__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cta-fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-orient);
}
.cta__text, .cta__icon { position: relative; display: inline-flex; }
.cta__icon .i { width: 11px; height: 11px; transition: transform var(--dur-3) var(--ease-orient); }

@media (hover: hover) {
  .cta:hover { color: var(--cta-fg-hover); }
  .cta:hover .cta__fill { transform: scaleX(1); }
  .cta:hover .cta__icon .i { transform: translate(2px, -2px); }
}
.cta:active .cta__fill { transform: scaleX(1); transition-duration: var(--dur-1); }
.cta:active { color: var(--cta-fg-hover); }
.cta:focus-visible { outline: 2px solid var(--cta-border); outline-offset: 5px; border-radius: 999px; }
.cta--light:focus-visible { outline-color: var(--c-marfim); }

/* Variantes */
.cta--light {
  --cta-fg: var(--c-azul);
  --cta-bg: var(--c-marfim);
  --cta-fill: var(--c-azul);
  --cta-fg-hover: var(--c-marfim);
  --cta-border: var(--c-marfim);
}
.cta--light:hover { --cta-border: var(--c-marfim); }
.cta--ghost {
  --cta-fg: currentColor;
  --cta-bg: transparent;
  --cta-border: currentColor;
  --cta-fill: currentColor;
  min-height: 40px;
  padding: 0 var(--s-2) 0 var(--s-3);
  font-size: 0.6875rem;
}
/* --cta-fill: currentColor" herdaria a cor já trocada por ".cta:hover", puxando
   o preenchimento para a cor do header em vez do contraste — trava no --hd-fg
   (fixo), que não muda no hover. */
.hd .cta--ghost { --cta-fg-hover: var(--hd-surface); --cta-fill: var(--hd-fg); }
.hd .cta--ghost .cta__text,
.hd .cta--ghost .cta__icon { transition: color var(--dur-3) var(--ease-orient); }
@media (hover: hover) {
  .hd .cta--ghost:hover .cta__text,
  .hd .cta--ghost:hover .cta__icon { color: var(--hd-surface); }
}
.cta--large {
  min-height: 60px;
  padding: 0 var(--s-4) 0 var(--s-5);
  font-size: 0.8125rem;
  gap: var(--s-3);
}
.cta--large .cta__icon .i { width: 13px; height: 13px; }

/* ==========================================================================
   LINK EDITORIAL COM SETA — a haste da seta cresce no hover (a linha conduz)
   ========================================================================== */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-strong);
}
.link-arrow__text {
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size var(--dur-3) var(--ease-orient);
}
.link-arrow__icon { display: inline-flex; }
.link-arrow .i--arrow { width: 24px; transition: transform var(--dur-3) var(--ease-orient); }
.link-arrow .i--out { width: 11px; height: 11px; transition: transform var(--dur-3) var(--ease-orient); }
@media (hover: hover) {
  .link-arrow:hover .link-arrow__text { background-size: 0% 1px; background-position: right bottom; }
  .link-arrow:hover .i--arrow { transform: translateX(6px); }
  .link-arrow:hover .i--out { transform: translate(2px, -2px); }
}
.link-arrow.is-disabled { opacity: 0.45; cursor: not-allowed; }
.link-arrow.is-disabled .link-arrow__text { background-size: 0 1px; }

/* ==========================================================================
   LINHA DE ORIENTAÇÃO — elemento base
   ========================================================================== */

.oline {
  display: block;
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
}
.oline--x { width: 100%; height: 1px; transform-origin: left center; }
.oline--y { width: 1px; height: 100%; transform-origin: center top; }

html.motion .oline--x[data-line='draw']:not(html.motion.stage [data-scene-desktop] *) { transform: scaleX(0); }
html.motion .oline--y[data-line='draw']:not(html.motion.stage [data-scene-desktop] *) { transform: scaleY(0); }

/* Ícones */
.i { flex: none; }
.i--arrow { width: 24px; height: 12px; }

/* Meta editorial: categoria / tempo de leitura */
.meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.meta__cat { color: var(--c-mineral); }
.surface-dark .meta__cat { color: var(--c-azul-20); }
.meta__sep { width: var(--s-2); height: 1px; background: currentColor; opacity: 0.5; }

.registry { white-space: normal; }
.registry__item { white-space: nowrap; }
.registry__spec { color: var(--fg-muted); }

/* ==========================================================================
   MÍDIA — núcleo (usado pelo site e pela /bio/). Variantes de cena do site
   ficam em media.css.
   Imagens/vídeos reais preenchem o recorte (object-fit: cover).
   "Cenas" são placeholders com direção de arte: tom, direção de luz e
   briefing de captação. Substituídas via content/media.mjs, sem tocar no CSS.
   ========================================================================== */

.media__pic,
.media__pic img,
.media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* O vídeo só cobre o pôster quando está tocando — nunca um quadro preto */
.media__video { opacity: 0; transition: opacity var(--dur-4) var(--ease-calm); }
.media__video.is-playing { opacity: 1; }

.scene {
  --scene-bg: var(--c-azul);
  --scene-note: rgb(244 240 232 / 0.62);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--scene-bg);
  contain: paint;
}
.scene__light {
  position: absolute;
  inset: -12%;
  background: var(--scene-light, none);
}
.scene__grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scene__note {
  position: absolute;
  left: clamp(0.75rem, 1.4vw, 1.25rem);
  bottom: clamp(0.75rem, 1.4vw, 1.25rem);
  max-width: min(34ch, calc(100% - 2rem));
  padding-left: 0.75rem;
  border-left: 1px solid currentColor;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--scene-note);
  text-wrap: pretty;
}
.scene__note b {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

@keyframes scene-drift {
  from { transform: translate3d(-3%, 0, 0); }
  to { transform: translate3d(3%, -1.5%, 0); }
}

/* ==========================================================================
   MÍDIA — variantes de cena (placeholders com direção de arte) do site.
   ========================================================================== */

/* Hero — parede em penumbra, luz de janela atravessando persianas */
.scene--hero {
  --scene-bg:
    radial-gradient(120% 90% at 78% 30%, #2d4c5e 0%, transparent 60%),
    linear-gradient(115deg, #0e2331 0%, #163447 48%, #25404f 100%);
  --scene-light:
    repeating-linear-gradient(104deg, transparent 0 46px, rgb(244 240 232 / 0.075) 46px 82px, transparent 82px 96px);
}
.scene--hero .scene__light {
  filter: blur(7px);
  mask-image: radial-gradient(60% 70% at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 70% at 70% 40%, #000 20%, transparent 75%);
  animation: scene-drift 38s var(--ease-inout) infinite alternate;
}
.scene--hero::after {
  /* silhueta de volume à direita: ancora a composição onde o médico estará */
  content: '';
  position: absolute;
  right: 12%;
  bottom: -8%;
  width: 34%;
  height: 78%;
  border-radius: 48% 48% 0 0 / 38% 38% 0 0;
  background: radial-gradient(70% 60% at 50% 30%, rgb(10 26 36 / 0.55), transparent 70%);
  filter: blur(24px);
}
/* Em recortes com parallax a imagem excede o quadro: a nota sobe para ficar visível */
[data-parallax] > .scene .scene__note { bottom: 10%; }
.scene--hero .scene__note {
  left: auto;
  right: var(--margin);
  top: calc(var(--hd-h) + 1rem);
  bottom: auto;
}
.is-paused .scene__light,
html.video-paused .scene--hero .scene__light { animation-play-state: paused; }


/* Escuta — tons quentes, luz lateral pela direita */
.scene--listening {
  --scene-bg: linear-gradient(160deg, #d6cdbf 0%, #b4aa9b 55%, #8f8577 100%);
  --scene-light: radial-gradient(55% 70% at 88% 28%, rgb(255 250 240 / 0.55), transparent 70%);
  --scene-note: rgb(43 43 43 / 0.62);
}
.scene--listening::after,
.scene--portrait::after,
.scene--conversation::after {
  content: '';
  position: absolute;
  left: 22%;
  bottom: -6%;
  width: 56%;
  height: 70%;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  background: radial-gradient(70% 60% at 50% 35%, rgb(43 43 43 / 0.28), transparent 72%);
  filter: blur(18px);
}

/* Exame — papel sobre mesa, luz rasante */
.scene--exam {
  --scene-bg: linear-gradient(172deg, #ebe6dd 0%, #dcd5c9 56%, #a89f92 56.4%, #8c8376 100%);
  --scene-light: linear-gradient(118deg, rgb(255 252 245 / 0.5) 0%, transparent 45%);
  --scene-note: rgb(43 43 43 / 0.62);
}

/* Mesa / concentração — penumbra azulada, luz de janela à esquerda */
.scene--desk {
  --scene-bg: linear-gradient(100deg, #5a6b73 0%, #3a4c57 45%, #22363f 100%);
  --scene-light: radial-gradient(45% 80% at 8% 40%, rgb(244 240 232 / 0.32), transparent 70%);
}

/* Conversa — cinza quente médio */
.scene--conversation {
  --scene-bg: linear-gradient(140deg, #c9c0b3 0%, #a39a8d 60%, #7d7468 100%);
  --scene-light: radial-gradient(50% 60% at 20% 20%, rgb(255 250 240 / 0.45), transparent 70%);
  --scene-note: rgb(43 43 43 / 0.62);
}

/* Corredor — linha de fuga e luz ao fundo (direção) */
.scene--corridor {
  --scene-bg:
    linear-gradient(90deg, rgb(20 36 46 / 0.9) 0%, transparent 28%, transparent 72%, rgb(20 36 46 / 0.9) 100%),
    linear-gradient(180deg, #56666e 0%, #8d9392 46%, #3d4e57 100%);
  --scene-light: radial-gradient(14% 32% at 50% 46%, rgb(255 251 242 / 0.7), transparent 80%);
}

/* Retrato — fundo neutro quente, coluna de luz suave */
.scene--portrait {
  --scene-bg: linear-gradient(180deg, #d9d2c6 0%, #bdb4a7 60%, #a29888 100%);
  --scene-light: linear-gradient(90deg, transparent 10%, rgb(255 251 244 / 0.4) 32%, transparent 52%);
  --scene-note: rgb(43 43 43 / 0.62);
}

/* Pausa — horizonte amplo, espaço negativo à esquerda */
.scene--pause {
  --scene-bg: linear-gradient(90deg, #cfc6b8 0%, #b9b0a2 46%, #6f7773 78%, #3b4c55 100%);
  --scene-light: repeating-linear-gradient(98deg, transparent 0 70px, rgb(255 250 240 / 0.14) 70px 118px, transparent 118px 140px);
}
.scene--pause .scene__light {
  filter: blur(10px);
  mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 80%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 80%);
}

/* Arquitetura — planos de luz, geometria limpa */
.scene--architecture {
  --scene-bg:
    linear-gradient(90deg, transparent 0 38%, rgb(22 52 71 / 0.1) 38% 38.3%, transparent 38.3% 64%, rgb(22 52 71 / 0.12) 64% 64.3%, transparent 64.3%),
    linear-gradient(180deg, #e3e0d9 0%, #cfcbc2 62%, #b9b4aa 62%, #a8a399 100%);
  --scene-light: linear-gradient(125deg, rgb(255 253 248 / 0.55) 0%, transparent 38%);
  --scene-note: rgb(43 43 43 / 0.62);
}

/* Encerramento — textura mínima */
.scene--closing {
  --scene-bg: transparent;
  --scene-light: radial-gradient(40% 60% at 85% 20%, rgb(244 240 232 / 0.09), transparent 70%);
}
.scene--closing .scene__grain { opacity: 0.08; }

/* ==========================================================================
   HEADER — transparente sobre o hero; ao rolar, compacta, ganha superfície
   e reorganiza a assinatura (principal → horizontal). O tom (claro/escuro)
   acompanha a seção que está sob ele (scripts/ui/header.js).
   ========================================================================== */

.hd {
  --hd-fg: var(--c-azul);
  --hd-surface: var(--c-marfim);
  --hd-rule: rgb(43 43 43 / 0.14);
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--hd-h);
  color: var(--hd-fg);
  transition:
    height var(--dur-3) var(--ease-orient),
    color var(--dur-3) var(--ease-orient);
}
.hd[data-tone='dark'] {
  --hd-fg: var(--c-marfim);
  --hd-surface: var(--c-azul);
  --hd-rule: rgb(244 240 232 / 0.16);
}
.hd.is-compact { height: var(--hd-h-compact); }

/* Superfície: desce do topo ao compactar (não aparece "do nada") */
.hd::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hd-surface);
  transform: translateY(-101%);
  transition:
    transform var(--dur-3) var(--ease-orient),
    background-color var(--dur-3) var(--ease-orient);
}
.hd.is-compact::before { transform: none; }

/* Linha inferior — separa, só quando há superfície */
.hd::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--hd-rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-4) var(--ease-orient) 80ms, background-color var(--dur-3);
}
.hd.is-compact::after { transform: none; }

.hd__bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-inline: var(--margin);
}

.hd__brand {
  position: relative;
  display: block;
  padding-block: var(--s-1);
  transition: opacity var(--dur-2);
}
.hd__brand:hover { opacity: 0.78; }
.hd__wm { --wm-w: 150px; }

@media (max-width: 1179px) {
  .hd__wm { --wm-w: 116px; }
}
@media (max-width: 380px) {
  .hd.is-compact .hd__wm { --wm-w: 100px; }
}

/* Capítulo atual — orientação contextual (telas largas) */
.hd__chapter {
  display: none;
}
@media (min-width: 1440px) {
  .hd__chapter {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-orient);
    pointer-events: none;
  }
  .hd.is-compact .hd__chapter.has-text {
    opacity: 0.72;
    transform: none;
  }
  .hd__chapter-line {
    width: var(--s-3);
    height: 1px;
    background: currentColor;
    opacity: 0.5;
  }
  .hd__chapter-text.is-swapping { opacity: 0; transform: translateY(-4px); }
  .hd__chapter-text { display: inline-block; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-orient); }
}

/* Navegação */
.hd__nav {
  display: none;
  margin-left: auto;
}
.hd__nav ul {
  display: flex;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}
.hd__nav a {
  position: relative;
  display: block;
  padding-block: var(--s-1);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* A linha sob o item: hover e capítulo ativo */
.hd__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.125rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-3) var(--ease-orient);
}
.hd__nav a:hover::after,
.hd__nav a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}
.hd__nav a.is-current::after { opacity: 0.55; }
.hd__nav a:hover::after { opacity: 1; }

.hd__cta { display: none; }

@media (min-width: 1180px) {
  .hd__nav { display: block; }
  .hd__cta { display: inline-flex; }
  .hd__menu { display: none !important; }
}

/* Botão de menu: duas linhas → X */
.hd__menu {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-1) 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.hd__menu-icon {
  position: relative;
  width: 24px;
  height: 10px;
}
.hd__menu-icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-orient), top var(--dur-3) var(--ease-orient);
}
.hd__menu-icon i:first-child { top: 0; }
.hd__menu-icon i:last-child { top: 9px; transform-origin: right; transform: scaleX(0.6); }
.hd__menu[aria-expanded='true'] .hd__menu-icon i:first-child { top: 4.5px; transform: rotate(45deg) scaleX(0.9); }
.hd__menu[aria-expanded='true'] .hd__menu-icon i:last-child { top: 4.5px; transform-origin: center; transform: rotate(-45deg) scaleX(0.9); }

/* ==========================================================================
   MENU (telas < 1180px) — sobreposição em Azul Profundo.
   Itens entram em sequência, separados pela linha da marca.
   ========================================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--c-azul);
  color: var(--c-marfim);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-3) var(--ease-inout);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open { clip-path: inset(0); }
.menu[hidden] { display: block; visibility: hidden; }
.menu.is-open, .menu.is-closing { visibility: visible; }

.menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  padding: calc(var(--hd-h) + var(--s-4)) var(--margin) var(--s-6);
}

.menu__nav li {
  border-top: 1px solid rgb(244 240 232 / 0.18);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-3) var(--ease-orient),
    transform var(--dur-4) var(--ease-orient);
}
.menu__nav li:last-child { border-bottom: 1px solid rgb(244 240 232 / 0.18); }
.menu.is-open .menu__nav li {
  opacity: 1;
  transform: none;
  transition-delay: calc(120ms + var(--i) * 55ms);
}
.menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-block: var(--s-2);
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-head);
}
.menu__nav .i--arrow {
  width: 28px;
  opacity: 0.6;
  transition: transform var(--dur-3) var(--ease-orient), opacity var(--dur-2);
}
.menu__nav a:hover .i--arrow,
.menu__nav a:focus-visible .i--arrow { transform: translateX(6px); opacity: 1; }

.menu__foot {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-orient) 380ms;
}
.menu.is-open .menu__foot { opacity: 1; }
.menu__contact {
  font-size: var(--fs-small);
  color: var(--c-azul-20);
}

html.menu-open { overflow: hidden; }

/* ==========================================================================
   FOOTER — última aparição da Linha de Orientação: atravessa a página e
   termina no retorno ao início.
   ========================================================================== */

.ft {
  background: var(--c-marfim);
  color: var(--fg);
  padding: var(--s-12) var(--margin) var(--s-5);
}

.ft__rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-azul);
}
.ft__line { flex: 1; opacity: 0.35; }
.ft__top {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ft__top .i--up { width: 10px; height: 20px; transition: transform var(--dur-3) var(--ease-orient); }
.ft__top:hover .i--up { transform: translateY(-4px); }

.ft__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-8);
  padding-top: var(--s-10);
}
.ft__brand { grid-column: 1 / -1; color: var(--c-azul); justify-self: start; }
.ft__wm { --wm-w: clamp(180px, 30vw, 380px); }
.ft__nav { grid-column: 1 / -1; }
.ft__nav ul { display: grid; gap: var(--s-1); }
.ft__nav a {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--c-azul);
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size var(--dur-3) var(--ease-orient);
}
.ft__nav a:hover { background-size: 100% 1px; }
.ft__meta { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--fg-muted); display: grid; gap: var(--s-1); }
.ft__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--fg-muted);
}
.ft__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (min-width: 1024px) {
  .ft { padding-top: var(--s-16); }
  .ft__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: var(--s-12); }
  .ft__brand { grid-column: 1 / 6; align-self: start; }
  .ft__nav { grid-column: 7 / 10; }
  .ft__meta { grid-column: 10 / 13; align-self: end; }
}

/* ==========================================================================
   HERO → AUTORIDADE PRÓXIMA
   1) Base (sem JS, movimento reduzido, mobile): hero 100svh + seção editorial.
   2) html.motion.stage (desktop + movimento, desde a 1ª pintura): palco sticky; a cena transforma o
      vídeo no recorte da direita e o indicador de scroll no trilho do percurso.
   ========================================================================== */

.ha { position: relative; background: var(--c-marfim); }

/* ---------- HERO ---------- */

.ha__hero {
  --ha-bottom: clamp(4.5rem, 11vh, 7.5rem);
  position: relative;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  background: var(--c-azul);
  color: var(--c-marfim);
}
.ha__media { position: absolute; inset: 0; }
.ha__media-inner { position: absolute; inset: 0; transform-origin: 70% 50%; }
/* Overlay Azul Profundo sutil + leitura garantida na base */
.ha__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(22 52 71 / 0.55) 0%, rgb(22 52 71 / 0.08) 30%, rgb(22 52 71 / 0.12) 55%, rgb(22 52 71 / 0.82) 100%),
    linear-gradient(90deg, rgb(22 52 71 / 0.35) 0%, transparent 55%);
}

.ha__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--hd-h) + var(--s-4)) var(--margin) var(--ha-bottom);
}
.ha__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
  margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
  color: rgb(244 240 232 / 0.82);
}
.ha__dot { opacity: 0.55; }
@media (max-width: 639px) {
  .ha__eyebrow { font-size: 0.6875rem; letter-spacing: 0.1em; gap: 0.5em 0.6em; }
}
.ha__title { color: var(--c-marfim); }
.ha__foot {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
}
.ha__lead {
  max-width: 32ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgb(244 240 232 / 0.86);
  text-wrap: pretty;
}

@media (min-width: 1280px) {
  .ha__content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-content: end;
  }
  .ha__eyebrow { grid-column: 1 / -1; }
  .ha__title { grid-column: 1 / 10; }
  .ha__foot {
    grid-column: 10 / 13;
    align-self: end;
    margin: 0 0 0.6em;
  }
}

/* Indicador de scroll — a primeira aparição da Linha de Orientação */
.ha__cue {
  position: absolute;
  z-index: 3;
  left: var(--margin);
  bottom: 0;
  width: 1px;
  height: calc(var(--ha-bottom) - var(--s-3));
  background: rgb(244 240 232 / 0.3);
  overflow: hidden;
}
.ha__cue-run,
.path__hint {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 38%;
  background: var(--c-marfim);
  animation: cue-run 2.8s var(--ease-inout) infinite;
}
@keyframes cue-run {
  0% { transform: translateY(-105%); }
  65%, 100% { transform: translateY(270%); }
}

.ha__toggle {
  position: absolute;
  z-index: 3;
  right: var(--margin);
  bottom: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  padding-inline: var(--s-1);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgb(244 240 232 / 0.7);
  transition: color var(--dur-2);
}
.ha__toggle:hover { color: var(--c-marfim); }
.ha__toggle .i { width: 10px; height: 10px; }
.ha__toggle-icon { display: inline-flex; }
.ha__toggle .ha__toggle-icon--play { display: none; }
.ha__toggle[aria-pressed='true'] .ha__toggle-icon--play { display: inline-flex; }
.ha__toggle[aria-pressed='true'] .ha__toggle-icon--pause { display: none; }

/* ---------- AUTORIDADE PRÓXIMA ---------- */

.ha__auth {
  position: relative;
  background: var(--c-marfim);
  padding: var(--section) var(--margin);
}
.ha__auth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-8);
}
.ha__auth-text,
.ha__figure,
.path { grid-column: 1 / -1; }

.ha__auth-label { margin-bottom: var(--s-4); }
/* Uma ideia por linha: o tamanho é limitado para caber em 6 colunas */
.ha__auth-title { font-size: var(--fs-h1-col); }
.ha__auth-b .ln__i { font-style: italic; }
.ha__auth-copy { margin-top: clamp(1.5rem, 3vh, 2.25rem); }

.ha__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-cinza-60);
}
.ha__figure-inner { position: absolute; inset: 0; }

/* Percurso: Conhecimento → Compreensão → Critério → Direção */
.path {
  --path-row: 2.25rem;
  --path-gap: 0.5rem;
  position: relative;
  color: var(--c-azul);
}
.path__track {
  position: absolute;
  left: 0;
  top: calc(var(--path-row) / 2);
  bottom: calc(var(--path-row) / 2);
  width: 1px;
  color: rgb(43 43 43 / 0.22);
  background: currentColor;
  transform-origin: 0 0;
  overflow: hidden;
}
.path__fill {
  position: absolute;
  inset: 0;
  background: var(--c-azul);
  transform: scaleY(0);
  transform-origin: top;
}
.path__hint { display: none; }
.path__list { display: grid; gap: var(--path-gap); }
.path__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--path-row);
}
.path__tick {
  width: var(--s-3);
  height: 1px;
  background: currentColor;
  transform-origin: left;
}
.path__text {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.path__marker { display: inline-flex; margin-left: var(--s-1); }
.path__marker .i--arrow { width: 32px; }

@media (min-width: 1024px) {
  .ha__auth-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: var(--s-8);
  }
  .ha__auth-text { grid-column: 1 / 8; grid-row: 1; align-self: end; }
  .path { grid-column: 1 / 7; grid-row: 2; }
  .ha__figure { grid-column: 8 / 13; grid-row: 1 / 3; }
}

/* ---------- PALCO (desktop + movimento) ---------- */

/* Distância de scroll do palco — lida também pelo JS (fonte única) */
.ha { --ha-dist: 260vh; }
html.motion.stage .ha { height: calc(100vh + var(--ha-dist)); }
html.motion.stage .ha .ha__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* Sem contextos de empilhamento nas camadas: media (1), percurso (2) e
   texto do hero (3) disputam a mesma pilha dentro do palco. */
html.motion.stage .ha .ha__hero {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: none;
  pointer-events: none;
}
html.motion.stage .ha .ha__media {
  z-index: 1;
  pointer-events: auto;
  will-change: clip-path;
}
html.motion.stage .ha .ha__media-inner { will-change: transform; }
html.motion.stage .ha .ha__content {
  position: absolute;
  inset: 0;
  height: auto;
}
html.motion.stage .ha .ha__content > * { pointer-events: auto; }
html.motion.stage .ha .ha__toggle { pointer-events: auto; }
html.motion.stage .ha .ha__cue { visibility: hidden; }

html.motion.stage .ha .ha__auth {
  position: absolute;
  inset: 0;
  padding: 0 var(--margin);
}
html.motion.stage .ha .ha__auth-grid {
  height: 100%;
  padding-top: calc(var(--hd-h-compact) + 8vh);
  padding-bottom: 9vh;
  row-gap: 6vh;
}
html.motion.stage .ha .ha__figure {
  aspect-ratio: auto;
  height: 100%;
}
html.motion.stage .ha .path { z-index: 2; }
html.motion.stage .ha .path__track {
  color: rgb(244 240 232 / 0.3);
  will-change: transform;
}
html.motion.stage .ha .path__hint { display: block; }
html.motion.stage .ha .ha__auth-text { position: relative; }

/* Percurso vivo (com movimento): itens acendem quando a linha os alcança */
.path[data-path-live] .path__item { opacity: 0.34; transition: opacity var(--dur-3) var(--ease-orient); }
.path[data-path-live] .path__item.is-on { opacity: 1; }
.path[data-path-live] .path__tick { transform: scaleX(0.35); transition: transform var(--dur-4) var(--ease-orient); }
.path[data-path-live] .path__item.is-on .path__tick { transform: none; }
.path[data-path-live] .path__marker { opacity: 0; transform: translateX(-10px); transition: opacity var(--dur-3), transform var(--dur-4) var(--ease-orient); }
.path[data-path-live] .path__item.is-on .path__marker { opacity: 1; transform: none; }

/* Estado inicial da entrada (apenas com movimento; removido pelo fallback de 4 s) */
html.motion:not(.intro-done) .ha__title .ln__i { transform: translateY(130%); }
html.motion:not(.intro-done) .ha__eyebrow > span,
html.motion:not(.intro-done) .ha__foot > * { opacity: 0; }
html.motion:not(.intro-done) .ha__media-inner { opacity: 0; }

/* Entre a primeira pintura e a cena assumir o palco */
html.motion.stage:not(.motion-ready) .path__track,
html.motion.stage:not(.motion-ready) .path__list,
html.motion.stage:not(.motion-ready) .ha__auth-text { visibility: hidden; }

/* ==========================================================================
   COMO CUIDAMOS — Azul Profundo
   Base: lista vertical, linha contínua à esquerda (o raciocínio em sequência).
   html.motion.stage: palco sticky com trilho de progresso e títulos que se sucedem.
   ========================================================================== */

.care { background: var(--c-marfim); }

.care__panel {
  --bg: var(--c-azul);
  --fg: var(--c-marfim);
  --fg-strong: var(--c-marfim);
  --fg-muted: var(--c-azul-20);
  --line: rgb(244 240 232 / 0.22);
  position: relative;
  background: var(--c-azul);
  color: var(--c-marfim);
}
.care__panel ::selection { background: var(--c-marfim); color: var(--c-azul); }

.care__stage { padding: var(--section) var(--margin); }

.care__head { max-width: 40rem; margin-bottom: var(--s-10); }
.care__label { margin-bottom: var(--s-3); }
.care__intro {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-marfim);
  text-wrap: balance;
}

.care__rail { display: none; }

/* Base: passos em lista com a linha à esquerda */
.care__steps { position: relative; }
.care__step {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: 0 0 var(--s-10) var(--s-6);
}
.care__step:last-child { padding-bottom: 0; }
/* Linha contínua entre as etapas: trilho + preenchimento (no fluxo, avança com a leitura) */
.care__stem {
  position: absolute;
  left: 0;
  top: calc(var(--fs-h2) * 0.55);
  bottom: calc(var(--fs-h2) * -0.55);
  width: 1px;
  background: rgb(244 240 232 / 0.2);
}
.care__step:last-child .care__stem { display: none; }
.care__stem-fill {
  position: absolute;
  inset: 0;
  background: var(--c-marfim);
  transform: scaleY(0);
  transform-origin: top;
}
.care__node {
  position: absolute;
  left: 0;
  top: calc(var(--fs-h2) * 0.55);
  width: var(--s-4);
  height: 1px;
  background: var(--c-marfim);
  transform-origin: left;
}
.care__title {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: var(--tracking-head);
  color: var(--c-marfim);
  text-wrap: balance;
}
.care__text {
  max-width: 30rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-azul-20);
}
.care__cta { margin-top: var(--s-2); }
.care__figure {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-top: var(--s-2);
  background: var(--c-azul-80);
}
.care__figure-inner { position: absolute; inset: 0; }
/* No mobile, só três etapas levam imagem — ritmo, não repetição */
@media (max-width: 1023px) {
  .care__step:nth-child(2) .care__figure,
  .care__step:nth-child(4) .care__figure { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .care__step { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  .care__title, .care__body { grid-column: 1; }
  .care__figure { grid-column: 2; grid-row: 1 / 3; margin: 0; aspect-ratio: 4 / 5; }
}

@media (min-width: 1024px) {
  .care__steps { display: grid; gap: var(--s-12); }
  .care__step {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding: 0;
  }
  .care__stem, .care__node { display: none; }
  .care__title { grid-column: 3 / 9; }
  .care__body { grid-column: 3 / 8; }
  .care__figure { grid-column: 9 / 13; grid-row: 1 / 3; aspect-ratio: 4 / 5; margin: 0; }
}

/* ---------- PALCO (desktop + movimento) ---------- */

.care { --care-dist: 430vh; }
html.motion.stage .care .care__track { height: calc(100vh + var(--care-dist)); }
html.motion.stage .care .care__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

html.motion.stage .care .care__head {
  position: absolute;
  inset: 0 var(--margin);
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-content: center;
  pointer-events: none;
}
html.motion.stage .care .care__label {
  grid-column: 3 / 9;
}
html.motion.stage .care .care__intro {
  grid-column: 3 / 10;
  font-size: var(--fs-h2);
  line-height: 1.1;
}

/* Trilho: onde você está no raciocínio */
html.motion.stage .care .care__rail {
  display: block;
  grid-column: 1 / 3;
  align-self: center;
  position: relative;
  z-index: 2;
}
.care__rail ol { display: grid; gap: var(--s-4); }
.care__rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgb(244 240 232 / 0.5);
  transition: color var(--dur-3) var(--ease-orient);
}
.care__rail a:hover,
.care__rail a.is-active { color: var(--c-marfim); }
.care__rail-tick {
  width: var(--s-2);
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-orient);
}
.care__rail a.is-active .care__rail-tick { transform: scaleX(2); }
.care__rail-text { transition: transform var(--dur-3) var(--ease-orient); }
.care__rail a.is-active .care__rail-text { transform: translateX(var(--s-2)); }
.care__rail-track {
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: rgb(244 240 232 / 0.2);
}
.care__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--c-marfim);
  transform: scaleY(0);
  transform-origin: top;
}

html.motion.stage .care .care__steps {
  position: absolute;
  inset: 0 var(--margin);
  display: block;
}
html.motion.stage .care .care__step {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* títulos alinhados pela base: o anterior sobe exatamente acima do atual */
  grid-template-rows: minmax(0, 1fr) auto 12rem 16vh;
  column-gap: var(--gutter);
  row-gap: var(--s-4);
  padding: calc(var(--hd-h-compact) + 4vh) 0 0;
  pointer-events: none;
}
html.motion.stage .care .care__step.is-active { pointer-events: auto; }
html.motion.stage .care .care__title {
  grid-column: 3 / 9;
  grid-row: 2;
  align-self: end;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  will-change: transform, opacity;
}
html.motion.stage .care .care__body {
  grid-column: 3 / 8;
  grid-row: 3;
  align-self: start;
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
html.motion.stage .care .care__figure {
  grid-column: 9 / 13;
  grid-row: 1 / 5;
  align-self: center;
  height: min(66vh, 44rem);
  aspect-ratio: auto;
  margin: 0;
  background: transparent;
}
html.motion.stage .care .care__figure-inner { will-change: transform; }

html.motion.stage:not(.motion-ready) .care .care__step,
html.motion.stage:not(.motion-ready) .care .care__rail { visibility: hidden; }

/* ==========================================================================
   DR. VINICIUS — desacelerar. Fotografia grande, trajetória em linhas.
   ========================================================================== */

.doctor {
  background: var(--c-marfim);
  padding: var(--section) var(--margin);
}
.doctor__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-8);
}
.doctor__portrait {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-cinza-60);
  margin-inline: calc(var(--margin) * -1) 0;
}
.doctor__portrait-inner { position: absolute; inset: -6% 0; }
.doctor__text { grid-column: 1 / -1; }
.doctor__title { margin-top: var(--s-4); font-size: var(--fs-h1-col); }
.doctor__intro { margin-top: var(--s-4); }
.doctor__cta { margin-top: var(--s-5); }

/* Trajetória: informação editorial estruturada */
.facts { margin-top: var(--s-8); }
.facts__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding: var(--s-3) 0;
}
.facts__line { position: absolute; top: 0; left: 0; }
.facts__row:last-child::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
}
.facts__term {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-top: 0.3em;
}
.facts__desc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}
.facts__detail {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: 1.3125rem;
  line-height: 1.25;
  color: var(--c-azul);
}
.facts__place,
.facts__year { font-size: var(--fs-small); color: var(--fg-muted); }
.facts__place::before { content: '— '; opacity: 0.5; }
.facts__desc--registry { font-size: var(--fs-small); color: var(--fg); padding-top: 0.25em; }

@media (min-width: 640px) {
  .facts__row { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--gutter); }
}

@media (min-width: 1024px) {
  .doctor__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* O retrato permanece enquanto a trajetória é lida */
  .doctor__portrait {
    grid-column: 1 / 7;
    margin: 0;
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - var(--hd-h-compact) - 8vh);
    align-self: start;
    position: sticky;
    top: calc(var(--hd-h-compact) + 4vh);
  }
  .doctor__text {
    grid-column: 8 / 13;
    padding-top: clamp(4rem, 14vh, 10rem);
  }
}

/* ==========================================================================
   PAUSA EDITORIAL — respiro. A imagem se abre a partir de um recorte estreito;
   as frases descem em diagonal, como a própria linha que orienta.
   ========================================================================== */

.pause {
  position: relative;
  background: var(--c-marfim);
  padding: var(--s-8) 0 var(--section);
}
.pause__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-cinza-80);
  margin-inline: var(--margin);
}
.pause__media-inner { position: absolute; inset: 0; }
.pause__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(22 52 71 / 0.35) 100%);
  opacity: 0;
}
.pause__phrases {
  display: grid;
  gap: var(--s-8);
  padding: var(--s-12) var(--margin) 0;
}
.pause__phrase {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--tracking-head);
  color: var(--c-azul);
}
.pause__phrase--2 { padding-left: 8%; }
.pause__phrase--3 { padding-left: 16%; }

@media (min-width: 768px) {
  .pause__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .pause__phrases {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--s-10);
  }
  .pause__phrase--1 { grid-column: 1 / 8; }
  .pause__phrase--2 { grid-column: 4 / 12; padding: 0; }
  .pause__phrase--3 { grid-column: 6 / 13; padding: 0; }
}

/* ---------- PALCO (desktop + movimento) ---------- */

html.motion.stage .pause { padding: 0; }
.pause { --pause-dist: 230vh; }
html.motion.stage .pause .pause__track { height: calc(100vh + var(--pause-dist)); }
html.motion.stage .pause .pause__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
html.motion.stage .pause .pause__media {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
  background: transparent;
  will-change: clip-path;
}
html.motion.stage .pause .pause__media-inner { will-change: transform; }
html.motion.stage .pause .pause__shade {
  background:
    linear-gradient(90deg, rgb(22 52 71 / 0.5) 0%, rgb(22 52 71 / 0.12) 60%, transparent 100%),
    linear-gradient(180deg, rgb(22 52 71 / 0.25) 0%, transparent 30%, rgb(22 52 71 / 0.35) 100%);
}
html.motion.stage .pause .pause__phrases {
  position: absolute;
  inset: 0;
  padding: calc(var(--hd-h-compact) + 10vh) var(--margin) 12vh;
  grid-template-rows: repeat(3, auto);
  align-content: space-between;
  pointer-events: none;
}
html.motion.stage .pause .pause__phrase {
  color: var(--c-marfim);
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4.75rem);
}

html.motion.stage:not(.motion-ready) .pause .pause__phrases { visibility: hidden; }

/* ==========================================================================
   ÁREAS DE ATUAÇÃO — lista editorial (ponteiro) / acordeão (toque)
   ========================================================================== */

.areas {
  background: var(--c-marfim);
  padding: var(--section) var(--margin);
}
.areas__head { margin-bottom: var(--s-10); }
.areas__title { margin-top: var(--s-4); }

/* Qual interação aparece: capacidade do dispositivo, não só largura */
.areas__list--pointer { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .areas__list--pointer { display: block; }
  .areas__list--touch { display: none; }
}

/* ---------- Lista (ponteiro) ---------- */

.areas__list--pointer { position: relative; }
.area__link {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-block: clamp(1.5rem, 2.4vw, 2.5rem);
  color: var(--c-azul);
  cursor: pointer;
}
.area__rule { position: absolute; top: 0; left: 0; }
.area__rule--last { position: relative; }
.area__rule-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-4) var(--ease-orient);
}
.area__title {
  grid-column: 1 / 8;
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: clamp(3rem, 1rem + 5.4vw, 7rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  transition:
    transform var(--dur-4) var(--ease-orient),
    color var(--dur-3) var(--ease-orient);
}
.area__go {
  grid-column: 12 / 13;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  color: var(--c-azul);
  opacity: 0.35;
  transition: opacity var(--dur-3), transform var(--dur-4) var(--ease-orient);
}
.area__go-line {
  width: var(--s-3);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-4) var(--ease-orient);
}
.area__go .i--arrow { width: 32px; margin-left: -1px; }

.areas__list--pointer.has-active .area__title { color: var(--fg-quiet); }
.area.is-active .area__title {
  color: var(--c-azul);
  transform: translateX(clamp(1rem, 2.2vw, 2.5rem));
}
.area.is-active .area__rule-active { transform: scaleX(1); }
.area.is-active .area__go { opacity: 1; }
.area.is-active .area__go-line { transform: scaleX(1); }
.area__link:focus-visible { outline-offset: -2px; }

/* Painel flutuante: imagem vertical + descrição, acompanha o item ativo */
.areas__visual {
  position: absolute;
  top: 0;
  left: calc((100% + var(--gutter)) / 12 * 7);
  width: calc((100% + var(--gutter)) / 12 * 2 - var(--gutter));
  aspect-ratio: 3 / 4;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}
.areas__img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-4) var(--ease-orient);
}
.areas__img .scene__note { display: none; }
.areas__img.is-active { clip-path: inset(0); }
.areas__img.is-leaving { clip-path: inset(0 0 100% 0); }
/* Descrição ocupa as duas colunas seguintes à imagem (mesma largura) */
.areas__detail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + var(--gutter));
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg-muted);
}
.areas__detail p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(calc(-50% + 10px));
  transition: opacity var(--dur-3) var(--ease-orient), transform var(--dur-4) var(--ease-orient);
}
.areas__detail p.is-active { opacity: 1; transform: translateY(-50%); transition-delay: 120ms; }

/* ---------- Acordeão (toque) ---------- */

.acc { position: relative; }
.acc__rule { color: var(--c-grafite); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 5rem;
  padding-block: var(--s-3);
  text-align: left;
  color: var(--c-azul);
}
.acc__title {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tracking-head);
}
.acc__icon { display: inline-flex; padding: var(--s-1); }
.acc__icon .i { width: 18px; height: 18px; }
.acc__icon .i__v { transform-origin: center; transition: transform var(--dur-3) var(--ease-orient); }
.acc__btn[aria-expanded='true'] .i__v { transform: scaleY(0); }

/* Sem JS: painéis abertos. Com JS: recolhidos e inertes até o toque. */
.acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-3) var(--ease-orient);
}
.acc__panel > .acc__panel-inner { overflow: hidden; min-height: 0; }
.js .acc:not(.is-open) .acc__panel { grid-template-rows: 0fr; }
.js .acc__panel-inner > * { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-orient); }
.js .acc.is-open .acc__panel-inner > * { opacity: 1; transform: none; transition-delay: 80ms; }
.js .acc__btn { cursor: pointer; }
.no-js .acc__icon { display: none; }
.acc__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: var(--s-3);
}
.acc__desc {
  max-width: 34rem;
  font-size: var(--fs-lead);
  color: var(--fg-muted);
  margin-bottom: var(--s-2);
}
.acc__panel-inner { padding-bottom: var(--s-5); }
.js .acc:not(.is-open) .acc__panel-inner { padding-bottom: 0; }

.areas__visual { transition: transform var(--dur-4) var(--ease-orient); }

/* ==========================================================================
   PERGUNTAS — a voz do paciente. Superfície Cinza Quente (mudança de
   perspectiva), com transição de luz, não de bloco.
   ========================================================================== */

.questions {
  position: relative;
  padding: var(--section) var(--margin);
  background: linear-gradient(
    180deg,
    var(--c-marfim) 0,
    var(--c-cinza-20) min(40vh, 22rem),
    var(--c-cinza-20) calc(100% - min(40vh, 22rem)),
    var(--c-marfim) 100%
  );
}
.questions__title { margin-top: var(--s-4); }

.questions__body {
  position: relative;
  margin-top: clamp(4rem, 14vh, 9rem);
  padding-left: clamp(2rem, 6vw, 6rem);
}
.questions__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  color: var(--c-azul);
}
.questions__rail-line { opacity: 0.2; }
.questions__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 4rem;
  background: var(--c-azul);
  opacity: 0;
  transform: translateY(0);
  transition: opacity var(--dur-3);
}
.questions__marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(1rem, 3vw, 3rem);
  height: 1px;
  background: currentColor;
  color: var(--c-azul);
  background: var(--c-azul);
}
.questions.has-active .questions__marker { opacity: 1; }

.questions__list { display: grid; gap: clamp(3.5rem, 16vh, 10rem); }
.question__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 4.25rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--c-azul);
  text-wrap: balance;
  transition: color var(--dur-4) var(--ease-orient), opacity var(--dur-4) var(--ease-orient);
}
.question__text .ln__i { transition: transform var(--dur-4) var(--ease-orient); }

/* Foco progressivo: fora de foco, contraste reduzido (≥ 3:1 — texto grande) */
.questions.has-active .question__text,
.questions.has-active .questions__closing { color: var(--fg-quiet); }
.questions.has-active [data-q].is-active .question__text,
.questions.has-active .questions__closing.is-active { color: var(--c-azul); }

.questions__closing {
  margin-top: clamp(6rem, 22vh, 14rem);
  font-style: normal;
  transition: color var(--dur-4) var(--ease-orient);
}

@media (min-width: 1024px) {
  .questions__body { margin-left: calc((100% + var(--gutter)) / 12 * 1); }
  .question:nth-child(even) { padding-left: calc((100% + var(--gutter)) / 11 * 2); }
}

/* ==========================================================================
   CONTEÚDOS — revista contemporânea: um conteúdo dominante + leituras
   secundárias em coluna tipográfica.
   ========================================================================== */

.articles {
  background: var(--c-marfim);
  padding: var(--section) var(--margin);
}
.articles__head { margin-bottom: var(--s-10); }
.articles__title { margin-top: var(--s-4); }

.articles__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-10);
}

.feature__link { display: grid; gap: var(--s-4); color: var(--fg); }
.feature__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-cinza-60);
}
.feature__media-inner {
  position: absolute;
  inset: 0;
  transition: transform 1.4s var(--ease-orient);
}
.feature__text { display: grid; gap: var(--s-2); justify-items: start; }
.feature__title {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--tracking-head);
  color: var(--c-azul);
  text-wrap: balance;
}
.feature__dek { max-width: 36rem; color: var(--fg-muted); font-size: var(--fs-lead); }
.feature__go { color: var(--c-azul); transition: transform var(--dur-3) var(--ease-orient); }
.feature__go .i--arrow { width: 36px; }

@media (hover: hover) {
  .feature__link:hover .feature__media-inner { transform: scale(1.035); }
  .feature__link:hover .feature__go { transform: translateX(8px); }
}

.reads { display: grid; }
.read { position: relative; }
.read__rule { position: absolute; top: 0; left: 0; }
.read__link {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6) var(--s-4) 0;
  color: var(--fg);
}
.read__title {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h3);
  line-height: 1.18;
  color: var(--c-azul);
  text-wrap: balance;
}
.read__go {
  position: absolute;
  right: 0;
  bottom: var(--s-4);
  color: var(--c-azul);
  opacity: 0.4;
  transition: transform var(--dur-3) var(--ease-orient), opacity var(--dur-2);
}
@media (hover: hover) {
  .read__link:hover .read__go { opacity: 1; transform: translateX(6px); }
}
.reads__all { padding-top: var(--s-4); border-top: 1px solid var(--line); }

@media (min-width: 1024px) {
  .articles__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .feature { grid-column: 1 / 7; }
  .reads { grid-column: 8 / 13; align-self: end; }
}
@media (min-width: 1280px) {
  .feature { grid-column: 1 / 8; }
  .reads { grid-column: 9 / 13; }
  .feature__media { aspect-ratio: 16 / 11; }
}

/* ==========================================================================
   VIVENZA — estrutura. Arquitetura dominante; a informação prática organizada
   em linhas. A marca da clínica endossa (Inter, caixa-alta) — não compete.
   ========================================================================== */

.vivenza {
  background: var(--c-marfim);
  padding: var(--section) var(--margin);
}
.vivenza__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-8);
}
.vivenza__title { margin-top: var(--s-4); font-size: var(--fs-h1-col); }
.vivenza__copy { margin-top: var(--s-4); }

.vivenza__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-cinza-40);
  margin-inline: calc(var(--margin) * -1);
}
.vivenza__media-inner { position: absolute; inset: -6% 0; }

.vivenza__brand {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.vivenza__brand-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-azul);
}
.vivenza__brand-role {
  font-size: 0.75rem;
  color: var(--fg-muted);
}
.vivenza__brand-role::before { content: '— '; opacity: 0.6; }

.vivenza__list { display: grid; }
.vivenza__row {
  position: relative;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) 0;
}
.vivenza__row .oline { position: absolute; top: 0; left: 0; }
.vivenza__row dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.vivenza__row dd { font-size: var(--fs-body); }
.vivenza__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.map {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-cinza-20);
}
.map--pending { display: grid; place-items: center; }
.map__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
}
.map__note-pending {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-mineral);
}
.map__load {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-azul);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.6) contrast(0.95); }

@media (min-width: 1024px) {
  .vivenza__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--s-10);
  }
  .vivenza__text { grid-column: 1 / 8; grid-row: 1; align-self: end; }
  .vivenza__media { grid-column: 8 / 13; grid-row: 1; margin: 0 calc(var(--margin) * -1) 0 0; aspect-ratio: 5 / 4; }
  .vivenza__info { grid-column: 1 / 6; grid-row: 2; }
  .vivenza__map { grid-column: 8 / 13; grid-row: 2; align-self: start; }
  .map { aspect-ratio: 16 / 8; }
  .vivenza__row { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--gutter); }
}

/* ==========================================================================
   ENCERRAMENTO — Azul Profundo, muito espaço. A linha desce e termina no CTA.
   ========================================================================== */

.closing { background: var(--c-marfim); }

.closing__panel {
  --fg: var(--c-marfim);
  --fg-strong: var(--c-marfim);
  --fg-muted: var(--c-azul-20);
  --line: rgb(244 240 232 / 0.22);
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--c-azul);
  color: var(--c-marfim);
  padding: calc(var(--section) * 1.1) var(--margin) var(--section);
}
.closing__panel ::selection { background: var(--c-marfim); color: var(--c-azul); }
/* Textura, não fotografia: baixa opacidade + desfoque, para não competir
   com o texto nem virar uma foto legível de um ambiente/objeto específico.
   (Antes só a cena-placeholder tinha esse tratamento; a foto real herda
   o mesmo princípio agora — ver content/media.mjs → closing.) */
.closing__bg { position: absolute; inset: -2%; opacity: 0.16; filter: blur(3px) saturate(0.85); }
.closing__bg .scene__note { display: none; }
.closing__bg .scene__grain { display: none; } /* já não precisa: a foto real tem grão próprio */

/* A Linha de Orientação desce do topo e dobra em direção ao CTA */
.closing__line {
  position: absolute;
  top: 0;
  left: calc(var(--margin) / 2);
  width: 1px;
  height: var(--closing-line-h, 18vh);
  background: rgb(244 240 232 / 0.4);
  transform-origin: top;
}
.closing__branch {
  display: none;
  position: absolute;
  top: var(--closing-line-h, 18vh);
  left: calc(var(--margin) / 2);
  width: var(--closing-branch-w, 0px);
  height: 1px;
  background: rgb(244 240 232 / 0.4);
  transform-origin: left;
}

.closing__inner { position: relative; width: 100%; }
.closing__title { color: var(--c-marfim); }
.closing__copy { margin-top: var(--s-5); max-width: 30rem; }
.closing__cta { margin-top: var(--s-6); }
.closing__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  max-width: 34rem;
}
.closing__channels li { display: flex; gap: var(--s-2); align-items: baseline; }
.closing__channel-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-azul-40);
}
.closing__channels a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (min-width: 1024px) {
  .closing__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .closing__title { grid-column: 2 / 11; }
  .closing__copy,
  .closing__cta,
  .closing__channels { grid-column: 2 / 8; }
  .closing__line, .closing__branch { left: var(--margin); }
  .closing__branch { display: block; }
}

/* ==========================================================================
   PÁGINAS INTERNAS — trajetória, áreas, conteúdos, artigo, institucionais
   ========================================================================== */

/* Abertura: a linha desce do título até o conteúdo */
.pintro {
  position: relative;
  padding: calc(var(--hd-h) + clamp(4rem, 14vh, 9rem)) var(--margin) var(--s-12);
}
.pintro__crumb { margin-bottom: var(--s-6); }
.pintro__crumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pintro__crumb a::before { content: '←'; transition: transform var(--dur-3) var(--ease-orient); }
.pintro__crumb a:hover::before { transform: translateX(-4px); }
.pintro__title { margin-top: var(--s-4); }
.pintro__lead { margin-top: var(--s-5); }
.pintro__line {
  position: absolute;
  left: var(--margin);
  bottom: calc(var(--s-12) * -1);
  height: var(--s-12);
  color: var(--c-azul);
}

.prose {
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.prose > * + * { margin-top: 1.25em; }
.prose h2 {
  margin-top: 2em;
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--c-azul);
}
.prose ul { display: grid; gap: 0.5em; }
.prose li { position: relative; padding-left: 1.5rem; }
.prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.875rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.prose__pull {
  margin-block: 2em !important;
  padding-left: var(--s-4);
  border-left: 1px solid var(--c-azul);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--c-azul);
}

/* Trajetória */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-10);
  padding: var(--s-12) var(--margin) var(--section);
}
.bio__portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-cinza-60); }
.bio__portrait-inner { position: absolute; inset: 0; }
.bio__label { margin-top: var(--s-10); }
.bio__cta { margin-top: var(--s-8); }
@media (min-width: 1024px) {
  .bio { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .bio__portrait { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--hd-h-compact) + var(--s-4)); }
  .bio__text { grid-column: 7 / 13; }
}

/* Área de atuação */
.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-10);
  padding: var(--s-12) var(--margin) var(--section);
}
.spec__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-cinza-60); }
.spec__media-inner { position: absolute; inset: 0; }
.spec__summary {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--c-azul);
  max-width: 34rem;
  margin-bottom: var(--s-10);
}
.spec__list { margin-top: var(--s-3); margin-bottom: var(--s-6); }
.spec__list li {
  position: relative;
  padding: var(--s-3) 0;
  font-size: var(--fs-lead);
}
.spec__list .oline { position: absolute; top: 0; left: 0; }
.spec__cta { margin-top: var(--s-8); }
@media (min-width: 1024px) {
  .spec { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .spec__media { grid-column: 1 / 5; align-self: start; }
  .spec__body { grid-column: 6 / 12; }
}
.spec-next {
  padding: var(--section) var(--margin);
  background: var(--c-cinza-20);
}
.spec-next__q { max-width: 16ch; }
.spec-next__list { margin-top: var(--s-8); display: grid; gap: var(--s-1); }

/* Índice de conteúdos */
.archive { padding: var(--s-12) var(--margin) var(--section); }
.archive__item { position: relative; }
.archive__item .oline { position: absolute; top: 0; left: 0; }
.archive__link {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
}
.archive__date { font-size: 0.75rem; color: var(--fg-muted); }
.archive__main { display: grid; gap: var(--s-2); }
.archive__title {
  font-family: var(--font-serif);
  font-weight: var(--w-serif);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--tracking-head);
  color: var(--c-azul);
  text-wrap: balance;
  transition: transform var(--dur-4) var(--ease-orient);
}
.archive__dek { color: var(--fg-muted); max-width: 40rem; }
.archive__go { color: var(--c-azul); opacity: 0.4; transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-orient); }
.archive__go .i--arrow { width: 36px; }
@media (hover: hover) {
  .archive__link:hover .archive__title { transform: translateX(12px); }
  .archive__link:hover .archive__go { opacity: 1; transform: translateX(6px); }
}
@media (min-width: 1024px) {
  .archive__link { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .archive__date { grid-column: 1 / 3; }
  .archive__main { grid-column: 3 / 11; }
  .archive__go { grid-column: 12 / 13; justify-self: end; }
}

/* Artigo */
.post__head {
  padding: calc(var(--hd-h) + clamp(3rem, 12vh, 8rem)) var(--margin) var(--s-10);
  max-width: calc(58rem + var(--margin) * 2);
}
.post__title { margin-top: var(--s-4); font-size: var(--fs-h1); }
.post__dek { margin-top: var(--s-4); }
.post__byline { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--fg-muted); }
.post__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  margin-inline: var(--margin);
  background: var(--c-cinza-60);
}
.post__media-inner { position: absolute; inset: 0; }
.post__body {
  position: relative;
  display: grid;
  gap: var(--s-8);
  padding: var(--s-12) var(--margin) var(--s-12);
}
.post__line { position: absolute; left: var(--margin); top: 0; height: var(--s-10); color: var(--c-azul); }
.post__cta {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  max-width: 40rem;
}
.post__next {
  padding: var(--s-10) var(--margin) var(--section);
  border-top: 1px solid var(--line);
  margin-inline: var(--margin);
  padding-inline: 0;
}
.post__next-link { margin-top: var(--s-2); text-transform: none; letter-spacing: 0; font-size: var(--fs-h3); font-family: var(--font-serif); font-weight: var(--w-serif); }
@media (min-width: 1024px) {
  .post__head, .post__body { padding-left: calc(var(--margin) + (100% - var(--margin) * 2 + var(--gutter)) / 12 * 2); }
  .post__line { left: calc(var(--margin) + (100% - var(--margin) * 2 + var(--gutter)) / 12 * 2 - var(--s-8)); }
}

.legal { padding: var(--s-8) var(--margin) var(--section); }