:root {
    --bg:           #121920;
    --bg-card:      #1a2330;
    --bg-oscuro:    #0d1520;
    --negro:        #292833;
    --dorado:       #feb916;
    --dorado-claro: #ffd35a;
    --dorado-oscuro:#c9950a;
    --naranja:      #FF8C00;
    --rojo:         #CC0000;
    --blanco:       #fff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--blanco); font-family: 'Montserrat', sans-serif; overflow-x: hidden; }

/* ── HERO ─────────────────────────────────────── */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
}

img#heroHome {
    width: 100%;
    display: block;
}

.hero-cta-link {
    display: block;
    width: 100%;
    cursor: pointer;
    transition: filter .2s;
}
.hero-cta-link:hover,
.hero-cta-link:focus-visible { filter: brightness(1.06); }

.hero > div { position: relative; z-index: 1; }
.hero-badge {
    display: inline-block;
    background: var(--rojo);
    color: var(--blanco);
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem; letter-spacing: 3px; text-transform: uppercase;
    padding: 6px 20px; border-radius: 4px; margin-bottom: 20px;
}
.hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3.2rem, 9vw, 8rem);
    font-weight: 700; line-height: 1; text-transform: uppercase;
}
.hero h1 .super   { color: var(--dorado); font-size: .55em; display: block; letter-spacing: 6px; }
.hero h1 .cesta   { color: var(--blanco); }
.hero h1 .de      { color: #bbb; font-size: .3em; display: block; font-family: 'Montserrat', sans-serif; font-weight: 300; letter-spacing: 6px; }
.hero h1 .navidad { color: var(--dorado); }
.hero-sub  { color: #ccc; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; margin-top: 28px; }
.hero-precio {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3.5rem, 11vw, 9rem);
    font-weight: 700; color: var(--dorado); line-height: 1;
    text-shadow: 0 0 50px rgba(254,185,22,.4);
}
.hero-gordo { color: #bbb; font-size: .9rem; margin-top: 10px; text-transform: uppercase; letter-spacing: 1px; }
.hero-nota  { color: #888; font-size: .8rem; margin-top: 6px; }
.hero-cta {
    display: inline-block; margin-top: 32px;
    background: var(--dorado); color: var(--negro);
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase;
    padding: 14px 40px; border-radius: 50px; text-decoration: none;
    transition: all .2s; border: none; cursor: pointer;
}
.hero-cta:hover { background: var(--dorado-claro); transform: translateY(-2px); color: var(--negro); }

/* ── BANNER AVISO SORTEO (debajo del hero) ────── */
.banner-aviso-sorteo {
    background: #000000;
    color: var(--dorado);
    text-align: center;
    text-transform: uppercase;
    padding: 15px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .5px;
}
@media (max-width: 600px) {
    .banner-aviso-sorteo {
        padding: 6px 20px;
        font-size: 7px;
    }
}

/* ── FOTOS PREMIOS / PANORAMA ARRASTRABLE ─────── */
.fotos-premios {
    background: var(--bg-oscuro);
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    padding: 48px 24px;
}
.panorama-wrap {
    width: min(100%, 1000px);
    margin: 0 auto;
}
.panorama-viewer {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #111;
    cursor: grab;
    touch-action: pan-y;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.panorama-viewer.dragging { cursor: grabbing; }
.panorama-track {
    display: flex;
    will-change: transform;
    user-select: none;
}
.panorama-track img {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: min(70vh, 560px);
    max-width: none;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}
p.btnGroup-caption {
    color: black;
}
.pano-hint {
    margin-top: 12px;
    text-align: center;
    color: #666;
    font-size: .8rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}
/* Panorámica full-width: contenedor a máx. 1920px, 100% en responsive */
.fotos-premios-full {
    background: var(--bg-oscuro);
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    padding: 0;
}
.panorama-viewer--full {
    width: min(100%, 1920px);
    margin: 0 auto;
    border-radius: 0;
}
/* Altura fija; el ancho sigue la proporción real de la imagen, así el recorrido
   lateral depende de lo ancha que sea la foto (más ancha = más scroll) */
.panorama-viewer--full .panorama-track img {
    height: min(70vh, 560px);
    width: auto;
    max-width: none;
}
/* Texto de ayuda superpuesto dentro de la foto */
.pano-hint--overlay {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9);
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 768px) {
    .fotos-premios { padding: 32px 16px; }
    .panorama-track img { height: min(55vh, 420px); }
    /* En móvil el marco es estrecho: con altura fija ya sobra ancho y queda más alta */
    .panorama-viewer--full .panorama-track img { height: min(55vh, 460px); width: auto; }
}

/* ── PRODUCTOS ────────────────────────────────── */
/* Contenedor "premios + tiempo": un único fondo compartido para ambas secciones */
.premios-tiempo {
    background: url(../Images/fondo-premios.webp) center / cover no-repeat var(--bg-card);
}
.productos {
    background: transparent;
    padding: 64px 64px 0px 64px;
    text-align: center;
}
.tag-solo {
    display: inline-block;
    background: var(--dorado); color: var(--negro);
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    padding: 4px 18px; border-radius: 4px; font-size: 1.1rem; margin-bottom: 12px;
}
.productos h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem); color: var(--blanco); margin-bottom: 36px;
}
.productos h2 span { color: var(--dorado); }
/* La imagen "Por sólo 6€..." no tenía ningún ancho responsive: no encogía con la página. */
.productos .container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.prod-scroll-wrap {
    position: relative;
    max-width: 1100px;
    margin: 40px auto 20px;
    padding: 0 40px 20px;
}
.prod-swiper { width: 100%; overflow: hidden; }
/* Autoplay continuo (ver cesta-navidad.js): Swiper solo fija la duración de la
   transición, no su curva, así que por defecto queda en "ease" (acelera/frena en
   cada tarjeta). Forzamos "linear" para que el desplazamiento se note uniforme,
   como un carrusel en movimiento constante en vez de "salto a salto". */
.prod-swiper .swiper-wrapper { transition-timing-function: linear !important; }
.prod-card {
    position: relative;
    border-radius: 10px;
    padding: 4px;
    text-align: center;
    transition: transform .2s;
    cursor: grab;
}
.prod-card:hover { transform: translateY(-4px); }
.prod-img {
    position: relative;
    width: 100%; height: clamp(110px, 12vw, 160px);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-radius: 12px;
}
    .prod-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border: 1px solid var(--dorado);
        border-radius: 12px;
        padding: 1px;
    }
.prod-tooltip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    transform: translateY(100%);
    background: rgba(20,20,20,.92);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 6px 8px;
    border-top: 1px solid var(--dorado);
    transition: transform .2s ease;
    z-index: 5;
}
.prod-card:hover .prod-tooltip,
.prod-card:focus-within .prod-tooltip {
    transform: translateY(0);
}

/* ── LIGHTBOX PREMIOS (foto grande al pulsar un slide) ─────────── */
.prem-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.85);
}
.prem-lightbox.is-open { display: flex; }
.prem-lightbox-dialog {
    position: relative;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.prem-lightbox-img {
    max-width: 92vw;
    max-height: 78vh;
    object-fit: contain;
    background: #fff;
    border: 2px solid var(--dorado);
    border-radius: 12px;
}
.prem-lightbox-cap {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    max-width: 92vw;
}
.prem-lightbox-close {
    position: fixed;
    top: 18px; right: 18px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--dorado);
    color: var(--negro);
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    transition: background .2s;
}
.prem-lightbox-close:hover { background: #fff; }
.prod-nav-prev,
.prod-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white !important;
    --swiper-navigation-size: 22px;
    z-index: 10;
}
.prod-nav-prev { left: 4px; }
.prod-nav-next { right: 4px; }
@media (max-width: 768px) {
    /* Full-bleed: en móvil el slider aprovecha todo el ancho de pantalla, sin el
       padding lateral del bloque, y las tarjetas de los extremos quedan cortadas para
       invitar a deslizar con el dedo (ver slidesPerView fraccionario en cesta-navidad.js). */
    .productos { padding: 40px 0 0; }
    .prod-scroll-wrap {
        max-width: 100%;
        margin: 24px 0 16px;
        padding: 0 0 20px;
    }
    /* Tarjetas más juntas */
    .prod-card { padding: 1px; }
    /* Las flechas ya no hacen falta: el propio recorte invita a deslizar con el dedo.
       !important porque el CSS de Swiper (swiper-bundle.min.css) se carga DESPUÉS del
       nuestro en <head> y su .swiper-button-prev/-next también pone display, empatando
       en especificidad con .prod-nav-prev/-next y ganando por ir después en el cascade. */
    .prod-nav-prev, .prod-nav-next { display: none !important; }
}
.btn-ver-lista {
    margin-top: 28px;
    background: var(--dorado);
    border: 3px solid white;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    padding: 15px 15px;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 0px;
    cursor: pointer;
    transition: all .2s;
    font-weight: 800;
}
.btn-ver-lista:hover { background: var(--dorado); color: var(--negro); }
button.btn-ver-lista i {
    margin-left: 10px;
}
.fondoTop {
    background-image: url(../Images/fondo-top.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
section.productos h4 {
    color: var(--dorado);
    font-size: 1.2em;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
}
/* ── COUNTDOWN ────────────────────────────────── */
.cd-section {
    background: transparent;
    padding: 64px 0;
    text-align: center;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    .cd-section h3 {
        font-family: 'Montserrat', sans-serif;
        font-size: 2rem;
        letter-spacing: 0px;
        text-transform: uppercase;
        color: #ffffff;
        margin-bottom: 36px;
        font-weight: 500;
    }
.cd-wrap {
    display: flex; justify-content: center;
    align-items: flex-start; gap: clamp(6px, 2vw, 16px); flex-wrap: wrap;
}
.cd-group { text-align: center; }
.cd-digits { display: flex; gap: clamp(3px, 1.2vw, 6px); margin-bottom: 10px; }
.cd-dig {
    background: var(--blanco);
    color: var(--negro);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 5.5vw, 4.5rem);
    width: clamp(26px, 9vw, 70px);
    height: clamp(34px, 11vw, 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: unset;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.cd-lbl {
    /* En pantallas muy estrechas, "segundos" (la más larga) es lo que de verdad obliga a
       saltar de línea si no encoge también: sin esto, el resto de ajustes no bastarían. */
    font-size: clamp(.62rem, 3vw, 1.3rem);
    letter-spacing: 0px;
    color: white;
    display: block;
    font-style: italic;
    white-space: nowrap;
}
.cd-sep {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(1.2rem, 5.5vw, 4.5rem);
    color: var(--dorado);
    line-height: 1;
    padding-top: clamp(4px, 2vw, 18px);
    opacity: 0;
}
@media (max-width: 768px) {
    /* Ya son invisibles (opacity:0); en móvil los quitamos del todo para ganar el ancho
       que ocupaban entre grupos y ayudar a que el contador quepa en una línea. */
    .cd-sep { display: none; }
}

/* ── COMPRAR ──────────────────────────────────── */
.comprar-section {
    background: url(../Images/fondo-form.webp) center / cover no-repeat;
    padding: 56px 0;
    position: relative;
    /* background: #f5c241; */
    background: linear-gradient(to bottom, #F5C241, #E2A013);
}
.comprar-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(254,185,22,.08);
    pointer-events: none;
}
.comprar-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 0.75fr 1fr; /* imagen del hombre más estrecha → formulario más centrado */
    gap: 24px;
    align-items: start; /* imagen anclada arriba: si el formulario crece, no se mueve */
    position: relative;
    z-index: 1;
    justify-content: center;
    padding-bottom: 30px;
}
.comprar-left {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
@media (max-width: 768px) { .comprar-wrap { grid-template-columns: 1fr; } }
/* Venta cerrada: mensaje que sustituye al formulario a partir de la fecha de cierre. */
.venta-cerrada {
    position: relative;
    z-index: 1;
    max-width: 1060px;
    margin: 0 auto;
    padding: 48px 24px;
    text-align: center;
}
.venta-cerrada h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--negro);
    font-size: clamp(1.6rem, 5vw, 2.8rem);
    margin: 0;
}
p.venta-cerrada-detalle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #555;
    font-size: 30px;
    margin: 12px 0 0;
}
@media (max-width: 768px) {
    p.venta-cerrada-detalle { font-size: 22px; }
}
@media (max-width: 480px) {
    p.venta-cerrada-detalle { font-size: 17px; }
}

/* Páginas sin foto del hombre (contacto, login, mi espacio) — un único
   bloque centrado; la foto queda reservada solo al proceso de compra. */
.comprar-wrap.sin-foto { grid-template-columns: 1fr; max-width: 640px; }
.badge-precio-img {
    max-width: 340px;
    width: 100%;
    display: block;
    margin: 0 auto;
}
.personaje-wrap {
    width: 200px; height: 280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.personaje-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.triangulo-form {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 60px; background: url('../Images/triangulo-form.png') center bottom/cover no-repeat;
    pointer-events: none;
}
.picoAmarilloBgTrasparente {
    position: relative;
}
.picoNegroBgTrasparente {
    position: relative;
}
.picoAmarilloBgTrasparente::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 45px solid #f5c241;
    z-index: 9;
    top: -35px;
}
.picoNegroBgTrasparente::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 45px solid black;
    z-index: 9;
    top: -35px;
}
.comprar-right h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 4.5vw, 3.2rem);
    color: var(--negro);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 8px;
    text-align: center;
    text-wrap: balance;
}
/* En móvil, la imagen del "hombre" se sustituye por la del precio (más compacta) y va
   apilada encima del título de la sección activa (selección, aleatorio, manual o
   registro) — todo en una sola columna, como el resto del contenido (ver el <picture>
   en Index.cshtml que hace el cambio de imagen según el ancho de pantalla). */
@media (max-width: 768px) {
    .badge-precio-img {
        max-width: 220px;
        margin: 0 auto 18px;
    }
    .comprar-right h2 {
        font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    }
    .panel-seleccion p {
        font-size: 1.2rem;
    }
}
.fecha-cd {
    font-weight: 700;
    font-size: 24px;
}
.panel-seleccion p {
    color: #444;
    margin-bottom: 24px;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 600;
}
.btn-seleccion { display: flex; gap: 12px; margin-bottom: 22px; }
.btn-alea, .btn-eleg {
    flex: 1;
    background: none;
    border: none;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: transform .15s, opacity .2s;
    display: flex;
    align-items: center;
}
.btn-alea:hover:not(:disabled), .btn-eleg:hover:not(:disabled) { transform: translateY(-2px); }
.btn-alea:disabled, .btn-eleg:disabled { opacity: .35; cursor: not-allowed; }
.btn-alea img, .btn-eleg img { width: 100%; display: block; }
.btn-alea .btn-on, .btn-eleg .btn-on { display: none; }
.btn-alea:not(:disabled):hover .btn-off,
.btn-alea.activo .btn-off { display: none; }
.btn-alea:not(:disabled):hover .btn-on,
.btn-alea.activo .btn-on  { display: block; }
.btn-eleg:not(:disabled):hover .btn-off,
.btn-eleg.activo .btn-off { display: none; }
.btn-eleg:not(:disabled):hover .btn-on,
.btn-eleg.activo .btn-on  { display: block; }
.input-elegir-wrap { margin-bottom: 18px; }
.input-num {
    width: 100%; background: var(--negro); border: 2px solid #444;
    color: var(--dorado); font-family: 'Montserrat', sans-serif;
    font-size: 1.9rem; text-align: center; letter-spacing: 14px;
    padding: 12px; border-radius: 8px; outline: none; transition: border-color .2s;
}
.input-num:focus { border-color: var(--dorado); }
.num-display { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
/* Los 5 huecos son inputs editables directamente */
.dbox {
    width: 75px;
    height: 100px;
    background: white;
    border-radius: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 4.7rem;
    font-weight: 700;
    color: #333;
    border: 2px solid #333;
    padding: 0;
    outline: none;
    caret-color: var(--dorado);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.dbox::placeholder { color: #ccc; }
.dbox:focus {
    border-color: var(--dorado);
    box-shadow: 0 0 14px rgba(254, 185, 22, .35);
}
.dbox:disabled { background: #f0f0f0; color: #999; }
@media (max-width: 480px) {
    .dbox { width: 52px; height: 70px; font-size: 3rem; }
}
.alerta-inline {
    background: rgba(0,0,0,.18); border-radius: 6px;
    padding: 7px 12px; margin-bottom: 12px;
    font-size: .88rem; color: #c00; display: none;
}
section.dudas-section {
    background: var(--dorado);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 20px;
}
@media (max-width: 768px) {
    section.dudas-section {
        flex-direction: column;
        text-align: center;
    }
}
a.btnInfo {
    background: black;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}
    section.dudas-section p {
        color: #1B1E37;
        font-size: 19px;
        font-weight: 600;
        margin: 0;
    }
.col-check {
    display: flex;
    justify-content: center;
}
.comprar-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 0;
}
.alerta-inline.ok { color: #2a7a00; }
.btn-comprar-num {
    background: var(--dorado);
    border: 3px solid white;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    padding: 15px 15px;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 0px;
    cursor: pointer;
    transition: all .2s;
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 40px;
}
button#btnConfirmarRegistro {
    margin-top: 40px !important;
    margin-bottom: 20px;
}
.c-total.btnGroup-caption {
    margin-top: 40px;
}
.btn-comprar-num-black {
    background: var(--negro);
    border: 3px solid white;
    color: var(--dorado);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    padding: 15px 15px;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 0px;
    cursor: pointer;
    transition: all .2s;
    font-weight: 800;
}
form#formContacto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.btn-comprar-num:hover:not(:disabled) { transform: translateY(-1px); }
.btn-comprar-num:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ── PANELES FADE ─────────────────────────────── */
.paneles-wrap { width: 100%; }
.paneles-inner { width: 100%; }
.panel-seleccion,
.panel-aleatorio,
.panel-carrito,
.panel-registro {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
}
.panel-carrito   { align-items: stretch; }
.panel-registro  { align-items: stretch; }

/* ── Selector de modo (radios) ────────────────── */
.sel-pregunta { color: #444; margin-bottom: 18px; font-size: 1.15rem; text-align: center; font-weight: 600; }
.modo-radios {
    display: flex; gap: 26px; justify-content: center; align-items: center;
    margin-bottom: 20px; flex-wrap: wrap;
}
.modo-radio {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
    color: var(--negro); font-size: 1.05rem; letter-spacing: .5px; user-select: none;
}
.modo-radio input { width: 22px; height: 22px; accent-color: var(--negro); cursor: pointer; }
.modo-bloque { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ── Select de cantidad (modo aleatorio) ──────── */
.sel-cantidad-wrap { width: 100%; margin-bottom: 18px; }
.sel-cantidad {
    width: 100%; background: #fff; border: none; border-radius: 40px;
    color: var(--negro); font-family: 'Montserrat', sans-serif; font-weight: 800;
    text-transform: uppercase; font-size: 1.15rem; text-align: center;
    padding: 16px 40px; cursor: pointer; outline: none; letter-spacing: .5px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d2438' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 22px center;
}

/* ── Panel revisión aleatorio ─────────────────── */
.panel-aleatorio { align-items: center; }
.ale-sub { color: #444; font-size: 1.05rem; font-weight: 600; text-align: center; margin-bottom: 12px; }
.ale-timer {
    font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--negro);
    background: rgba(255,255,255,.55); border-radius: 20px; padding: 5px 14px;
    font-size: .95rem; margin-bottom: 16px;
}
.ale-timer.urgente { color: #c00; }
/* Grid con nº de columnas fijo: como máximo esa cantidad de números por fila
   (puede haber filas con menos, la última si sobran menos de una fila completa,
   pero nunca con más). */
.ale-lista {
    display: grid;
    grid-template-columns: repeat(5, 130px);
    gap: 10px; justify-content: center;
    margin-bottom: 18px; width: 100%;
}
@media (max-width: 768px) { .ale-lista { grid-template-columns: repeat(3, 130px); } }
@media (max-width: 480px) { .ale-lista { grid-template-columns: repeat(2, 130px); } }
.ale-chip {
    background: var(--negro); color: #fff; font-family: 'Montserrat', sans-serif;
    font-weight: 800; font-size: 1.25rem; letter-spacing: 3px;
    padding: 12px 16px; border-radius: 8px; width: 100%; text-align: center;
    box-sizing: border-box;
}
.ale-total { color: var(--negro); font-weight: 800; margin-bottom: 8px; }

/* Resumen de compra compartido (manual y aleatorio): nº de números + total */
.resumen-compra {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 100%; max-width: 420px; margin: 10px auto 14px;
    padding: 12px 16px; border-radius: 10px;
    background: rgba(0,0,0,.10);
    font-family: 'Montserrat', sans-serif; color: var(--negro); font-weight: 800;
}
.resumen-count { font-size: .95rem; }
.resumen-total { font-size: 1.1rem; }

/* Fila de acciones secundarias del panel aleatorio (dos botones pequeños) */
.ale-acciones { display: flex; gap: 12px; margin-top: 12px; width: 100%; justify-content: center; flex-wrap: wrap; }
.btn-ale-sec {
    flex: 1; min-width: 150px;
    background: transparent; border: 2px solid var(--negro); color: var(--negro);
    font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: .82rem; letter-spacing: .3px; padding: 10px 12px; border-radius: 0;
    cursor: pointer; transition: all .2s;
}
.btn-ale-sec:hover { background: var(--negro); color: var(--dorado); }
/* Si va solo (revisión manual) no debe estirarse a ocupar toda la fila */
.ale-acciones:has(.btn-ale-sec:only-child) .btn-ale-sec { flex: 0 1 220px; }
/* En móvil, "Generar otros" y "Empezar de nuevo" apilados: una sola columna. */
@media (max-width: 600px) {
    .ale-acciones { flex-direction: column; }
    .ale-acciones .btn-ale-sec { width: 100%; flex: none; }
}

/* ── Modal de confirmación genérico ───────────────────── */
.cn-modal {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cn-modal[hidden] { display: none; }
.cn-modal-box {
    background: #fff; border-radius: 14px; max-width: 420px; width: 100%;
    padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.cn-modal-ico { font-size: 2.2rem; color: #e2a013; margin-bottom: 12px; }
.cn-modal-msg {
    color: #1d2438; font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: 1.02rem; line-height: 1.4; margin: 0 0 22px;
}
.cn-modal-actions { display: flex; gap: 12px; }
.cn-modal-actions .btn-comprar-num,
.cn-modal-actions .btn-comprar-num-black { flex: 1; font-size: 1rem; padding: 12px; margin: 0; }

/* ── SUBPANELES dentro de panel-registro ──────── */
.subpanel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 85%;
}
.subpanel.activo { display: flex; }
.reg-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.4rem, 5vw, 2.6rem);
    color: var(--negro);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 6px;
    text-align: center;
}
.reg-subtitulo { color: #444; font-size: .95rem; font-weight: 600; text-align: center; margin-bottom: 16px; }
.reg-resumen {
    background: rgba(0,0,0,.12);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    margin-top: 30px;
    cursor: pointer;
    user-select: none;
    transition: background .2s;
}
.reg-resumen:hover { background: rgba(0,0,0,.18); }
.reg-resumen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .88rem;
    color: var(--negro);
    font-weight: 700;
    gap: 8px;
}
.reg-resumen-header span { flex: 1; }
.reg-chevron {
    font-size: .75rem;
    color: var(--negro);
    transition: transform .25s;
    flex-shrink: 0;
}
.reg-resumen.abierto .reg-chevron { transform: rotate(180deg); }
.reg-resumen-numeros {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,.15);
}
.reg-resumen.abierto .reg-resumen-numeros { display: flex; }
.reg-num-chip {
    background: var(--negro);
    color: var(--dorado);
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 5px 10px;
    border-radius: 4px;
}
.reg-error {
    background: rgba(180,0,0,.12);
    border: 1px solid rgba(200,0,0,.25);
    color: #8b0000;
    padding: 9px 13px;
    border-radius: 6px;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: none;
}
/* Aviso informativo/correcto (verde): p.ej. "te hemos enviado un enlace de acceso". */
.reg-ok {
    background: rgba(0,140,60,.12);
    border: 1px solid rgba(0,140,60,.30);
    color: #1a7a3f;
    padding: 9px 13px;
    border-radius: 6px;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.reg-spinner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
    color: var(--negro);
    font-weight: 600;
    font-size: .9rem;
}
.reg-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: var(--negro);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    transition: opacity .2s;
}
.reg-link:hover { opacity: .65; }
.btn-reg-volver {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    color: var(--negro);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    background: transparent;
    border: 2px solid rgba(0,0,0,.3);
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all .2s;
    border-radius: 0;
}
.btn-reg-volver:hover { border-color: var(--negro); background: rgba(0,0,0,.08); }
.logueado-nombre { color: var(--negro); font-size: 1.1rem; font-weight: 600; text-align: center; margin-bottom: 16px; }
.logueado-nombre strong { font-weight: 900; }
.panel-carrito h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: var(--negro);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
/* Mismo diseño de grid que la lista aleatoria (.ale-lista): nº de columnas fijo, como
   máximo esa cantidad de números por fila (puede haber filas con menos, nunca con más). */
.carrito-lista {
    display: grid;
    grid-template-columns: repeat(3, 195px);
    gap: 10px; justify-content: center;
    width: 100%; margin-bottom: 12px;
}
@media (max-width: 768px) { .carrito-lista { grid-template-columns: repeat(2, 195px); } }
@media (max-width: 480px) { .carrito-lista { grid-template-columns: repeat(1, 195px); } }

/* Fila para añadir otro número unitario desde la revisión: textbox simple + botón pequeño */
.man-add-row {
    display: flex; gap: 8px; align-items: stretch;
    width: 100%; max-width: 320px; margin: 0 auto 14px;
}
.man-add-input {
    flex: 1; min-width: 0;
    font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700;
    letter-spacing: 2px; text-align: center;
    border: 2px solid var(--negro); border-radius: 8px;
    padding: 8px; color: var(--negro); background: #fff;
}
.man-add-input::placeholder { font-weight: 400; letter-spacing: normal; font-size: .85rem; color: #999; }
.man-add-input:focus { outline: none; border-color: var(--dorado-oscuro); }
.man-add-input:disabled { background: #f0f0f0; color: #999; }
.btn-add-otro {
    flex: 0 0 auto;
    background: var(--negro); color: var(--blanco);
    font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: .82rem; letter-spacing: .5px; padding: 0 16px; border-radius: 8px;
    border: none; cursor: pointer; transition: all .2s;
}
.btn-add-otro:hover { background: #1a1f2b; }
.btn-add-otro:disabled { opacity: .4; cursor: not-allowed; }
.c-total {
    text-align: center;
}

/* ── VER MI SELECCIÓN (desde panel selección) ─── */
div#subRegistro {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
/* Panel "¿Ya estás registrado?": mismo ancho contenido que la página de login */
div#subLoginPanel {
    width: 80%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
div#panelSeleccion {
    width: 85%;
}
.panel-carrito {
    align-items: stretch;
    width: 85%;
}
@media (max-width: 600px) {
    /* Más ancho aprovechable en móvil/tablet: el formulario pasa a una sola columna
       (ver más abajo), así que no necesita dejar tanto margen a los lados. */
    div#subRegistro,
    div#subLoginPanel,
    .panel-carrito {
        width: 94%;
    }
    div#panelSeleccion {
        width: 100%;
    }
    /* Formulario de registro a una sola columna: los .col-6 (nombre/apellidos,
       teléfono/email, fecha de nacimiento) ocupan todo el ancho para que quepan bien. */
    #subRegistro .row.g-2 > .col-6 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    /* Centrar las etiquetas y los campos del formulario, siguiendo el resto del diseño
       (muy centrado en móvil). Los textos legales quedan a la izquierda (ver abajo). */
    #subRegistro .reg-nota-acceso,
    #subRegistro .contact-label,
    #subRegistro .contact-control {
        text-align: center;
    }
    /* Textos legales (casillas de aceptación + bloque RGPD) alineados a la IZQUIERDA
       para que todos los textos queden alineados a la izquierda. */
    #subRegistro .contact-check-label,
    #subRegistro .contact-rgpd-texto {
        text-align: left;
    }
    /* La casilla de aceptación deja de centrarse como bloque: alineada a la izquierda,
       manteniendo el layout interno del checkbox (Bootstrap usa float en el input). */
    #subRegistro .form-check {
        display: block;
        margin: 0;
    }
    /* El campo de fecha se alinea a la izquierda: en iOS/iPhone el centrado descuadra
       el valor de la fecha respecto al resto de campos. */
    #subRegistro input[type="date"].contact-control {
        text-align: left;
    }
}
.btn-ver-seleccion {
    margin-top: 14px;
    background: var(--negro);
    border: 3px solid white;
    color: var(--dorado);
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 800;
    padding: 12px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .2s;
    display: none;
}
.btn-ver-seleccion:hover { background: #1a1f2b; transform: translateY(-2px); }
.panel-carrito .c-total { color: var(--negro); margin: 12px 0 10px; }
.panel-carrito .c-total span { color: var(--negro); font-weight: 700; }
.btn-comprar-mas {
    width: 100%;
    background: transparent;
    border: 2px solid var(--negro);
    color: var(--negro);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 12px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 10px;
}
.btn-comprar-mas:hover { background: var(--negro); color: var(--dorado); }

/* ── CARRITO ITEMS ────────────────────────────── */
.carrito-item {
    background: var(--negro);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    position: relative;
    /* Ancho fijo: que el contador de tiempo no haga variar el tamaño de la ficha */
    width: 195px;
    box-sizing: border-box;
}
.c-numero {
    flex: 1;                       /* el número a un lado (izquierda) */
    min-width: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    color: var(--blanco);
    letter-spacing: 2px;
    font-weight: 700;
}
.c-info {
    position: static;              /* junto al botón, a la derecha */
    flex: 0 0 auto;
    text-align: right;
}
.c-precio {
    color: #777;
    font-size: .85rem;
    display: none;
}
.c-timer {
    font-size: .72rem;
    color: var(--blanco);
    white-space: nowrap;
}
.c-timer.urgente { color: #ff4444; animation: pulsar 1s infinite; }
@keyframes pulsar { 0%,100%{opacity:1}50%{opacity:.4} }
.btn-quitar {
    background: none;
    border: 1px solid var(--blanco);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: .65rem;
    transition: all .2s;
    flex-shrink: 0;
    font-weight: bold;
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-quitar:hover { border-color: #c00; color: #c00; }
.c-total {
    text-align: right; font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem; color: var(--blanco); margin: 16px 0 20px;
}
.c-total span { color: var(--dorado); }
.btn-finalizar {
    width: 100%; background: var(--negro); color: var(--dorado);
    border: none; font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem; font-weight: 700; padding: 18px;
    border-radius: 8px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: all .2s;
}
.btn-finalizar:hover { background: #1a1f2b; transform: translateY(-2px); }

/* ── FÍSICA ───────────────────────────────────── */
.fisica-section {
    background: black;
    padding: 64px 24px;
    text-align: center;
    border-top: 1px solid rgba(254, 185, 22, .06);
}
    .fisica-section h3 {
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(1rem, 4.5vw, 3.8rem);
        color: white;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 8px;
        font-weight: 800;
    }
    .fisica-section h4 {
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(1.3rem, 3.5vw, 2.2rem);
        color: var(--blanco);
        margin-bottom: 5px;
        font-weight: 600;
    }

    .fisica-section p {
        color: white;
        font-size: 1.6rem;
        margin-top: 4px;
        font-weight: 500;
        margin-bottom: 5px;
    }
    .fisica-section .lugar {
        color: white;
        font-size: 1rem;
        margin-top: 4px;
        font-weight: 400;
        margin-bottom: 5px;
    }
    .como-llegar-link {
        display: inline-block;
        margin-top: 18px;
        transition: transform .2s;
    }
    .como-llegar-link:hover { transform: translateY(-2px); }
    .como-llegar-img {
        max-width: 220px;
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
/* ── FOOTER ───────────────────────────────────── */
/* ── FOOTER ───────────────────────────────────── */
.site-footer {
    background: #fff;
    color: #1c2440;
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    min-height: 200px;
}
.footer-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
}
/* La columna central (legales) ocupa el doble que las laterales */
.footer-links { flex: 2; }
.footer-logo img { max-height: 150px; width: auto; }

/* Líneas verticales divisorias (a ambos lados de la columna central) */
.footer-links {
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}
.footer-juego-seguro { max-height: 42px; width: auto; }
.footer-links-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.footer-links a {
    color: #1c2440;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: underline;
    transition: color .2s;
}
.footer-links a:hover { color: var(--dorado-oscuro); }
.footer-sep { color: #9aa0ac; }

.footer-social { flex-direction: column; gap: 14px; }
.footer-social-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: .95rem;
    color: #1c2440;
}
.footer-social-icons { display: flex; align-items: center; gap: 16px; }
.footer-social a {
    color: #1c2440;
    font-size: 1.9rem;
    line-height: 1;
    transition: color .2s;
}
.footer-social a:hover { color: var(--dorado-oscuro); }

@media (max-width: 768px) {
    .footer-inner { flex-direction: column; align-items: stretch; min-height: 0; text-align: center; }
    .footer-logo img { max-height: 120px; }
    .footer-links {
        border-left: none;
        border-right: none;
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
        justify-content: center;
    }
}

/* ── MODAL ────────────────────────────────────── */
.modal-content { background: var(--bg-card); color: var(--blanco); border: 1px solid rgba(254,185,22,.1); border-radius: 12px; }
.modal-header { border-bottom: 1px solid rgba(254,185,22,.08); padding: 20px 24px; }
.modal-header .modal-title { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; color: var(--dorado); letter-spacing: 2px; text-transform: uppercase; }
.modal-header .btn-close { filter: invert(1) opacity(.6); }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid rgba(254,185,22,.08); padding: 16px 24px; }
.resumen-modal { background: var(--bg-oscuro); border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; }
.resumen-modal p { margin: 0; color: #888; font-size: .88rem; }
.resumen-modal .resumen-total { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; color: var(--dorado); }
.form-label { color: #999; font-size: .82rem; margin-bottom: 4px; }
.form-control, .form-select {
    background: var(--bg-oscuro); border: 1px solid #2e3a4a; color: var(--blanco); border-radius: 6px;
}
.form-control::placeholder { color: #3a4a5a; }
.form-control:focus, .form-select:focus {
    background: var(--bg-card); border-color: var(--dorado);
    color: var(--blanco); box-shadow: 0 0 0 2px rgba(254,185,22,.15);
}
.form-select option { background: var(--bg-card); }
.form-check-input:checked { background-color: var(--dorado); border-color: var(--dorado); }
.pw-hints { list-style: none; padding: 0; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pw-hints li { font-size: .76rem; color: #555; }
.pw-hints li::before { content: '✗ '; color: #c00; }
.pw-hints li.ok { color: #4a8a2a; }
.pw-hints li.ok::before { content: '✓ '; color: #4a8a2a; }
.error-form {
    background: rgba(180,0,0,.15); border: 1px solid rgba(200,0,0,.25);
    color: #ff7070; padding: 10px 14px; border-radius: 6px;
    font-size: .88rem; margin-bottom: 16px; display: none;
}
.spinner-wrap { display: none; text-align: center; padding: 24px; }
.btn-confirmar {
    width: 100%; background: var(--dorado); color: var(--negro);
    border: none; font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem; font-weight: 700; padding: 15px 32px;
    border-radius: 6px; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: all .2s;
}
.btn-confirmar:hover:not(:disabled) { background: var(--dorado-claro); }
.btn-confirmar:disabled { opacity: .45; cursor: not-allowed; }

/* ── CONTACTO ─────────────────────────────────── */
.contact-section { padding: 60px 0; }
.contact-form-wrap { width: 100%; max-width: 560px; }
.contact-form-wrap h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 8vw, 3.5rem);
    color: var(--negro);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 8px;
    text-align: center;
}
.contact-form-wrap > p {
    color: #444;
    margin-bottom: 24px;
    font-size: 1.1rem;
    text-align: center;
    font-weight: 600;
}
.contact-label {
    display: block;
    color: var(--negro);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.contact-control {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--negro);
    color: var(--negro);
    border-radius: 0px;
    padding: 10px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.contact-control:focus {
    border-color: var(--negro);
    box-shadow: 0 0 0 2px rgba(0,0,0,.12);
    background: #fff;
}
.contact-control::placeholder { color: #bbb; }
textarea.contact-control { resize: vertical; min-height: 120px; }
/* Campo de fecha: iOS/Safari le aplica su propio "appearance" y lo descuadra
   (altura y alineación distintas al resto de inputs). Lo normalizamos. */
input[type="date"].contact-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    text-align: left;
}
/* En iOS el indicador del calendario se alinea a la derecha sin empujar el texto */
input[type="date"].contact-control::-webkit-calendar-picker-indicator { margin-left: auto; }
.contact-check-label { color: var(--negro); font-size: .83rem; }
.contact-link { color: var(--negro); font-weight: 700; text-decoration: underline; }
button.contact-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.contact-rgpd-texto {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    font-size: .78rem;
    line-height: 1.6;
    color: #555;
}
.contact-rgpd-texto.abierto {
    max-height: 700px;
    margin-top: 10px;
}
.contact-rgpd-texto p { margin: 0 0 10px; }
.contact-rgpd-texto p:last-child { margin-bottom: 0; }
.contact-rgpd-texto a { color: var(--negro); font-weight: 700; }
.contact-section .form-check-input:checked {
    background-color: var(--negro);
    border-color: var(--negro);
}
.contact-alerta {
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: none;
}
.contact-alerta.ok {
    background: rgba(0,100,0,.12);
    border: 1px solid rgba(0,120,0,.3);
    color: #1a5e00;
}
.contact-alerta.error {
    background: rgba(180,0,0,.12);
    border: 1px solid rgba(200,0,0,.25);
    color: #8b0000;
}
.contact-spinner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    color: var(--negro);
    font-weight: 600;
    font-size: .9rem;
}
.btn-contacto-enviar {
    margin-top: 28px;
    width: 100%;
    background: var(--negro);
    border: 3px solid white;
    color: var(--dorado);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    padding: 15px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .2s;
    font-weight: 800;
}
.btn-contacto-enviar:hover:not(:disabled) { background: #1a1f2b; transform: translateY(-2px); }
.btn-contacto-enviar:disabled { opacity: .45; cursor: not-allowed; transform: none; }
div#panelCarrito h3 {
    font-weight: 700;
    text-align: center;
    margin-top: 30px;
}
.btnGroup {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}
/* Textos centrados justo encima de cada botón del carrito */
    .btnGroup .btnGroup-caption {
        text-align: center;
        color: var(--negro);
        font-family: 'Montserrat', sans-serif;
        /* max-width: 360px; */
        margin: 26px auto 18px;
        line-height: 1.35;
    }
span#cTotal {
    font-size: 30px;
}
.btnGroup .c-total.btnGroup-caption { font-size: 1.25rem; font-weight: 700; }
.btnGroup .c-total.btnGroup-caption span { color: var(--negro); font-weight: 800; }
/* La caption ya aporta el espacio superior: se anula el del botón que la sigue */
.btnGroup .btnGroup-caption + .btn-comprar-num-black,
.btnGroup .btnGroup-caption + .btn-comprar-num { margin-top: 0; }
/* ── LOGIN COMPRADOR ─────────────────────────── */
.login-section { padding: 60px 0; }
.login-form-wrap {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}
.login-form-wrap h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 8vw, 3.5rem);
    color: var(--negro);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 8px;
    text-align: center;
}
.login-form-wrap > p {
    color: #444;
    margin-bottom: 28px;
    font-size: 1.05rem;
    text-align: center;
    font-weight: 600;
}
.login-label {
    display: block;
    color: var(--negro);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.login-input-wrap { position: relative; }
.login-input-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: .9rem;
    pointer-events: none;
}
.login-control {
    display: block;
    width: 100%;
    background: rgba(255,255,255,.9);
    border: 2px solid rgba(0,0,0,.18);
    color: var(--negro);
    border-radius: 6px;
    padding: 11px 14px 11px 38px;
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.login-control:focus {
    border-color: var(--negro);
    box-shadow: 0 0 0 2px rgba(0,0,0,.12);
    background: #fff;
}
.login-control::placeholder { color: #bbb; }
.login-section .form-check-input:checked {
    background-color: var(--negro);
    border-color: var(--negro);
}
.login-alerta {
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 18px;
    color: #292833;
    text-align: center;
}
p.reg-nota-acceso {
    color: #292833 !important;
}
.login-alerta.error {
    background: rgba(180,0,0,.12);
    border: 1px solid rgba(200,0,0,.25);
    color: #8b0000;
}
.btn-login-submit {
    width: 100%;
    background: var(--negro);
    border: 3px solid white;
    color: var(--dorado);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    padding: 15px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .2s;
    font-weight: 800;
    margin-top: 8px;
}
.btn-login-submit:hover { background: #1a1f2b; transform: translateY(-2px); }
/* Botón secundario del flujo: mismo estilo que los demás, pero negro y más pequeño,
   para que destaque menos que el botón principal amarillo. Reutilizable (login, registro…). */
.btn-flow-sec,
.login-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 9px 22px;
    font-size: .9rem;
    border-width: 2px;
    color: var(--dorado);
    text-decoration: none;
}
.btn-flow-sec:hover,
.login-back-link:hover { color: #fff; transform: translateY(-1px); }

/* "Ver mis números" bajo el formulario */
.reg-fila-sec {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    width: 100%; margin-top: 16px;
}
.reg-fila-sec .btn-flow-sec { margin: 0; flex: 1; min-width: 150px; }
@media (max-width: 600px) {
    .reg-fila-sec { flex-direction: column; }
    .reg-fila-sec .btn-flow-sec { width: 100%; flex: none; }
}
/* Línea sutil que separa "Ya he comprado antes" del formulario de registro */
.reg-separador {
    width: 100%;
    height: 1px;
    margin: 20px 0;
    background: rgba(0,0,0,.12);
}

/* Ocultamos el badge flotante de reCAPTCHA (en todos los tamaños). Google lo permite
   siempre que se muestre el aviso legal con enlaces a su Política y Términos: lo ponemos
   al pie del formulario (.recaptcha-aviso). */
.grecaptcha-badge { visibility: hidden; }

/* Aviso legal de reCAPTCHA al pie del formulario */
.recaptcha-aviso {
    max-width: 640px;
    margin: 22px auto 0;
    padding: 0 16px;
    color: #666;
    font-size: .72rem;
    line-height: 1.5;
    text-align: center;
}
.recaptcha-aviso a { color: #666; text-decoration: underline; }

/* ── MIS NÚMEROS ─────────────────────────────── */
.misnumeros-section { padding: 60px 0; }
.misnumeros-section .comprar-wrap { align-items: center; }
.mn-content { width: 100%; text-align: center; }

.mn-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 8vw, 3.5rem);
    color: var(--negro);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 14px;
}
.mn-subtitulo {
    color: #444;
    font-size: 1rem;
    font-weight: 600;
    max-width: 480px;
    margin: 6px auto 6px;
}
.mn-subtitulo strong { color: var(--negro); }
.mn-suerte {
    font-family: 'Montserrat', sans-serif;
    color: var(--negro);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

/* Números jugados: píldoras blancas en cuadrícula — máximo 4 columnas, se
   reduce según el ancho de pantalla (ver media queries más abajo). */
.mn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.mn-card {
    background: #fff;
    border-radius: 50px;
    padding: 10px 14px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.mn-ticket {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--negro);
    letter-spacing: 2px;
    display: block;
}
@media (max-width: 900px) { .mn-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .mn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .mn-grid { grid-template-columns: 1fr; } }

/* Aviso de pago pendiente */
.mn-pendiente {
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 14px 18px;
    background: #fff7e0;
    border: 1px solid #ffd35c;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    animation: mnPendienteGlow 1.8s ease-in-out infinite;
}
@keyframes mnPendienteGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, .55), 0 0 10px 0 rgba(255, 179, 0, .35); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 179, 0, 0), 0 0 22px 4px rgba(255, 179, 0, .55); }
}
.mn-pendiente span { color: #7a5b00; }
.mn-pendiente-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.mn-pendiente-chip {
    background: #fff;
    border: 1px solid #ffd35c;
    color: #7a5b00;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    padding: 3px 9px;
    border-radius: 20px;
}
.mn-pendiente-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}
.mn-continuar-pago {
    background: #1a7f37;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 9px;
    order: 2;
}
.mn-continuar-pago:hover { background: #146129; }
.mn-form-cancelar-pedido { margin: 0; order: 1; }
.mn-cancelar-pedido {
    background: var(--rojo);
    color: #fff;
    border: none;
    font-weight: 700;
    font-family: inherit;
    font-size: 1rem;
    padding: 9px 18px;
    border-radius: 9px;
    cursor: pointer;
}
.mn-cancelar-pedido:hover { background: #a30000; }

.mn-aviso {
    color: #000000;
    font-size: .86rem;
    text-align: center;
    max-width: 460px;
    margin: 0 auto 26px;
}
.mn-empty {
    text-align: center;
    padding: 30px 16px;
    color: #555;
}
.mn-empty i { font-size: 3rem; color: var(--negro); margin-bottom: 12px; display: block; }
.mn-empty p { font-size: .95rem; color: #555; margin-bottom: 8px; }

/* Botonera: principal negro + secundarios pequeños (mismo flow que el resto) */
.mn-acciones {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mn-btn-comprar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--negro);
    border: 3px solid white;
    color: var(--dorado);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    padding: 14px 30px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all .2s;
}
.mn-btn-comprar:hover { background: #1a1f2b; color: var(--dorado); transform: translateY(-1px); }
.mn-form-logout { margin: 0; }

/* ── Resultado de pago (Ok/Ko) — pantalla independiente, sin header/footer ── */
.pago-resultado-section { min-height: 100vh; display: flex; align-items: center; }
/* Más ancho que el resto de páginas "sin-foto" (Login, MisNumeros, legales...), que
   comparten esta misma clase y no deben verse afectadas. */
.pago-resultado-section .comprar-wrap.sin-foto {
    grid-template-columns: 1fr;
    max-width: 850px;
}
.pago-resultado-icono {
    display: block;
    font-size: 6rem;
    margin-bottom: 32px;
}
.pago-resultado-ok { color: #1e9e52; }
.pago-resultado-ko { color: var(--rojo); }
.pago-resultado-acciones { margin-top: 40px; }