/* Nocturne RP · web · capa Neobrutal Nocturne (30/10/2026)
   Se carga DESPUÉS de style.css. La portada (logo neón y foto) se queda cinematográfica;
   lo que informa (botones, tarjetas, pasos, normativa) usa el estilo de la interfaz del juego.
   Para volver atrás: quitar su <link> de index.html y whitelist.html. */
:root{
  --noche:#060509;--tinta:#0D0B12;--panel-a:#16131D;--panel-b:#16131D;
  --borde:#6A1BE0;--sombra:#8B3DFF;--hondo:#4A1C99;--suave:#D4BBFF;--nucleo:#F6D9FF;--brillo:#C24DFF;
  --linea:#231E2E;--linea-2:#2E2840;
}
h2{font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:0;padding-right:4px}
h3{font-weight:800;font-style:italic;letter-spacing:0}
.hero h1{font-weight:800;font-style:italic;letter-spacing:0}

/* Botones: relleno violeta, borde neón claro y sombra desplazada; al pulsar se «hunden» */
.btn{border-radius:10px;background:var(--violeta);border:2px solid var(--nucleo);box-shadow:4px 4px 0 var(--hondo),0 0 18px rgba(194,77,255,.45);
  font:italic 800 15px var(--display);text-transform:uppercase;letter-spacing:0;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--hondo),0 0 24px rgba(194,77,255,.6)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--hondo)}
.btn--ghost{background:var(--tinta);border-color:var(--borde);box-shadow:4px 4px 0 var(--sombra);color:var(--plata)}
.btn--ghost:hover{background:#211A2E;box-shadow:5px 5px 0 var(--sombra)}
.btn--discord{background:#5865F2;border-color:#C9CDFB;box-shadow:4px 4px 0 #2B3190}
.btn--discord:hover{background:#4752C4;box-shadow:5px 5px 0 #2B3190}

/* Barra superior: la navegación va en un panel con borde y sombra; la sección activa se enciende */
.top.scrolled,.top--solida{background:rgba(6,5,9,.94);border-bottom:2px solid var(--borde);-webkit-backdrop-filter:none;backdrop-filter:none}
.marca img{width:40px;height:40px;padding:3px;border-radius:10px;background:var(--tinta);border:2px solid var(--borde);box-shadow:3px 3px 0 var(--sombra)}
.marca span{font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:0}
.nav{gap:4px;padding:5px;background:var(--tinta);border:2px solid var(--borde);border-radius:12px;box-shadow:3px 3px 0 var(--sombra)}
.nav a{padding:7px 14px;border:2px solid transparent;border-radius:8px;color:var(--gris);font:italic 800 13px var(--display);text-transform:uppercase;letter-spacing:0;transition:background .15s,color .15s}
.nav a:hover{background:#211A2E;color:var(--plata)}
.nav a.on{background:rgba(139,61,255,.2);border-color:var(--brillo);color:var(--nucleo);text-shadow:0 0 8px rgba(194,77,255,.6);box-shadow:0 0 14px rgba(194,77,255,.45)}
.nav a.on::after{display:none}

/* Estado y comando */
.pill{border-radius:8px;background:var(--tinta);border:2px solid var(--ok);box-shadow:3px 3px 0 #1F7A52;transform:rotate(-2deg);font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:13px}
.pill i{border-radius:2px}
.connect{border-radius:12px;background:var(--tinta);border:2px solid var(--borde);box-shadow:3px 3px 0 var(--sombra)}
.connect kbd{background:var(--violeta);color:#fff;border:2px solid var(--nucleo);border-radius:7px;box-shadow:2px 2px 0 var(--hondo)}
.copy{background:#16131D;border:2px solid var(--borde);border-radius:8px;font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase}
.copy:hover{background:#211A2E}

/* Secciones */
.sec + .sec{border-top:2px solid var(--linea)}
.sec-head h2::after{content:"";display:block;width:72px;height:6px;margin-top:14px;background:repeating-linear-gradient(135deg,var(--violeta) 0 8px,#A35BFF 8px 16px);border:2px solid var(--borde);border-radius:3px}

/* La ciudad, por dentro */
.shot img{border-radius:16px;border:2.5px solid var(--borde);box-shadow:7px 7px 0 var(--sombra)}
.shot figcaption{left:-8px;bottom:18px;border-radius:7px;background:var(--suave);border:2px solid var(--noche);color:var(--noche);transform:rotate(-3deg);box-shadow:3px 3px 0 var(--hondo);
  font:italic 800 13px var(--display);text-transform:uppercase}
.shot figcaption b{color:var(--noche);font-weight:800}
.txt .quien{justify-self:start;padding:3px 10px;border-radius:7px;background:var(--violeta);color:#fff;border:2px solid var(--noche);transform:rotate(-2deg);box-shadow:2px 2px 0 var(--hondo);
  font:italic 800 13px var(--display);text-transform:uppercase}
.puntos li::before{flex:0 0 9px;height:9px;margin-top:9px;border-radius:2px;box-shadow:2px 2px 0 var(--hondo)}

/* Cómo entrar */
.pasos::before{height:3px;background:var(--borde)}
.paso::before{border-radius:10px;background:var(--violeta);border:2px solid var(--nucleo);box-shadow:3px 3px 0 var(--hondo);font:italic 800 18px var(--display);color:#fff}
.paso:nth-child(even)::before{transform:rotate(-4deg)}
.paso:nth-child(odd)::before{transform:rotate(3deg)}
.paso a{display:inline-block;padding-bottom:2px;border-bottom:2px solid var(--borde)}

/* Buscamos */
.cartel{border-radius:16px;border:2.5px solid var(--borde);box-shadow:5px 5px 0 var(--sombra);transition:transform .15s,box-shadow .15s}
.cartel:hover{transform:translate(-2px,-2px);border-color:var(--brillo);box-shadow:7px 7px 0 var(--sombra),0 0 22px rgba(194,77,255,.45)}
.cartel h3{text-transform:uppercase}
.cartel .ir{border-radius:8px;background:var(--violeta);border:2px solid var(--nucleo);box-shadow:3px 3px 0 var(--hondo);font:italic 800 13px var(--display);text-transform:uppercase}

/* Normativa */
.ley{border-radius:12px;border:2px solid var(--borde);background:var(--tinta);box-shadow:4px 4px 0 var(--sombra);transition:transform .15s,box-shadow .15s}
.ley:hover{transform:translate(-1px,-1px);border-color:var(--brillo);box-shadow:5px 5px 0 var(--sombra),0 0 18px rgba(194,77,255,.4)}
.ley b{font:italic 800 18px var(--display);text-transform:uppercase}

/* Cierre y pie */
.cierre{border-top:2px solid var(--linea)}
.pie{border-top:2px solid var(--linea)}
@media (prefers-reduced-motion:reduce){.btn,.cartel,.ley{transition:none}}

/* ===== Página de whitelist ===== */
.wl-cab h1{font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:0;padding-right:4px}
/* Recorrido: tres tramos con borde; el actual a rayas y encendido */
.ruta{gap:10px}
.ruta li{padding-right:0;font:italic 800 13px var(--display);text-transform:uppercase}
.ruta li::before{height:12px;border-radius:5px;background:var(--tinta);border:2px solid var(--borde)}
.ruta li.hecho::before{background:var(--violeta);border-color:var(--borde);box-shadow:2px 2px 0 var(--hondo)}
.ruta li.ahora{color:var(--nucleo)}
.ruta li.ahora::before{background:repeating-linear-gradient(135deg,var(--violeta) 0 8px,#A35BFF 8px 16px);border-color:var(--brillo);box-shadow:0 0 14px rgba(194,77,255,.55)}
/* Usuario conectado */
.yo{border-radius:10px;border:2px solid var(--borde);background:var(--tinta);box-shadow:3px 3px 0 var(--sombra)}
.yo img{border-radius:7px;border:2px solid var(--borde)}
.yo button{font:italic 800 12px var(--display);text-transform:uppercase}
/* Avisos */
#notice{border-radius:12px;border:2px solid var(--rust);background:var(--tinta);box-shadow:3px 3px 0 #7A2A24;color:#F7C3BD}
#notice.ok{border-color:var(--ok);box-shadow:3px 3px 0 #1F7A52;color:#BDF2D9}
/* Paneles y estados */
.panel{border-radius:16px;border:2.5px solid var(--borde);background:var(--tinta);box-shadow:5px 5px 0 var(--sombra)}
.panel h2{text-transform:uppercase}
.panel--ko{border-color:var(--rust);box-shadow:5px 5px 0 #7A2A24}
.lista li::before{flex:0 0 9px;height:9px;margin-top:9px;box-shadow:2px 2px 0 var(--hondo)}
.ico{border-radius:12px;background:var(--panel-a);border:2px solid var(--borde);box-shadow:3px 3px 0 var(--sombra);transform:rotate(-3deg)}
.ok .ico{border-color:var(--ok);box-shadow:3px 3px 0 #1F7A52}
.wait .ico{border-color:var(--aviso);box-shadow:3px 3px 0 #7A5A18}
.ko .ico{border-color:var(--rust);box-shadow:3px 3px 0 #7A2A24}
.motivo{border:2px solid var(--rust);border-left-width:6px;border-radius:10px;background:var(--noche)}
/* Formulario */
.chip{border-radius:8px;border:2px solid var(--noche);background:var(--suave);color:var(--noche);transform:rotate(-2deg);box-shadow:2px 2px 0 var(--hondo);font:italic 800 12px var(--display);text-transform:uppercase}
.bloque{border-bottom:2px solid var(--linea)}
.bloque h2{text-transform:uppercase}
.bloque span{padding:2px 9px;border-radius:7px;background:var(--violeta);color:#fff;border:2px solid var(--noche);transform:rotate(2deg);box-shadow:2px 2px 0 var(--hondo);font:italic 800 12px var(--display);text-transform:uppercase}
.q{border-radius:14px;border:2px solid var(--borde);background:var(--tinta);box-shadow:4px 4px 0 var(--sombra)}
.q.err{border-color:var(--rust);box-shadow:4px 4px 0 #7A2A24}
.q legend,.q .t{font-weight:700}
.op{border:2px solid var(--linea-2);border-radius:10px;background:var(--noche)}
.op:hover{border-color:var(--borde);background:#211A2E}
.op:has(input:checked){border-color:var(--brillo);background:rgba(139,61,255,.2);color:var(--nucleo);box-shadow:3px 3px 0 var(--sombra),0 0 16px rgba(194,77,255,.45)}
.q textarea,.q input[type=text],.q input[type=url],.q input[type=number]{background:var(--noche);border:2px solid #4A4060;border-radius:10px}
.q textarea:focus,.q input:focus{outline:none;border-color:var(--brillo);box-shadow:0 0 16px rgba(194,77,255,.45)}
/* Barra de envío */
.envio{background:linear-gradient(0deg,var(--noche) 70%,rgba(6,5,9,0))}
.prog b{font:italic 800 14px var(--display);text-transform:uppercase}
.barra{height:14px;border-radius:7px;background:var(--noche);border:2px solid var(--borde);box-shadow:2px 2px 0 var(--sombra)}
.barra i{border-radius:4px;background:repeating-linear-gradient(135deg,var(--violeta) 0 8px,#A35BFF 8px 16px);box-shadow:0 0 12px rgba(194,77,255,.6)}
/* Revisión */
.res{border-bottom:2px solid var(--linea)}
.res b{font-weight:800;font-style:italic}
.res button{font:italic 800 13px var(--display);text-transform:uppercase}