/*
   Identidad visual de Suerte Loca.

   Este archivo es el único lugar donde se escribe un color. El cliente ya avisó que el logotipo y
   la mascota pueden cambiar, así que cambiar la marca debe costar diez minutos: reemplazar las dos
   imágenes de wwwroot/img y editar las variables de aquí abajo. Si un color literal se cuela en
   una vista, ese cambio se convierte en buscar y reemplazar por todo el proyecto, y siempre se
   escapa uno.

   Los valores salen de la maqueta de referencia, no están aproximados.
*/

/* ── Tipografías, servidas desde este mismo sitio ──────────────────────────────────────────────
   No se cargan desde Google Fonts a propósito: el sitio es para teléfonos con datos móviles y una
   petición a un tercero agrega latencia justo en el peor momento, además de depender de que ese
   servicio sea alcanzable. Las dos familias son fuentes variables, así que un archivo por familia
   cubre todos los pesos.
   font-display: swap deja el texto legible con la fuente del sistema mientras la real llega.       */

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/Nunito-variable.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo 2';
    src: url('/fonts/Baloo2-variable.woff2') format('woff2-variations');
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Paleta ─────────────────────────────────────────────────────────────────────────────── */
    --sl-fondo: #0d1f12;
    --sl-verde-oscuro: #0A2010;
    --sl-verde: #1B7C2E;
    --sl-verde-brillante: #2DAA45;
    --sl-verde-claro: #9FD2AB;
    --sl-verde-claro-apagado: #7FB88C;
    --sl-dorado: #D4960A;
    --sl-dorado-claro: #FFD966;
    --sl-dorado-mas-claro: #FFE066;
    --sl-gris-verdoso: #5A6B5E;
    --sl-gris-verdoso-claro: #8A978C;
    --sl-verde-palido: #E3F1E7;
    --sl-gris-casi-blanco: #F8F9FA;
    --sl-blanco: #FFFFFF;

    /* Los que agregó la maqueta 2.8. */
    --sl-dorado-texto: #5A3D00;          /* texto oscuro sobre fondo dorado */
    --sl-dorado-oscuro: #A9760A;         /* bordes y sombras del dorado */
    --sl-gris-verdoso-oscuro: #2A3B2E;   /* texto secundario sobre claro */
    --sl-verde-casi-blanco: #EEF7F0;     /* fondo de avisos suaves */
    --sl-verde-palido-borde: #CFE6D6;
    --sl-verde-palido-oscuro: #D6E7DB;
    --sl-crema: #FFF6E3;                 /* fondo de avisos dorados */
    --sl-gris-separador: #E3E7E4;
    --sl-gris-apagado: #EEF0EE;

    /* El borde del número elegido. No es --sl-dorado (#D4960A) aunque se le parezca: unificarlos
       cambiaría cómo se ve ese borde, y eso sería una decisión visual que nadie tomó. */
    --sl-dorado-elegido: #D6A000;

    /* El único color que no es de la marca. Solo para el aviso de últimas horas, en ningún otro
       lado: si el rojo aparece en más sitios deja de significar urgencia. */
    --sl-rojo-urgencia: #C0392B;

    /* El fondo detrás de la columna, en tres tonos que van del brillo de arriba a la izquierda a
       lo más oscuro de abajo. El del medio es el verde oscuro de la marca. */
    --sl-fondo-brillo: #16361f;
    --sl-fondo-profundo: #071a0c;

    /* Del cierre de la portada (TASK 30). */
    --sl-gris-tenue-claro: #9AA89E;      /* cuándo ganó cada ganador */
    --sl-verde-legal: #5E8268;           /* aviso legal del pie, sobre el verde oscuro */
    --sl-verde-whatsapp: #25D366;        /* los botones de chat con Paddy */

    /* Del precio de referencia de los paquetes (TASK 41, maqueta 2.9). */
    --sl-verde-tachado: #6B8F69;         /* el precio de referencia tachado */
    /* La insignia del ahorro. Es el mismo rojo que --sl-rojo-urgencia porque así lo trae la 2.9,
       pero con su propio nombre: el de urgencia sigue reservado al aviso de últimas horas. */
    --sl-rojo-descuento: #C0392B;

    /* Paso 3, maqueta 2.8: renglones y resumen del boleto. */
    --sl-boleto-manual-fondo: #FFFAED;
    --sl-boleto-manual-borde: #F0D9A0;
    --sl-boleto-auto-borde: #E6ECE7;
    --sl-boleto-auto-etiqueta: #DFF0E4;
    --sl-boleto-restantes: #006D1A;
    --sl-boleto-total-fondo: #F1F8F3;

    /* ── Degradados ─────────────────────────────────────────────────────────────────────────
       El dorado es la acción principal, la que lleva a comprar. El verde es para acentos y
       confirmaciones. No se usan al revés.                                                      */
    --sl-degradado-boton: linear-gradient(180deg, var(--sl-dorado-mas-claro), var(--sl-dorado));
    --sl-degradado-verde: linear-gradient(180deg, var(--sl-verde-brillante), var(--sl-verde));
    --sl-degradado-superficie: linear-gradient(180deg, #123018, #0c2212);
    --sl-degradado-encabezado: linear-gradient(180deg, #0a2010, #0d2614);
    --sl-degradado-fondo: radial-gradient(circle at 20% 0%, var(--sl-fondo-brillo) 0%, var(--sl-verde-oscuro) 45%, var(--sl-fondo-profundo) 100%);

    /* ── Papeles de cada color ──────────────────────────────────────────────────────────────
       Nombrados por lo que hacen y no por lo que son, para que cambiar la marca no obligue a
       releer cada regla.                                                                        */
    --sl-texto: var(--sl-verde-oscuro);
    --sl-texto-suave: var(--sl-gris-verdoso);
    --sl-texto-tenue: var(--sl-gris-verdoso-claro);
    --sl-texto-sobre-oscuro: var(--sl-blanco);
    --sl-texto-suave-sobre-oscuro: var(--sl-verde-claro);
    --sl-superficie: var(--sl-blanco);
    --sl-superficie-suave: var(--sl-gris-casi-blanco);
    --sl-borde: #E6EBE7;
    --sl-borde-oscuro: rgba(159, 210, 171, 0.18);

    /* El fondo que atenúa la página detrás de una ventana. Es el verde oscuro de la marca con
       transparencia, no un gris cualquiera: lo de atrás se sigue reconociendo. */
    --sl-fondo-atenuado: rgba(10, 32, 16, 0.72);

    /* ── Tipografía ─────────────────────────────────────────────────────────────────────────── */
    --sl-fuente-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sl-fuente-titulo: 'Baloo 2', var(--sl-fuente-texto);

    /* ── Medidas ────────────────────────────────────────────────────────────────────────────── */
    --sl-radio-tarjeta: 16px;
    --sl-radio-control: 12px;
    --sl-radio-pastilla: 999px;
    /* El ancho con el que está dibujada la maqueta 2.8. */
    --sl-columna-max: 440px;
    --sl-espacio: 16px;
    --sl-sombra-tarjeta: 0 1px 2px rgba(10, 32, 16, 0.06), 0 8px 24px rgba(10, 32, 16, 0.06);
    --sl-sombra-elegido: 0 0 0 4px rgba(255, 217, 102, 0.35);
    /* Despega la columna del fondo en pantalla grande. */
    --sl-sombra-columna: 0 0 80px rgba(0, 0, 0, 0.5);
}

/* ── Estructura ────────────────────────────────────────────────────────────────────────────────
   Móvil primero: el diseño base es el del teléfono y el escritorio es la adaptación.
   El fondo oscuro es lo que hace que en escritorio se vea intencional: una columna angosta sobre
   blanco parece una página a medio hacer; sobre el verde de la marca parece una aplicación dentro
   de su marco.                                                                                   */

/* Solo el sitio público lleva el fondo de la marca. El admin conserva el suyo: entra por el mismo
   layout pero queda fuera de esta tarea. */
body.sl-publico {
    background-color: var(--sl-fondo);
    background-image: var(--sl-degradado-fondo);
    color: var(--sl-texto);
    font-family: var(--sl-fuente-texto);
    -webkit-text-size-adjust: 100%;
    /* site.css reserva 60 px para el pie de la plantilla. La portada ya tiene pie y botón propios. */
    margin-bottom: 0;
}

.sl-columna {
    width: 100%;
    max-width: var(--sl-columna-max);
    margin-inline: auto;
    background-color: var(--sl-superficie-suave);
    min-height: 100vh;
    min-height: 100dvh;
    box-shadow: var(--sl-sombra-columna);
    /* Columna flexible para que el pie (.sl-pie, con margin-top: auto) quede abajo aunque el
       contenido sea corto. */
    display: flex;
    flex-direction: column;
}

.sl-contenido {
    padding: var(--sl-espacio);
}

.sl-publico h1,
.sl-publico h2,
.sl-publico h3,
.sl-titulo,
.sl-cifra {
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    color: var(--sl-texto);
    letter-spacing: -0.01em;
}

.sl-cifra {
    font-variant-numeric: tabular-nums;
}

.sl-publico a {
    color: var(--sl-verde);
}

/* Nada debe requerir desplazamiento horizontal en ningún ancho. */
.sl-publico {
    overflow-x: hidden;
}

/* ── Encabezado ────────────────────────────────────────────────────────────────────────────── */

/* Uno solo para todo el sitio público, en _Layout.cshtml. Se queda pegado arriba al desplazarse,
   por encima de todo lo de la página. */
.sl-encabezado {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--sl-degradado-encabezado);
    border-bottom: 1px solid rgba(255, 217, 102, 0.18);
    color: var(--sl-texto-sobre-oscuro);
    padding: 9px 14px;
}

/* Con la clase sola no basta: .sl-publico h1 pinta los títulos del color oscuro del texto. */
.sl-encabezado .sl-encabezado__titulo {
    flex: 1;
    text-align: center;
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 16px;
    color: var(--sl-texto-sobre-oscuro);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Con la clase sola no basta: .sl-publico a pinta los enlaces de verde, y la flecha se perdía
   sobre el encabezado oscuro. */
.sl-encabezado .sl-encabezado__volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sl-radio-control);
    background-color: rgba(159, 210, 171, 0.12);
    border: 1px solid var(--sl-borde-oscuro);
    color: var(--sl-texto-suave-sobre-oscuro);
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    flex: none;
}

.sl-encabezado .sl-encabezado__volver:hover {
    color: var(--sl-texto-sobre-oscuro);
}

/* Ocupa lo mismo que la flecha para que el título quede centrado de verdad. */
.sl-encabezado__hueco {
    width: 34px;
    flex: none;
}

.sl-publico .sl-encabezado__boleto {
    border: 1px solid rgba(255, 217, 102, 0.4);
    background-color: rgba(255, 217, 102, 0.1);
    color: var(--sl-dorado-claro);
    font-weight: 800;
    font-size: 11px;
    border-radius: var(--sl-radio-pastilla);
    padding: 7px 11px;
    white-space: nowrap;
    text-decoration: none;
}

.sl-publico .sl-encabezado__boleto:hover {
    color: var(--sl-dorado-mas-claro);
}

/* Las imágenes de la marca llevan en el HTML la proporción real del archivo. Aquí se fija solo el
   alto y el ancho sale solo: fijar los dos deforma la imagen si el archivo no tiene justo esa
   proporción, que es lo que le pasaba a Paddy en la maqueta. El logotipo va a dos alturas, por
   eso el tamaño depende de dónde esté y no de la imagen. */
.sl-logo {
    display: block;
    width: auto;
    height: 38px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.sl-pie .sl-logo {
    height: 42px;
    filter: none;
}

/* ── Barra de pasos ────────────────────────────────────────────────────────────────────────────
   Es un indicador visual, no navegación: son div, no enlaces, y no permiten saltar pasos.        */

.sl-pasos {
    display: flex;
    gap: 6px;
    padding: 0 var(--sl-espacio) 10px;
    background: var(--sl-degradado-encabezado);
    margin: 0;
    list-style: none;
}

.sl-pasos__tramo {
    flex: 1;
    height: 5px;
    border-radius: var(--sl-radio-pastilla);
    background-color: rgba(159, 210, 171, 0.16);
}

.sl-pasos__tramo--hecho {
    background: var(--sl-degradado-boton);
}

.sl-pasos__etiqueta {
    color: var(--sl-texto-suave-sobre-oscuro);
    font-size: 12px;
    padding: 0 var(--sl-espacio) 10px;
    background: var(--sl-degradado-encabezado);
    margin: 0;
}

/* El encabezado fijo conserva el título de la página; esta franja informa el paso del recorrido. */
.sl-flujo-encabezado {
    flex: none;
    padding: 10px 14px 12px;
    background: var(--sl-degradado-encabezado);
}

.sl-flujo-encabezado__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.sl-pasos__etiqueta--flujo {
    min-width: 0;
    padding: 0;
    background: none;
    color: var(--sl-texto-sobre-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.sl-flujo-encabezado__bolsa {
    flex: none;
    margin: 0;
    padding: 4px 9px;
    border-radius: var(--sl-radio-pastilla);
    background-color: rgba(255, 217, 102, 0.16);
    color: var(--sl-dorado-claro);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.sl-pasos--flujo {
    padding: 0;
    background: none;
}

/* ── Superficies ───────────────────────────────────────────────────────────────────────────── */

.sl-tarjeta {
    background-color: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio-tarjeta);
    box-shadow: var(--sl-sombra-tarjeta);
}

.sl-panel-oscuro {
    background: var(--sl-degradado-superficie);
    border: 1px solid var(--sl-borde-oscuro);
    border-radius: var(--sl-radio-tarjeta);
    color: var(--sl-texto-sobre-oscuro);
    overflow: hidden;
    position: relative;
}

.sl-panel-oscuro h1,
.sl-panel-oscuro h2,
.sl-panel-oscuro .sl-titulo,
.sl-panel-oscuro .sl-cifra {
    color: var(--sl-texto-sobre-oscuro);
}

.sl-texto-suave {
    color: var(--sl-texto-suave);
}

.sl-texto-tenue {
    color: var(--sl-texto-tenue);
}

.sl-sobre-oscuro-suave {
    color: var(--sl-texto-suave-sobre-oscuro);
}

.sl-paddy {
    display: block;
    width: auto;
    height: 134px;
}

.sl-paddy--chico {
    height: 120px;
}

.sl-paddy-festejo {
    display: block;
    width: auto;
    height: 162px;
}

.sl-paddy-avatar {
    display: block;
    width: auto;
    height: 38px;
}

/* ── Avisos ────────────────────────────────────────────────────────────────────────────────── */

.sl-aviso {
    border-radius: var(--sl-radio-control);
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid var(--sl-borde);
    background-color: var(--sl-superficie);
    color: var(--sl-texto-suave);
}

.sl-aviso--verde {
    background-color: var(--sl-verde-palido);
    border-color: rgba(27, 124, 46, 0.18);
    color: var(--sl-verde-oscuro);
}

.sl-aviso--dorado {
    background-color: #FFF7E0;
    border-color: rgba(212, 150, 10, 0.28);
    color: #6B4A00;
}

.sl-aviso--error {
    background-color: #FDECEC;
    border-color: rgba(176, 42, 42, 0.25);
    color: #8A1F1F;
}

.sl-aviso strong {
    color: inherit;
}

/* ── Insignias y fichas ────────────────────────────────────────────────────────────────────── */

.sl-insignia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--sl-radio-pastilla);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.sl-insignia--dorada {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
}

.sl-insignia--verde {
    background-color: var(--sl-verde-palido);
    color: var(--sl-verde);
}

/* Las combinaciones ya elegidas, como en la referencia: círculos numerados. */
.sl-ficha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 14px;
    flex: none;
}

.sl-ficha--dorada {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
}

.sl-ficha--verde {
    background: var(--sl-degradado-verde);
    color: var(--sl-blanco);
}

.sl-combinacion {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Botones ───────────────────────────────────────────────────────────────────────────────── */

.sl-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--sl-radio-control);
    padding: 14px 20px;
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    /* 44px es el mínimo cómodo para un dedo. */
    min-height: 48px;
}

.sl-boton--principal {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
    box-shadow: 0 6px 16px rgba(212, 150, 10, 0.28);
}

.sl-boton--principal:hover,
.sl-boton--principal:focus {
    color: var(--sl-verde-oscuro);
    filter: brightness(1.04);
}

.sl-boton--contorno {
    background-color: transparent;
    border: 1px solid var(--sl-borde);
    color: var(--sl-verde);
    width: auto;
    padding: 10px 16px;
    font-size: 15px;
    min-height: 44px;
}

.sl-boton--contorno:hover {
    background-color: var(--sl-verde-palido);
    color: var(--sl-verde);
}

.sl-boton:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Formularios ───────────────────────────────────────────────────────────────────────────── */

.sl-etiqueta {
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--sl-texto);
}

.sl-campo {
    width: 100%;
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio-control);
    padding: 12px 14px;
    /* 16px o más: por debajo de eso iOS hace zoom al enfocar el campo. */
    font-size: 16px;
    font-family: inherit;
    color: var(--sl-texto);
    background-color: var(--sl-superficie);
    min-height: 48px;
}

.sl-campo:focus {
    outline: none;
    border-color: var(--sl-verde-brillante);
    box-shadow: 0 0 0 3px rgba(45, 170, 69, 0.18);
}

.sl-ayuda {
    font-size: 13px;
    color: var(--sl-texto-tenue);
    margin-top: 6px;
}

.sl-error {
    font-size: 13px;
    color: #8A1F1F;
    margin-top: 6px;
}

.sl-casilla {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.sl-casilla input {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--sl-verde);
    flex: none;
}

/* ── Cuadrícula de números ─────────────────────────────────────────────────────────────────── */

.sl-tablas {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* El desplazamiento entre tablas es horizontal a propósito y vive dentro de su contenedor;
       la página en sí nunca se desplaza de lado. */
    scrollbar-width: none;
    padding-bottom: 4px;
}

.sl-tablas::-webkit-scrollbar {
    display: none;
}

.sl-tabla {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background-color: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio-tarjeta);
    padding: 12px;
}

/* Los mismos seis campos se editan directamente cuando no carga el guion. La casilla revela el
   carrusel; con el flujo activo, el guion escribe en ellos y quedan fuera de la vista. */
#sl-flujo:not(.sl-flujo--activo) #combinaciones {
    display: none;
}

#sl-flujo:not(.sl-flujo--activo):has(#elegir-numeros:checked) #combinaciones {
    display: block;
}

#sl-flujo:not(.sl-flujo--activo) .sl-cuadricula,
#sl-flujo:not(.sl-flujo--activo) .sl-tabla__acciones {
    display: none;
}

#sl-flujo:not(.sl-flujo--activo) .sl-tabla {
    scroll-margin-top: 120px;
}

.sl-tabla__campos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sl-tabla__ayuda {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--sl-texto-suave);
    font-size: 12px;
}

.sl-tabla__campo {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--sl-verde-oscuro);
    font-size: 12px;
    font-weight: 700;
}

.sl-tabla__campo input {
    width: 100%;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--sl-borde);
    border-radius: 10px;
    background: #fff;
    color: var(--sl-verde-oscuro);
    font: inherit;
    font-size: 16px;
}

.sl-flujo--activo .sl-tabla__campos {
    display: none;
}

.sl-tabla__encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.sl-tabla__nombre {
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 15px;
    flex: none;
}

.sl-tabla__acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

.sl-tabla__acciones .sl-insignia {
    padding-inline: 8px;
    flex: none;
}

.sl-tabla__acciones .sl-boton--contorno {
    padding-inline: 8px;
    font-size: 13px;
    white-space: nowrap;
    flex: none;
}

.sl-numeros {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.sl-numero {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0;
    background-color: #EDF1EE;
    color: var(--sl-texto-suave);
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    /* El diámetro lo decide la rejilla de seis columnas con aspect-ratio, no la letra: subir la
       fuente agranda el número dentro del mismo círculo. A 320px el círculo mide unos 39px y dos
       dígitos a 15px caben sin tocar el borde. */
    font-size: clamp(15px, 4.4vw, 19px);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-numero:hover:not(:disabled) {
    background-color: #E1E8E3;
}

.sl-numero--elegido {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
    box-shadow: var(--sl-sombra-elegido);
}

.sl-numero:disabled:not(.sl-numero--elegido) {
    opacity: 0.4;
    cursor: default;
}

.sl-numero--hueco {
    visibility: hidden;
}

/* El rebote al elegir un número. La clase la pone el guion sobre el botón que se acaba de tocar
   y se la quita al terminar: uno a la vez y solo al elegir, nunca al quitar ni al repintar. Una
   cuadrícula que se abre con sus seis números puestos no anima ninguno, que si no parece un
   error. Es un botón que se toca cuarenta veces seguidas en un paquete grande, así que discreto. */
.sl-numero--recien {
    animation: sl-elegir 170ms ease-out;
}

@keyframes sl-elegir {
    0% { transform: scale(1); }
    45% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

/* Quien pide menos movimiento no ve ninguno. El guion además ni siquiera pone la clase. */
@media (prefers-reduced-motion: reduce) {
    .sl-numero--recien {
        animation: none;
    }
}

.sl-puntos {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.sl-punto {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #D3DCD6;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.sl-punto--activo {
    width: 20px;
    border-radius: var(--sl-radio-pastilla);
    background: var(--sl-degradado-boton);
}

/* ── Listas ────────────────────────────────────────────────────────────────────────────────── */

.sl-renglon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--sl-borde);
}

.sl-renglon:last-child {
    border-bottom: 0;
}

.sl-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--sl-verde-palido);
    border-radius: var(--sl-radio-control);
    padding: 12px 14px;
    margin-top: 8px;
}

.sl-total__cifra {
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 24px;
    color: var(--sl-verde);
}

/* ── Pie ───────────────────────────────────────────────────────────────────────────────────── */

.sl-pie {
    margin-top: auto;
    background: var(--sl-degradado-encabezado);
    color: var(--sl-texto-suave-sobre-oscuro);
    padding: 20px var(--sl-espacio);
    font-size: 13px;
}

.sl-pie a {
    color: var(--sl-verde-claro);
}

/* ── Pantalla de selección de combinaciones ─────────────────────────────────────────────────
   Los tres pasos del checkout. Todo va en píxeles y no en rem a propósito: site.css baja el
   tamaño base de html a 14px por debajo de 768px, y en rem cada control encogería justo en el
   teléfono, que es donde se compra. site.css no se toca porque también sirve al admin.         */

/* Con el guion activo desaparece el andamiaje del formulario sin guion: el carrusel de tablas
   deja de ser carrusel y se edita una combinación a la vez. */
.sl-flujo--activo .sl-tabla {
    flex: none;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sl-tabla__subtitulo,
.sl-editor__seleccion {
    display: none;
}

/* ── Paso 2 — La cuadrícula ─────────────────────────────────────────────────────────────────
   Maqueta 2.8, líneas 416 a 448. No es sticky: aquí el scroll es el de toda la página y el
   encabezado del sitio ya ocupa esa capa. A 360px, dejarla en el flujo evita que ambos bloques
   compitan por el espacio vertical.                                                           */

.sl-flujo--activo .sl-tabla__encabezado {
    display: block;
    margin-bottom: 8px;
    text-align: center;
}

.sl-flujo--activo .sl-tabla__nombre {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-flujo--activo .sl-tabla__subtitulo {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sl-gris-verdoso);
}

.sl-flujo--activo .sl-tabla__acciones {
    justify-content: center;
    margin-top: 3px;
}

.sl-flujo--activo .sl-tabla__acciones .sl-insignia {
    display: none;
}

.sl-flujo--activo .sl-tabla__acciones [data-limpiar] {
    padding: 2px 5px;
    border: 0;
    background: transparent;
    color: var(--sl-verde);
    font-size: 12px;
    text-decoration: underline;
    box-shadow: none;
}

.sl-flujo--activo #contador-numeros {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sl-flujo--activo #fichas-elegidas {
    display: none;
}

.sl-flujo--activo .sl-editor__seleccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.sl-casilleros {
    display: flex;
    gap: 5px;
    min-width: 0;
}

.sl-casillero {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: clamp(27px, 7.5vw, 34px);
    height: clamp(27px, 7.5vw, 34px);
    border: 2px solid #d6e7db;
    border-radius: 50%;
    background: #fff;
    color: #c3cdc5;
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
}

.sl-casillero--elegido {
    border-color: #D4960A;
    background: linear-gradient(180deg, #FFE066, #D4960A);
    color: #5a3d00;
}

.sl-flujo--activo .sl-editor__seleccion [data-elegir-por-mi] {
    flex: none;
    width: auto;
    padding: 8px 9px;
    border: 2px solid var(--sl-verde);
    border-radius: 11px;
    background: #eaf6ee;
    color: var(--sl-verde);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: none;
}

.sl-flujo--activo .sl-cuadricula {
    padding: 13px 12px;
    border: 2px solid var(--sl-dorado-claro);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(10, 32, 16, .08);
}

.sl-flujo--activo .sl-numeros {
    gap: 8px;
}

/* Solo cambian el reposo y el bloqueo. La regla aprobada del elegido al final del archivo sigue
   siendo dueña de su borde de 5px, su rebote y la capa de fragmentos. */
.sl-flujo--activo .sl-numero:not(.sl-numero--elegido) {
    background: #fff;
    color: var(--sl-verde);
    box-shadow: 0 2px 8px rgba(10, 32, 16, .1), inset 0 0 0 2px #d6e7db;
}

.sl-flujo--activo .sl-numero:hover:not(:disabled):not(.sl-numero--elegido) {
    background: #f4faf6;
}

.sl-flujo--activo .sl-numero:disabled:not(.sl-numero--elegido) {
    background: #eef0ee;
    color: #bcc4bd;
    box-shadow: inset 0 0 0 1px #e1e5e1;
    opacity: 1;
}

.sl-flujo--activo [data-acciones-manual] {
    margin-top: 14px;
}

.sl-flujo--activo [data-acciones-manual] [data-agregar] {
    border-radius: 15px;
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
}

.sl-manuales {
    padding: 12px 13px;
    border-radius: 16px;
    background: var(--sl-verde-oscuro);
}

.sl-manuales__titulo {
    margin: 0 0 8px;
    color: #9fd2ab;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sl-manuales__lista {
    display: grid;
    gap: 7px;
}

.sl-manuales__renglon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sl-manuales__indice {
    flex: none;
    min-width: 18px;
    color: #7fb88c;
    font-size: 10px;
    font-weight: 800;
}

.sl-manuales__numeros {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.sl-manuales__bola {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFE066, #D4960A);
    color: #5a3d00;
    font-family: var(--sl-fuente-titulo);
    font-size: 11.5px;
    font-weight: 800;
}

.sl-tope-manual {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid #f0d9a0;
    border-radius: 14px;
    background: #fff6e3;
}

.sl-tope-manual[hidden] {
    display: none;
}

.sl-tope-manual__icono {
    flex: none;
    font-size: 18px;
}

.sl-tope-manual p {
    margin: 0;
    color: #7a5500;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.42;
}

.sl-restantes {
    margin: 0;
    color: var(--sl-verde-oscuro);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.sl-flujo--activo [data-salidas] [data-completar] {
    border-radius: 15px;
    background: linear-gradient(180deg, #FFE066, #D4960A);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 15.5px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(212, 150, 10, .4);
}

.sl-flujo--activo [data-salidas] [data-otra-mano] {
    border: 2px solid var(--sl-verde);
    border-radius: 15px;
    background: #eaf6ee;
    color: var(--sl-verde);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
}

.sl-nota-seleccion {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid #e6ece7;
    border-radius: 14px;
    background: #fff;
}

.sl-flujo--activo .sl-nota-seleccion {
    display: flex;
}

.sl-nota-seleccion > span {
    flex: none;
    font-size: 18px;
}

.sl-nota-seleccion p {
    margin: 0;
    color: var(--sl-gris-verdoso);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.42;
}

.sl-nota-seleccion--unica {
    align-items: center;
    margin-top: 12px;
    padding: 13px;
    border-color: #cfe6d6;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef7f0, #e3f1e7);
}

.sl-nota-seleccion--unica > span {
    font-size: 22px;
}

.sl-nota-seleccion--unica p {
    color: #2a3b2e;
    font-size: 12px;
    line-height: 1.35;
}

.sl-nota-seleccion--unica strong {
    color: var(--sl-verde);
}

/* ── Paso 1 — Cómo eliges ───────────────────────────────────────────────────────────────────
   Maqueta 2.8, líneas 353 a 378. Ninguna de las dos viene marcada: es una elección, no un
   predeterminado con una alternativa. La de azar se ve oscura y con aro dorado porque así la
   destaca la maqueta, pero es solo énfasis visual: las dos pesan lo mismo como opción.         */

.sl-caminos__cabecera {
    margin-bottom: 14px;
    text-align: center;
}

.sl-publico .sl-caminos__titulo {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 22px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-caminos__cantidad {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sl-gris-verdoso);
}

.sl-caminos {
    display: grid;
    gap: 12px;
}

/* El aro va como sombra y no como borde, igual que en la maqueta, para que el foco pueda ir por
   fuera con outline sin confundirse con él. */
.sl-camino {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 18px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.sl-camino--manual {
    background-color: var(--sl-superficie);
    box-shadow: 0 6px 18px rgba(10, 32, 16, .08), 0 0 0 2px var(--sl-verde-brillante);
}

.sl-camino--azar {
    background: radial-gradient(120% 100% at 50% 0%, #143019, var(--sl-verde-oscuro));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), 0 0 0 2px var(--sl-dorado-claro);
}

.sl-camino--manual:hover {
    box-shadow: 0 10px 24px rgba(10, 32, 16, .14), 0 0 0 2px var(--sl-verde-brillante);
}

.sl-camino--azar:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .36), 0 0 0 2px var(--sl-dorado-claro);
}

/* El foco va por fuera del aro, separado, en el verde oscuro que contrasta con el fondo claro
   de la página. En la tarjeta de azar el aro ya es dorado en reposo: cambiarle el color no se
   notaría, y por eso el foco no toca el aro. */
.sl-camino:focus {
    outline: none;
}

.sl-camino:focus-visible {
    outline: 3px solid var(--sl-verde);
    outline-offset: 4px;
}

.sl-camino__icono {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 23px;
}

.sl-camino--manual .sl-camino__icono {
    background: linear-gradient(180deg, #eafaef, #d4eddd);
}

.sl-camino--azar .sl-camino__icono {
    background-color: rgba(255, 217, 102, .16);
}

.sl-camino__textos {
    flex: 1;
    min-width: 0;
}

.sl-camino__titulo {
    display: block;
    font-family: var(--sl-fuente-titulo);
    font-size: 17px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-camino__texto {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    color: #6a7a6e;
}

.sl-camino__flecha {
    flex: none;
    font-family: var(--sl-fuente-titulo);
    font-size: 19px;
    font-weight: 800;
    color: var(--sl-verde);
}

.sl-camino--azar .sl-camino__titulo,
.sl-camino--azar .sl-camino__flecha {
    color: var(--sl-dorado-claro);
}

.sl-camino--azar .sl-camino__texto {
    color: var(--sl-verde-claro);
}

@media (prefers-reduced-motion: reduce) {
    .sl-camino {
        transition: none;
    }
}

/* ── La animación ───────────────────────────────────────────────────────────────────────────
   La barra es indeterminada: cubre la petición real sin inventar un porcentaje.               */

.sl-sorteando {
    display: flex;
    min-height: 420px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 0;
    text-align: center;
}

.sl-sorteando[hidden] {
    display: none;
}

.sl-sorteando__titulo {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 22px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-sorteando__bolas {
    display: flex;
    justify-content: center;
    gap: 9px;
}

.sl-sorteando__bola {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFE066, #D4960A);
    color: #5a3d00;
    font-family: var(--sl-fuente-titulo);
    font-size: 19px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(212, 150, 10, .4);
    animation: sl-latido 0.6s ease-in-out infinite alternate;
}

.sl-sorteando__bola:nth-child(2) { animation-delay: 0.08s; }
.sl-sorteando__bola:nth-child(3) { animation-delay: 0.16s; }
.sl-sorteando__bola:nth-child(4) { animation-delay: 0.24s; }
.sl-sorteando__bola:nth-child(5) { animation-delay: 0.32s; }
.sl-sorteando__bola:nth-child(6) { animation-delay: 0.40s; }

@keyframes sl-latido {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}

.sl-sorteando__progreso {
    width: 180px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e9e4;
}

.sl-sorteando__progreso span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sl-verde-brillante), var(--sl-dorado-claro));
    animation: sl-progreso-indeterminado 900ms ease-in-out infinite;
}

@keyframes sl-progreso-indeterminado {
    from { transform: translateX(-110%); }
    to { transform: translateX(245%); }
}

.sl-sorteando__detalle {
    margin: -4px 0 0;
    color: var(--sl-gris-verdoso);
    font-size: 12px;
    font-weight: 700;
}

.sl-sorteando .sl-enlace {
    color: var(--sl-verde);
    font-size: 12px;
}

/* Quien pide menos movimiento no ve ninguno. El guion además se salta la espera entera. */
@media (prefers-reduced-motion: reduce) {
    .sl-sorteando__bola,
    .sl-sorteando__progreso span {
        animation: none;
    }
}

.sl-enlace {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--sl-verde-claro);
    text-decoration: underline;
    cursor: pointer;
}

/* Sobre fondo claro el enlace necesita el verde oscuro para contrastar. */
.sl-caja__acciones .sl-enlace,
[data-caja-envoltura] .sl-enlace,
[data-acciones-manual] .sl-enlace {
    color: var(--sl-verde);
}

.sl-acciones {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

/* ── La ventana ─────────────────────────────────────────────────────────────────────────────
   Solo para lo que bloquea. Es la superficie oscura de la marca, la misma del panel del sorteo,
   para que se lea como parte de la aplicación y no como una alerta del navegador.              */

.sl-ventana {
    width: min(92vw, 380px);
    padding: 20px;
    border: 1px solid var(--sl-borde-oscuro);
    border-radius: var(--sl-radio-tarjeta);
    background: var(--sl-degradado-superficie);
    color: var(--sl-texto-sobre-oscuro);
    box-shadow: var(--sl-sombra-tarjeta);
}

.sl-ventana::backdrop {
    background-color: var(--sl-fondo-atenuado);
}

/* Con la clase sola no basta: .sl-publico h2 pinta los títulos del color oscuro del texto, que
   sobre esta superficie no se lee. */
.sl-ventana .sl-ventana__titulo {
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 19px;
    color: var(--sl-texto-sobre-oscuro);
    margin: 0 0 12px;
}

/* Las mismas fichas doradas de la pantalla: que vea de cuál se habla sin buscarla detrás. */
.sl-ventana__numeros {
    justify-content: center;
    margin-bottom: 12px;
}

.sl-ventana__motivo {
    font-size: 14px;
    color: var(--sl-texto-suave-sobre-oscuro);
    margin: 0 0 16px;
}

.sl-ventana__acciones {
    display: grid;
    gap: 10px;
}

/* Sobre el fondo oscuro, el botón de contorno necesita su propio borde y su propio texto. */
.sl-ventana__acciones .sl-boton--contorno {
    border-color: var(--sl-borde-oscuro);
    background: transparent;
    color: var(--sl-texto-suave-sobre-oscuro);
}

.sl-ventana__acciones .sl-boton--contorno:hover {
    background-color: var(--sl-verde-oscuro);
    color: var(--sl-texto-sobre-oscuro);
}

.sl-ventana[open] {
    animation: sl-ventana-entra 140ms ease-out;
}

@keyframes sl-ventana-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Quien pide menos movimiento la ve aparecer y ya. */
@media (prefers-reduced-motion: reduce) {
    .sl-ventana[open] {
        animation: none;
    }
}

/* ── La caja de seleccionadas ───────────────────────────────────────────────────────────── */

.sl-caja {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 7px;
}

.sl-caja__renglon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    background-color: var(--sl-blanco);
    border: 1px solid var(--sl-boleto-auto-borde);
    border-radius: 13px;
    padding: 8px 9px;
}

.sl-caja__renglon--manual {
    background-color: var(--sl-boleto-manual-fondo);
    border-color: var(--sl-boleto-manual-borde);
}

.sl-caja__renglon[hidden],
.sl-checkout__ver-todas[hidden] {
    display: none;
}

.sl-caja__renglon--conflicto {
    border-color: #8A1F1F;
}

.sl-caja__renglon--pendiente {
    border-style: dashed;
}

.sl-caja__origen {
    grid-column: 1;
    grid-row: 1;
    border-radius: var(--sl-radio-pastilla);
    padding: 3px 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sl-verde);
    background-color: var(--sl-boleto-auto-etiqueta);
}

.sl-caja__renglon--manual .sl-caja__origen {
    color: var(--sl-dorado-texto);
    background-color: var(--sl-dorado-mas-claro);
}

.sl-caja .sl-combinacion {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap;
    gap: 4px;
}

.sl-caja .sl-ficha {
    width: 24px;
    height: 24px;
    font-size: 11px;
    font-weight: 800;
}

.sl-caja .sl-ficha--dorada {
    color: var(--sl-dorado-texto);
}

.sl-caja .sl-ficha--verde {
    background: var(--sl-verde-casi-blanco);
    color: var(--sl-verde);
}

.sl-caja__acciones {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    gap: 4px;
}

.sl-caja__accion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sl-boleto-auto-borde);
    border-radius: 10px;
    background: var(--sl-blanco);
    font-size: 15px;
    cursor: pointer;
}

.sl-caja__renglon--manual .sl-caja__accion {
    border-color: var(--sl-boleto-manual-borde);
}

.sl-caja__conflicto {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #8A1F1F;
    margin: 0;
}

.sl-caja__pendiente {
    grid-column: 2 / -1;
    font-size: 12px;
    color: var(--sl-texto-suave);
    margin: 0;
}

/* Las automáticas conservan dos acciones. A 360 px se compactan para mantener las seis bolas
   en una línea, sin cortar números ni mandar un botón al siguiente renglón. */
@media (max-width: 400px) {
    .sl-caja__renglon { gap: 4px; }
    .sl-caja__origen { font-size: 8px; padding: 3px 5px; }
    .sl-caja .sl-combinacion { gap: 3px; }
    .sl-caja .sl-ficha { width: 22px; height: 22px; }
    .sl-caja__acciones { gap: 2px; }
    .sl-caja__accion { width: 28px; height: 32px; }
}

/* ── Paso 3 · resumen, comprador y pago ──────────────────────────────────────────────────── */

.sl-checkout__cabecera {
    text-align: center;
    margin-bottom: 12px;
}

.sl-checkout__cabecera h2 {
    font-family: var(--sl-fuente-titulo);
    font-size: 21px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
    margin: 0;
}

.sl-checkout__cabecera p {
    color: var(--sl-gris-verdoso);
    font-size: 12.5px;
    font-weight: 700;
    margin: 0;
}

.sl-checkout [data-caja-envoltura] {
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--sl-gris-separador);
}

.sl-checkout__restantes {
    margin: 9px 0 0;
    text-align: center;
    color: var(--sl-boleto-restantes);
    font-size: 11.5px;
    font-weight: 700;
}

.sl-checkout__ver-todas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 11px;
    padding: 13px 14px;
    border: 1px solid var(--sl-boleto-auto-borde);
    border-radius: 14px;
    background: var(--sl-blanco);
    color: var(--sl-verde-oscuro);
    box-shadow: 0 4px 14px rgba(10, 32, 16, .06);
    font-size: 12.5px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.sl-checkout__ver-todas [aria-hidden] {
    color: var(--sl-verde);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
}

.sl-checkout__resumen {
    background: var(--sl-blanco);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(10, 32, 16, .07);
    padding: 15px;
    margin-bottom: 14px;
}

.sl-checkout__resumen h2,
.sl-checkout__titulo {
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
    margin: 0 0 11px;
}

.sl-checkout__resumen .sl-renglon {
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--sl-gris-separador);
    font-size: 12.5px;
    font-weight: 700;
}

.sl-checkout__resumen .sl-renglon > :last-child {
    text-align: right;
}

.sl-checkout__resumen .sl-cifra {
    color: var(--sl-verde-oscuro);
    font-size: 13px;
    font-weight: 800;
}

.sl-checkout__incluido,
.sl-checkout__regalo {
    font-size: 12px;
    font-weight: 800;
    color: var(--sl-verde);
}

.sl-checkout__regalo { color: var(--sl-dorado); }

.sl-checkout__resumen .sl-total {
    background: var(--sl-boleto-total-fondo);
    border: 0;
    border-radius: 12px;
    padding: 11px 13px;
    margin-top: 9px;
}

.sl-checkout__resumen .sl-total .sl-titulo {
    font-size: 15px;
    font-weight: 800;
}

.sl-checkout__resumen .sl-total__cifra {
    color: var(--sl-verde);
    font-size: 22px;
    font-weight: 800;
}

.sl-checkout__titulo {
    font-size: 14px;
    margin: 14px 2px 9px;
}

.sl-checkout__campo { margin-bottom: 9px; }

.sl-checkout .sl-campo {
    border: 2px solid var(--sl-gris-separador);
    border-radius: 13px;
    padding: 13px 14px;
    font-family: var(--sl-fuente-texto);
    /* 16px y no los 15 de la maqueta 2.9: por debajo, iOS Safari amplía la pantalla al enfocar. */
    font-size: 16px;
    font-weight: 700;
    color: var(--sl-verde-oscuro);
    background: var(--sl-blanco);
}

/* El estado sin elegir se ve como marcador, igual que la maqueta 3.7 (regionColor). */
.sl-checkout select.sl-campo:has(option[value=""]:checked) {
    color: var(--sl-gris-verdoso);
}

.sl-checkout__whatsapp {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--sl-gris-separador);
    border-radius: 13px;
    padding: 0 12px;
    background: var(--sl-blanco);
}

.sl-checkout__whatsapp .sl-campo {
    min-width: 0;
    border: 0;
    padding: 13px 4px;
    background: none;
    box-shadow: none;
}

/* El país con bandera, a la izquierda del WhatsApp y en la misma caja. Maqueta 3.7, línea 704. */
.sl-checkout__whatsapp .sl-checkout__pais {
    flex: none;
    width: auto;
    min-height: 0;
    padding: 13px 6px 13px 0;
    border-right: 1.5px solid var(--sl-gris-separador);
    border-radius: 0;
    font-weight: 800;
    cursor: pointer;
}

.sl-checkout .sl-campo:focus,
.sl-checkout__whatsapp:focus-within {
    border-color: var(--sl-verde);
}

.sl-checkout .sl-ayuda {
    margin: 5px 2px 14px;
    color: var(--sl-gris-verdoso);
    font-size: 10.5px;
    font-weight: 700;
}

.sl-checkout__pagos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.sl-checkout__pago {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    border: 2px solid var(--sl-gris-separador);
    border-radius: 13px;
    background: var(--sl-blanco);
    color: var(--sl-verde-oscuro);
    cursor: pointer;
}

.sl-checkout__pago:hover,
.sl-checkout__pago:focus-visible {
    border-color: var(--sl-verde);
    background: var(--sl-verde-casi-blanco);
    color: var(--sl-verde);
}

.sl-checkout__pago-icono { font-size: 24px; }
.sl-checkout__pago strong { font-size: 13.5px; font-weight: 800; }
.sl-checkout__pago-ayuda { color: var(--sl-gris-verdoso-claro); font-size: 10px; font-weight: 700; }

.sl-checkout__pago-seguro {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 13px;
    background: var(--sl-verde-casi-blanco);
}

.sl-checkout__pago-seguro > span { font-size: 16px; }
.sl-checkout__pago-seguro p { margin: 0; color: var(--sl-gris-verdoso-oscuro); font-size: 11px; font-weight: 700; line-height: 1.35; }
.sl-checkout__pago-seguro strong { color: var(--sl-verde); }

/* ── /Orden · ficha de pago ─────────────────────────────────────────────────────────────────
   Paso 4 de 5, maqueta 3.7, líneas 737 a 836. Los tonos que no tienen variable son los de la
   maqueta y solo se usan aquí.                                                                   */

.sl-ficha-pago {
    --sl-ficha-ambar-borde: #F0DCA6;
    --sl-ficha-ambar-texto: #644C14;
    --sl-ficha-gris-bono: #9FB5A4;
    margin-bottom: 20px;
}

.sl-ficha-pago__titulo {
    margin-bottom: 14px;
    text-align: center;
}

.sl-publico .sl-ficha-pago__titulo h2 {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 22px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-ficha-pago__titulo p {
    margin: 0;
    color: var(--sl-gris-verdoso);
    font-size: 12.5px;
    font-weight: 700;
}

.sl-ficha-pago__aviso-deposito {
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid var(--sl-verde-palido-borde);
    border-radius: 13px;
    background: var(--sl-verde-casi-blanco);
    color: var(--sl-gris-verdoso-oscuro);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
}

.sl-ficha-pago__tarjeta {
    overflow: hidden;
    border: 1px solid var(--sl-gris-separador);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(10, 32, 16, .1);
    background: var(--sl-blanco);
}

.sl-ficha-pago__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(120deg, var(--sl-verde-oscuro), #13361D);
}

.sl-ficha-pago__cabecera p {
    margin: 0;
}

.sl-ficha-pago__etiqueta-oscura {
    color: var(--sl-verde-claro);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sl-ficha-pago__importe {
    font-family: var(--sl-fuente-titulo);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--sl-dorado-claro);
}

.sl-ficha-pago__metodo {
    text-align: right;
}

.sl-ficha-pago__metodo p {
    color: var(--sl-verde-claro);
    font-size: 10px;
    font-weight: 700;
}

.sl-ficha-pago__metodo strong {
    color: var(--sl-blanco);
    font-size: 14px;
    font-weight: 800;
}

.sl-ficha-pago__renglones {
    padding: 6px 16px 14px;
}

.sl-ficha-pago__renglon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--sl-gris-separador);
}

.sl-ficha-pago__renglon:last-child {
    border-bottom: 0;
}

.sl-ficha-pago__renglon[hidden] {
    display: none;
}

.sl-ficha-pago__renglon > div {
    min-width: 0;
}

.sl-ficha-pago__dato {
    margin: 0;
    color: var(--sl-gris-verdoso-claro);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Seleccionable a mano aunque el portapapeles falle: nunca se esconde detrás del botón. */
.sl-ficha-pago__valor {
    margin: 0;
    color: var(--sl-verde-oscuro);
    font-size: 14.5px;
    font-weight: 800;
    word-break: break-word;
    user-select: text;
}

.sl-ficha-pago__copiar {
    flex: none;
    padding: 7px 10px;
    border: 1.5px solid var(--sl-verde);
    border-radius: 9px;
    background: var(--sl-verde-casi-blanco);
    color: var(--sl-verde);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.sl-ficha-pago__copiar--hecho {
    background: var(--sl-verde);
    color: var(--sl-blanco);
}

.sl-ficha-pago__instrucciones {
    margin: 0;
    padding: 0 16px 14px;
    color: var(--sl-gris-verdoso);
    font-size: 12px;
    font-weight: 700;
}

.sl-ficha-pago__concepto {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--sl-ficha-ambar-borde);
    border-radius: 13px;
    background: var(--sl-crema);
}

.sl-ficha-pago__concepto > span {
    font-size: 16px;
}

.sl-ficha-pago__concepto p {
    margin: 0;
    color: var(--sl-ficha-ambar-texto);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.sl-ficha-pago__apartado {
    margin-top: 16px;
    padding: 15px 14px 13px;
    border-radius: 16px;
    background-color: #000;
    box-shadow: 0 8px 20px rgba(10, 32, 16, .18);
    text-align: center;
}

.sl-ficha-pago__apartado p {
    margin: 0;
}

.sl-ficha-pago__apartado-titulo {
    color: var(--sl-dorado-claro);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.sl-ficha-pago__cuenta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    margin-top: 6px !important;
    color: var(--sl-dorado-claro);
}

.sl-ficha-pago__cuenta span {
    font-family: var(--sl-fuente-titulo);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sl-ficha-pago__cuenta small {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

/* Cuando falta poco: 5 minutos con transferencia, 30 con depósito. */
.sl-ficha-pago--urgente .sl-ficha-pago__cuenta {
    color: var(--sl-rojo-urgencia);
}

.sl-ficha-pago--urgente .sl-ficha-pago__apartado {
    box-shadow: 0 0 0 2px var(--sl-rojo-urgencia), 0 8px 20px rgba(10, 32, 16, .18);
}

.sl-ficha-pago__hasta {
    margin-top: 4px !important;
    color: var(--sl-ficha-gris-bono);
    font-size: 11px;
    font-weight: 700;
}

.sl-ficha-pago__bono {
    margin-top: 11px !important;
    padding-top: 9px;
    border-top: 1px dashed rgba(159, 210, 171, .3);
    color: var(--sl-ficha-gris-bono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.sl-ficha-pago__bono-vencido {
    display: flex;
    gap: 9px;
    margin-top: 11px;
    padding: 10px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    text-align: left;
}

.sl-ficha-pago__bono-vencido[hidden],
.sl-ficha-pago__bono[hidden] {
    display: none;
}

.sl-ficha-pago__bono-vencido > span {
    flex: none;
    font-size: 15px;
    filter: grayscale(1);
    opacity: .55;
}

.sl-ficha-pago__bono-vencido p {
    min-width: 0;
    color: #8D9A90;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.sl-ficha-pago__bono-vencido b {
    color: #A3AEA6;
}

.sl-publico .sl-ficha-pago__subir {
    margin: 16px 0 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-ficha-pago__subir-ayuda {
    margin: 2px 0 10px;
    color: var(--sl-gris-verdoso);
    font-size: 11.5px;
    font-weight: 700;
}

/* El <label> que envuelve el campo de archivo. El campo va con .visually-hidden, no con
   display: none, para que se alcance con el teclado; el foco se ve en el recuadro. */
.sl-ficha-pago__recuadro {
    display: block;
    padding: 18px 14px;
    border: 2px dashed #CFD8D0;
    border-radius: 15px;
    background: var(--sl-blanco);
    text-align: center;
    cursor: pointer;
}

.sl-ficha-pago__recuadro:focus-within {
    outline: 3px solid rgba(45, 170, 69, .35);
    outline-offset: 2px;
}

.sl-ficha-pago__recuadro--listo {
    border-color: var(--sl-verde);
    background: var(--sl-verde-casi-blanco);
}

.sl-ficha-pago__recuadro-icono {
    display: block;
    font-size: 30px;
    line-height: 1;
}

.sl-ficha-pago__recuadro-texto {
    display: block;
    margin-top: 6px;
    color: var(--sl-verde-oscuro);
    font-size: 13px;
    font-weight: 800;
    word-break: break-word;
}

.sl-ficha-pago__recuadro--listo .sl-ficha-pago__recuadro-texto {
    color: var(--sl-verde);
}

.sl-ficha-pago__recuadro-pista {
    display: block;
    margin-top: 2px;
    color: var(--sl-gris-verdoso-claro);
    font-size: 10.5px;
    font-weight: 700;
}

.sl-ficha-pago__enviar {
    width: 100%;
    margin-top: 14px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: var(--sl-degradado-boton);
    box-shadow: 0 8px 20px rgba(212, 150, 10, .4);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .02em;
}

.sl-ficha-pago__enviar:disabled {
    background: var(--sl-gris-apagado);
    box-shadow: none;
    color: var(--sl-gris-verdoso-claro);
    cursor: not-allowed;
}

/* Plazo vencido o compra cancelada. Maqueta 3.7, líneas 816 a 821, sin "se liberaron". */
.sl-ficha-pago__vencido {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid #F5C6C0;
    border-radius: 13px;
    background: #FDECEA;
}

.sl-ficha-pago__vencido p {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #8A2A1F;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
}

.sl-publico .sl-ficha-pago__apartar {
    flex: none;
    padding: 8px 11px;
    border-radius: 10px;
    background: var(--sl-verde-oscuro);
    color: var(--sl-dorado-claro);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

/* ── /Orden · confirmación ───────────────────────────────────────────────────────────────────
   Paso 5 de 5, maqueta 3.7, líneas 837 a 973, sin el raspadito, la cascada ni el Canal VIP.
   Los tonos claros sin variable son los de la maqueta y solo se usan aquí.                      */

.sl-confirmacion {
    --sl-confirmacion-texto: #DFF1E3;
    --sl-confirmacion-suave: #BFE8C8;
    position: relative;
    overflow: hidden;
    padding: 26px 18px 40px;
    background: radial-gradient(120% 70% at 50% 0%, var(--sl-fondo-brillo), var(--sl-verde-oscuro));
    text-align: center;
}

.sl-confirmacion p {
    margin: 0;
}

.sl-confirmacion__mascota {
    display: flex;
    justify-content: center;
    animation: sl-aparecer .5s ease-out;
}

.sl-confirmacion__mascota .sl-paddy-festejo {
    width: 140px;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
}

.sl-publico .sl-confirmacion__titulo {
    margin: 4px 0 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 27px;
    font-weight: 800;
    color: var(--sl-blanco);
    animation: sl-subir .5s .15s both;
}

.sl-confirmacion__bajada {
    margin-top: 4px !important;
    color: var(--sl-verde-claro);
    font-size: 13px;
    font-weight: 700;
    animation: sl-subir .5s .25s both;
}

.sl-confirmacion__tarjeta {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(255, 217, 102, .25);
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    text-align: left;
    animation: sl-subir .5s .35s both;
}

.sl-confirmacion__saludo {
    color: var(--sl-dorado-claro);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.sl-confirmacion__estado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px !important;
    padding: 5px 12px;
    border: 1px solid rgba(255, 217, 102, .35);
    border-radius: var(--sl-radio-pastilla);
    background: rgba(255, 217, 102, .16);
    color: var(--sl-dorado-claro);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.sl-confirmacion__estado > span {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sl-dorado-claro);
    box-shadow: 0 0 8px var(--sl-dorado-claro);
}

.sl-confirmacion__estado--pagada {
    border-color: rgba(45, 170, 69, .5);
    background: rgba(45, 170, 69, .2);
    color: var(--sl-confirmacion-suave);
}

.sl-confirmacion__estado--pagada > span {
    background: var(--sl-verde-brillante);
    box-shadow: 0 0 8px var(--sl-verde-brillante);
}

.sl-confirmacion__aviso {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px !important;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: var(--sl-confirmacion-texto);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}

.sl-confirmacion__aviso > span:first-child {
    font-size: 20px;
}

.sl-confirmacion__aviso b {
    color: var(--sl-dorado-claro);
    white-space: nowrap;
}

.sl-confirmacion__paddy {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    margin-top: 13px;
    text-align: left;
    animation: sl-subir .5s .4s both;
}

.sl-confirmacion__paddy .sl-paddy-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    object-fit: contain;
}

.sl-confirmacion__burbuja {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(255, 217, 102, .25);
    border-radius: 16px 16px 16px 4px;
    background: var(--sl-blanco);
    box-shadow: 0 4px 14px rgba(10, 32, 16, .06);
    color: var(--sl-gris-verdoso-oscuro);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
}

.sl-confirmacion .sl-confirmacion__burbuja-nombre {
    margin-bottom: 4px;
    color: var(--sl-verde);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.sl-confirmacion__aseguradas {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px !important;
    color: var(--sl-confirmacion-suave);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    animation: sl-subir .5s .42s both;
}

.sl-confirmacion__aseguradas > span:first-child {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sl-verde-brillante);
    color: var(--sl-blanco);
    font-size: 11px;
    font-weight: 900;
}

.sl-publico .sl-confirmacion__aseguradas a,
.sl-publico .sl-confirmacion__consulta a {
    color: var(--sl-dorado-claro);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sl-confirmacion__raspaditos {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding: 14px;
    border: 1px dashed rgba(255, 217, 102, .35);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    text-align: left;
    animation: sl-subir .5s .45s both;
}

.sl-confirmacion__raspaditos > span {
    font-size: 26px;
}

.sl-confirmacion__raspaditos p {
    color: var(--sl-verde-claro);
    font-size: 11px;
    font-weight: 700;
}

.sl-confirmacion .sl-confirmacion__raspaditos-cifra {
    color: var(--sl-blanco);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
}

.sl-publico .sl-confirmacion__boleto {
    display: block;
    margin-top: 13px;
    padding: 14px;
    border: 1.5px solid rgba(255, 217, 102, .5);
    border-radius: 15px;
    background: rgba(255, 217, 102, .08);
    color: var(--sl-dorado-claro);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    animation: sl-subir .5s .5s both;
}

.sl-confirmacion__consulta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px !important;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: var(--sl-confirmacion-texto);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    animation: sl-subir .5s .55s both;
}

.sl-confirmacion__consulta > span:first-child {
    font-size: 20px;
}

.sl-publico .sl-confirmacion__inicio {
    display: block;
    margin-top: 14px;
    padding: 15px;
    border-radius: 15px;
    background: var(--sl-degradado-boton);
    box-shadow: 0 6px 18px rgba(212, 150, 10, .4);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    animation: sl-subir .5s .6s both;
}

.sl-confirmacion__resultado {
    margin-top: 11px !important;
    color: var(--sl-verde-claro-apagado);
    font-size: 11px;
    font-weight: 700;
    animation: sl-subir .5s .6s both;
}

/* El confeti lo crea orden.js una sola vez por orden pagada y lo quita al terminar de caer. */
.sl-confeti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sl-confeti > span {
    position: absolute;
    top: 0;
    border-radius: 2px;
    opacity: .9;
    animation-name: sl-confeti;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

/* ── /MisCompras · verificador de boleto ─────────────────────────────────────────────────────
   Maqueta 3.7, líneas 974 a 1083, con una tarjeta por compra y sin folio. Los campos son los de
   /Comprar (.sl-checkout): 16 px y la misma caja de país y WhatsApp.                             */

.sl-verificador__titulo {
    margin-bottom: 14px;
    text-align: center;
}

.sl-verificador__titulo > span {
    font-size: 34px;
}

.sl-publico .sl-verificador__titulo h2 {
    margin: 4px 0 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 21px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-verificador__titulo p {
    margin: 0;
    color: var(--sl-gris-verdoso);
    font-size: 12.5px;
    font-weight: 700;
}

.sl-verificador__formulario .sl-checkout__whatsapp > span {
    flex: none;
    font-size: 18px;
}

.sl-verificador__consultar {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--sl-verde-brillante), var(--sl-verde));
    box-shadow: 0 6px 16px rgba(27, 124, 46, .3);
    color: var(--sl-blanco);
    font-family: var(--sl-fuente-titulo);
    font-size: 16px;
    font-weight: 800;
}

.sl-verificador__consultar:disabled {
    background: var(--sl-gris-apagado);
    box-shadow: none;
    color: var(--sl-gris-verdoso-claro);
    cursor: not-allowed;
}

.sl-verificador__tarjeta {
    overflow: hidden;
    margin-top: 16px;
    border-radius: 18px;
    background: var(--sl-blanco);
    box-shadow: 0 6px 18px rgba(10, 32, 16, .08);
}

.sl-verificador__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(120deg, var(--sl-verde-oscuro), #13361D);
}

.sl-verificador__compra {
    min-width: 0;
}

.sl-publico .sl-verificador__compra h3 {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--sl-dorado-claro);
}

.sl-verificador__compra p {
    margin: 2px 0 0;
    color: var(--sl-verde-claro);
    font-size: 10.5px;
    font-weight: 700;
}

/* El punto de color del estado: verde pagada, dorado en camino, gris terminada. */
.sl-verificador__estado {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 52%;
    margin: 0;
    padding: 5px 11px;
    border-radius: var(--sl-radio-pastilla);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.2;
}

.sl-verificador__estado > span {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.sl-verificador__estado--verde {
    background: rgba(45, 170, 69, .2);
    color: #BFE8C8;
}

.sl-verificador__estado--verde > span {
    background: var(--sl-verde-brillante);
    box-shadow: 0 0 8px var(--sl-verde-brillante);
}

.sl-verificador__estado--dorado {
    background: rgba(255, 217, 102, .16);
    color: var(--sl-dorado-claro);
}

.sl-verificador__estado--dorado > span {
    background: var(--sl-dorado-claro);
    box-shadow: 0 0 8px var(--sl-dorado-claro);
}

.sl-verificador__estado--gris {
    background: rgba(255, 255, 255, .1);
    color: var(--sl-gris-tenue-claro);
}

.sl-verificador__estado--gris > span {
    background: var(--sl-gris-verdoso-claro);
}

.sl-verificador__cuerpo {
    padding: 14px 16px;
}

.sl-verificador__dato {
    margin: 0;
    color: var(--sl-gris-verdoso-claro);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sl-verificador__bolas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.sl-verificador__bolas > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--sl-verde-brillante), var(--sl-verde));
    color: var(--sl-blanco);
    font-family: var(--sl-fuente-titulo);
    font-size: 13px;
    font-weight: 800;
}

.sl-verificador__bolas > strong {
    align-self: center;
    margin-left: 3px;
    color: var(--sl-verde);
    font-size: 12px;
    font-weight: 800;
}

.sl-verificador__renglon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    color: var(--sl-gris-verdoso);
    font-size: 12px;
    font-weight: 700;
}

.sl-verificador__renglon strong {
    color: var(--sl-verde-oscuro);
    font-size: 13px;
    font-weight: 800;
}

.sl-verificador__renglon--paquete {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px dashed var(--sl-gris-separador);
}

.sl-verificador__plazo {
    margin: 10px 0 0;
    color: var(--sl-gris-verdoso-claro);
    font-size: 11.5px;
    font-weight: 700;
}

.sl-publico .sl-verificador__boton {
    display: block;
    margin-top: 14px;
    padding: 13px;
    border-radius: 13px;
    font-family: var(--sl-fuente-titulo);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.sl-publico .sl-verificador__boton--lleno {
    background: linear-gradient(180deg, var(--sl-verde-brillante), var(--sl-verde));
    box-shadow: 0 5px 14px rgba(27, 124, 46, .3);
    color: var(--sl-blanco);
}

.sl-publico .sl-verificador__boton--contorno {
    padding: 11px;
    border: 2px solid var(--sl-verde);
    background: var(--sl-verde-casi-blanco);
    color: var(--sl-verde);
}

.sl-publico .sl-verificador__boton--neutro {
    padding: 11px;
    border: 2px solid var(--sl-gris-separador);
    background: var(--sl-blanco);
    color: var(--sl-gris-verdoso);
}

/* "verlas en Mi boleto" y los botones de la confirmación llegan aquí; el encabezado es fijo. */
.sl-mi-boleto {
    scroll-margin-top: 72px;
}

/* ── /Orden · Mi boleto ───────────────────────────────────────────────────────────────────────
   Maqueta 3.7, líneas 1084 a 1217: el ticket de la compra pagada y la línea de tiempo de la que
   está en revisión, sobre el fondo oscuro de su pantalla. Los tonos del papel son los de la
   maqueta y solo se usan aquí.                                                                   */

.sl-mi-boleto--oscuro {
    --sl-ticket-papel: #FBF7EC;
    --sl-ticket-tuya: #FBEFC9;
    --sl-ticket-indice-tuya: #B8860B;
    --sl-ticket-suave: #6A7A6E;
    --sl-ticket-nota: #7A8A7E;
    margin: 0 calc(var(--sl-espacio) * -1) 16px;
    padding: 16px 10px 20px;
    background: #23281F;
}

.sl-mi-boleto__aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 362px;
    margin: 0 auto 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--sl-blanco);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.sl-mi-boleto__aviso--interno {
    margin: 0;
    padding: 0;
    box-shadow: none;
}

.sl-publico .sl-mi-boleto__noticia {
    margin: 0;
    color: #0C7A1D;
    font-family: var(--sl-fuente-texto);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sl-publico .sl-mi-boleto__noticia--estado {
    color: #803D08;
    font-size: 13px;
}

.sl-mi-boleto__pildora {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 11px;
    border-radius: var(--sl-radio-pastilla);
    font-size: 10.5px;
    font-weight: 800;
}

.sl-mi-boleto__pildora > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.sl-mi-boleto__pildora--verde {
    background: var(--sl-verde-palido);
    color: var(--sl-verde);
}

.sl-mi-boleto__pildora--verde > span {
    background: var(--sl-verde-brillante);
}

.sl-mi-boleto__pildora--dorada {
    background: var(--sl-crema);
    color: var(--sl-dorado-oscuro);
}

.sl-mi-boleto__pildora--dorada > span {
    background: var(--sl-dorado);
}

/* El ticket. Las franjas van en los costados por posición absoluta, y el papel deja 34 px de
   cada lado para que nunca tapen los números. */
.sl-ticket {
    position: relative;
    overflow: hidden;
    max-width: 362px;
    margin: 0 auto;
    border-radius: 6px;
    background: var(--sl-ticket-papel);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .4);
}

.sl-ticket__franja {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 24px;
    background: var(--sl-verde-oscuro);
}

.sl-ticket__franja--izquierda {
    left: 0;
}

.sl-ticket__franja--derecha {
    right: 0;
}

.sl-ticket__franja span {
    writing-mode: vertical-rl;
    color: var(--sl-dorado-claro);
    font-family: var(--sl-fuente-titulo);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3em;
    white-space: nowrap;
}

.sl-ticket__franja--izquierda span {
    transform: rotate(180deg);
}

.sl-ticket__papel {
    padding: 18px 34px 22px;
}

.sl-ticket__logo {
    display: flex;
    justify-content: center;
}

.sl-ticket__logo .sl-logo {
    height: 46px;
}

.sl-publico .sl-ticket__titulo {
    margin: 2px 0 0;
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
}

.sl-ticket__horario {
    margin: 0;
    color: var(--sl-ticket-nota);
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

.sl-ticket__corte {
    overflow: hidden;
    margin: 11px 0 8px;
    color: var(--sl-verde-oscuro);
    font-family: monospace;
    font-size: 12px;
    letter-spacing: .05em;
    white-space: nowrap;
    opacity: .55;
}

/* Las cifras de Nunito son tabulares: los números quedan en columna sin otra tipografía. */
.sl-ticket__combinaciones {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}

.sl-ticket__fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 5px;
}

.sl-ticket__fila--tuya {
    background: var(--sl-ticket-tuya);
}

.sl-ticket__indice {
    flex: none;
    color: var(--sl-verde);
    font-size: 12px;
    font-weight: 800;
}

.sl-ticket__fila--tuya .sl-ticket__indice {
    color: var(--sl-ticket-indice-tuya);
}

.sl-ticket__numeros {
    flex: 1;
    min-width: 0;
    color: #1A1A1A;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sl-ticket__tuya {
    flex: none;
    color: var(--sl-verde);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
}

.sl-ticket__datos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    font-size: 11.5px;
}

.sl-ticket__datos > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.sl-ticket__datos dt {
    flex: none;
    color: var(--sl-ticket-suave);
    font-weight: 600;
}

.sl-ticket__datos dd {
    min-width: 0;
    margin: 0;
    color: var(--sl-verde-oscuro);
    font-weight: 700;
    text-align: right;
    word-break: break-word;
}

.sl-ticket__nota {
    margin: 13px 0 0;
    color: var(--sl-ticket-nota);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.sl-ticket__nota b {
    color: var(--sl-verde);
}

/* A 360 px la columna deja poco papel: se adelgazan los márgenes, nunca las franjas. */
@media (max-width: 374px) {
    .sl-ticket__papel {
        padding-inline: 30px;
    }

    .sl-ticket__fila {
        gap: 6px;
        padding-inline: 4px;
    }

    .sl-ticket__numeros {
        font-size: 12.5px;
        letter-spacing: 0;
    }
}

/* El botón dorado de la descarga, debajo del ticket (TASK 45). */
.sl-publico .sl-mi-boleto__pdf {
    display: block;
    max-width: 362px;
    margin: 12px auto 0;
    padding: 14px;
    border-radius: 13px;
    background: var(--sl-degradado-boton);
    box-shadow: 0 6px 16px rgba(212, 150, 10, .4);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

/* En revisión: la línea de tiempo. */
.sl-mi-boleto__estado {
    max-width: 362px;
    margin: 0 auto 14px;
    padding: 14px;
    border-radius: 16px;
    background: var(--sl-blanco);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.sl-mi-boleto__linea {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 13px 0 0;
    padding: 12px 0 0;
    border-top: 1px dashed var(--sl-gris-separador);
    list-style: none;
}

.sl-mi-boleto__paso {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--sl-gris-verdoso-claro);
    font-size: 12px;
    font-weight: 700;
}

.sl-mi-boleto__paso > span {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px dashed #CFD6D1;
    border-radius: 50%;
}

.sl-mi-boleto__paso--hecho {
    color: var(--sl-verde-oscuro);
    font-weight: 800;
}

.sl-mi-boleto__paso--hecho > span {
    border: 0;
    background: var(--sl-verde-brillante);
    color: var(--sl-blanco);
    font-size: 11px;
    font-weight: 900;
}

.sl-mi-boleto__paso--actual {
    color: var(--sl-dorado-oscuro);
    font-weight: 800;
}

.sl-mi-boleto__paso--actual > span {
    border: 3px solid var(--sl-dorado-claro);
    border-top-color: var(--sl-dorado);
    animation: sl-girar 1s linear infinite;
}

.sl-mi-boleto__sms {
    margin: 11px 0 0;
    color: var(--sl-gris-verdoso);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
}

.sl-publico .sl-mi-boleto__lista-titulo {
    color: var(--sl-blanco);
}

@media (prefers-reduced-motion: reduce) {
    .sl-mi-boleto__paso--actual > span {
        animation: none;
    }
}

.sl-boton--chico {
    padding: 8px 14px;
    font-size: 14px;
    min-height: 40px;
    width: auto;
}

/* ── Portada · encabezado principal ───────────────────────────────────────────────────────── */

.sl-portada-urgencia {
    background-color: var(--sl-rojo-urgencia);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 14px,
        rgba(0, 0, 0, .12) 14px,
        rgba(0, 0, 0, .12) 28px
    );
    color: var(--sl-blanco);
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 10px;
}

.sl-portada-hero {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 26px;
    background: radial-gradient(
        120% 80% at 80% 0%,
        var(--sl-fondo-brillo) 0%,
        var(--sl-verde-oscuro) 55%,
        var(--sl-fondo-profundo) 100%
    );
    color: var(--sl-texto-sobre-oscuro);
}

.sl-portada-hero__luz {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 217, 102, .22), transparent 65%);
    animation: sl-resplandor 4s ease-in-out infinite;
    pointer-events: none;
}

.sl-portada-hero__estrella {
    position: absolute;
    color: var(--sl-dorado-claro);
    opacity: .5;
    animation: sl-flotar 5s ease-in-out infinite;
    pointer-events: none;
}

.sl-portada-hero__estrella--izquierda {
    left: 8px;
    top: 60px;
    font-size: 14px;
}

.sl-portada-hero__estrella--derecha {
    right: 30px;
    bottom: 90px;
    font-size: 10px;
    animation-duration: 6s;
    animation-delay: .5s;
}

.sl-portada-hero__principal {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.sl-portada-hero__datos {
    flex: 1;
    min-width: 0;
}

.sl-portada-hero__sorteo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 4px 10px;
    border: 1px solid rgba(45, 170, 69, .4);
    border-radius: var(--sl-radio-pastilla);
    background-color: rgba(45, 170, 69, .18);
    color: var(--sl-verde-palido-borde);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-portada-hero__sorteo > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--sl-verde-brillante);
    box-shadow: 0 0 8px var(--sl-verde-brillante);
    animation: sl-resplandor 1.4s infinite;
    flex: none;
}

.sl-portada-hero__apertura,
.sl-portada-hero__etiqueta,
.sl-portada-hero__bolsa,
.sl-portada-hero__garantizados,
.sl-portada-hero__acumulado,
.sl-portada-hero__ayuda,
.sl-portada-confianza p,
.sl-portada-crecimiento p {
    margin: 0;
}

.sl-portada-hero__etiqueta {
    color: var(--sl-verde-claro);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sl-portada-hero .sl-portada-hero__bolsa {
    font-family: var(--sl-fuente-titulo);
    font-size: clamp(40px, 12vw, 52px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: .95;
    letter-spacing: -.02em;
    color: transparent;
    background: linear-gradient(180deg, var(--sl-dorado-mas-claro), var(--sl-dorado-claro) 45%, var(--sl-dorado));
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 3px 10px rgba(212, 150, 10, .4));
    animation: sl-pulso 2.6s ease-in-out infinite;
    white-space: nowrap;
}

/* Maqueta 3.7, líneas 55, 64 y 65. */
.sl-portada-hero .sl-portada-hero__apertura {
    position: relative;
    margin-bottom: 12px;
    color: var(--sl-verde-palido-borde);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: pretty;
}

.sl-portada-hero__apertura b {
    color: var(--sl-dorado-claro);
}

.sl-portada-hero .sl-portada-hero__garantizados {
    margin-top: 2px;
    font-family: var(--sl-fuente-titulo);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--sl-dorado-claro);
}

.sl-portada-hero .sl-portada-hero__acumulado {
    margin-top: 8px;
    color: var(--sl-verde-claro);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: pretty;
}

.sl-portada-hero__acumulado b {
    color: var(--sl-verde-palido);
    font-variant-numeric: tabular-nums;
}

.sl-portada-hero__mascota {
    width: 144px;
    flex: none;
    margin-top: -2px;
}

.sl-portada-hero__mascota .sl-paddy {
    width: 100%;
    height: auto;
    animation: sl-flotar 4.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}

.sl-portada-crecimiento {
    position: relative;
    margin-top: 6px;
}

.sl-portada-crecimiento summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
    color: var(--sl-dorado-claro);
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.sl-portada-crecimiento summary::-webkit-details-marker {
    display: none;
}

.sl-portada-crecimiento summary span {
    display: inline-block;
    text-decoration: none;
    transition: transform .2s;
}

.sl-portada-crecimiento[open] summary span {
    transform: rotate(90deg);
}

.sl-portada-crecimiento__panel {
    margin-top: 6px;
    padding: 12px;
    border: 1px solid rgba(255, 217, 102, .16);
    border-radius: var(--sl-radio-tarjeta);
    background-color: rgba(0, 0, 0, .28);
    animation: sl-aparecer .25s;
}

.sl-portada-crecimiento__panel > p {
    color: var(--sl-verde-palido-borde);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* La 2.9 destaca el número de compras: grande, en la letra de títulos y en dorado. */
.sl-portada-crecimiento__compras {
    color: var(--sl-dorado-claro);
    font-family: var(--sl-fuente-titulo);
    font-size: 17px;
    font-weight: 800;
}

.sl-portada-crecimiento__grafica {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 74px;
    margin-top: 10px;
    padding: 0 4px;
}

.sl-portada-crecimiento__columna {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    height: 100%;
    color: var(--sl-verde-claro-apagado);
    font-size: 8px;
    font-weight: 800;
}

.sl-portada-crecimiento__barra {
    display: block;
    width: 100%;
    height: var(--sl-altura);
    border-radius: 6px 6px 0 0;
    background: var(--sl-degradado-verde);
}

.sl-portada-crecimiento__barra--hoy {
    background: var(--sl-degradado-boton);
}

.sl-portada-crecimiento__panel > small {
    display: block;
    margin-top: 6px;
    color: var(--sl-verde-claro-apagado);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.sl-portada-cuenta {
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 217, 102, .16);
    border-radius: var(--sl-radio-tarjeta);
    background-color: rgba(0, 0, 0, .28);
}

.sl-portada-cuenta__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sl-portada-cuenta__cabecera strong {
    color: var(--sl-verde-palido-borde);
    font-size: 11px;
    letter-spacing: .03em;
    white-space: nowrap;
}

.sl-portada-cuenta__cabecera span {
    color: var(--sl-verde-claro-apagado);
    font-size: 10.5px;
    font-weight: 700;
    text-align: right;
}

.sl-portada-cuenta__numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.sl-portada-cuenta__numeros > span {
    padding: 7px 0;
    border: 1px solid rgba(255, 217, 102, .14);
    border-radius: 11px;
    background: var(--sl-degradado-superficie);
    text-align: center;
}

.sl-portada-cuenta__numeros strong,
.sl-portada-cuenta__numeros small {
    display: block;
}

.sl-portada-cuenta__numeros strong {
    color: var(--sl-dorado-claro);
    font-family: var(--sl-fuente-titulo);
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.sl-portada-cuenta__numeros small {
    color: var(--sl-verde-claro-apagado);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .1em;
}

.sl-publico .sl-portada-hero__accion {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    margin-top: 14px;
    padding: 17px 18px;
    border-radius: var(--sl-radio-tarjeta);
    background: var(--sl-degradado-boton);
    box-shadow: 0 8px 20px rgba(212, 150, 10, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    animation: sl-halo 2.4s infinite;
}

.sl-publico .sl-portada-hero__accion:hover {
    color: var(--sl-verde-oscuro);
}

.sl-portada-hero__accion > span:first-child {
    position: relative;
    z-index: 1;
}

.sl-portada-hero__brillo {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: sl-brillo 3s linear infinite;
}

.sl-portada-hero__ayuda {
    margin-top: 8px;
    color: var(--sl-verde-claro-apagado);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.sl-portada-confianza {
    display: flex;
    gap: 7px;
    margin-top: 14px;
}

.sl-portada-confianza > div {
    flex: 1;
    padding: 9px 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--sl-radio-control);
    background-color: rgba(255, 255, 255, .06);
    text-align: center;
}

.sl-portada-confianza > div > span {
    display: block;
    margin-bottom: 1px;
    font-size: 15px;
}

.sl-portada-confianza p {
    color: var(--sl-verde-palido);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.25;
}

.sl-portada-confianza strong {
    color: var(--sl-dorado-claro);
}

@media (max-width: 360px) {
    .sl-portada-hero__mascota {
        width: 118px;
    }

    .sl-portada-hero .sl-portada-hero__bolsa {
        font-size: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-portada-hero__luz,
    .sl-portada-hero__estrella,
    .sl-portada-hero__sorteo > span,
    .sl-portada-hero .sl-portada-hero__bolsa,
    .sl-portada-hero__mascota .sl-paddy,
    .sl-portada-crecimiento__panel,
    .sl-publico .sl-portada-hero__accion,
    .sl-portada-hero__brillo {
        animation: none;
    }

    .sl-portada-crecimiento summary span {
        transition: none;
    }
}

/* ── Portada · cómo funciona y reglas ───────────────────────────────────────────────────────
   Los dos acordeones de texto fijo. Son <details>: abren y cierran sin guion, y la flecha gira
   con el estado [open]. Medidas de la maqueta 2.8.                                              */

.sl-portada-bloque--arriba {
    padding: 20px 18px 6px;
}

.sl-portada-bloque--abajo {
    padding: 16px 18px 8px;
}

.sl-portada-acordeon {
    background-color: var(--sl-superficie);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(10, 32, 16, .06);
    overflow: hidden;
}

.sl-portada-acordeon summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.sl-portada-acordeon summary::-webkit-details-marker {
    display: none;
}

.sl-portada-acordeon__textos {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sl-portada-acordeon__titulo {
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.15;
    color: var(--sl-verde-oscuro);
}

.sl-portada-acordeon__bajada {
    font-weight: 700;
    font-size: 11.5px;
    color: var(--sl-gris-verdoso);
}

.sl-portada-acordeon__flecha {
    flex: none;
    font-weight: 800;
    font-size: 15px;
    color: var(--sl-verde);
    transition: transform .2s;
}

.sl-portada-acordeon[open] .sl-portada-acordeon__flecha {
    transform: rotate(180deg);
}

/* Cómo funciona: cuatro tarjetas numeradas. */
.sl-portada-pasos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 2px 10px 12px;
}

.sl-portada-paso {
    display: flex;
    align-items: center;
    gap: 13px;
    background-color: var(--sl-superficie);
    border-radius: 18px;
    padding: 13px;
    box-shadow: 0 6px 18px rgba(10, 32, 16, .07);
}

.sl-portada-paso__numero {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--sl-degradado-verde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 20px;
    color: var(--sl-blanco);
    box-shadow: 0 4px 10px rgba(27, 124, 46, .35);
}

/* El segundo paso es el dorado de la maqueta: #FFD966 a #D4960A, no el degradado del botón. */
.sl-portada-paso__numero--dorado {
    background: linear-gradient(180deg, var(--sl-dorado-claro), var(--sl-dorado));
    color: var(--sl-dorado-texto);
    box-shadow: 0 4px 10px rgba(212, 150, 10, .35);
}

.sl-portada-paso__titulo {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 15px;
    color: var(--sl-verde-oscuro);
}

.sl-portada-paso__texto {
    margin: 0;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    color: var(--sl-gris-verdoso);
}

/* Reglas: cuatro en dos columnas sobre el verde casi blanco. */
.sl-portada-reglas {
    margin: 0 10px 12px;
    background: linear-gradient(180deg, var(--sl-verde-casi-blanco), var(--sl-verde-palido));
    border: 1px solid var(--sl-verde-palido-borde);
    border-radius: 14px;
    padding: 14px;
}

.sl-portada-reglas__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-portada-reglas__lista li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.3;
    color: var(--sl-gris-verdoso-oscuro);
}

.sl-portada-reglas__lista li > span:first-child {
    font-size: 16px;
    line-height: 1;
}

/* Tiene el aspecto del enlace de la maqueta, pero todavía no lleva a ningún sitio: falta que el
   cliente defina las bases completas. Cuando existan, esto pasa a ser un <a>. */
.sl-portada-reglas__bases {
    margin: 12px 0 0;
    text-align: center;
    font-weight: 800;
    font-size: 12px;
    color: var(--sl-verde);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .sl-portada-acordeon__flecha {
        transition: none;
    }
}

/* ── Portada · premios completos desde el día 1 ─────────────────────────────────────────────
   Maqueta 3.7, líneas 120 a 137. Los dos tonos claros son los de la maqueta y solo se usan aquí. */

.sl-portada-premios {
    --sl-premios-cifra: #FFE89A;
    --sl-premios-texto: #CDEED6;
    padding: 16px 16px 18px;
    background: linear-gradient(90deg, var(--sl-verde), var(--sl-verde-brillante));
}

.sl-publico .sl-portada-premios__titulo {
    margin: 0 0 10px;
    color: var(--sl-verde-casi-blanco);
    font-family: var(--sl-fuente-texto);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.sl-portada-premios__tarjetas {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 8px;
}

.sl-portada-premios__tarjeta {
    padding: 12px;
    border: 1px solid rgba(255, 232, 154, .25);
    border-radius: 16px;
    background-color: rgba(0, 0, 0, .2);
}

.sl-portada-premios__tarjeta p {
    margin: 0;
}

.sl-portada-premios .sl-portada-premios__nombre {
    color: var(--sl-verde-casi-blanco);
    font-size: 13px;
    font-weight: 900;
}

.sl-portada-premios .sl-portada-premios__cifra {
    margin-top: 4px;
    color: var(--sl-premios-cifra);
    font-family: var(--sl-fuente-titulo);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
}

.sl-portada-premios .sl-portada-premios__cifra--texto {
    margin-top: 6px;
    font-size: 24px;
    line-height: 1.1;
}

.sl-portada-premios .sl-portada-premios__texto {
    margin-top: 4px;
    color: var(--sl-premios-texto);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.sl-portada-premios .sl-portada-premios__texto + .sl-portada-premios__texto {
    margin-top: 2px;
}

.sl-portada-premios__cuenta {
    color: var(--sl-premios-cifra);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ── Portada · raspadito de demostración ──────────────────────────────────────────────────── */

.sl-raspadito {
    background-color: var(--sl-superficie-suave);
}

.sl-raspadito__contenido {
    padding: 8px 18px 6px;
}

.sl-raspadito-maquina {
    overflow: hidden;
    border: 1px solid rgba(255, 217, 102, .18);
    border-radius: 14px;
    background: radial-gradient(120% 90% at 50% 0%, var(--sl-fondo-brillo), var(--sl-verde-oscuro));
    box-shadow: 0 4px 14px rgba(10, 32, 16, .1);
}

.sl-raspadito-maquina > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    text-align: left;
}

.sl-raspadito-maquina > summary::-webkit-details-marker {
    display: none;
}

.sl-raspadito-maquina__miniatura {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 44px;
    flex: none;
    border: 2px solid rgba(255, 217, 102, .35);
    border-radius: 10px;
    background: linear-gradient(135deg, #c9ccd1, #eef0f2 45%, #a9adb3);
    color: var(--sl-verde);
    font-family: var(--sl-fuente-titulo);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .06em;
}

.sl-raspadito-maquina__resumen {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1px;
}

.sl-raspadito-maquina__resumen > span {
    color: var(--sl-dorado-claro);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .1em;
}

.sl-raspadito-maquina__resumen strong {
    color: var(--sl-blanco);
    font-family: var(--sl-fuente-titulo);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.sl-raspadito-maquina__resumen small {
    color: var(--sl-verde-claro);
    font-size: 11px;
    font-weight: 700;
}

.sl-raspadito-maquina__flecha {
    flex: none;
    color: var(--sl-dorado-claro);
    font-size: 15px;
    font-weight: 800;
    transition: transform .2s;
}

.sl-raspadito-maquina[open] .sl-raspadito-maquina__flecha {
    transform: rotate(180deg);
}

.sl-raspadito-maquina[open] > summary {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sl-raspadito-maquina__panel {
    position: relative;
    overflow: hidden;
    padding: 15px 16px 20px;
}

.sl-raspadito-maquina__luz {
    position: absolute;
    top: -30px;
    left: -20px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 217, 102, .18), transparent 65%);
    pointer-events: none;
}

.sl-raspadito-maquina__cabecera {
    position: relative;
    margin-bottom: 12px;
    text-align: center;
}

.sl-raspadito-maquina__cabecera p {
    display: inline-flex;
    margin: 0 0 8px;
    padding: 4px 11px;
    border: 1px solid rgba(255, 217, 102, .3);
    border-radius: var(--sl-radio-pastilla);
    background-color: rgba(255, 217, 102, .14);
    color: var(--sl-dorado-claro);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.sl-publico .sl-raspadito-maquina__cabecera h2 {
    margin: 0;
    color: var(--sl-blanco);
    font-size: 21px;
    line-height: 1.1;
}

.sl-raspadito-maquina__cabecera h2 em {
    color: var(--sl-dorado-claro);
    font-style: normal;
}

.sl-raspadito-maquina__cabecera > small {
    display: block;
    margin-top: 3px;
    color: var(--sl-verde-claro);
    font-size: 12px;
    font-weight: 700;
}

/* La tarjeta raspable (TASK 40). La capa plateada y la moneda salen de la referencia
   docs/design-reference/raspadito-moneda; sus colores viven aquí y el guion los lee de estas
   variables, para que ni el guion ni la vista escriban uno. */
.sl-raspadito-tarjeta {
    --sl-raspadito-plata-1: #94a3b8;
    --sl-raspadito-plata-2: #f1f5f9;
    --sl-raspadito-plata-3: #cbd5e1;
    --sl-raspadito-plata-4: #e2e8f0;
    --sl-raspadito-plata-5: #64748b;
    --sl-raspadito-grano-claro: rgba(255, 255, 255, .2);
    --sl-raspadito-grano-oscuro: rgba(15, 23, 42, .12);
    --sl-raspadito-rayado: rgba(100, 116, 139, .25);
    --sl-raspadito-leyenda: rgba(30, 41, 59, .7);
    /* Gris sin tinte con el que el guion le quita el color al logotipo de la capa. */
    --sl-raspadito-neutro: #808080;
    --sl-raspadito-particula-1: #cbd5e1;
    --sl-raspadito-particula-2: #94a3b8;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 150px;
    border: 2px solid rgba(255, 217, 102, .3);
    border-radius: 18px;
    background: linear-gradient(180deg, #103019, #0b2010);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}

.sl-raspadito-premio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.sl-raspadito-premio > small {
    color: var(--sl-verde-claro);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
}

/* Tres figuras en línea. Se gana cuando las tres coinciden. */
.sl-raspadito-figuras {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-raspadito-figura {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--sl-blanco), var(--sl-gris-apagado));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}

.sl-raspadito-figura img {
    display: block;
    width: auto;
    height: 56px;
    max-width: 64px;
    object-fit: contain;
}

.sl-raspadito-tarjeta--ganada .sl-raspadito-figura {
    box-shadow: 0 0 0 3px var(--sl-dorado-claro), 0 4px 14px rgba(212, 150, 10, .55);
    animation: sl-pulso 1s ease-in-out infinite;
}

.sl-raspadito-tarjeta__capa,
.sl-raspadito-tarjeta__particulas {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
}

.sl-raspadito-tarjeta__capa {
    /* La moneda hace de puntero mientras se raspa. */
    cursor: none;
    opacity: 1;
    touch-action: none;
    transition: opacity .5s ease-out;
}

.sl-raspadito-tarjeta__particulas {
    pointer-events: none;
}

.sl-raspadito-tarjeta__capa--activa,
.sl-raspadito-tarjeta__particulas--activa {
    display: block;
}

.sl-raspadito-tarjeta__capa--terminada {
    opacity: 0;
    pointer-events: none;
}

.sl-raspadito-tarjeta__capa--sin-transicion {
    transition: none;
}

.sl-raspadito-tarjeta__ganaste {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 2;
    margin: 0;
    padding: 3px 12px;
    border-radius: var(--sl-radio-pastilla);
    background-color: var(--sl-dorado);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 11px;
    font-weight: 800;
    transform: translateX(-50%);
    animation: sl-aparecer .4s;
    white-space: nowrap;
}

/* Con el resultado a la vista, la pastilla ocupa el sitio de la leyenda de arriba. */
.sl-raspadito-tarjeta[data-resultado] .sl-raspadito-premio > small {
    visibility: hidden;
}

.sl-raspadito-tarjeta__ganaste--perdio {
    background-color: var(--sl-verde-claro);
}

/* Solo aparece al perder: sin él, quien pierde se queda mirando una tarjeta sin salida. */
.sl-raspadito-otra {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 11px 14px;
    border: 0;
    border-radius: var(--sl-radio-control);
    background: var(--sl-degradado-boton);
    box-shadow: 0 6px 16px rgba(212, 150, 10, .3);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.sl-raspadito-otra[hidden] {
    display: none;
}

/* La moneda virtual. Fija a la ventana, sin recibir eventos, con el anclaje en el borde que toca
   el cartón. El guion la mueve con transform. */
.sl-moneda {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 86px;
    height: 92px;
    pointer-events: none;
    opacity: 0;
    transform-origin: 35% 85%;
    transition: opacity .15s ease, filter .1s ease;
    filter: drop-shadow(6px 12px 10px rgba(0, 0, 0, .65));
    will-change: transform;
}

.sl-moneda--visible {
    opacity: 1;
}

.sl-moneda--raspando {
    filter: drop-shadow(2px 5px 6px rgba(0, 0, 0, .8));
}

.sl-moneda__oro-1 { stop-color: #fef08a; }
.sl-moneda__oro-2 { stop-color: #eab308; }
.sl-moneda__oro-3 { stop-color: #a16207; }
.sl-moneda__oro-4 { stop-color: #fef9c3; }
.sl-moneda__plata-1 { stop-color: #94a3b8; }
.sl-moneda__plata-2 { stop-color: #f8fafc; }
.sl-moneda__plata-3 { stop-color: #cbd5e1; }
.sl-moneda__plata-4 { stop-color: #64748b; }
.sl-moneda__canto-1 { stop-color: #451a03; }
.sl-moneda__canto-2 { stop-color: #b45309; }
.sl-moneda__canto-3 { stop-color: #fde047; }
.sl-moneda__canto-4 { stop-color: #d97706; }
.sl-moneda__canto-5 { stop-color: #78350f; }
.sl-moneda__canto-6 { stop-color: #291102; }
.sl-moneda__sombra-1 { stop-color: rgba(0, 0, 0, .6); }
.sl-moneda__sombra-2 { stop-color: rgba(0, 0, 0, 0); }
.sl-moneda__trazo { stroke: #78350f; }
.sl-moneda__trazo-nucleo { stroke: #475569; }
.sl-moneda__estrias { stroke: #fef08a; }
.sl-moneda__brillo { stroke: #fff; }
.sl-moneda__grafila { stroke: #fef9c3; }

/* El troquelado del logotipo: el dorado oscuro de la marca, no el logotipo a color, que a este
   tamaño sería una mancha. */
.sl-moneda__troquel {
    flood-color: var(--sl-dorado-texto);
}

.sl-raspadito-maquina__aviso {
    margin: 11px 0 0;
    color: var(--sl-verde-claro-apagado);
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

.sl-raspadito-ganadores {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
}

.sl-raspadito-ganadores article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .05);
}

.sl-raspadito-ganadores__inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--sl-degradado-verde);
    color: var(--sl-blanco);
    font-size: 12px;
    font-weight: 900;
}

.sl-raspadito-ganadores article > div {
    min-width: 0;
    flex: 1;
}

.sl-raspadito-ganadores article strong,
.sl-raspadito-ganadores article small {
    display: block;
}

.sl-raspadito-ganadores article strong {
    color: var(--sl-verde-casi-blanco);
    font-size: 12.5px;
    font-weight: 800;
}

.sl-raspadito-ganadores article small {
    color: var(--sl-verde-claro-apagado);
    font-size: 10px;
    font-weight: 700;
}

.sl-raspadito-ganadores article b {
    color: var(--sl-dorado-claro);
    font-family: var(--sl-fuente-titulo);
    font-size: 14px;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .sl-raspadito-maquina__flecha,
    .sl-raspadito-tarjeta__capa,
    .sl-moneda {
        transition: none;
    }

    .sl-raspadito-tarjeta__ganaste,
    .sl-raspadito-tarjeta--ganada .sl-raspadito-figura {
        animation: none;
    }
}

/* ── Portada · paquetes ─────────────────────────────────────────────────────────────────────
   La información comercial sale del catálogo público. Los únicos adornos provisionales son la
   cantidad de raspaditos y el corte visual que separa los paquetes para grupos.                 */

.sl-portada-paquetes {
    scroll-margin-top: 64px;
    padding: 22px 16px 24px;
    background-color: var(--sl-superficie-suave);
}

.sl-portada-paquetes__contenido {
    width: 100%;
}

/* La franja del bono de pronto pago. De relleno: no hay reglas de bono por tiempo. */
.sl-portada-paquetes__bono {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
    padding: 10px 13px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--sl-dorado), var(--sl-dorado-claro));
}

.sl-portada-paquetes__bono p {
    margin: 0;
    line-height: 1.2;
}

.sl-portada-paquetes__bono-titulo {
    color: var(--sl-dorado-texto);
    font-family: var(--sl-fuente-titulo);
    font-size: 13px;
    font-weight: 800;
}

.sl-portada-paquetes__bono-texto {
    color: #7a5500;
    font-size: 10.5px;
    font-weight: 700;
}

.sl-portada-paquetes__bono-cuenta {
    flex: none;
    padding: 6px 10px;
    border-radius: 10px;
    background-color: var(--sl-verde-oscuro);
    text-align: center;
}

.sl-portada-paquetes__bono-cuenta strong {
    display: block;
    color: var(--sl-dorado-claro);
    font-family: var(--sl-fuente-titulo);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sl-portada-paquetes__bono-cuenta small {
    color: var(--sl-verde-claro);
    font-size: 8px;
    font-weight: 800;
}

.sl-portada-paquetes__cabecera {
    margin-bottom: 12px;
    text-align: center;
}

.sl-publico .sl-portada-paquetes__cabecera h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    color: var(--sl-verde-oscuro);
}

.sl-portada-paquetes__bajada {
    margin: 0;
    color: var(--sl-gris-verdoso);
    font-size: 12px;
    font-weight: 700;
}

.sl-portada-paquetes__actividad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    margin: 8px auto 0;
    padding: 4px 11px;
    border: 1px solid var(--sl-verde-palido-borde);
    border-radius: var(--sl-radio-pastilla);
    background-color: var(--sl-verde-casi-blanco);
    color: var(--sl-verde);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

.sl-portada-paquetes__actividad > span {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background-color: var(--sl-verde-brillante);
}

.sl-portada-paquetes__sorteo + .sl-portada-paquetes__sorteo {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--sl-gris-separador);
}

.sl-portada-paquetes__sorteo-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sl-portada-paquetes__sorteo-cabecera > div {
    min-width: 0;
}

.sl-portada-paquetes__sorteo-cabecera h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.1;
}

.sl-portada-paquetes__sorteo-cabecera p,
.sl-portada-paquetes__descripcion {
    margin: 2px 0 0;
    color: var(--sl-texto-suave);
    font-size: 11px;
}

.sl-portada-paquetes__descripcion {
    margin-bottom: 10px;
    line-height: 1.4;
}

.sl-portada-paquetes__rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* ── La tarjeta de paquete ───────────────────────────────────────────────────────────────────
   Los colores de cada clase salen de mapPkg (maqueta 2.9, 1497 a 1539) y viven en variables de
   la tarjeta: la normal los define, y MEJOR VALOR y VIP solo cambian los que difieren. El aro va
   como sombra, como en la maqueta.                                                             */
.sl-paquete {
    --sl-paquete-fondo: var(--sl-superficie);
    --sl-paquete-sombra: 0 5px 16px rgba(10, 32, 16, .07);
    --sl-paquete-aro: 0 0 0 1px #eceeec;
    --sl-paquete-nombre: var(--sl-verde-oscuro);
    --sl-paquete-secundario: #6a7a6e;
    --sl-paquete-combinaciones: #645F5F;
    --sl-paquete-regalo: var(--sl-dorado);
    --sl-paquete-doble: #FF0000;
    --sl-paquete-tachado: var(--sl-verde-tachado);
    --sl-paquete-prob-color: var(--sl-verde);
    --sl-paquete-prob-fondo: var(--sl-verde-palido);
    --sl-paquete-premio-color: var(--sl-verde);
    --sl-paquete-premio-fondo: #f1f7f2;
    --sl-paquete-marca: var(--sl-verde);
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 13px 11px;
    border-radius: 18px;
    background: var(--sl-paquete-fondo);
    box-shadow: var(--sl-paquete-sombra), var(--sl-paquete-aro);
    color: var(--sl-paquete-nombre);
    transition: box-shadow .15s ease, transform .12s ease;
}

.sl-paquete--mejor {
    --sl-paquete-fondo: linear-gradient(180deg, #eafaef, #dff3e6);
    --sl-paquete-sombra: 0 8px 22px rgba(27, 124, 46, .16);
    --sl-paquete-aro: 0 0 0 2px var(--sl-verde-brillante);
}

/* En el desplegable de grupo el tachado y el doble de raspaditos van en otros tonos. */
.sl-paquete--grupo {
    --sl-paquete-tachado: #549C4D;
    --sl-paquete-doble: var(--sl-paquete-regalo);
    --sl-paquete-combinaciones: var(--sl-paquete-secundario);
}

.sl-paquete--vip {
    --sl-paquete-fondo: radial-gradient(120% 100% at 50% 0%, #143019, var(--sl-verde-oscuro));
    --sl-paquete-sombra: 0 8px 26px rgba(0, 0, 0, .3);
    --sl-paquete-aro: 0 0 0 2px var(--sl-dorado-claro);
    --sl-paquete-nombre: var(--sl-dorado-claro);
    --sl-paquete-secundario: var(--sl-verde-claro);
    --sl-paquete-regalo: #FFE89A;
    --sl-paquete-prob-color: var(--sl-verde-oscuro);
    --sl-paquete-prob-fondo: var(--sl-dorado-claro);
    --sl-paquete-premio-color: #FFE89A;
    --sl-paquete-premio-fondo: rgba(255, 217, 102, .14);
    --sl-paquete-marca: var(--sl-dorado-claro);
}

.sl-paquete:has(.sl-paquete__enlace:hover) {
    transform: translateY(-2px);
}

.sl-paquete__insignia {
    position: absolute;
    top: -8px;
    left: 9px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: var(--sl-radio-pastilla);
    background-color: var(--sl-verde-brillante);
    color: var(--sl-blanco);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap;
}

.sl-paquete--vip .sl-paquete__insignia {
    background: linear-gradient(90deg, var(--sl-dorado-claro), var(--sl-dorado));
    color: var(--sl-verde-oscuro);
}

.sl-paquete__encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.sl-publico .sl-paquete__nombre {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--sl-paquete-nombre);
}

/* El enlace estirado: su ::after cubre la tarjeta entera, así que tocarla en cualquier parte
   lleva a su paquete. El empujón va por encima con un z-index mayor. */
.sl-publico .sl-paquete__enlace {
    color: inherit;
    text-decoration: none;
}

.sl-paquete__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 18px;
}

.sl-paquete__enlace:focus {
    outline: none;
}

.sl-paquete__enlace:focus-visible::after {
    outline: 3px solid var(--sl-verde);
    outline-offset: 3px;
}

/* El círculo de selección es adorno: vacío en reposo y con la palomita al tocar o enfocar. */
.sl-paquete__selector {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #cdd5ce;
    border-radius: 50%;
    color: transparent;
    font-size: 11px;
    font-weight: 800;
}

.sl-paquete:has(.sl-paquete__enlace:active, .sl-paquete__enlace:focus-visible) .sl-paquete__selector {
    border-color: var(--sl-paquete-marca);
    background-color: var(--sl-paquete-marca);
    color: var(--sl-blanco);
}

.sl-paquete--vip:has(.sl-paquete__enlace:active, .sl-paquete__enlace:focus-visible) .sl-paquete__selector {
    color: var(--sl-verde-oscuro);
}

/* Lo que costarían esas combinaciones al precio del paquete más chico, tachado, y el ahorro. */
.sl-paquete__referencia {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
}

.sl-paquete__referencia s {
    color: var(--sl-paquete-tachado);
    font-family: Verdana, var(--sl-fuente-texto);
    text-decoration-thickness: 1.5px;
}

.sl-paquete__ahorro {
    padding: 1px 5px;
    border-radius: 5px;
    background-color: var(--sl-rojo-descuento);
    color: var(--sl-blanco);
}

.sl-paquete__precio {
    display: block;
    margin-top: 2px;
    color: var(--sl-paquete-nombre);
    font-family: var(--sl-fuente-titulo);
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
}

.sl-paquete__precio small {
    color: var(--sl-paquete-secundario);
    font-family: var(--sl-fuente-texto);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .04em;
}

.sl-paquete__combinaciones {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    color: var(--sl-paquete-combinaciones);
    font-size: 11px;
    font-weight: 700;
}

/* Los logos de los dos juegos van en su pastilla blanca, a 11 y 13 px de alto. */
.sl-paquete__logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 1px 3px;
    border-radius: 4px;
    background-color: var(--sl-blanco);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

.sl-paquete__logo img {
    display: block;
    width: auto;
    height: 11px;
}

.sl-paquete__regalo .sl-paquete__logo img {
    height: 13px;
}

.sl-paquete__regalo {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-top: 6px;
}

.sl-paquete__regalo-textos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.sl-paquete__gratis {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: var(--sl-radio-pastilla);
    background: linear-gradient(95deg, var(--sl-dorado), var(--sl-dorado-claro));
    box-shadow: 0 2px 7px rgba(212, 150, 10, .5);
    color: #3a2700;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sl-paquete__raspaditos {
    color: var(--sl-paquete-regalo);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sl-paquete__doble {
    display: block;
    margin-top: 4px;
    color: var(--sl-paquete-doble);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.3;
}

.sl-paquete__probabilidad,
.sl-paquete__premio {
    display: block;
    padding: 3px 7px;
    border-radius: 9px;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.3;
}

.sl-paquete__probabilidad {
    margin-top: 6px;
    background-color: var(--sl-paquete-prob-fondo);
    color: var(--sl-paquete-prob-color);
}

.sl-paquete__premio {
    margin-top: 5px;
    background-color: var(--sl-paquete-premio-fondo);
    color: var(--sl-paquete-premio-color);
}

/* El empujón al paquete siguiente: enlace hermano del principal, por encima de su ::after. */
.sl-publico .sl-paquete__empujon {
    position: relative;
    z-index: 2;
    display: block;
    margin: 7px -11px -13px;
    padding: 8px 11px 11px;
    border-top: 1px dashed #d6dbd7;
    color: var(--sl-verde);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-align: right;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sl-paquete__empujon:focus-visible {
    outline: 3px solid var(--sl-verde);
    outline-offset: -3px;
    border-radius: 0 0 18px 18px;
}

/* El desplegable de grupo. El borde dorado punteado es solo del botón; las tarjetas salen debajo,
   fuera de él, como en la maqueta. */
.sl-portada-paquetes__grupo {
    margin-top: 13px;
}

.sl-portada-paquetes__grupo > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px dashed var(--sl-dorado);
    border-radius: 16px;
    background: linear-gradient(180deg, #fffaed, #fff4d9);
    cursor: pointer;
    list-style: none;
}

.sl-portada-paquetes__grupo > summary::-webkit-details-marker {
    display: none;
}

.sl-portada-paquetes__grupo-icono {
    font-size: 22px;
}

.sl-portada-paquetes__grupo-texto {
    flex: 1;
    min-width: 0;
    color: #6b4c00;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.35;
}

.sl-portada-paquetes__grupo-flecha {
    flex: none;
    color: var(--sl-dorado);
    font-family: var(--sl-fuente-titulo);
    font-size: 16px;
    font-weight: 800;
    transition: transform .2s;
}

.sl-portada-paquetes__grupo[open] .sl-portada-paquetes__grupo-flecha {
    transform: rotate(180deg);
}

.sl-portada-paquetes__rejilla--grupo {
    margin-top: 11px;
}

.sl-portada-paquetes__ayuda {
    margin: 15px 0 10px;
    color: var(--sl-texto-suave);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 390px) {
    .sl-portada-paquetes {
        padding-inline: 13px;
    }

    .sl-paquete {
        padding-inline: 10px;
    }

    .sl-publico .sl-paquete__empujon {
        margin-inline: -10px;
        padding-inline: 10px;
    }

    .sl-portada-ganadores__cabecera {
        align-items: flex-start;
    }

    .sl-publico .sl-portada-ganadores__titulo {
        max-width: 150px;
        line-height: 1.05;
    }

    .sl-portada-ganadores__mes {
        max-width: 112px;
        line-height: 1.2;
        text-align: right;
    }
}

@media (max-width: 340px) {
    .sl-portada-paquetes__rejilla {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-paquete,
    .sl-portada-paquetes__grupo-flecha {
        transition: none;
    }

    .sl-paquete:has(.sl-paquete__enlace:hover) {
        transform: none;
    }
}

/* ── Portada · ganadores, preguntas y pie ────────────────────────────────────────────────────
   Los tres bloques de cierre y el botón fijo. Medidas de la maqueta 2.8. Todo funciona sin guion:
   las preguntas son <details>, "ver más ganadores" es una casilla con su etiqueta, y el botón fijo
   se aparta de los paquetes con una línea de tiempo de desplazamiento.                          */

/* Destinos de los enlaces del pie y de los botones: que el encabezado fijo no tape el bloque. */
.sl-portada-ancla {
    scroll-margin-top: 64px;
}

/* Ganadores */
.sl-portada-ganadores {
    padding: 18px 18px 6px;
}

.sl-portada-ganadores__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

.sl-publico .sl-portada-ganadores__titulo,
.sl-publico .sl-portada-preguntas__titulo {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 20px;
    color: var(--sl-verde-oscuro);
}

.sl-portada-ganadores__mes {
    margin: 0;
    font-weight: 800;
    font-size: 11px;
    color: var(--sl-verde);
}

.sl-portada-ganadores__lista {
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-portada-ganador {
    --sl-ganador-acento: var(--sl-dorado);
    --sl-ganador-circulo: linear-gradient(135deg, var(--sl-dorado), var(--sl-dorado-oscuro));
    --sl-ganador-etiqueta: var(--sl-dorado-oscuro);
    --sl-ganador-etiqueta-fondo: var(--sl-crema);
    display: flex;
    align-items: center;
    gap: 11px;
    background-color: var(--sl-superficie);
    border-radius: 16px;
    padding: 11px 13px;
    box-shadow: 0 5px 16px rgba(10, 32, 16, .07);
    border-left: 4px solid var(--sl-ganador-acento);
}

.sl-portada-ganador--raspadito {
    --sl-ganador-acento: var(--sl-verde-brillante);
    --sl-ganador-circulo: linear-gradient(135deg, var(--sl-verde-brillante), var(--sl-verde));
    --sl-ganador-etiqueta: var(--sl-verde);
    --sl-ganador-etiqueta-fondo: var(--sl-verde-palido);
}

.sl-portada-ganador--extra {
    display: none;
}

.sl-portada-ganador__inicial {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sl-ganador-circulo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 15px;
    color: var(--sl-blanco);
}

.sl-portada-ganador__quien {
    flex: 1;
    min-width: 0;
}

.sl-portada-ganador__nombre {
    margin: 0;
    font-weight: 800;
    font-size: 14px;
    color: var(--sl-verde-oscuro);
}

.sl-portada-ganador__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: var(--sl-radio-pastilla);
    background-color: var(--sl-ganador-etiqueta-fondo);
    color: var(--sl-ganador-etiqueta);
    font-weight: 800;
    font-size: 10px;
}

.sl-portada-ganador__premio {
    text-align: right;
}

.sl-portada-ganador__monto {
    margin: 0;
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
    color: var(--sl-dorado);
}

.sl-portada-ganador__cuando {
    margin: 0;
    font-weight: 700;
    font-size: 10px;
    color: var(--sl-gris-tenue-claro);
}

/* La casilla no se ve; se toca su etiqueta. Sigue siendo alcanzable con el teclado. */
.sl-portada-ganadores__interruptor {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.sl-portada-ganadores__mas {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin: 10px auto 0;
    padding: 6px 4px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
    color: var(--sl-verde);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sl-portada-ganadores__interruptor:focus-visible ~ .sl-portada-ganadores__mas {
    outline: 2px solid var(--sl-verde-brillante);
    outline-offset: 2px;
    border-radius: 4px;
}

.sl-portada-ganadores__mas-cerrar,
.sl-portada-ganadores__interruptor:checked ~ .sl-portada-ganadores__mas .sl-portada-ganadores__mas-abrir {
    display: none;
}

.sl-portada-ganadores__interruptor:checked ~ .sl-portada-ganadores__mas .sl-portada-ganadores__mas-cerrar {
    display: inline;
}

.sl-portada-ganadores__interruptor:checked ~ .sl-portada-ganadores__lista .sl-portada-ganador--extra {
    display: flex;
}

/* Preguntas */
.sl-portada-preguntas {
    padding: 20px 18px 6px;
}

.sl-publico .sl-portada-preguntas__titulo {
    margin-bottom: 11px;
}

.sl-portada-preguntas__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-portada-pregunta {
    background-color: var(--sl-superficie);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(10, 32, 16, .06);
    overflow: hidden;
}

.sl-portada-pregunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.sl-portada-pregunta summary::-webkit-details-marker {
    display: none;
}

.sl-portada-pregunta__texto {
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    color: var(--sl-verde-oscuro);
}

.sl-portada-pregunta__signo {
    flex: none;
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 18px;
    color: var(--sl-verde);
    transition: transform .2s;
}

.sl-portada-pregunta[open] .sl-portada-pregunta__signo {
    transform: rotate(45deg);
}

.sl-portada-pregunta__respuesta {
    margin: 0;
    padding: 0 14px 13px;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--sl-gris-verdoso);
}

/* Pie. No usa .sl-pie, que es el de las otras páginas públicas y se queda como está. */
.sl-portada-pie {
    margin-top: 14px;
    padding: 22px 18px;
    background-color: var(--sl-verde-oscuro);
}

.sl-portada-pie .sl-logo {
    height: 42px;
    margin-bottom: 12px;
    filter: none;
}

.sl-portada-pie__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 14px;
}

.sl-portada-pie__enlaces a {
    font-weight: 700;
    font-size: 12px;
    color: var(--sl-verde-claro);
    text-decoration: none;
}

.sl-portada-pie__enlaces .sl-portada-pie__boleto {
    color: var(--sl-dorado-claro);
}

/* Tiene el aspecto del botón de la maqueta, pero todavía no lleva a ningún sitio: el chat con
   Paddy no existe. Cuando exista, esto pasa a ser un <a>. */
.sl-portada-pie__paddy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 15px;
    border-radius: 12px;
    background-color: var(--sl-verde-whatsapp);
    color: var(--sl-verde-oscuro);
    font-weight: 800;
    font-size: 13px;
}

.sl-portada-pie__legal {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--sl-verde-legal);
}

.sl-portada-pie__legal b {
    color: var(--sl-verde-claro);
}

/* Botón fijo. Va después del pie en el documento: sticky lo mantiene pegado al fondo mientras se
   recorre la portada y, al terminar, ocupa su propio sitio debajo del pie en vez de taparlo. */
.sl-portada-fijo {
    position: sticky;
    bottom: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 14px;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0), var(--sl-gris-casi-blanco) 28%);
}

.sl-publico .sl-portada-fijo__accion {
    flex: 1;
    display: block;
    padding: 15px;
    border-radius: 15px;
    background: var(--sl-degradado-boton);
    box-shadow: 0 6px 18px rgba(212, 150, 10, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 17px;
    color: var(--sl-verde-oscuro);
    text-align: center;
    text-decoration: none;
}

.sl-portada-fijo__chat {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background-color: var(--sl-verde-whatsapp);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .4);
}

@media (prefers-reduced-motion: reduce) {
    .sl-portada-pregunta__signo {
        transition: none;
    }
}

/* ── Animaciones de la maqueta 2.8 ───────────────────────────────────────────────────────────
   Copiadas de su styles.css con el prefijo del proyecto. Aquí solo se definen; las usan las
   pantallas que se adaptan después. sl-elegir, sl-latido y sl-ventana-entra, más arriba, son
   otras y no se tocan aunque se parezcan.                                                        */

/* Latido suave de la bolsa. */
@keyframes sl-pulso {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

/* Parpadeo de los puntos y halos. */
@keyframes sl-resplandor {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

/* La mascota subiendo y bajando. */
@keyframes sl-flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* Entrada con rebote. */
@keyframes sl-aparecer {
    0% { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}

/* Giro continuo. */
@keyframes sl-girar {
    to { transform: rotate(360deg); }
}

/* Barrido de luz sobre los botones. */
@keyframes sl-brillo {
    0% { background-position: -140% 0; }
    100% { background-position: 240% 0; }
}

/* Caída del confeti de la confirmación. */
@keyframes sl-confeti {
    0% { transform: translateY(-12vh) rotate(0); }
    100% { transform: translateY(105vh) rotate(640deg); }
}

/* Onda que se expande desde un botón. */
@keyframes sl-halo {
    0% { box-shadow: 0 0 0 0 rgba(255, 217, 102, .55); }
    100% { box-shadow: 0 0 0 16px rgba(255, 217, 102, 0); }
}

/* Entrada lateral. */
@keyframes sl-entrar {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Entrada desde abajo con desvanecido. */
@keyframes sl-subir {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Efectos aprobados de la antigua capa visual experimental (TASK 23) ──────────────────── */

.sl-numero {
    position: relative;
    overflow: visible;
    font-size: 24px;
    font-weight: 800;
}

.sl-numero--elegido {
    border: 5px solid var(--sl-dorado-elegido);
    box-shadow: none;
}

/* Al elegir, conservamos el rebote existente pero con un overshoot bastante más visible. */
.sl-numero--recien {
    animation: sl-elegir-rebote 300ms cubic-bezier(.22, .8, .28, 1);
}

@keyframes sl-elegir-rebote {
    0%   { transform: scale(.90); }
    45%  { transform: scale(1.16); }
    72%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

/* Al deseleccionar, selector-efectos.js coloca temporalmente encima del botón gris una copia del
   círculo dorado dividida en fragmentos. Todos empiezan exactamente en su sitio, así que juntos
   siguen pareciendo la bolita completa; después cada fragmento se separa, gira y cae un poco,
   como un plato al romperse. */
.sl-numero--quebrandose {
    z-index: 3;
}

.sl-rotura {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: 50%;
}

.sl-fragmento {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--sl-degradado-boton);
    box-shadow: inset 0 0 0 5px var(--sl-dorado-elegido);
    pointer-events: none;
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    animation: sl-romper 520ms cubic-bezier(.18, .72, .24, 1) forwards;
}

@keyframes sl-romper {
    0%, 12% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    68% {
        opacity: .96;
    }

    100% {
        opacity: 0;
        transform:
            translate(var(--sl-rotura-x), var(--sl-rotura-y))
            rotate(var(--sl-rotura-r))
            scale(.94);
    }
}

/* La capa integrada conserva la misma política de accesibilidad que el selector actual. */
@media (prefers-reduced-motion: reduce) {
    .sl-numero--recien,
    .sl-fragmento {
        animation: none;
    }

    /* Las de la maqueta 2.8 se anulan desde el keyframe y no desde cada clase que las use: así
       ninguna pantalla nueva puede olvidarse de hacerlo. Un keyframe vacío deja al elemento en su
       estado final, que es el que se ve sin animación. */
    @keyframes sl-pulso {}
    @keyframes sl-resplandor {}
    @keyframes sl-flotar {}
    @keyframes sl-aparecer {}
    @keyframes sl-girar {}
    @keyframes sl-brillo {}
    @keyframes sl-confeti {}
    @keyframes sl-halo {}
    @keyframes sl-entrar {}
    @keyframes sl-subir {}
}