/* ============================================================================
 * realizou.com — sistema visual das páginas (2026-07-24 · v3)
 *
 * Fonte da verdade: o **Realizou Design System** oficial
 * (../Realizou Design System/) — tokens de cor, tipo, espaço, raio e efeito
 * copiados de tokens/*.css, sem reinterpretação.
 *
 * O que o DS manda e este arquivo obedece (a v2 desobedecia):
 *   · squared-first — botões/inputs r=4, cards r=6, mídia r=10, herói r=14.
 *     Pílula é só para avatar, toggle e o círculo molten. Nada de btn 999px.
 *   · o CTA sólido é o PushButton 3D (.push), nunca uma pílula chapada;
 *     sobre imagem/escuro quem lidera é o botão vazado (.btn).
 *   · Instrument Serif SÓ em statements (herói, fechos, numerais grandes);
 *     título de seção é Barlow 800. Serifa em tudo virava enfeite.
 *   · efeitos-assinatura que estavam faltando: faixa de transição de tema,
 *     amanhecer (CloudReveal, 1× por página), starfield, marquee de
 *     velocidade, marca-texto, HUD do calendário de execução, glass.
 *   · vidro (glass) sobre fotografia, brilho ember no escuro, hairlines.
 *
 * Referências de linguagem mantidas: landonorris.com (tipografia editorial),
 * spur.us (CTA em [colchetes], microrrótulos mono), cinetica.studio (escuro).
 * ========================================================================= */

/* ------------------------------------------------------------- webfonts -- */
/* Auto-hospedadas: o @import do Google Fonts bloqueava o primeiro paint num
 * terceiro domínio. Mesmas famílias do DS, servidas do próprio domínio. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/barlow-800.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-400i.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/space-mono-700.woff2') format('woff2'); }

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Basalt — near-pretos quentes, a base cinematográfica */
  --basalt-900: #14100C;
  --basalt-800: #1C1712;
  --basalt-700: #29221B;
  --basalt-600: #392F26;
  --basalt-500: #4D4136;

  /* Clay — a base clara (calcário quente) */
  --clay:      #F3ECE1;
  --clay-dim:  #E8DFD0;
  --clay-card: #FDFBF6;

  /* Sand — texto e neutros */
  --sand-100: #F5F1EA;
  --sand-300: #D6CDBE;
  --sand-400: #A99D89;
  --sand-500: #6E6455;
  --sand-700: #443C31;
  --sand-900: #1A1611;

  /* Ember — o único acento da marca (a chama do símbolo) */
  --ember-050: #FCEBE1;
  --ember-100: #F8D4C1;
  --ember-400: #F0733B;
  --ember-500: #E4571E;
  --ember-600: #C4430F;
  --ember-700: #9E340A;   /* faltava na v2 e quebrava o hover de todo botão */

  /* Veredicto — os DOIS únicos sinais fora da paleta da marca, e existem só
     para o comparativo do preço. O vermelho é puxado para o carmim de
     propósito: no laranja do ember um "não" leria como acento da marca. */
  --veto-400:   #E5484D;
  --go-400:     #46C97D;

  --molten-400: #F6A72B;  /* sinal: só o círculo com seta sobre vidro/foto */
  --brass-400:  #C8912E;
  --kiln-700:   #3A2011;
  --kiln-900:   #1F0F07;
  --white:      #FFFFFF;

  /* Vidro (assinatura do DS): frosted sobre fotografia */
  --glass-dark-bg:   rgba(30, 24, 19, 0.55);
  --glass-dark-brd:  rgba(255, 255, 255, 0.14);
  --glass-light-bg:  rgba(253, 251, 246, 0.62);
  --glass-blur:      18px;
  --shadow-glass:    0 16px 40px rgba(12, 8, 5, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.16);

  /* Sombras (claro) e brilhos ember (escuro) */
  --shadow-sm: 0 2px 6px rgba(26, 22, 17, 0.08);
  --shadow-md: 0 8px 24px rgba(26, 22, 17, 0.11);
  --shadow-lg: 0 20px 48px rgba(26, 22, 17, 0.15);
  --glow-accent: 0 0 0 1px rgba(228, 87, 30, 0.32), 0 8px 32px rgba(228, 87, 30, 0.30);
  --glow-soft:   0 6px 28px rgba(228, 87, 30, 0.22);

  /* Gradientes e proteções */
  --grad-kiln:  linear-gradient(180deg, #1F0F07 0%, #14100C 100%);
  --grad-ember: linear-gradient(135deg, #F0733B 0%, #E4571E 50%, #C4430F 100%);
  --protect-bottom: linear-gradient(180deg, rgba(20, 16, 12, 0) 0%, rgba(20, 16, 12, 0.85) 100%);

  /* Semânticos — contexto escuro (padrão destas páginas) */
  --bg:            var(--basalt-900);
  --bg-raised:     var(--basalt-800);
  --card:          var(--basalt-700);
  --txt:           var(--sand-300);
  --txt-strong:    var(--white);
  --txt-muted:     var(--sand-400);
  --line:          rgba(255, 255, 255, 0.12);
  --line-strong:   rgba(255, 255, 255, 0.22);
  --accent:        var(--ember-500);
  --accent-soft:   var(--ember-400);
  --focus:         rgba(228, 87, 30, 0.55);

  /* Tipografia */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Escala fluida — uma ideia por tela pede números grandes */
  --t-mega:  clamp(3rem, 12vw, 11rem);
  --t-hero:  clamp(2.6rem, 7.6vw, 6.4rem);
  --t-state: clamp(2rem, 5vw, 3.9rem);
  --t-sec:   clamp(1.9rem, 4.6vw, 3.4rem);
  --t-sub:   clamp(1.3rem, 2.6vw, 1.9rem);
  --t-lead:  clamp(1.06rem, 1.5vw, 1.19rem);
  --t-body:  1rem;
  --t-label: 0.6875rem;

  /* Ritmo */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wrap: 1200px;
  --wrap-tight: 760px;
  --sec-y: clamp(5rem, 12vh, 8.5rem);

  /* Raio — squared-first, direto do tokens/effects.css do DS */
  --r-sm:   2px;
  --r-md:   4px;   /* botões, inputs, selos */
  --r-lg:   6px;   /* cards */
  --r-xl:   10px;  /* mídia de destaque */
  --r-2xl:  14px;  /* blocos herói */
  --r-push: 12px;  /* só o CTA 3D */

  --dur: 220ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Contexto claro — as seções de "luz" (o depois) */
.light {
  --bg:          var(--clay);
  --bg-raised:   var(--clay-dim);
  --card:        var(--clay-card);
  --txt:         var(--sand-700);
  --txt-strong:  var(--sand-900);
  --txt-muted:   var(--sand-500);
  --line:        rgba(26, 22, 17, 0.10);
  --line-strong: rgba(26, 22, 17, 0.20);
  --accent:      var(--ember-600);
  --accent-soft: var(--ember-600);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--basalt-900);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.06; letter-spacing: -0.015em; font-weight: 800; }
p { margin: 0; }
/* height:auto é obrigatório: os atributos width/height do HTML (que reservam
 * espaço e evitam layout shift) viram altura usada e anulariam o aspect-ratio
 * das regras abaixo, achatando as imagens. */
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ember-500); color: #fff; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

/* Grão de filme — a textura que amarra tudo ao mundo físico da marca */
.grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- layout --- */
/* Um único container: toda seção compartilha a MESMA borda esquerda. O que
 * varia é a largura da linha de texto (--wrap-tight), não a margem da página. */
.wrap, .wrap-tight { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-tight > * { max-width: var(--wrap-tight); }
.is-centered { text-align: center; }
.is-centered > * { margin-inline: auto; }

.section {
  position: relative;
  padding-block: var(--sec-y);
  background: var(--bg);
  color: var(--txt);
}
.section--kiln { background: var(--grad-kiln); }
.section--flush { padding-block: 0; }

/* --------------------------------------------------------- tipografia ----- */
/* DS: a serifa é a face da MARCA — statement de herói, fecho e numeral grande.
 * Título de seção, card e UI são Barlow. Serifa em tudo lê como enfeite. */
.t-hero  { font-family: var(--font-display); font-weight: 400; font-size: var(--t-hero);  line-height: 0.98; letter-spacing: -0.02em; color: var(--txt-strong); }
.t-state { font-family: var(--font-display); font-weight: 400; font-size: var(--t-state); line-height: 1.08; letter-spacing: -0.02em; color: var(--txt-strong); }
.t-sec   { font-family: var(--font-sans); font-weight: 800; font-size: var(--t-sec); line-height: 1.08; letter-spacing: -0.02em; color: var(--txt-strong); max-width: 22ch; }
.t-sub   { font-family: var(--font-sans); font-weight: 800; font-size: var(--t-sub); line-height: 1.16; color: var(--txt-strong); }
.t-serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; }
.t-hero em, .t-state em { font-style: italic; color: var(--accent-soft); }

.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--txt); max-width: 52ch; }
.muted { color: var(--txt-muted); }
.hl { color: var(--accent-soft); }
.light .hl { color: var(--ember-600); }

/* Eyebrow mono — o único uppercase do sistema (DS §voice) */
.eyebrow {
  display: block; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: clamp(16px, 2.4vw, 22px);
}
/* no claro o eyebrow vai de ember-700, não ember-600: mono 11px é texto
 * pequeno e o 600 sobre clay dá 4,31:1 — reprova no AA. O 700 dá 6,07:1.
 * (Nos títulos o 600 continua valendo: texto grande passa com 3:1.) */
.light .eyebrow { color: var(--ember-700); }

/* Marca-texto que se preenche com o scroll (assinatura .rz-mark do DS).
 * O traço é DESENHADO À MÃO (path SVG inline, ember translúcido), não um
 * retângulo: um bloco sólido some com o texto e lê como realce de editor de
 * texto; o traço torto lê como alguém marcando a frase na hora. Ancorado a
 * 86% da caixa inline — a Instrument Serif e a Barlow posicionam os glifos de
 * forma diferente dentro do em, e só perto da base as duas coincidem. */
.mark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2064'%20preserveAspectRatio='none'%3E%3Cpath%20d='M6,34%20C30,22%2070,20%20140,21%20C210,22%20268,18%20312,27%20C318,33%20316,46%20308,50%20C250,58%20150,55%2096,53%20C52,51%2024,54%208,46%20C2,42%202,38%206,34%20Z'%20fill='%23E4571E'%20fill-opacity='0.45'/%3E%3Cpath%20d='M14,45%20C70,51%20180,51%20300,44%20C306,46%20306,49%20300,50%20C190,56%2080,56%2016,50%20C11,49%2010,46%2014,45%20Z'%20fill='%23C6440F'%20fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 100% 0.82em;
  color: var(--txt-strong);
  padding: 0.02em 0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.light .mark { color: var(--sand-900); }
.js-marks .mark { background-size: var(--mk, 0%) 0.82em; }

/* ---------------------------------------------------------------- botões -- */
/* DS: sobre imagem e escuro, quem lidera é o VAZADO. O sólido é o push 3D. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.72em 1.35em;
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600;
  color: var(--txt-strong);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 120ms var(--ease);
}
.btn:hover { border-color: var(--txt-strong); background: rgba(255, 255, 255, 0.07); }
.light .btn:hover { background: rgba(26, 22, 17, 0.05); }
.btn:active { transform: scale(0.98); }
.btn--lg { min-height: 54px; padding: 0.9em 1.7em; font-size: 1rem; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* PushButton — o CTA sólido do DS: gradiente ember com núcleo quente sobre
 * uma borda mais escura; afunda de verdade no clique. Nunca uma pílula. */
.push {
  position: relative; display: inline-block; border: 0; background: transparent;
  padding: 0; outline-offset: 4px; font-family: var(--font-sans);
}
.push__shadow {
  position: absolute; inset: 0; border-radius: var(--r-push);
  background: hsl(18deg 70% 6% / 0.34);
  transform: translateY(2px); will-change: transform;
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.push__edge {
  position: absolute; inset: 0; border-radius: var(--r-push);
  background: linear-gradient(to left, #7A2C06 0%, #9E340A 8%, #9E340A 92%, #7A2C06 100%);
}
.push__face {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.55em;
  border-radius: var(--r-push);
  font-size: 1.03rem; font-weight: 700; letter-spacing: -0.01em;
  /* texto basalt sobre o núcleo claro do gradiente: 11:1 — muito acima do AA */
  color: var(--basalt-900);
  padding: 15px 32px;
  background: radial-gradient(120% 150% at 50% 32%, #FCE0CF 0%, #F6A278 26%, #EF7A44 52%, #E4571E 80%, #C6440F 100%);
  transform: translateY(-4px); will-change: transform;
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.push:hover { filter: brightness(1.05); }
.push:hover .push__face  { transform: translateY(-6px); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.push:hover .push__shadow { transform: translateY(4px);  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.push:active .push__face  { transform: translateY(-2px); transition: transform 34ms; }
.push:active .push__shadow { transform: translateY(1px); transition: transform 34ms; }
.push--block { display: block; width: 100%; }
.push--block .push__face { width: 100%; }

/* Círculo molten com seta — a afordância reservada sobre vidro/fotografia */
.molten {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--molten-400); color: var(--basalt-900); flex: none;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.molten:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.06); }

/* Link em [colchetes] — o colchete abre no hover */
.brk {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-strong);
}
.brk::before, .brk::after { color: var(--accent-soft); transition: transform var(--dur) var(--ease); }
.brk::before { content: '['; }
.brk::after  { content: ']'; }
.brk:hover::before { transform: translateX(-4px); }
.brk:hover::after  { transform: translateX(4px); }

/* Link mono discreto (rodapé, cabeçalho) */
.lnk { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; border-bottom: 1px dotted currentColor; }
.lnk:hover { color: var(--accent-soft); }

/* -------------------------------------------------------------- cabeçalho - */
/* Reescrito em 2026-07-25 para ser o SiteHeader do Design System
 * (ui_kits/website/SiteHeader.jsx), e não uma barra improvisada. O que o
 * componente de referência define e esta implementação copia número a número:
 *   · altura 68px, fixo, z-index alto;
 *   · TRANSPARENTE por toda a extensão do herói — só vira sólido depois dele
 *     (o `y > 40` da versão anterior colocava um vidro escuro por cima do
 *     filme já no primeiro rolar de dedo, matando a primeira dobra);
 *   · sólido = rgba(12,14,18,0.72) + blur(16px) + hairline embaixo;
 *   · enquanto transparente, o conteúdo ganha drop-shadow para o logo e os
 *     links continuarem legíveis sobre a imagem;
 *   · some ao descer, volta ao subir (340ms, ease do DS);
 *   · navegação de seções no meio (Barlow 600), CTA vazado à direita e, no
 *     estreito, painel de menu fixo e rolável. */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, backdrop-filter 300ms ease,
              border-color 300ms ease, transform 340ms var(--ease);
}
.topbar.is-stuck {
  background: rgba(12, 14, 18, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.topbar.is-away { transform: translateY(-100%); }
.topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 2vw, 28px);
  min-height: 68px;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.38));
  transition: filter 300ms ease;
}
.topbar.is-stuck .topbar__in { filter: none; }

.lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; flex: none; }
.lockup img, .lockup svg { width: 22px; height: auto; flex: none; }
.lockup__word { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; letter-spacing: -0.01em; }
.lockup__word .com { color: var(--ember-400); }

/* navegação de seções — Barlow 600, do tamanho de corpo pequeno (DS) */
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 8px 14px; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600;
  color: var(--sand-300); transition: color var(--dur) var(--ease);
}
.nav a:hover { color: #fff; }

.topbar__end { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); flex: none; }
/* o CTA do cabeçalho é o vazado do DS, em versão compacta */
.btn--sm { min-height: 38px; padding: 0.45em 1.05em; font-size: 0.875rem; }

/* hambúrguer + painel: só no estreito */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px; color: #fff;
}
.burger svg { width: 22px; height: 22px; }
.burger .x { display: none; }
.topbar.is-open .burger .x { display: block; }
.topbar.is-open .burger .m { display: none; }

.menu {
  position: fixed; top: 68px; left: 0; right: 0; z-index: 45;
  max-height: calc(100dvh - 68px); overflow-y: auto;
  background: var(--basalt-900);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 8px 0 20px;
}
.menu[hidden] { display: none; }
.menu a.menu__lnk {
  display: block; padding: 14px var(--gutter);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: #fff;
}
.menu a.menu__lnk:hover { color: var(--ember-400); }
.menu__cta { padding: 12px var(--gutter) 0; }
.menu__scrim {
  position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 40;
  background: rgba(8, 10, 14, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.menu__scrim[hidden] { display: none; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .topbar__end .buy { display: none; }
}
@media (max-width: 560px) {
  .lockup__word { font-size: 1.15rem; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--basalt-900); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; will-change: transform; }
/* O poster é uma <img> real (vira o LCP e aparece mesmo sem JS/vídeo); o vídeo
 * entra por cima com fade só depois do load. Era isso que faltava: a v2 não
 * tinha vídeo nenhum no herói. */
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.hero__media video { opacity: 0; transition: opacity 700ms ease; }
.hero__media video.is-playing { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,12,0.30) 0%, rgba(20,16,12,0.06) 30%, rgba(20,16,12,0.58) 70%, rgba(20,16,12,0.97) 100%);
}
@media (max-width: 640px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(20,16,12,0.42) 0%, rgba(20,16,12,0.18) 28%, rgba(20,16,12,0.70) 62%, rgba(20,16,12,0.98) 100%); }
}
.hero__veil { position: absolute; inset: 0; background: var(--basalt-900); opacity: 0; pointer-events: none; }
.hero__copy {
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(120px, 20vh, 190px); padding-bottom: clamp(44px, 8vh, 88px);
  will-change: transform, opacity;
}
.hero .eyebrow { color: var(--sand-300); }
.hero .lead { color: var(--sand-300); margin-top: clamp(18px, 2.4vw, 24px); }

/* Indicação de rolagem — mono, quieta */
.cue {
  position: absolute; right: var(--gutter); bottom: 28px; z-index: 2;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-300); opacity: 0.6;
}
.cue::after {
  content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, currentColor, transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@media (max-width: 640px) { .cue { display: none; } }

/* ------------------------------------------- AMANHECER (CloudReveal, 1×) -- */
/* O herói (noite) fica preso; a página sobe por cima como cortina e a banda
 * de nuvens cavalga a costura escuro→clay. É o set-piece da marca — sem JS,
 * o sticky e a banda estática já entregam a ideia. */
.dawn { position: relative; }
.dawn .hero { position: sticky; top: 0; z-index: 0; }
.dawn__rise { position: relative; z-index: 1; }

/* A FAIXA (corrigida em 2026-07-25 — a transparência não estava funcionando).
 * O que estava errado: a faixa pintava basalt-900 OPACO do topo até 20% e ainda
 * tinha overflow:hidden. Resultado: o herói preso atrás sumia por completo, as
 * nuvens flutuavam sobre uma chapa preta e a emenda com o herói era um corte
 * reto atravessando a imagem. Não existia revelação nenhuma — existia uma
 * cortina opaca com nuvem impressa.
 * Como é agora: o TOPO DA FAIXA É TRANSPARENTE. O céu do herói (o menino, o
 * sol nascendo na borda da Terra) aparece POR ENTRE as nuvens, e a cor só vai
 * ganhando corpo à medida que o amanhecer esquenta, até assentar no clay. */
.dawn__band {
  position: relative; height: clamp(320px, 38vw, 560px);
  /* sem overflow:hidden — as nuvens precisam vazar por cima da noite */
  background: linear-gradient(180deg,
    rgba(20, 16, 12, 0) 0%,
    rgba(20, 16, 12, 0) 20%,
    rgba(58, 36, 21, 0.50) 42%,
    #8A5A33 62%,
    #C9A277 76%,
    var(--clay) 88%,
    var(--clay) 100%);
}
.dawn__clouds {
  position: absolute; inset: -11% 0 -6%; z-index: 0;
  background-image: url('/assets/images/clouds.webp');
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* a máscara é longa de propósito: em cima só passam farrapos, e é isso que
   * deixa o herói visível através deles */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 44%, #000 100%);
  will-change: transform;
}
/* O derretimento no clay mora AQUI, não na camada das nuvens: a camada das
 * nuvens é a que sofre parallax, então o degradê ia junto com ela e nunca
 * fechava exatamente na emenda — sobrava uma faixa esbranquiçada mais clara
 * que o clay logo antes da seção. Preso à faixa, fecha sempre no mesmo pixel. */
.dawn__band::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 36%; z-index: 1;
  background: linear-gradient(180deg, rgba(243, 236, 225, 0) 0%, rgba(243, 236, 225, 0.75) 58%, var(--clay) 100%);
  pointer-events: none;
}
@media (max-width: 860px) {
  /* estreito: a nuvem mantém proporção e corta nas laterais em vez de esmagar */
  .dawn__clouds { background-size: auto 92%; }
}

/* Faixas de transição de tema (ThemeTransition do DS) — toda troca escuro↔claro
 * é costurada por um gradiente, nunca por um corte seco.
 *
 * O anoitecer foi refeito em 2026-07-25. Antes ele espremia clay → marrom →
 * quase-preto → basalt em 190px: um arco-íris comprimido que lia como falha de
 * renderização, ainda por cima colado a uma faixa de luz de uma seção só — a
 * página piscava claro e voltava ao escuro em menos de uma tela.
 * Agora vale a fórmula do ThemeTransition do DS (segura a cor de origem por
 * ~26%, transiciona no miolo, assenta em ~86%) numa altura de gente, e a luz
 * do dia dura duas seções (as três coisas + sobre mim) antes de anoitecer. */
.band       { height: clamp(110px, 15vw, 190px); background: linear-gradient(180deg, var(--basalt-900) 0%, #2E2013 45%, #8A5A33 78%, var(--clay) 100%); }
.band--back {
  height: clamp(240px, 30vw, 420px);
  background: linear-gradient(180deg,
    var(--clay) 0%,
    var(--clay) 26%,
    #C9A277 48%,
    #6B4527 68%,
    #241A11 86%,
    var(--basalt-900) 100%);
}

/* --------------------------------------------------------------- starfield */
.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.section .wrap, .section .wrap-tight { position: relative; z-index: 1; }

/* ------------------------------------------------------------- linktree --- */
/* A raiz é um linktree: o nome, a oferta numa linha e a ESCOLHA precisam caber
 * na primeira tela — por isso o ritmo aqui é mais apertado que o do resto. */
.portal {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden;
  padding-block: clamp(64px, 8vh, 92px) clamp(28px, 5vh, 40px);
}
/* na raiz o filme fica atrás de TUDO e o conteúdo é centralizado, então o
 * escurecimento é radial (protege o miolo) em vez de só um degradê de base */
.portal .hero__media img, .portal .hero__media video { object-position: center 38%; }
.hero__scrim--full {
  background:
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(20, 16, 12, 0.66) 0%, rgba(20, 16, 12, 0.86) 70%, rgba(20, 16, 12, 0.94) 100%),
    linear-gradient(180deg, rgba(20, 16, 12, 0.55) 0%, rgba(20, 16, 12, 0.30) 38%, rgba(20, 16, 12, 0.96) 100%);
}
.portal__glow {
  position: absolute; left: 50%; top: 44%; translate: -50% -50%; z-index: 1;
  width: min(1100px, 150vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(228, 87, 30, 0.22), rgba(228, 87, 30, 0.05) 42%, transparent 68%);
  pointer-events: none; filter: blur(6px);
}
.portal > .wrap { position: relative; z-index: 2; }
.portal__mark { width: clamp(40px, 5.4vw, 56px); margin-inline: auto; opacity: 0.95; }
.portal__name {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 12.5vw, 9rem);
  line-height: 0.84; letter-spacing: -0.045em; color: #fff; text-align: center;
  margin-top: clamp(14px, 2vw, 24px);
}
.portal__name .com { color: var(--ember-400); }
.portal__line {
  text-align: center; margin: clamp(12px, 1.8vw, 18px) auto 0; max-width: 32ch;
  font-size: var(--t-lead); color: var(--sand-300); line-height: 1.5;
}
.portal__offer {
  display: flex; justify-content: center; margin-top: clamp(14px, 2vw, 22px);
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-400); text-align: center;
}

/* As duas portas — a escolha é o conteúdo principal da raiz */
.doors {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(16px, 2.2vw, 24px);
}
.door {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(16px, 2.2vw, 26px); min-height: clamp(150px, 14.5vw, 180px);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-dark-brd);
  border-radius: var(--r-xl);
  overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-glass);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.door::after {
  content: ''; position: absolute; inset: auto -20% -60% -20%; height: 70%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(228, 87, 30, 0.34), transparent 70%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.door:hover, .door:focus-visible {
  border-color: rgba(228, 87, 30, 0.45); transform: translateY(-4px);
}
.door:hover::after, .door:focus-visible::after { opacity: 1; }
.door__n { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.2em; color: var(--sand-400); }
.door__t {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  line-height: 1; color: #fff; letter-spacing: -0.025em;
}
.door__d { font-size: 0.9375rem; line-height: 1.5; color: var(--sand-400); margin-top: 0.55em; max-width: 28ch; }
.door__go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: clamp(14px, 2vw, 18px); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-400);
}
.door__go svg { transition: transform var(--dur) var(--ease); }
.door:hover .door__go svg { transform: translate(4px, -4px); }

/* Links secundários do linktree — em linha no desktop (para a escolha caber na
 * primeira tela), empilhados no celular (onde o polegar agradece o alvo largo) */
.tree { display: grid; gap: 8px; margin-top: clamp(12px, 1.6vw, 16px); }
@media (min-width: 760px) {
  .tree { grid-auto-flow: column; grid-auto-columns: 1fr; }
  /* em linha o espaço é curto: a seta de fim de linha sai, o ícone basta */
  .tree .tree__arrow { display: none; }
}
.tree__item {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--sand-300); font-size: 0.875rem; font-weight: 500;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tree__item:hover { border-color: var(--line-strong); color: #fff; background: rgba(255, 255, 255, 0.05); }
.tree__item svg { flex: none; opacity: 0.75; }
.tree__item .tree__arrow { margin-left: auto; opacity: 0.5; transition: transform var(--dur) var(--ease); }
.tree__item:hover .tree__arrow { transform: translateX(3px); opacity: 1; }

/* ---------------------------------------------------------------- marquee - */
/* Deriva sempre; acelera com a energia da rolagem (assinatura do DS). */
.marq {
  overflow: hidden; padding-block: clamp(18px, 2.6vw, 28px); user-select: none;
  border-block: 1px solid var(--line); background: var(--basalt-900);
}
.marq__track { display: flex; width: max-content; will-change: transform; }
.marq__group { display: flex; align-items: baseline; gap: clamp(20px, 3vw, 38px); padding-right: clamp(20px, 3vw, 38px); flex: none; white-space: nowrap; }
.marq__group span {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.88);
}
.marq__group i { font-style: normal; color: var(--ember-500); font-size: clamp(1rem, 2.2vw, 1.7rem); }

/* --------------------------------------------------------------- prova ---- */
.shot {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background: var(--card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a:hover > .shot, .shot:hover { border-color: rgba(228, 87, 30, 0.45); transform: translateY(-4px); box-shadow: var(--glow-soft); }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform 720ms var(--ease); }
.shot:hover img, a:hover > .shot img { transform: scale(1.03); }
.shot figcaption {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.06em;
  color: var(--txt-muted); padding: 12px 16px; border-top: 1px solid var(--line);
}

.case { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(18px, 3vw, 36px); align-items: start; }
.case__flow { display: grid; gap: 14px; }
.case__arrow { justify-self: center; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; }

/* --------------------------------- CALENDÁRIO DE EXECUÇÃO (HUD do DS) ----- */
/* A espinha se desenha com o scroll e os nós acendem na passagem. Sem JS ou
 * com movimento reduzido ela nasce completa e acesa. */
.hud { position: relative; max-width: 940px; margin: clamp(38px, 6vw, 62px) auto 0; }
.hud__spine {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(228, 87, 30, 0.16) 6%, rgba(228, 87, 30, 0.16) 94%, transparent);
}
.hud__fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--ember-500) 6%, var(--ember-500) 94%, transparent);
  box-shadow: 0 0 12px rgba(228, 87, 30, 0.45);
  transform-origin: top; transform: scaleY(var(--hud, 1));
}
.hud__row { position: relative; display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.hud__row + .hud__row { margin-top: clamp(20px, 4vw, 54px); }
.hud__node {
  grid-column: 2; grid-row: 1; justify-self: center; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ember-500); background: var(--kiln-900);
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 0 0 5px rgba(228, 87, 30, 0.08), 0 0 16px rgba(228, 87, 30, 0.5);
}
.hud__node::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ember-500); box-shadow: 0 0 6px var(--ember-500); }
.hud__idx {
  position: absolute; top: -50px; z-index: 0; font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 4.9rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px rgba(228, 87, 30, 0.5); pointer-events: none;
}
.hud__row--r .hud__idx { right: 14px; }
.hud__row--l .hud__idx { left: 14px; }
.hud__card { position: relative; grid-row: 1; z-index: 1; }
.hud__row--r .hud__card { grid-column: 3; }
.hud__row--l .hud__card { grid-column: 1; }
.hud__card::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 2px; background: var(--ember-500); opacity: 0.55; }
.hud__row--r .hud__card::before { left: -28px; }
.hud__row--l .hud__card::before { right: -28px; }
.hud__in {
  position: relative; display: flex; gap: 18px; align-items: center;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hud__in:hover { border-color: rgba(228, 87, 30, 0.5); transform: translateY(-2px); }
/* o canto vivo — detalhe HUD */
.hud__in::after { content: ''; position: absolute; top: -1px; right: -1px; width: 13px; height: 13px; border-top: 2px solid rgba(228, 87, 30, 0.5); border-right: 2px solid rgba(228, 87, 30, 0.5); }
.hud__txt { flex: 1 1 auto; min-width: 0; }
.hud__txt h3 { color: #fff; font-weight: 800; font-size: clamp(1.06rem, 2vw, 1.3rem); letter-spacing: -0.01em; }
.hud__txt p { color: var(--sand-400); font-size: 0.9rem; line-height: 1.5; margin-top: 6px; }
.hud__when {
  flex: none; margin-left: auto; align-self: stretch; padding-left: 18px;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 66px; text-align: center;
}
.hud__when .n { font-family: var(--font-display); font-size: 2.25rem; line-height: 0.95; color: var(--ember-400); }
.hud__when .u { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-400); margin-top: 4px; }
/* variante palavra: nem toda etapa tem duração em número. No caminho "comigo"
 * o que a coluna marca é DE QUEM é a mão — juntos, você, juntos, você. */
.hud__when--word { min-width: 92px; }
.hud__when--word .n { font-size: 1.45rem; line-height: 1.05; }
/* nós apagados até a espinha passar (só quando o JS de movimento está vivo) */
html.js-marks .hud__row:not(.is-lit) .hud__node { border-color: rgba(228, 87, 30, 0.28); box-shadow: none; }
html.js-marks .hud__row:not(.is-lit) .hud__node::after { opacity: 0.22; }
html.js-marks .hud__row:not(.is-lit) .hud__idx { -webkit-text-stroke-color: rgba(228, 87, 30, 0.2); }
.hud__node, .hud__node::after, .hud__idx { transition: border-color 450ms var(--ease), box-shadow 450ms var(--ease), opacity 450ms var(--ease), -webkit-text-stroke-color 450ms var(--ease); }

/* Selo de fecho do calendário */
.seal { max-width: 640px; margin: clamp(32px, 5vw, 52px) auto 0; display: flex; justify-content: center; }
.seal__in {
  display: flex; align-items: center; gap: 13px; padding: 11px 22px 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04);
}
.seal__ico {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ember-400);
  border: 1px solid rgba(228, 87, 30, 0.3); border-radius: var(--r-md); background: rgba(228, 87, 30, 0.08);
}
.seal p { color: var(--sand-300); font-size: 0.875rem; line-height: 1.5; }
.seal strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------- passos --- */
.steps {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  list-style: none; margin: 0; padding: 0;
}
.step { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px); padding: clamp(20px, 3vw, 30px); background: var(--bg); align-items: start; }
.step__n { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.16em; color: var(--accent-soft); padding-top: 0.5em; }
.step__t { font-weight: 800; font-size: clamp(1.06rem, 2vw, 1.3rem); line-height: 1.16; color: var(--txt-strong); }
.step__d { margin-top: 8px; color: var(--txt); max-width: 52ch; font-size: 0.9375rem; }

/* dores — três linhas afiadas na seção clara */
.pains { margin-top: clamp(30px, 4.4vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); }
.pains > div { padding: 20px 22px 20px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; color: var(--txt-muted); }
.pains b { display: block; color: var(--txt-strong); font-weight: 700; font-size: 1.0625rem; margin-bottom: 4px; }
/* sem a linha descritiva por baixo, o respiro do <b> viraria um degrau solto */
.pains b:only-child { margin-bottom: 0; }

/* --------------------------------------------------- preço (glass card) --- */
.price-sec { position: relative; overflow: hidden; }
.price-sec__glow {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(1000px, 140vw); aspect-ratio: 1.6 / 1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(228, 87, 30, 0.18), transparent 66%);
  pointer-events: none;
}
.price {
  max-width: 620px; margin-inline: auto;
  border: 1px solid var(--glass-dark-brd); border-radius: var(--r-2xl);
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass); overflow: hidden;
}
.price__body { padding: 26px 28px 30px; }
.price__value { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price__value .v { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.4rem, 9vw, 5rem); line-height: 0.9; color: #fff; letter-spacing: -0.04em; }
.price__value .v small { font-size: 0.34em; vertical-align: 0.85em; margin-right: 0.1em; color: var(--ember-400); letter-spacing: 0; }
.price__anchor {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--sand-400);
  text-decoration: line-through; text-decoration-color: var(--ember-500); text-decoration-thickness: 1px;
}
.includes { display: grid; gap: 11px; list-style: none; padding: 0; margin: clamp(22px, 3vw, 28px) 0 0; }
.includes li { display: flex; gap: 11px; align-items: flex-start; color: var(--sand-300); font-size: 0.9375rem; line-height: 1.5; }
/* Aqui o squared-first do DS abre exceção: esta lista é a metade POSITIVA de um
   comparativo, e o ✓ só significa alguma coisa porque existe um ✕ logo acima.
   Mesmo glifo mono do `.fit`, muda a cor. */
.includes li::before {
  content: '✓'; flex: none;
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; line-height: 1.5;
  color: var(--go-400);
}
.price__cta { margin-top: clamp(26px, 3.6vw, 32px); }

/* ------------------------------------------------------------------ faq --- */
.faq { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.faq details { background: var(--bg); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 4px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: clamp(1.03rem, 1.8vw, 1.22rem); line-height: 1.25;
  color: var(--txt-strong); transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-soft); }
.faq summary::after {
  content: '+'; font-family: var(--font-mono); font-size: 1.4rem; color: var(--accent);
  flex: none; transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 4px 22px; max-width: 62ch; color: var(--txt); font-size: 0.9375rem; }

/* ------------------------------------------------------------- fechamento - */
.close { position: relative; overflow: hidden; text-align: center; background: var(--grad-kiln); }
.close__glow {
  position: absolute; left: 50%; bottom: -45%; translate: -50% 0;
  width: min(900px, 130vw); aspect-ratio: 2 / 1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(228, 87, 30, 0.24), transparent 68%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- rodapé -- */
/* A marca escrita grande, como assinatura final — a palavra é o desenho. */
.footer { position: relative; background: var(--basalt-900); color: var(--sand-400); overflow: hidden; padding-top: clamp(48px, 7vw, 84px); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: baseline; padding-bottom: clamp(28px, 4vw, 44px); }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.footer__links a { display: inline-block; padding-block: 12px; }
.footer__links a:hover { color: #fff; }
.footer__meta { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.06em; }

.wordmark {
  position: relative; display: block; width: 100%;
  font-family: var(--font-display); font-weight: 400;
  /* a palavra ocupa a largura da página inteira e é cortada pela base */
  font-size: clamp(4.5rem, 25.5vw, 24rem);
  line-height: 0.78; letter-spacing: -0.045em; text-align: center;
  color: transparent; -webkit-text-stroke: 0; /* preenchida por gradiente */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0.06) 92%);
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: -0.16em; user-select: none;
}
.wordmark .com { color: transparent; background: linear-gradient(180deg, var(--ember-400) 0%, rgba(228, 87, 30, 0.22) 88%); -webkit-background-clip: text; background-clip: text; }
.footer__bottom { border-top: 1px solid var(--line); }
.footer__bottom .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; padding-block: 18px; }
.footer a.lnk { display: inline-block; }

/* -------------------------------------------------------------- reveals --- */
/* Motion como narrativa: o conteúdo chega, não pisca. */
.rv { opacity: 0; transform: translateY(22px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.rv-d1.is-in { transition-delay: 90ms; }
.rv-d2.is-in { transition-delay: 180ms; }
.rv-d3.is-in { transition-delay: 270ms; }
html:not(.js) .rv { opacity: 1; transform: none; }

/* Headline palavra a palavra — o texto se materializa */
.words span { display: inline-block; }
.words .w { opacity: 0; transform: translateY(0.4em); }
.words.is-in .w { opacity: 1; transform: none; transition: opacity 620ms var(--ease), transform 620ms var(--ease); }

[data-prlx] { will-change: transform; }

/* --------------------------------------------------------- responsivo ----- */
@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; }
  .case, .split { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step__n { padding-top: 0; }
  .hud__spine { left: 10px; }
  .hud__row { grid-template-columns: 20px 1fr; column-gap: 18px; }
  .hud__node { grid-column: 1; }
  .hud__row--r .hud__card, .hud__row--l .hud__card { grid-column: 2; }
  .hud__card::before { display: none; }
  .hud__idx { display: none; }
}

@media (max-width: 560px) {
  .hud__in { flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
  .hud__when {
    margin-left: 0; align-self: auto; padding-left: 0; border-left: 0;
    border-top: 1px solid var(--line); padding-top: 12px; width: 100%;
    flex-direction: row; gap: 8px; justify-content: flex-start; align-items: baseline;
  }
  .hud__when .n { font-size: 1.6rem; }
  .portal__name { font-size: clamp(2.9rem, 17vw, 5rem); }
  .footer__nav { flex-direction: column; align-items: flex-start; }
}

/* Sem movimento: tudo entregue pronto, nada se move. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .rv, .words .w { opacity: 1; transform: none; }
  .js-marks .mark { background-size: 100% 0.62em; }
  .hero__media video { display: none; }
  .hud__fill { transform: none; }
  .dawn__clouds, .marq__track, [data-prlx] { transform: none !important; }
  .cue { display: none; }
}

/* Impressão — proposta enviada por PDF ainda precisa fazer sentido. */
@media print {
  .grain, .topbar, .menu, .menu__scrim, .marq, .portal__glow, .close__glow, .stars, .cue, .wordmark { display: none !important; }
  body { background: #fff; color: #000; }
  .rv, .words .w { opacity: 1; transform: none; }
}