:root {
    --negro:#070612;
    --oscuro:#12101a;
    --gris:#1d1a28;
    --borde:#393444;
    --blanco:#f7f7f7;
    --gris-texto:#c4c1ce;
    --naranja:#ff7518;
    --naranja-claro:#ffb15e;
    --morado:#8d43d7;
    --verde:#28d3a6;
    --azul:#2ac8ef;
    --rojo:#ef5b7d;
}

* { box-sizing:border-box; 
    margin:0; 
    padding:0; 
}

html { 
    scroll-behavior:smooth; 
}

body { 
    min-height:100vh; 
    background:var(--negro); 
    color:var(--blanco); font-family:Arial,Helvetica,sans-serif; line-height:1.5; }

a { color:inherit; 
    text-decoration:none; 
}

button,input { 
    font:inherit; 
}

/* Cabecera general */
.encabezado { 
    background:linear-gradient(90deg,#111018 0%,#15111d 55%,#100f17 100%); 
    border-bottom:1px solid var(--borde); 
}
.barra { 
    width:min(1180px,94%); 
    margin:auto; 
    min-height:105px; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:20px; 
}
.marca { 
    display:flex; 
    align-items:center; 
    gap:14px; 
}
.logo-institucional { 
    width:245px; 
    max-height:58px; 
    object-fit:contain; 
    display:block; 
}
.separador { 
    width:1px; 
    height:48px; 
    background:var(--borde); 
}
.marca-texto { 
    display:flex; 
    align-items:center; 
    gap:8px; 
}
.marca-icono { 
    font-size:1.6rem; 
}
.marca h1 { 
    font-size:1.6rem; 
    line-height:1.05; }
.marca p { 
    color:var(--gris-texto); 
    font-size:.95rem; 
    margin-top:3px; 
}
.navegacion { 
    display:flex; 
    align-items:center; 
    gap:12px; }
.nav-item { 
    min-width:82px; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:3px; 
    padding:8px 10px; 
    border-radius:9px; 
    color:var(--gris-texto); 
    font-weight:bold; 
}
.nav-item:hover,.nav-item.activo { 
    color:var(--naranja-claro); 
    background:rgba(255,117,24,.08); 
}
.nav-icono { 
    font-size:1.3rem; 
    line-height:1; 
}

/* Portada basada en la interfaz aprobada por el profesor */
.pagina-inicio { 
    background:#070612; 
}
.inicio-cabecera { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    z-index:10; 
    min-height:82px; 
    display:flex; 
    align-items:center; 
    justify-content:flex-start; 
    gap:18px; 
    padding:12px 34px; 
    background:linear-gradient(180deg,rgba(5,4,18,.92),rgba(5,4,18,.38)); 
}
.inicio-marca img { 
    width:210px; 
    max-height:58px; 
    object-fit:contain; 
    display:block; 
}
.inicio-sistemas { 
    display:flex; 
    align-items:center; 
    gap:9px; 
}
.inicio-sistemas .icono { 
    font-size:1.65rem; 
}
.inicio-sistemas strong { 
    display:block; 
    font-size:1.05rem; 
}
.inicio-sistemas small { 
    display:block; 
    color:#d8d5e8; 
    font-size:.72rem; 
}
.inicio-nav { 
    margin-left:auto; 
    display:flex; 
    align-items:center; 
    gap:24px; 
    font-weight:bold; 
    font-size:1rem; 
}
.inicio-nav a { 
    color:#fff; 
    opacity:.94; 
}
.inicio-nav a:hover { 
    color:var(--naranja-claro); 
}

.menu-principal { 
    min-height:760px; 
    position:relative; 
    overflow:hidden; 
    background-image:url('../img/hero-halloween.png'); 
    background-size:cover; 
    background-position:center; 
}
.menu-overlay { 
    position:absolute; 
    inset:0; 
    background:linear-gradient(90deg,rgba(8,4,30,.82) 0%,rgba(11,7,38,.56) 45%,rgba(6,5,26,.75) 100%); 
}
.menu-contenido { 
    position:relative; 
    z-index:2; 
    width:min(1400px,94%); 
    margin:auto; 
    padding:112px 0 40px; 
}
.menu-titulo { 
    text-align:center; 
    margin-bottom:16px; 
}
.menu-titulo p { 
    color:#f2effb; 
    font-size:1rem; 
    margin-top:8px; 
    text-shadow:0 2px 5px #000; 
}
.titulo-desafio { 
    color:#fff; 
    font-weight:900; 
    font-size:clamp(2.5rem,5vw,4.3rem); 
    line-height:.95; 
    letter-spacing:-2px; 
    text-shadow:0 4px 0 #3c1a57,0 0 18px rgba(255,117,24,.25); 
}
.titulo-halloween { 
    color:#ff7417; 
    font-weight:900; 
    font-size:clamp(3rem,6vw,5.2rem); 
    line-height:.95; 
    letter-spacing:-2px; 
    text-shadow:0 4px 0 #7e270c,0 0 20px rgba(255,117,24,.25); 
}
.jugador-barra { 
    width:min(960px,100%); 
    margin:0 auto 14px; 
    padding:12px 18px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:9px; 
    background:rgba(8,7,25,.68); 
    border:1px solid rgba(255,255,255,.16); 
    border-radius:999px; 
    color:#eeeaf8; 
    font-size:.98rem; 
}
.jugador-barra strong { 
    color:#ff9d4d; 
}
.jugador-barra a { 
    color:#8ed8ff; 
    margin-left:5px; 
}
.menu-layout { 
    display:grid; 
    grid-template-columns:minmax(0,1fr) 300px; 
    gap:18px; 
    align-items:stretch; 
}
.subtitulo-reto { 
    display:flex; 
    align-items:center; 
    gap:16px; 
    justify-content:center; 
    margin:8px 0 14px; 
}
.subtitulo-reto span { 
    height:3px; 
    width:125px; 
    background:#ff8a1c; 
    border-radius:3px; }
.subtitulo-reto h2 { 
    color:#fff; 
    font-size:1.55rem; 
    text-shadow:0 2px 4px #000; 
}
.retos-grid { 
    display:grid; 
    grid-template-columns:repeat(4,minmax(0,1fr)); 
    gap:14px; 
}
.reto-card { 
    min-height:270px; 
    padding:18px 14px 14px; 
    border:2px solid; 
    border-radius:16px; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    text-align:center; 
    background:rgba(10,9,31,.74); 
    box-shadow:0 8px 20px rgba(0,0,0,.32); 
}
.reto-card:hover { 
    transform:translateY(-5px); 
}
.reto-memoria { 
    border-color:#b44bff; 
}
.reto-codigo { 
    border-color:#16d9ad; 
}
.reto-velocidad { 
    border-color:#ff8b12; 
}
.reto-atrapa { 
    border-color:#10c9f2; 
}
.reto-icono { 
    font-size:3.15rem; 
    line-height:1; 
    margin:2px 0 9px; 
}
.reto-card h3 { 
    font-size:1.18rem; 
    margin-bottom:8px; 
}
.reto-memoria h3 { 
    color:#e59cff; 
}
.reto-codigo h3 { 
    color:#62f3c5; 
}
.reto-velocidad h3 { 
    color:#ffad48; 
}
.reto-atrapa h3 { 
    color:#59ddff; 
}
.reto-card p { 
    min-height:62px; 
    color:#f0eef7; 
    font-size:.82rem; 
    line-height:1.35; 
    margin-bottom:12px; 
}
.boton-reto { 
    width:100%; 
    margin-top:auto; 
    padding:9px 12px; 
    border-radius:999px; 
    color:#0b0b10; 
    font-weight:900; 
    background:#fff; 
    text-align:center; 
    display:inline-block; }
.reto-memoria .boton-reto { 
    background:linear-gradient(90deg,#9c36f0,#df7cff); 
}
.reto-codigo .boton-reto { 
    background:linear-gradient(90deg,#11bd94,#59e5bd); 
}
.reto-velocidad .boton-reto { 
    background:linear-gradient(90deg,#ff7a00,#ffad31); 
}
.reto-atrapa .boton-reto { 
    background:linear-gradient(90deg,#11aee1,#50dfff); 
}
.ranking-inicio { 
    padding:18px 17px; 
    border:2px solid #303083; 
    border-radius:18px; 
    background:rgba(8,7,29,.84); 
    box-shadow:0 8px 24px rgba(0,0,0,.4); 
}
.ranking-titulo { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    border-bottom:1px solid rgba(255,255,255,.12); 
    padding-bottom:10px; 
}
.ranking-titulo > span { 
    font-size:2rem; 
}
.ranking-titulo h2 { 
    color:#ffad27; 
    font-size:1.35rem; 
}
.ranking-titulo p { 
    color:#d5d2e0; 
    font-size:.73rem; 
}
.ranking-inicio ol { 
    list-style:none; 
    margin:11px 0; 
}
.ranking-inicio li { 
    display:grid; 
    grid-template-columns:28px 1fr auto; 
    align-items:center; 
    gap:7px; padding:9px 0; 
    border-bottom:1px solid rgba(255,255,255,.08); 
    font-size:.78rem; 
}
.ranking-inicio li > span { 
    width:24px; 
    height:24px; 
    display:grid; 
    place-items:center; 
    border-radius:50%; 
    background:#20284c; 
    color:#fff; 
    font-weight:bold; 
}
.ranking-inicio li strong { 
    font-weight:600; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
}
.ranking-inicio li b { 
    color:#f5f1ff; 
    font-weight:700; 
}
.ranking-link { 
    display:block; 
    text-align:center; 
    color:#ff9d4d; 
    font-size:.8rem; 
    margin-top:10px; 
}
.reto-final { 
    margin-top:18px; 
    text-align:center; 
    color:#ff9a2b; 
    font-size:1.2rem; 
    font-weight:800; 
    font-style:italic; 
}
.controles-ambiente { 
    display:flex; 
    justify-content:center; 
    margin-top:14px; 
    flex-direction:column; 
    align-items:center; 
    gap:5px; 
}
.audio { 
    width:min(100%,360px); 
}
.texto-audio { 
    font-size:.85rem; 
    font-weight:bold; 
}

/* Paginas internas */
.contenedor { 
    width:min(1120px,92%); 
    margin:auto; 
}
.seccion { 
    padding:55px 0; 
}
.titulo { 
    margin-bottom:25px; 
}
.titulo span { 
    color:var(--naranja-claro); 
    font-size:.85rem; 
    font-weight:bold; 
    letter-spacing:2px; 
}
.titulo h2 { 
    font-size:2rem; 
    margin-top:6px; 
}
.titulo p { 
    color:var(--gris-texto); 
    margin-top:8px; 
}
.panel { 
    background:var(--gris); 
    border:1px solid var(--borde); 
    border-radius:12px; 
    padding:26px; 
}
.grid { 
    display:grid; 
    grid-template-columns:repeat(4,1fr); 
    gap:18px; 
}
.tarjeta { 
    background:var(--gris); 
    border:1px solid var(--borde); 
    border-radius:12px; 
    padding:26px; 
    min-height:250px; 
    display:flex; 
    flex-direction:column; 
}
.tarjeta:hover { 
    border-color:var(--morado); 
}
.tarjeta h3 { 
    margin-bottom:10px; 
}
.tarjeta p { 
    color:var(--gris-texto); 
    margin-bottom:18px; 
    flex:1; 
}
.icono { 
    font-size:2.5rem; 
    margin-bottom:18px; 
}
.boton { 
    display:inline-block; 
    border:1px solid transparent; 
    border-radius:8px; 
    padding:11px 20px; 
    font-weight:bold; 
    cursor:pointer; 
    text-align:center; 
}
.boton.principal { 
    background:var(--naranja); 
    color:var(--negro); 
}
.boton.secundario { 
    background:transparent; 
    border-color:var(--borde); 
    color:var(--blanco); 
}
.boton.verde { 
    background:var(--verde); 
    color:var(--negro); 
}
.boton.azul { 
    background:var(--azul); 
    color:var(--negro); 
}
.boton.morado { 
    background:var(--morado); 
    color:#fff; 
}
.acciones { 
    display:flex; 
    flex-wrap:wrap; 
    gap:12px; 
    margin-top:22px; 
}
.input { 
    width:100%; 
    padding:12px; 
    margin:8px 0 17px; 
    border-radius:8px; 
    border:1px solid var(--borde); 
    background:#0c0b12; 
    color:var(--blanco); 
}
label { 
    display:block; 
    font-weight:bold; 
}
.mensaje { 
    padding:12px 14px; 
    border-left:4px solid var(--naranja); 
    background:var(--oscuro); 
    color:var(--gris-texto); 
    margin:16px 0; 
}
.exito { 
    border-left-color:var(--verde); 
}
.error { 
    border-left-color:var(--rojo); 
}
.pie { 
    background:var(--oscuro); 
    border-top:1px solid var(--borde); 
    padding:28px; 
    text-align:center; 
    color:var(--gris-texto); 
    font-size:.9rem; 
}

/* Juegos */
.info-juego { 
    display:flex; 
    flex-wrap:wrap; 
    gap:10px; 
    margin-bottom:20px; 
}
.dato { 
    padding:9px 13px; 
    background:#0e0d14; 
    border:1px solid var(--borde); 
    border-radius:8px; 
    color:var(--gris-texto); 
}
.dato strong { 
    color:#fff; 
}
.tablero-memoria { 
    display:grid; 
    grid-template-columns:repeat(4,1fr); 
    gap:10px; 
    margin-top:20px; 
}
.carta { 
    border:2px solid #5b3971; 
    border-radius:10px; 
    background:#0e0c18; 
    color:#fff; 
    min-height:85px; 
    font-size:2rem; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    padding:6px; 
    width:100%; 
}
.carta img { 
    display:block; 
    width:100%; 
    max-width:92px; 
    height:auto; 
    aspect-ratio:1; 
    object-fit:contain; 
}
.carta:focus-visible { 
    outline:3px solid #ffad27; 
    outline-offset:2px; 
}
.carta.visible { 
    background:#241733; 
    border-color:#c477ff; 
}
.carta.encontrada { 
    background:#15372f; 
    border-color:#42e0b1; 
}
.posicion { 
    position:relative; 
    min-height:310px; 
    margin-top:18px; 
    border:1px dashed #5b4c78; 
    border-radius:12px; 
    background:#0e0c18; 
}
.objetivo { 
    position:absolute; 
    min-width:58px; 
    min-height:58px; 
    border:0; 
    border-radius:50%; 
    background:#2ac8ef; 
    color:#071219; 
    font-size:1.7rem; 
    font-weight:bold; 
    cursor:pointer; 
}
.estado { 
    padding:14px; 
    border:1px solid var(--borde); 
    border-radius:10px; 
    background:#10101a; 
    margin:16px 0; 
    color:var(--gris-texto); 
}
.codigo-caja { 
    max-width:520px; 
    margin:auto; 
    text-align:center; 
}
.caja { 
    font-size:5rem; 
    margin:12px 0; 
}
.señal { 
    padding:28px; 
    text-align:center; 
    border-radius:12px; 
    background:#1d1428; 
    border:2px solid #70459a; 
    margin:20px 0; 
    font-size:1.7rem; 
    font-weight:bold; 
}
.señal.verde { 
    background:#163d2d; 
    border-color:#2ed38f; 
    color:#8ff0c7; 
}

/* Ranking */
.tabla { 
    width:100%; 
    border-collapse:collapse; 
}
.tabla th,.tabla td { 
    padding:13px 10px; 
    text-align:left; 
    border-bottom:1px solid var(--borde); 
}
.tabla th { 
    color:var(--naranja-claro); 
}

/* Mensajes de base de datos */
.estado-bd { 
    font-size:.85rem; 
    color:#ffcf99; 
    margin-top:12px; 
}

@media(max-width:1100px) {
    .menu-layout { 
        grid-template-columns:1fr; 
    }
    .ranking-inicio { 
        max-width:700px; 
        width:100%; 
        margin:auto; 
    }
    .retos-grid { 
        grid-template-columns:repeat(2,1fr); 
    }
    .grid { 
        grid-template-columns:repeat(2,1fr); 
    }
}
@media(max-width:700px) {
    .inicio-cabecera { 
        position:relative; 
        padding:12px 16px; 
        flex-wrap:wrap; 
        background:#0d0a1d; 
    }
    .inicio-marca img { 
        width:200px; 
        max-height:50px; 
    }
    .inicio-nav { 
        width:100%; 
        justify-content:space-between; 
        gap:8px; 
        font-size:.82rem; 
    }
    .menu-contenido { 
        padding-top:35px; 
    }
    .menu-principal { 
        min-height:auto; 
    }
    .subtitulo-reto span { 
        width:55px; 
    }
    .retos-grid,.grid { 
        grid-template-columns:1fr; 
    }
    .reto-card { 
        min-height:230px; 
    }
    .jugador-barra { 
        border-radius:12px; 
        flex-wrap:wrap; 
    }
    .barra { 
        min-height:120px; 
        flex-direction:column; 
        align-items:flex-start; 
        padding:14px 0; 
    }
    .navegacion { 
        width:100%; 
        justify-content:space-between; 
    }
    .logo-institucional { 
        width:200px; 
    }
    .tablero-memoria { 
        grid-template-columns:repeat(4,1fr); 
        gap:6px; 
    }
    .carta { 
        min-height:68px; 
    }
}

/* Versión 0007: interacción del juego Velocidad. */
#zona-reaccion.señal { 
    width: 100%; 
    min-height: 100px; 
    cursor: pointer; 
    font: inherit; 
    font-size: 1.6rem; 
    font-weight: 800; 
    color: var(--blanco, #fff); 
    background: #21172b; 
    border: 2px solid #8b4bb8; 
    border-radius: 12px; 
}
#zona-reaccion.señal.verde { 
    background: #087f5b; 
    border-color: #20c997; 
}
#zona-reaccion.señal:disabled { 
    cursor: default; 
    opacity: .9; 
}
#comenzar-reaccion:disabled { 
    opacity: .55; 
    cursor: not-allowed; 
}
#tiempo-reaccion { 
    font-weight: 700; 
}