/* web/css/site.css — o que é SÓ do site institucional.
   ============================================================================
   Os tokens, as texturas de cada tema, o .ptile, a lousa da claquete, o mostrador
   do Tt e a hierarquia do Rt NÃO moram aqui: vêm de css/do-app.css, gerado por
   scripts/extrair-do-app.js direto dos arquivos do aplicativo. Se um raio de tile
   mudar no app, muda aqui na próxima publicação, sem ninguém lembrar de nada.

   Aqui fica: a página (seções, grades, topo, rodapé), a montagem por rolagem, e as
   duas peças que só existem no site — a marca em LED e o letreiro de convite. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; overflow-x: hidden;
    font-family: var(--font-ui); color: var(--text-main);
    background-color: var(--bg-page);
    background-attachment: fixed;
    /* Mesma blindagem do app: a pinça não dá zoom na página. */
    -webkit-text-size-adjust: 100%; touch-action: manipulation;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--system-blue); color: var(--bg-page); }
img { max-width: 100%; }

/* Texto de verdade continua selecionável; cromo, não. */
body { user-select: none; -webkit-user-select: none; }
p, .secao-corpo, .el-ficha, .nota, .logica-item { user-select: text; -webkit-user-select: text; }

/* ══ VOZES ══ as três do manual, sem inventar uma quarta ══ */
.rotulo {
    display: block; font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sec);
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 600; letter-spacing: 0.5px; margin: 0; }
p { margin: 0; line-height: 1.72; color: var(--text-sec); text-wrap: pretty; }
p b { color: var(--text-main); font-weight: 500; }
.nota { font-size: 0.88rem; line-height: 1.6; color: var(--text-sec); max-width: 900px; }
.cor-laranja { color: var(--system-orange) !important; }

/* ══ MONTAGEM POR ROLAGEM ══
   A entrada usa os MESMOS quadros do app (fadeIn e areas-grid-entrar, em
   layout.css): a seção sobe 10px e revela; a grade de elementos entra pela
   escala, do jeito que a grade de Áreas entra no app. Nada de paralaxe nem de
   efeito que o app não tenha — "nada pisca sem motivo" também vale pra montagem.
   O passo (data-passo) escalona os filhos: a leitura monta na ordem em que se lê. */
/* O conteúdo nasce VISÍVEL. Quem esconde pra animar é o .com-montagem, que só o
   JS liga — assim, se o script não carregar, se a rede cair no meio ou se o
   navegador congelar as animações (uma aba aberta em segundo plano fica com o
   relógio de animação parado no zero), a página aparece inteira do mesmo jeito.
   Uma seção invisível é falha pior que uma seção sem animação. */
body.com-montagem [data-monta] > *,
body.com-montagem [data-monta] [data-passo] { opacity: 0; }
body.com-montagem [data-monta].montado > *,
body.com-montagem [data-monta].montado [data-passo] {
    opacity: 1;
    animation: fadeIn 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
    animation-delay: calc(var(--passo, 0) * 90ms);
}
body.com-montagem [data-monta].montado > .secao-cabeca > * { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    body.com-montagem [data-monta] > *, body.com-montagem [data-monta] [data-passo] {
        opacity: 1 !important; animation: none !important;
    }
}

/* A régua: quanto da página já foi montada. Fica no topo, fina, e some no fim. */
.regua-monta {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 400;
    background: rgba(255,255,255,0.05); pointer-events: none;
}
.regua-monta span {
    display: block; height: 100%; width: 0;
    background: var(--system-blue); box-shadow: 0 0 10px var(--shadow-glow);
    transition: width 0.12s linear;
}

/* ══ TOPO FLUTUANTE ══ */
.float-brand, .float-nav {
    position: fixed; top: 16px; z-index: 300;
    display: flex; align-items: center;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border-color); border-radius: 999px;
    transition: transform 0.35s cubic-bezier(0.22,0.8,0.3,1), opacity 0.35s;
}
.float-brand { left: 16px; gap: 12px; padding: 9px 18px 9px 12px; }
.float-nav { right: 16px; gap: 4px; padding: 7px 8px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; }
body.rolando .float-brand { transform: translateY(-2px); }
/* O LED de rede não é override nenhum: o app já o define como ponto FIXO no
   canto superior esquerdo (layout.css — position fixed, top 5px, left 5px, 8px
   de lado). Ele nunca esteve dentro da pílula; só encostava nela. Deixando a
   regra do app valer, ele fica onde sempre esteve — à esquerda, fora da caixa,
   e sem empurrar o header pra baixo. Daqui só sai o brilho de "conectado". */
.net-status.online { background: var(--system-green); box-shadow: 0 0 8px var(--system-green); animation: respira 1.8s infinite alternate; }
@keyframes respira { from { opacity: .45; } to { opacity: 1; } }
.brand-mark {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--system-blue); font-family: var(--font-title);
    font-weight: 700; font-size: 1.15rem; color: var(--system-blue);
    box-shadow: 0 0 16px var(--shadow-glow);
}
.float-brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.float-brand-word { font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.14em; font-size: 0.7rem; }
.float-brand-tc { display: flex; align-items: baseline; gap: 7px; }
.float-brand-tc b { font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; color: var(--system-blue); }
.float-brand-fps { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--text-sec); }
.float-nav a {
    display: flex; align-items: center; min-height: 44px; padding: 7px 13px;
    border-radius: 999px; color: var(--text-sec); transition: color 0.2s, background 0.2s;
}
.float-nav a:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
.float-nav a.ativo { color: var(--system-blue); }
.float-nav .btn-cta {
    margin-left: 6px; padding: 8px 18px; color: var(--system-blue);
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%), #1c2024;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 14px var(--shadow-glow);
}
@media (max-width: 900px) { .float-nav a:not(.btn-cta) { display: none; } }

/* ══ HERO ══ */
.hero {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 120px 28px 60px; gap: 0;
}
/* A marca não é texto com brilho: é texto RECORTADO por uma grade de pontos.
   A máscara radial repetida a cada 7×10px come o miolo entre os pontos, e o que
   sobra tem a textura do painel de LED do Letreiro. Estes números são os do site
   publicado — mexer neles descaracteriza a marca. */
.hero-marca {
    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; color: var(--text-main);
    text-shadow: 0 0 30px var(--shadow-glow); cursor: pointer;
    -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-frase {
    margin: 26px 0 0; font-family: var(--font-title); font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: 0.5px;
    color: var(--system-blue); text-shadow: 0 0 24px var(--shadow-glow);
}
.hero-sub { margin: 20px 0 0; max-width: 660px; font-size: 1.05rem; line-height: 1.6; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.btn {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 15px 28px;
    border-radius: 10px; font-family: var(--font-mono); font-size: 0.82rem;
    letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%), #1c2024;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transition: box-shadow 0.2s, border-color 0.2s;
}
.btn-primary { color: var(--system-blue); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 14px var(--shadow-glow); border-color: var(--border-color); }
.btn-ghost { color: var(--text-sec); }
.btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 20px var(--shadow-glow); }
.led { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.led-rec { background: var(--system-red); box-shadow: 0 0 8px var(--system-red); animation: respira 1.1s infinite alternate; }
.hero-acesso { margin: 22px 0 0; font-family: var(--font-mono); font-size: 0.74rem; }
.hero-acesso a { color: var(--system-blue); }
.hero-faixa { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-sec); }
.hero-faixa i { opacity: .4; font-style: normal; }

/* ══ LETREIRO DE CONVITE ══ mesma grade de pontos, ponto menor ══ */
.led-banner {
    overflow: hidden; padding: 20px 0; background: rgba(0,0,0,0.5);
    border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
    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(--system-orange, #FF9F0A); 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, footer { max-width: 1240px; margin: 0 auto; padding: 110px 28px; }
.secao-cabeca {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px;
    /* Título no TOPO À ESQUERDA; o corpo começa na altura do título, não na do
       rótulo miúdo — é o que mantém a prioridade de leitura igual em toda a página. */
    align-items: start; margin-bottom: 44px;
}
.secao-titulo { grid-column: span 5; }
.secao-titulo h2 { margin-top: 8px; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.02; color: var(--system-blue); text-shadow: 0 0 10px var(--shadow-glow); }
.secao-corpo { grid-column: span 7; padding-top: 22px; display: flex; flex-direction: column; gap: 16px; font-size: 1.02rem; }
@media (max-width: 860px) {
    .secao-cabeca { grid-template-columns: 1fr; gap: 20px; }
    .secao-titulo, .secao-corpo { grid-column: 1 / -1; }
    .secao-corpo { padding-top: 0; }
    section, footer { padding: 70px 20px; }
}

/* Painel de vidro — a mesma camada que o app põe por cima de conteúdo. */
.painel {
    border-radius: 14px; border: 1px solid var(--border-color);
    background: var(--bg-panel); backdrop-filter: var(--glass-blur, blur(22px)) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px rgba(0,0,0,0.55);
}

/* ══ FLUXO PRÉ / SET / PÓS ══ */
.fluxo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fluxo-etapa {
    display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 12px 18px;
    border-radius: 8px; cursor: pointer; font-family: var(--font-mono);
    font-size: 0.74rem; letter-spacing: 0.11em; color: var(--system-blue);
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%), #1c2024;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.fluxo-etapa .led { background: rgba(141,148,156,0.5); }
.fluxo-etapa.on { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 14px var(--shadow-glow); border-color: var(--system-blue); }
.fluxo-etapa.on .led { background: var(--system-blue); box-shadow: 0 0 9px var(--system-blue); }
/* Vermelho é o único que sai da sua tela — e o SET é o único estágio que está no ar. */
.fluxo-etapa[data-etapa="set"].on .led { background: var(--system-red); box-shadow: 0 0 9px var(--system-red); }
.fluxo-legenda { font-size: 0.88rem; color: var(--text-sec); margin-left: 8px; }

/* ══ ELEMENTOS ══ */
/* A coluna dos tiles mede o que a TABELA pede, não o que sobra na tela: sete
   tiles de 66px com 10 de vão dão 522px, e era esse o buraco à direita — a
   coluna esticava até 1fr e os tiles paravam no sétimo. fit-content trava no
   conteúdo, e o que sobra vai pra ficha, que é quem tem texto pra ocupar. */
.el-palco {
    display: grid;
    grid-template-columns: fit-content(560px) minmax(320px, 1fr);
    gap: 40px; align-items: start;
}
@media (max-width: 1000px) { .el-palco { grid-template-columns: 1fr; } }
.el-grade { display: flex; flex-direction: column; gap: 26px; outline: none; }
/* O anel só aparece pra quem navega por teclado — é a dica de que as setas
   funcionam ali. Encostado na tabela, não na largura da coluna. */
.el-grade:focus-visible { outline: 2px solid var(--system-blue); outline-offset: 10px; border-radius: 14px; }
.el-grupo { display: flex; flex-direction: column; gap: 11px; }
.el-grupo-cabeca { display: flex; align-items: baseline; gap: 12px; }
.el-grupo-marca { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; }
.el-grupo-desc { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-sec); }
/* A grade entra pela escala — o mesmo quadro que a grade de Áreas usa no app. */
body.com-montagem [data-monta].montado .el-grupo { animation: areas-grid-entrar 0.45s cubic-bezier(0.22,0.8,0.3,1) both; }
body.com-montagem [data-monta].montado .el-grupo:nth-child(2) { animation-delay: 70ms; }
body.com-montagem [data-monta].montado .el-grupo:nth-child(3) { animation-delay: 140ms; }
body.com-montagem [data-monta].montado .el-grupo:nth-child(4) { animation-delay: 210ms; }
body.com-montagem [data-monta].montado .el-grupo:nth-child(5) { animation-delay: 280ms; }
.el-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
/* O tile é o .ptile do app (do-app.css). Aqui só o que o site acrescenta: o
   atalho de teclado no canto e o anel de foco da navegação por setas. */
.el-grade .ptile { cursor: pointer; width: 66px; }
.el-grade .ptile.foco { border-color: var(--system-blue); box-shadow: 0 0 0 2px var(--shadow-glow); }
.ptile-tecla { position: absolute; top: 3px; right: 5px; font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-sec); opacity: 0.55; }
.el-ficha { position: sticky; top: 92px; padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.el-ficha-topo { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.el-ficha-sigla {
    width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid var(--border-color);
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 60%, rgba(0,0,0,0.12) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    font-family: var(--font-title); font-weight: 700; font-size: 2.1rem; letter-spacing: 0.5px;
}
.el-ficha-nome { font-family: var(--font-title); font-weight: 600; font-size: 1.6rem; line-height: 1.05; letter-spacing: 0.5px; color: var(--text-main); }
.el-ficha-linha { font-family: var(--font-title); font-weight: 600; font-size: 1.35rem; line-height: 1.2; letter-spacing: 0.5px; color: var(--system-blue); text-shadow: 0 0 10px var(--shadow-glow); }
.el-ficha p { font-size: 0.94rem; line-height: 1.68; }
.el-ficha-nota { padding: 12px 14px; border-left: 2px solid var(--system-yellow); background: rgba(241,196,15,0.05); font-size: 0.85rem; line-height: 1.6; color: var(--text-sec); }
.el-ficha-dica { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sec); opacity: 0.7; }
.el-logica { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--border-color); }
@media (max-width: 1000px) { .el-logica { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .el-logica { grid-template-columns: 1fr; } }
.logica-item { display: flex; flex-direction: column; gap: 8px; }
.logica-item p { font-size: 0.88rem; line-height: 1.6; }

/* ══ LETREIRO (painel de LED) ══ */
.led-palco {
    border-radius: 16px; border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008) 40%), #131619;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 16px 40px rgba(0,0,0,0.55);
    padding: 18px;
}
.led-plaqueta { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 14px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sec); }
.led-plaqueta b { color: var(--system-blue); font-weight: 500; }
.led-vivo { display: flex; align-items: center; gap: 8px; }
.led-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--system-red); box-shadow: 0 0 8px var(--system-red); animation: respira 1.1s infinite alternate; }
.led-vidro { position: relative; border-radius: 10px; overflow: hidden; background: #05060a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 2px 18px rgba(0,0,0,0.9); height: 252px; }
.led-vidro::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.055) 0%, transparent 34%, transparent 66%, rgba(255,255,255,0.025) 100%); }
.led-vidro canvas { display: block; width: 100%; height: 252px; }
@media (max-width: 650px) { .led-vidro, .led-vidro canvas { height: 150px; } }
.led-controles { display: flex; align-items: center; gap: 22px; padding: 16px 4px 0; flex-wrap: wrap; }
.led-controles .sep { width: 1px; align-self: stretch; background: var(--border-color); }
.led-fases, .led-cores, .led-def { display: flex; align-items: center; gap: 8px; }
.tecla {
    min-height: 44px; padding: 12px 18px; border-radius: 8px; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--system-blue); border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%), #1c2024;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transition: box-shadow 0.2s, border-color 0.2s;
}
.tecla:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 16px var(--shadow-glow); }
.tecla.on { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 14px var(--shadow-glow); border-color: var(--system-blue); }
.led-cor { width: 44px; height: 44px; border-radius: 50%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.led-cor i { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.led-cor.on i { border-color: rgba(255,255,255,0.85); }

/* ══ FAIXA DE TEMAS ══ cada tema traz a própria superfície ══ */
.temas-barra {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 22px 20px 30px; border-top: 1px solid var(--border-color); flex-wrap: wrap;
}
.tema-tecla { display: flex; align-items: center; gap: 9px; }
/* A amostra do tema: a superfície de verdade com as quatro cores de sistema
   acesas em cima — um resumo do tema, não um quadrado vazio. */
.tema-amostra {
    width: 42px; height: 24px; border-radius: 6px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center; gap: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.tema-amostra i { width: 5px; height: 5px; border-radius: 50%; display: block; flex-shrink: 0; }

/* ══ RODAPÉ ══ */
.rodape-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .rodape-topo { grid-template-columns: 1fr; } }
.rodape-topo h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.04; color: var(--system-blue); text-shadow: 0 0 10px var(--shadow-glow); margin-bottom: 20px; }
.rodape-topo p { margin-bottom: 6px; }
.rodape-onde { display: flex; flex-direction: column; gap: 1px; }
.rodape-onde .rotulo { margin-bottom: 13px; }
.rodape-onde .linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border-color); font-family: var(--font-mono); font-size: 0.76rem; }
.rodape-onde .linha i { color: var(--text-sec); font-style: normal; }
.rodape-onde .linha b { font-weight: 500; }
.rodape-base { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-sec); }
.rodape-marca { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.16em; font-size: 0.82rem; color: var(--text-main); }
.rodape-marca .brand-mark { width: 34px; height: 34px; font-size: 1.2rem; }
.rodape-base a { color: var(--system-blue); }

/* ══════════════════════════════════════════════════════════════════════════
   PALCOS DOS INSTRUMENTOS
   O desenho das peças vem de do-app.css. O que muda aqui é a MEDIDA: no app a
   lousa e o mostrador se medem pela altura da janela (o set usa tela cheia);
   numa página que rola, isso faria a peça mudar de tamanho ao rolar. Cada uma
   ganha uma caixa fixa e continua medindo em cqw por dentro — a métrica é a
   mesma, só o container é outro (TEMPORAL, seção 7).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── cascata ── */
.cascata-palco { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.cascata-col { grid-column: span 5; padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.cascata-regras { grid-column: span 2; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 1100px) {
    .cascata-col { grid-column: span 6; }
    .cascata-regras { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .cascata-regras .logica-item { flex: 1 1 260px; }
}
@media (max-width: 760px) { .cascata-col { grid-column: 1 / -1; } }
.cascata-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cascata-nome { font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.5px; text-transform: uppercase; }
.cascata-tag { font-size: 0.62rem !important; }
.cascata-campos { display: flex; flex-direction: column; gap: 16px; }
.cascata-rodape { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 16px; flex-wrap: wrap; }
.cascata-rodape .tecla { flex-shrink: 0; white-space: nowrap; }
.campo-edit {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    padding: 12px; border-radius: 8px; color: var(--text-main);
    font-family: var(--font-ui); font-size: 1rem; line-height: 1.35;
    outline: none; width: 100%; box-sizing: border-box; display: block;
    resize: none; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s;
}
.campo-edit:focus { border-color: var(--system-blue); box-shadow: 0 0 0 1px var(--shadow-glow); }
.campo {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    padding: 12px; border-radius: 8px; color: var(--text-main);
    font-family: var(--font-ui); font-size: 1rem; line-height: 1.35;
    width: 100%; box-sizing: border-box; display: block; text-align: left;
}
/* Tracejado = herdado (TEMPORAL, 5). Não é pendência: é dado que vale sem ter
   sido digitado ali. */
.campo.campo-ancestral { border-style: dashed; color: var(--text-sec); opacity: 0.85; cursor: pointer; }
.campo.campo-ancestral:hover { border-color: var(--system-blue); }
.form-group > label { display: flex; align-items: center; gap: 6px; }
.flag { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.flag.verde { background: var(--system-green); box-shadow: 0 0 6px var(--system-green); }
.flag.tracejado { background: transparent; border: 1px dashed var(--system-blue); }

/* ── Tt ── */
.tt-palco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px; align-items: start; }
@media (max-width: 1100px) { .tt-palco { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .tt-palco { grid-template-columns: 1fr; } }
.tt-coluna { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* No app o mostrador se mede por 55vh; aqui por caixa fixa — o cqw de dentro
   continua o mesmo, então numerais e ponteiros guardam a proporção. */
.tt-palco .analog-wrapper { width: min(100%, 420px); max-width: none; margin-bottom: 0; }
.tt-meta { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.tt-meta.desligada .tt-meta-num, .tt-meta.desligada .tt-meta-un { opacity: 0.35; pointer-events: none; }
.tt-meta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt-meta-num { display: flex; align-items: center; gap: 8px; }
.tt-meta-num .tecla { width: 44px; padding: 0; justify-content: center; display: flex; align-items: center; }
.tt-meta-num span { flex-grow: 1; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.7rem; font-variant-numeric: tabular-nums; color: var(--text-main); }
.tt-meta-un { display: flex; gap: 6px; }
.tt-meta-un .tecla { flex-grow: 1; text-align: center; }
.tt-texto { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.tt-texto-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tp-linha { display: block; padding: 9px 0 9px 16px; border-left: var(--tp-line-weight, 4px) solid transparent; transition: opacity .25s, border-color .25s, color .25s; }
.tp-linha.atual { border-left-color: var(--tp-active-line-color, #FF453A); color: var(--text-main); }
.tp-linha.passou { opacity: 0.32; }
.tp-linha.futura { opacity: 0.6; }
.tp-quem { display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sec); }
.tp-fala { font-size: 0.98rem; line-height: 1.5; }

/* ── claquete ── */
.claquete-palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 1000px) { .claquete-palco { grid-template-columns: 1fr; } }
.claquete-col { display: flex; justify-content: center; }
/* A lousa não se mede pela altura da janela aqui — caixa fixa, cqw por dentro. */
.claquete-palco .clapper-slate-container { width: min(100%, 620px) !important; max-width: 100%; position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center; }
/* A dica fica acima do bastão, e o taco de cima sobe ao ser preparado — sem
   este respiro a barra passa rente ao texto. */
.clapper-topbar { position: static; width: 100%; padding: 0 0 22px; display: flex; justify-content: space-between; gap: 12px; }
.clapper-sticks { border: 0; padding: 0; background: none; }
.claquete-palco .prep-hint { position: absolute; left: 4px; bottom: -1.4rem; white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.3px; color: var(--system-orange); opacity: 0.55; pointer-events: none; }
.slate-input-big { font-size: 4.5cqw; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 10px var(--shadow-glow); color: var(--text-main); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slate-rolo .slate-input-big { font-size: 5.4cqw; }
.slate-val { font-size: 4.2cqw; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.5px; color: var(--text-main); text-shadow: 0 0 6px currentColor; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slate-num { font-size: 8cqw; font-weight: 700; line-height: 1; font-family: var(--font-mono); color: var(--text-main); text-shadow: 0 0 6px currentColor; }
.slate-prod-val { font-size: 5.5cqw; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--text-main); text-shadow: 0 0 6px currentColor; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slate-session-full { font-size: 4.2cqw; font-weight: 700; line-height: 1.15; font-family: var(--font-mono); color: var(--text-main); text-shadow: 0 0 6px currentColor; }
.slate-input-sm { font-size: 2.6cqw; font-weight: 700; color: var(--text-main); text-shadow: 0 0 6px currentColor; font-family: var(--font-mono); }
.slate-fps, .slate-loc-sub { display: block; width: 100%; margin-top: 1cqw; color: var(--text-sec); opacity: 0.85; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; font-size: 2.3cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slate-crew-field .crew { display: flex; align-items: baseline; width: 100%; min-width: 0; }
.slate-crew-field .rot { font-size: 2cqw; font-weight: 600; color: var(--system-blue); letter-spacing: 1px; flex-shrink: 0; margin-right: 3cqw; }
.slate-info-row { align-items: baseline; }
.slate-info-top { align-items: center; }
.slate-mini-label { display: flex; align-items: baseline; gap: 1.2cqw; min-width: 0; font-size: 1.8cqw; font-weight: 600; text-transform: uppercase; color: var(--system-blue); letter-spacing: 1px; }
.slate-unit { font-size: 1.8cqw; opacity: 0.55; margin-left: 0.4cqw; color: var(--text-sec); }
.slate-hfr-label { opacity: 0.35; }
.stop-tipo-btn { font-size: 1.9cqw; padding: 0.3cqw 1cqw; margin-right: 1cqw; }
.pad-tile {
    display: inline-flex; align-items: center; justify-content: center; justify-self: end;
    width: 5cqw; height: 5cqw; border-radius: 1.4cqw; flex-shrink: 0; cursor: pointer;
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 60%, rgba(0,0,0,0.12) 100%);
    border: 1px solid var(--border-color); font-family: var(--font-title); font-weight: 700;
    font-size: 2.6cqw; letter-spacing: 0.5px; color: var(--text-main); text-shadow: 0 0 10px var(--shadow-glow);
}
.pad-tile.on { border-color: var(--system-blue); color: var(--system-blue); }
/* Travada, herdado e digitado brilham igual — é o estado em que a lousa passa o
   dia. Só o Modo Editor devolve a diferença. */
.editor-on .herdado { opacity: 0.5; text-shadow: none !important; }
.timecode-row .timecode-block { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #000; border-radius: 0 0 0 4px; overflow: hidden; transition: background 0.2s; }
.timecode-display { padding: 1cqw 0 0; border: 0; background: none; width: 100%; display: block; border-radius: 0; cursor: pointer; }
.timecode-block.frozen { background: var(--system-red); }
.timecode-block.frozen .timecode-display { color: #FFF; text-shadow: 0 0 30px rgba(255,255,255,0.8); }
.timecode-block.frozen .rec-elapsed { color: #FFF; opacity: 1; }
.rec-badge { align-self: stretch; margin: 0; padding: 0 4cqw; border-radius: 0 0 4px 0; border: none; background: #000; font-size: 3cqw; gap: 1.5cqw; justify-content: center; }
.rec-badge .rec-dot { width: 2.4cqw; height: 2.4cqw; }
.rec-badge.on { background: var(--system-red); color: #fff; }
.rec-badge.on .rec-dot { background: #fff; }
.claquete-lado { display: flex; flex-direction: column; gap: 26px; }
.picker { display: flex; flex-direction: column; gap: 6px; }
.picker-linha {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--font-ui);
    transition: border-color 0.15s, background 0.15s;
}
.picker-linha:hover { border-color: var(--text-sec); }
.picker-linha.on { border-color: var(--system-green); background: rgba(46,204,113,0.08); }
.picker-num { font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem; color: var(--text-main); min-width: 2.4ch; text-align: center; flex-shrink: 0; }
.picker-horario { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-sec); min-width: 5ch; flex-shrink: 0; }
.picker-campos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.picker-campos span { font-size: 0.76rem; color: var(--text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-campos b { color: var(--text-main); font-weight: 600; }
.picker-campos i { font-style: normal; }
.picker-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; flex-shrink: 0; }
.claquete-editor { display: flex; flex-direction: column; gap: 12px; }
.claquete-editor p { font-size: 0.98rem; }

/* ── sincronia ── */
.sync-palco { padding: 30px 34px; display: flex; flex-direction: column; gap: 26px; }
.sync-topo { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sync-teclas { display: flex; gap: 8px; flex-wrap: wrap; }
.sync-nos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 130px; }
@media (max-width: 1000px) { .sync-nos { grid-template-columns: 1fr; gap: 16px; } .sync-fios { display: none !important; } }
.sync-no {
    display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 12px;
    border: 1px solid rgba(46,204,113,0.22); background: rgba(255,255,255,0.025);
    transition: border-color .25s, opacity .25s;
}
.sync-no.velho { border-color: rgba(255,159,10,0.35); opacity: 0.72; }
.sync-no-topo { display: flex; align-items: center; gap: 10px; }
.sync-no-nome { font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-main); }
.sync-no-sit { margin-left: auto; font-size: 0.6rem !important; }
.sync-no-hlc { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border-color); padding-top: 13px; }
.sync-no-hlc .rotulo { font-size: 0.58rem; }
.sync-no-hlc b { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 700; }
.sync-fios { display: flex; align-items: center; margin-top: -12px; }
.sync-fio { flex: 1 1 0; display: flex; align-items: center; gap: 10px; justify-content: center; }
.sync-fio .rotulo { font-size: 0.58rem !important; white-space: nowrap; }
/* O fio só anda quando está de fato levando alguma coisa — nada pisca sem motivo. */
.fio { position: relative; height: 2px; flex-grow: 1; overflow: hidden; border-radius: 2px; }
.fio i { position: absolute; inset: 0; width: 200%; background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 18px); }
.fio.vivo i { animation: correFio 0.9s linear infinite; }
@keyframes correFio { from { transform: translateX(0); } to { transform: translateX(-18px); } }
.sync-narra { border-top: 1px solid var(--border-color); padding-top: 22px; font-size: 1rem; }
.sync-regras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--border-color); padding-top: 26px; }
@media (max-width: 900px) { .sync-regras { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   A LOUSA DEITADA NÃO VALE AQUI
   ──────────────────────────────────────────────────────────────────────────
   O app tem uma versão DEITADA da claquete (@media min-width:640px e
   min-aspect-ratio:5/4, em module-clapper.css): a lousa vira uma grade de 24
   colunas e as linhas viram `display: contents`, pra ocupar bem um iPad na
   horizontal ou um desktop largo. Faz todo sentido lá — lá a lousa É a tela.

   Aqui ela é um cartão de 620px dentro de uma página que rola. E como aquela
   media query mede a JANELA, não a lousa, em qualquer desktop ela disparava:
   ROLO, PRODUÇÃO e SESSÃO caíam na mesma fileira, o rolo truncava em "A003…",
   CAM quebrava em duas linhas e STOP/SHUT se atropelavam.

   A regra certa é a do manual (TEMPORAL, 7): quem manda no tamanho é o
   CONTAINER, não a janela. Então a lousa do site é sempre a vertical, e as
   medidas em cqw seguem valendo por dentro. Prefixo .claquete-palco vence a
   media query por especificidade, não por ordem.
   ══════════════════════════════════════════════════════════════════════════ */
.claquete-palco .clapper-slate { display: flex; flex-direction: column; }
.claquete-palco .slate-header { display: flex; }
.claquete-palco .slate-mid { display: flex; }
.claquete-palco .slate-scene-take { display: flex; flex: 0 0 var(--slate-split); border-right: 2px solid var(--border-color); }
.claquete-palco .slate-mid .slate-crew { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.claquete-palco .slate-header .slate-rolo { flex: 0 0 var(--slate-split); }
.claquete-palco .slate-header .slate-prod { flex: 1 1 auto; min-width: 0; }
.claquete-palco .slate-session-full-field { flex: 0 0 auto; width: 100%; border-right: none; border-bottom: 2px solid var(--border-color); }
.claquete-palco .slate-scene-take > .slate-field { grid-column: auto; padding: 2.5cqw 3.5cqw; border-right: 2px solid var(--border-color); border-bottom: none; }
.claquete-palco .slate-scene-take > .slate-field.no-border { border-right: none; }
.claquete-palco .slate-mid .slate-crew-field { grid-column: auto; flex: 1 1 auto; border-right: none; border-bottom: 2px solid var(--border-color); padding: 2cqw 3.5cqw; }
.claquete-palco .slate-mid .slate-crew-field.no-border { border-bottom: none; }
.claquete-palco .slate-info-cell { display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; }
.claquete-palco .slate-info-cell .slate-cam-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.4cqw 4cqw; }
.claquete-palco .slate-info-cell .slate-info-top { grid-column: auto; }
/* Os corpos de texto da deitada são menores (cabem mais colunas). De volta aos
   da vertical, que é a que está desenhada aqui. */
.claquete-palco .slate-field label { font-size: 2cqw; margin-bottom: 1cqw; }
.claquete-palco .slate-mini-label { font-size: 1.8cqw !important; }
.claquete-palco .slate-input-sm { font-size: 2.6cqw; }
.claquete-palco .slate-loc-sub, .claquete-palco .slate-fps { font-size: 2.3cqw; }
.claquete-palco .slate-session-full { font-size: 4.2cqw; }
.claquete-palco .slate-num { font-size: 8cqw; }
.claquete-palco .slate-prod-val { font-size: 5.5cqw; }
.claquete-palco .slate-input-big { font-size: 4.5cqw; }
.claquete-palco .slate-rolo .slate-input-big { font-size: 5.4cqw; }
.claquete-palco .slate-val { font-size: 4.2cqw; }
/* O rótulo do ofício volta a ser curto e na mesma linha do nome (a deitada o
   empilha e troca "Dir:" por "Diretor"). */
.claquete-palco .slate-crew-field .crew { flex-direction: row; align-items: baseline; gap: 0; }
.claquete-palco .slate-crew-field .rot { font-size: 2cqw; margin-right: 3cqw; }

/* A fileira do topo da lousa tem cinco colunas em frações iguais no app, onde a
   lousa é bem mais larga. Neste cartão de 620px a DATA (12 caracteres em mono de
   3.5cqw) não cabia em 1fr e invadia a tecla do (e). Mesma anatomia, proporções
   recalculadas pra largura que a lousa tem aqui. */
.claquete-palco .slate-info-top {
    /* Cinco colunas, medidas pelo que cada uma precisa nesta largura: a diária são
       dois caracteres, os toggles são nove ("INT / EXT"), a data são doze, e o (e)
       é um quadrado de 5cqw. O gap volta aos 3cqw do app — com menos que isso o
       EXT encosta no DAY e os dois viram uma palavra só. */
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.35fr);
    gap: 1.4cqw 3cqw;
}

/* ══════════════════════════════════════════════════════════════════════════
   O BASTÃO PRECISA DE CÉU
   O taco de cima gira -13° quando a claquete está PREPARADA, com o pivô perto
   da ponta esquerda — então a ponta direita SOBE cerca de 22% da largura da
   lousa. No app isso é proposital: a lousa ocupa a tela e as bandas passam por
   cima da linha do menu, sem nada pra atropelar.

   Aqui tem parágrafo em cima. Então a coluna reserva o céu que o gesto pede —
   em porcentagem, que se mede pela largura do container e acompanha a lousa
   sozinha quando a tela encolhe.
   ══════════════════════════════════════════════════════════════════════════ */
.claquete-col { padding-top: 17%; }
@media (max-width: 1000px) { .claquete-col { padding-top: 20%; } }

/* ══════════════════════════════════════════════════════════════════════════
   DUAS ARMADILHAS DE ROLAGEM QUE VIERAM DO APP
   ──────────────────────────────────────────────────────────────────────────
   1. .analog-wrapper tem `touch-action: none` no app — e precisa ter: lá o
      mostrador ocupa a tela e é alvo de arrasto (o pino da Meta), então
      qualquer gesto em cima dele é dele. Numa página que rola, isso vira uma
      zona morta de 420px no meio do caminho: dois dedos no trackpad em cima
      do relógio não rolam nada. A trava certa é no PINO, que é o que de fato
      se arrasta — não no mostrador inteiro.

   2. .clapper-sticks::before estica `top: -100vh` — uma caixa invisível de uma
      tela inteira de altura, subindo a partir do bastão. No app é a área de
      clique do "leque" que o bastão abre por cima do menu. Aqui ela cobre a
      seção do Tt e parte do Letreiro, engolindo o que estiver embaixo.
      O bastão do site é o próprio bastão; não precisa de leque.
   ══════════════════════════════════════════════════════════════════════════ */
.tt-palco .analog-wrapper { touch-action: auto; }
.tt-palco .target-indicator { touch-action: none; }
.claquete-palco .clapper-sticks::before { content: none; display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   O RESTO DA LOUSA DEITADA (varredura, 2026-08-30)
   Fui atrás de TODAS as regras do bloco @media (min-width:640px) and
   (min-aspect-ratio:5/4) e sobravam estas quatro mordendo a versão em pé.
   A primeira é a que desencaixava o bastão: 7cqw contra os 9cqw que a lousa
   em pé espera — o taco nasce 22% mais fino e a peça inteira lê solta,
   em vez de assentada no topo da lousa.
   ══════════════════════════════════════════════════════════════════════════ */
.claquete-palco .clapper-sticks { height: 9cqw; margin-bottom: 0.6cqw; }
.claquete-palco .toggle-group,
.claquete-palco .slate-date,
.claquete-palco .slate-diaria { font-size: 3.5cqw; }
.claquete-palco .timecode-display { font-size: 11cqw; }
.claquete-palco .rec-elapsed { font-size: 3.4cqw; }