/* Y2K + Neobrutalismo (02/11) — compartilhado pelo /raio-x/ e pelo /app/.
   A página inicial (index.html) tem a mesma base inline. Paleta: preto, papel/branco, vermelho + cromo. */
:root {
  --papel: #f3f1ec;
  --branco: #ffffff;
  --tinta: #0b0b0c;
  --fraco: #55565c;
  --vermelho: #e5262b;
  --vermelho-escuro: #b81d21;
  --cromo: linear-gradient(180deg, #ffffff 0%, #e4e5e9 30%, #9a9da4 50%, #f1f2f5 62%, #babdc3 100%);
  --borda: 3px solid var(--tinta);
  --sombra: 6px 6px 0 var(--tinta);
  --sombra-p: 4px 4px 0 var(--tinta);
  --titulo: "Archivo Black", Impact, sans-serif;
  --pixel: Silkscreen, "Courier New", monospace;
  --mono: "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--tinta); background-color: var(--papel);
  background-image:
    linear-gradient(rgba(11,11,12,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,11,12,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
code { font-family: var(--mono); font-size: .86em; background: var(--branco); border: 1.5px solid var(--tinta); padding: 0 4px; }
[hidden] { display: none !important; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

.faixa { background: var(--tinta); color: var(--branco); border-bottom: var(--borda); overflow: hidden; white-space: nowrap; }
.faixa div { display: inline-block; padding: 9px 0; font-family: var(--pixel); font-size: 13px; letter-spacing: .06em; animation: correr 28s linear infinite; }
.faixa i { color: var(--vermelho); font-style: normal; margin: 0 14px; }
@keyframes correr { to { transform: translateX(-50%); } }

.janela { background: var(--branco); border: var(--borda); box-shadow: var(--sombra); }
.barra {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  background: var(--cromo); border-bottom: var(--borda); font-family: var(--pixel); font-size: 12px; letter-spacing: .04em;
}
.barra .bt { margin-left: auto; display: flex; gap: 5px; }
.barra .bt span { width: 15px; height: 15px; border: 2px solid var(--tinta); background: var(--branco); display: grid; place-items: center; font-size: 9px; line-height: 1; }
.barra .bt span:last-child { background: var(--vermelho); color: var(--branco); }
.miolo { padding: 18px; }

.etiqueta { display: inline-block; font-family: var(--pixel); font-size: 12px; letter-spacing: .06em; background: var(--tinta); color: var(--branco); padding: 4px 9px; }
.etiqueta i { color: var(--vermelho); font-style: normal; }
h1, h2 { font-family: var(--titulo); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 8vw, 50px); line-height: 1.02; margin: 14px 0 14px; }
h2 { font-size: clamp(24px, 6vw, 32px); line-height: 1.05; margin: 32px 0 14px; }
h3 { font-size: 18px; margin: 0 0 6px; }
.risco { background: var(--vermelho); color: var(--branco); padding: 0 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sub { font-size: 17px; }
.fraco { color: var(--fraco); }
.pequeno { font-size: 13px; }

label { display: block; font-family: var(--pixel); font-size: 12px; letter-spacing: .03em; margin: 14px 0 5px; }
input[type=email], input[type=text], input[type=url], textarea, select {
  width: 100%; padding: 12px 13px; border: var(--borda); border-radius: 0;
  background: var(--papel); color: var(--tinta); font: inherit; font-size: 16px;
}
textarea { font-family: var(--mono); font-size: 13px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; background: var(--branco); box-shadow: var(--sombra-p); }
.marcar { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 15px; cursor: pointer; }
.marcar input { width: 22px; height: 22px; flex: none; accent-color: var(--vermelho); margin: 1px 0 0; }

.enviar, .botao-p {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border: var(--borda); box-shadow: var(--sombra-p); background: var(--vermelho); color: var(--branco);
  font-family: var(--titulo); font-size: 15px; letter-spacing: .02em; text-transform: uppercase; cursor: pointer;
  text-decoration: none; transition: transform .1s, box-shadow .1s;
}
.enviar { width: 100%; margin-top: 18px; font-size: 16px; padding: 14px; }
.enviar:hover, .botao-p:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.enviar:active, .botao-p:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tinta); }
.enviar:disabled { opacity: .6; cursor: wait; }
.botao-p.claro { background: var(--branco); color: var(--tinta); }
.botao-p.preto { background: var(--tinta); color: var(--branco); }
.botao-p.mini { padding: 6px 10px; font-size: 12px; box-shadow: 3px 3px 0 var(--tinta); }
:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }
.erro { color: var(--vermelho-escuro); font-weight: 700; }

.cartao { background: var(--branco); border: var(--borda); box-shadow: var(--sombra-p); padding: 16px; }
.grade { display: grid; gap: 14px; }
@media (min-width: 640px) { .grade.duas { grid-template-columns: 1fr 1fr; } }

pre.codigo {
  margin: 10px 0 0; padding: 14px; background: var(--tinta); color: #e4e4e7; border: var(--borda);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; white-space: pre;
}
.copiavel { position: relative; }
.copiavel .botao-p { position: absolute; top: 18px; right: 8px; }

.estado { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 3px 8px; border: 2px solid var(--tinta); white-space: nowrap; }
.estado.ruim { background: var(--vermelho); color: var(--branco); }
.estado.bom { background: var(--tinta); color: var(--branco); }
.estado.neutro { background: var(--branco); }

.placar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.placar div { background: var(--branco); border: var(--borda); padding: 10px 12px; }
.placar div.ruim { background: var(--vermelho); color: var(--branco); }
.placar b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 30px; line-height: 1.05; }
.placar span { font-family: var(--pixel); font-size: 11px; }
.linhas { list-style: none; margin: 0; padding: 0; border: var(--borda); background: var(--branco); }
.linhas li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 2px solid var(--tinta); }
.linhas li:last-child { border-bottom: 0; }
.linhas .nome { font-family: var(--mono); font-size: 14px; word-break: break-all; }
.alerta { border: var(--borda); background: var(--branco); padding: 12px 14px; margin-top: 12px; border-left: 12px solid var(--vermelho); }

footer { text-align: center; font-family: var(--pixel); font-size: 12px; padding: 56px 0 44px; }
@media (prefers-reduced-motion: reduce) { .faixa div { animation: none; } .enviar, .botao-p { transition: none; } }

/* Grade e lista não esticam com <pre> comprido dentro (o pre rola sozinho). */
.grade, .passos { grid-template-columns: minmax(0, 1fr); }
.passos li, .cartao, .janela, .miolo { min-width: 0; }
pre.codigo { max-width: 100%; }
.copiavel pre.codigo { padding-right: 96px; }
/* Rótulo de caixa de marcar é texto corrido: fonte normal, não pixel. */
label.marcar, label.item { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 15px; letter-spacing: 0; }