@font-face { font-family: 'VT323'; src: url('/fuentes/vt323.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url('/fuentes/vt323-ext.woff2') format('woff2'); unicode-range: U+0100-024F; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/fuentes/orbitron-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/fuentes/orbitron-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --viridio: #6bd47e; --viridio2: #3e9a52; --magenta: #ff4fa3; --cian: #39e6ff; --ambar: #ffb341;
  --fondo: #07060d; --panel: rgba(14, 12, 26, 0.86); --borde: rgba(107, 212, 126, 0.35); --texto: #e8f3ea; --apagado: #8f9aa6;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); font-family: 'VT323', monospace; font-size: 20px; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
.neon { font-family: 'Orbitron', sans-serif; font-weight: 900; color: #eaffef; letter-spacing: .08em;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--viridio), 0 0 22px var(--viridio), 0 0 44px var(--viridio2), 0 0 80px var(--viridio2); }
.cromo { font-family: 'Orbitron', sans-serif; font-weight: 900; letter-spacing: .35em;
  background: linear-gradient(180deg, #ffe4f6 0%, #ff7fd0 45%, #b3127a 50%, #ff3fb4 70%, #ffd3ef 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 79, 163, .7)); }
.parpadeo { animation: parpadeo 4s infinite; }
@keyframes parpadeo { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1 } 20%, 24%, 55% { opacity: .35 } }
.boton { display: inline-block; cursor: pointer; border: 2px solid var(--viridio); background: rgba(107, 212, 126, .08); color: var(--viridio);
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .15em; padding: 12px 22px; text-transform: uppercase;
  box-shadow: 0 0 12px rgba(107, 212, 126, .35), inset 0 0 12px rgba(107, 212, 126, .15); transition: all .15s; text-decoration: none; }
.boton:hover, .boton:focus-visible { background: var(--viridio); color: #06140a; box-shadow: 0 0 24px var(--viridio); outline: none; }
.boton.rosa { border-color: var(--magenta); color: var(--magenta); background: rgba(255, 79, 163, .08); box-shadow: 0 0 12px rgba(255, 79, 163, .35); }
.boton.rosa:hover { background: var(--magenta); color: #1a0010; }
.boton.peq { font-size: 12px; padding: 7px 12px; }
.boton:disabled { opacity: .4; cursor: not-allowed; }
.panel { background: var(--panel); border: 1px solid var(--borde); box-shadow: 0 0 20px rgba(0, 0, 0, .6), inset 0 0 30px rgba(107, 212, 126, .04); }
.lineas::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); }
input { font-family: inherit; font-size: 22px; background: rgba(0, 0, 0, .55); color: var(--texto); border: 1px solid #2f4a37; padding: 10px 12px; width: 100%; outline: none; }
input:focus { border-color: var(--viridio); box-shadow: 0 0 10px rgba(107, 212, 126, .4); }
label { color: var(--apagado); font-size: 18px; display: block; margin: 12px 0 4px; }
.error { color: #ff6b6b; min-height: 24px; margin-top: 8px; }