/*
Theme Name: Sorteo Quien Quita
Theme URI: https://example.com/sorteo-quien-quita
Author: Tu Nombre
Author URI: https://example.com
Description: Tema oficial de Sorteo Quien Quita. Plataforma de rifas y sorteos en vivo, construida siguiendo el Manual de Identidad de marca (paleta roja/dorada/crema sobre fondo negro, tipografía MADE Sunflower y marcos metálicos).
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rifas-winpot
*/

/* =========================================================
   TIPOGRAFÍA DE MARCA: MADE Sunflower
   IMPORTANTE: MADE Sunflower es una fuente comercial con licencia
   propia — este tema NO incluye los archivos de la fuente (no
   podemos distribuir un tipo de letra con licencia de pago). Sube tú
   mismo los archivos con estos nombres exactos a /wp-content/themes/
   rifas-winpot/fonts/ para que @font-face los encuentre:
     - fonts/MADE-Sunflower.woff2
     - fonts/MADE-Sunflower.ttf
   Mientras esos archivos no existan, el navegador usará
   automáticamente el fallback ('Montserrat', sans-serif) definido más
   abajo, sin romper el sitio.
========================================================= */
@font-face {
    font-family: 'MADE Sunflower';
    src: url('fonts/MADE-Sunflower.woff2') format('woff2'),
         url('fonts/MADE-Sunflower.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   MANUAL DE IDENTIDAD — SORTEO QUIEN QUITA
   Paleta oficial:
     Fondo:        #000000 (Negro)
     Rojo primario: #EF0002
     Rojo oscuro:   #6E0200
     Dorado:        #FEC806
     Crema:         #F1E8D3
     Azul (acento): #029AE6
     Verde (acento):#68BE5D
   Tipografía: MADE Sunflower (con Montserrat como respaldo)
========================================================= */
:root {
    --sqq-negro: #000000;
    --sqq-negro-suave: #0d0d0d;
    --sqq-superficie: #141414;
    --sqq-rojo: #EF0002;
    --sqq-rojo-oscuro: #6E0200;
    --sqq-dorado: #FEC806;
    --sqq-crema: #F1E8D3;
    --sqq-azul: #029AE6;
    --sqq-verde: #68BE5D;

    --sqq-plata-1: #f4f4f4;
    --sqq-plata-2: #9a9a9a;
    --sqq-plata-3: #5c5c5c;

    --sqq-fuente: 'MADE Sunflower', 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Alias retrocompatibles usados por loteria.css */
    --color-fondo: var(--sqq-negro);
    --color-fondo-tarjeta: var(--sqq-superficie);
    --color-texto: var(--sqq-crema);
    --color-dorado: var(--sqq-dorado);
    --color-dorado-brillo: #ffe27a;
    --color-neon: var(--sqq-azul);
}

/* Aplicación global forzada: garantiza MADE Sunflower en absolutamente
   todos los elementos, sin depender de que cada selector herede
   correctamente la variable --sqq-fuente (por ejemplo, sobre estilos
   en línea o de terceros que pudieran fijar otra tipografía). */
*,
body,
h1, h2, h3, h4, h5, h6,
p, a, span, button, input, select, textarea,
.cinta-premios-wrapper,
.card-title,
.btn {
    font-family: 'MADE Sunflower', sans-serif !important;
}

/* Kerning ajustado para mejorar la legibilidad en títulos y en los
   textos propios del sorteo (números/nombres de cartas, premios). */
h1, h2, h3, h4, h5, h6,
.section-title,
.sqq-titulo,
.hero-subtitle,
.loteria-card-numero,
.loteria-card-nombre,
.premio-texto,
.premio-destacado {
    letter-spacing: 0.5px;
}

/* =========================================
   RESET BÁSICO
========================================= */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #000000 !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)), url('images/calendario-azteca.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: #ffffff;
    font-family: var(--sqq-fuente);
    line-height: 1.6;
}

/* =========================================================
   TRANSPARENCIA EN TODAS LAS SECCIONES
   Para que el Calendario Azteca del body se vea de fondo en toda la
   página, sin quedar tapado por los fondos negros/oscuros sólidos
   que traía cada sección. Las reglas con "body X" tienen más
   especificidad que las definidas en landing.css (donde vive el CSS
   real de estas secciones), así que las anulan sin tener que editar
   ese otro archivo.
========================================================= */
#main-content,
main,
section,
.container,
.site-main,
.hero-section,
.pasos-section,
.how-it-works,
.cinta-premios-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

body .hero,
body .pasos,
body .sorteo,
body .carrusel-videos,
body .promociones {
    background: transparent !important;
    background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6,
button,
input,
select,
textarea {
    font-family: var(--sqq-fuente);
}

a {
    color: var(--sqq-dorado);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--sqq-crema);
}

img {
    max-width: 100%;
    display: block;
}

/* =========================================
   HEADER (fallback genérico, ver header.php)
========================================= */
.site-header {
    background-color: var(--sqq-negro-suave);
    border-bottom: 2px solid var(--sqq-dorado);
    padding: 20px 30px;
    text-align: center;
    /* Nunca recortar el logotipo: alto flexible y sin clipping. */
    height: auto;
    min-height: auto;
    overflow: visible;
}

.site-header .site-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sqq-dorado);
    margin: 0;
}

.site-header .site-description {
    color: var(--sqq-plata-2);
    font-size: 0.95rem;
}

/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */
.site-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* =========================================
   BOTONES DE MARCA
========================================= */
.btn-neon,
button.btn-neon,
input[type="submit"].btn-neon {
    display: inline-block;
    background-color: transparent;
    color: var(--sqq-dorado);
    border: 2px solid var(--sqq-dorado);
    border-radius: 8px;
    padding: 12px 28px;
    font-family: var(--sqq-fuente);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 6px rgba(254, 200, 6, 0.4);
}

.btn-neon:hover {
    background-color: var(--sqq-dorado);
    color: var(--sqq-negro);
    box-shadow: 0 0 20px rgba(254, 200, 6, 0.9), 0 0 40px rgba(254, 200, 6, 0.5);
    transform: translateY(-2px);
}

.btn-neon:active {
    transform: translateY(0);
}

/* Botón rojo primario (ej. REGISTRO, CTAs de compra) */
.btn-rojo,
button.btn-rojo,
input[type="submit"].btn-rojo {
    display: inline-block;
    background-color: var(--sqq-rojo);
    color: var(--sqq-crema);
    border: 2px solid #ff5c5e;
    border-radius: 8px;
    padding: 12px 28px;
    font-family: var(--sqq-fuente);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 0 10px rgba(239, 0, 2, 0.6), 0 0 22px rgba(239, 0, 2, 0.25);
}

.btn-rojo:hover {
    background-color: #ff2224;
    box-shadow: 0 0 16px rgba(239, 0, 2, 0.9), 0 0 34px rgba(239, 0, 2, 0.5);
    transform: translateY(-2px);
}

.btn-rojo:active {
    transform: translateY(0);
}

/* =========================================
   MARCOS METÁLICOS (plateados) reutilizables
   Truco: wrapper con degradado de fondo + padding
   simula un borde metálico con bordes redondeados.
========================================= */
.marco-metalico {
    position: relative;
    padding: 3px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e8e8e8 0%, #9a9a9a 22%, #4a4a4a 45%, #cfcfcf 60%, #6b6b6b 80%, #e8e8e8 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.marco-metalico-interior {
    border-radius: 15px;
    background: var(--sqq-superficie);
    height: 100%;
    width: 100%;
}

/* =========================================
   FOOTER (fallback genérico, ver footer.php)
========================================= */
.site-footer {
    background-color: var(--sqq-negro-suave);
    border-top: 2px solid var(--sqq-dorado);
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    color: var(--sqq-plata-2);
}

/* =========================================================
   MODAL DE SELECCIÓN DE BOLETOS
   Se abre al hacer clic en una carta de la cuadrícula.
   Grid de 50 boletos con estados: normal / hover / seleccionado.
========================================================= */
.sqq-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sqq-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.sqq-modal {
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s ease;
}

.sqq-modal-overlay.is-visible .sqq-modal {
    transform: translateY(0) scale(1);
}

.sqq-modal-interior {
    padding: 30px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
}

.sqq-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sqq-plata-3);
    color: var(--sqq-crema);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.sqq-modal-close:hover {
    border-color: var(--sqq-rojo);
    color: var(--sqq-rojo);
}

.sqq-modal-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
    padding-right: 30px;
}

.sqq-modal-carta-visual {
    flex: 0 0 auto;
    position: relative;
    width: 64px;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    border: 2px solid var(--sqq-dorado);
    background: linear-gradient(160deg, var(--sqq-rojo-oscuro) 0%, #2b0000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: width 0.25s ease;
}

/* Cuando hay una ilustración real de la carta, el recuadro crece para
   mostrarla en alta resolución (en vez del pequeño número). */
.sqq-modal-carta-visual.has-imagen {
    width: 110px;
}

.sqq-modal-carta-imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.sqq-modal-carta-visual.has-imagen #sqq-modal-carta-numero {
    display: none;
}

#sqq-modal-carta-numero {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sqq-dorado);
    text-shadow: 0 0 8px rgba(254, 200, 6, 0.6);
}

.sqq-modal-kicker {
    margin: 0 0 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sqq-azul);
    font-weight: 700;
}

.sqq-modal-titulo {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sqq-crema);
}

#sqq-modal-carta-nombre {
    color: var(--sqq-dorado);
}

/* Cuadrícula de los 50 boletos dentro del modal */
.sqq-modal-boletos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 10px;
    margin-bottom: 26px;
}

.sqq-boleto-btn {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #141414;
    border: 2px solid var(--sqq-rojo-oscuro);
    border-radius: 8px;
    color: var(--sqq-crema);
    font-family: var(--sqq-fuente);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.sqq-boleto-btn:hover,
.sqq-boleto-btn:focus-visible {
    border-color: var(--sqq-rojo);
    box-shadow: 0 0 10px rgba(239, 0, 2, 0.5);
    transform: translateY(-2px);
    outline: none;
}

.sqq-boleto-btn.is-selected {
    background: var(--sqq-dorado);
    border-color: var(--sqq-dorado);
    color: #1a1200;
    box-shadow: 0 0 14px rgba(254, 200, 6, 0.8);
    transform: translateY(-1px);
}

.sqq-boleto-btn.is-selected:hover {
    border-color: var(--sqq-crema);
}

/* Pie del modal: contador + botón de acción */
.sqq-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid #2a2a2a;
    padding-top: 20px;
}

.sqq-modal-seleccion-info {
    margin: 0;
    color: var(--sqq-plata-2);
    font-size: 0.9rem;
}

.sqq-modal-seleccion-info #sqq-modal-contador {
    color: var(--sqq-dorado);
    font-weight: 800;
    font-size: 1.05rem;
}

.sqq-modal-btn-carrito {
    flex-shrink: 0;
}

.sqq-modal-btn-carrito:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================================
   TOAST DE NOTIFICACIÓN (éxito / error)
========================================================= */
.sqq-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #141414;
    border: 2px solid var(--sqq-dorado);
    color: var(--sqq-crema);
    padding: 14px 26px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(254, 200, 6, 0.4);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    max-width: calc(100vw - 48px);
    text-align: center;
}

.sqq-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.sqq-toast.is-error {
    border-color: var(--sqq-rojo);
    box-shadow: 0 0 20px rgba(239, 0, 2, 0.4);
}

/* Responsivo */
@media (max-width: 480px) {
    .sqq-modal-interior {
        padding: 22px 18px;
    }

    .sqq-modal-boletos-grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 8px;
    }

    .sqq-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .sqq-modal-btn-carrito {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   ÍCONO DE CARRITO (esquina superior derecha) + BADGE
========================================================= */
.cart-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 52px;
    height: 52px;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid var(--sqq-dorado);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(254, 200, 6, 0.4);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(6px);
}

.cart-toggle:hover {
    box-shadow: 0 0 18px rgba(254, 200, 6, 0.8);
    transform: translateY(-1px);
}

.cart-toggle-icono {
    width: 24px;
    height: 24px;
    color: var(--sqq-dorado);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sqq-rojo);
    color: var(--sqq-dorado);
    border: 2px solid #000000;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 8px rgba(239, 0, 2, 0.7);
    transition: transform 0.2s ease;
}

.cart-badge.is-updated {
    transform: scale(1.25);
}

/* =========================================================
   MINI-CART DRAWER (panel lateral desde la derecha)
========================================================= */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 900;
}

.cart-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(400px, 92vw);
    background: #000000;
    border-left: 2px solid var(--sqq-dorado);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 950;
    display: flex;
    flex-direction: column;
}

.cart-drawer.is-open {
    transform: translateX(0);
}

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 22px 18px;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.cart-drawer-titulo {
    margin: 0;
    color: var(--sqq-dorado);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
}

.cart-drawer-vacio {
    color: var(--sqq-plata-2);
    text-align: center;
    font-size: 0.95rem;
    margin-top: 60px;
    line-height: 1.6;
}

.cart-drawer-vacio.is-hidden {
    display: none;
}

.cart-drawer-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Bloque individual por carta seleccionada */
.cart-item-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #121212;
    border: 1px solid var(--sqq-rojo-oscuro);
    border-radius: 12px;
    padding: 14px;
    position: relative;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.cart-item-block.is-removing {
    opacity: 0.35;
    pointer-events: none;
}

/* Respaldo genérico (solo se usa si no hay número de carta disponible
   para construir la imagen real — ver .mini-carta-carrito abajo). */
.cart-item-visual,
.sqq-cart-icono-carta {
    flex: 0 0 auto;
    width: 44px;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    border: 2px solid var(--sqq-dorado);
    background: linear-gradient(160deg, var(--sqq-rojo-oscuro) 0%, #2b0000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sqq-dorado);
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

/* Estilos para la miniatura real de la carta (reemplaza el recuadro
   genérico cuando sí se conoce el número de la carta). */
.mini-carta-carrito {
    width: 55px !important; /* Ajusta el ancho para que encaje bien en el espacio */
    height: auto !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6) !important;
    background: transparent !important;
    border: none !important;
    margin-right: 15px !important; /* Separación con el texto */
    flex: 0 0 auto;
}

/* Limpieza del contenedor anterior (si existía) */
.cart-item-thumbnail,
.thumbnail-placeholder,
.cart-item-image-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ocultar el icono del ticket viejo si sigue ahí */
.cart-item-thumbnail i,
.cart-item-thumbnail svg,
.ticket-icon {
    display: none !important;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-item-titulo {
    margin: 0;
    color: var(--sqq-crema);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.cart-item-boletos {
    margin: 0;
    color: var(--sqq-plata-2);
    font-size: 0.78rem;
    line-height: 1.5;
    word-break: break-word;
}

.cart-item-subtotal {
    margin: 4px 0 0;
    color: var(--sqq-dorado);
    font-size: 0.95rem;
    font-weight: 800;
}

.cart-item-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239, 0, 2, 0.1);
    border: 1px solid var(--sqq-rojo);
    color: var(--sqq-rojo);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cart-item-remove:hover {
    background: var(--sqq-rojo);
    color: var(--sqq-crema);
    transform: scale(1.08);
}

/* Pie del drawer: total + botón de checkout */
.cart-drawer-footer {
    flex-shrink: 0;
    padding: 18px 22px 22px;
    border-top: 1px solid #2a2a2a;
}

.cart-drawer-footer.is-hidden {
    display: none;
}

.cart-drawer-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--sqq-plata-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#cart-drawer-total-monto {
    color: var(--sqq-dorado);
    font-size: 1.35rem;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(254, 200, 6, 0.5);
}

.cart-drawer-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 14px rgba(239, 0, 2, 0.6), 0 0 24px rgba(254, 200, 6, 0.25);
}

.cart-drawer-checkout-btn:hover {
    box-shadow: 0 0 20px rgba(239, 0, 2, 0.9), 0 0 34px rgba(254, 200, 6, 0.45);
}

/* Responsivo */
@media (max-width: 480px) {
    .cart-toggle {
        top: 14px;
        right: 14px;
        width: 46px;
        height: 46px;
    }

    .cart-drawer-header,
    .cart-drawer-body,
    .cart-drawer-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================================
   CARRUSEL 3D GIRATORIO (RULETA / COVERFLOW) — sección "El Sorteo"
   Espacio 3D con perspective + preserve-3d: la carta central va al
   frente en grande y recta; las adyacentes se inclinan en el eje Y,
   reducen tamaño/opacidad y se solapan, simulando un cilindro de
   casino. JS (initLoteriaCoverflow en main.js) solo actualiza el
   atributo data-offset de cada carta; todo el transform 3D vive aquí.
========================================================= */
.loteria-coverflow {
    position: relative;
    max-width: 1650px;
    margin: 0 auto;
}

.loteria-coverflow-stage {
    position: relative;
    height: 510px; /* +30% adicional (antes 390px) para que las cartas aún más grandes quepan sin recortarse */
    perspective: 1000px;
    overflow: visible !important;
}

.loteria-coverflow-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    overflow: visible !important;
    /* El navegador maneja el scroll vertical; el gesto horizontal lo usa la ruleta. */
    touch-action: pan-y;
}

/* Contenedores equivalentes de librerías de carrusel comunes (Swiper,
   Slick): este tema no las usa, pero se cubren por si en el futuro
   se integra alguna, para que nunca recorten el efecto de chispas. */
.carousel-container,
.swiper-wrapper,
.swiper,
.slick-list,
.slick-track {
    overflow: visible !important;
}

/* Cada carta se posiciona en el centro del stage; el transform real
   (posición, giro, profundidad, escala) depende de data-offset.
   Ancho base +27% (antes 150px) para que todas las cartas (el escalado
   por offset se aplica sobre este ancho) se vean más grandes e
   imponentes, sin tener que tocar los factores de escala. */
.loteria-coverflow-track .loteria-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px; /* +30% adicional (antes 190px) */
    border: 3px solid transparent;
    border-radius: 10px;
    background-image:
        linear-gradient(160deg, var(--sqq-superficie) 0%, #050505 100%),
        linear-gradient(
            135deg,
            #fff6d0 0%,
            var(--sqq-dorado) 22%,
            #8a6d00 42%,
            var(--sqq-plata-2) 55%,
            var(--sqq-dorado) 70%,
            #fff6d0 88%,
            var(--sqq-dorado) 100%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    cursor: pointer;
    backface-visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, box-shadow 0.3s ease;
    transform: translate(-50%, -50%) translateZ(-320px) scale(0.5);
}

/* Carta central: al frente, recta y más grande */
.loteria-coverflow-track .loteria-card[data-offset="0"] {
    transform: translate(-50%, -50%) translateZ(100px) rotateY(0deg) scale(1.15);
    opacity: 1;
    pointer-events: auto;
    z-index: 50;
}

/* =========================================================
   CARTAS CON ILUSTRACIÓN REAL (carrusel "El Sorteo", 10 cartas)
   La imagen ocupa todo el marco de la tarjeta, sin ningún texto,
   número superpuesto, pseudo-elemento ni capa oscura encima, y SIN
   ningún marco dorado (ver limpieza general .card-3d más abajo).
========================================================= */

/* El contenedor (.card-3d) NO debe tocar "position": su position
   real (absolute) la define la regla de estructura del carrusel más
   abajo (.loteria-coverflow-track .loteria-card) y es indispensable
   para que las transformaciones 3D (rotateY, translateZ, escala por
   data-offset) sigan funcionando. Aquí solo se ajusta overflow/radio. */
.card-3d {
    overflow: visible !important;
    border-radius: 12px;
}

/* Limpieza extrema de marcos en el carrusel: ningún contenedor debe
   tener borde, sombra ni fondo propios — nótese que, a propósito,
   NO se toca "position" aquí (eso fue lo que rompió la estructura 3D
   la vez pasada). ".swiper-slide"/".card-inner" no existen en este
   tema; se incluyen igual por si se integran a futuro. */
.card-3d,
.carousel-item,
.swiper-slide,
.card-inner {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Limpieza del marco: apunta SOLO a la imagen interna, nunca al
   contenedor — así la tarjeta conserva su estructura/posicionamiento
   intactos y únicamente el PNG pierde el borde dorado anterior. La
   sombra 3D ahora vive directamente en la imagen. */
.card-3d img,
.carta-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* CRÍTICO: evita que se recorte la carta (ej. "El Paraguas", "La Escalera") */
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important; /* Sombra directa al PNG */
    border-radius: 10px !important;
    display: block !important;
}

/* Adyacentes inmediatas: inclinadas en el eje Y, más chicas y opacas */
.loteria-coverflow-track .loteria-card[data-offset="-1"] {
    transform: translate(-50%, -50%) translateX(-215px) translateZ(-130px) rotateY(25deg) scale(0.85);
    opacity: 0.75;
    pointer-events: auto;
    z-index: 30;
}

.loteria-coverflow-track .loteria-card[data-offset="1"] {
    transform: translate(-50%, -50%) translateX(215px) translateZ(-130px) rotateY(-25deg) scale(0.85);
    opacity: 0.75;
    pointer-events: auto;
    z-index: 30;
}

/* Cartas más lejanas: siguen curvando el "cilindro" hacia el fondo */
.loteria-coverflow-track .loteria-card[data-offset="-2"] {
    transform: translate(-50%, -50%) translateX(-380px) translateZ(-300px) rotateY(35deg) scale(0.65);
    opacity: 0.4;
    pointer-events: auto;
    z-index: 10;
}

.loteria-coverflow-track .loteria-card[data-offset="2"] {
    transform: translate(-50%, -50%) translateX(380px) translateZ(-300px) rotateY(-35deg) scale(0.65);
    opacity: 0.4;
    pointer-events: auto;
    z-index: 10;
}

/* Iluminación al pasar el mouse: glow dorado + toque rojo de marca */
.loteria-coverflow-track .loteria-card:hover,
.loteria-coverflow-track .loteria-card:focus-visible {
    box-shadow:
        0 0 14px rgba(254, 200, 6, 0.85),
        0 0 30px rgba(239, 0, 2, 0.3),
        inset 0 0 12px rgba(254, 200, 6, 0.2);
}

.loteria-coverflow-track .loteria-card[data-offset="0"]:hover,
.loteria-coverflow-track .loteria-card[data-offset="0"]:focus-visible {
    box-shadow:
        0 0 20px rgba(254, 200, 6, 1),
        0 0 40px rgba(239, 0, 2, 0.4),
        inset 0 0 14px rgba(254, 200, 6, 0.3);
}

.loteria-coverflow-track .loteria-card.is-selected {
    box-shadow:
        0 0 16px rgba(254, 200, 6, 1),
        0 0 34px rgba(239, 0, 2, 0.4),
        inset 0 0 14px rgba(254, 200, 6, 0.3);
}

/* =========================================================
   SISTEMA DE PARTÍCULAS "CHISPAS" — SOLO en la carta activa al
   frente. Este carrusel (hecho a medida, sin Swiper/Slick) no asigna
   una clase ".active"/".front" por JS: la carta centrada se
   identifica con el atributo [data-offset="0"], que main.js
   (initLoteriaCoverflow) ya reasigna automáticamente a la carta
   correspondiente en cada giro. Por eso [data-offset="0"] va PRIMERO
   en cada selector (es el que realmente coincide con algo aquí); se
   agregan también .active / .swiper-slide-active / .center por si en
   el futuro se integra una librería de carrusel que sí las use — hoy
   no cambian nada porque esas clases no existen en este HTML. El
   efecto se activa/desactiva solo, sin JS adicional.
========================================================= */

/* Carta activa: solo una sombra de profundidad base en el contenedor
   (el marco/borde ya se quitó únicamente en la imagen interna, arriba
   — el contenedor nunca necesitó su propio border:none/outline:none,
   y forzarlos ahí no aporta nada más que riesgo de romper el layout). */
.loteria-coverflow-track .loteria-card.card-3d[data-offset="0"],
.card-3d.active,
.card-3d.swiper-slide-active,
.card-3d.center {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Puntos centrales invisibles desde donde nacen las chispas */
.loteria-coverflow-track .card-3d[data-offset="0"]::before,
.card-3d.active::before,
.card-3d.swiper-slide-active::before,
.card-3d.center::before,
.loteria-coverflow-track .card-3d[data-offset="0"]::after,
.card-3d.active::after,
.card-3d.swiper-slide-active::after,
.card-3d.center::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999 !important; /* CRÍTICO: Por encima de la imagen */
    animation: explosionChispasMagicas 2s ease-out infinite;
}

/* Tiempos desfasados para que la explosión sea continua */
.loteria-coverflow-track .card-3d[data-offset="0"]::after,
.card-3d.active::after,
.card-3d.swiper-slide-active::after,
.card-3d.center::after {
    animation-delay: 1s; /* Desfase para que sea continuo */
}

/* Animación de las chispas volando en múltiples direcciones */
@keyframes explosionChispasMagicas {
    0% {
        box-shadow: 0 0 0 0 #FFD700, 0 0 0 0 #FFA500, 0 0 0 0 #FFF;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        box-shadow:
            -140px -180px 15px 2px #FFD700,
            160px -140px 12px 3px #FFA500,
            -120px 180px 18px 1px #FFF,
            150px 160px 14px 2px #FFD700,
            -180px 0px 10px 2px #FFA500,
            190px -40px 16px 3px #FFF;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
}

/* Respeta la preferencia de "menos movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
    .loteria-coverflow-track .card-3d[data-offset="0"]::before,
    .card-3d.active::before,
    .card-3d.swiper-slide-active::before,
    .card-3d.center::before,
    .loteria-coverflow-track .card-3d[data-offset="0"]::after,
    .card-3d.active::after,
    .card-3d.swiper-slide-active::after,
    .card-3d.center::after {
        animation: none;
    }
}

/* Flechas de navegación: flotantes sobre los costados de la ruleta */
.loteria-coverflow-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 2px solid var(--sqq-dorado);
    color: var(--sqq-rojo);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(254, 200, 6, 0.35);
    transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
    z-index: 60;
}

.loteria-coverflow-prev {
    left: 0;
}

.loteria-coverflow-next {
    right: 0;
}

.loteria-coverflow-arrow:hover {
    background: #161616;
    box-shadow: 0 0 18px rgba(254, 200, 6, 0.8), 0 0 12px rgba(239, 0, 2, 0.5);
    transform: translateY(-50%) scale(1.08);
}

.loteria-coverflow-arrow:active {
    transform: translateY(-50%) scale(0.94);
}

.loteria-coverflow-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
    transform: translateY(-50%);
}

/* Botón "Elegir esta carta" debajo de la ruleta */
.loteria-coverflow-cta {
    text-align: center;
    margin-top: 28px;
}

.loteria-coverflow-elegir {
    box-shadow: 0 0 14px rgba(239, 0, 2, 0.6), 0 0 24px rgba(254, 200, 6, 0.3);
}

.loteria-coverflow-elegir:hover {
    box-shadow: 0 0 20px rgba(239, 0, 2, 0.9), 0 0 34px rgba(254, 200, 6, 0.5);
}

/* Responsivo (dimensiones también aumentadas ~27%, igual que en escritorio) */
@media (max-width: 640px) {
    .loteria-coverflow-stage {
        height: 395px;
    }

    .loteria-coverflow-track .loteria-card {
        width: 180px;
    }

    .loteria-coverflow-track .loteria-card[data-offset="0"] {
        transform: translate(-50%, -50%) translateZ(85px) rotateY(0deg) scale(1.1);
    }

    .loteria-coverflow-track .loteria-card[data-offset="-1"] {
        transform: translate(-50%, -50%) translateX(-145px) translateZ(-115px) rotateY(25deg) scale(0.8);
    }

    .loteria-coverflow-track .loteria-card[data-offset="1"] {
        transform: translate(-50%, -50%) translateX(145px) translateZ(-115px) rotateY(-25deg) scale(0.8);
    }

    .loteria-coverflow-track .loteria-card[data-offset="-2"] {
        transform: translate(-50%, -50%) translateX(-245px) translateZ(-265px) rotateY(35deg) scale(0.6);
        opacity: 0.25;
    }

    .loteria-coverflow-track .loteria-card[data-offset="2"] {
        transform: translate(-50%, -50%) translateX(245px) translateZ(-265px) rotateY(-35deg) scale(0.6);
        opacity: 0.25;
    }

    .loteria-coverflow-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }
}

/* =========================================================
   CINTA DE PREMIOS (Prize Ticker / Marquee)
   Marquesina horizontal infinita, justo debajo del Hero.

   Estructura (ver front-page.php):
     .cinta-premios-wrapper            <- overflow:hidden, borde/fondo
       .cinta-premios-track            <- UN solo riel flex, width:max-content
         .premio-item  (x N)           <- primer bloque de premios
         .premio-item  (x N, idéntico) <- segundo bloque, duplicado exacto

   El track NO tiene contenedores intermedios entre sí mismo y las
   tarjetas: es un único nivel flex con el doble de tarjetas. Esto es
   intencional — un wrapper extra entre el track y las tarjetas (flex
   dentro de flex) puede hacer que "width: max-content" se calcule mal
   en algunos navegadores y deje la animación pegada/estática. Al
   animar de 0% a -50% del ancho total del track, el segundo bloque
   (idéntico) reemplaza visualmente al primero en el instante exacto
   en que termina, logrando un bucle infinito sin cortes ni saltos.

   La animación se marca "!important" y no se pausa por ninguna
   acción del usuario (ni hover, ni focus, ni prefers-reduced-motion):
   gira siempre, de forma continua e ininterrumpida.
========================================================= */
.cinta-premios-wrapper {
    width: 100%;
    overflow: hidden;
    background: url('images/placa-dorada.jpg') no-repeat center center !important;
    background-size: cover !important;
    background-position: center center !important;
    border-top: 3px solid #FFE57F !important;
    border-bottom: 3px solid #996515 !important;
    padding: 35px 20px !important;
    margin-top: 40px !important;
    box-shadow: 0 0 35px rgba(254, 200, 6, 0.65),
                0 0 70px rgba(212, 175, 55, 0.35),
                inset 0 0 15px rgba(255, 235, 170, 0.4) !important;
    position: relative !important;
    z-index: 5 !important;
    animation: goldGlowPulse 3s infinite alternate ease-in-out !important;
}

@keyframes goldGlowPulse {
    0% {
        box-shadow: 0 0 25px rgba(254, 200, 6, 0.5), 0 0 50px rgba(212, 175, 55, 0.25);
    }
    100% {
        box-shadow: 0 0 45px rgba(254, 200, 6, 0.85), 0 0 90px rgba(255, 215, 0, 0.5);
    }
}

/* Respeta la preferencia de "menos movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
    .cinta-premios-wrapper {
        animation: none !important;
    }
}

.cinta-premios-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: marquee-infinito 20s linear infinite !important;
}

@keyframes marquee-infinito {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Cada premio: caja con borde dorado, foto real + etiqueta de texto
   debajo, centrado. */
.premio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 180px;
    padding: 16px 18px;
    margin: 0 12px;
    white-space: nowrap;
    background: rgba(10, 10, 10, 0.75) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: 2px solid #D4AF37 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 220, 120, 0.2) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.premio-item span,
.premio-item p {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.premio-item:hover {
    transform: translateY(-4px);
    border-color: #D4AF37 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 220, 120, 0.3), 0 0 16px rgba(212, 175, 55, 0.35) !important;
}

/* Fotografía real del premio: se ajusta al recuadro sin recortarse. */
.premio-foto {
    width: 100%;
    height: 120px; /* Ajusta esto según el tamaño del contenedor del premio */
    object-fit: contain; /* Para que la imagen no se recorte y se vea completa */
    border-radius: 8px;
    margin-bottom: 10px;
    display: block;
}

.premio-texto {
    color: #E6CA65 !important;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: normal;
    text-align: center;
    max-width: 150px;
}

/* Responsivo */
@media (max-width: 640px) {
    .cinta-premios-wrapper {
        padding: 10px 0;
    }

    .premio-item {
        width: 130px;
        padding: 12px 12px;
        margin: 0 8px;
    }

    .premio-foto {
        height: 80px;
        margin-bottom: 7px;
    }

    .premio-texto {
        font-size: 0.72rem;
        max-width: 110px;
    }
}

/* =========================================================
   GRUPO FLOTANTE: REDES SOCIALES + WHATSAPP
   Contenedor único fijo en la esquina inferior derecha; el botón de
   WhatsApp queda siempre visible al final (abajo) y, arriba de él,
   los íconos de TikTok/Instagram/Facebook aparecen pequeños y se
   agrandan al pasar el mouse sobre todo el grupo.
========================================================= */
.floating-social-wrapper {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Lista vertical de redes sociales, arriba del botón de WhatsApp */
.social-extra-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Estado por defecto: íconos pequeños y semi-transparentes */
.social-extra-list a {
    transform: scale(0.7);
    opacity: 0.75;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Estado en hover: al pasar el mouse por el botón de WhatsApp o por
   cualquier parte del grupo, los íconos de redes crecen con fluidez.
   Al quitar el puntero, la misma transición los regresa a su tamaño
   pequeño original automáticamente (no hace falta JS). */
.floating-social-wrapper:hover .social-extra-list a {
    transform: scale(1.2);
    opacity: 1;
}

.social-extra-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.social-extra-icono {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

/* Fondos circulares de marca de cada red social */
.social-extra-btn--tiktok {
    background: #000000;
    border: 1px solid #333333;
}

.social-extra-btn--instagram {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}

.social-extra-btn--facebook {
    background: #1877F2;
}

/* El botón de WhatsApp ahora es un ítem más del grupo (ya no fija su
   propia posición: la hereda de .floating-social-wrapper). */
.sqq-whatsapp-btn {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sqq-whatsapp-btn:hover,
.sqq-whatsapp-btn:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.sqq-whatsapp-icono {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    color: #ffffff;
}

/* Anillo de pulso continuo (glow) detrás del botón */
.sqq-whatsapp-pulso {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: #25D366;
    animation: sqq-whatsapp-pulso 2.2s ease-out infinite;
}

@keyframes sqq-whatsapp-pulso {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* Respeta la preferencia de "menos movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
    .sqq-whatsapp-pulso {
        animation: none;
        opacity: 0;
    }
}

/* Responsivo */
@media (max-width: 480px) {
    .floating-social-wrapper {
        bottom: 18px;
        right: 18px;
        gap: 8px;
    }

    .sqq-whatsapp-btn {
        width: 52px;
        height: 52px;
    }

    .sqq-whatsapp-icono {
        width: 27px;
        height: 27px;
    }

    .social-extra-btn {
        width: 40px;
        height: 40px;
    }

    .social-extra-icono {
        width: 20px;
        height: 20px;
    }
}

/* =========================================================
   LOGOTIPO PERSONALIZADO (custom-logo nativo de WordPress)
   Ahora vive DENTRO del Hero (ver front-page.php), como encabezado
   gráfico principal de la página — ya NO es un elemento flotante
   fijo sobre la pantalla: va en flujo normal y se desplaza junto con
   el resto del contenido al hacer scroll. Los únicos elementos que
   permanecen fijos en las esquinas son el botón de hamburguesa y el
   ícono de carrito (ver .menu-toggle / .cart-toggle).
   .custom-logo / .custom-logo-link son las clases que genera
   the_custom_logo() de forma nativa (y también el respaldo manual en
   header.php y front-page.php, con el mismo nombre de clase a propósito).
========================================================= */
.custom-logo-link {
    position: static;
    display: block;
    line-height: 0;
}

.site-logo,
.custom-logo,
.custom-logo-link img,
.logo-link img {
    max-height: 220px;
    width: auto;
    display: block;
    margin: 0 auto 20px auto;
    object-fit: contain;
    /* Resalta el isotipo de las tres cartas sobre el fondo oscuro. */
    filter: drop-shadow( 0px 8px 20px rgba( 0, 0, 0, 0.8 ) );
    /* Aseguramos visibilidad explícita: nada debe ocultar el logo. */
    visibility: visible;
    opacity: 1;
}

/* Dentro del drawer el logo se mantiene compacto: el tamaño grande de
   220px es solo para el logo protagonista del Hero. */
.menu-drawer-header .custom-logo,
.menu-drawer-header .custom-logo-link img {
    max-height: 40px;
    margin: 0;
    filter: none;
}

/* =========================================================
   LOGO PROTAGONISTA DEL HERO: tamaño imponente + animación de
   latido forzada, con pistas de aceleración por hardware
   (will-change, backface-visibility) para que el navegador la
   renderice en su propia capa de composición y no se vea entrecortada.
========================================================= */
.hero-logo-pulsante {
    display: block !important;
    margin: 0 auto 55px auto !important;
    width: 100% !important;
    max-width: 480px !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: contain !important;
    transform-origin: center center;
    will-change: transform, filter;
    backface-visibility: hidden;
    animation: logoLatido 3.5s ease-in-out infinite !important;
}

@keyframes logoLatido {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(254, 200, 6, 0.4)) drop-shadow(0 10px 25px rgba(0, 0, 0, 0.9));
    }
    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 35px rgba(239, 0, 2, 0.8)) drop-shadow(0 0 20px rgba(254, 200, 6, 0.7));
    }
}

/* Responsivo: en móvil el logo sigue teniendo buena presencia sin
   saturar la pantalla ni tapar el menú de hamburguesa o el carrito
   (que son los únicos elementos fijos, en las esquinas). */
@media (max-width: 768px) {
    .site-logo,
    .custom-logo,
    .custom-logo-link img,
    .logo-link img {
        max-height: 140px;
    }

    .menu-drawer-header .custom-logo,
    .menu-drawer-header .custom-logo-link img {
        max-height: 40px;
    }

    .hero-logo-pulsante {
        max-width: 85% !important;
        max-height: 250px !important;
    }
}

/* =========================================================
   SECCIÓN "PARTICIPA EN 3 SIMPLES PASOS": imágenes en vez de texto
   Se anula el fondo/borde metálico solo para ESTAS tarjetas (no para
   el utilitario .marco-metalico en general, que se sigue usando en
   otras partes del tema), y se limpia el padding para que las nuevas
   imágenes luzcan sin ningún recuadro alrededor.
========================================================= */
.paso-card.marco-metalico {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}

.paso-card.marco-metalico:hover {
    transform: none;
}

.paso-card-interior.marco-metalico-interior {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
}

/* Imágenes de los 3 pasos: tamaño consistente en PC y celular, con
   un ligero efecto de elevación y resplandor dorado al pasar el mouse. */
.paso-img {
    width: 100%;
    max-width: 380px; /* Tamaño ideal para que no se vean gigantes en PC */
    height: auto;
    margin: 0 auto;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease !important;
    cursor: default;
}

.paso-img:hover {
    transform: translateY(-8px) scale(1.02) !important;
    filter: drop-shadow(0 15px 25px rgba(254, 200, 6, 0.25)) !important;
}

/* =========================================================
   MENÚ DESPLEGABLE COMPACTO: 4 botones con placa dorada ornamentada
   (Inicio / En vivo / Registra / Soporte). Sin scroll.
========================================================= */
.menu-overlay-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 85vh !important;
    padding: 30px 20px !important;
    max-height: 90vh !important;
    overflow: hidden !important; /* Sin barra de desplazamiento */
    /* Extras necesarios al ser una <ul> dentro del drawer: que ocupe el
       espacio restante bajo la cabecera y sin viñetas ni márgenes. */
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
}

/* Con align-items:center cada <li> se encogería al ancho de su
   contenido y el width:88% del botón quedaría mal resuelto: el <li>
   debe ocupar todo el ancho disponible. */
.menu-overlay-content li {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-shrink: 0;
}

.menu-btn-item {
    background: url('images/placa-boton.png') no-repeat center center !important;
    background-size: 100% 100% !important;
    width: 88% !important;
    max-width: 440px !important; /* Ancho imponente */
    height: 82px !important; /* Altura con buen cuerpo */
    margin: 16px auto !important; /* Separación limpia y uniforme */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85)) !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
    text-decoration: none !important;
}

.menu-btn-item:hover {
    transform: scale(1.04) !important;
    filter: drop-shadow(0 0 16px rgba(254, 200, 6, 0.6)) brightness(1.12) !important;
}

/* Tipografía grande, centrada y en una sola línea */
.menu-btn-item span,
.menu-btn-item a {
    color: #111111 !important; /* Negro azabache para alto contraste */
    font-family: 'MADE Sunflower', sans-serif !important;
    font-size: 22px !important; /* Letra grande e imponente */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* El menú no tiene scroll (overflow: hidden) y la altura de la placa es
   fija: en pantallas bajas los 4 botones ya no cabrían y el último
   quedaría cortado, así que su altura baja por escalones. */
@media (max-height: 640px) {
    .menu-overlay-content {
        padding: 15px 20px !important;
        min-height: 0 !important;
    }

    .menu-btn-item {
        height: 68px !important;
        margin: 8px auto !important;
    }
}

@media (max-height: 520px) {
    .menu-btn-item {
        height: 54px !important;
        margin: 6px auto !important;
    }

    .menu-btn-item span,
    .menu-btn-item a {
        font-size: 18px !important;
        letter-spacing: 1px !important;
    }
}

@media (max-height: 430px) {
    .menu-overlay-content {
        padding: 8px 20px !important;
    }

    .menu-btn-item {
        height: 42px !important;
        margin: 4px auto !important;
    }

    .menu-btn-item span,
    .menu-btn-item a {
        font-size: 14px !important;
    }
}

/* =========================================================
   TÍTULOS DE SECCIÓN: texto con destellos dorados laterales (✦) y
   subtítulo fino ultra espaciado. Estructura (front-page.php):
   <div class="section-header-wrapper">
       <h2 class="section-title">…</h2>
       <p class="section-subtitle">SORTEO QUIEN QUITA</p>
   </div>
========================================================= */
.section-header-wrapper {
    text-align: center;
    margin: 0 auto 50px;
}

.section-title,
h2.section-heading,
.titulo-seccion {
    font-family: 'MADE Sunflower', serif !important;
    color: #FFFDF5 !important; /* Blanco crema elegante */
    font-size: 32px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 12px !important; /* Espaciado amplio entre letras */
    text-align: center !important;
    margin: 0 auto 8px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* Destellos dorados laterales (estrellas ✦) */
.section-title::before,
.section-title::after,
h2.section-heading::before,
h2.section-heading::after,
.titulo-seccion::before,
.titulo-seccion::after {
    content: '✦' !important;
    color: #FEC806 !important; /* Dorado brillante */
    font-size: 26px !important;
    letter-spacing: normal !important;
    text-shadow: 0 0 10px rgba(254, 200, 6, 0.6) !important;
}

.section-subtitle,
.subtitulo-seccion {
    font-family: sans-serif !important;
    color: #E5E5E5 !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 8px !important; /* Espaciado estilo 'SORTEO QUIEN QUITA' */
    text-align: center !important;
    /* Shorthand (en vez de solo margin-top) para anular también el
       margin-bottom de 50px que traía .section-subtitle en landing.css:
       el espacio bajo la cabecera lo da ahora .section-header-wrapper. */
    margin: 6px auto 0 !important;
    opacity: 0.9 !important;
}

/* Texto descriptivo opcional bajo el subtítulo (se conservó el que ya
   existía en "Elige tu carta" y "¿Listo para ganar?"): normal, legible,
   sin el espaciado extremo del subtítulo. */
.section-descripcion {
    max-width: 640px;
    margin: 20px auto 0;
    color: var(--sqq-plata-2);
    font-size: 1.05rem;
    text-align: center;
    letter-spacing: normal;
}

/* Con 32px y 12px de espaciado, los títulos largos (p. ej. "PARTICIPA EN
   3 SIMPLES PASOS", unos 1000px) no caben en tablet ni en celular: se
   reducen por escalones para que no se rompan en 4 o 5 líneas. */
@media (max-width: 900px) {
    .section-title,
    h2.section-heading,
    .titulo-seccion {
        font-size: 26px !important;
        letter-spacing: 7px !important;
        gap: 14px !important;
    }

    .section-title::before,
    .section-title::after,
    h2.section-heading::before,
    h2.section-heading::after,
    .titulo-seccion::before,
    .titulo-seccion::after {
        font-size: 22px !important;
    }
}

@media (max-width: 600px) {
    .section-title,
    h2.section-heading,
    .titulo-seccion {
        font-size: 19px !important;
        letter-spacing: 3px !important;
        gap: 10px !important;
    }

    .section-title::before,
    .section-title::after,
    h2.section-heading::before,
    h2.section-heading::after,
    .titulo-seccion::before,
    .titulo-seccion::after {
        font-size: 16px !important;
    }

    .section-subtitle,
    .subtitulo-seccion {
        font-size: 11px !important;
        letter-spacing: 5px !important;
    }
}

/* =========================================================
   MÓVIL: SIN SCROLL LATERAL (overflow-x)
   - html/body nunca permiten desplazamiento horizontal.
   - Donde el navegador soporta "overflow-x: clip" se usa ese valor:
     recorta igual que hidden pero NO rompe position:sticky (la barra
     "FOLIO #XXX ACTIVO" sigue pegada arriba al hacer scroll).
========================================================= */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
    position: relative;
}

@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip !important;
    }
}

/* Cinta dorada de premios (Smartwatch, Efectivo...): nunca más ancha que la pantalla */
.cinta-premios-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ruleta 3D: las cartas laterales (translateX ±245px) se recortan a los
   lados en vez de ensanchar la página; arriba/abajo siguen visibles. */
.sorteo,
.loteria-coverflow {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    .sorteo,
    .loteria-coverflow {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* Botón "ELEGIR ESTA CARTA": siempre en flujo normal, debajo del carrusel */
.loteria-coverflow-cta {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    z-index: 5;
    display: block;
    clear: both;
    width: 100%;
    margin: 28px auto 0 !important;
    text-align: center;
}

.loteria-coverflow-cta .loteria-coverflow-elegir {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

@media (max-width: 640px) {
    /* Altura suficiente para la carta central escalada: el botón queda debajo, no encima */
    .loteria-coverflow-stage {
        height: 420px;
    }

    .loteria-coverflow-cta {
        margin-top: 18px !important;
        padding: 0 16px;
    }

    .loteria-coverflow-cta .loteria-coverflow-elegir {
        width: 100%;
        max-width: 360px;
    }
}

/* =========================================================
   PREMIO PRINCIPAL (iPhone 18 Pro) levitando en 3D sobre
   el orbe/portal dorado en el piso (images/orbe-portal.png).
========================================================= */
.premio-principal-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px auto 20px; /* Reducción drástica del espacio vertical */
    padding: 0 15px 20px;
    max-width: 100%;
    min-height: auto;
    overflow: hidden;
}

/* Título arriba: mismo estilo que los demás títulos del sitio
   (letras blancas espaciadas + destellos dorados ✦) */
.titulo-premio-unico {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: inherit; /* Hereda la misma fuente serif/slab del sitio */
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 15px 0;
    z-index: 5;
}

.titulo-premio-unico .texto-titulo {
    color: #FFFFFF;
    letter-spacing: 5px; /* Espaciado idéntico al de las otras secciones */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.titulo-premio-unico .brillo-icono {
    color: #FFB800; /* Tono dorado/amarillo exacto */
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.9)) drop-shadow(0 0 15px rgba(255, 200, 0, 0.6));
    animation: titilar-brillo 2.5s ease-in-out infinite alternate;
}

@keyframes titilar-brillo {
    0% { transform: scale(0.9); opacity: 0.75; }
    100% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1)); }
}

@media (max-width: 768px) {
    .titulo-premio-unico {
        gap: 10px;
    }
    .titulo-premio-unico .texto-titulo {
        font-size: 18px;
        letter-spacing: 3px;
    }
    .titulo-premio-unico .brillo-icono {
        font-size: 18px;
    }
}

/* Escenario ampliado para albergar elementos más grandes */
.escenario-3d {
    position: relative;
    width: 100%;
    max-width: 760px;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

/* Brillo ambiental trasero proporcional */
.brillo-ambiental-atras {
    position: absolute;
    bottom: 12%;
    width: 480px;
    height: 240px;
    background: radial-gradient(ellipse, rgba(255,190,0,0.5) 0%, rgba(255,120,0,0.2) 50%, transparent 75%);
    filter: blur(40px);
    mix-blend-mode: screen;
    z-index: 1;
    pointer-events: none;
}

/* Portal en el suelo: ampliado a 640px */
.orbe-portal-suelo {
    position: absolute;
    bottom: 2%;
    width: 640px;
    max-width: 95%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 35px rgba(255,210,0,0.65));
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
    animation: pulso-portal 4s ease-in-out infinite alternate;
}

/* Sombra proporcional al nuevo tamaño del iPhone */
.sombra-proyectada {
    position: absolute;
    bottom: 15%;
    width: 160px;
    height: 35px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 70%);
    z-index: 3;
    pointer-events: none;
    animation: escala-sombra 5s ease-in-out infinite;
}

/* Partículas ascendentes */
.destellos-verticales {
    position: absolute;
    bottom: 12%;
    width: 360px;
    height: 240px;
    background-image:
        radial-gradient(rgba(255,255,255,0.9) 1.5px, transparent 1.5px),
        radial-gradient(rgba(255,215,0,0.85) 2px, transparent 2px),
        radial-gradient(rgba(255,140,0,0.6) 2.5px, transparent 2.5px);
    background-size: 60px 60px, 45px 45px, 70px 70px;
    background-position: 0 0, 20px 15px, 35px 30px;
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    filter: blur(0.5px);
    mix-blend-mode: screen;
    z-index: 3;
    pointer-events: none;
    animation: subir-particulas 6s linear infinite;
}

/* iPhone: tamaño incrementado a 350px con elevación equilibrada */
.iphone-levitando {
    position: absolute;
    bottom: 22%;
    width: 350px;
    max-width: 78%;
    height: auto;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0px 0px 20px rgba(255, 215, 0, 0.25)) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
    animation: flotar-3d-escenario 5s ease-in-out infinite;
}

/* Animaciones */
@keyframes flotar-3d-escenario {
    0% { transform: translateY(0) rotateY(-5deg) rotateX(4deg); }
    50% { transform: translateY(-28px) rotateY(3deg) rotateX(1deg); }
    100% { transform: translateY(0) rotateY(-5deg) rotateX(4deg); }
}

@keyframes escala-sombra {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(0.6); opacity: 0.3; }
}

@keyframes pulso-portal {
    0% { transform: scale(1); filter: drop-shadow(0 0 25px rgba(255,200,0,0.5)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 45px rgba(255,220,0,0.85)); }
}

@keyframes subir-particulas {
    from { background-position: 0 240px, 20px 255px, 35px 270px; }
    to { background-position: 0 0, 20px 15px, 35px 30px; }
}

/* Ajustes responsivos para móviles
   (el mensaje original llegaba cortado tras ".escenario-3d { height: 380px;";
   el resto son valores proporcionales al escenario de 380px) */
@media (max-width: 768px) {
    .premio-principal-wrapper { margin: 5px auto 15px; padding: 0 10px 15px; }
    .titulo-premio-unico { margin-bottom: 10px; }
    .escenario-3d { height: 380px; }
    .brillo-ambiental-atras { width: 330px; height: 170px; }
    .orbe-portal-suelo { width: 440px; }
    .destellos-verticales { width: 260px; height: 180px; }
    .iphone-levitando { width: 240px; bottom: 22%; }
    .sombra-proyectada { width: 110px; height: 25px; bottom: 15%; }
}

/* =========================================================
   CARRUSEL "ELIGE TU CARTA" — versión compacta
   - Sección y cartas más chicas (carta central ≈ 354px de alto).
   - Carta activa ([data-offset="0"]) con resplandor dorado que "respira".
   - Flechas con pulso + microdesplazamiento y aura dorada.
   Va al final para ganar a las reglas anteriores del carrusel.
========================================================= */

/* 1. Sección más compacta */
.sorteo > .section-inner {
    padding-top: 30px;
    padding-bottom: 30px;
}
.sorteo .section-subtitle {
    margin-bottom: 14px;
}
.sorteo .section-descripcion {
    margin-bottom: 0;
}
.sorteo .section-header-wrapper {
    margin-bottom: 10px;
}

/* Escenario más bajo: la carta central (310px) cabe sin tapar textos */
.loteria-coverflow-stage {
    height: 350px;
}

/* El contenedor de la carta se ajusta EXACTO a la imagen (sin proporción
   forzada, sin fondo, sin borde, sin sombra), así el resplandor de la
   imagen abraza el contorno de la carta sin dejar franja negra. */
.loteria-coverflow-track .loteria-card,
.loteria-coverflow-track .loteria-card.card-3d,
.loteria-coverflow-track .loteria-card.card-3d[data-offset="0"],
.loteria-coverflow-track .loteria-card:hover,
.loteria-coverflow-track .loteria-card:focus-visible,
.loteria-coverflow-track .loteria-card.is-selected {
    width: auto;
    height: auto;
    aspect-ratio: auto;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 0;
}

/* La imagen manda el tamaño: 310px de alto en escritorio */
.loteria-coverflow-track .carta-img {
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: 310px;
    border-radius: 16px !important;
    box-sizing: border-box;
}

/* Carta central sin ampliación extra (antes translateZ + scale 1.15 la
   hacían ~395px de alto y chocaba con el texto y el botón) */
.loteria-coverflow-track .loteria-card[data-offset="0"] {
    transform: translate(-50%, -50%) translateZ(0) rotateY(0deg) scale(1);
}
.loteria-coverflow-track .loteria-card[data-offset="-1"] {
    transform: translate(-50%, -50%) translateX(-176px) translateZ(-130px) rotateY(25deg) scale(0.85);
}
.loteria-coverflow-track .loteria-card[data-offset="1"] {
    transform: translate(-50%, -50%) translateX(176px) translateZ(-130px) rotateY(-25deg) scale(0.85);
}
.loteria-coverflow-track .loteria-card[data-offset="-2"] {
    transform: translate(-50%, -50%) translateX(-312px) translateZ(-300px) rotateY(35deg) scale(0.65);
}
.loteria-coverflow-track .loteria-card[data-offset="2"] {
    transform: translate(-50%, -50%) translateX(312px) translateZ(-300px) rotateY(-35deg) scale(0.65);
}

.loteria-coverflow-cta {
    margin-top: 14px !important;
}

/* 2. Carta activa: borde + resplandor DIRECTO en la <img> (.carta-img).
   Solo se animan box-shadow y filter (nunca transform), así no choca con
   el transform 3D del contenedor. La regla general ".card-3d img" tenía
   box-shadow !important, que bloqueaba la animación: aquí se anula. */
.loteria-coverflow-track .loteria-card[data-offset="0"] .carta-img {
    border: none !important;   /* sin aro ni marco: solo el halo de luz */
    outline: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    will-change: filter;
    animation: palpitar-dorado 1.3s ease-in-out infinite alternate !important;
}

@keyframes palpitar-dorado {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 160, 0, 0.25));
    }
    100% {
        filter: drop-shadow(0 0 24px rgba(255, 235, 120, 0.95)) drop-shadow(0 0 45px rgba(255, 180, 0, 0.75));
    }
}

/* 3. Flechas: sin recorte. El carrusel deja ver lo que sobresale; el recorte
   horizontal (anti scroll lateral) queda solo en la sección .sorteo. */
.sorteo .loteria-coverflow,
.sorteo .loteria-coverflow-stage {
    overflow: visible !important;
}
.sorteo .loteria-coverflow {
    padding: 0 45px;
    box-sizing: border-box;
}
.sorteo .loteria-coverflow-prev { left: 10px; }
.sorteo .loteria-coverflow-next { right: 10px; }
@media (max-width: 640px) {
    .sorteo .loteria-coverflow { padding: 0 30px; }
    .sorteo .loteria-coverflow-prev { left: 4px; }
    .sorteo .loteria-coverflow-next { right: 4px; }
}

/* Pulso + microdesplazamiento hacia su lado + aura dorada */
.loteria-coverflow-arrow {
    overflow: visible;
    border-color: #FFD700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5), 0 0 24px rgba(255, 184, 0, 0.25);
}
.loteria-coverflow .loteria-coverflow-prev {
    animation: flecha-llamada-izq 1.8s ease-in-out infinite !important;
}
.loteria-coverflow .loteria-coverflow-next {
    animation: flecha-llamada-der 1.8s ease-in-out infinite !important;
}

/* Al interactuar se detiene la animación para que funcionen hover/clic */
.loteria-coverflow .loteria-coverflow-arrow:hover,
.loteria-coverflow .loteria-coverflow-arrow:focus-visible,
.loteria-coverflow .loteria-coverflow-arrow:active,
.loteria-coverflow .loteria-coverflow-arrow:disabled {
    animation: none !important;
}
.loteria-coverflow-arrow:hover,
.loteria-coverflow-arrow:focus-visible {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 38px rgba(255, 184, 0, 0.5);
}

@keyframes flecha-llamada-izq {
    0%, 100% {
        transform: translateY(-50%) translateX(0) scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 184, 0, 0.2);
    }
    50% {
        transform: translateY(-50%) translateX(-3px) scale(1.05);
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.85), 0 0 34px rgba(255, 184, 0, 0.45);
    }
}
@keyframes flecha-llamada-der {
    0%, 100% {
        transform: translateY(-50%) translateX(0) scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 184, 0, 0.2);
    }
    50% {
        transform: translateY(-50%) translateX(3px) scale(1.05);
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.85), 0 0 34px rgba(255, 184, 0, 0.45);
    }
}

/* Móvil: carta central de 250px de alto */
@media (max-width: 640px) {
    .sorteo > .section-inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .loteria-coverflow-stage {
        height: 285px;
    }
    .loteria-coverflow-track .carta-img {
        max-height: 250px;
    }
    .loteria-coverflow-track .loteria-card[data-offset="0"] {
        transform: translate(-50%, -50%) translateZ(0) rotateY(0deg) scale(1);
    }
    .loteria-coverflow-track .loteria-card[data-offset="-1"] {
        transform: translate(-50%, -50%) translateX(-120px) translateZ(-115px) rotateY(25deg) scale(0.8);
    }
    .loteria-coverflow-track .loteria-card[data-offset="1"] {
        transform: translate(-50%, -50%) translateX(120px) translateZ(-115px) rotateY(-25deg) scale(0.8);
    }
    .loteria-coverflow-track .loteria-card[data-offset="-2"] {
        transform: translate(-50%, -50%) translateX(-200px) translateZ(-265px) rotateY(35deg) scale(0.6);
    }
    .loteria-coverflow-track .loteria-card[data-offset="2"] {
        transform: translate(-50%, -50%) translateX(200px) translateZ(-265px) rotateY(-35deg) scale(0.6);
    }
    .loteria-coverflow-cta {
        margin-top: 10px !important;
    }
}

/* Nota: sin bloque prefers-reduced-motion aquí a propósito. Si Windows tiene
   desactivados los "Efectos de animación", ese bloque apagaba el pulso de la
   carta y de las flechas. Estas animaciones son suaves y se quieren siempre. */

/* =====================================================
   PASOS CLICABLES ("Participa en 3 simples pasos")
   Paso 1 -> #seccion-boletos, Paso 2 -> WhatsApp, Paso 3 -> #seccion-ruleta
===================================================== */

/* Desplazamiento fluido en toda la página */
html {
    scroll-behavior: smooth;
}

/* Anclas vacías de destino: dejan un margen para que el header fijo no tape la sección */
.sqq-ancla {
    display: block;
    height: 0;
    scroll-margin-top: 90px;
}

/* Tarjetas clicables con micro-interacción al pasar el cursor */
.paso-card,
.paso-item,
a.paso-enlace {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    display: flex;
}

/* El interior (ahora <span>) se comporta como bloque y ocupa todo el ancho */
a.paso-enlace .paso-card-interior {
    display: block;
    width: 100%;
}

.paso-card:hover,
.paso-item:hover,
a.paso-enlace:hover {
    transform: translateY(-6px);
    filter: brightness(1.08);
}

.paso-card:active,
.paso-item:active,
a.paso-enlace:active {
    transform: translateY(-2px);
}

/* Foco visible al navegar con teclado */
a.paso-enlace:focus-visible {
    outline: 3px solid #ffd700;
    outline-offset: 4px;
}

/* =====================================================
   VIDEOS Y TRANSMISIONES (#en-vivo) — iframes 16:9 fluidos
   El desplazamiento del carrusel se calcula en main.js con la
   posición real de cada tarjeta (ya no por porcentaje).
===================================================== */
.video-card {
    box-sizing: border-box;
}

.carrusel-videos .video-card-frame {
    aspect-ratio: auto !important;
    border-radius: 12px;
    overflow: hidden;
}

.video-embed-wrapper,
.video-card iframe {
    position: static !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    border: 0;
    border-radius: 12px;
}

@media (max-width: 768px) {
    /* Padding lateral del contenedor general */
    #en-vivo > .section-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Con la tarjeta a 85vw no caben flechas a los lados en un teléfono:
       el video ocupa la primera fila y las flechas amarillas bajan a una
       segunda fila, centradas, sin encimarse nunca sobre el video. */
    #en-vivo .video-carousel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "video video"
            "prev  next";
        gap: 16px 32px;
        align-items: center;
    }

    #en-vivo .video-carousel-track-wrapper {
        grid-area: video;
        justify-self: center;
        width: 85vw;
        max-width: 340px;
        margin: 0 auto;
    }

    #en-vivo .carousel-arrow-prev {
        grid-area: prev;
        justify-self: end;
    }

    #en-vivo .carousel-arrow-next {
        grid-area: next;
        justify-self: start;
    }

    #en-vivo .video-card {
        flex: 0 0 auto !important;
        width: 85vw !important;
        max-width: 340px !important;
        margin: 0 auto;
    }

    #en-vivo .carousel-arrow {
        width: 44px;
        height: 44px;
    }

    #en-vivo .carousel-dots {
        margin-top: 14px;
    }
}

/* =====================================================
   PRÓXIMO GRAN SORTEO — contador regresivo (#proximo-sorteo)
   Cajas de acabado metálico oscuro con borde dorado tenue.
===================================================== */
.sqq-cuenta__inner {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.sqq-cuenta .section-header-wrapper {
    margin-bottom: 26px;
}

.sqq-cuenta__fecha {
    margin: 12px auto 0;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #f3dc8a;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.sqq-cuenta__reloj {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
}

.sqq-cuenta__caja {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 8px 18px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 235, 160, 0.10) 0%, rgba(255, 235, 160, 0) 38%),
        linear-gradient(160deg, #1c1608 0%, #0b0905 55%, #16110a 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 230, 150, 0.22),
        inset 0 -10px 24px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(212, 175, 55, 0.22),
        0 14px 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* Línea de brillo dorado en el canto superior */
.sqq-cuenta__caja::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0), #ffd700, rgba(255, 215, 0, 0));
    opacity: 0.85;
}

.sqq-cuenta__num {
    display: block;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff6d6;
    background: linear-gradient(180deg, #ffffff 0%, #ffe58a 45%, #d4a62a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.35));
}

.sqq-cuenta__label {
    display: block;
    margin-top: 10px;
    font-size: clamp(0.7rem, 1.4vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #c9b36b;
}

.sqq-cuenta__envivo {
    margin: 22px auto 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffd700;
    text-align: center;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.5);
}

.sqq-cuenta__envivo[hidden] {
    display: none;
}

/* =====================================================
   ¿NO SABES TU FOLIO? — enlace de ayuda bajo la barra del folio
===================================================== */
.sqq-recuperar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    max-width: 760px;
    margin: 16px auto 0;
    padding: 0 10px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #e6d9b0;
    text-align: center;
}

.sqq-recuperar__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(37, 211, 102, 0.75);
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.12);
    color: #7dffb0 !important;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sqq-recuperar__btn:hover,
.sqq-recuperar__btn:focus-visible {
    background: #25d366;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(37, 211, 102, 0.5);
}

.sqq-recuperar__btn:focus-visible {
    outline: 2px solid #ffd700;
    outline-offset: 3px;
}

/* Con un folio ya activo la ayuda sobra */
.sqq-vip.is-activo .sqq-recuperar {
    display: none;
}

@media (max-width: 768px) {
    .sqq-cuenta__inner {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    .sqq-cuenta__reloj {
        gap: 8px;
    }

    .sqq-cuenta__caja {
        padding: 14px 2px 12px;
        border-radius: 12px;
    }

    .sqq-cuenta__num {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
    }

    .sqq-cuenta__label {
        margin-top: 6px;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .sqq-recuperar {
        flex-direction: column;
        font-size: 0.88rem;
    }

    .sqq-recuperar__btn {
        white-space: normal;
    }
}

/* =====================================================
   RULETA UNIFICADA: folio -> carrusel 3D -> figura -> número
   (todo en la portada; /canje ya no muestra la cuadrícula plana)
===================================================== */

/* Botón de juego oculto sin boletos validados (lo muestra main.js) */
#sorteo .loteria-coverflow-cta[hidden] {
    display: none !important;
}

/* Sin el botón, el carrusel cierra la sección con un margen limpio */
#sorteo .loteria-coverflow {
    margin-bottom: 10px;
}

#sorteo:not(.is-unlocked) > .section-inner {
    padding-bottom: 50px !important;
}

/* Botón central — folio válido: rojo vibrante con pulso */
#sorteo .loteria-coverflow-elegir.is-listo {
    background: linear-gradient(180deg, #ff3b3b 0%, #d10000 55%, #9a0000 100%) !important;
    border: 2px solid #ffd700 !important;
    color: #fff !important;
    animation: sqq-elegir-pulso 1.6s ease-in-out infinite;
}

#sorteo .loteria-coverflow-elegir.is-listo:hover,
#sorteo .loteria-coverflow-elegir.is-listo:focus-visible {
    animation: none;
    filter: brightness(1.1);
    transform: translateY(-2px);
}

@keyframes sqq-elegir-pulso {
    0%, 100% { box-shadow: 0 5px 0 #5c0000, 0 0 14px rgba(255, 40, 40, 0.45); }
    50%      { box-shadow: 0 5px 0 #5c0000, 0 0 30px rgba(255, 60, 60, 0.9), 0 0 46px rgba(255, 215, 0, 0.35); }
}

/* Barra dorada: enlace al Boleto Digital cuando ya se asignaron todos los boletos */
.sqq-folio-bar__boleto {
    display: inline-block;
    margin: 8px 0 2px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #1a1200;
    color: #ffd700 !important;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none !important;
}

.sqq-folio-bar__boleto:hover {
    background: #000;
}

/* Paso 2: el modal de números se despliega con una entrada suave */
#sqq-modal-overlay.is-visible .sqq-modal {
    animation: sqq-paso2-entrada 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#sqq-modal-overlay.is-visible .sqq-modal-boletos-grid {
    animation: sqq-paso2-desplegar 0.45s ease 0.08s both;
    transform-origin: top center;
}

@keyframes sqq-paso2-entrada {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes sqq-paso2-desplegar {
    from { opacity: 0; transform: scaleY(0.85); }
    to   { opacity: 1; transform: none; }
}

/* Indicador de pasos dentro del modal */
.sqq-pasos-juego {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    background: rgba(212, 175, 55, 0.05);
}

.sqq-pasos-juego__paso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #bdb393;
}

.sqq-pasos-juego__paso strong {
    color: #ffd700;
}

.sqq-pasos-juego__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #d4af37;
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffd700;
}

.sqq-pasos-juego__paso.is-hecho .sqq-pasos-juego__num {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.sqq-pasos-juego__paso.is-actual {
    color: #fff3cf;
}

.sqq-pasos-juego__paso.is-actual .sqq-pasos-juego__num {
    background: linear-gradient(180deg, #ffe27a, #d4af37);
    color: #140e00;
}

.sqq-pasos-juego__leyenda {
    display: flex;
    gap: 12px;
    width: 100%;
    margin: 2px 0 0;
    font-size: 0.72rem;
    color: #a89968;
}

.sqq-pasos-juego__leyenda span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: -1px;
}

.sqq-pasos-juego__leyenda .is-libre::before   { border: 1px solid rgba(212, 175, 55, 0.5); background: rgba(255, 255, 255, 0.04); }
.sqq-pasos-juego__leyenda .is-ocupado::before { background: #3a3a3a; opacity: 0.6; }
.sqq-pasos-juego__leyenda .is-tuyo::before    { background: #25d366; }

/* Números ya registrados por este mismo folio: "Tuyo" (verde, sin tachar) */
#sqq-modal-overlay .sqq-boleto-btn.is-mio,
#sqq-modal-overlay .sqq-boleto-btn.is-mio[disabled] {
    opacity: 1 !important;
    border-color: #25d366 !important;
    background: rgba(37, 211, 102, 0.18) !important;
    color: #9dffc4 !important;
    text-decoration: none !important;
    cursor: default;
}

@media (max-width: 768px) {
    .sqq-pasos-juego {
        padding: 8px 10px;
    }

    .sqq-pasos-juego__paso {
        font-size: 0.72rem;
    }
}

/* =====================================================
   CANJE MULTI-FOLIO (barra del folio en #seccion-ruleta)
   Varias filas Folio + Vendedor y datos del comprador una sola vez.
===================================================== */
.sqq-canje__comprar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin: 0 0 20px;
    color: #e6d9b0;
    font-size: 0.95rem;
    text-align: center;
}

.sqq-canje__comprar .sqq-vip__comprar {
    height: 48px !important;
    font-size: 0.95rem !important;
}

.sqq-canje__titulo {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d4af37;
}

.sqq-canje__filas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sqq-canje__fila {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1fr) 40px;
    gap: 10px;
    align-items: center;
}

.sqq-canje__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe27a, #d4af37);
    color: #140e00;
    font-weight: 800;
}

/* Campos del formulario: más compactos que el antiguo campo único */
.sqq-canje .sqq-candado__input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-align: left;
    flex: none;
}

.sqq-canje .sqq-canje__folio {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#sqq-canje-vendedor {
    color: #f5ecd0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sqq-canje .sqq-candado__input[hidden] {
    display: none;
}

.sqq-canje__quitar {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 127, 110, 0.6);
    border-radius: 50%;
    background: transparent;
    color: #ff7f6e;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.sqq-canje__quitar[hidden] {
    visibility: hidden;
    display: inline-block;
}

.sqq-canje__error {
    grid-column: 2 / -1;
    margin: -2px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ff7f6e;
}

.sqq-canje__error[hidden] {
    display: none;
}

/* Campos con error: borde rojo coral (los válidos no se tocan) */
.sqq-canje .sqq-candado__input.is-invalido {
    border-color: #ff7f6e !important;
    box-shadow: 0 0 0 3px rgba(255, 127, 110, 0.18) !important;
}

.sqq-canje__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 12px 0 22px;
}

.sqq-canje__agregar {
    padding: 10px 16px;
    border: 1px dashed rgba(212, 175, 55, 0.8);
    border-radius: 10px;
    background: transparent;
    color: #ffd700;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sqq-canje__agregar:hover:not([disabled]) {
    background: rgba(212, 175, 55, 0.12);
}

.sqq-canje__agregar[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sqq-canje__datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.sqq-canje__dato {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9b36b;
}

.sqq-canje__dato .sqq-canje__error {
    text-transform: none;
    letter-spacing: 0;
}

.sqq-canje .sqq-canje__enviar {
    display: block;
    width: 100%;
    height: 60px;
}

.sqq-canje.is-bloqueado {
    opacity: 0.55;
    pointer-events: none;
}

/* =====================================================
   PANEL "TUS SELECCIONES (x/N)" debajo del carrusel
===================================================== */
.sqq-selecciones {
    max-width: 650px;
    margin: 0 auto;
    padding: 16px 20px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 12px;
    background: rgba(15, 15, 15, 0.85);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    color: #f5ecd0;
    box-sizing: border-box;
}

.sqq-selecciones[hidden] {
    display: none;
}

.sqq-selecciones__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.sqq-selecciones__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd700;
}

.sqq-selecciones__azar {
    padding: 9px 14px;
    border: 1px solid rgba(212, 175, 55, 0.7);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
    color: #f3dc8a;
    font-weight: 700;
    cursor: pointer;
}

.sqq-selecciones__azar:hover:not([disabled]) {
    background: rgba(212, 175, 55, 0.2);
    color: #ffd700;
}

.sqq-selecciones__azar[hidden],
.sqq-selecciones__enviar[hidden] {
    display: none;
}

.sqq-selecciones__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sqq-selecciones__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    font-weight: 700;
}

.sqq-selecciones__item.is-guardada {
    border-color: rgba(37, 211, 102, 0.6);
    background: rgba(37, 211, 102, 0.08);
}

.sqq-selecciones__item.is-guardada::after {
    content: '✓ registrada';
    font-size: 0.75rem;
    font-weight: 700;
    color: #7dffb0;
}

.sqq-selecciones__vacio {
    padding: 10px 2px;
    font-size: 0.9rem;
    color: #bdb393;
}

.sqq-selecciones__quitar {
    border: 0;
    background: none;
    color: #ff7f6e;
    font-size: 1rem;
    cursor: pointer;
}

.sqq-selecciones__enviar {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    border: 2px solid #ffd700;
    border-radius: 12px;
    background: linear-gradient(180deg, #ff3b3b 0%, #c40000 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
}

@media (max-width: 768px) {
    .sqq-canje__fila {
        grid-template-columns: 30px minmax(0, 1fr) 36px;
    }

    .sqq-canje__datos {
        grid-template-columns: minmax(0, 1fr);
    }

    .sqq-canje__acciones {
        flex-direction: column;
        align-items: stretch;
    }

    .sqq-canje__agregar {
        width: 100%;
    }

    .sqq-selecciones {
        margin-left: 8px;
        margin-right: 8px;
        padding: 14px 16px;
    }
}

/* =====================================================
   MODO CANJE: encabezado oculto + banner de progreso tipo HUD
===================================================== */

/* Con un folio activo se ocultan "Elige tu carta" y "Gira la ruleta..." */
.ruleta-encabezado-oculto {
    display: none !important;
}

/* La barra ya no se queda fija encima de las cartas: va en su lugar, centrada */
#sqq-vip.is-activo {
    position: relative !important;
    top: auto !important;
    margin: 22px auto 0 !important;
}

#sqq-vip.is-activo .sqq-vip__inner {
    display: flex;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Banner de progreso: cápsula oscura translúcida con borde dorado sutil */
#sqq-vip .sqq-folio-bar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    margin: 0 auto 35px auto;
    padding: 10px 28px;
    border: 1px solid #d4af37;
    border-radius: 50px;
    background: rgba(18, 18, 18, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 175, 55, 0.2);
    color: #f5d77f;
    text-align: center;
    box-sizing: border-box;
}

#sqq-vip .sqq-folio-bar[hidden] {
    display: none !important;
}

#sqq-folio-bar-texto {
    display: block;
    color: #f5d77f;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#sqq-vip .sqq-folio-bar__cambiar {
    display: block;
    margin: 3px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: #aaa;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-transform: none;
    cursor: pointer;
}

#sqq-vip .sqq-folio-bar__cambiar:hover {
    color: #f5d77f;
}

#sqq-vip .sqq-folio-bar .sqq-folio-bar__boleto {
    margin: 8px 0 2px;
    background: linear-gradient(180deg, #ffe27a, #d4af37);
    color: #140e00 !important;
}

/* El carrusel arranca despejado debajo del banner */
#sorteo.is-unlocked > .section-inner {
    padding-top: 10px !important;
}

/* Botón rojo con aire antes del panel de selecciones */
#sorteo .loteria-coverflow-elegir {
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    #sqq-vip .sqq-folio-bar {
        max-width: 94%;
        padding: 9px 18px;
        border-radius: 28px;
    }

    #sqq-folio-bar-texto {
        font-size: 13px;
        letter-spacing: 1px;
    }
}

/* =====================================================
   CANJE EN MODAL: barra de acciones + ventana emergente
===================================================== */

/* La barra ya no es un panel: solo dos botones centrados (o el banner de progreso) */
#sqq-vip .sqq-vip__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.sqq-canje-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 18px;
    margin: 0 auto 30px;
}

#sqq-vip.is-activo .sqq-canje-acciones {
    display: none;
}

.btn-canje-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 0 34px;
    border: 1px solid #ffd700;
    border-radius: 30px;
    background: linear-gradient(180deg, #ffe27a 0%, #d4a62a 100%);
    color: #1a1200;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

.btn-canje-trigger:hover,
.btn-canje-trigger:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-canje-trigger:focus-visible {
    outline: 2px solid #fff3cf;
    outline-offset: 3px;
}

.sqq-canje-acciones .sqq-vip__comprar {
    min-height: 58px;
    height: auto !important;
    border-radius: 30px !important;
    font-size: 1rem !important;
}

/* Ventana emergente */
.modal-canje-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal-canje-contenido {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: auto; /* centrado vertical sin cortar la parte de arriba cuando el formulario es alto */
    padding: 30px 25px;
    background: #0f0f0f;
    border: 1px solid #d4af37;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    color: #f5ecd0;
    box-sizing: border-box;
    animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.modal-cerrar-btn {
    position: absolute;
    top: 15px;
    right: 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: #d4af37;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.modal-cerrar-btn:hover,
.modal-cerrar-btn:focus-visible {
    color: #ffd700;
}

.modal-canje-titulo {
    margin: 0 36px 8px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
    color: #ffd700;
}

.modal-canje-guia {
    margin: 0 auto 22px !important;
    font-size: 0.98rem !important;
}

.modal-canje-contenido .sqq-recuperar {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
}

/* Textos de ayuda de los campos: más pequeños para que "Código de Vendedor" quepa completo */
.sqq-canje .sqq-candado__input::placeholder {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

/* Con el modal abierto la página de fondo no se desplaza */
body.sqq-modal-canje-abierto {
    overflow: hidden;
}

@media (max-width: 768px) {
    .modal-canje-overlay {
        padding: 12px;
        align-items: flex-start;
    }

    .modal-canje-contenido {
        padding: 26px 16px 20px;
    }

    .btn-canje-trigger,
    .sqq-canje-acciones .sqq-vip__comprar {
        width: 100%;
        padding: 0 18px;
        font-size: 1rem;
    }

    .sqq-canje-acciones {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 420px;
    }
}

/* ==========================================================================
   Boleto físico: un solo Código de Vendedor arriba; cada fila lleva solo el Folio Seguro
   ========================================================================== */
#sqq-canje .sqq-canje__vendedor-campo {
    max-width: 340px;
    margin: 0 0 22px;
}

#sqq-canje .sqq-canje__fila {
    grid-template-columns: 34px minmax(0, 1fr) 40px;
    grid-template-areas:
        "num folio quitar"
        ".   error error";
}

#sqq-canje .sqq-canje__num { grid-area: num; }
#sqq-canje .sqq-canje__folio { grid-area: folio; }
#sqq-canje .sqq-canje__quitar { grid-area: quitar; }
#sqq-canje .sqq-canje__error { grid-area: error; }

@media (max-width: 768px) {
    #sqq-canje .sqq-canje__fila {
        grid-template-columns: 30px minmax(0, 1fr) 36px;
        gap: 8px;
    }

    #sqq-canje .sqq-canje__vendedor-campo {
        max-width: none;
    }
}

/* ==========================================================================
   Modal de canje en 2 pasos: 1) ¿Dónde adquiriste tu boleto?  2) Formulario
   ========================================================================== */
.sqq-canje-tipo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 520px;
    margin: 10px auto 26px;
}

.sqq-canje-tipo[hidden],
#sqq-candado[hidden] {
    display: none !important;
}

.sqq-canje-tipo__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 150px;
    padding: 24px 14px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 16px;
    background: linear-gradient(160deg, #1c1608 0%, #0b0905 60%, #16110a 100%);
    color: #f3dc8a;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 230, 150, 0.18), 0 10px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.sqq-canje-tipo__card:hover,
.sqq-canje-tipo__card:focus-visible {
    transform: translateY(-3px);
    border-color: #ffd700;
    color: #fff6d6;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.35), 0 14px 28px rgba(0, 0, 0, 0.6);
    outline: none;
}

.sqq-canje-tipo__icono {
    font-size: 2.4rem;
    line-height: 1;
}

/* El paso 1 muestra solo el título y las dos tarjetas. */
#modal-canje-folios.is-paso-tipo .sqq-recuperar {
    display: none;
}

/* Entrada suave de cada paso */
.sqq-canje-tipo.is-entrando,
#sqq-candado.is-entrando {
    animation: sqqPasoEntrar 0.35s ease both;
}

@keyframes sqqPasoEntrar {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sqq-canje-tipo.is-entrando,
    #sqq-candado.is-entrando {
        animation: none;
    }
}

/* Cabecera del paso 2: "← Cambiar" + tipo elegido */
.sqq-canje__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.sqq-canje__cambiar {
    padding: 4px 0;
    border: 0;
    background: none;
    color: #c9b36b;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(201, 179, 107, 0.4);
    text-underline-offset: 3px;
}

.sqq-canje__cambiar:hover,
.sqq-canje__cambiar:focus-visible {
    color: #ffe58a;
}

.sqq-canje__tipo-actual {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d4af37;
}

/* Vista "Compra en Línea": solo el Folio Seguro, a todo lo ancho. */
#sqq-canje.is-tipo-linea .sqq-canje__fila {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "folio"
        "error";
}

#sqq-canje.is-tipo-linea .sqq-canje__titulo,
#sqq-canje.is-tipo-linea .sqq-canje__num,
#sqq-canje.is-tipo-linea .sqq-canje__vendedor-campo,
#sqq-canje.is-tipo-linea .sqq-canje__quitar,
#sqq-canje.is-tipo-linea .sqq-canje__acciones,
#sqq-canje.is-tipo-linea .sqq-canje__dato--nombre,
#sqq-canje.is-tipo-linea .sqq-canje__dato--correo,
#sqq-canje.is-tipo-linea:not(.is-verificar) .sqq-canje__datos {
    display: none !important;
}

#sqq-canje.is-tipo-linea .sqq-canje__folio {
    grid-area: folio;
}

#sqq-canje.is-tipo-linea .sqq-canje__error {
    grid-area: error;
}

#sqq-canje.is-tipo-linea .sqq-canje__datos {
    grid-template-columns: minmax(0, 1fr);
}

#sqq-canje.is-tipo-linea .sqq-canje__filas {
    margin-bottom: 18px;
}

@media (max-width: 480px) {
    .sqq-canje-tipo {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sqq-canje-tipo__card {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 0;
        padding: 18px 20px;
        text-align: left;
    }

    .sqq-canje-tipo__icono {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   Selector de números 000-999: rangos de 100 + buscador
   ========================================================================== */
.sqq-rangos-wrap {
    margin: 0 0 14px;
}

.sqq-buscar-num {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 12px;
    padding: 10px 14px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 10px;
    background: #0b0905;
    color: #f5ecd0;
    font: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-align: center;
}

.sqq-buscar-num::placeholder {
    color: #8f8466;
    letter-spacing: 0;
}

.sqq-rangos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.sqq-rango-btn {
    padding: 6px 10px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 999px;
    background: transparent;
    color: #c9b36b;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.sqq-rango-btn:hover,
.sqq-rango-btn:focus-visible {
    border-color: #ffd700;
    color: #ffe58a;
}

.sqq-rango-btn.is-activo {
    border-color: #ffd700;
    background: linear-gradient(180deg, #ffe27a, #d4af37);
    color: #140e00;
}

@media (max-width: 560px) {
    /* En celular los rangos van en una sola fila deslizable. */
    .sqq-rangos {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sqq-rango-btn {
        flex: 0 0 auto;
    }
}

.sqq-modal-boletos-grid .sqq-boleto-btn[hidden] {
    display: none !important;
}

.sqq-modal-boletos-grid .sqq-boleto-btn {
    font-variant-numeric: tabular-nums;
}

.sqq-boleto-btn.is-buscado {
    animation: sqqBuscado 1.4s ease 2;
}

@keyframes sqqBuscado {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px #ffd700, 0 0 18px rgba(255, 215, 0, 0.7); }
}

/* ==========================================================================
   Venta Flash: carta en oferta, banner con temporizador y modal de compra
   ========================================================================== */
.loteria-card.is-flash .carta-img {
    animation: sqqFlashBrillo 1.6s ease-in-out infinite;
}

@keyframes sqqFlashBrillo {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 90, 0, 0.65)) drop-shadow(0 0 14px rgba(255, 200, 0, 0.35)); }
    50% { filter: drop-shadow(0 0 16px rgba(255, 90, 0, 0.95)) drop-shadow(0 0 32px rgba(255, 200, 0, 0.6)); }
}

/* Capas de la carta en oferta (las crea initVentaFlash en main.js).
   Llevan !important porque la regla general ".card-3d img" fuerza
   width/height 100%, sombra y radio en TODA imagen dentro de la carta. */
.loteria-card.is-flash .carta-img {
    position: relative;
    z-index: 1;
}

/* Llamas ancladas a la base de la carta */
.loteria-card .sqq-flash-fuego {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2; /* sobre la ilustración */
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 0 14px 14px !important; /* sigue las esquinas de la carta */
    box-shadow: none !important;
    pointer-events: none;
    user-select: none;
    transform-origin: bottom center;
    animation: sqqArder 0.6s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* Las llamas "respiran" desde la base: crecen, se encogen y parpadean */
@keyframes sqqArder {
    0% {
        transform: scaleY(0.95) scaleX(0.98);
        opacity: 0.85;
        filter: brightness(0.9);
    }
    100% {
        transform: scaleY(1.05) scaleX(1.02);
        opacity: 1;
        filter: brightness(1.1);
    }
}

/* Tira diagonal "50% DESCUENTO" cruzada al centro */
.loteria-card .sqq-flash-pincel {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3; /* sobre las llamas */
    width: 82% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) rotate(-10deg);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
    pointer-events: none;
    user-select: none;
}

.sqq-flash-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 650px;
    margin: 0 auto 26px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 120, 0, 0.75);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(70, 16, 0, 0.94), rgba(15, 10, 4, 0.96));
    box-shadow: 0 0 24px rgba(255, 90, 0, 0.35);
    color: #ffe9c2;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sqq-flash-banner:hover,
.sqq-flash-banner:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0 34px rgba(255, 110, 0, 0.6);
    outline: none;
}

.sqq-flash-banner[hidden],
.sqq-flash-modal[hidden] {
    display: none !important;
}

.sqq-flash-banner__texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
}

.sqq-flash-banner__titulo {
    color: #ffd27a;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.sqq-flash-banner__timer {
    font-size: 0.85rem;
}

.sqq-flash-banner__timer b,
.sqq-flash-modal__timer b {
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.sqq-flash-modal__comprar {
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffe27a, #d4af37);
    color: #140e00;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}

.sqq-flash-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.8);
}

.sqq-flash-modal__caja {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 26px 22px 22px;
    border: 1px solid rgba(255, 120, 0, 0.7);
    border-radius: 18px;
    background: linear-gradient(160deg, #1c1208 0%, #0b0905 60%, #160d06 100%);
    box-shadow: 0 0 30px rgba(255, 90, 0, 0.3), 0 30px 80px rgba(0, 0, 0, 0.8);
    color: #f5ecd0;
    text-align: center;
    animation: sqqPasoEntrar 0.3s ease both;
}

.sqq-flash-modal__cerrar {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    color: #c9b36b;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.sqq-flash-modal__kicker {
    margin: 0 0 10px;
    color: #ff8a3d;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.sqq-flash-modal__img {
    display: block;
    width: 120px;
    margin: 0 auto 10px;
    border-radius: 10px;
    filter: drop-shadow(0 0 14px rgba(255, 90, 0, 0.7));
}

.sqq-flash-modal__titulo {
    margin: 0 0 6px;
    color: #ffd27a;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sqq-flash-modal__precio {
    margin: 0 0 6px;
}

.sqq-flash-modal__precio s {
    color: #8f8466;
}

.sqq-flash-modal__precio strong {
    color: #fff;
    font-size: 1.6rem;
}

.sqq-flash-modal__timer {
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.sqq-flash-modal__cantidad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sqq-flash-modal__cantidad button {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 10px;
    background: #0b0905;
    color: #ffd700;
    font-size: 1.3rem;
    cursor: pointer;
}

.sqq-flash-modal__cantidad input {
    width: 70px;
    height: 40px;
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 10px;
    background: #0b0905;
    color: #f5ecd0;
    font: inherit;
    font-size: 1.1rem;
    text-align: center;
}

.sqq-flash-modal__total {
    margin: 0 0 14px;
}

.sqq-flash-modal__comprar {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

.sqq-flash-modal__comprar[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.sqq-flash-modal__nota {
    margin: 10px 0 0;
    color: #a89968;
    font-size: 0.8rem;
}

.sqq-flash-modal__error {
    margin: 8px 0 0;
    color: #ff8f7e;
    font-size: 0.88rem;
}

@media (max-width: 560px) {
    .sqq-flash-banner {
        margin-left: 8px;
        margin-right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loteria-card.is-flash .carta-img,
    .loteria-card .sqq-flash-fuego,
    .sqq-boleto-btn.is-buscado {
        animation: none;
    }

    .sqq-flash-banner {
        transition: none;
    }
}

/* Venta Flash fuera de la portada (/comprar-boletos) */
.sqq-flash-mount .sqq-flash-banner {
    margin-top: 24px;
}

/* ==========================================================================
   Aviso "ANTES DE CONTINUAR" (+18 y zona permitida) — inc/requisitos-compra.php
   ========================================================================== */
.sqq-req {
    position: fixed;
    inset: 0;
    z-index: 100000; /* encima del modal de Venta Flash */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(4px);
}

.sqq-req[hidden] {
    display: none !important;
}

.sqq-req__caja {
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px 20px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 18px;
    background: linear-gradient(160deg, #1a1408 0%, #0a0805 60%, #151006 100%);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.18), 0 30px 80px rgba(0, 0, 0, 0.85);
    color: #f5ecd0;
    text-align: center;
    animation: sqqPasoEntrar 0.3s ease both;
}

.sqq-req__titulo {
    margin: 0 0 14px;
    color: #ffd700;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.sqq-req .aviso-zona {
    margin: 0 0 10px;
    font-size: 0.98rem;
    line-height: 1.45;
}

.sqq-req .aviso-zona strong {
    color: #ffd700;
}

.sqq-req .aviso-confirmacion {
    margin: 0;
    color: #bfb38d;
    font-size: 0.82rem;
    line-height: 1.4;
}

.sqq-req__aceptar {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #ffd700;
    border-radius: 12px;
    background: linear-gradient(180deg, #ff3a3a 0%, #b30000 100%);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 22px rgba(255, 0, 0, 0.35);
    cursor: pointer;
}

.sqq-req__aceptar:hover,
.sqq-req__aceptar:focus-visible {
    filter: brightness(1.1);
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

.sqq-req__cancelar {
    display: inline-block;
    margin: 8px auto 0;
    padding: 6px 14px;
    border: 0;
    background: none;
    color: #a89968;
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.sqq-req__cancelar:hover,
.sqq-req__cancelar:focus-visible {
    color: #f5ecd0;
}