/* Slide del banner de este sitio: pisa la banda-banner del tema para usar la foto propia y su
   encuadre. El alto (740px) lo define el tema. Se carga después del tema, así que le gana por orden.
   Breakpoint en 1200px, igual que el tema. */

/* Encuadre del banner de las internas (lo consume Interna/ViewPage.cshtml). */
body {
    --interna-hero-pos: center 90%;
}

@media only screen and (min-width: 1201px) {
    body {
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            var(--hero-img);
        background-repeat: no-repeat, no-repeat;
        background-position: center top, center -220px;
        background-size: 100% 740px, 110% auto;
    }

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 740px;
        z-index: -1;
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            url('/img/slider.jpg');
        background-position: center, center bottom;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        background-color: #162E55;
    }
}

/* Reencuadre de la foto en la franja angosta de escritorio. Va DESPUÉS del bloque de arriba
   para pisarle position y size. */
@media only screen and (min-width: 1201px) and (max-width: 1600px) {
    body::before {
        background-position: center, center -250px;
        background-size: cover, 135% auto;
    }
}

@media only screen and (max-width: 1200px) {
    .hero {
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            var(--hero-img-mobile);
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
        background-color: #162E55;
    }

    /* Inerte: en mobile nadie define content para body::before, así que no se genera. */
    body::before {
        background-image:
            linear-gradient(rgba(10, 22, 45, 0.45), rgba(10, 22, 45, 0.45)),
            var(--hero-img-mobile);
        background-position: center, center bottom;
        background-size: cover, 100% auto;
        background-repeat: no-repeat, no-repeat;
        background-color: #162E55;
    }
}