/* site/css/site.css — site institucional do Temporama: ASCII/terminal minimalista com
   toques de pixel art, reaproveitando a MESMA linguagem de cores do app (mesmos nomes de
   tema, mesma fonte mono) só que num arquivo próprio, pequeno, sem depender do app.css
   inteiro — o site é 100% estático, publicado à parte (ver site/README no deploy).
   Tema muda pela tecla T (js/site.js) — cicla entre os blocos abaixo. */

:root {
    --bg: #000000; --panel: rgba(255,255,255,0.045); --panel-border: rgba(255,255,255,0.12);
    --text: #FFFFFF; --sec: rgba(235,235,245,0.62);
    --green: #30D158; --orange: #FF9F0A; --blue: #0A84FF; --red: #FF453A;
    --glow: rgba(48,209,88,0.45);
    --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --font-mono: 'JetBrains Mono', "SF Mono", monospace;
    --font-title: 'Barlow Condensed', sans-serif;
}
body.theme-cyberpunk {
    --bg: #050510; --panel: rgba(0,240,255,0.06); --panel-border: rgba(0,240,255,0.26);
    --text: #00F0FF; --sec: #FF9FB4; --green: #39FF14; --orange: #FF9F0A; --blue: #00F0FF; --red: #FF003C;
    --glow: rgba(57,255,20,0.4);
}
body.theme-brasil {
    --bg: #081C10; --panel: rgba(255,255,255,0.045); --panel-border: rgba(255,255,255,0.1);
    --text: #E8F5E9; --sec: #9BCBA2; --green: #FFF59D; --orange: #FFB300; --blue: #FFD60A; --red: #FF5252;
    --glow: rgba(255,214,10,0.35);
}
body.theme-atlantic {
    --bg: #0a110a; --panel: rgba(129,199,132,0.07); --panel-border: rgba(129,199,132,0.22);
    --text: #e8f5e9; --sec: #81c784; --green: #69f0ae; --orange: #FF9F0A; --blue: #00e5ff; --red: #ff5252;
    --glow: rgba(105,240,174,0.35);
}
body.theme-ocean {
    --bg: #000b18; --panel: rgba(128,222,234,0.07); --panel-border: rgba(128,222,234,0.22);
    --text: #e0f7fa; --sec: #80deea; --green: #00e676; --orange: #FF9F0A; --blue: #00b4d8; --red: #ff5252;
    --glow: rgba(0,230,118,0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; overflow-x: hidden; position: relative;
    background: var(--bg); color: var(--text); font-family: var(--font-ui);
    transition: background 0.4s ease, color 0.4s ease;
    /* Mesma blindagem do app (css/variables.css): touch-action:manipulation é a camada
       PRINCIPAL do bloqueio de pinça-zoom (site/js/site.js reforça o que só JS pega) —
       sem isso a pinça daria zoom na página em vez de abrir a Lupa. user-select:none
       junto trava a seleção em tudo que é "interface" (marca, nav, botões, LED, dicas,
       títulos decorativos) — reaberta seletivamente só no texto de verdade, abaixo. */
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
/* === backdrop ASCII do set: uma composição fixa (câmera+tripé, luz+C-stand, boom,
   monitor, claquete — montada em site/js/site.js, initSetBackdrop) que corre por
   TRÁS de toda a página, ancorada perto do "chão" da tela, e desliza na horizontal
   conforme o progresso TOTAL da rolagem — como se a câmera fizesse um travelling
   lento por um set comprido enquanto a pessoa lê. z-index negativo: fica atrás de
   todo conteúdo não-posicionado (texto, cards, seções) sem precisar de nada além
   disso — ver nota de empilhamento no comentário do body, acima. Fonte pequena de
   propósito: tipos miúdos dão "resolução" à silhueta sem virar bloco ilegível. */
.set-backdrop {
    position: fixed; left: 0; top: 68%; z-index: -1; margin: 0; pointer-events: none;
    white-space: pre; font-family: var(--font-mono); font-size: 7px; line-height: 1.35;
    letter-spacing: 0.01em; color: var(--sec); opacity: 0.16; will-change: transform;
}
@media (max-width: 650px) { .set-backdrop { font-size: 6px; opacity: 0.12; } }

/* grão sutil (fotoquímico, não pixel) sobre a página inteira — reforça "luz" sem
   competir com o conteúdo: opacidade baixíssima, sem animação (nada de flicker). */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); }
::selection { background: var(--green); color: #000; }

/* Texto válido pra selecionar/copiar: prosa de verdade, não marca nem controle */
.hero-tagline, .section-body p, .feature-card p, .callout p, .foot-credit {
    user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}

/* === indicadores fixos no canto, mesma linguagem do app (net-status / dica de atalhos) === */
.net-status {
    position: fixed; top: 14px; left: 14px; width: 8px; height: 8px; border-radius: 50%;
    z-index: 500; background: var(--sec); box-shadow: 0 0 6px currentColor; transition: background .3s, box-shadow .3s;
}
.net-status.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.net-status.offline { background: var(--orange); box-shadow: 0 0 6px var(--orange); animation: netPulse 1s infinite alternate; }
@keyframes netPulse { from { opacity: .5; } to { opacity: 1; } }

.shortcuts-hint {
    position: fixed; bottom: 14px; right: 14px; z-index: 500;
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--sec);
    background: rgba(0,0,0,0.4); border: 1px solid var(--panel-border); padding: 7px 11px; border-radius: 8px;
    backdrop-filter: blur(6px); pointer-events: none; opacity: 0.9;
}
.shortcuts-hint b { color: var(--green); }
@media (max-width: 650px) { .shortcuts-hint { left: 14px; right: 14px; text-align: center; } }

/* === header === */
.site-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 28px; backdrop-filter: blur(14px); background: rgba(0,0,0,0.35);
    border-bottom: 1px solid var(--panel-border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--green); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; color: var(--green);
    box-shadow: 0 0 14px var(--glow);
}
.brand-word { font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.14em; font-size: 0.95rem; text-transform: uppercase; }
.brand-clock { font-size: 0.7rem; color: var(--sec); letter-spacing: 0.05em; margin-top: 1px; }
.header-nav { display: flex; align-items: center; gap: 20px; font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em; flex-wrap: wrap; justify-content: flex-end; }
.header-nav a { color: var(--sec); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.header-nav a:hover { color: var(--text); border-color: var(--green); }
.header-nav .btn-cta { color: var(--bg); background: var(--green); padding: 8px 16px; border-radius: 6px; font-weight: 700; border-bottom: none; }
.header-nav .btn-cta:hover { filter: brightness(1.12); color: var(--bg); }

/* === hero === */
.hero { padding: 90px 28px 56px; text-align: center; position: relative; }
.hero::before {
    /* vinheta radial no topo — a "fonte de luz" da página, ecoando a cena vt-luz mais
       adiante na rolagem. Atrás do conteúdo, sem interferir em clique/seleção. */
    content: ''; position: absolute; top: -12%; left: 50%; width: 900px; max-width: 160vw;
    height: 480px; transform: translateX(-50%); pointer-events: none; z-index: -1;
    background: radial-gradient(circle, var(--glow) 0%, transparent 68%); opacity: 0.55;
}
.hero-ascii {
    font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.04em; line-height: 1;
    font-size: clamp(2.6rem, 9vw, 6.4rem); margin: 0 0 22px; color: var(--text);
    text-shadow: 0 0 30px var(--glow);
    -webkit-mask-image: radial-gradient(circle, #000 54%, transparent 60%);
    -webkit-mask-size: 7px 10px; -webkit-mask-repeat: repeat;
    mask-image: radial-gradient(circle, #000 54%, transparent 60%);
    mask-size: 7px 10px; mask-repeat: repeat;
}
.hero-tagline { font-family: var(--font-ui); font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--sec); max-width: 620px; margin: 0 auto 34px; line-height: 1.55; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
    font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 13px 26px; border-radius: 8px; border: 1px solid var(--panel-border); transition: all .2s; display: inline-block;
}
.btn-primary { background: var(--green); color: #000; border-color: transparent; font-weight: 700; }
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }

.hero-strip {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px;
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sec); opacity: 0.75;
}
.hero-strip-dot { color: var(--panel-border); }

.hero-acesso {
    margin: 22px 0 0; font-size: 0.76rem; letter-spacing: 0.02em; color: var(--sec); opacity: 0.85;
}
.hero-acesso a { color: var(--green); border-bottom: 1px solid transparent; transition: border-color .2s; }
.hero-acesso a:hover { border-color: var(--green); }

/* === LED ticker: mesma técnica pixelizada do LED de Notificações do app, arrastável
   (motor em site/js/site.js, initLedBanner — mesma ideia do initLedDrag do app, aqui em
   laço contínuo já que o banner nunca "desliga"). O transform vem inteiro do JS (rAF) —
   nada de @keyframes aqui, entraria em conflito com o inline style a cada quadro. === */
.led-banner {
    overflow: hidden; padding: 20px 0; background: rgba(0,0,0,0.5);
    border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border);
    cursor: grab; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.led-banner:active { cursor: grabbing; }
.led-banner-track {
    display: inline-block; white-space: pre; will-change: transform;
    font-family: var(--font-mono); font-weight: 800; font-size: 1.65rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--orange); opacity: 0.9;
    text-shadow: 0 0 4px currentColor, 0 0 16px currentColor;
    -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 58%);
    -webkit-mask-size: 5px 7px; -webkit-mask-repeat: repeat;
    mask-image: radial-gradient(circle, #000 52%, transparent 58%);
    mask-size: 5px 7px; mask-repeat: repeat;
}
@media (max-width: 650px) { .led-banner-track { font-size: 1.15rem; } }

/* === seções === */
section { padding: 80px 28px; max-width: 980px; margin: 0 auto; }
.section-kicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; display: block; }
.section-title { font-family: var(--font-title); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; margin: 0 0 22px; }
.section-body p { color: var(--sec); line-height: 1.75; font-size: 1.02rem; max-width: 680px; }

.fluxo-set {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px;
    font-size: 0.72rem; letter-spacing: 0.1em;
}
.fluxo-etapa {
    border: 1px solid var(--panel-border); border-radius: 6px; padding: 6px 12px;
    color: var(--sec); background: var(--panel);
}
.fluxo-etapa.fluxo-atual { color: var(--green); border-color: var(--green); box-shadow: 0 0 12px var(--glow); }
.fluxo-seta { color: var(--panel-border); }
.fluxo-legenda { color: var(--sec); opacity: 0.7; letter-spacing: 0.02em; text-transform: none; margin-left: 4px; }

.grid-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }
.feature-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--panel-border); border-radius: 12px; padding: 22px 20px; background: var(--panel);
}
.feature-tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--green); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; display: block; }
.feature-card h3 { margin: 0 0 10px; font-family: var(--font-title); font-size: 1.26rem; font-weight: 700; }
.feature-card p { margin: 0; color: var(--sec); font-size: 0.92rem; line-height: 1.6; }
.ascii-corner { position: absolute; top: 10px; right: 14px; font-family: var(--font-mono); font-size: 0.64rem; color: var(--panel-border); }

.callout {
    border: 1px dashed var(--panel-border); border-radius: 14px; padding: 26px; background: var(--panel);
    display: flex; gap: 18px; align-items: flex-start;
}
.callout-ic {
    width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;
    border: 1px solid var(--panel-border); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 1.4rem; color: var(--green);
}
.callout p { margin: 0; color: var(--sec); line-height: 1.65; }
.callout kbd { font-family: var(--font-mono); background: rgba(255,255,255,0.09); border: 1px solid var(--panel-border); border-radius: 4px; padding: 1px 7px; color: var(--text); }

/* reveal ao rolar — o texto em si já "chega" via scramble (js/site.js); aqui só o
   deslocamento/opacidade que acompanha, pra não aparecer tudo de golpe fora da viewport */
[data-scramble] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
[data-scramble].in { opacity: 1; transform: none; }

/* === Vitrine: cenas FIXADAS (position:sticky) cuja montagem é controlada pelo PROGRESSO
   da rolagem dentro de cada uma (site/js/site.js, initVitrine) — não é "aparece quando
   entra na tela", é "empurra pra montar", célula por célula. --vh define o "esforço" de
   cada cena (altura do trilho, em vh) — de propósito igual em qualquer tela, mobile
   incluso: só o conteúdo dentro reflui (clamp/vw), o esforço de rolagem não diminui. */
.vitrine { padding: 0; max-width: none; margin: 0; }
.vt-scene { position: relative; height: calc(var(--vh, 260) * 1vh); }
.vt-stage {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: 0 24px;
}
.vt-frame { width: min(640px, 100%); text-align: center; }
.vt-frame-title {
    display: block; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--green); margin-bottom: 26px;
}
/* Elementos com [data-vt-fade="inicio,fim"] são movidos direto por JS (opacity + translateY)
   a cada quadro de rolagem — sem transition CSS aqui de propósito: teria que "correr atrás"
   do valor mudando a cada scroll, e ficaria com um atraso perceptível (scrubbing precisa
   responder na hora, não amortecido). */
[data-vt-fade] { opacity: 0; will-change: opacity, transform; }

.vt-od-linha {
    display: flex; align-items: center; gap: 10px; justify-content: flex-start;
    width: min(420px, 84vw); margin: 0 auto 8px; padding: 8px 14px;
    font-family: var(--font-mono); font-size: 0.9rem; border-left: 3px solid var(--panel-border);
    background: var(--panel); border-radius: 6px;
}
.vt-od-linha.vt-elemento { border-left-color: var(--green); }
.vt-od-linha.vt-cena { border-left-color: var(--blue); }
.vt-od-linha.vt-conflito { border-left-color: var(--red); }
.vt-od-hora { color: var(--sec); width: 48px; flex-shrink: 0; }
.vt-od-barra { color: var(--panel-border); }
.vt-od-nome { flex: 1; text-align: left; }
.vt-od-tag { color: var(--red); font-weight: 800; }

.vt-caption { margin-top: 26px; color: var(--sec); font-size: 0.92rem; line-height: 1.6; max-width: 460px; margin-left: auto; margin-right: auto; }

/* cena "tempo relativo": chips entram espalhados (JS soma um deslocamento aleatório
   fixo ao transform, ver aplicarRelatividade em site.js) e convergem pra uma linha só
   conforme o progresso da rolagem avança — de posição própria pra alinhamento comum. */
.vt-rel-campo { position: relative; height: 150px; width: min(560px, 94vw); margin: 10px auto 4px; }
.vt-rel-chip {
    position: absolute; top: 50%; left: 50%; will-change: transform, opacity;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; white-space: nowrap;
    border: 1px solid var(--panel-border); border-radius: 6px; padding: 6px 11px;
    background: var(--panel); color: var(--text);
}

.vt-luz-svg { width: min(300px, 66vw); height: auto; display: block; margin: 4px auto 8px; }
.vt-luz-fonte { fill: var(--orange); filter: drop-shadow(0 0 6px var(--orange)); }
.vt-luz-raio { stroke: var(--orange); stroke-width: 1.5; opacity: 0.55; }
.vt-luz-lente { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.vt-luz-abertura { fill: var(--blue); opacity: 0.16; stroke: none; }
.vt-luz-sensor { fill: none; stroke: var(--panel-border); stroke-width: 1.5; }
.vt-luz-imagem { fill: var(--green); opacity: 0.55; }

.vt-an-svg { width: min(280px, 62vw); height: auto; display: block; margin: 0 auto 8px; }
.vt-an-eixo { stroke: var(--panel-border); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.vt-an-cone { fill: var(--blue); opacity: 0.16; stroke: none; }
.vt-an-dof { fill: var(--green); opacity: 0.3; }
.vt-an-cam { fill: var(--green); }
.vt-an-leituras { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text); margin-top: 4px; }
.vt-an-leituras span { border: 1px solid var(--panel-border); border-radius: 6px; padding: 4px 10px; background: var(--panel); }

.vt-explode {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 2px;
    font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.04em;
    font-size: clamp(1.5rem, 6.2vw, 3rem); color: var(--text); min-height: 1.3em;
}
.vt-explode span { display: inline-block; will-change: transform, opacity; }
.vt-timecode {
    font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.05em;
    font-size: clamp(2.1rem, 8vw, 4.2rem); color: var(--green); text-shadow: 0 0 26px var(--glow);
    margin-top: 18px;
}

/* cena da claquete alargada: dá espaço pra luz+C-stand e o monitor de vídeo village
   flanquearem o slate de verdade (ver .vt-clap-deco), reveladas por scramble de
   caracteres quando a cena entra na tela (initClapDeco em site.js) — o slate some
   de "flutuando no vazio" e ganha um pedaço de set ao redor dele. */
.vt-frame-wide { width: min(760px, 100%); position: relative; }
.vt-clap-deco {
    position: absolute; top: 90px; white-space: pre; font-family: var(--font-mono);
    font-size: 8px; line-height: 1.3; color: var(--sec); opacity: 0.5; pointer-events: none;
}
.vt-clap-deco-l { right: calc(50% + 260px); }
.vt-clap-deco-r { left: calc(50% + 260px); }
@media (max-width: 980px) { .vt-clap-deco { display: none; } }

/* === Slate completo: pá em DUAS peças (top/bottom + dobradiça), corpo com os mesmos
   campos-chave do app real (Rolo/FPS, Produção, Cena, Take, diária/INT-EXT/DIA-NOITE/
   data, e a fileira de timecode com REC) — não é mais um contador de take sozinho, é a
   experiência completa: timecode rodando ao vivo (initSlateClaquete em site.js), bate
   pra ARMAR a gravação, bate de novo pra FECHAR o take (timecode congela + pulsa em
   vermelho por um instante, tela inteira dá um flash de sincronismo, e toca o mesmo
   tipo de estalo sintetizado do app — ver tocarSomClaquete). === */
.vt-slate-wrap { width: min(520px, 92vw); margin: 0 auto; }
.vt-slate-sticks {
    position: relative; display: block; width: 100%; height: 58px; margin-bottom: -4px;
    background: none; border: none; padding: 0; cursor: pointer;
}
.vt-stick {
    position: absolute; left: 0; right: 0; height: 32px; border-radius: 7px 7px 0 0; border: 2px solid #000;
    background: repeating-linear-gradient(135deg, #0a0a0a 0 22px, #f2f2f2 22px 44px);
}
.vt-stick-top { top: 0; z-index: 2; transform-origin: 6% center; transform: rotate(-15deg); transition: transform 0.22s cubic-bezier(.2,.9,.3,1.5); box-shadow: 0 10px 26px rgba(0,0,0,0.5); }
.vt-stick-bottom { bottom: 0; z-index: 1; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.vt-slate-sticks.batendo .vt-stick-top { transform: rotate(0deg); transition: transform 0.07s ease-in; }
.vt-slate-sticks:hover .vt-stick-top { transform: rotate(-9deg); }
.vt-slate-sticks.batendo:hover .vt-stick-top { transform: rotate(0deg); }

.vt-slate-body {
    background: #111; border: 2px solid #000; border-radius: 0 0 12px 12px; padding: 22px 24px 24px;
    color: #fff; font-family: var(--font-mono); box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.vt-slate-header {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9a9a;
    padding-bottom: 11px; border-bottom: 1px solid #2a2a2a; margin-bottom: 15px;
}
.vt-slate-header b { color: var(--green); margin-right: 4px; }
.vt-slate-mid { display: flex; gap: 14px; margin-bottom: 14px; }
.vt-slate-num { flex: 1; text-align: center; border: 1px solid #2a2a2a; border-radius: 9px; padding: 10px 6px 12px; }
.vt-slate-num-label { display: block; font-size: 0.6rem; letter-spacing: 0.12em; color: var(--green); margin-bottom: 4px; }
.vt-slate-num-val { display: block; font-size: clamp(2.1rem, 6.8vw, 3.2rem); font-weight: 800; line-height: 1; }
.vt-slate-grid {
    display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.66rem; letter-spacing: 0.06em;
    color: #ccc; margin-bottom: 16px;
}
.vt-slate-grid span { border: 1px solid #2a2a2a; border-radius: 5px; padding: 3px 9px; }
.vt-slate-tc-row { display: flex; align-items: stretch; gap: 10px; }
.vt-slate-tc-block { flex: 1; min-width: 0; background: #000; border-radius: 9px; padding: 10px 14px; transition: background .15s, box-shadow .15s; }
.vt-slate-tc {
    font-size: clamp(1.5rem, 5.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em;
    color: var(--red); text-shadow: 0 0 12px rgba(255,69,58,0.35); white-space: nowrap;
}
.vt-slate-tc-elapsed { font-size: 0.7rem; color: #666; margin-top: 2px; letter-spacing: 0.02em; }
.vt-slate-tc-block.congelado { background: #3a0505; box-shadow: 0 0 0 2px rgba(255,69,58,0.55) inset; }
.vt-slate-tc-block.congelado .vt-slate-tc { animation: vtTcPulso .4s ease-in-out infinite alternate; }
@keyframes vtTcPulso { from { opacity: 1; } to { opacity: 0.55; } }
.vt-rec-badge {
    display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 9px;
    border: 1px solid #3a3a3a; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: #666;
    flex-shrink: 0;
}
.vt-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.vt-rec-badge.on { color: #fff; background: rgba(255,69,58,0.15); border-color: var(--red); }
.vt-rec-badge.on .vt-rec-dot { background: var(--red); animation: vtRecPisca 1s infinite alternate; }
@keyframes vtRecPisca { from { opacity: 1; } to { opacity: 0.3; } }

@media (max-width: 480px) {
    .vt-slate-header { font-size: 0.58rem; }
    .vt-slate-body { padding: 18px 16px 20px; }
}

/* flash de sincronismo (mesma ideia do app: tela inteira pisca branco por um instante
   quando a claquete bate) — elemento fixo dedicado, não reusa o ::after de grão do
   body (esse já tem outro job, ver acima). */
.vt-flash-sync { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: #fff; opacity: 0; }
.vt-flash-sync.on { animation: vtFlashSync 0.13s ease-out forwards; }
@keyframes vtFlashSync { from { opacity: 0.5; } to { opacity: 0; } }

footer { padding: 50px 28px 74px; text-align: center; border-top: 1px solid var(--panel-border); }
.foot-brand { letter-spacing: 0.14em; font-size: 0.8rem; color: var(--sec); margin-bottom: 10px; }
footer a { color: var(--green); }
footer a:hover { text-decoration: underline; }
.foot-meta { font-size: 0.66rem; color: var(--panel-border); margin-top: 16px; }

@media (max-width: 650px) {
    .site-header { padding: 12px 16px; flex-wrap: wrap; }
    .header-nav { gap: 12px; font-size: 0.68rem; width: 100%; justify-content: center; margin-top: 8px; }
    .hero { padding: 60px 18px 44px; }
    section { padding: 56px 18px; }
}