/*================================================
Custom Banner Styles - H1 Optimization
Estilos adicionales para la optimización SEO de banners
=================================================*/

/* H1 en Inner Banner - Sustitución del H3 original */
.inner-banner .inner-title h1 {
    font-size: 45px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Subtítulo descriptivo en banner */
.inner-banner .inner-title .banner-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 15px;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive - Tablets */
@media only screen and (max-width: 991px) {
    .inner-banner .inner-title h1 {
        font-size: 36px;
    }

    .inner-banner .inner-title .banner-subtitle {
        font-size: 15px;
        max-width: 600px;
    }
}

/* Responsive - Móviles */
@media only screen and (max-width: 767px) {
    .inner-banner .inner-title h1 {
        font-size: 28px;
    }

    .inner-banner .inner-title .banner-subtitle {
        font-size: 14px;
        max-width: 90%;
    }
}

/* Clase .h1-style para aplicar estilos de h1 a otros elementos */
.banner-slider-content .h1-style {
    margin-top: 10px;
    color: #ffffff;
    font-size: 65px;
    font-weight: 600;
    line-height: 1.2;
    display: block;
    margin-bottom: 10px;
}

/* Responsive - Tablets */
@media only screen and (max-width: 991px) {
    .banner-slider-content .h1-style {
        font-size: 45px;
    }
}

/* Responsive - Móviles */
@media only screen and (max-width: 767px) {
    .banner-slider-content .h1-style {
        font-size: 35px;
    }
}

@media only screen and (max-width: 575px) {
    .banner-slider-content .h1-style {
        font-size: 28px;
    }
}