/* elementos-sitio.css — as famílias da superfície web.
   MEDIDAS derivadas de website-1.png (910px de largura) reamostradas para a
   prancha de 1440. Onde o número era leitura de imagem e não valor de código,
   ele está arredondado na unidade de 4px do sistema. */

.sitio{background-color:var(--sitio-fundo);color:var(--sitio-tinta-cheia);font-family:var(--voz-funcional);font-size:var(--sitio-corpo-corpo);line-height:var(--sitio-corpo-entrelinha);width:var(--sitio-largura);position:relative;overflow:hidden}
.sitio__miolo{max-width:var(--sitio-miolo);margin:0 auto;padding:0 24px}
.sitio a{color:var(--sitio-sinal);text-decoration:none}
.sitio a:hover{color:var(--sitio-sinal-forte)}
.sitio a.cromo__elo{color:var(--sitio-tinta-secundaria)}
.sitio a.cromo__elo:hover{color:var(--sitio-tinta-cheia)}
.sitio a.cromo__elo[aria-current="page"]{color:var(--sitio-tinta-cheia)}
.sitio a.acao--sinal{color:var(--sobre-sinal)}
.sitio a.acao--traco{color:var(--sitio-tinta-cheia)}

/* a grade do sítio: a mesa quadriculada, quase apagada, sobre o poço */
.sitio__grade{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--sitio-traco) 1px,transparent 1px),linear-gradient(90deg,var(--sitio-traco) 1px,transparent 1px);background-size:var(--quadro) var(--quadro);opacity:.5;mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 75%)}

/* ── cromo: a barra de navegação ─────────────────────────────────────── */
.cromo{position:relative;z-index:3;height:var(--sitio-cromo-altura);display:flex;align-items:center;gap:40px;padding:0 32px;border-bottom:1px solid var(--sitio-traco);background-color:var(--sitio-cromo);box-shadow:0 1px 0 rgba(255,255,255,.04),0 10px 30px -18px rgba(0,0,0,.9)}
.cromo__marca{display:flex;align-items:center;gap:10px;font-family:var(--voz-sistema);font-size:19px;font-weight:600;color:var(--sitio-tinta-cheia);letter-spacing:-.01em}
.cromo__prompt{color:var(--sitio-sinal)}
.cromo__prompt i,.prompt__sinal i,.rodape__marca i{font-style:normal}
.cromo__nav{display:flex;align-items:center;gap:32px;margin-left:8px}
.cromo__elo{font-family:var(--voz-funcional);font-size:14px;font-weight:500;color:var(--sitio-tinta-secundaria);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color var(--t-toque) var(--e-entrada)}
.cromo__elo:hover{color:var(--sitio-tinta-cheia)}
.cromo__elo[aria-current="page"]{color:var(--sitio-tinta-cheia);border-bottom-color:var(--sitio-sinal)}
.cromo__fim{margin-left:auto;display:flex;align-items:center;gap:16px}

/* o interruptor de modo: cápsula com dois pousos */
.interruptor{display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--sitio-raio-capsula);border:1px solid var(--sitio-traco-forte);background-color:var(--sitio-rebaixo)}
.interruptor__pouso{width:30px;height:26px;display:grid;place-items:center;border:0;border-radius:var(--sitio-raio-capsula);background:transparent;color:var(--sitio-tinta-fraca);cursor:pointer;transition:background-color var(--t-toque) var(--e-entrada),color var(--t-toque) var(--e-entrada)}
.interruptor__pouso svg{width:14px;height:14px}
.interruptor__pouso[aria-pressed="true"]{background-color:var(--sitio-superficie-alta);color:var(--sitio-sinal)}

/* ── ação: os botões ─────────────────────────────────────────────────── */
.acao{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--sitio-raio-fino);border:1px solid transparent;font-family:var(--voz-funcional);font-size:var(--sitio-acao-corpo);line-height:var(--sitio-acao-entrelinha);font-weight:var(--sitio-acao-peso);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--t-toque) var(--e-entrada),border-color var(--t-toque) var(--e-entrada),color var(--t-toque) var(--e-entrada),transform var(--t-toque) var(--e-entrada)}
.acao:active{transform:translateY(1px)}
.acao--sinal{background-color:var(--sitio-sinal);color:var(--sobre-sinal);box-shadow:var(--sitio-relevo-baixo),inset 0 1px 0 rgba(255,255,255,.28)}
.acao--sinal:hover{background-color:var(--sitio-sinal-forte);color:var(--sobre-sinal)}
.acao--traco{background-color:var(--sitio-superficie);border-color:var(--sitio-traco-forte);color:var(--sitio-tinta-cheia);box-shadow:var(--sitio-relevo-baixo),var(--sitio-luz-de-bordo)}
.acao--traco:hover{border-color:var(--sitio-tinta-fraca);background-color:var(--sitio-superficie)}
.acao--fantasma{background:transparent;color:var(--sitio-tinta-secundaria);padding:0 8px}
.acao--fantasma:hover{color:var(--sitio-tinta-cheia)}
.acao--capsula{border-radius:var(--sitio-raio-capsula);height:36px;padding:0 16px;font-size:13px}
.acao--miuda{height:32px;padding:0 14px;font-size:13px;border-radius:var(--sitio-raio-miudo)}
.acao svg{width:16px;height:16px;flex:none}
.acao[disabled]{opacity:.4;pointer-events:none}

/* o disco: ação circular — as setas do carrossel, o + da ficha */
.disco{width:44px;height:44px;border-radius:var(--sitio-raio-capsula);display:grid;place-items:center;border:1px solid var(--sitio-traco-forte);background-color:var(--sitio-superficie);color:var(--sitio-tinta-secundaria);cursor:pointer;box-shadow:var(--sitio-relevo-baixo),var(--sitio-luz-de-bordo);transition:border-color var(--t-toque) var(--e-entrada),color var(--t-toque) var(--e-entrada),background-color var(--t-toque) var(--e-entrada)}
.disco:hover{color:var(--sitio-tinta-cheia);border-color:var(--sitio-tinta-fraca)}
.disco--miudo{width:28px;height:28px;border-radius:var(--sitio-raio-miudo);box-shadow:none}
.disco svg{width:18px;height:18px}

/* ── rótulo de seção: o número, o ponto, o nome ──────────────────────── */
.secao{position:relative;z-index:1;padding:64px 0 8px}
.secao__marcador{display:flex;align-items:center;gap:10px;font-family:var(--voz-sistema);font-size:var(--sitio-rotulo-corpo);line-height:var(--sitio-rotulo-entrelinha);letter-spacing:var(--sitio-rotulo-espacamento);text-transform:uppercase;color:var(--sitio-tinta-fraca)}
.secao__numero{color:var(--sitio-sinal)}
.secao__nome{color:var(--sitio-sinal)}
.secao__titulo{font-family:var(--voz-funcional);font-size:var(--sitio-secao-corpo);line-height:var(--sitio-secao-entrelinha);font-weight:400;letter-spacing:-.018em;margin:16px 0 0;color:var(--sitio-tinta-cheia)}
.secao__deck{margin:8px 0 0;font-size:var(--sitio-corpo-corpo);line-height:var(--sitio-corpo-entrelinha);color:var(--sitio-tinta-secundaria)}
.secao__cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.secao__elo{font-family:var(--voz-sistema);font-size:var(--sitio-rotulo-corpo);letter-spacing:var(--sitio-rotulo-espacamento);text-transform:uppercase;color:var(--sitio-sinal);display:inline-flex;align-items:center;gap:8px}

/* ── herói ───────────────────────────────────────────────────────────── */
.heroi{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center;padding:48px 64px 0;min-height:600px}
.heroi__texto{position:relative;z-index:2;padding-bottom:48px;max-width:560px;align-self:center}
/* A PROTEÇÃO DA COLUNA DE TEXTO. O campo é terreno, e terreno não disputa
   leitura: um degradê radial do fundo atrás do texto garante que a manchete
   nunca caia sobre uma célula acesa. Degradê, não cápsula — a mesma regra que
   a cena de câmera seguia. */
.heroi__texto::before{content:"";position:absolute;inset:-56px -80px -24px -80px;z-index:-1;pointer-events:none;background:radial-gradient(72% 62% at 34% 46%,var(--sitio-fundo) 0,color-mix(in srgb,var(--sitio-fundo) 72%,transparent) 52%,transparent 78%)}
.heroi__manchete{font-family:var(--voz-funcional);font-size:var(--sitio-manchete-corpo);line-height:var(--sitio-manchete-entrelinha);font-weight:var(--sitio-manchete-peso);margin:24px 0 0;letter-spacing:-.022em}
.heroi__acento{color:var(--sitio-sinal)}
.heroi__deck{margin:24px 0 0;font-size:var(--sitio-deck-corpo);line-height:var(--sitio-deck-entrelinha);color:var(--sitio-tinta-secundaria);max-width:460px;text-wrap:pretty}
.heroi__acoes{display:flex;gap:12px;margin-top:32px}
.heroi__linha{margin-top:36px;font-family:var(--voz-sistema);font-size:var(--sitio-mono-corpo);line-height:var(--sitio-mono-entrelinha);color:var(--sitio-terminal);display:flex;gap:12px;align-items:center;white-space:nowrap}
.heroi__linha b{font-weight:400;color:var(--sitio-tinta-fraca)}
.heroi__linha i{font-style:normal;color:var(--sitio-tinta-fraca)}
/* ── retrato ─────────────────────────────────────────────────────────────
   O recorte fica de pé no rodapé do herói, sem moldura e sem cartão: o que
   o separa do terreno é a luz da bancada atrás dele — âmbar de um lado,
   ciano do outro, a mesma dupla que ilumina o fundo da peça. */
.retrato{position:relative;z-index:1;align-self:center;height:100%;min-height:420px;display:grid;align-items:center;justify-items:stretch}
.retrato::before{content:"";position:absolute;inset:auto -18% 0 -18%;height:78%;pointer-events:none;background:radial-gradient(58% 62% at 38% 92%,rgba(240,148,0,.17) 0,transparent 70%),radial-gradient(52% 56% at 74% 56%,rgba(82,165,186,.15) 0,transparent 72%)}
/* SEM RECORTE FALSO. A foto que existe é paisagem e tem fundo; em vez de',
   fingir um PNG com alpha, ela DISSOLVE no terreno por máscara — a mesma
   lógica da proteção de degradê que a cena de câmera usava, aplicada nas
   quatro bordas. Quando chegar um recorte de verdade, basta trocar a
   máscara por nada. */
.retrato__quadro{position:relative;width:100%;max-width:100%;height:auto;aspect-ratio:4/5;overflow:hidden;
  -webkit-mask-image:radial-gradient(68% 72% at 52% 40%,#000 0%,#000 46%,transparent 86%);
  mask-image:radial-gradient(68% 72% at 52% 40%,#000 0%,#000 46%,transparent 86%)}
.retrato__quadro img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 22%}
/* O SLOT RECEBE MEDIDA EXPLÍCITA. Sem isso ele cai no aspect-ratio 3/2 de
   reserva do componente, e num invólucro de altura definida é a ALTURA que
   passa a ditar a largura — 572px de alto viravam 858 de largo, 2,4× a
   coluna. Com width/height declarados, a faixa de 352px manda. */
/* A legenda pousa no canto inferior direito DA FOTO, não da coluna: ela é
   cota do retrato, e cota mede a coisa que está do lado dela. */
.retrato__cota{position:absolute;right:8%;bottom:14%;z-index:2;font-family:var(--voz-sistema);font-size:11px;line-height:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--sitio-tinta-cheia);text-shadow:0 1px 6px rgba(2,4,6,.9);pointer-events:none}

/* ── campo: o grafismo interativo ────────────────────────────────────────
   Uma grade de células que a sonda atravessa. No repouso o campo é quase
   apagado — a cor de cada coluna é um grau da matéria, e ela só aparece
   onde a sonda passa. Tilemap com overlay de debug: games e tecnologia
   ditos com o vocabulário de planta baixa que o sistema já tem. */
.campo{display:grid;gap:12px;justify-items:stretch;user-select:none}
.campo__cabeca,.campo__pe{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--voz-sistema);font-size:10px;line-height:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.campo__rotulo{color:var(--sitio-sinal)}
.campo__leitura,.campo__pe{color:var(--sitio-tinta-fraca)}
.campo__leitura b{color:var(--sitio-tinta-cheia);font-weight:400;font-variant-numeric:tabular-nums}
.campo__grade{position:relative;cursor:crosshair;touch-action:none}
.campo__celula{position:absolute;display:block;border-radius:3px;will-change:transform,opacity}
.campo__guia{position:absolute;background-color:var(--sitio-traco-forte);pointer-events:none;opacity:0;transition:opacity var(--t-entrada) var(--e-entrada)}
.campo__guia--h{left:-16px;right:-16px;top:0;height:1px}
.campo__guia--v{top:-16px;bottom:-16px;left:0;width:1px}
.campo__alvo{position:absolute;left:0;top:0;width:22px;height:22px;border:1px solid var(--sitio-sinal);border-radius:5px;pointer-events:none;opacity:0;transition:opacity var(--t-entrada) var(--e-entrada)}

/* ── prompt: a caixa de perguntar ────────────────────────────────────── */
.prompt{position:relative;border:1px solid var(--sitio-traco);border-radius:var(--sitio-raio);background-color:var(--sitio-superficie);padding:20px 24px 22px;box-shadow:var(--sitio-relevo),var(--sitio-luz-de-bordo-forte)}
.prompt__campo{display:flex;align-items:center;gap:14px;padding-bottom:18px}
.prompt__sinal{font-family:var(--voz-sistema);font-size:16px;color:var(--sitio-sinal)}
.prompt__entrada{flex:1;background:transparent;border:0;outline:0;color:var(--sitio-tinta-cheia);font-family:var(--voz-sistema);font-size:15px;line-height:24px}
.prompt__entrada::placeholder{color:var(--sitio-tinta-fraca)}
.prompt__dica{font-family:var(--voz-sistema);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sitio-tinta-fraca);white-space:nowrap}
.prompt__sugestoes{display:flex;flex-wrap:wrap;gap:10px}

/* ficha-chip: a sugestão clicável */
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--sitio-raio-fino);border:1px solid var(--sitio-traco);background-color:var(--sitio-superficie-alta);color:var(--sitio-tinta-secundaria);font-size:13px;font-family:var(--voz-funcional);cursor:pointer;white-space:nowrap;box-shadow:var(--sitio-relevo-baixo),var(--sitio-luz-de-bordo);transition:border-color var(--t-toque) var(--e-entrada),color var(--t-toque) var(--e-entrada),box-shadow var(--t-toque) var(--e-entrada)}
.chip:hover{color:var(--sitio-tinta-cheia);border-color:var(--sitio-traco-forte)}
.chip svg{width:14px;height:14px;color:var(--sitio-tinta-fraca)}
.chip[aria-pressed="true"]{border-color:var(--sitio-sinal);color:var(--sitio-tinta-cheia)}

/* ── ficha: o cartão de projeto ──────────────────────────────────────── */
.ficha{position:relative;display:flex;flex-direction:column;border:1px solid var(--sitio-traco);border-radius:var(--sitio-raio);background-color:var(--sitio-superficie);overflow:hidden;box-shadow:var(--sitio-relevo),var(--sitio-luz-de-bordo);transition:border-color var(--t-entrada) var(--e-entrada),transform var(--t-entrada) var(--e-entrada),box-shadow var(--t-entrada) var(--e-entrada)}
.ficha:hover{border-color:color-mix(in srgb,var(--ficha-tinta,var(--sitio-sinal)) 45%,transparent);transform:translateY(-2px);box-shadow:var(--sitio-relevo-alto),var(--sitio-luz-de-bordo-forte)}
/* A CENA OCUPA O QUADRO INTEIRO. A linguagem da ilustração é PIXEL ART DE
   16 BITS — o mesmo material que o canal já usa, e que o pixelar.mjs do
   repositório produz. O arquivo é de fora: aqui entra o slot, com o
   pixelado preservado e um véu na cor do projeto por cima, para a arte
   pousar na identidade da ficha sem ser repintada. */
.ficha__cena{position:relative;height:176px;background-color:var(--sitio-rebaixo);border-bottom:1px solid var(--sitio-traco);overflow:hidden;display:block;color:color-mix(in srgb,var(--ficha-tinta,var(--sitio-sinal)) 80%,transparent)}
.ficha__cena>*{position:absolute;inset:0;width:100%;height:100%}
.ficha__cena img{image-rendering:pixelated}
.ficha__cena::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,transparent 58%,color-mix(in srgb,var(--sitio-superficie) 82%,transparent) 100%),radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--ficha-tinta,var(--sitio-sinal)) 12%,transparent) 0,transparent 72%)}
.ficha__corpo{padding:20px;display:grid;gap:10px;align-content:start;flex:1}
.ficha__tarja{align-self:start;font-family:var(--voz-sistema);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:5px;color:var(--ficha-tinta,var(--sitio-sinal));background-color:color-mix(in srgb,var(--ficha-tinta,var(--sitio-sinal)) 14%,transparent)}
.ficha__nome{font-family:var(--voz-funcional);font-size:var(--sitio-ficha-corpo);line-height:var(--sitio-ficha-entrelinha);font-weight:400;letter-spacing:-.014em;margin:0;color:var(--sitio-tinta-cheia)}
.ficha__deck{margin:0;font-size:14px;line-height:22px;color:var(--sitio-tinta-secundaria);text-wrap:pretty}
.ficha__pe{display:flex;justify-content:flex-end;padding:0 20px 20px}
.ficha__mais{width:28px;height:28px;border-radius:var(--sitio-raio-miudo);display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--ficha-tinta,var(--sitio-sinal)) 40%,transparent);background-color:color-mix(in srgb,var(--ficha-tinta,var(--sitio-sinal)) 12%,transparent);color:var(--ficha-tinta,var(--sitio-sinal));cursor:pointer;font-family:var(--voz-sistema);font-size:15px;line-height:1}

/* ── medidor: a faixa de números do canal ────────────────────────────── */
.medidor{display:flex;align-items:center;gap:32px}
.medidor__item{display:grid;gap:2px;padding-left:32px;border-left:1px solid var(--sitio-traco)}
.medidor__item:first-child{padding-left:0;border-left:0}
.medidor__chave{display:flex;align-items:center;gap:7px;font-family:var(--voz-funcional);font-size:12px;color:var(--sitio-tinta-fraca)}
.medidor__chave svg{width:13px;height:13px}
.medidor__valor{font-family:var(--voz-sistema);font-size:22px;line-height:28px;color:var(--sitio-tinta-cheia);font-variant-numeric:tabular-nums}
.medidor__valor small{font-size:13px;color:var(--sitio-tinta-secundaria)}

/* ── quadro de vídeo ─────────────────────────────────────────────────── */
.video{border:1px solid var(--sitio-traco);border-radius:var(--sitio-raio);background-color:var(--sitio-superficie);overflow:hidden;box-shadow:var(--sitio-relevo),var(--sitio-luz-de-bordo);transition:border-color var(--t-entrada) var(--e-entrada),box-shadow var(--t-entrada) var(--e-entrada)}
.video:hover{border-color:var(--sitio-traco-forte);box-shadow:var(--sitio-relevo-alto),var(--sitio-luz-de-bordo-forte)}
.video__quadro{position:relative;aspect-ratio:16/9;background-color:var(--sitio-rebaixo);overflow:hidden}
.video__quadro img{width:100%;height:100%;object-fit:cover;display:block}
.video__duracao{position:absolute;right:8px;bottom:8px;font-family:var(--voz-sistema);font-size:11px;padding:2px 6px;border-radius:5px;background-color:rgba(2,4,6,.82);color:#e8e6e5}
.video__corpo{padding:14px 16px 16px;display:grid;gap:8px;grid-template-columns:1fr auto;align-items:start}
.video__nome{margin:0;font-size:14px;line-height:21px;font-weight:500;color:var(--sitio-tinta-cheia);text-wrap:pretty}
.video__meta{grid-column:1/-1;font-family:var(--voz-sistema);font-size:11px;color:var(--sitio-tinta-fraca)}

/* ── recado: o papel colado na mesa ──────────────────────────────────── */
.recado{position:relative;background-color:var(--sitio-papel);color:var(--sitio-papel-tinta);border-radius:3px;padding:20px 22px;box-shadow:var(--sitio-relevo-alto);transform:rotate(-1.2deg)}
.recado__rotulo{font-family:var(--voz-sistema);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sitio-papel-tinta-secundaria)}
.recado__texto{margin:12px 0 0;font-family:var(--voz-funcional);font-size:14px;line-height:22px}

/* ── faixa clara: o papel do fim da página ───────────────────────────── */
.papel{position:relative;z-index:1;margin-top:-48px;padding-top:144px;color:var(--sitio-papel-tinta);
  background-color:var(--sitio-papel);
  background-image:linear-gradient(180deg,#04080c 0%,#0b0c0d 16%,#211f1c 34%,#4d4842 52%,#8f8a80 70%,#c6c3ba 87%,#ecece4 100%);
  background-repeat:no-repeat;background-size:100% 144px}
.papel .secao__deck,.papel .medidor__chave{color:var(--sitio-papel-tinta-secundaria)}
.papel .secao__titulo{color:var(--sitio-papel-tinta)}
.papel .secao__marcador{color:#8a8a82}
.cartao-papel{background-color:var(--sitio-papel-superficie);border:1px solid var(--sitio-papel-traco);border-radius:var(--sitio-raio);padding:24px;box-shadow:0 1px 2px rgba(26,26,24,.06),0 8px 22px -14px rgba(26,26,24,.28),inset 0 1px 0 #fff}
.contato{display:grid;gap:2px}
.contato__linha{display:grid;grid-template-columns:20px 1fr auto;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--sitio-papel-traco);font-size:14px}
.contato__linha:first-of-type{border-top:0}
.contato__valor{font-family:var(--voz-sistema);font-size:13px;color:var(--sitio-papel-tinta-secundaria)}

/* ── rodapé ──────────────────────────────────────────────────────────── */
.rodape{position:relative;z-index:1;background-color:var(--sitio-papel);color:var(--sitio-papel-tinta-secundaria);border-top:1px solid var(--sitio-papel-traco);display:flex;align-items:center;justify-content:space-between;gap:40px;padding:18px 32px;font-size:12.5px;white-space:nowrap}
.rodape__marca{font-family:var(--voz-sistema);color:var(--sitio-papel-tinta)}


/* ── a janela de sistema dentro do sítio ─────────────────────────────────
   Ela é a coisa mais alta da página: raio de janela do sistema operacional
   (10px, o pouso do macOS), o relevo alto e o fio de luz no cromo. O campo
   respeita a saída como ela sai — mono, verbatim, sem quebra automática. */
.sitio .janela{border-radius:var(--sitio-raio-janela);box-shadow:var(--sitio-relevo-alto),var(--sitio-luz-de-bordo-forte)}
.sitio .janela__cromo{border-radius:var(--sitio-raio-janela) var(--sitio-raio-janela) 0 0;height:38px;padding:0 14px;gap:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sitio .janela__sinal{width:16px;height:16px}
.sitio .janela__titulo{margin-left:0;font-size:11px;line-height:16px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitio .janela__campo{padding:14px 16px 16px;font-size:12.5px;line-height:21px;white-space:pre;overflow-x:auto;tab-size:8}
.sitio .janela__cursor{width:7px;height:15px;vertical-align:-2px;animation:pisca 1060ms steps(1) infinite}
/* SAÍDA DE TERMINAL TEM UM CORPO SÓ. O `saida-codigo` do sistema é medido
   para vídeo (26/40); dentro da janela do sítio ele herda o corpo do campo,
   porque `exit 0` é uma linha da saída como qualquer outra — se destoa no
   tamanho, deixa de parecer terminal e passa a parecer legenda. */
.sitio .saida-codigo{font-size:inherit;line-height:inherit}


/* ── busca: os dois blocos têm a MESMA altura ────────────────────────────
   Simetria é requisito, não gosto: a linha do grid estica, e o painel da
   direita distribui o próprio conteúdo entre topo e base em vez de
   empilhar no topo e sobrar. O resultado da busca cai numa linha própria,
   embaixo dos dois — assim nenhum dos lados cresce sozinho. */
.busca{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:stretch;position:relative;z-index:1}
.busca__resultado{grid-column:1 / -1}
.painel{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.painel__cabeca{display:flex;align-items:center;gap:9px}
.painel__cabeca svg{width:15px;height:15px;color:var(--sitio-sinal)}
.painel__linha{display:flex;justify-content:space-between;gap:16px;font-family:var(--voz-sistema);font-size:12px;line-height:22px;color:var(--sitio-tinta-secundaria)}
.painel__linha b{font-weight:400;color:var(--sitio-tinta-cheia);font-variant-numeric:tabular-nums}
.painel__pe{font-family:var(--voz-sistema);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sitio-tinta-fraca)}

/* A transição do preto para o papel NÃO é um elemento: ela é a abertura da
   seção clara (ver .papel). Faixa solta entre seções vira intervalo morto e
   quebra a cadência — o degradê tem de pertencer a alguém. As paradas sobem
   pelo lado quente do neutro, que é o lado em que a bancada é iluminada. */

/* ── tema: a linha de assunto com a barra na escala compartilhada ────────
   O caça-palavras saiu. O que o canal fala mais é DADO, e dado nesta casa
   é barra na régua declarada uma vez — a família de medida, na escala do
   sítio. Cada linha diz o nome escrito, a barra e a contagem. */
.temas{display:grid}
.tema{display:grid;grid-template-columns:10px 168px minmax(0,1fr) 68px;gap:16px;align-items:center;width:100%;padding:13px 0;border:0;border-top:1px solid var(--sitio-traco);background:none;text-align:left;cursor:pointer;transition:opacity var(--t-toque) var(--e-entrada)}
.tema:first-child{border-top:0}
.tema__ponto{width:10px;height:10px;border-radius:50%;background-image:var(--veu-materia);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.tema__nome{font-family:var(--voz-sistema);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sitio-tinta-secundaria);transition:color var(--t-toque) var(--e-entrada)}
.tema__trilho{height:8px;border-radius:var(--sitio-raio-capsula);background-color:var(--sitio-traco);box-shadow:inset 0 1px 3px rgba(0,0,0,.55);overflow:hidden}
.tema__barra{height:8px;border-radius:var(--sitio-raio-capsula);background-image:linear-gradient(180deg,rgba(255,255,255,.13) 0,rgba(0,0,0,.2) 100%);transition:width var(--t-pintura) var(--e-entrada)}
.tema__valor{font-family:var(--voz-sistema);font-size:13px;color:var(--sitio-tinta-cheia);text-align:right;font-variant-numeric:tabular-nums}
.tema:hover .tema__nome,.tema[aria-pressed="true"] .tema__nome{color:var(--sitio-tinta-cheia)}
.temas--filtrado .tema[aria-pressed="false"]{opacity:.34}
.escala-sitio{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:18px}
.escala-sitio i{height:1px;background-color:var(--sitio-traco-forte)}
.escala-sitio span{font-family:var(--voz-sistema);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sitio-tinta-fraca)}

/* ── membros: o portão ──────────────────────────────────────────────────
   A área de membros pousa como as outras superfícies do sítio, e o acesso
   fala na voz de sistema: e-mail, link, sem senha. */
.membros{display:grid;grid-template-columns:minmax(0,1fr) 1px 340px;gap:32px;align-items:stretch;margin-top:28px;padding:24px 28px}
.membros__fio{background-color:var(--sitio-traco)}
/* UM NÍVEL SÓ. Não há tabela de planos nem comparação de colunas: a linha',
   abaixo diz o grau único, e as vantagens vêm listadas em seguida. */
.membros__grau{display:flex;align-items:center;gap:9px;font-family:var(--voz-sistema);font-size:11px;line-height:18px;letter-spacing:.04em;color:var(--sitio-tinta-secundaria)}
.membros__grau svg{width:14px;height:14px;color:var(--sitio-realce-verde);flex:none}
.membros__vantagens{display:grid;gap:0;margin-top:18px}
.membros__vantagem{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--sitio-traco)}
.membros__vantagem:first-child{border-top:0}
.membros__vantagem svg{width:16px;height:16px;color:var(--sitio-sinal);margin-top:3px}
.membros__vantagem b{display:block;font-family:var(--voz-funcional);font-size:15px;font-weight:500;color:var(--sitio-tinta-cheia)}
.membros__vantagem span{font-size:13px;line-height:21px;color:var(--sitio-tinta-secundaria)}
.acesso{display:flex;flex-direction:column;justify-content:center;gap:16px;align-self:center}
.acesso__campo{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;border-radius:var(--sitio-raio-fino);border:1px solid var(--sitio-traco-forte);background-color:var(--sitio-rebaixo);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.acesso__campo svg{width:15px;height:15px;color:var(--sitio-tinta-fraca)}
.acesso__campo input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--sitio-tinta-cheia);font-family:var(--voz-sistema);font-size:13px}
.acesso__campo input::placeholder{color:var(--sitio-tinta-fraca)}
/* COR DE ARTEFATO DO MUNDO: o vermelho do YouTube entra como é e não se
   repinta para caber na paleta — a mesma regra do cta__marca--youtube nas
   peças de vídeo. É a única exceção ao sinal âmbar no sítio, e existe porque
   o botão não é uma ação nossa: é a porta de outra plataforma. */
.acesso__youtube{justify-content:center;height:46px;background-color:#ff0000;color:#ffffff;border-color:transparent;box-shadow:var(--sitio-relevo-baixo),inset 0 1px 0 rgba(255,255,255,.24)}
.acesso__youtube:hover{background-color:#f42a2a;color:#ffffff}
.acesso__youtube svg{width:18px;height:18px}
.acesso__nota{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;font-family:var(--voz-sistema);font-size:11px;line-height:18px;color:var(--sitio-tinta-fraca)}
.acesso__nota svg{width:14px;height:14px;margin-top:2px}
.pendente{font-family:var(--voz-sistema);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sitio-sinal);border:1px dashed color-mix(in srgb,var(--sitio-sinal) 40%,transparent);border-radius:5px;padding:5px 9px;justify-self:start}

/* ── faixa: o terreno interativo da abertura ─────────────────────────────
   O campo deixa de ser um bloco no meio do herói e passa a ser o CHÃO da
   abertura: toda a largura da página, e verticalmente do começo da seção 01
   até o fim da busca. O conteúdo pousa em cima; o campo fica atrás, e é a
   sonda que o revela. */
.faixa{position:relative;isolation:isolate;padding-bottom:32px;cursor:crosshair}
.faixa a,.faixa button,.faixa input,.faixa label{cursor:auto}
.faixa a,.faixa button{cursor:pointer}
.faixa>.campo--preenche{position:absolute;inset:0;z-index:0}
.faixa>*:not(.campo){position:relative;z-index:1}
.campo--preenche{display:block;pointer-events:none}
.campo--preenche .campo__grade{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* o campo some nas bordas da faixa em vez de morrer no corte */
.campo--preenche .campo__grade{mask-image:radial-gradient(118% 96% at 50% 22%,#000 0%,#000 52%,transparent 88%)}
.campo--preenche .campo__cota{position:absolute;top:18px;right:64px;z-index:2;pointer-events:none}

/* ── sprite: pixel art animada ───────────────────────────────────────────
   A arte é ARQUIVO DE FORA, sempre. Aqui mora a máquina de quadros: uma
   folha horizontal andando em passo inteiro, com o pixelado preservado. O
   piso é a sombra que faz o personagem pousar na mesa em vez de flutuar. */
.sprite{position:relative;display:grid;place-items:end center}
@keyframes sprite-anda{from{background-position-x:0}to{background-position-x:var(--sprite-fim)}}
.sprite__quadro{position:absolute;inset:0;background-repeat:no-repeat;image-rendering:pixelated;animation-name:sprite-anda;animation-iteration-count:infinite;z-index:1}
.sprite__piso{position:absolute;left:8%;right:8%;bottom:-4px;height:16px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55) 0,transparent 72%);pointer-events:none}
.sprite__rotulo{position:relative;z-index:2;transform:translateY(18px);font-family:var(--voz-sistema);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sitio-tinta-fraca)}
.sprite--vazio{place-items:center;border:1px dashed var(--sitio-traco-forte);border-radius:var(--sitio-raio);background-color:var(--sitio-rebaixo)}
.sprite--vazio span{display:grid;gap:6px;text-align:center;padding:0 14px;font-family:var(--voz-sistema);font-size:10px;line-height:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--sitio-tinta-fraca)}
.sprite--vazio em{font-style:normal;display:block}
.sprite--vazio b{font-weight:400;color:var(--sitio-sinal)}