/* Site da REK · direção C, "Objeto e luz" (escolhida pelo Richard em 19/10/2026).
   Régua: docs/brandbook/BRANDBOOK-REK.pdf e docs/MARCA.md §9.
   Marinho e branco; o ouro #ad9551 só em desenho (o ponto); o #6f5c28 só como texto pequeno sobre claro.
   As fotos são de objeto, feitas para a REK, com o sim do Richard. Na história da página inicial, objetos realistas e
   fundo vivo (luz e poeira), por decisão do Richard em 21 e 22/10/2026; fora dela, sem fundo animado.
   Desde a versão de 22/10/2026, a página inicial roda um programa pequeno, nosso (/js/cena.js), só para a história. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fontes/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fontes/inter.woff2") format("woff2");
}

:root {
  --marinho: #0b1c37;
  --marinho-2: #102544;
  --palco: #030e1f;               /* o fundo do palco da história (o escuro da foto do palco) */
  --branco: #ffffff;
  --papel: #f6f6f4;
  --ouro: #ad9551;
  --ouro-texto: #6f5c28;
  --apoio: #414e63;
  --claro: rgba(255, 255, 255, 0.84);
  --claro-2: rgba(255, 255, 255, 0.64);
  --linha: rgba(11, 28, 55, 0.14);
  --linha-clara: rgba(255, 255, 255, 0.22);
  --titulo: "Archivo", "Arial Narrow", Arial, sans-serif;
  --corpo: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --largura: 1240px;
  --margem: clamp(20px, 4.5vw, 56px);
  --secao: clamp(72px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--branco); color: var(--marinho);
  font-family: var(--corpo); font-size: 1rem; line-height: 1.6; overflow-x: hidden;
}
@media (min-width: 768px) { body { font-size: 1.0625rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.04; max-width: 17ch; }
h3 { font-size: 1.5rem; line-height: 1.12; }

.envelope { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }
.secao { padding: var(--secao) 0; }
.secao--papel { background: var(--papel); }
.secao--marinho { background: var(--marinho); color: var(--branco); }
.sem-quebra { white-space: nowrap; }

/* o grão fino do marinho, como nas peças de rede: ruído, nunca padrão de linhas */
.grao { position: relative; isolation: isolate; }
.grao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/marca/grao.webp"); background-size: 256px; opacity: 0.09; mix-blend-mode: soft-light;
}

.nota {
  display: flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ouro-texto); margin: 0 0 20px;
}
.secao--marinho .nota, .abertura .nota, .rodape .nota { color: var(--claro-2); }
.faixa-foto .nota { color: var(--branco); }
.ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ouro); }
.chamada { font-size: 1.1875rem; line-height: 1.55; color: var(--apoio); max-width: 36rem; margin-top: 24px; }
.secao--marinho .chamada { color: var(--claro); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px;
  border-radius: 999px; border: 2px solid var(--marinho); background: var(--marinho); color: var(--branco);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
}
.botao:hover { background: #172d52; border-color: #172d52; }
.botao--claro { background: var(--branco); border-color: var(--branco); color: var(--marinho); }
.botao--claro:hover { background: #e7e9ee; border-color: #e7e9ee; }
.botao--vazado { background: transparent; border-color: var(--linha-clara); color: var(--branco); }
.botao--vazado:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--branco); }
.botao--contorno { background: transparent; border-color: var(--marinho); color: var(--marinho); }
.botao--contorno:hover { background: var(--marinho); color: var(--branco); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--branco); color: var(--marinho); padding: 10px 14px; border-radius: 4px; }
.pular:focus { top: 12px; }

/* ---------- abertura: texto no marinho, foto do objeto ao lado ---------- */
.abertura { position: relative; display: grid; background: var(--marinho); color: var(--branco); }
/* a coluna não pode crescer além da tela por causa do menu (ele rola dentro dele mesmo): a página rolava de lado em 360 px */
.abertura > * { min-width: 0; }
.abertura__texto { display: flex; flex-direction: column; padding: 22px var(--margem) 56px; }
.abertura__miolo { padding-top: 40px; }
.abertura h1 { font-size: clamp(2.5rem, 1rem + 3.2vw, 4.25rem); line-height: 0.98; }
.abertura h1 span { display: block; }
.abertura h1 .depois { color: var(--claro-2); }
.abertura__lead { font-size: 1.1875rem; line-height: 1.55; color: var(--claro); max-width: 32rem; margin: 30px 0 34px; }
.abertura__foto { position: relative; height: 440px; overflow: hidden; background: var(--marinho-2); }
.abertura__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.abertura--simples .abertura__miolo { padding-bottom: 24px; }

.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.topo__marca { display: block; flex: none; padding: 6px 0; } /* o logo nunca encolhe por causa do menu */
.topo__marca img { width: var(--logo, 84px); }
.topo__menu {
  flex-basis: 100%; display: flex; gap: 6px 16px; overflow-x: auto; white-space: nowrap;
  font-size: 0.875rem; font-weight: 500; padding-top: 6px; border-top: 1px solid var(--linha-clara);
}
.topo__menu a { text-decoration: none; color: var(--claro); padding: 10px 0; }
.topo__menu a:hover, .topo__menu a[aria-current="page"] { color: var(--branco); text-decoration: underline; }
/* o grupo da direita tem a altura do logo (com o respiro dele) e começa na mesma linha do topo: os dois ficam centrados entre si */
.topo__direita { position: absolute; z-index: 2; top: 22px; right: var(--margem); height: calc(var(--logo, 84px) * 0.712 + 12px); display: flex; align-items: center; gap: 10px; }
.topo__acao { min-height: 46px; padding: 10px 20px; font-size: 0.9375rem; }
/* os atalhos do topo: discretos, só o desenho, em branco a 84%; o cursor ou o foco acendem */
.redes { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--claro); transition: color 0.2s, background 0.2s; }
.redes a:hover, .redes a:focus-visible { color: var(--branco); background: rgba(255, 255, 255, 0.1); }
.redes .icone { width: 19px; height: 19px; }
@media (max-width: 1099px) { .redes__whatsapp { display: none; } }
@media (max-width: 599px) {
  /* no celular, o logo e o botão encolhem um pouco para os atalhos caberem sem encostar no logo */
  :root { --logo: 64px; }
  .topo__direita { gap: 4px; }
  .topo__acao { min-height: 42px; padding: 8px 14px; font-size: 0.875rem; }
  .redes { gap: 0; }
  .redes a { width: 34px; height: 34px; }
  .redes .icone { width: 17px; height: 17px; }
}
/* celular estreito: o e-mail sai do topo; no bem estreito (até 359 px), os atalhos todos. Continuam no contato e no rodapé */
@media (max-width: 374px) { .redes__email { display: none; } }
@media (max-width: 359px) { .topo__direita .redes { display: none; } }

@media (max-width: 599px) {
  .topo { padding-right: 0; }
  .topo__acao { padding: 10px 16px; }
  .abertura__foto { height: 380px; }
}
@media (min-width: 900px) {
  .abertura { grid-template-columns: 1.05fr 0.95fr; min-height: min(880px, 100vh); }
  .abertura--simples { grid-template-columns: 1fr; min-height: 0; }
  .abertura__texto { padding: 28px 64px 72px max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem))); }
  .abertura--simples .abertura__texto { padding-right: var(--margem); }
  .abertura__miolo { margin: auto 0; padding-top: 64px; }
  .abertura__foto { height: auto; }
  .topo { flex-wrap: nowrap; padding-right: 0; }
  :root { --logo: 88px; }
  .topo__menu { flex-basis: auto; border-top: 0; padding: 0; gap: 26px; font-size: 0.9375rem; overflow: visible; }
  .topo__direita { top: 28px; right: 32px; }
  .abertura--simples .topo__direita { right: max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem))); }
  .abertura--simples .topo { padding-right: 420px; }
  /* na abertura de duas colunas (Quem somos), o topo atravessa as duas, como na página inicial: o menu não cabe na coluna do texto */
  .abertura:not(.abertura--simples) .topo { position: absolute; z-index: 2; top: 28px; left: max(var(--margem), calc((100vw - var(--largura)) / 2 + var(--margem))); right: 0; }
  .abertura:not(.abertura--simples) .abertura__texto { position: relative; z-index: 2; padding-top: 120px; } /* acima da foto, para o menu passar por cima dela */
}

/* ---------- duas colunas: texto e foto ---------- */
.duas { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .duas { grid-template-columns: 1fr 1fr; gap: 80px; } .duas--foto-antes .foto-alta { order: -1; } }
.foto-alta { aspect-ratio: 4 / 5; overflow: hidden; background: var(--marinho); }
.foto-alta img { width: 100%; height: 100%; object-fit: cover; }
.marcas { display: grid; gap: 18px; margin-top: 36px; }
.marcas li { position: relative; padding-left: 36px; font-size: 1.1875rem; line-height: 1.45; }
.marcas li::before { content: ""; position: absolute; left: 0; top: 0.36em; width: 15px; height: 15px; border: 2.5px solid var(--marinho); }
.depois-da-lista { margin-top: 28px; color: var(--apoio); max-width: 34rem; }

/* ---------- faixa com foto (a promessa) ---------- */
.faixa-foto { position: relative; color: var(--branco); background: var(--marinho); overflow: hidden; }
.faixa-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.faixa-foto__veu { position: relative; background: rgba(11, 28, 55, 0.66); padding: clamp(96px, 12vw, 168px) 0; }
.frase-grande { font-family: var(--titulo); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 6.4rem); line-height: 0.96; max-width: 11ch; margin: 0; text-wrap: balance; }
.faixa-foto__texto { font-size: 1.25rem; line-height: 1.55; color: var(--branco); max-width: 34rem; margin: 32px 0 0; }

/* ---------- as três frentes ---------- */
.cartoes { display: grid; gap: 40px; margin-top: 56px; }
@media (min-width: 900px) { .cartoes { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.cartao__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--marinho); }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; }
.cartao .nota { margin: 24px 0 10px; }
.cartao h3 { margin-bottom: 12px; }
.cartao p:last-child { color: var(--apoio); margin: 0; }

/* ---------- método REK ---------- */
.metodo { display: grid; gap: 48px; margin-top: 56px; }
@media (min-width: 900px) { .metodo { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.etapa__letra { font-family: var(--titulo); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(8.5rem, 5rem + 12vw, 15.5rem); line-height: 0.78; margin: 0 0 28px; color: var(--branco); }
.etapa h3 { font-size: 1.75rem; margin-bottom: 10px; }
.etapa p { color: var(--claro); }
.etapa p.etapa__letra { color: var(--branco); }
.etapa__recebe { margin: 0; }
.etapa p.etapa__recebe { color: var(--branco); font-weight: 600; }
.lado-cliente { margin-top: 80px; background: var(--branco); color: var(--marinho); padding: 32px 24px; display: grid; gap: 28px; }
@media (min-width: 900px) { .lado-cliente { grid-template-columns: 1fr 1.6fr; gap: 56px; padding: 52px; } }
.lado-cliente h3 { font-size: 2.1rem; line-height: 1.04; }
.lado-cliente > div > p { color: var(--apoio); margin: 14px 0 0; }
.lista-n { display: grid; gap: 22px; counter-reset: n; }
.lista-n li { counter-increment: n; display: grid; grid-template-columns: 60px 1fr; font-size: 1.1875rem; }
.lista-n li::before { content: "0" counter(n); font-family: var(--titulo); font-weight: 700; font-size: 1.75rem; line-height: 1; }
.lista-n strong { font-weight: 600; }

/* ---------- quem somos (chamada na página inicial) ---------- */
.destaque { font-family: var(--titulo); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.12; max-width: 18ch; margin: 0 0 24px; }
.texto-corrido p { color: var(--apoio); font-size: 1.125rem; max-width: 36rem; }
.texto-corrido p.destaque { color: var(--marinho); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); }

/* ---------- contato ---------- */
.contato { text-align: center; }
.contato .nota { justify-content: center; }
.contato h2 { margin: 0 auto; max-width: none; font-size: clamp(2.4rem, 1.2rem + 3.8vw, 5.4rem); }
.contato .chamada { margin: 24px auto 0; }
.contato .acoes { justify-content: center; margin-top: 36px; }
.canais { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 56px; margin-top: 56px; }
.canais li { display: flex; flex-direction: column; align-items: center; }
.canal__icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: var(--papel); color: var(--marinho); }
.canal__icone .icone { width: 20px; height: 20px; }
.canais .nota { margin: 0 0 4px; }
.canais a { font-size: 1.1875rem; font-weight: 500; display: inline-block; padding: 6px 0; }

/* ---------- quem somos (página) ---------- */
.credencial { background: var(--papel); padding: 32px; }
.credencial h3 { font-size: 1.375rem; margin-bottom: 6px; }
.credencial .numero { font-weight: 600; margin-bottom: 16px; }
.credencial p:last-child { color: var(--apoio); margin: 0; }
.valores { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 720px) { .valores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .valores { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.valores li { background: var(--papel); padding: 28px; }
.valores h3 { font-size: 1.25rem; margin-bottom: 8px; }
.valores p { color: var(--apoio); margin: 0; }
.nao-somos { display: grid; gap: 16px; margin-top: 36px; }
.nao-somos li { position: relative; padding-left: 28px; font-size: 1.1875rem; max-width: 46rem; }
.nao-somos li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--marinho); }
.proposito { padding: clamp(96px, 12vw, 160px) 0; }
.proposito .frase-grande { max-width: 19ch; font-size: clamp(2.3rem, 1.2rem + 3.2vw, 4.6rem); line-height: 1.02; }

/* ---------- privacidade ---------- */
.politica { max-width: 46rem; }
.politica h2 { font-size: 1.5rem; margin-top: 44px; max-width: none; }
.politica h2:first-child { margin-top: 0; }
.politica ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.politica ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--marinho); }
.politica .atualizada { color: var(--apoio); font-size: 0.9375rem; }

/* ---------- não encontrado ---------- */
.abertura--perdido { min-height: 72vh; }

/* ---------- rodapé ---------- */
.rodape { background: var(--marinho); color: var(--branco); padding: 64px 0 104px; font-size: 0.9375rem; }
.rodape__grade { display: grid; gap: 36px; }
@media (min-width: 900px) { .rodape__grade { grid-template-columns: 1.2fr 1.3fr 1.3fr 0.8fr; gap: 40px; } }
.rodape__marca img { width: 120px; }
.rodape p { margin: 0 0 6px; color: var(--claro); }
.rodape a { color: var(--branco); display: inline-block; padding: 7px 0; }
.rodape__links { display: flex; flex-direction: column; align-items: flex-start; }
.rodape__base { margin-top: 40px; }
.rodape__base p { font-size: 0.8125rem; padding-top: 20px; border-top: 1px solid var(--linha-clara); color: var(--claro-2); }
.rodape__base p + p { padding-top: 0; border-top: 0; }

/* ---------- WhatsApp sempre à mão ---------- */
.flutuante {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px;
  background: var(--branco); color: var(--marinho); border: 2px solid var(--marinho); border-radius: 999px;
  font-weight: 600; text-decoration: none; box-shadow: 0 2px 10px rgba(11, 28, 55, 0.22);
}
.flutuante:hover { background: #e7e9ee; }
@media (max-width: 599px) { .flutuante { right: 12px; bottom: 12px; padding: 10px 16px; font-size: 0.9375rem; } }
@media print { .flutuante, .topo__menu, .topo__acao { display: none; } }

/* ---------- as duas frentes além da empresa ---------- */
.secundarias { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .secundarias { grid-template-columns: 1fr 1fr; gap: 28px; } }
.secundaria { background: var(--papel); padding: 28px 32px; }
.secundaria .nota { margin-bottom: 10px; }
.secundaria h3 { font-size: 1.375rem; margin-bottom: 8px; }
.secundaria p:last-child { color: var(--apoio); margin: 0; }
.nota-juridico { margin: 28px 0 0; color: var(--apoio); }
.nota-juridico strong { color: var(--marinho); font-weight: 600; }

/* ===================== 22/10/2026: a história do Método REK (direção A, aprovada pelo Richard) =====================
   A página inicial abre com a história: o palco fica preso na tela, os papéis caem, o Raio-X da REK separa por setor,
   as pastas recebem e o arquivo fecha "Em dia". Os objetos são fotos já feitas com a luz do palco e quem os move é o
   /js/cena.js (o programa pequeno, nosso). Decisão do Richard em 21 e 22/10: objetos realistas e fundo vivo no site. */
.palco__topo { position: absolute; z-index: 6; top: 0; left: 0; right: 0; padding: 22px var(--margem) 0; color: var(--branco); }
.palco__topo .topo__direita { top: 22px; }
.capitulo h1 { font-size: clamp(2.6rem, 1rem + 3.2vw, 4.1rem); line-height: 0.98; }
.capitulo h2 { font-size: clamp(1.9rem, 1rem + 2vw, 3.1rem); line-height: 1.04; max-width: none; }
.capitulo .botao--claro { margin-top: 8px; }
/* o botão flutuante do WhatsApp some enquanto a história está na tela (ela tem os botões dela) */
.flutuante { transition: opacity 0.3s; }
html.na-historia .flutuante { opacity: 0; pointer-events: none; }
/* ---------- a história ---------- */
.historia { height: 820vh; }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--palco); color: var(--branco); }
/* o palco é foto (luz de verdade); o claro aparece no fim, quando a casa está em ordem */
/* o palco cobre a tela inteira, em qualquer largura: a foto (4:5) se repete espelhada lado a lado (espelho, foto,
   espelho, foto, espelho). Nas emendas o espelho continua a foto sem corte, e a emenda espelho|foto vira o refletor
   principal, posto em --x (60% da largura no computador, o meio no celular). Um arquivo só, nenhum peso a mais. */
.fundo { position: absolute; inset: 0; overflow: hidden; background: var(--palco); --alt: 100vh; --alt: 100svh; --x: 60vw; --sobe: 0px; }
.fundo i { position: absolute; top: var(--sobe); height: var(--alt); width: calc(var(--alt) * 0.8 + 1px); background: center / 100% 100% no-repeat; }
.fundo i:nth-child(1) { left: calc(var(--x) - var(--alt) * 2.4); }
.fundo i:nth-child(2) { left: calc(var(--x) - var(--alt) * 1.6); }
.fundo i:nth-child(3) { left: calc(var(--x) - var(--alt) * 0.8); }
.fundo i:nth-child(4) { left: var(--x); }
.fundo i:nth-child(5) { left: calc(var(--x) + var(--alt) * 0.8); }
.fundo i:nth-child(odd) { transform: scaleX(-1); }
.fundo--escuro i { background-image: url("/img/cena/palco.webp"); }
.fundo--claro i { background-image: url("/img/cena/palco-claro.webp"); }
.fundo--claro { opacity: 0; }
/* do lado do texto, um véu escuro que se desfaz em direção à cena: a letra fica sempre sobre o escuro */
.veu-texto { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 14, 31, 0.9) 0%, rgba(3, 14, 31, 0.72) 32%, rgba(3, 14, 31, 0) 52%); }
.luz-viva, .luz-cursor { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.luz-viva { background: radial-gradient(40% 55% at var(--lx, 60%) var(--ly, 30%), rgba(255, 238, 205, 0.13), transparent 70%); }
.luz-cursor { opacity: 0; transition: opacity 0.4s; background: radial-gradient(220px 220px at var(--cx, 50%) var(--cy, 50%), rgba(255, 240, 215, 0.16), transparent 70%); }
.palco.com-cursor .luz-cursor { opacity: 1; }
.poeira { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.cena { position: absolute; inset: 0; perspective: 1400px; pointer-events: none; }
.mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
/* will-change só de transform: "opacity" ali achataria o 3D dos objetos */
.obj { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.obj > img { position: absolute; left: 0; top: 0; translate: -50% -50%; max-width: none; }
.obj--papel > img { pointer-events: auto; cursor: pointer; }
/* a leitura do Raio-X: o setor aparece logo acima do papel enquanto a luz passa (é leitura de instrumento, não
   adesivo: fica fora do papel, em letra pequena e espaçada, e some quando o papel vai para o grupo) */
.etiqueta { backface-visibility: hidden; position: absolute; left: 0; top: 0; translate: -50% -100%; transform: translateZ(1px); padding: 3px 8px; border: 1px solid rgba(200, 225, 255, 0.5); border-radius: 2px; background: rgba(3, 14, 31, 0.72); color: #eaf2ff; font: 600 11px/1.2 var(--corpo); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0; }
/* o nome de cada grupo do Raio-X: uma legenda com um fio de ouro, fora dos papéis */
.obj--legenda span { position: absolute; left: 0; top: 0; translate: -50% -50%; display: grid; justify-items: center; gap: 7px; color: rgba(255, 255, 255, 0.94); font: 600 12px/1 var(--corpo); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 10px rgba(3, 14, 31, 0.95); }
.obj--legenda span::before { content: ""; width: 22px; height: 1px; background: var(--ouro); }
/* pastas, arquivo e bonsai ficam em pé no chão da foto: a origem do objeto é o pé dele */
/* o reflexo no piso molhado: a mesma foto, virada dentro da própria caixa (que começa no pé), sumindo para baixo */
.obj--pasta > img, .obj--arquivo > img, .obj--bonsai > img { translate: -50% -100%; filter: brightness(var(--luz, 1)) blur(var(--foco, 0px)); }
.obj--pasta > .reflexo, .obj--arquivo > .reflexo, .obj--bonsai > .reflexo { translate: -50% 0; transform: scaleY(-1); transform-origin: 50% 50%; opacity: 0.22; filter: brightness(var(--luz, 1)) blur(calc(1.5px + var(--foco, 0px))); -webkit-mask-image: linear-gradient(0deg, #000, transparent 45%); mask-image: linear-gradient(0deg, #000, transparent 45%); }
.sombra { position: absolute; left: 0; top: 0; height: 26px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
.pasta__cheia { opacity: 0; }
/* o nome do setor impresso na etiqueta branca que já está na foto da pasta: tinta escura, sem caixa por cima (o
   tamanho da letra vem do cena.js, para o nome mais longo caber na etiqueta) */
.obj--pasta span { position: absolute; left: 0; top: 0; translate: -50% -50%; transform: translateZ(1px); color: #1f2a3d; font-family: var(--corpo); font-weight: 600; line-height: 1; white-space: nowrap; filter: brightness(var(--luz, 1)); opacity: 0.92; }
/* o grão de filme por cima de todo o palco: fundo e objetos parecem da mesma câmera */
.palco::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("/marca/grao.webp") 0 0 / 256px; opacity: 0.08; mix-blend-mode: soft-light; }
/* o Raio-X da REK: uma faixa larga de luz fria que desce pela tela (não é fio: é luz com volume) */
.raio { position: absolute; left: 0; right: 0; top: 0; height: 120px; translate: 0 -200px; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(60% 50% at 62% 50%, rgba(200, 225, 255, 0.36), rgba(200, 225, 255, 0.08) 55%, transparent 75%); }

.textos { position: absolute; z-index: 3; left: var(--margem); top: 50%; translate: 0 -46%; width: min(520px, 38vw); display: grid; pointer-events: none; }
.capitulo { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(24px); visibility: hidden; transition: opacity 0.6s, transform 0.6s, visibility 0.6s; }
.capitulo.ativo { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.capitulo.saiu { transform: translateY(-24px); }
.capitulo .nota { color: var(--claro-2); }
.capitulo .lead { color: var(--claro); margin-top: 20px; }
.capitulo .botao { margin-top: 6px; }
.dica { margin-top: 26px; font-size: 0.9375rem; color: var(--claro); }
.so-toque { display: none; }
@media (hover: none) { .so-cursor { display: none; } .so-toque { display: inline; } }
.dores { margin-top: 24px; display: grid; gap: 10px; }
.dores li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; color: var(--claro); opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; }
.dores li.vista { opacity: 1; transform: none; }
.dores li::before { content: ""; width: 9px; height: 9px; margin-top: 9px; border-radius: 50%; background: var(--ouro); }
.promessa { margin-top: 22px; font-family: var(--titulo); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }

.trilho { position: absolute; z-index: 3; left: var(--margem); bottom: 26px; display: flex; align-items: center; gap: 18px; }
.trilho__letras { display: flex; gap: 10px; }
.trilho__letras li { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.55); font-family: var(--titulo); font-size: 1rem; opacity: 0.68; transition: background 0.4s, color 0.4s, opacity 0.4s; }
.trilho__letras li.acesa { opacity: 1; background: var(--branco); color: var(--marinho); border-color: var(--branco); }
.trilho__numero { margin: 0; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--claro); font-variant-numeric: tabular-nums; }
.controles { position: absolute; z-index: 3; right: var(--margem); bottom: 24px; display: flex; gap: 10px; }
.controle { min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(3, 14, 31, 0.5); color: var(--branco); font: 500 0.8125rem/1.2 var(--corpo); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }
.controle:hover { background: rgba(11, 28, 55, 0.8); border-color: var(--branco); }
.controle .curto { display: none; }
/* 28/10/2026, pedido dele: sem animação, o "Ver com animação" fica preenchido, para ser visto (a escolha não é guardada). */
html.sem-animacao [data-sem-animacao] { background: var(--branco); color: var(--marinho); border-color: var(--branco); font-weight: 600; }
html.sem-animacao [data-sem-animacao]:hover { background: var(--papel); border-color: var(--papel); }

/* sem animação ("reduzir movimento", o botão, ou o programa da cena que não rodou): a história vira texto parado
   sobre o palco. O cena.js marca "com-cena" no html ao começar; sem essa marca, a página nunca fica com o texto escondido. */
html:is(.sem-animacao, :not(.com-cena)) .historia { height: auto; }
html:is(.sem-animacao, :not(.com-cena)) .palco { position: relative; height: auto; padding: 150px 0 110px; }
html:is(.sem-animacao, :not(.com-cena)) .cena, html:is(.sem-animacao, :not(.com-cena)) .poeira, html:is(.sem-animacao, :not(.com-cena)) .raio, html:is(.sem-animacao, :not(.com-cena)) .luz-viva, html:is(.sem-animacao, :not(.com-cena)) .luz-cursor, html:is(.sem-animacao, :not(.com-cena)) .trilho, html:is(.sem-animacao, :not(.com-cena)) .dica { display: none; }
html:is(.sem-animacao, :not(.com-cena)) .fundo--claro { opacity: 1; }
/* parado, o palco fica da altura do texto todo: uma foto só, cobrindo tudo, sem emenda nem corte */
html:is(.sem-animacao, :not(.com-cena)) .fundo i { display: none; }
html:is(.sem-animacao, :not(.com-cena)) .fundo--claro { background: var(--palco) url("/img/cena/palco-claro.webp") 60% 0 / cover no-repeat; }
html:is(.sem-animacao, :not(.com-cena)) .textos { position: relative; top: auto; left: auto; right: auto; bottom: auto; translate: none; width: auto; max-width: 720px; margin: 0 var(--margem); display: block; }
html:is(.sem-animacao, :not(.com-cena)) .capitulo, html:is(.sem-animacao, :not(.com-cena)) .dores li { opacity: 1; transform: none; visibility: visible; transition: none; }
html:is(.sem-animacao, :not(.com-cena)) .capitulo { margin-bottom: 64px; }
html:is(.sem-animacao, :not(.com-cena)) .controles { top: 96px; bottom: auto; }



/* as páginas de dentro abrem com o mesmo palco da história: a foto encostada à direita, virada no espelho (o refletor
   fica junto da outra metade da página) e com a borda da esquerda se desfazendo no marinho, sem linha de corte em
   nenhuma largura de tela. A caixa da foto tem a altura da abertura e a proporção dela (4:5). */
.abertura .abertura__texto { background: #030e1f; }
.abertura .abertura__texto::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; z-index: -2; aspect-ratio: 4 / 5; pointer-events: none; background: linear-gradient(270deg, rgba(3, 14, 31, 0.9), rgba(3, 14, 31, 0.74) 50%, rgba(3, 14, 31, 0) 86%), url("/img/cena/palco.webp") center / 100% 100% no-repeat; transform: scaleX(-1); -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent); }
/* (a foto está virada: o véu escuro que sai da direita, aqui, fica do lado do texto na tela) */
/* no celular, a foto fica atrás do texto inteiro: um véu marinho chapado garante a leitura */
@media (max-width: 899px) {
  .abertura .abertura__texto { background-image: linear-gradient(rgba(3, 14, 31, 0.62), rgba(3, 14, 31, 0.62)), url("/img/cena/palco.webp"); background-size: auto, cover; background-position: center, 70% 30%; }
  .abertura .abertura__texto::after { display: none; }
}

/* ---------- o quadro das cinco frentes ---------- */
/* as cinco pastas: a lista à esquerda; à direita, a pasta sobre o couro, com a folha da frente escolhida */
.pastas { margin-top: 56px; display: grid; gap: 28px; }
@media (min-width: 900px) { .pastas { grid-template-columns: minmax(260px, 0.8fr) 1.2fr; gap: 56px; align-items: stretch; } }
.pastas__lista { display: grid; align-content: start; gap: 4px; }
.pastas__grupo { margin: 18px 0 6px; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ouro-texto); }
.pastas__grupo:first-child { margin-top: 0; }
.pastas__aba { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: center; min-height: 52px; padding: 10px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--apoio); font: 600 1.0625rem/1.3 var(--corpo); text-align: left; cursor: pointer; }
.pastas__aba::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(11, 28, 55, 0.22); transition: background 0.25s, transform 0.25s; }
.pastas__aba:hover { background: rgba(11, 28, 55, 0.05); color: var(--marinho); }
.pastas__aba[aria-selected="true"] { background: var(--branco); color: var(--marinho); box-shadow: 0 1px 2px rgba(11, 28, 55, 0.08), 0 8px 24px rgba(11, 28, 55, 0.08); }
.pastas__aba[aria-selected="true"]::before { background: var(--ouro); transform: scale(1.4); }
.pastas__aba:focus-visible { outline-color: var(--marinho); }
.pastas__palco { position: relative; min-height: 460px; border-radius: 28px; overflow: hidden; background: var(--marinho) url("/img/cena/palco-claro.webp") center / cover; display: grid; place-items: center; padding: 48px 28px; }
.pastas__pasta { position: absolute; width: min(300px, 62%); left: 50%; top: 50%; translate: -60% -54%; rotate: -4deg; filter: drop-shadow(10px 16px 16px rgba(0, 0, 0, 0.45)); }
.pastas__folha { position: relative; width: min(420px, 100%); margin-left: 12%; padding: 32px 32px 26px; border-radius: 4px; background: #fdfdfb; color: var(--marinho); rotate: 2deg; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25), 14px 20px 30px rgba(0, 0, 0, 0.35); animation: folha 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pastas__folha[hidden] { display: none; }
.pastas__folha h3 { margin-bottom: 12px; }
.pastas__folha p:last-child { margin: 0; color: var(--apoio); }
@keyframes folha { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pastas__folha { animation: none; } }
.pastas__palco { background-color: #030e1f; }
.pastas__pasta { width: min(230px, 46%); left: 38%; top: 54%; translate: -50% -50%; rotate: -3deg; }
@media (max-width: 760px) { .pastas__palco { min-height: 400px; padding: 36px 16px; } .pastas__folha { margin-left: 6%; padding: 24px 22px 20px; } }

/* ---------- o título do contato se preenche do contorno ao cheio enquanto a pessoa chega nele ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .preencher { color: transparent; -webkit-text-stroke: 1px var(--marinho); background: linear-gradient(var(--marinho), var(--marinho)) 0 0 / 0% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: preencher linear both; animation-timeline: view(); animation-range: entry 50% cover 35%; }
  }
}
@keyframes preencher {
  0% { background-size: 0% 100%; -webkit-text-stroke-color: var(--marinho); }
  80% { background-size: 100% 100%; -webkit-text-stroke-color: var(--marinho); }
  100% { background-size: 100% 100%; -webkit-text-stroke-color: transparent; }
}
/* ---------- a história no celular: a cena em cima, o texto embaixo ---------- */
@media (max-width: 760px) {
  .capitulo h2 { font-size: 1.55rem; }
  /* a foto sobe um quarto da tela para o chão dela ficar logo acima do texto (48% da altura) */
  /* no celular o refletor fica no meio e a foto sobe um quarto da tela (o chão logo acima do texto) */
  .fundo { --x: 50vw; --sobe: -24.5vh; }
  .veu-texto { display: none; }
  /* o topo do site, no celular, ganha um véu chapado para o menu não brigar com os papéis */
  .palco__topo { padding: 14px var(--margem) 2px; background: rgba(3, 14, 31, 0.82); }
  .palco__topo .topo__direita { top: 14px; }
  /* no celular o texto mora embaixo, sobre um véu marinho chapado (a regra de texto sobre foto do site) */
  .palco::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(rgba(3, 14, 31, 0), rgba(3, 14, 31, 0.8) 70px); pointer-events: none; }
  .textos { left: 20px; right: 20px; width: auto; top: auto; bottom: 78px; translate: none; }
  /* em celular baixo o texto do capítulo pode subir até a cena: o véu acompanha o topo do texto, não a tela */
  .textos::before { content: ""; position: absolute; z-index: -1; left: -20px; right: -20px; top: -56px; bottom: -78px; pointer-events: none; background: linear-gradient(rgba(3, 14, 31, 0), rgba(3, 14, 31, 0.86) 56px); }
  .capitulo { align-self: end; }
  .capitulo .lead { font-size: 0.9375rem; margin-top: 12px; }
  .dica { margin-top: 12px; font-size: 0.875rem; }
  .dores { gap: 4px; margin-top: 12px; font-size: 0.8125rem; line-height: 1.38; }
  .dores li::before { margin-top: 6px; }
  .promessa { font-size: 1.2rem; margin-top: 12px; }
  .capitulo .botao { min-height: 48px; padding: 10px 20px; font-size: 0.9375rem; }
  .trilho { left: 16px; bottom: 16px; gap: 10px; }
  .trilho__letras li { width: 34px; height: 34px; font-size: 0.875rem; }
  .trilho__numero { display: none; }
  .controles { right: 12px; bottom: 14px; gap: 6px; }
  .controle { padding: 8px 12px; font-size: 0.75rem; }
  .controle .longo { display: none; }
  .controle .curto { display: inline; }
  /* parado, no celular: o texto começa abaixo do topo do site (que é mais alto aqui) e dos dois botões */
  html:is(.sem-animacao, :not(.com-cena)) .palco { padding-top: 214px; }
  html:is(.sem-animacao, :not(.com-cena)) .controles { top: 150px; right: 20px; }
  .etiqueta { font-size: 9px; padding: 2px 6px; letter-spacing: 0.08em; }
  .obj--legenda span { font-size: 9px; letter-spacing: 0.1em; gap: 5px; }
  .obj--legenda span::before { width: 16px; }
}