/* =====================================================================
   page-bonos.css — Tema "Sorteo Mundialista" (Selección Argentina)
   Se carga SOLO en bonos.php (body.page-bonos). No afecta otras páginas.
   Mismo lenguaje visual que flyer.html: celeste → navy, dorado, rayas.
   ===================================================================== */

body.page-bonos {
    --m-celeste:    #75B8E8;
    --m-celeste-d:  #3E84BE;
    --m-celeste-dp: #235d8f;
    --m-navy:       #0B2545;
    --m-oro:        #F4C13C;
    --m-oro-d:      #D99E1E;

    min-height: 100vh;
    color: #fff;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,.06) 0 60px,
            rgba(255,255,255,0)  60px 120px),
        linear-gradient(168deg, #8ccaf2 0%, #5aa0d4 40%, #2f74ad 78%, #1f5582 100%);
    background-repeat: no-repeat;
}

/* ---------- Nav: glass navy con acento dorado ---------- */
body.page-bonos .edv-nav {
    background: rgba(11,37,69,.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(244,193,60,.45);
}
body.page-bonos .edv-brand,
body.page-bonos .edv-brand .brand-name { color: #fff; }
body.page-bonos .edv-brand .brand-sub  { color: var(--m-oro); }
body.page-bonos .edv-burger { color: #fff; }

/* ---------- Botones (scopeados) ---------- */
body.page-bonos .btn-edv {
    background: linear-gradient(90deg, var(--m-oro-d), var(--m-oro));
    color: var(--m-navy);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
body.page-bonos .btn-edv:hover {
    background: linear-gradient(90deg, #c98f12, var(--m-oro-d));
    color: var(--m-navy);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
body.page-bonos .btn-edv:focus { outline: 3px solid rgba(244,193,60,.5); }
body.page-bonos .btn-outline-edv {
    border: 2px solid rgba(255,255,255,.7);
    color: #fff;
    background: rgba(255,255,255,.08);
}
body.page-bonos .btn-outline-edv:hover {
    background: #fff; color: var(--m-navy); border-color: #fff;
}

/* =====================================================================
   HERO + ARMADOR
   ===================================================================== */
body.page-bonos .bonos-hero {
    background: transparent;
    color: #fff;
    padding-top: 1.8rem;
}

/* Kicker "★★★ Sorteo Mundialista" */
body.page-bonos .bonos-kicker {
    display: inline-block;
    background: linear-gradient(90deg, var(--m-oro-d), var(--m-oro));
    color: var(--m-navy);
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .82rem;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0,0,0,.3);
    margin-bottom: .7rem;
}
body.page-bonos .bonos-kicker .stars { color: #fff; letter-spacing: .15em; margin-right: .3rem; }

body.page-bonos .bonos-hero-title {
    color: #fff;
    font-weight: 900;
    text-shadow: 0 3px 0 var(--m-celeste-dp), 0 8px 24px rgba(0,0,0,.4);
}
/* Dorado SÓLIDO: anulamos el relleno transparente del gradiente (style.css)
   y le damos su propia sombra dorada para que no herede la azul del título. */
body.page-bonos .bonos-hero-title .fire {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--m-oro);
    -webkit-text-fill-color: var(--m-oro);

}
body.page-bonos .bonos-hero-sub { color: #eaf4fc; }
body.page-bonos .bonos-hero-sub strong { color: #fff; }

/* Inputs del armador: tarjeta blanca, dígitos navy, borde dorado */
body.page-bonos .numero-pick-label { color: #fff; }
body.page-bonos .numero-pick-input {
    background: #fff;
    border: 2px solid var(--m-oro);
    color: var(--m-navy);
}
body.page-bonos .numero-pick-input::placeholder { color: rgba(11,37,69,.3); }
body.page-bonos .numero-pick-input:focus {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(244,193,60,.45);
}
body.page-bonos .numero-pick-plus { color: var(--m-oro); }

body.page-bonos .hero-armar-azar { color: #eaf4fc; }
body.page-bonos .hero-armar-azar:hover { color: var(--m-oro); }
body.page-bonos .hero-armar-hint { color: #dceaf6; }
body.page-bonos .hero-armar-hint strong { color: var(--m-oro); }

/* =====================================================================
   SECCIONES (premios / auspiciantes) — transparentes sobre el degradé
   ===================================================================== */
body.page-bonos .bonos-premios-section,
body.page-bonos .bonos-auspiciantes-section {
    background: transparent;
    border-top: none;
}
body.page-bonos .bonos-mini-title {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* Slides de premios: tarjeta blanca con badge dorado */
body.page-bonos .premio-slide {
    background: #fff;
    border: 3px solid rgba(255,255,255,.85);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
body.page-bonos .premio-slide:hover {
    border-color: var(--m-oro);
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
body.page-bonos .premio-slide-badge {
    background: linear-gradient(135deg, var(--m-oro-d), var(--m-oro));
    color: var(--m-navy);
    box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
body.page-bonos .premio-slide-media { background: #fff; }
body.page-bonos .premio-slide-name { color: var(--m-navy); }
body.page-bonos .premio-slide-more { color: var(--m-celeste-dp); }
/* Carrusel centrado cuando entra; si desborda (móvil) cae a inicio sin recortar */
body.page-bonos .premios-carrusel {
    justify-content: safe center;
    scrollbar-color: var(--m-oro) transparent;
}
body.page-bonos .premios-carrusel::-webkit-scrollbar-thumb { background: var(--m-oro); }

/* Marquee de auspiciantes: logos circulares SIN recuadro, más grandes.
   Los logos ya son circulares y con fondo transparente. */
body.page-bonos .marquee-item span { color: #eaf4fc; font-weight: 700; }
body.page-bonos .marquee-item img {
    height: 86px;
    max-width: 160px;
    background: none;
    border-radius: 50%;
    padding: 0;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.3));
}
@media (max-width: 540px) {
    body.page-bonos .marquee-item img { height: 68px; }
}

/* =====================================================================
   RESULTADOS: bono perfecto, grilla, ayuda
   ===================================================================== */
body.page-bonos .sugerencias-header h3 { color: #fff; }

/* Bono perfecto re-teñido a celeste/dorado */
body.page-bonos .bono-perfecto-card {
    background: linear-gradient(135deg, rgba(255,255,255,.96), #eaf4fc);
    border: 3px solid var(--m-oro);
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
body.page-bonos .bono-perfecto-flag {
    background: var(--m-celeste-dp);
    color: #fff;
}
body.page-bonos .bono-perfecto-num {
    border: 3px solid var(--m-celeste-d);
    color: var(--m-navy);
    box-shadow: 0 6px 16px rgba(35,93,143,.25);
}
body.page-bonos .bono-perfecto-sep { color: var(--m-celeste-d); }
body.page-bonos .bono-perfecto-prize { color: var(--m-navy); }
body.page-bonos .bono-perfecto-prize strong { color: var(--m-celeste-dp); }
body.page-bonos .bono-perfecto-precio { color: var(--m-navy); }
body.page-bonos .bono-perfecto-foot { border-top-color: rgba(35,93,143,.25); }
body.page-bonos .bono-perfecto-foot small { color: #5a6b80; }

/* Tarjetas de bono (sugerencias) */
body.page-bonos .bono-card-2 {
    background: #fff;
    border-color: rgba(255,255,255,.85);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
body.page-bonos .bono-card-2::before {
    background: linear-gradient(90deg, var(--m-oro-d), var(--m-oro));
}
body.page-bonos .bono-card-2:hover { border-color: var(--m-oro); }
body.page-bonos .bono-num-big {
    background: linear-gradient(135deg, #eaf4fc, #d7e8f6);
    color: var(--m-navy);
    border: 1px solid rgba(35,93,143,.2);
}
body.page-bonos .bono-card-foot .bono-price { color: var(--m-navy); font-weight: 800; }
body.page-bonos .bono-card-foot .bono-cta   { color: var(--m-celeste-dp); font-weight: 800; }

/* Bloque de ayuda */
body.page-bonos .bonos-help {
    color: #eaf4fc;
    background: rgba(11,37,69,.28);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
body.page-bonos .bonos-help strong { color: var(--m-oro); }

/* Avisos: mantener legibles sobre el fondo */
body.page-bonos .bonos-aviso { color: var(--m-navy); }

/* =====================================================================
   COACHMARK: ayuda única que apunta al input N°1
   ===================================================================== */
body.page-bonos .coach {
    position: fixed;
    top: 0; left: 0;
    z-index: 2000;
    width: 260px;
    max-width: calc(100vw - 20px);
    background: #fff;
    color: var(--m-navy);
    border: 2px solid var(--m-oro);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
body.page-bonos .coach.show { opacity: 1; transform: none; pointer-events: auto; }
body.page-bonos .coach-text { font-size: 1rem; font-weight: 600; line-height: 1.35; }
body.page-bonos .coach-text b { color: var(--m-celeste-dp); }
body.page-bonos .coach-arrow {
    position: absolute;
    width: 18px; height: 18px;
    background: #fff;
    border-left: 2px solid var(--m-oro);
    border-top: 2px solid var(--m-oro);
    transform: rotate(45deg);          /* punta hacia arriba (globo debajo del input) */
}
body.page-bonos .coach-arrow.down { transform: rotate(225deg); } /* punta hacia abajo */
body.page-bonos .coach-btn {
    margin-top: 11px;
    width: 100%;
    border: 0;
    cursor: pointer;
    background: linear-gradient(90deg, var(--m-oro-d), var(--m-oro));
    color: var(--m-navy);
    font-weight: 800;
    font-size: .95rem;
    padding: 9px 14px;
    border-radius: 999px;
}
body.page-bonos .coach-btn:hover { filter: brightness(1.05); }

/* Resaltado pulsante del input mientras la ayuda está visible */
body.page-bonos .numero-pick-input.coach-target {
    border-color: var(--m-oro);
    animation: coachPulse 1.4s ease-in-out infinite;
}
@keyframes coachPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(244,193,60,.5); }
    50%      { box-shadow: 0 0 0 10px rgba(244,193,60,.15); }
}

/* =====================================================================
   AJUSTES SOLO DESKTOP (≥769px). En móvil el menú es un panel BLANCO,
   así que ahí los links siguen oscuros (no se tocan).
   ===================================================================== */
@media (min-width: 769px) {
    /* Menú: texto claro sobre el nav navy (excepto el botón "Comprar") */
    body.page-bonos .edv-menu a:not(.btn-edv) { color: #eaf4fc; }
    body.page-bonos .edv-menu a:not(.btn-edv):hover,
    body.page-bonos .edv-menu a.active:not(.btn-edv) { color: #fff; }
    body.page-bonos .edv-menu a.active::after { background: var(--m-oro); }

    /* Auspiciantes: en desktop entran todos → fila centrada, sin scroll.
       Ocultamos la copia duplicada (aria-hidden) y frenamos la animación. */
    body.page-bonos .marquee {
        overflow: visible;
        -webkit-mask-image: none;
                mask-image: none;
    }
    body.page-bonos .marquee-track {
        width: 100%;
        animation: none;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.6rem;
    }
    body.page-bonos .marquee-item[aria-hidden="true"] { display: none; }
    body.page-bonos .marquee-item { margin-right: 0; }
}