/*
 * Tema noviembre 2026 · AIG "Aprovecha el mejor fin"
 * Se carga desde html/head.php solo del 13 al 18 de noviembre de 2026 (Buen Fin).
 * Reemplaza las imágenes del hero (01.webp / 02.webp) por los materiales
 * de la guía Buen Fin y acomoda el texto a la derecha del escudo en desktop.
 * Para quitar el tema basta con borrar el bloque en head.php.
 */

/* ---------- Hero index (.main-image) ---------- */
.main-image,
.main-image::before {
    background-image: url("../img/nov-hero-m.webp") !important;
    background-color: #011231 !important;
    background-position: center top !important;
    background-size: cover !important;
}

/* oscurece un poco en móvil para que el texto se lea sobre el auto */
@media (max-width: 767.98px) {
    .main-image {
        background-image: linear-gradient(rgba(1, 18, 49, .55), rgba(1, 18, 49, .55)), url("../img/nov-hero-m.webp") !important;
    }
}

@media (min-width: 768px) {
    .main-image,
    .main-image::before {
        background-image: url("../img/nov-hero.webp") !important;
        background-position: 20% center !important;
    }
}

/* Desktop: el texto y las tarjetas van a la derecha, fuera del escudo */
@media (min-width: 992px) {
    .main-image .row.order-sm-1 > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .main-image .row.order-sm-1 h1 {
        text-align: left;
        text-shadow: 0 2px 12px rgba(1, 18, 49, .6);
    }

    .main-image .bloque-cards {
        justify-content: flex-start;
        gap: 1.5rem;
    }
}

/* ---------- Hero beneficios / gracias (.main-image-b) ---------- */
.main-image-b,
.main-image-b::before {
    /* velo oscuro para que el texto blanco se lea sobre la luz del piso */
    background-image: linear-gradient(rgba(1, 18, 49, .55), rgba(1, 18, 49, .55)), url("../img/nov-hero-2.webp") !important;
    background-color: #011231 !important;
}

/* Laptops chicas / tablet horizontal: recorre el auto a la izquierda */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-image,
    .main-image::before {
        background-position: 0% center !important;
    }
}