/* Banner reutilizable: respeta el margen global y conserva imagen dinámica. */
.banner {
    min-height: 320px; display: flex; flex-direction: column; justify-content: center;
    align-items: flex-start; padding-block: 48px; padding-inline: var(--page-inset); color: #fff;
    background-image: linear-gradient( 90deg, rgba(0, 25, 40, 0.94) 0%, rgba(0, 28, 44, 0.75) 42%, rgba(0, 30, 50, 0.14) 86% ), var(--banner-image);
    background-position: center, var(--banner-position, center center); background-size: cover;
    background-repeat: no-repeat;
}
.banner-contenido { position: relative; z-index: 1; }
.banner-contenido h1 {
    max-width: 680px; margin: 0 0 13px; color: #ffffff; font-size: clamp(36px, 4vw, 54px); line-height: 1.02;
}
.banner-contenido h1 span { color: #a6e0ff; }
.banner-contenido > p {
    max-width: 60%; margin: 0; color: #f3faff; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.32;
}
@media (max-width: 1024px) {
    .banner {
        min-height: fit-content;
        padding-block: 40px;
        background-position: center, 65%;
    }

    .banner-contenido h1 {
        font-size: clamp(30px, 7vw, 42px);
    }

    .banner-contenido > p {
        font-size: 16px;
        max-width: 60%
    }
}
@media (max-width: 768px) {
    .banner {
        min-height: fit-content; padding-block: 30px; background-position: center, 65%;
    }
    .banner-contenido h1 { font-size: clamp(30px, 7vw, 42px); }
    .banner-contenido > p { font-size: 13px; max-width: 60%}
}
@media (max-width: 425px) {
    .banner {
        min-height: fit-content;
        padding-block: 30px;
        background-position: center, 40%;
    }

    .banner-contenido h1 {
        font-size: clamp(30px, 7vw, 42px);
    }

    .banner-contenido > p {
        font-size: 11px;
        max-width: 65%
    }
}
@media (max-width: 375px) {
    .banner {
        min-height: fit-content;
        padding-block: 30px;
        background-position: center, 60%;
    }

    .banner-contenido h1 {
        font-size: 4ex;
    }

    .banner-contenido > p {
        font-size: 12px;
        max-width: 80%
    }
}