/* =========================================================================
   EVENTO TEMÁTICO · tema de noche
   =========================================================================
   Capa que se carga SOLO en ?op=evento, encima del bloque `.ev-*` de
   style.css. No sustituye a aquel: lo reviste.

   POR QUÉ UNA CAPA Y NO TOCAR style.css
   style.css pesa 320 KB y lo descarga todo el portal. Esto son unos pocos KB
   que solo paga quien abre el evento, y el día que Halloween termine se quita
   una línea del layout y el portal vuelve a su aspecto de siempre sin tocar
   nada más.

   EL COLOR SIGUE MANDÁNDOLO EL PANEL
   Todo lo naranja sale de `--ev-acento`, que la vista recibe de la columna
   `acento` del evento. Cambiar Halloween por Navidad es cambiar ese campo:
   aquí no hay ni un naranja escrito a mano fuera de los respaldos.

   LA TIPOGRAFÍA Y LAS CAJAS las hereda del portal a propósito. Esto es una
   campaña dentro del sitio, no otro sitio.
   ========================================================================= */

.ev-wrap {
    /* Noche: azul muy oscuro, el mismo que el centro de fondo.jpg, para que
       el fondo y las tarjetas sean la misma habitación. */
    --ev-noche:   #0b1030;
    --ev-panel:   rgba(16, 22, 56, .78);
    --ev-panel-2: rgba(23, 30, 70, .72);
    --ev-linea:   rgba(173, 185, 255, .14);
    --ev-linea-2: rgba(173, 185, 255, .26);

    /* Se redefinen las tres de style.css: ahí eran claras. */
    --ev-tinta: #e8e9fb;
    --ev-borde: rgba(173, 185, 255, .14);
    --ev-suave: rgba(23, 30, 70, .55);

    --ev-apagado: #9aa0cf;
    --ev-sombra:  0 18px 40px rgba(0, 0, 0, .45);
    --ev-brillo:  0 0 24px color-mix(in srgb, var(--ev-acento) 45%, transparent);

    position: relative;
    color: var(--ev-tinta);

    /* AQUÍ NO VA NINGÚN FONDO, A PROPÓSITO.
       La primera versión de este tema pintaba `fondo.jpg` a pantalla completa
       con un `::before` fijo. Dos errores en uno:

         1. EL SITIO YA TIENE ESE FONDO. El portal entero lleva el decorado de
            Halloween detrás; repetirlo dentro del evento era pintar lo mismo
            dos veces.
         2. Aquel `::before` era `position: fixed; inset: 0` y, con el
            `isolation: isolate` que llevaba el contenedor, se pintaba por
            encima de lo que va ANTES en el documento: se llevó por delante la
            barra superior, el banner de la cabecera, el botón de descarga y
            los botones rojos del menú.

       El evento se limita a su columna. Lo de fuera no se toca. */
}

/* =============================== Portada ================================ */
/* LA PORTADA ES UN CARTEL, NO UN FONDO.
   `hgt.png` (banner-evento-2026.jpg) trae dentro el título, el subtítulo y la
   descripción ya rotulados. Escribir encima el mismo texto en HTML es lo que
   hacía la versión anterior, y se leían los dos a la vez en fantasma.

   Así que el cartel se enseña ENTERO, con su proporción (825x272), y el texto
   de la vista se oculta a la vista pero NO se borra: sigue en el documento
   para los lectores de pantalla y para los buscadores. Lo único que se pinta
   encima es la cuenta atrás, que es el único dato que cambia cada día y no
   puede ir rotulado en una imagen.

   En pantallas estrechas el cartel se queda ilegible (las letras rotuladas no
   se reajustan), así que ahí se hace lo contrario: la imagen pasa a ser fondo
   velado y el texto de verdad vuelve a salir. */
.ev-hero {
    position: relative;
    overflow: hidden;
    aspect-ratio: 825 / 272;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--ev-linea);
    border-radius: 18px;
    box-shadow: var(--ev-sombra);
    background: var(--ev-noche);
}

.ev-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ev-portada, url("../../images/halloween/banner-evento-2026.jpg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    animation: none;
    /* La regla original la tenía al 22 % y con `mix-blend-mode: luminosity`,
       porque allí la portada era una textura por debajo del cielo pintado.
       Aquí la portada ES el cartel: a plena opacidad y sin mezcla, o sale
       gris y apagada. */
    opacity: 1;
    mix-blend-mode: normal;
}

/* Una viñeta muy suave en las esquinas: asienta el cartel dentro del marco
   sin tocar el dibujo. */
.ev-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(8, 11, 34, .45) 100%);
    z-index: 1;
}

/* Los adornos en SVG sobraban: el cartel ya trae sus propios fantasmas. */
.ev-hero__deco { display: none; }

.ev-hero__texto {
    position: relative;
    z-index: 3;
    padding: 16px 20px;
}

/* El texto sigue ahí para quien no ve la imagen; simplemente no se pinta. */
.ev-hero__titulo,
.ev-hero__sub,
.ev-hero__desc {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* La cuenta atrás: lo único dinámico, y lo primero que mira quien entra. */
.ev-hero__reloj {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 13px;
    border: 1px solid color-mix(in srgb, var(--ev-acento) 55%, transparent);
    border-radius: 999px;
    background: rgba(8, 11, 34, .82);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: var(--ev-brillo);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ev-hero__reloj::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ev-acento);
    box-shadow: 0 0 10px var(--ev-acento);
}

@media (max-width: 760px) {
    /* Letras rotuladas de 825 px de ancho en un móvil no se leen. Aquí manda
       el texto de verdad y el cartel pasa a ser fondo. */
    .ev-hero {
        aspect-ratio: auto;
        padding: 24px 20px 28px;
    }

    .ev-hero::after {
        background: linear-gradient(180deg, rgba(8, 11, 34, .86) 0%, rgba(8, 11, 34, .95) 100%);
    }

    .ev-hero__titulo,
    .ev-hero__sub,
    .ev-hero__desc {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    .ev-hero__titulo {
        margin: 14px 0 6px;
        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.06;
        color: #fff;
    }

    .ev-hero__sub {
        margin: 0 0 10px;
        font-weight: 700;
        color: color-mix(in srgb, var(--ev-acento) 78%, #fff);
    }

    .ev-hero__desc {
        margin: 0;
        color: #cdd2f2;
        line-height: 1.6;
    }
}


/* ======================== Aviso del staff y barra ======================== */
.ev-staff {
    border: 1px solid color-mix(in srgb, var(--ev-acento) 45%, transparent);
    border-left-width: 4px;
    border-radius: 12px;
    background: rgba(40, 24, 8, .6);
    color: #ffd9b0;
}

.ev-staff b { color: #fff; }

/* La barra de saldos e índice se pega arriba al bajar: el jugador siempre
   sabe cuántas Calabazas le quedan mientras recorre la tienda. */
.ev-barra {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px 14px;
    border: 1px solid var(--ev-linea);
    border-radius: 14px;
    background: rgba(10, 14, 40, .86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--ev-sombra);
}

/* `.ev-saldos` traía `linear-gradient(180deg, #fff, ...)`: un blanco escrito
   a mano que no dependía de ninguna variable, así que redefinirlas no bastaba. */
.ev-saldos {
    border-color: var(--ev-linea);
    background: linear-gradient(180deg, rgba(30, 38, 84, .9) 0%, rgba(16, 22, 56, .9) 100%);
}

.ev-saldo {
    border-right: 1px solid var(--ev-linea);
    color: var(--ev-apagado);
}

.ev-saldo i { color: var(--ev-apagado); }
.ev-saldo b { color: #fff; }

.ev-saldo-puntos {
    padding-left: 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ev-acento) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-acento) 35%, transparent);
}

.ev-saldo-puntos b { color: var(--ev-acento); text-shadow: 0 0 14px color-mix(in srgb, var(--ev-acento) 60%, transparent); }

.ev-indice a {
    border: 1px solid var(--ev-linea);
    border-radius: 999px;
    background: rgba(23, 30, 70, .6);
    color: #cdd2f2;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.ev-indice a:hover {
    border-color: color-mix(in srgb, var(--ev-acento) 60%, transparent);
    background: color-mix(in srgb, var(--ev-acento) 18%, transparent);
    color: #fff;
}

.ev-invita {
    border: 1px dashed var(--ev-linea-2);
    border-radius: 12px;
    background: rgba(23, 30, 70, .5);
    color: #cdd2f2;
}

.ev-invita a { color: var(--ev-acento); }


/* =============================== Bloques ================================ */
.ev-bloque__cab h2 {
    color: #fff;
    letter-spacing: -.01em;
}

/* La pestaña de color de cada título, pero encendida. */
.ev-bloque__cab h2::before {
    background: var(--ev-acento);
    box-shadow: 0 0 16px color-mix(in srgb, var(--ev-acento) 70%, transparent);
}

.ev-bloque__cab p { color: var(--ev-apagado); }
.ev-bloque__cab p b { color: #fff; }

.ev-nota { color: var(--ev-apagado); }
.ev-ok { color: #6ee7a8; }

.ev-vacio {
    border: 1px dashed var(--ev-linea-2);
    border-radius: 14px;
    background: rgba(16, 22, 56, .5);
    color: var(--ev-apagado);
}


/* ================== Tarjetas: el cristal de toda la página ================ */
/* Una sola regla para todo lo que es "caja" en el evento: así nada se queda
   blanco por olvido cuando se añada un bloque nuevo. */
.ev-asist,
.ev-premio,
.ev-mision,
.ev-ruleta,
.ev-pack,
.ev-item {
    border: 1px solid var(--ev-linea);
    border-radius: 16px;
    background: var(--ev-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--ev-sombra);
    color: var(--ev-tinta);
}

.ev-premio,
.ev-mision,
.ev-item,
.ev-pack {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ev-premio:hover,
.ev-mision:hover,
.ev-item:hover {
    transform: translateY(-3px);
    border-color: var(--ev-linea-2);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: reduce) {
    .ev-premio, .ev-mision, .ev-item, .ev-pack { transition: none; }
    .ev-premio:hover, .ev-mision:hover, .ev-item:hover { transform: none; }
}


/* ============================== Asistencia ============================== */
.ev-asist { padding: 18px 20px; }

/* Otro `#fff` escrito a mano en style.css: quedaba una caja blanca en medio
   de la noche. El contador es el dato más importante del bloque, así que se
   queda como una placa iluminada, no como un hueco apagado. */
.ev-asist__contador {
    border: 1px solid color-mix(in srgb, var(--ev-acento) 40%, transparent);
    background:
        radial-gradient(90% 90% at 50% 0%,
            color-mix(in srgb, var(--ev-acento) 20%, transparent), transparent 70%),
        rgba(10, 14, 40, .9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), var(--ev-brillo);
}

.ev-asist__num {
    color: var(--ev-acento);
    text-shadow: 0 0 26px color-mix(in srgb, var(--ev-acento) 55%, transparent);
}

.ev-asist__et { color: var(--ev-apagado); }

/* La escalera: un carril con los premios en fila. La línea de debajo es lo
   que la hace leerse como un recorrido y no como cinco tarjetas sueltas. */
.ev-escalera {
    position: relative;
    padding-top: 10px;
}

.ev-escalera::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 26px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--ev-linea-2) 8%,
        var(--ev-linea-2) 92%,
        transparent);
    z-index: 0;
}

.ev-premio { position: relative; z-index: 1; padding-bottom: 14px; }

/* La chapa de días colgada del carril.
   CUIDADO: el marcado es `3 <span>días</span>` — el número va suelto y solo la
   palabra está en el span. Estilar el span pintaba un recuadro alrededor de
   «días» y dejaba el número fuera. La chapa es el contenedor. */
.ev-premio__dias {
    border: 1px solid var(--ev-linea-2);
    border-top: 0;
    background: rgba(10, 14, 40, .95);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}

.ev-premio__dias span { color: var(--ev-apagado); }

/* EL ESCAPARATE.
   OJO CON ESTO: los muñecos son píxeles de 60-80 px y en su mayoría OSCUROS
   (capas negras, moradas, sombreros). Sobre un fondo de noche desaparecían:
   la primera versión de este tema los dejó invisibles. Así que el escaparate
   es lo ÚNICO claro de la página — un nicho iluminado, como la vitrina de una
   tienda de noche. El halo naranja va arriba, de luz cenital. */
.ev-premio__img,
.ev-item__img,
.ev-pieza img,
.ev-pieza__sin {
    position: relative;
    border-radius: 14px;
    background:
        radial-gradient(75% 55% at 50% 0%,
            color-mix(in srgb, var(--ev-acento) 30%, transparent) 0%,
            transparent 72%),
        linear-gradient(180deg, #4b57a6 0%, #333e82 52%, #242c63 100%);
    box-shadow:
        inset 0 0 0 1px rgba(200, 210, 255, .3),
        inset 0 12px 28px rgba(255, 255, 255, .12);
}

/* El suelo bajo los pies: una elipse de sombra. Sin esto los muñecos
   parecen flotar. */
.ev-premio__img::after,
.ev-item__img::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12%;
    width: 52%;
    height: 10px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%);
    pointer-events: none;
}

.ev-premio__t { color: #fff; }
.ev-premio__d { color: var(--ev-apagado); }
.ev-premio__estado { color: var(--ev-apagado); }

/* Conseguido: el borde se enciende y el foco se vuelve verde.
   El `background: #f6fbf8` del original hay que pisarlo o la tarjeta del
   premio ya conseguido sale BLANCA. Pasa lo mismo con la misión cumplida y
   con el pack comprado, más abajo: son estados que no se ven hasta que el
   jugador avanza, así que es fácil olvidarlos al hacer un tema. */
.ev-premio.ev-mio {
    border-color: rgba(110, 231, 168, .45);
    background:
        linear-gradient(180deg, rgba(110, 231, 168, .1), transparent 60%),
        var(--ev-panel);
    box-shadow: 0 0 0 1px rgba(110, 231, 168, .18), var(--ev-sombra);
}

.ev-premio.ev-mio .ev-premio__img {
    background:
        radial-gradient(60% 60% at 50% 62%, rgba(110, 231, 168, .24) 0%, transparent 70%),
        linear-gradient(180deg, rgba(8, 11, 34, .35), rgba(8, 11, 34, .7));
}

.ev-premio.ev-mio .ev-premio__estado { color: #6ee7a8; }

/* Listo para reclamar: lo que tiene que saltar a la vista de toda la página. */
.ev-premio.ev-listo {
    border-color: color-mix(in srgb, var(--ev-acento) 70%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev-acento) 30%, transparent), var(--ev-brillo), var(--ev-sombra);
}

.ev-premio.ev-listo .ev-premio__dias span {
    border-color: transparent;
    background: var(--ev-acento);
    color: #1a0d02;
}

/* Bloqueado: en penumbra, pero legible. Apagar del todo un premio que aún no
   tienes es quitarle la razón para volver mañana.
   EL FILTRO VA AL MUÑECO, NO AL NICHO: puesto en `.ev-premio__img` grisaba
   también el fondo iluminado y las cinco tarjetas quedaban como cajas de
   cartón. */
.ev-premio.ev-bloqueado .ev-premio__img > * {
    filter: grayscale(.8) brightness(.85);
    opacity: .92;
}

/* `.ev-premio.ev-bloqueado .ev-premio__img { filter: grayscale(1); opacity:.5 }`
   del style.css tiene MÁS especificidad que la regla del nicho, así que grisaba
   y apagaba también el fondo iluminado: las tarjetas salían como cajas de
   cartón. Se cancela aquí y el apagado se aplica solo al muñeco (arriba). */
.ev-premio.ev-bloqueado .ev-premio__img {
    filter: none;
    opacity: 1;
}

/* La reja de «todavía no»: unas diagonales muy tenues sobre el nicho. Dice
   «bloqueado» sin tener que apagar el dibujo. */
.ev-premio.ev-bloqueado .ev-premio__img::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(135deg,
        rgba(8, 11, 34, .1) 0 6px,
        transparent 6px 20px);
    pointer-events: none;
    z-index: 2;
}


/* ================================ Misiones ============================== */
.ev-mision { padding: 16px; }
.ev-mision__tit b { color: #fff; }
.ev-mision__tit i { color: var(--ev-apagado); }
.ev-mision__d { color: var(--ev-apagado); }
.ev-mision__cifra { color: var(--ev-apagado); }
.ev-mision__cifra b { color: #fff; }

.ev-mision__ico {
    border: 1px solid var(--ev-linea);
    border-radius: 12px;
    background: rgba(8, 11, 34, .55);
    color: #cdd2f2;
}

.ev-mision.ev-lista {
    border-color: color-mix(in srgb, var(--ev-acento) 65%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ev-acento) 16%, transparent) 0%,
            transparent 62%),
        var(--ev-panel);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev-acento) 28%, transparent), var(--ev-sombra);
}

.ev-mision.ev-lista .ev-mision__ico {
    border-color: transparent;
    background: var(--ev-acento);
    color: #1a0d02;
}

.ev-mision.ev-lista .ev-mision__cifra b { color: var(--ev-acento); }

.ev-mision.ev-reclamada { opacity: .72; }

.ev-mision.ev-reclamada .ev-mision__ico {
    border-color: transparent;
    background: rgba(110, 231, 168, .22);
    color: #6ee7a8;
}

.ev-mision__check { color: #6ee7a8; }


/* ============================ Barras y fichas =========================== */
.ev-barra-prog {
    background: rgba(8, 11, 34, .7);
    box-shadow: inset 0 0 0 1px var(--ev-linea);
}

.ev-barra-prog i {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ev-acento) 70%, #ffce7a),
        var(--ev-acento));
    box-shadow: 0 0 14px color-mix(in srgb, var(--ev-acento) 55%, transparent);
}

.ev-chip {
    border: 1px solid var(--ev-linea);
    border-radius: 999px;
    background: rgba(8, 11, 34, .55);
    color: #dfe3ff;
}

/* «Nada esta vez» no merece el mismo peso visual que un premio. */
.ev-ruleta__lista .ev-nada .ev-chip { opacity: .5; }


/* ================================ Ruleta ================================ */
.ev-ruleta { padding: 20px; }

/* La rueda sobre un disco de luz, con un aro del color del evento. El canvas
   lo dibuja el JS; esto es el marco. */
.ev-ruleta__rueda {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(60% 60% at 50% 50%,
        color-mix(in srgb, var(--ev-acento) 16%, transparent), transparent 72%);
}

.ev-ruleta__rueda::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ev-acento) 40%, transparent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--ev-acento) 28%, transparent);
    pointer-events: none;
}

.ev-ruleta__rueda canvas {
    border-radius: 50%;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}

.ev-ruleta__aguja {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
    color: var(--ev-acento);
}

.ev-ruleta__giros b {
    color: var(--ev-acento);
    text-shadow: 0 0 22px color-mix(in srgb, var(--ev-acento) 55%, transparent);
}

.ev-ruleta__giros span { color: var(--ev-apagado); }


/* ======================== Colección (packs) y tienda ==================== */
.ev-pack { padding: 20px; }
.ev-pack__info h3 { color: #fff; }
.ev-pack__info p { color: var(--ev-apagado); }

/* Es un <p>, así que sin `inline-flex` el fondo ocupaba todo el ancho y
   parecía una barra de carga a medio llenar. El `!important` del color va
   porque la regla original también lo lleva. */
.ev-pack__bonus {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    padding: 5px 13px;
    border: 1px solid color-mix(in srgb, var(--ev-acento) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ev-acento) 14%, transparent);
    color: color-mix(in srgb, var(--ev-acento) 82%, #fff) !important;
}

.ev-pieza figcaption { color: var(--ev-apagado); }
.ev-pack-mio {
    border-color: rgba(110, 231, 168, .45);
    background:
        linear-gradient(180deg, rgba(110, 231, 168, .1), transparent 60%),
        var(--ev-panel);
}

.ev-tabs a {
    border: 1px solid var(--ev-linea);
    border-radius: 999px;
    background: rgba(23, 30, 70, .6);
    color: #cdd2f2;
}

.ev-tabs a.is-on {
    border-color: transparent;
    background: var(--ev-acento);
    color: #1a0d02;
    box-shadow: var(--ev-brillo);
}

.ev-item { padding: 14px; }
.ev-item__t { color: #fff; }
.ev-item__tipo { color: var(--ev-apagado); }

.ev-item__stock {
    border: 1px solid color-mix(in srgb, var(--ev-acento) 45%, transparent);
    border-radius: 999px;
    background: rgba(8, 11, 34, .8);
    color: color-mix(in srgb, var(--ev-acento) 85%, #fff);
}

.ev-item-agotado { opacity: .55; }


/* =============================== Botones ================================ */
.ev-btn,
.ev-comprar button,
.ev-comprar .ev-btn-sm {
    border: 0;
    border-radius: 11px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ev-acento) 86%, #ffd9a1),
        var(--ev-acento));
    color: #1a0d02;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ev-btn:hover:not(:disabled),
.ev-comprar button:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .5), var(--ev-brillo);
}

.ev-btn:disabled,
.ev-comprar button:disabled {
    background: rgba(40, 48, 92, .7);
    color: #8d93c4;
    box-shadow: none;
    cursor: not-allowed;
}

/* El botón corto («Ver», «Cambiar»…) no compite con el de comprar. */
.ev-btn-corto {
    background: rgba(23, 30, 70, .8);
    color: #dfe3ff;
    box-shadow: inset 0 0 0 1px var(--ev-linea-2);
}

.ev-btn-corto:hover { background: rgba(35, 44, 95, .9); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .ev-btn, .ev-comprar button { transition: none; }
    .ev-btn:hover:not(:disabled), .ev-comprar button:hover:not(:disabled) { transform: none; }
}


/* ====================== Vitrinas heredadas de misiones =================== */
/* `.ms-*` son las del módulo de misiones, que se reutilizan dentro del
   evento. Sin esto quedaban dos tarjetas blancas en medio de la noche. */
.ev-wrap .ms-vitrina__item,
.ev-wrap .ms-premio-avatar {
    border: 1px solid var(--ev-linea);
    border-radius: 12px;
    background: rgba(8, 11, 34, .5);
    color: var(--ev-tinta);
}

.ev-wrap .ms-vitrina__item b { color: #fff; }
.ev-wrap .ms-vitrina__item i,
.ev-wrap .ms-premios-extra .ms-premios__et { color: var(--ev-apagado); }