/*
|--------------------------------------------------------------------------
| Banner reutilizable de página
|--------------------------------------------------------------------------
*/

.page-banner {
    position: relative;

    min-height: 340px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-color: #f7f4f7;

    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.96) 22%,
            rgba(255, 255, 255, 0.88) 42%,
            rgba(255, 255, 255, 0.62) 60%,
            rgba(255, 255, 255, 0.28) 78%,
            rgba(255, 255, 255, 0.08) 100%
        ),
        var(--page-banner-bg, none);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

.page-banner .container {
    position: relative;
    z-index: 1;
}

.page-banner-title {
    max-width: 24ch;

    margin: 0;

    color: #15233c;

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
}


/*
|--------------------------------------------------------------------------
| Variante Consejos
|--------------------------------------------------------------------------
|
| Conserva exactamente la composición visual que tenía Consejos antes de
| centralizar el componente.
|
*/

.page-banner--consejos {
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 25%,
            rgba(255, 255, 255, 0.80) 45%,
            rgba(255, 255, 255, 0.45) 65%,
            rgba(255, 255, 255, 0.12) 100%
        ),
        var(--page-banner-bg, none);
}

.page-banner--consejos .page-banner-title {
    max-width: 22ch;
}


/*
|--------------------------------------------------------------------------
| Laptop / Tablet horizontal
| 992px - 1199px
|--------------------------------------------------------------------------
*/

@media (min-width: 992px) and (max-width: 1199.98px) {

    .page-banner {
        min-height: 290px;
    }

    .page-banner-title {
        font-size: 2.25rem;
    }

    .page-banner--consejos {
        min-height: 340px;
    }

    .page-banner--consejos .page-banner-title {
        font-size: clamp(2rem, 3vw, 3rem);
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .page-banner {
        min-height: 270px;

        background-image:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(255, 255, 255, 0.82) 55%,
                rgba(255, 255, 255, 0.35) 100%
            ),
            var(--page-banner-bg, none);
    }

    .page-banner-title {
        font-size: 2rem;
    }

    .page-banner--consejos {
        min-height: 290px;
    }

    .page-banner--consejos .page-banner-title {
        font-size: 2.1rem;
    }

}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .page-banner {
        min-height: 240px;

        text-align: center;

        background-image:
            linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.97) 0%,
                rgba(255, 255, 255, 0.88) 65%,
                rgba(255, 255, 255, 0.55) 100%
            ),
            var(--page-banner-bg, none);

        background-position: center;
    }

    .page-banner-title {
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        font-size: 1.7rem;
    }

    .page-banner--consejos {
        background-image:
            linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(255, 255, 255, 0.84) 60%,
                rgba(255, 255, 255, 0.45) 100%
            ),
            var(--page-banner-bg, none);
    }

}


/*
|--------------------------------------------------------------------------
| Móviles pequeños
|--------------------------------------------------------------------------
*/

@media (max-width: 575.98px) {

    .page-banner {
        min-height: 220px;
    }

    .page-banner-title {
        font-size: 1.5rem;
    }

}


/*
|--------------------------------------------------------------------------
| Pantallas muy angostas
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {

    .page-banner {
        min-height: 210px;
    }

    .page-banner-title {
        font-size: 1.35rem;
    }

    .page-banner--consejos {
        min-height: 220px;
    }

    .page-banner--consejos .page-banner-title {
        font-size: 1.5rem;
    }

}