/* ============================================================
   PHEELVOX · SITE v2 — a estátua no escuro, o corpo editorial
   Solidez por fora. Tecnologia por dentro.
   ============================================================ */

/* ---------- Base ---------- */
:root { --mx: clamp(28px, 10vw, 150px); }
*, *::before, *::after { box-sizing: border-box; }
/* scroll-behavior:smooth de CSS conflita com o ScrollTrigger — rolagem suave via JS.
   body transparente: com bg no html E no body, o body cobriria o canvas
   de mármore (z-index negativo pinta antes do fundo do body). */
html { background: #F1EDE4; }
body { background: transparent; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--accent-text); }
::selection { background: rgba(240, 86, 31, .22); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1200px; margin: 0 auto; }
.wrap-narrow { max-width: 880px; }
.wrap-tight { max-width: 640px; }

/* Voz mono — o sotaque técnico */
.eyebrow, .head-nav a, .head-cta, .btn, .foot-nav a, .foot-line,
.panel-eyebrow, #panel-close, .ticker-track span, #pre-l,
.ct-ok, #menu-btn, .hero-eyebrow, .hf-sign, .hf-loc,
.sol-nav a, .sol-num, #met-verbo, .prin-num, .cta-txt > span {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow { font-size: 11px; color: var(--text-tertiary); }
.eyebrow-light { color: rgba(244, 241, 234, .55); }
.eb-star { color: var(--accent); }
.eb-phi { color: var(--accent); font-family: var(--font-display); font-style: italic; text-transform: none; }
.dot-accent, .cta-arrow { color: var(--accent); }
.cta-arrow { font-family: var(--font-sans); }

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--text-primary);
  text-wrap: pretty;
}
h2 em { color: var(--accent); font-weight: 440; }
/* entalhe: os títulos parecem esculpidos na superfície */
#tese h2, #solucoes h2, #escada h2, #principios h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }

/* Botões — obsidiana polida (sólido) e pedra lavrada (fantasma) */
.btn {
  font-size: 12px;
  border-radius: 7px;
  padding: 18px 30px;
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  border: 0;
  will-change: transform;
  transition: transform .32s var(--ease-out), box-shadow .38s var(--ease-out), background .38s var(--ease-out);
}
.btn .cta-arrow { display: inline-block; transition: transform .25s var(--ease-out); }
.btn-solid { position: relative; overflow: hidden; }
.btn-solid::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ichor-h); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.btn-solid:hover::after { transform: scaleX(1); }
.btn-paper { position: relative; overflow: hidden; }
.btn-paper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ichor-h); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .5s var(--ease-out);
}
.btn-paper:hover::after { transform: scaleX(1); }

.btn-solid {
  color: var(--text-inverse);
  /* tinta Egeu, não preto puro: o bloco deixa de brigar com o creme */
  background: linear-gradient(180deg, #1C2231 0%, #141A28 52%, #0F141F 100%);
  box-shadow:
    inset 0 1px 0 rgba(244, 241, 234, .13),
    inset 0 0 0 1px rgba(244, 241, 234, .06),
    0 2px 6px -2px rgba(11, 16, 32, .22),
    0 20px 40px -22px rgba(11, 16, 32, .5);
}
.btn-solid:hover {
  color: var(--text-inverse);
  transform: translateY(-2px);
  background: linear-gradient(180deg, #222939 0%, #18202E 52%, #121824 100%);
  box-shadow:
    inset 0 1px 0 rgba(244, 241, 234, .16),
    inset 0 0 0 1px rgba(244, 241, 234, .08),
    inset 0 -18px 30px -20px rgba(240, 86, 31, .5),
    0 2px 8px -2px rgba(11, 16, 32, .24),
    0 28px 50px -24px rgba(11, 16, 32, .52);
}
.btn-ghost {
  color: var(--text-primary);
  background: linear-gradient(180deg, #FBF8F1, #F3EFE6);
  border: 1px solid rgba(11, 16, 32, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 22px -14px rgba(11, 16, 32, .35);
}
.btn-ghost:hover {
  color: var(--text-primary);
  transform: translateY(-2px);
  background: linear-gradient(180deg, #FFFDF8, #F6F2E9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 32px -14px rgba(11, 16, 32, .4);
}
.btn-paper { background: #F4F1EA; color: #0C0C0E; font-size: 11.5px; padding: 15px 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 22px -14px rgba(0, 0, 0, .5); }

.ct-ok[hidden], .btn[hidden] { display: none; }

/* a fissura acende sob o rótulo no hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 9px; height: 1px; opacity: .8;
  background: var(--ichor-h);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .34s var(--ease-out);
}
.btn:hover::after { transform: scaleX(1); }
.btn:active { transform: translateY(0); }

/* Sublinha-fissura nos links */
[data-fis] { position: relative; }
[data-fis]::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
  background: linear-gradient(90deg, #B34A18, #F0561F, rgba(240, 86, 31, .15));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s var(--ease-out);
}
[data-fis]:hover::after { transform: scaleX(1); }

/* ---------- Camadas fixas ---------- */
#marble-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; }
#pvx-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  z-index: 130; pointer-events: none;
}
#grain {
  position: fixed; inset: -64px; z-index: 60; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="256" height="256" filter="url(%23n)"/></svg>');
}

/* Cursor próprio */
#cur-ring {
  position: fixed; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 1.5px solid rgba(240, 86, 31, .55); border-radius: 50%;
  z-index: 201; pointer-events: none; display: grid; place-items: center; transform: scale(.34);
}
#cur-lb { font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; color: var(--accent); opacity: 0; text-transform: uppercase; white-space: nowrap; }
/* o cursor é uma brasa: visível no mármore e no Egeu */
#cur-dot {
  position: fixed; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--accent); z-index: 202; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(244, 241, 234, .9), 0 2px 10px rgba(12, 12, 14, .4), 0 0 14px rgba(240, 86, 31, .45);
}
html.zone-dark #cur-dot, .pg-diag #cur-dot {
  box-shadow: 0 0 0 2px rgba(9, 9, 11, .85), 0 0 16px rgba(240, 86, 31, .6);
}
@media (pointer: coarse) { #cur-dot, #cur-ring { display: none; } }
html.fine-pointer body, html.fine-pointer a, html.fine-pointer button { cursor: none; }

/* ---------- Preloader ---------- */
#preloader { position: fixed; inset: 0; z-index: 9999; overflow: hidden; }
#pre-top { position: absolute; left: 0; right: 0; top: 0; height: calc(50% + 1px); background: #0C0C0E; }
#pre-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #0C0C0E; }
#pre-fis {
  position: absolute; left: 0; top: 50%; height: 1px; width: 100%;
  background: var(--ichor-h); transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 18px rgba(240, 86, 31, .8);
}
#pre-ui { position: absolute; inset: 0; display: grid; place-items: center; }
.pre-stack { display: grid; gap: 34px; justify-items: center; }
.pre-mark-wrap { position: relative; display: grid; place-items: center; width: 210px; height: 210px; perspective: 900px; }
#pre-mark { position: relative; width: 148px; height: 160px; overflow: visible; transform-style: preserve-3d; }
#pm-flame, #pm-wing { fill: transparent; stroke-width: 2.4; stroke-linejoin: round; }
#pm-flame { stroke: url(#pvxIcor); }
#pm-wing { stroke: rgba(244, 241, 234, .85); }
.pre-med { display: grid; gap: 14px; justify-items: center; }
#pre-num { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1;
  letter-spacing: -.02em; color: rgba(244, 241, 234, .92); font-variant-numeric: tabular-nums; }
.pre-regua { display: block; width: min(240px, 44vw); height: 2px; background: rgba(244, 241, 234, .14); overflow: hidden; border-radius: 2px; }
#pre-fill { display: block; width: 100%; height: 100%; background: var(--ichor-h);
  transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Header ---------- */
#site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 22px var(--mx);
  transition: background .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
#site-head.is-scrolled::before { opacity: 1; }
#site-head::before {
  content: ""; position: absolute; inset: 0 0 -18px; z-index: -1; opacity: 0;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  background: linear-gradient(to bottom, rgba(243, 239, 230, .93) 0%, rgba(243, 239, 230, .55) 62%, rgba(243, 239, 230, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
html.zone-dark #site-head::before {
  background: linear-gradient(to bottom, rgba(9, 9, 11, .92) 0%, rgba(9, 9, 11, .52) 62%, rgba(9, 9, 11, 0) 100%);
}
.head-logo img { height: 32px; display: block; }
.head-logo .logo-dark { display: none; }
html.zone-dark .head-logo .logo-light { display: none; }
html.zone-dark .head-logo .logo-dark { display: block; }
.head-nav { display: flex; gap: 34px; align-items: center; }
.head-nav a { font-size: 11.5px; letter-spacing: .14em; color: var(--text-primary); }
html.zone-dark .head-nav a { color: #F4F1EA; }
.head-cta {
  font-size: 11px; letter-spacing: .14em; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 20px; color: var(--text-primary); display: inline-block;
}
html.zone-dark .head-cta { color: #F4F1EA; border-color: rgba(244, 241, 234, .35); }
#menu-btn {
  display: none; font-size: 10.5px; border: 1px solid var(--border-strong); background: transparent;
  border-radius: var(--radius-sm); padding: 9px 14px; color: var(--text-primary);
}
html.zone-dark #menu-btn { color: #F4F1EA; border-color: rgba(244, 241, 234, .35); }

#mobile-menu {
  position: fixed; inset: 0; z-index: 150; background: rgba(9, 9, 11, .97);
  display: grid; align-content: center; justify-items: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s;
}
#mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out); }
#mobile-menu nav { display: grid; gap: 4px; justify-items: center; }
#mobile-menu a {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 8vw, 44px);
  color: #F4F1EA; padding: 8px 0;
}
#mobile-menu .mm-cta {
  margin-top: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(244, 241, 234, .35); border-radius: var(--radius-sm); padding: 15px 26px;
}

/* ============================================================
   I · HERO — o hero clássico dentro do notebook
   O conteúdo da tela é diagramado no tamanho do viewport e
   reduzido (--k) para caber no note; o scroll mergulha até a
   tela casar 1:1 com a janela.
   ============================================================ */
#hero { position: relative; height: 150vh; z-index: 1; }
#hero-pin {
  position: relative; height: 100vh; overflow: hidden;
  display: grid; justify-items: center;
  /* transparente: o mármore procedural vivo (WebGL) é a ambientação */
}
.hero-under {
  position: absolute; right: 44px; bottom: 30px;
  display: grid; justify-items: center; gap: 10px; z-index: 6;
}
.hu-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; font-size: 9.5px; color: var(--text-secondary); }
#scroll-cue { position: relative; width: 1px; height: 40px; overflow: hidden; background: rgba(11, 16, 32, .14); }
.cue-fill { position: absolute; inset: 0; background: linear-gradient(180deg, #B34A18, #F0561F); animation: pvx-cue 2.2s var(--ease-out) infinite; }

/* névoa no topo: a estátua se dissolve sob a nav */
#oh-topfade {
  position: absolute; left: 0; right: 0; top: 0; height: 104px; z-index: 6; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244, 241, 234, .8) 0%, rgba(244, 241, 234, .38) 50%, transparent 100%);
}
/* o palco do hero clássico, full-bleed */
#old-hero {
  position: relative;
  width: 1440px; margin: 0 auto;
  height: 100%;
  min-height: 640px;
  /* geometria do busto — espelhada na máscara do texto (proporções do v1) */
  --bustK: 1.2;
  --bustW: calc(722px * var(--bustK)); --bustH: calc(946px * var(--bustK)); --bustTop: 0px;
  --maskH: calc(939px * var(--bustK)); --maskTop: 5px;
  --heroFs: 218px; --l1Top: 118px; --l2Top: 298px;
}
#fx-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.oh-axis-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(240, 86, 31, .14); animation: pvx-linepulse 6.5s ease-in-out infinite; pointer-events: none; }
.oh-axis-h { position: absolute; left: 0; right: 0; top: 44%; height: 1px; background: rgba(11, 16, 32, .10); animation: pvx-linepulse 6.5s ease-in-out 3.2s infinite; pointer-events: none; }
.oh-scanline { position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 86, 31, .45), transparent); animation: pvx-scanline 13s ease-in-out infinite; pointer-events: none; }
#plx-c1, #plx-c2 { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
#plx-c1 { width: 700px; height: 700px; border: 1px solid rgba(176, 110, 50, .26); }
#plx-c2 { width: 1020px; height: 1020px; border: 1px solid rgba(11, 16, 32, .08); }
.orb { position: absolute; inset: -1px; }
.orb-a { animation: pvx-orbit 70s linear infinite; }
.orb-b { animation: pvx-orbit 120s linear infinite reverse; }
.orb-c { inset: 110px; animation: pvx-orbit 38s linear infinite; }
.orb-dash { position: absolute; inset: 0; width: 100%; height: 100%; animation: pvx-orbit-rev 52s linear infinite; }
.orb-dot { position: absolute; left: 50%; border-radius: 50%; }
.orb-dot-accent { top: -3px; width: 6px; height: 6px; margin-left: -3px; background: var(--accent); opacity: .7; }
.orb-dot-ink { top: -2px; width: 4px; height: 4px; margin-left: -2px; background: #0B1020; opacity: .35; }
.orb-dot-talos { bottom: -2px; width: 3px; height: 3px; margin-left: -1.5px; background: var(--talos); opacity: .55; }
.oh-star { position: absolute; color: var(--accent); pointer-events: none; }
.oh-star-1 { left: 18%; top: 63%; font-size: 16px; animation: pvx-twinkle 3.4s ease-in-out infinite; }
.oh-star-2 { right: 20%; bottom: 12%; font-size: 12px; animation: pvx-twinkle 4.6s ease-in-out 1.2s infinite; }
#plx-l1, #plx-l1bs, #plx-l2a > span, #plx-l2bs {
  font-family: var(--font-display); font-weight: 520; line-height: 1;
  letter-spacing: -0.02em; margin: 0; white-space: nowrap; pointer-events: none;
  font-size: var(--heroFs);
}
#plx-l1 { position: absolute; left: 50%; transform: translateX(-50%); top: var(--l1Top); color: var(--text-primary); z-index: 1; }
#plx-l2a { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#plx-l2a > span { position: absolute; left: 50%; transform: translateX(-50%); top: var(--l2Top); color: var(--text-primary); }
#plx-l2a em, #plx-l2bs em { font-weight: 440; font-style: italic; margin-right: .24em; }
#plx-l2a em { color: var(--accent); }
#plx-l2b, #plx-l1b {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  /* mascara propria, e nao a arte do busto: a borda alfa da arte e suave, e
     onde ela e parcial o texto creme aparece parcialmente — inclusive em pixel
     que ja esta FORA da estatua. Como o Paros e mais claro que o marmore, esse
     fio virava um contorno branco em volta de toda a silhueta. A mascara e a
     mesma silhueta erodida 3px, entao o creme para antes de tocar o fundo.
     De brinde: 11 KB em vez de 136 KB, e o navegador nao decodifica a imagem
     colorida inteira so para mascarar. */
  -webkit-mask-image: url(../assets/imagery/hero-mask.webp); mask-image: url(../assets/imagery/hero-mask.webp);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  /* mesma geometria do #bust-box: qualquer divergencia aqui faz o knockout escapar da silhueta */
  -webkit-mask-size: var(--bustW) var(--bustH); mask-size: var(--bustW) var(--bustH);
  -webkit-mask-position: center var(--bustTop); mask-position: center var(--bustTop);
}
#plx-l2bs { position: absolute; left: 50%; transform: translateX(-50%); top: var(--l2Top); color: var(--paros); }
#plx-l1bs { position: absolute; left: 50%; transform: translateX(-50%); top: var(--l1Top); color: var(--paros); }
#oh-glow {
  position: absolute; left: 50%; top: 40%; width: 1200px; height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 55% 40% at 50% 52%, rgba(255, 110, 30, .16), rgba(255, 110, 30, .05) 45%, transparent 72%);
  opacity: .12; z-index: 1; pointer-events: none;
  mix-blend-mode: multiply;
}
#oh-ground {
  position: absolute; left: 50%; top: 1070px; width: 516px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(28, 20, 14, .17), transparent 70%);
  filter: blur(24px);
  z-index: 2; pointer-events: none;
}
#bust-box {
  position: absolute; left: 50%; margin-left: calc(var(--bustW) / -2);
  top: var(--bustTop); width: var(--bustW); height: var(--bustH);
  z-index: 2; will-change: transform;
}
#bust-gl { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 34px 50px rgba(12, 12, 14, .35)); }
#fx-spark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#plx-ann { position: absolute; right: 150px; top: 292px; display: grid; gap: 10px; justify-items: end; z-index: 4; pointer-events: none; }
.ann-star { color: var(--accent); font-size: 15px; }
.ann-body { border-top: 1px solid var(--border-strong); padding-top: 12px; display: grid; gap: 3px; justify-items: end; text-align: right; min-width: 24px; }
.ann-body span { font-family: var(--font-mono); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--text-secondary); }
.ann-body .ann-accent { color: var(--accent-text); }
#plx-blur {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 4; pointer-events: none;
  backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
  background: linear-gradient(to top, #F4F1EA 0%, rgba(244, 241, 234, .94) 22%, rgba(244, 241, 234, .45) 62%, rgba(244, 241, 234, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 100%);
  mask-image: linear-gradient(to top, #000 42%, transparent 100%);
}
/* Centrado por margem, nao por transform: o GSAP anima este elemento e converteria
   o translateX(-50%) em matriz inline, que sobrevive a troca de media query e
   deslocava o CTA para fora da tela no mobile. */
#hero-cta { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content;
  max-width: calc(100% - 48px); bottom: 44px; display: grid; gap: 18px; justify-items: center; z-index: 5; }
#hero-cta p { margin: 0; font-size: 19px; font-weight: 500; color: var(--text-primary); text-align: center; white-space: nowrap; }
#hero-cta em { color: var(--accent); }
.hero-cta-row { display: flex; gap: 16px; justify-content: center; }
.hero-cta-row .btn { white-space: nowrap; }
.btn-ghost { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-strong); }

/* ============================================================
   II · A TESE — cortina Paros sobre o hero
   ============================================================ */
#tese {
  position: relative; z-index: 3;
  margin-top: -42vh;
  --teseGut: clamp(24px, 4vw, 72px);
  padding-bottom: clamp(40px, 6vh, 80px);
  perspective: 1100px;
  background: linear-gradient(180deg, #F2EFE7 0%, rgba(244, 241, 234, .96) 34%, rgba(244, 241, 234, .86) 100%);
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  box-shadow: 0 -34px 90px rgba(4, 4, 6, .58);
}
.ticker { overflow: hidden; border-bottom: 1px solid rgba(11, 16, 32, .10); padding: 22px 0 20px; white-space: nowrap; position: relative; }
.ticker-track { display: inline-flex; align-items: baseline; will-change: transform; }
.tk-g { font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .14em; color: var(--text-primary); padding: 0 22px; }
.tk-g em { font-style: italic; color: var(--accent); }
.tk-s { font-size: 12px; color: var(--accent-text); opacity: .55; }
.tese-wrap {
  padding: clamp(90px, 13vh, 170px) var(--mx) 0;
  max-width: 1560px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: var(--teseGut);
  row-gap: 26px;
  align-items: start;
}
/* a marca do capítulo, gravada na margem */
.tese-marca { grid-row: 1 / span 3; display: grid; gap: 18px; justify-items: center; padding-top: 6px; }
.tese-num {
  font-family: var(--font-display); font-weight: 500; font-size: 78px; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.2px rgba(11, 16, 32, .38);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.tese-rule { width: 1px; height: 62vh; min-height: 340px; background: linear-gradient(to bottom, rgba(11, 16, 32, .22), transparent); box-shadow: 1px 0 0 rgba(255, 255, 255, .6); }
.tese-wrap > .eyebrow { grid-column: 2; }
.tese-line {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--text-primary);
  max-width: 20ch;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.tese-line em { color: var(--accent); font-weight: 440; }
/* palavras ainda não cinzeladas: sulco raso na pedra */
.tese-line .tw {
  color: rgba(11, 16, 32, .3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 1px rgba(11, 16, 32, .12);
  transition: color .3s var(--ease-out), text-shadow .3s var(--ease-out);
}
.tese-line .tw.lit { color: var(--text-primary); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.tese-line em .tw.lit { color: var(--accent); }
.tese-line em { position: relative; }
.tese-line em::after {
  content: ""; position: absolute; left: 0; right: .08em; bottom: .06em; height: 3px;
  background: var(--ichor-h); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease-out);
}
#tese.tese-cheia .tese-line em::after { transform: scaleX(1); }
/* o rodape da tese: contraponto a esquerda, evidencia a direita */
.tese-base {
  grid-column: 2; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 90px); align-items: start;
  margin-top: clamp(24px, 5vh, 68px);
}
.tese-selo { display: grid; gap: 16px; justify-items: start; padding-top: 26px;
  border-top: 1px solid rgba(11, 16, 32, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65); }
.ts-phi { font-family: var(--font-display); font-style: italic; font-size: 34px; line-height: 1;
  color: var(--accent); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.ts-slogan { margin: 0; font-family: var(--font-display); font-weight: 460; font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.32; color: var(--text-primary); }
.ts-slogan em { font-style: italic; color: var(--accent-text); }

.tese-apoio {
  display: grid; gap: 14px;
  max-width: 560px;
  padding-top: 26px;
  border-top: 1px solid rgba(11, 16, 32, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
  position: relative;
}
.tese-apoio::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 88px; height: 2px;
  background: var(--ichor-h);
}
.tese-apoio p { margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--text-secondary); }
/* a base da estela */
#tese::after {
  content: ""; position: absolute; left: var(--mx); right: var(--mx); bottom: clamp(20px, 3vh, 40px); height: 1px;
  background: rgba(11, 16, 32, .16); box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.tese-apoio .ta-forte { font-family: var(--font-display); font-weight: 480; font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.32; letter-spacing: -.012em; color: var(--text-primary); }
.tese-apoio .ta-forte em { font-style: italic; color: var(--accent); }
@media (max-width: 900px) {
  .tese-wrap { grid-template-columns: 1fr; }
  .tese-marca { display: none; }
  .tese-wrap > .eyebrow, .tese-line, .tese-base { grid-column: 1; }
  .tese-base { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tese-apoio { justify-self: start; max-width: none; }
  .tese-selo { padding-top: 22px; }
}

/* ============================================================
   III · SOLUÇÕES — o índice: tipografia gigante, a peça segue o cursor
   ============================================================ */
#solucoes { background: rgba(244, 241, 234, .78); padding: clamp(20px, 3vh, 44px) var(--mx) clamp(80px, 10vh, 130px); position: relative; z-index: 3; overflow: hidden; }
.idx-wrap { max-width: 1400px; display: grid; gap: clamp(36px, 6vh, 72px); }
.sol-head { display: grid; gap: 16px; max-width: 700px; }
.sol-head h2 { font-size: clamp(38px, 5vw, 78px); line-height: 1.02; }
.sol-sub { margin: 0; font-size: 16.5px; line-height: 1.68; color: var(--text-secondary); max-width: 560px; }

.idx-list { list-style: none; margin: 0; padding: 0; display: grid; }
.idx-row { border-top: 1px solid rgba(11, 16, 32, .14); cursor: pointer; outline: none; }
.idx-row:last-child { border-bottom: 1px solid rgba(11, 16, 32, .14); }
.ir-t-wrap { margin: 0; }
.ir-linha { display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 34px); padding: clamp(20px, 3.4vh, 34px) 0;
  /* e um <button> real agora: zera o chrome nativo, herda o desenho da linha */
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; }
.ir-linha:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.ir-num { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; color: var(--accent-text); flex: none; }
.ir-t {
  display: block; margin: 0; font-family: var(--font-display); font-weight: 520; letter-spacing: -.022em;
  font-size: clamp(38px, 5.6vw, 92px); line-height: .98;
  /* inscrição em repouso: gravada na pedra, não contornada — contorno em Fraunces desse
     corpo fica raquítico e quebra nos serifas finas */
  color: rgba(11, 16, 32, .42);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .68), 0 -1px 1px rgba(11, 16, 32, .1);
  transition: color .45s var(--ease-out), text-shadow .45s var(--ease-out);
}
.ir-t em { font-style: italic; font-weight: 440; }
/* a varredura de Ícor que atravessa a linha ao abrir */
.ir-varre {
  position: absolute; left: 0; top: -1px; bottom: -1px; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(240, 86, 31, .16) 45%, rgba(232, 147, 58, .1) 70%, transparent);
  opacity: 0; pointer-events: none; z-index: 0;
}
.idx-row { position: relative; overflow: hidden; }
.ir-cab, .ir-abre { position: relative; z-index: 1; }
.idx-row.is-on .ir-t, .idx-row:focus-visible .ir-t {
  color: var(--text-primary); text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.idx-row:hover .ir-t { color: rgba(11, 16, 32, .48); }
/* toque: a linha no centro da tela acende sozinha, no lugar do hover */
.idx-row.perto:not(.is-on) .ir-t {
  color: rgba(11, 16, 32, .62); text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.idx-row.perto:not(.is-on) .ir-mais { color: var(--accent-text); }
.idx-row.is-on .ir-t em { color: var(--accent); }
.ir-mais { margin-left: auto; font-family: var(--font-display); font-weight: 440; font-size: 26px; line-height: 1;
  color: var(--text-tertiary); transition: transform .4s var(--ease-out), color .4s var(--ease-out); flex: none; }
.idx-row.is-on .ir-mais { transform: rotate(45deg); color: var(--accent); }

.ir-abre { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.idx-row.is-on .ir-abre { grid-template-rows: 1fr; }
.ir-dentro { overflow: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out) .08s, transform .5s var(--ease-out) .08s;
  display: flex; gap: 26px; align-items: flex-start; }
.idx-row.is-on .ir-dentro { opacity: 1; transform: translateY(0); }
.ir-texto { display: grid; gap: 14px; padding: 0 0 26px calc(11px + clamp(16px, 2.4vw, 34px)); }
.ir-d { margin: 0; font-size: 16px; line-height: 1.62; color: var(--text-secondary); max-width: 52ch; }
.ir-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ir-tags span { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary); padding: 8px 11px;
  border: 1px solid rgba(11, 16, 32, .14); border-radius: 2px; background: rgba(255, 255, 255, .4); }
.ir-mini { display: none; }

/* o símbolo que segue o cursor — sem moldura, sem corpo: só a marca em Ícor */
#idx-simbolo {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: grid; justify-items: center; gap: 10px;
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.is-icone {
  width: 88px; height: 88px;
  background: var(--ichor-h);
  -webkit-mask: var(--mi, url(../assets/icons/compass-star.svg)) center / contain no-repeat;
  mask: var(--mi, url(../assets/icons/compass-star.svg)) center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(240, 86, 31, .35)) drop-shadow(0 10px 18px rgba(11, 16, 32, .18));
}
.is-num { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .24em;
  color: var(--accent-text); }
#idx-simbolo.viva { opacity: 1; }
@media (max-width: 1023px) { #idx-simbolo { display: none; } }

@media (max-width: 1023px) {
    .ir-dentro { flex-direction: row; }
  .ir-mini { display: block; width: 84px; flex: none; filter: drop-shadow(0 12px 18px rgba(11, 16, 32, .3)); }
  .ir-texto { padding-left: 0; }
  .ir-t { font-size: clamp(30px, 8vw, 44px); }
}

/* ============================================================
   IV · A ESCADA — quatro estelas: os topos desenham a subida
   ============================================================ */
#escada { background: rgba(244, 241, 234, .78); position: relative; z-index: 3;
  padding: clamp(80px, 11vh, 140px) var(--mx) clamp(90px, 12vh, 150px); }
.esc-wrap { max-width: 1260px; margin: 0 auto; display: grid; justify-items: center; gap: clamp(34px, 5vh, 64px); }
.esc-wrap > * { width: 100%; }
.esc-head { justify-self: start; }
.esc-head { display: grid; gap: 18px; max-width: 720px; }
.esc-head h2 { font-size: clamp(38px, 5vw, 78px); line-height: 1.02; }
.esc-head p { margin: 0; font-size: 16.5px; line-height: 1.68; max-width: 540px; color: var(--text-secondary); }

/* ---------- A trilha: VoxMap puxa, os degraus seguem ---------- */
.trilha { display: grid; grid-template-columns: minmax(252px, 1.14fr) repeat(4, minmax(0, 1fr));
  gap: 14px; align-items: stretch; }

/* o ponto de entrada: escuro, um objeto à parte — porque é um produto à parte */
.tr-mapa { position: relative; display: grid; gap: 12px; align-content: start;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 26px);
  background:
    radial-gradient(ellipse 90% 60% at 20% 0%, rgba(232, 147, 58, .1), transparent 60%),
    linear-gradient(165deg, #17161B 0%, #0C0C0E 100%);
  border: 1px solid rgba(232, 147, 58, .32); border-radius: 6px;
  box-shadow: 0 36px 60px -42px rgba(12, 12, 14, .8); }
.tr-mapa::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px;
  background: var(--ichor); border-radius: 2px; }
/* o no de origem: a linha da trilha nasce AQUI, no canto alto do VoxMap */
.tr-mapa::after { content: ""; position: absolute; right: -6px; top: 3px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 3px #17161B, 0 0 0 4px rgba(232, 147, 58, .5), 0 0 12px rgba(232, 147, 58, .45);
  opacity: 0; transform: scale(.4); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.trilha.viva .tr-mapa::after { opacity: 1; transform: scale(1); }
.tm-tag { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber); }
.tm-tag svg { width: 15px; height: 15px; }
.tm-nome { margin: 0; font-family: var(--font-display); font-weight: 520; letter-spacing: -.02em;
  font-size: clamp(28px, 2.4vw, 36px); line-height: 1; color: #F4F1EA; }
.tm-sub { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1.7; color: rgba(244, 241, 234, .42); }
.tm-d { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(244, 241, 234, .74); }
.tm-d strong { color: var(--amber); font-weight: 600; }
.tm-saidas { list-style: none; margin: 2px 0 0; padding: 12px 0 0; display: grid; gap: 8px;
  border-top: 1px solid rgba(244, 241, 234, .12); }
.tm-saidas li { display: flex; gap: 9px; align-items: baseline;
  font-size: 13px; line-height: 1.4; color: rgba(244, 241, 234, .88); }
.tm-saidas li span { color: var(--amber); font-size: 12px; flex: none; }
.tm-cta { margin-top: 6px; justify-content: center; background: var(--amber); color: #0C0C0E;
  font-family: var(--font-mono); font-weight: 600; font-size: 9.5px; letter-spacing: .1em;
  white-space: nowrap; padding-left: 12px; padding-right: 12px;
  text-transform: uppercase; box-shadow: 0 16px 30px -16px rgba(232, 147, 58, .7); }
.tm-cta:hover { background: #F0A44E; box-shadow: 0 20px 34px -16px rgba(232, 147, 58, .85); }
.tm-cta .cta-arrow { color: #0C0C0E; }
.tm-nota { font-family: var(--font-mono); font-weight: 500; font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; text-align: center; color: rgba(244, 241, 234, .4); }

/* os quatro degraus, ligados por uma linha com nós */
.tr-fila { list-style: none; margin: 0; padding: 26px 0 0; display: grid;
  grid-column: 2 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.tr-fila::before { content: ""; position: absolute; left: -34px; right: 12.5%; top: 9px; height: 1px;
  background: linear-gradient(90deg, rgba(176, 124, 66, .6), rgba(240, 86, 31, .5));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out) .1s; }
.trilha.viva .tr-fila::before { transform: none; }

.tr-carta { position: relative; display: grid; gap: 10px; align-content: start;
  padding: clamp(16px, 1.6vw, 22px) clamp(15px, 1.5vw, 20px);
  background: linear-gradient(180deg, #FBF8F1 0%, #F3EEE3 100%);
  border: 1px solid rgba(11, 16, 32, .16); border-radius: 6px;
  box-shadow: 0 24px 44px -36px rgba(11, 16, 32, .45), inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease-out); }
.tc-no { position: absolute; left: 50%; top: -17px; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4); opacity: 0;
  background: var(--lv, var(--accent));
  /* anel de papel + anel da cor: a linha "para" na estacao em vez de atravessar o ponto */
  box-shadow: 0 0 0 3px #F2EEE4, 0 0 0 4px rgba(var(--lvrgb, 240, 86, 31), .4);
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out), box-shadow .25s var(--ease-out); }
.tr-carta.assentada .tc-no { transform: translate(-50%, -50%) scale(1); opacity: 1;
  animation: pvx-no-pulso .6s var(--ease-out) 1; }
@keyframes pvx-no-pulso {
  0% { box-shadow: 0 0 0 3px #F2EEE4, 0 0 0 4px rgba(var(--lvrgb, 240, 86, 31), .4); }
  45% { box-shadow: 0 0 0 3px #F2EEE4, 0 0 0 9px rgba(var(--lvrgb, 240, 86, 31), .22); }
  100% { box-shadow: 0 0 0 3px #F2EEE4, 0 0 0 4px rgba(var(--lvrgb, 240, 86, 31), .4); } }
/* a coroa do nivel: adormecida, acende no hover — a cor que o redesign tinha perdido */
.tr-carta::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  border-radius: 6px 6px 0 0; background: var(--lv, var(--accent));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--ease-out); }
.tc-alto { display: flex; align-items: center; gap: 9px; }
.tc-n { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .18em;
  color: #F4F1EA; background: var(--lvt, var(--accent-text)); padding: 4px 7px 3px; border-radius: 2px; }
.tc-papel { margin-left: auto; font-family: var(--font-mono); font-weight: 500; font-size: 8px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); text-align: right; }
.tc-nome { margin: 0; font-family: var(--font-display); font-weight: 520; letter-spacing: -.02em;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1; color: var(--text-primary); }
.tc-nome em { font-style: italic; font-weight: 460; color: var(--accent); }
.tc-quem { margin: 0; font-family: var(--font-display); font-weight: 470;
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.34; color: var(--text-primary); min-height: 2.7em; }
.tc-itens { list-style: none; margin: 0; padding: 11px 0 0; display: grid; gap: 7px;
  border-top: 1px solid rgba(var(--lvrgb, 11, 16, 32), .24); }
.tc-itens li { display: flex; gap: 8px; align-items: baseline;
  font-size: 12.5px; line-height: 1.42; color: var(--text-primary); }
.tc-itens li span { color: var(--lv, var(--accent)); font-size: 10.5px; flex: none;
  transition: transform .22s var(--ease-out); }
.tc-sobe { margin: auto 0 0; padding-top: 12px; display: grid; gap: 4px;
  border-top: 1px solid rgba(var(--lvrgb, 11, 16, 32), .2); }
.ts-rot { font-family: var(--font-mono); font-weight: 500; font-size: 8px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--lvt, var(--text-tertiary)); }
.ts-txt { font-size: 12.5px; line-height: 1.42; color: var(--text-secondary); }

/* o fecho: uma faixa, não uma frase solta */
.esc-fecho { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 22px; border: 1px solid rgba(11, 16, 32, .16); border-radius: 6px;
  background: rgba(255, 255, 255, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.ef-selo { width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(176, 124, 66, .5); border-radius: 50%; color: var(--vmt); }
.ef-selo svg { width: 20px; height: 20px; transition: transform .5s var(--ease-out); }
.esc-fecho { transition: background .35s var(--ease-out), border-color .35s var(--ease-out); }
.ef-texto { display: grid; gap: 2px; margin-right: auto; }
.ef-texto strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.2; color: var(--text-primary); }
.ef-texto span { font-size: 13.5px; color: var(--text-secondary); }
.ef-meta { font-family: var(--font-mono); font-weight: 500; font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-tertiary); }

@media (max-width: 1023px) {
  /* sem largura para cinco colunas: o VoxMap vira banda, os degraus 2x2, a linha some */
  .trilha { grid-template-columns: minmax(0, 1fr); }
  .tr-mapa { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 26px; }
  /* sem dense: o texto fica todo na coluna 1, so as saidas atravessam para a direita */
  .tr-mapa > * { grid-column: 1; }
  .tr-mapa .tm-saidas { grid-column: 2; grid-row: 1 / span 5; border-top: 0;
    border-left: 1px solid rgba(244, 241, 234, .12); padding: 0 0 0 20px; align-content: center; }
  .tm-cta { justify-self: start; padding-left: 26px; padding-right: 26px; }
  .tm-nota { text-align: left; }
  .tr-fila { grid-column: auto; padding-top: 0; grid-template-columns: 1fr 1fr; }
  .tr-fila::before, .tc-no { display: none; }
  .tc-quem { min-height: 0; }
}
@media (max-width: 639px) {
  #escada { padding-left: 18px; padding-right: 18px; }
  .tr-fila { grid-template-columns: minmax(0, 1fr); }
  .tr-mapa { grid-template-columns: minmax(0, 1fr); }
  .tr-mapa .tm-saidas { grid-column: auto; grid-row: auto; border-left: 0; padding: 12px 0 0;
    border-top: 1px solid rgba(244, 241, 234, .12); }
  .tm-cta { justify-self: stretch; }
  .esc-fecho { align-items: start; }
  .ef-meta { width: 100%; }
}

/* ============================================================
   V · O MÉTODO — oito fases pinadas (Nero)
   ============================================================ */
#metodo {
  position: relative; z-index: 3; height: 560vh;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, .6), rgba(10, 10, 12, .82)),
    url(../assets/imagery/marble-nero.jpg) top center / auto 100vh repeat,
    #0A0A0C;
}
#met-stage { position: relative; height: 100vh; overflow: hidden; padding: clamp(96px, 12vh, 150px) var(--mx) 0; }
#met-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 70% 65%, rgba(240, 86, 31, .06), transparent 70%);
}
/* φ em relevo escuro ancorando o quadrante direito */
#met-stage::after {
  content: "φ"; position: absolute; right: 6%; top: 8%;
  font-family: var(--font-display); font-style: italic; font-size: clamp(180px, 22vw, 330px); line-height: 1;
  color: rgba(244, 241, 234, .035);
  text-shadow: 0 1px 0 rgba(244, 241, 234, .05), 0 -2px 2px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.met-head { display: grid; gap: 14px; max-width: 720px; position: relative; z-index: 3; }
/* em janelas baixas o dossiê não pode engolir o título */
@media (max-height: 780px) {
  #met-num { font-size: clamp(110px, 30vh, 240px); }
  .met-fase { bottom: 9vh; }
}
@media (max-height: 660px) {
  #met-num { font-size: clamp(90px, 26vh, 180px); }
  .met-sub { display: none; }
  .mf-oque { display: none; }
}
#metodo h2 { color: #F4F1EA; }
.met-sub { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(244, 241, 234, .65); }
/* ---------- a ficha da fase: uma peça só ---------- */
/* ---------- a esteira das fases: oito cartas, viagem lateral ---------- */
.met-esteira { position: absolute; left: var(--mx); bottom: 17vh; z-index: 2;
  display: flex; gap: 28px; align-items: stretch; will-change: transform; }
.met-carta {
  flex: 0 0 min(680px, calc(100vw - 2 * var(--mx)));
  display: grid; gap: clamp(14px, 2vh, 22px); align-content: start;
  padding: clamp(22px, 2.8vh, 34px) clamp(24px, 2.6vw, 40px) clamp(24px, 3vh, 36px);
  border: 1px solid rgba(244, 241, 234, .13); border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(244, 241, 234, .045), rgba(244, 241, 234, .012) 40%, transparent 78%),
    rgba(10, 10, 12, .58);
  box-shadow: 0 40px 80px -60px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(244, 241, 234, .07);
  position: relative;
  /* em repouso a carta e pedra apagada; a ativa acende */
  opacity: .3; transform: scale(.96); transform-origin: 50% 100%;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.met-carta.agora { opacity: 1; transform: none; }
.met-carta::before {
  content: ""; position: absolute; left: -1px; top: -1px; height: 3px; width: 92px;
  background: var(--ichor-h); border-radius: 4px 0 0 0;
  transform: scaleX(.35); transform-origin: 0 50%; opacity: .4;
  transition: transform .55s var(--ease-out), opacity .55s var(--ease-out);
}
.met-carta.agora::before { transform: none; opacity: 1; }
.met-carta .mf-marca { grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 14px;
  border-right: 0; padding: 0 0 12px; border-bottom: 1px solid rgba(244, 241, 234, .12); }
.met-carta .mf-grade { grid-template-columns: minmax(0, 1.1fr) minmax(230px, .9fr); gap: clamp(20px, 2.4vw, 40px); }
.met-carta .mf-num { font-size: clamp(40px, 4vw, 56px); }

.mf-marca { display: grid; justify-items: start; gap: 6px; align-content: start;
  padding-right: clamp(20px, 2.4vw, 40px); border-right: 1px solid rgba(244, 241, 234, .12); }
.mf-num {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(46px, 5.4vw, 78px); line-height: .82;
  color: transparent; -webkit-text-stroke: 1.2px rgba(244, 241, 234, .5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5); user-select: none;
}
.mf-de { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(244, 241, 234, .4); }
.mf-de b { color: var(--accent); font-weight: 500; }
.mf-selo { display: none; }

.mf-grade { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1.2fr) minmax(280px, .9fr);
  gap: clamp(22px, 3vw, 56px); align-items: start; }
.mf-esq { display: grid; gap: 10px; }
.mf-esq h3 { margin: 0; font-family: var(--font-display); font-weight: 520; letter-spacing: -.02em;
  font-size: clamp(34px, 4.2vw, 62px); line-height: 1; color: #F4F1EA; }
.mf-verbo { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); }
.mf-oque { margin: 6px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62;
  color: rgba(244, 241, 234, .7); max-width: 46ch; }

.mf-dir { margin: 0; display: grid; align-content: start; }
.mf-linha { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid rgba(244, 241, 234, .12); }
.mf-linha:first-child { border-top: 0; padding-top: 0; }
.mf-dir dt { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(244, 241, 234, .38); }
.mf-dir dd { margin: 0; font-family: var(--font-display); font-weight: 460; font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.34; color: rgba(244, 241, 234, .92); }
.mf-casa { color: var(--accent) !important; font-style: italic; }

/* ---------- o trilho: oito selos gravados ---------- */
.met-track { position: absolute; left: var(--mx); right: var(--mx); bottom: 8vh; height: 2px; z-index: 2; }
.mt-base { position: absolute; inset: 0; background: rgba(244, 241, 234, .12); }
#met-fill { position: absolute; inset: 0; background: var(--ichor-h); transform: scaleX(0);
  transform-origin: 0 50%; box-shadow: 0 0 14px rgba(240, 86, 31, .55); }
#met-phis { position: absolute; inset: 0; }
.met-phi {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 7px; width: 60px;
}
.mp-selo {
  font-family: var(--font-display); font-style: normal; font-size: 15px; line-height: 1;
  color: rgba(244, 241, 234, .28); background: #0A0A0C; padding: 3px 5px;
  transition: color .4s var(--ease-out), text-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.mp-n { position: absolute; top: 16px; font-family: var(--font-mono); font-weight: 500; font-size: 8.5px;
  letter-spacing: .16em; color: rgba(244, 241, 234, .22);
  transition: color .4s var(--ease-out); }
.met-phi.is-on .mp-selo { color: rgba(240, 86, 31, .8); }
.met-phi.is-on .mp-n { color: rgba(244, 241, 234, .42); }
.met-phi.agora .mp-selo { color: var(--accent); transform: scale(1.35);
  text-shadow: 0 0 12px rgba(240, 86, 31, .8); }
.met-phi.agora .mp-n { color: var(--accent); }

/* ============================================================
   VI · PRINCÍPIOS
   ============================================================ */
#principios { background: rgba(244, 241, 234, .78); position: relative; z-index: 3; padding: clamp(90px, 12vh, 150px) var(--mx); }
#principios .wrap { display: grid; gap: 18px; }
.prin-list { margin-top: clamp(30px, 5vh, 54px); display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prin {
  position: relative;
  display: grid; grid-template-rows: auto auto 1fr; gap: 14px; align-content: start;
  padding: clamp(26px, 3.2vh, 38px) clamp(18px, 1.8vw, 28px) clamp(28px, 3.4vh, 42px);
  border-top: 1px solid rgba(11, 16, 32, .18);
  border-bottom: 1px solid rgba(11, 16, 32, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); /* sulco inciso */
  transition: background .45s var(--ease-out);
}
.prin + .prin { border-left: 1px solid rgba(11, 16, 32, .16); }
/* o veio corre na junta quando o cursor entra */
.prin::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: var(--ichor-h);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease-out);
}
.prin:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%); }
.prin:hover::before { transform: scaleX(1); }

.prin-num {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 6vw, 96px); line-height: .78;
  letter-spacing: -.02em; text-transform: none;
  color: transparent; -webkit-text-stroke: 1.2px rgba(11, 16, 32, .3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  user-select: none;
  transition: -webkit-text-stroke-color .45s var(--ease-out), color .45s var(--ease-out);
}
.prin:hover .prin-num { -webkit-text-stroke-color: rgba(240, 86, 31, .75); }
.prin h3 { margin: 0; font-family: var(--font-display); font-weight: 520; font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.06; letter-spacing: -.015em; color: var(--text-primary); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.prin p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--text-secondary); max-width: 48ch; }

/* o fecho da inscrição */
.prin-fecho { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 4vh, 44px);
  font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-tertiary); }
.prin-fecho span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(11, 16, 32, .18), transparent); }
.prin-fecho i { font-style: italic; font-family: var(--font-display); font-size: 15px; color: var(--accent); letter-spacing: 0; }

@media (max-width: 700px) {
  .prin { grid-template-columns: 1fr; gap: 10px; padding: 26px 0 30px; }
  .prin-num { font-size: 56px; }
  .prin p { font-size: 15px; }
}

/* ============================================================
   VII/* ============================================================
   VII · DIAGNÓSTICO (Egeu) + VIII · CONTATO
   ============================================================ */
#diagnostico { position: relative; z-index: 3; padding: clamp(80px, 12vh, 150px) var(--mx) 60px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(240, 86, 31, .09), transparent 62%),
    linear-gradient(180deg, rgba(9, 9, 11, .58), rgba(9, 9, 11, .8)),
    url(../assets/imagery/marble-nero.jpg) center / cover no-repeat,
    #09090B; }
#diagnostico .sec-head { margin-bottom: 36px; }
#diagnostico h2, #contato h2 { color: #F4F1EA; }
#diagnostico .sec-head p { color: rgba(244, 241, 234, .72); max-width: 640px; font-size: 15.5px; }
#contato { position: relative; z-index: 3; padding: clamp(80px, 12vh, 150px) var(--mx) clamp(70px, 10vh, 120px);
  background:
    linear-gradient(180deg, rgba(9, 9, 11, .74), rgba(9, 9, 11, .88)),
    url(../assets/imagery/marble-nero.jpg) center / cover no-repeat,
    #09090B; }
.ct-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px); align-items: start;
}
.ct-lado { display: grid; gap: 20px; align-content: start; }
#contato h2 { color: #F4F1EA; font-size: clamp(32px, 4vw, 58px); line-height: 1.04; }
.ct-intro { margin: 0; font-size: 16.5px; line-height: 1.7; color: rgba(244, 241, 234, .7); max-width: 420px; }

/* os canais: linhas gravadas */
.ct-canais { display: grid; margin-top: 12px; border-top: 1px solid rgba(244, 241, 234, .14); }
.ct-canal {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px;
  padding: 18px 2px; border-bottom: 1px solid rgba(244, 241, 234, .14);
  color: #F4F1EA; transition: padding-left .4s var(--ease-out);
}
.ct-canal::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--ichor-h);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.ct-canal:hover { color: #F4F1EA; }
.ct-canal:hover::before { transform: scaleX(1); }
.cc-rot { grid-column: 1; font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 234, .45); }
.cc-val { grid-column: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.2; }
.cc-seta { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); font-size: 17px; transition: transform .35s var(--ease-out); }


.ct-depois { margin-top: 16px; display: grid; gap: 14px; }
.cd-titulo { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 241, 234, .45); }
.cd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cd-lista li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(244, 241, 234, .74); align-items: baseline; }
.cd-n { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; color: var(--accent); padding-top: 3px; }
.cd-lista strong { color: #F4F1EA; font-weight: 500; white-space: nowrap; }

/* o formulário: curto, num painel de vidro */
/* a carta: papel sobre a pedra — mesma matéria da folha do VoxScan */
.ct-form {
  display: grid; gap: 22px;
  background: linear-gradient(180deg, #FBF9F4, #F3EFE6);
  border: 1px solid rgba(11, 16, 32, .1); border-radius: 3px;
  padding: clamp(28px, 3.2vw, 42px);
  box-shadow: 0 60px 110px -50px rgba(0, 0, 0, .8), 0 2px 0 rgba(255, 255, 255, .55) inset;
  position: relative; overflow: hidden;
}
.ct-form::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(101deg, rgba(11, 16, 32, .015) 0 1px, transparent 1px 46px);
}
.ct-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid rgba(11, 16, 32, .16); }
@media (max-width: 560px) { .ctc-doc { width: 100%; text-align: left; font-size: 8px; } }
.ctc-marca { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 520; font-size: 16px; color: var(--text-primary); }
.ctc-marca img { width: 16px; }
.ctc-doc { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-tertiary); text-align: right; }

.ct-legenda { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip {
  font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary); background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(11, 16, 32, .16); border-radius: 2px; padding: 10px 13px; cursor: pointer;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.ct-chip:hover { color: var(--text-primary); border-color: rgba(11, 16, 32, .38); }
.ct-chip.is-on { color: #F4F1EA; background: var(--bg-inverse); border-color: var(--bg-inverse); }

.ct-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ct-campo { position: relative; display: grid; gap: 7px; }
.ct-label { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-tertiary); transition: color .3s var(--ease-out); }
.ct-label em { font-style: normal; color: rgba(11, 16, 32, .3); }
.ct-campo:focus-within .ct-label { color: var(--accent-text); }
/* hairline de tinta, como no VoxScan — nada de caixinha */
.ct-campo input, .ct-campo textarea {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-primary);
  background: transparent; border: 0; border-bottom: 1px solid rgba(11, 16, 32, .22);
  padding: 9px 2px; outline: none; width: 100%; resize: vertical;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ct-campo textarea { min-height: 96px; resize: none; }
.ct-campo input::placeholder, .ct-campo textarea::placeholder { color: rgba(11, 16, 32, .3); }
.ct-campo input:focus, .ct-campo textarea:focus {
  border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent);
}
.ct-campo.erro input, .ct-campo.erro textarea { border-bottom-color: var(--porphyry); box-shadow: 0 1px 0 var(--porphyry); }
.ct-conta { position: absolute; right: 2px; top: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--text-tertiary); }

.form-err { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--porphyry);
  display: flex; align-items: baseline; gap: 10px; }
.form-err::before {
  content: "!"; font-family: var(--font-mono); font-weight: 500; font-size: 10px; line-height: 1;
  color: #F4F1EA; background: var(--porphyry); width: 17px; height: 17px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none; transform: translateY(2px);
}
.form-err[hidden] { display: none; }

.ct-envio { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid rgba(11, 16, 32, .14); }
.ct-promessa { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-tertiary); }
.ct-ok {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--text-secondary); border: 1px solid rgba(240, 86, 31, .35);
  border-radius: var(--radius-sm); padding: 14px 18px; background: rgba(240, 86, 31, .07);
}
.ct-ok strong { color: var(--text-primary); font-weight: 600; }
.ok-marca { color: var(--accent); }
/* `display` explicito: o .ct-ok e flex, e sem isto o [hidden] do filho
   perderia para o display que o contexto flex atribui a ele. */
.ok-via[hidden] { display: none; }
.ct-ok[hidden] { display: none; }
@media (max-width: 960px) {
  .ct-grid { grid-template-columns: 1fr; gap: 36px; }
  .ct-linha { grid-template-columns: 1fr; }
}

/* ---------- Rodapé ---------- */
#site-foot { position: relative; z-index: 3; padding: 80px var(--mx) 40px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, .8), rgba(9, 9, 11, .93)),
    url(../assets/imagery/marble-nero.jpg) center / cover no-repeat,
    var(--nero); }
#site-foot .wrap { max-width: 1300px; display: grid; gap: 44px; }
.foot-mark { position: relative; }
.foot-word-img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.foot-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; border-top: 1px solid rgba(244, 241, 234, .14); padding-top: 26px; }
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-nav a { font-size: 10px; color: rgba(244, 241, 234, .75); }
.foot-line { font-size: 9px; color: rgba(244, 241, 234, .45); }

/* ---------- Painel lateral ---------- */
/* ---------- Keyframes ---------- */
@keyframes pvx-orbit { to { transform: rotate(360deg); } }
@keyframes pvx-orbit-rev { to { transform: rotate(-360deg); } }
@keyframes pvx-scanline { 0% { top: 6%; opacity: 0; } 10% { opacity: .9; } 50% { top: 92%; opacity: .9; } 60% { opacity: 0; } 100% { top: 6%; opacity: 0; } }
@keyframes pvx-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .45; } 50% { transform: translate(-50%, -50%) scale(1.18); opacity: .12; } }
@keyframes pvx-cue { 0% { transform: translateY(-105%); } 55%, 100% { transform: translateY(105%); } }
@keyframes pvx-linepulse { 0%, 100% { opacity: .14; } 50% { opacity: .5; } }
@keyframes pvx-twinkle { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1023px) {
  #site-head { padding: 16px 20px; }
  .head-nav, .head-cta { display: none; }
  #menu-btn { display: inline-block; }
  /* sem zoom no mobile: o hero antigo aparece direto, sem a moldura do note */
  #hero { height: auto; }
  #hero-pin { display: block; height: 100vh; }
  #tese { margin-top: 0; border-radius: 0; }
  /* o CTA ocupa a largura toda: a pista de rolagem desce e encurta, para o fio
     nao cruzar o botao fantasma */
  .hero-under { right: auto; left: 0; right: 0; bottom: 10px; gap: 7px; }
  #scroll-cue { height: 18px; }
  .hu-label { font-size: 9px; }
  .sol-grid { grid-template-columns: 1fr; }
  .sol-nav { display: none; }
  .sol-panel { min-height: 0; padding-top: 40px; }
  .met-esteira { left: 24px; }
  .met-track { left: 24px; right: 24px; }
  #met-stage { padding: 96px 24px 0; }
  #metodo { height: 460vh; }
  /* sem pin: o trilho de escada vira swipe nativo */
  .niveis-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .niveis-viewport::-webkit-scrollbar { display: none; }
  .niveis-rail .nivel-card { scroll-snap-align: start; }
  .rail-bar { display: none; }
  #solucoes, #principios, #diagnostico, #contato, #site-foot { padding-left: 24px; padding-right: 24px; }
  .solucoes-wrap { padding: 0 24px; }
  .tese-wrap { padding-left: 24px; padding-right: 24px; }
  .tese-apoio { grid-template-columns: minmax(0, 1fr); margin-right: 0; justify-self: start; }
}
@media (max-width: 639px) {
  #old-hero {
    width: 390px; margin: 0 auto; min-height: 0;
    /* estatua 15% maior e mais baixa: fechava um vazio de ~190px no terco inferior.
       Tudo deriva de --bustK para a mascara do knockout ficar em registro por construcao. */
    --bustK: 1.15;
    --bustW: calc(302px * var(--bustK)); --bustH: calc(396px * var(--bustK)); --bustTop: 128px;
    --maskH: calc(393px * var(--bustK)); --maskTop: 130px;
    --heroFs: 47px; --l1Top: 168px; --l2Top: 360px;
  }
  #plx-l1, #plx-l1bs, #plx-l2a > span, #plx-l2bs { letter-spacing: -.01em; }
  #plx-c1 { width: 366px; height: 366px; }
  #plx-c2, .orb-dash, .oh-scanline, .oh-axis-h, #plx-ann { display: none; }
  #plx-blur { height: 26vh; }
  #hero-cta { left: 20px; right: 20px; margin: 0; width: auto; max-width: none;
    bottom: 56px; gap: 14px; justify-items: stretch; }
  #oh-topfade { height: 96px; }
  /* o subtitulo quebra em duas linhas em vez de vazar pela borda */
  #hero-cta p {
    /* sem puxao negativo: quem posiciona a estatua acima do texto agora e o ohZoom(),
       e a margem negativa escondia 96px da conta dele */
    margin: 0 auto; font-size: 15px; line-height: 1.38; text-align: center;
    white-space: normal; max-width: 30ch; text-wrap: balance;
  }
  /* minmax(0,1fr): sem isso a coluna assume o min-content do botao (372px) e vaza */
  .hero-cta-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .btn {
    display: flex; justify-content: center; text-align: center;
    font-size: 11px; letter-spacing: .1em; padding: 17px 14px; gap: 8px;
  }
  .mf-topo { gap: 14px; }
  .mf-de { font-size: 8.5px; }
  /* rodape: o contentor recorta pseudo-elemento, entao a area vem de padding real */
  .foot-nav { gap: 0 26px; margin: -12px 0; }
  .foot-nav a { padding: 12px 0; }
  .met-esteira { bottom: 14vh; gap: 16px; }
  .met-carta { padding: 18px 18px 20px; flex-basis: calc(100vw - 48px); }
  /* .met-carta .mf-grade vence a regra base por especificidade: repete o seletor aqui */
  .mf-grade, .met-carta .mf-grade { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .met-carta .mf-num { font-size: 40px; }
  .mf-marca { grid-auto-flow: column; align-items: baseline; gap: 14px; justify-content: start;
    padding-right: 0; border-right: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(244, 241, 234, .12); }
  /* o dossie existe no desktop e sumia no celular: volta em faixa compacta */
  .mf-dir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mf-linha { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 0; }
  .mf-dir dt { font-size: 8px; letter-spacing: .16em; }
  .mf-dir dd { font-size: 15px; line-height: 1.26; }
  .mf-num { font-size: 44px; }
  .mf-oque { font-size: 14.5px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #cur-dot, #cur-ring, #preloader, #grain { display: none !important; }
  html.fine-pointer body, html.fine-pointer a, html.fine-pointer button { cursor: auto; }
  .tese-line .tw { opacity: 1; }
}


/* ============================================================
   O PORTO — convite na home + a página dedicada do VoxScan
   ============================================================ */
.diag-cta { display: grid; gap: 20px; justify-items: start; max-width: 820px; }
.diag-cta h2 { color: #F4F1EA; }
.diag-cta p { margin: 0; font-size: 16.5px; line-height: 1.68; color: rgba(244, 241, 234, .74); max-width: 620px; }
.diag-acao { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.diag-nota { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 234, .45); }

.pg-scan {
  background: transparent;
  min-height: 100vh;
}
.pg-scan::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -6%, rgba(240, 86, 31, .10), transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(6, 6, 8, .6), transparent 60%),
    radial-gradient(ellipse 62% 52% at 42% 52%, rgba(8, 8, 10, .62), transparent 70%),
    linear-gradient(180deg, rgba(8, 8, 10, .34) 0%, rgba(8, 8, 10, .56) 100%);
}
.scan-atmo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sa-glow { position: absolute; left: 50%; top: 46%; width: 1100px; height: 1100px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240, 86, 31, .09), rgba(196, 32, 44, .04) 38%, transparent 66%); }
.sa-phi { position: absolute; right: 4%; bottom: -4%; font-family: var(--font-display); font-style: italic;
  font-size: clamp(220px, 30vw, 520px); line-height: 1; color: rgba(244, 241, 234, .025); }
.pg-scan #site-head::before {
  background: linear-gradient(to bottom, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .52) 70%, rgba(8, 8, 10, 0) 100%);
  opacity: 1;
}
.pg-scan .head-logo .logo-light { display: none; }
.pg-scan .head-logo .logo-dark { display: block; }
.pg-scan .head-cta { color: #F4F1EA; border-color: rgba(244, 241, 234, .3); }
.scan-selo { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 241, 234, .45); }

/* ---------- o fluxo: leve, uma pergunta por tela ---------- */
.scan-main { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-rows: 1fr auto;
  padding: clamp(110px, 15vh, 170px) var(--mx) clamp(30px, 5vh, 60px); }
.scan-palco { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(36px, 6vw, 88px);
  align-items: center; width: 100%; max-width: 1180px; margin: 0 auto; }
.pg-scan.sem-leitor .scan-palco, .pg-scan.tem-folha .scan-palco { grid-template-columns: minmax(0, 1fr); }
.pg-scan.tem-folha .scan-palco { max-width: none; }
.scan-corpo { display: grid; align-content: center; justify-items: start; width: 100%; }

/* o leitor: a leitura se formando enquanto ele responde */
.scan-leitor { display: grid; gap: 20px; justify-items: start; align-content: center; }
.sl-rot { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(244, 241, 234, .34); }
.sl-radar { width: 100%; max-width: 300px; overflow: visible; }
.sl-radar text { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; fill: rgba(244, 241, 234, .3);
  transition: fill .5s var(--ease-out); }
.sl-radar text.sl-rot-on { fill: var(--accent); }
.sl-dot { transition: r .5s var(--ease-out), filter .5s var(--ease-out); }
.sl-dot { transition: opacity .4s var(--ease-out); }
.sl-registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; width: 100%; }
.sl-registro li { border-bottom: 1px solid rgba(244, 241, 234, .09); }
.sl-registro button { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%;
  padding: 0 0 9px; background: none; border: 0; cursor: pointer; text-align: right;
  transition: opacity .25s var(--ease-out); }
.sl-registro button:hover { opacity: .62; }
.sl-registro span { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244, 241, 234, .36); flex: none; }
.sl-registro strong { font-family: var(--font-display); font-weight: 500; font-size: 14.5px;
  color: rgba(244, 241, 234, .88); text-align: right; }

.sc-tecla { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .1em;
  color: rgba(244, 241, 234, .26); width: 18px; flex: none; transition: color .25s var(--ease-out); }
.sc-op:hover .sc-tecla, .sc-op.marcada .sc-tecla { color: var(--accent); }
.scan-dica { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244, 241, 234, .26); }
@media (pointer: coarse) { .scan-dica { display: none; } }
@media (max-width: 1023px) { .scan-dica { display: none; } }
.sc-passo { display: grid; gap: 18px; justify-items: start; max-width: 760px; }
.sc-num { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .22em; color: var(--accent); }
.sc-pergunta { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -.018em; color: #F4F1EA; text-wrap: pretty; }
.sc-ajuda, .sc-nota { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 234, .42); }
.sc-sub { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(244, 241, 234, .68); max-width: 520px; }
.sc-opcoes { display: grid; gap: 2px; width: min(640px, 100%); margin-top: 8px; }
.sc-op {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 17px 18px; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: 16.5px; color: rgba(244, 241, 234, .82);
  background: transparent; border: 0; border-bottom: 1px solid rgba(244, 241, 234, .13);
  transition: color .25s var(--ease-out), background .25s var(--ease-out), padding-left .25s var(--ease-out);
}
.sc-op svg { width: 17px; height: 17px; flex: none; margin-left: auto; color: var(--accent); opacity: 0; transition: opacity .25s var(--ease-out); }
.sc-op:hover { color: #F4F1EA; background: rgba(244, 241, 234, .04); }
.sc-op.marcada { color: #F4F1EA; background: rgba(240, 86, 31, .08); }
.sc-op.marcada svg { opacity: 1; }
/* ---------- escala: o número que responde ao arrasto ---------- */
.sc-escala { display: grid; gap: 16px; width: min(560px, 100%); margin-top: 10px; }
.se-numero { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-weight: 500; color: #F4F1EA; }
#se-val { font-size: clamp(54px, 7vw, 88px); line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.se-numero em { font-style: normal; font-family: var(--font-mono); font-weight: 500; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 234, .42); }
/* O alvo de toque e o proprio input: com height 2px nao se pega o punho com o dedo.
   O input passa a 44px (transparente) e o trilho visivel de 2px vai para o ::track. */
#se-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
  padding: 0; margin: -21px 0; background: transparent; outline: none; cursor: grab;
  touch-action: pan-y; }
#se-range:active { cursor: grabbing; }
#se-range::-webkit-slider-runnable-track { height: 2px; border-radius: 1px;
  background: linear-gradient(to right, rgba(240, 86, 31, .5), rgba(244, 241, 234, .16)); }
#se-range::-moz-range-track { height: 2px; border-radius: 1px;
  background: linear-gradient(to right, rgba(240, 86, 31, .5), rgba(244, 241, 234, .16)); }
#se-range::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box;
  width: 24px; height: 24px; border-radius: 50%; margin-top: -11px;
  background: linear-gradient(180deg, #F0561F, #C4202C); border: 4px solid #0B0B0D;
  box-shadow: 0 0 0 1px rgba(240, 86, 31, .45), 0 8px 22px -8px rgba(240, 86, 31, .9);
  transition: transform .2s var(--ease-out); }

#se-range::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%;
  border: 4px solid #0B0B0D; background: #F0561F; box-shadow: 0 8px 22px -8px rgba(240, 86, 31, .9); }
.se-limites { display: flex; justify-content: space-between; font-family: var(--font-mono); font-weight: 500;
  font-size: 9px; letter-spacing: .14em; color: rgba(244, 241, 234, .26); margin-top: -8px; }
.se-nota { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244, 241, 234, .5); }

/* ---------- chaves: o que já existe ---------- */
.sc-toggles { display: grid; gap: 2px; width: min(640px, 100%); margin-top: 8px; }
.sc-tg { display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: 16.5px; color: rgba(244, 241, 234, .72);
  background: transparent; border: 0; border-bottom: 1px solid rgba(244, 241, 234, .13);
  transition: color .25s var(--ease-out), background .25s var(--ease-out); }
.sc-tg:hover { color: #F4F1EA; background: rgba(244, 241, 234, .04); }
.sc-tg.on { color: #F4F1EA; background: rgba(240, 86, 31, .07); }
.tg-rot { flex: 1; }
.tg-chave { position: relative; flex: none; width: 40px; height: 21px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, .22); transition: background .3s var(--ease-out), border-color .3s var(--ease-out); }
.tg-chave i { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%;
  background: rgba(244, 241, 234, .45); transition: transform .32s var(--ease-out), background .3s var(--ease-out); }
.sc-tg.on .tg-chave { background: rgba(240, 86, 31, .2); border-color: rgba(240, 86, 31, .55); }
.sc-tg.on .tg-chave i { transform: translateX(19px); background: var(--accent); }
.tg-estado { flex: none; width: 78px; text-align: right; font-family: var(--font-mono); font-weight: 500;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .3); }
.sc-tg.on .tg-estado { color: var(--accent); }

/* ---------- texto livre com atalhos ---------- */
.sc-texto { display: grid; gap: 18px; width: min(660px, 100%); margin-top: 8px; }
#sc-foco { width: 100%; font-family: var(--font-display); font-weight: 460; font-size: clamp(20px, 2.2vw, 30px);
  color: #F4F1EA; background: transparent; border: 0; border-bottom: 1px solid rgba(244, 241, 234, .28);
  padding: 8px 2px; outline: none; }
#sc-foco::placeholder { color: rgba(244, 241, 234, .22); }
#sc-foco:focus { border-bottom-color: var(--accent); }
.sc-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-sug { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(244, 241, 234, .5); padding: 9px 12px; cursor: pointer;
  background: transparent; border: 1px solid rgba(244, 241, 234, .16); border-radius: 3px;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out); }
.sc-sug:hover { color: #F4F1EA; border-color: rgba(244, 241, 234, .38); }
.sc-sug.marcada { color: var(--accent); border-color: rgba(240, 86, 31, .55); background: rgba(240, 86, 31, .08); }

.sc-seguir { margin-top: 14px; transition: opacity .3s var(--ease-out), transform .32s var(--ease-out); }
.sc-seguir.off { opacity: .34; }
.sc-campo { width: min(460px, 100%); }
.sc-campo input {
  width: 100%; font-family: var(--font-display); font-weight: 460; font-size: clamp(22px, 2.4vw, 32px);
  color: #F4F1EA; background: transparent; border: 0; border-bottom: 1px solid rgba(244, 241, 234, .28);
  padding: 8px 2px; outline: none;
}
.sc-campo input::placeholder { color: rgba(244, 241, 234, .24); }
.sc-campo:focus-within input { border-bottom-color: var(--accent); }
.sc-erro { font-size: 13.5px; color: var(--accent); }
.sc-linha { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.sc-forja { display: grid; gap: 24px; justify-items: center; width: 100%; padding: 40px 0; }
.sc-forja svg { width: 120px; overflow: visible; }
#forja-txt { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 241, 234, .6); }

.scan-pe { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 1180px; width: 100%; margin: 0 auto; padding-top: 24px; }
#scan-voltar { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244, 241, 234, .45); background: none; border: 0; cursor: pointer; }
#scan-voltar[hidden] { display: none; }
.scan-progresso { display: flex; align-items: center; gap: 9px; margin-left: auto; transition: opacity .4s var(--ease-out); }
.pg-ponto { width: 22px; height: 2px; background: rgba(244, 241, 234, .18); }
.pg-ponto.feito { background: var(--accent); }
.pg-ponto.agora { background: rgba(240, 86, 31, .55); }
.pg-txt { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .18em; color: rgba(244, 241, 234, .4); margin-left: 6px; white-space: nowrap; }
#scan-voltar { white-space: nowrap; }
@media (max-width: 560px) {
  .scan-pe { gap: 10px; }
  .pg-ponto { width: 12px; }
  .scan-progresso { gap: 6px; }
}

/* ---------- a folha A4 ---------- */
.folha {
  width: min(880px, 100%); margin: 0 auto; justify-self: center;
  background: linear-gradient(180deg, #FBF9F4, #F3EFE6);
  color: var(--text-primary);
  border-radius: 3px;
  padding: clamp(30px, 4vw, 52px) clamp(28px, 4vw, 58px) clamp(22px, 3vw, 34px);
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8), 0 2px 0 rgba(255, 255, 255, .5) inset;
  display: grid; gap: clamp(18px, 2.4vw, 28px);
  position: relative; overflow: hidden;
}
.folha::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(101deg, rgba(11, 16, 32, .015) 0 1px, transparent 1px 46px);
}
.fl-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(11, 16, 32, .16); }
.fl-marca { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 520; font-size: 17px; }
.fl-marca img { width: 17px; }
.fl-doc, .fl-rot, .fl-eyebrow, .fl-dominio { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-tertiary); }
.fl-cabeca { display: grid; gap: 6px; }
.fl-titulo { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.fl-titulo em { color: var(--accent); font-weight: 440; }
.fl-dominio { color: var(--accent-text); }
.fl-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.fl-radar svg { width: 100%; max-width: 300px; display: block; margin: 0 auto; overflow: visible; }
.fl-radar text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; fill: var(--text-tertiary); }
.fl-leitura { display: grid; gap: 10px; }
.fl-score { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 500; line-height: 1; }
#fl-num { font-size: clamp(52px, 7vw, 82px); }
.fl-pct { font-size: 26px; color: var(--accent); }
.fl-frase { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 380px; }
.fl-caminho { display: grid; gap: 3px; margin-top: 4px; }
.fl-caminho strong { font-family: var(--font-display); font-weight: 520; font-size: 24px; color: var(--nvcor, var(--accent)); }
.fl-escada { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fe-passo { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 9px; border: 1px solid rgba(11, 16, 32, .16); border-radius: 2px; color: var(--text-tertiary); }
.fe-passo.antes { color: var(--text-secondary); background: rgba(11, 16, 32, .04); }
.fe-passo.aqui { color: var(--nvt, #F4F1EA); background: var(--nv, var(--bg-inverse));
  border-color: var(--nv, var(--bg-inverse)); box-shadow: 0 6px 16px -8px var(--nv, transparent); }
.fl-barras { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid rgba(11, 16, 32, .14); }
.fl-barra { display: grid; grid-template-columns: 92px 1fr 28px; align-items: center; gap: 12px; }
.fb-rot { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.fb-trilho { height: 5px; background: rgba(11, 16, 32, .08); border-radius: 3px; overflow: hidden; }
.fb-fill { display: block; height: 100%; background: var(--ichor-h); border-radius: 3px; }
.fb-val { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-align: right; }
.fl-acoes { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(11, 16, 32, .14); }
.fl-acoes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fl-acoes li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.fa-n { font-family: var(--font-display); font-weight: 520; font-size: 15px; color: var(--accent); }

/* a cauda: a página 2 do documento e o calhaço atrás dela */
.folha-2 { margin-top: 18px; --vm: #B07C42; --vmt: #8A5E2C; }
.folha-2 .fl-doc { color: var(--vmt); }
.folha-2 .fl-rot { color: var(--vmt); }
.fl-mais { display: grid; gap: 12px; }
.fm-tese { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.24; letter-spacing: -.015em; color: var(--text-primary); max-width: 660px; text-wrap: pretty; }
.fm-tese em { color: #8A5E2C; font-weight: 440; }
.fm-regua { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 4px;
  background: rgba(11, 16, 32, .1); border: 1px solid rgba(11, 16, 32, .1); border-radius: 3px; overflow: hidden; }
.fm-regua span { display: grid; gap: 3px; padding: 12px 13px; background: rgba(252, 250, 246, .92);
  font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.fm-regua strong { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vmt, var(--accent-text)); }
.fm-regua { border-color: rgba(176, 124, 66, .3); background: rgba(176, 124, 66, .3); }

/* as páginas empilhadas: só o topo de cada uma aparece */
.pilha-doc { width: min(880px, 100%); margin: -10px auto 0; justify-self: center; display: grid; position: relative; z-index: -1; }
.pd-pag { position: relative; overflow: hidden; justify-self: center;
  height: calc(72px - var(--i) * 2.4px);
  width: calc(100% - var(--i) * 7px); opacity: calc(1 - var(--i) * .035);
  filter: brightness(calc(1 - var(--i) * .014));
  padding: 15px 26px 0; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-content: start;
  background: linear-gradient(180deg, #F8F5EE 0%, #F1EDE3 100%);
  border-top: 1px solid rgba(11, 16, 32, .1); border-radius: 3px 3px 0 0;
  box-shadow: 0 -14px 20px -14px rgba(0, 0, 0, .55); }
.pd-n { font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .12em;
  color: #B07C42; padding-top: 5px; }
.pd-t { margin: 0; font-family: var(--font-display); font-weight: 520; font-size: 16.5px;
  line-height: 1.2; color: var(--text-primary); }
.pd-l { grid-column: 2; margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  filter: blur(3.2px); opacity: .5; user-select: none; }

.doc-fim { width: min(880px, 100%); justify-self: center; margin: 26px auto 0; text-align: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 241, 234, .5); }
.doc-fim a { color: #F4F1EA; border-bottom: 1px solid rgba(240, 86, 31, .5); padding-bottom: 2px; margin-left: 10px; }
.doc-fim a:hover { border-bottom-color: var(--accent); }

.fl-cta { display: grid; gap: 12px; padding: 22px; margin-top: 2px;
  background: rgba(11, 16, 32, .04); border: 1px solid rgba(11, 16, 32, .12); border-radius: var(--radius-sm); position: relative; z-index: 1; }
.fc-tese { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.2; letter-spacing: -.016em; color: var(--text-primary); }
.fc-tese em { color: var(--accent); font-weight: 440; }
.fc-txt { margin: 0; font-size: 15px; line-height: 1.62; color: var(--text-secondary); max-width: 640px; }
.fc-txt strong { color: var(--text-primary); font-weight: 600; }
.fc-acao { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fc-nota { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.fl-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px; border-top: 1px solid rgba(11, 16, 32, .16);
  font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-tertiary); }

@media (max-width: 820px) {
  .fl-cols { grid-template-columns: 1fr; }
  .fl-barra { grid-template-columns: 78px 1fr 24px; }
  .folha { padding: 26px 22px 20px; }
}


/* janela larga e BAIXA (notebook 1990x720): sem isto o palco abre um vao morto no meio */
@media (min-width: 1024px) and (max-height: 820px) {
  #met-stage { padding-top: clamp(74px, 9vh, 96px); }
  .met-head { max-width: 640px; }
  .met-head h2 { font-size: clamp(28px, 3vw, 40px); }
  .met-sub { font-size: 14px; }
  .met-esteira { bottom: 12vh; }
  .met-carta { padding: 18px 26px 22px; gap: 12px; }
  .mf-num { font-size: clamp(38px, 3.6vw, 52px); }
  .mf-grade { gap: clamp(22px, 3vw, 52px); }
  .mf-esq h3 { font-size: clamp(28px, 3vw, 40px); }
  .mf-verbo { font-size: 9.5px; }
  .mf-oque { font-size: 14.5px; margin-top: 4px; max-width: 52ch; }
  .mf-linha { padding: 9px 0; }
  .mf-dir dd { font-size: 15px; }
  .met-track { bottom: 6vh; }
}

/* tablet em retrato: o palco do método não pode esticar 100vh — vira vazio morto */
@media (max-width: 1023px) and (min-height: 900px) {
  #met-stage { padding-top: 17vh; }
  .met-esteira { bottom: 22vh; }
  .met-track { bottom: 18vh; }
}

/* ---------- VoxScan v31: o cabeçalho não pisa na folha ---------- */
.pg-scan #site-head { transition: transform .5s var(--ease-out), opacity .35s var(--ease-out); }
/* com a folha aberta o cabeçalho vira barra sólida — véu translúcido sobre papel embaça o documento */
.pg-scan.tem-folha #site-head::before {
  inset: 0; background: #0B0B0D; opacity: 1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  -webkit-mask-image: none; mask-image: none;
  border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.pg-scan.head-off #site-head { transform: translateY(-104%); opacity: 0; pointer-events: none; }

.fc-pdf {
  font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-secondary); background: none; border: 0; padding: 4px 0; cursor: pointer;
  border-bottom: 1px solid rgba(11, 16, 32, .28); transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.fc-pdf:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

@media (max-width: 1023px) {
  .scan-leitor { display: none; }
  .scan-palco { grid-template-columns: minmax(0, 1fr); }
  .pg-scan .head-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; font-size: 9px; letter-spacing: .12em; }
  .scan-selo { display: none; }
}
@media (max-width: 560px) {
  .fl-topo { flex-wrap: wrap; gap: 8px; }
  .fl-doc { width: 100%; font-size: 8px; letter-spacing: .14em; }
  .fl-rodape { flex-wrap: wrap; gap: 6px; }
  .fl-rodape span { width: 100%; }
  .fc-acao { gap: 14px; }
  .fm-regua { grid-template-columns: 1fr 1fr; }
  .tg-estado { display: none; }
  .sc-tg { padding: 14px 12px; font-size: 15.5px; gap: 10px; }
  #se-val { font-size: 54px; }
  .fm-tese { font-size: 19px; }
  .pd-pag { height: 84px; padding: 13px 18px 0; grid-template-columns: 34px 1fr;
    width: calc(100% - var(--i) * 3px); }
  .pd-t { font-size: 15px; }
  .pd-l { font-size: 12px; }
  .doc-fim { font-size: 9px; line-height: 1.8; }
  .doc-fim a { display: inline-block; margin: 6px 0 0; }
  .fl-cta .btn { width: 100%; justify-content: center; text-align: center;
    padding: 16px 12px; font-size: 10.5px; letter-spacing: .05em; }
}

/* ---------- a folha impressa: o documento sem o site em volta ---------- */
@media print {
  @page { size: A4 portrait; margin: 11mm; }
  html, body.pg-scan { background: #fff !important; min-height: 0 !important; height: auto !important; }
  .scan-atmo, #site-head, .scan-pe, #grain, #cur-ring, #cur-dot { display: none !important; }
  .scan-main { padding: 0 !important; min-height: 0 !important; display: block !important; }
  .scan-corpo { max-width: none; display: block; }
  .folha { zoom: .74; width: 880px; max-width: none; margin: 0 auto; padding: 0;
    background: #fff; box-shadow: none; border-radius: 0; break-inside: avoid; }
  .folha::before { display: none; }
  .fl-cta { background: rgba(11, 16, 32, .04); break-inside: avoid; }
  /* cada folha do documento é uma página de papel */
  .folha-2 { break-before: page; margin-top: 0; }
  .pilha-doc { break-before: page; margin: 0 auto; width: 880px; zoom: .74; }
  .doc-fim { zoom: .74; }
  .pd-pag { height: auto; opacity: 1 !important; width: 100% !important; padding: 14px 0 16px;
    border-top: 1px solid rgba(11, 16, 32, .12); box-shadow: none; background: none; break-inside: avoid; }
  .pd-l { filter: blur(3.2px); }
  .doc-fim { color: var(--text-tertiary); margin-top: 18px; }
  .doc-fim a { color: var(--text-primary); }
  /* a folha impressa mantém as proporções da tela, não as do papel */
  .fl-cols { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) !important; gap: 40px !important; }
  .fl-barra { grid-template-columns: 92px 1fr 28px !important; }
  .fl-topo { flex-wrap: nowrap !important; }
  .fl-doc { width: auto !important; font-size: 9px !important; letter-spacing: .18em !important; }
  .fl-rodape { flex-wrap: nowrap !important; }
  .fl-rodape span { width: auto !important; }
  .fc-pdf { display: none; }
}

/* ============================================================
   Hover que DESLOCA vale so em ponteiro fino.
   Em toque o hover dispara no tap e o estado fica grudado ate o proximo
   toque em outro lugar. Cor, fundo e sombra ficam de fora: sao inofensivos.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .cta-arrow { transform: translate(2px, -2px); }
  .btn-paper:hover { transform: translateY(-2px); }
  /* a carta levanta, a coroa do nivel acende, o no cresce, as setas avancam:
     quatro respostas ao mesmo gesto, todas na cor do degrau */
  .tr-carta:hover { transform: translateY(-6px); border-color: rgba(var(--lvrgb, 11, 16, 32), .5);
    box-shadow: 0 34px 54px -34px rgba(11, 16, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .95); }
  .tr-carta:hover::after { transform: scaleX(1); }
  .tr-carta:hover .tc-no { transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 0 0 3px #F2EEE4, 0 0 0 5px rgba(var(--lvrgb, 240, 86, 31), .35),
      0 0 16px rgba(var(--lvrgb, 240, 86, 31), .55); }
  .tc-itens li:hover span { transform: translateX(3px); }
  .tr-mapa:hover .tm-tag svg { transform: rotate(40deg); }
  .tm-tag svg { transition: transform .5s var(--ease-out); }
  .esc-fecho:hover { background: rgba(255, 255, 255, .7); border-color: rgba(176, 124, 66, .4); }
  .esc-fecho:hover .ef-selo svg { transform: rotate(35deg); }
  .ct-canal:hover { padding-left: 10px; }
  .ct-canal:hover .cc-seta { transform: translate(3px, -3px); }
  .sc-op:hover { padding-left: 24px; }
  #se-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
}

/* ---------- Princípios: no toque, a fila desliza ---------- */
@media (max-width: 899px) {
  .prin-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-left: -24px; margin-right: -24px; padding: 0 24px; }
  .prin-list::-webkit-scrollbar { display: none; }
  .prin { flex: 0 0 74%; max-width: 340px; scroll-snap-align: start; }
  .prin p { max-width: none; }
  .prin-fecho { display: none; }
}

/* ---------- VoxScan: a amostra antes do e-mail ---------- */
.sc-amostra { display: grid; gap: 0; margin: 6px 0 2px; max-width: 560px;
  border: 1px solid rgba(244, 241, 234, .14); border-radius: 4px;
  background: linear-gradient(180deg, rgba(244, 241, 234, .05), rgba(244, 241, 234, .015));
  position: relative; overflow: hidden; }
.sc-amostra::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 88px;
  background: var(--ichor-h); }
.sa-item { display: grid; gap: 5px; padding: 14px 18px; }
.sa-item + .sa-item { border-top: 1px solid rgba(244, 241, 234, .1); }
.sa-rot { font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(244, 241, 234, .45); }
.sa-nivel { font-family: var(--font-display); font-weight: 520; font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1; color: var(--accent); }
.sa-item p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(244, 241, 234, .88); }

/* ---------- hero: a linha de especificidade ---------- */
/* Informacao estrategica, nao legenda tecnica: corpo de texto, caixa normal,
   medida curta para caber em duas linhas. */
/* O bloco de texto do hero cai sobre o marmore PRETO da estatua: sem veu, tinta
   escura sobre pedra escura fica ilegivel. O veu e o mesmo gesto do #oh-ground —
   o chao de papel subindo — nao uma caixa. */
#hero-cta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* chao de papel subindo pela largura toda: sem borda de elipse visivel,
     a estatua assenta na luz em vez de ficar atras de uma mancha */
  inset: -78px -50vw -600px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(244, 241, 234, .62) 7%,
    rgba(244, 241, 234, .9) 12%,
    rgba(244, 241, 234, .98) 18%,
    var(--paros) 28%);
}

/* #hero-cta p (0,1,1) vence .hero-espec (0,1,0): o seletor precisa do id junto */
#hero-cta p.hero-espec { display: block; margin: 2px auto 0; max-width: 520px;
  font-family: var(--font-sans); font-weight: 400; font-size: 15px; letter-spacing: 0;
  line-height: 1.5; text-align: center; text-wrap: balance;
  color: var(--text-secondary); }
@media (max-width: 639px) {
  #hero-cta p.hero-espec { font-size: 13px; max-width: 33ch; line-height: 1.45; margin-top: 4px; }
}

/* ---------- Skip link: invisivel ate o foco ---------- */
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 10000;
  padding: 12px 18px; border-radius: 4px; background: var(--nero, #0C0C0E); color: #F4F1EA;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; transition: top .25s var(--ease-out); }
.skip-link:focus-visible { top: 16px; outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Provas (faixa de cases, entre a Tese e as Soluções) ---------- */
#provas { position: relative; padding: clamp(54px, 8vh, 100px) 0; }
.pv-wrap { display: grid; gap: 24px; }
.pv-linha { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -.012em;
  margin-top: 10px; max-width: 26ch; }
.pv-linha em { font-style: italic; color: var(--accent-text); }
/* auto-fit em vez de `repeat(4,...)`: a faixa nasceu com quatro nomes e o quinto
   caia sozinho numa linha. A contagem agora e do conteudo, nao do CSS. */
.pv-nomes { list-style: none; margin: 0; padding: 20px 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 20px;
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.pv-n { display: block; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(19px, 2.1vw, 27px); letter-spacing: -.015em; line-height: 1.1; }
.pv-s { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 9.5px;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.pv-destaque { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.pv-destaque p { color: var(--text-secondary); font-size: 15.5px; flex: 1 1 24rem; margin: 0; }
.pv-link { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text); text-decoration: none;
  border-bottom: 1px solid rgba(240, 86, 31, .45); padding-bottom: 3px; white-space: nowrap; }
.pv-link:hover { border-color: var(--accent); }
.pv-todos { justify-self: start; white-space: nowrap; }

@media (max-width: 900px) { .pv-nomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pv-nomes { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---------- Alvo de toque depende do PONTEIRO, não da largura ----------
   A cura do rodapé existia só em `@media (max-width: 639px)` — um tablet de 820px
   tem dedo e ficava com links de 16px de altura. Medido em 820 com toque emulado.
   Padding real + margem negativa no pai é a forma que funciona aqui: `::after`
   é recortado pelo `overflow: hidden` do #site-foot. */
@media (pointer: coarse) {
  .foot-nav { gap: 0 26px; margin: -14px 0; }
  .foot-nav a { padding: 14px 0; }
  #menu-btn { padding: 13px 16px; }
  .head-logo { display: inline-flex; align-items: center; min-height: 44px; }
  /* no menu empilhado o alvo e a linha, nao a palavra */
  #mobile-menu nav a { padding: 10px 18px; min-width: 44px; text-align: center; }
}

/* A armadilha de robo do formulario: `display:none` alguns robos detectam, entao
   ela sai de cena por posicao — invisivel, sem foco e sem leitor de tela. */
.ct-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }