/* ═══════════════════════════════════════════════════════════════════════
   Kooyu Flow — site. Tokens do terminal (flow/frontend/src/index.css).
   Linhas em vez de cartões; tipografia grande; número tabular e mono;
   cor só onde significa. Escuro é a marca; claro pela preferência do sistema.
   ═══════════════════════════════════════════════════════════════════════ */

/*FONTES*/
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fontes/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fontes/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fontes/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fontes/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }
/*/FONTES*/

:root {
  --fundo: #07070d; --painel: #0f0f1c; --painel-alto: #15152a; --elevado: #1d1d33;
  --linha: #1e1e2e; --linha-forte: #33334a;
  --texto: #f0f0f6; --texto-medio: #a3a3b8; --texto-fraco: #6d6d85;
  --alta: #2ec27e; --baixa: #d0453a; --alerta: #d99a2b;
  --destaque: #6b5cf0; --destaque-tinta: #ffffff; --destaque-suave: rgba(107, 92, 240, 0.16);
  --agua: #3fb8c8;
  --sombra: 0 40px 100px rgba(0, 0, 0, 0.66);
  --raio: 14px; --raio-p: 10px; --pilula: 999px;
  --disp: "Epilogue", "Segoe UI", system-ui, sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
  --largura: 1440px; --margem: 48px; --topo: 60px;
  --dur: 120ms;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fundo: #f2f2f7; --painel: #ffffff; --painel-alto: #f7f7fb; --elevado: #eeeef4;
    --linha: #e3e3ee; --linha-forte: #c9c9da;
    --texto: #12121c; --texto-medio: #4c4c60; --texto-fraco: #7a7a90;
    --alta: #1b7f4e; --baixa: #b8321f; --alerta: #9a6a00;
    --destaque: #5a4ad0; --destaque-suave: rgba(90, 74, 208, 0.12);
    --agua: #1f8fa0;
    --sombra: 0 40px 100px rgba(18, 18, 28, 0.16);
  }
}
:root[data-theme="light"] {
    --fundo: #f2f2f7; --painel: #ffffff; --painel-alto: #f7f7fb; --elevado: #eeeef4;
  --linha: #e3e3ee; --linha-forte: #c9c9da;
  --texto: #12121c; --texto-medio: #4c4c60; --texto-fraco: #7a7a90;
  --alta: #1b7f4e; --baixa: #b8321f; --alerta: #9a6a00;
  --destaque: #5a4ad0; --destaque-suave: rgba(90, 74, 208, 0.12);
  --agua: #1f8fa0;
  --sombra: 0 40px 100px rgba(18, 18, 28, 0.16);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; border-color: var(--linha); }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 16px); }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--disp); font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(52px, 7.6vw, 124px); line-height: 0.95; letter-spacing: -0.045em; margin: 20px 0 32px; }
h1 span { display: block; color: var(--texto-medio); }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.04em; margin: 12px 0 20px; }
h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.18; margin-bottom: 10px; }
small { font-size: 12px; color: var(--texto-fraco); }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 500; margin: 0 0 12px; }
.pos { color: var(--alta); } .neg { color: var(--baixa); }
.lede { font-size: 20px; line-height: 1.5; color: var(--texto-medio); max-width: 66ch; margin: 0; }
.carimbo { font-size: 11px; color: var(--texto-fraco); overflow-wrap: anywhere; line-height: 1.6; }
.painel { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); min-width: 0; overflow: hidden; }
.rolavel { overflow-x: auto; }

/* ── Botões ── */
.botao { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: 46px; padding: 0 26px; background: var(--destaque); color: var(--destaque-tinta); font: 600 15px var(--sans); border-radius: var(--pilula); border: 1px solid transparent; cursor: pointer; box-shadow: 0 14px 34px rgba(107, 92, 240, 0.30); transition: filter var(--dur), transform var(--dur), box-shadow var(--dur); }
.botao:hover { filter: brightness(1.08); } .botao:active { transform: translateY(1px); }
.botao-sec { background: transparent; color: var(--texto); border-color: var(--linha-forte); box-shadow: none; }
.botao-sec:hover { background: var(--elevado); filter: none; }
.botao-g { height: 54px; padding: 0 32px; font-size: 16px; }
.botao-p { height: 38px; padding: 0 20px; font-size: 13px; }

/* ── Barra superior ── */
.topo { position: sticky; top: 0; z-index: 20; height: var(--topo); background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo-conteudo { max-width: var(--largura); height: 100%; margin: 0 auto; padding: 0 var(--margem); display: flex; align-items: center; gap: 32px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); }
.marca-nome { font-weight: 700; letter-spacing: 0.1em; font-size: 14px; }
.marca-nome em { font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--agua); margin-left: 6px; }
.nav { display: flex; gap: 24px; margin-left: 8px; }
.nav a { font-size: 14px; color: var(--texto-medio); transition: color var(--dur); } .nav a:hover { color: var(--texto); }
.topo .botao { margin-left: auto; }

/* ── Blocos ── */
.bloco { max-width: var(--largura); margin: 0 auto; padding: 112px var(--margem); border-top: 1px solid var(--linha); }
.bloco.hero { border-top: 0; padding-top: 88px; padding-bottom: 88px; overflow: hidden; }
.cabeca-bloco { max-width: 900px; margin-bottom: 48px; }

/* ── Hero: título à esquerda, filme à direita; fitas de fluxo ao fundo ── */
.hero { position: relative; }
.fitas { position: absolute; left: 50%; top: -120px; width: 1900px; height: 980px; margin-left: -950px;
  z-index: 0; pointer-events: none; opacity: .9; }
.fitas .macio { animation: corre 46s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.fitas .fino { animation: corre 62s ease-in-out infinite alternate-reverse; transform-origin: 50% 50%; }
@keyframes corre { from { transform: translate3d(-24px, 8px, 0) scale(1); } to { transform: translate3d(28px, -12px, 0) scale(1.04); } }
.hero-grade, .tela-hero, .hero .fecho-hero { position: relative; z-index: 1; }
.hero h1 span { color: var(--agua); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 span { background-image: linear-gradient(96deg, var(--agua), var(--destaque) 72%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
/* ── Hero: título à esquerda, filme à direita ── */
.hero-grade { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 60px; align-items: center; }
.hero-grade > * { min-width: 0; }
.hero h1 { font-size: clamp(40px, 4.6vw, 68px); margin: 18px 0 28px; }
.hero .lede { font-size: 19px; max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 0; }
.hero .filme { margin: 0; width: 100%; }
.filme-quadro { position: relative; background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; box-shadow: 0 60px 130px rgba(0, 0, 0, 0.7); }
.filme-cab { margin: 0; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-medio); border-bottom: 1px solid var(--linha); }
.filme-cab .pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--agua);
  box-shadow: 0 0 0 4px rgba(63, 184, 200, 0.18); flex-shrink: 0; }
.filme-cab .fonte { margin-left: auto; color: var(--texto-fraco); }
.filme-quadro .clipe { border: 0; border-radius: 0; box-shadow: none; }
.filme-quadro video[hidden] { display: none; }
.ver-filme { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px;
  border-radius: var(--pilula); border: 1px solid var(--linha-forte); background: transparent;
  color: var(--texto); font: 500 13px var(--sans); cursor: pointer; transition: border-color var(--dur), background-color var(--dur); }
.ver-filme:hover { border-color: var(--agua); background: var(--elevado); }
.ver-filme[hidden] { display: none; }
.filme figcaption { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero .filme figcaption { font-size: 13px; }
.tela-hero { margin: 56px 0 0; }
.tela-hero[hidden] { display: none; }

.cinco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cinco div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cinco .rotulo { margin: 0 0 4px; }
.grande { font-family: var(--disp); font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.anos { display: grid; gap: 6px; font-size: 13px; }
.anos li { display: grid; grid-template-columns: 64px 1fr 84px; align-items: center; gap: 12px; }
.anos li span { color: var(--texto-medio); } .anos li span small { margin-left: 2px; }
.anos li i { display: block; height: 14px; width: var(--w); background: var(--destaque); border-radius: 1px; }
.anos li b { text-align: right; font-weight: 500; }

/* ── Laboratório (vitrine com telas reais) ── */
.vitrine { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 32px 0; border-top: 1px solid var(--linha); }
.vitrine-inv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.vitrine-inv .vitrine-tela { order: 2; }
.vitrine-tela { margin: 0; }
.vitrine-tela img, .vitrine-larga img, .tela img { width: 100%; height: auto; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.vitrine-texto p { color: var(--texto-medio); font-size: 17px; margin: 0; max-width: 46ch; }
.vitrine-larga { margin: 0; padding: 32px 0 16px; border-top: 1px solid var(--linha); }
.casas-larga { padding: 32px 0 16px; border-top: 1px solid var(--linha); }
.casas-larga .vitrine-texto { margin-bottom: 26px; }
.casas-larga .vitrine-texto p { max-width: 84ch; }
.casas-larga .vitrine-tela { margin: 0; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 32px 0; }
.tres .icone { color: var(--agua); display: block; margin-bottom: 16px; }
.tres h3 { font-size: 22px; }
.tres p { color: var(--texto-medio); margin: 0; font-size: 15px; }
.fecho { font-family: var(--disp); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; margin: 24px 0 0; padding-top: 32px; border-top: 1px solid var(--linha); }

/* ── O dia ── */
.dia-grade { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: start; }
.dia-fixo { position: sticky; top: calc(var(--topo) + 24px); display: flex; flex-direction: column; }
.dia .cabeca-bloco { margin-bottom: 20px; }
.dia h2 { font-size: clamp(30px, 3.1vw, 46px); margin-bottom: 12px; }
.dia .lede { font-size: 17px; }
.mesa { margin: 0; box-shadow: var(--sombra); overflow: hidden; }
.mesa-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--linha); background: var(--painel-alto); font-size: 12px; color: var(--texto-medio); }
.mesa-titulo { min-width: 0; overflow-wrap: anywhere; } .mesa-titulo b { color: var(--texto); font-weight: 600; }
.mesa-relogio { font-size: 13px; color: var(--agua); font-weight: 500; }
.mesa-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 190px; }
#grafico { width: 100%; height: clamp(320px, 48vh, 520px); }
.mesa-lado { border-left: 1px solid var(--linha); padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--painel); min-width: 0; }
.mesa-kpi { display: flex; flex-direction: column; gap: 2px; } .mesa-kpi .rotulo { margin: 0; }
.mesa-valor { font-size: 18px; font-weight: 500; }
.mesa-diario { flex: 1; min-height: 0; display: flex; flex-direction: column; } .mesa-diario .rotulo { margin: 8px 0 4px; }
.mesa-diario ol { font-size: 11px; line-height: 1.5; color: var(--texto-medio); overflow: hidden; }
.mesa-diario li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mesa-diario li b { color: var(--texto); font-weight: 500; }
.passos { display: flex; flex-direction: column; gap: 40vh; padding: 20vh 0 30vh; }
.passo { opacity: 0.32; transition: opacity 240ms ease-out; max-width: 44ch; }
.passo.ativo { opacity: 1; }
.passo-hora { display: block; color: var(--agua); font-size: 13px; margin-bottom: 10px; }
.passo h3 { margin-bottom: 8px; } .passo p { color: var(--texto-medio); margin: 0; }

/* ── Por que confiar ── */
.razoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linha); }
.razao { padding: 36px 40px 36px 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; }
.razao:nth-child(odd) { border-right: 1px solid var(--linha); }
.razao:nth-child(even) { padding-left: 40px; padding-right: 0; }
.razao p { color: var(--texto-medio); margin: 0; max-width: 52ch; flex: 1; }
.razao code { font-size: 11px; color: var(--agua); overflow-wrap: anywhere; }

/* ── Resultados (a folha) ── */
.folha { padding: 28px; }
.folha-cabeca { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.folha-cabeca .selo { flex-shrink: 0; width: 40px; height: 40px; } .folha-cabeca > div { min-width: 0; }
.folha-marca { font-size: 12px; letter-spacing: 0.08em; color: var(--texto-medio); } .folha-marca b { color: var(--texto); }
.folha-carimbo { font-size: 11px; color: var(--texto-fraco); margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.folha .cinco { padding: 24px 0; border-bottom: 1px solid var(--linha); }
.folha-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; padding: 24px 0; }
.folha-totais { display: grid; gap: 16px; } .folha-totais div { display: flex; flex-direction: column; gap: 2px; } .folha-totais .rotulo { margin: 0; }
.folha-totais b { font-family: var(--disp); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.folha-nota { font-size: 13px; color: var(--texto-fraco); border-top: 1px solid var(--linha); padding-top: 16px; margin: 0; }
.nao { margin-top: 88px; }
.nao-linha { font-family: var(--disp); font-size: clamp(30px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; margin: 0 0 6px; color: var(--texto-fraco); }
.nao-linha s { text-decoration-color: var(--baixa); text-decoration-thickness: 3px; }
.nao-sim { max-width: 40ch; margin: 28px 0 0; font-family: var(--disp); font-size: 23px; font-weight: 600; letter-spacing: -0.025em; color: var(--texto); }

/* ── Vídeo ── */
.clipe { width: 100%; height: auto; display: block; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); background: var(--painel); }
.tela-hero { margin: 0 0 40px; }
.filme { margin: 0 0 56px; }
.filme .clipe { cursor: pointer; }
.tela-hero .clipe { box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); }

/* ── Terminal ── */
.tela { margin: 0 0 40px; } .tela:last-child { margin-bottom: 0; }
.tela figcaption { font-size: 14px; color: var(--texto-medio); margin-top: 14px; max-width: 100ch; } .tela figcaption b { color: var(--texto); }

/* ── Planos ── */
.tabela-planos { width: 100%; min-width: 760px; border-collapse: collapse; }
.tabela-planos th, .tabela-planos td { padding: 14px 16px; border-top: 1px solid var(--linha); text-align: center; vertical-align: middle; }
.tabela-planos thead th { border-top: 0; padding-bottom: 20px; vertical-align: bottom; }
.tabela-planos thead th .rotulo { margin-bottom: 4px; }
.tabela-planos thead th b { font-size: 18px; font-weight: 600; display: block; }
.tabela-planos tbody th { text-align: left; font-weight: 400; font-family: var(--sans); color: var(--texto-medio); font-size: 14px; }
.tabela-planos tbody td { color: var(--destaque); font-size: 13px; }
.tabela-planos tbody tr:last-child th, .tabela-planos tbody tr:last-child td { border-bottom: 1px solid var(--linha); }
.col-destaque { background: var(--destaque-suave); }
.linha-preco td { padding: 20px 16px; }
.linha-preco b { display: block; font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--texto); } .linha-preco small { display: block; margin-top: 4px; }
.fundadores { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 40px; padding: 32px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.fundadores-preco { font-family: var(--disp); font-size: 23px; font-weight: 700; margin: 4px 0 8px; letter-spacing: -0.025em; }
.fundadores-preco .num { margin-left: 0.2em; }
.fundadores p:last-child { margin: 0; color: var(--texto-medio); }

/* ── Carta do fundador ── */
.carta-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.carta-foto { margin: 0; max-width: 380px; position: sticky; top: calc(var(--topo) + 24px); }
.carta-foto img { width: 100%; height: auto; border-radius: 2px; border: 1px solid var(--linha); filter: contrast(1.02); }
.carta-foto figcaption { font-size: 11px; color: var(--texto-fraco); margin-top: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.carta-texto { max-width: 62ch; }
.carta-texto p { font-size: 19px; line-height: 1.55; color: var(--texto-medio); margin: 0 0 1.1em; }
.carta-texto strong { color: var(--texto); font-weight: 600; }
.carta-destaque { color: var(--texto) !important; font-family: var(--disp); font-weight: 600; font-size: 24px !important; line-height: 1.3 !important; letter-spacing: -0.015em; padding: 8px 0 8px 24px; border-left: 3px solid var(--destaque); margin: 28px 0 !important; }
.triade { color: var(--texto) !important; font-family: var(--disp); font-weight: 700; font-size: 26px !important; line-height: 1.3 !important; letter-spacing: -0.02em; margin: 36px 0 32px !important; }
.assinatura { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--linha); padding-top: 20px; margin: 0 !important; }
.assinatura b { color: var(--texto); font-family: var(--disp); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.assinatura span { font-size: 12px; color: var(--texto-fraco); letter-spacing: 0.06em; }

/* ── Momento: 光勇 ── */
.momento { text-align: center; padding: 96px var(--margem); }
.kanji { font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", "Noto Serif CJK JP", serif; font-size: clamp(120px, 22vw, 300px); line-height: 1; letter-spacing: 0.08em; margin: 0 0 24px; color: var(--texto); }
.momento-texto { margin: 0 auto; max-width: 48ch; color: var(--texto-medio); font-size: 18px; }
.momento-texto b { color: var(--texto); letter-spacing: 0.1em; }

/* ── Perguntas ── */
.perguntas { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--linha); }
.perguntas > div { padding: 24px 0; border-bottom: 1px solid var(--linha); }
.perguntas dt { font-weight: 600; font-size: 18px; margin-bottom: 8px; letter-spacing: -0.01em; }
.perguntas dd { margin: 0; color: var(--texto-medio); font-size: 15px; max-width: 56ch; }

/* ── Copy Trade ── */
.copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; margin-top: 56px; padding: 36px 40px; background: var(--painel); border: 1px solid var(--linha); border-left: 3px solid var(--destaque); border-radius: var(--raio); }
.copy h3 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 14px; }
.copy p { color: var(--texto-medio); margin: 0 0 12px; max-width: 62ch; }
.copy-texto { grid-row: span 2; }
.copy strong { color: var(--texto); }
.copy-nota { font-size: 15px; color: var(--texto-fraco) !important; }
.copy-ast { color: var(--destaque); font-weight: 700; }
.copy-pe { font-family: var(--mono); font-size: 12px; color: var(--texto-fraco) !important; margin: 0 !important; padding-top: 16px; border-top: 1px solid var(--linha); }

/* ── Lançamento ── */
.para-quem { margin-top: 16px; color: var(--texto); font-size: 18px; }
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--linha); padding-top: 32px; counter-reset: etapa; }
.etapas li { display: flex; flex-direction: column; gap: 8px; }
.etapa-n { font-family: var(--disp); font-size: 42px; font-weight: 700; letter-spacing: -0.04em; color: var(--agua); line-height: 1; margin-bottom: 8px; }
.etapas h3 { font-size: 20px; margin: 0; }
.etapas p { color: var(--texto-medio); margin: 0; font-size: 15px; }
.lancamento-pe { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--linha); }
.lancamento-pe p { margin: 0; color: var(--texto-medio); max-width: 66ch; }

/* ── Janela da vaga ── */
.janela { width: min(880px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; color: var(--texto); background: var(--fundo); border: 1px solid var(--linha-forte); border-radius: 18px; box-shadow: var(--sombra); overflow: auto; }
.janela::backdrop { background: rgba(4, 5, 7, 0.72); backdrop-filter: blur(3px); }
.janela-corpo { position: relative; padding: 40px 44px 44px; }
.janela-corpo h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 8px 0 14px; }
.janela-corpo .lede { font-size: 17px; margin-bottom: 32px; }
.janela-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font: 400 24px/1 var(--sans); color: var(--texto-medio); background: transparent; border: 1px solid var(--linha); border-radius: var(--pilula); cursor: pointer; }
.janela-x:hover { color: var(--texto); border-color: var(--linha-forte); }

/* ── Acesso ── */
.formulario { max-width: 820px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.campos label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--texto-fraco); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.campo-largo { grid-column: 1 / -1; }
input, select, textarea { font: 400 16px var(--sans); color: var(--texto); background: transparent; border: 0; border-bottom: 1px solid var(--linha-forte); border-radius: 0; padding: 10px 0; width: 100%; transition: border-color var(--dur); }
select { background: var(--fundo); }
input:focus, select:focus, textarea:focus { border-bottom-color: var(--destaque); outline: none; }
textarea { resize: vertical; }
.form-rodape { display: flex; align-items: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.form-estado { margin: 0; font-size: 12px; color: var(--texto-fraco); }

/* ── Rodapé ── */
.rodape { max-width: var(--largura); margin: 0 auto; padding: 48px var(--margem) 64px; border-top: 1px solid var(--linha); display: grid; grid-template-columns: 320px minmax(0, 1fr) 220px; gap: 32px; align-items: start; }
.rodape-marca { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.06em; color: var(--texto-medio); } .rodape-marca b { color: var(--texto); } .rodape-marca .selo { flex-shrink: 0; }
.rodape-legal { font-size: 12px; color: var(--texto-fraco); margin: 0; }
.rodape-meta { font-size: 11px; color: var(--texto-fraco); text-align: right; margin: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anos li i, .passo { transition: none; } .fitas .macio, .fitas .fino { animation: none; } }

/* ── Responsivo ── */
@media (max-width: 1100px) {
  :root { --margem: 28px; }
  .fitas { width: 1400px; margin-left: -700px; height: 720px; top: -80px; }
  .nav { display: none; }
  .bloco { padding-top: 80px; padding-bottom: 80px; }
  .dia-grade, .vitrine, .vitrine-inv, .hero-grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dia-fixo { position: sticky; top: calc(var(--topo) + 8px); z-index: 5; background: var(--fundo); padding-bottom: 8px; }
  .dia .cabeca-bloco { margin-bottom: 12px; }
  .dia .lede { display: none; }
  .copy { padding: 28px; grid-template-columns: minmax(0, 1fr); }
  .copy-texto { grid-row: auto; }
  .janela-corpo { padding: 32px 24px 36px; }
  .carta-grade { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .carta-foto { position: static; max-width: 360px; }
  .vitrine-inv .vitrine-tela { order: 0; }
  .tres, .razoes { grid-template-columns: minmax(0, 1fr); }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lancamento-pe { flex-direction: column; align-items: flex-start; }
  .perguntas { grid-template-columns: minmax(0, 1fr); }
  .razao, .razao:nth-child(even) { padding: 28px 0; border-right: 0; }
  .razao:nth-child(odd) { border-right: 0; }
  .mesa-corpo { grid-template-columns: minmax(0, 1fr); }
  .mesa-lado { display: none; }
  #grafico { height: clamp(260px, 36vh, 340px); }
  .passos { gap: 40vh; padding: 12vh 0 30vh; }
  .cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .folha-grade { grid-template-columns: minmax(0, 1fr); }
  .rodape { grid-template-columns: minmax(0, 1fr); } .rodape-meta { text-align: left; }
}
@media (max-width: 640px) {
  :root { --margem: 18px; }
  .fitas { width: 900px; margin-left: -450px; height: 560px; opacity: .75; }
  .filme figcaption { gap: 10px; }
  .filme-cab .fonte { display: none; }
  .topo { gap: 12px; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fundadores { flex-direction: column; align-items: flex-start; }
  .hero-cta .botao, .lancamento-pe .botao, .fundadores .botao { width: 100%; max-width: 100%; white-space: normal; height: auto; min-height: 52px; padding: 12px 20px; text-align: center; }
  .etapas { grid-template-columns: minmax(0, 1fr); }
}