/*
 * ==========================================================
 * INSTITUTE — HOME
 * Migrado desde custom_css_js — I7.20
 * Estilos exclusivos y activos de la portada pública.
 * ==========================================================
 */

section.home-sections-swiper {
    margin-top: 100px;
    padding: 50px 15px;
    backdrop-filter: blur(
        var(--theme-blur-override, 12px)
    ) !important;
    border-radius: var(--theme-card-radius-override, 20px);
    box-shadow: var(--theme-card-shadow-override, 0 8px 32px rgba(143, 143, 143, 0.4)) !important;

}

section.home-sections-swiper .section-title {
    font-size: 32px !important;
    font-weight: bold !important;
    color: var(--theme-text, #ffffff) !important;
}

section.home-sections-swiper .section-hint {
    font-size: 18px !important;
    color: color-mix(in srgb, var(--theme-text, #ffffff) 70%, transparent) !important;
    margin-top: 10px !important;
}

.testimonials-user-avatar img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 3px solid var(--theme-accent) !important;
}

.testimonials-swiper-pagination .swiper-pagination-bullet {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 60%, transparent) !important;
    opacity: 1 !important;
}

.testimonials-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--theme-accent) !important;
}

.cursos-disponibles-btn {
    transition: all 0.3s ease;
    background-color: color-mix(in srgb, var(--theme-accent, #b20000) 58%, transparent) !important;
    padding: 10px 25px;
    font-weight: 400;
    font-size: 14px;
}

.cursos-disponibles-btn:hover {
    transform: scale(1.08);
    background-color: var(--theme-accent-strong, #880707) !important;
    color: var(--theme-accent-contrast, #fff);
    box-shadow: 0 8px 16px rgba(var(--theme-accent-rgb,178,0,0),0.4);
}

.home-video-mask {

background-color: #000;
border: none;
}

/*
 * Hero sobre imagen: texto local de alto contraste.
 * No depende del esquema global Light / Dark.
 */
.slider-container .slider-content .slide-hint {
    color: #ffffff !important;
}

.slider-container .slider-content .slider-search {
    border-radius: 38px;
    box-shadow: var(--theme-card-shadow-override, 0 6px 12px 0 rgba(0,0,0,.1));
    display: none !important;
}

.slider-container .slider-content .slider-search {
    border-radius: var(--theme-control-radius-override, 8px);
}

/*
 * ==========================================================
 * INSTITUTE — HOME TESTIMONIALS I7.38
 * Tarjeta de testimonios exclusiva de Home.
 * Migrada literalmente desde custom_css_js.
 * ==========================================================
 */

.testimonials-card {
    background: var(
        --theme-glass-surface-light-override,
        rgba(255, 255, 255, 0.07)
    ) !important;
    backdrop-filter: blur(
        var(--theme-blur-override, 15px)
    ) !important;
    border-radius: var(--theme-card-radius-override, 15px) !important;
    padding: 30px 20px !important;
    box-shadow: var(--theme-card-shadow-override, 0 6px 20px rgba(255, 255, 255, 0.1)) !important;
    color: var(--theme-text, #ffffff) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.testimonials-card:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(var(--theme-accent-rgb,178,0,0),0.3) !important;
}

.testimonials-card h4 {
    margin-top: 20px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: var(--theme-text, #ffffff) !important;
}

.testimonials-card span.text-gray {
    font-size: 14px !important;
    color: color-mix(in srgb, var(--theme-text, #ffffff) 70%, transparent) !important;
}

.testimonials-card p {
    margin-top: 25px !important;
    font-size: 16px !important;
    color: color-mix(in srgb, var(--theme-text, #ffffff) 85%, transparent) !important;
    text-align: justify !important;
}

/*
 * ==========================================================
 * INSTITUTE — HOME GRADIENT BOXES I7.45A
 * Decoraciones exclusivas de Home.
 * Migradas literalmente desde custom_css_js.
 * ==========================================================
 */

.subscribes-container .left-gradient-box {
    display: none;
}

.gradient-box {
     display: none;
}


/* =========================================================
 * Theme Center — Home visible surfaces V1
 * Institutional + presencial/digital
 * ========================================================= */

/*
 * El fallback reproduce Institute actual.
 * color-mix permite que la misma intención visual siga
 * theme-accent sin crear tokens específicos de Home.
 */
.home-institutional-intro .home-institutional-card {
    background: light-dark(
        color-mix(
            in srgb,
            color-mix(
                in srgb,
                var(--theme-content-surface, #ffffff) 92%,
                var(--theme-accent, #b20000) 8%
            ) 82%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 4.4%,
            transparent
        )
    );

    border: var(--theme-card-border-width-override, 1px) solid
        light-dark(
            color-mix(
                in srgb,
                var(--theme-text, #2b171d) 16%,
                transparent
            ),
            var(--theme-border-soft, rgba(255,255,255,.08))
        );
}


/*
 * Colores semánticos Light / Dark.
 *
 * Mantiene la estructura visual histórica pero elimina la
 * dependencia de texto, bordes e iconos siempre blancos.
 */

.home-institutional-intro h2,
.home-institutional-intro .home-institutional-card .text-white {
    color: var(--theme-text, #f5f1f2) !important;
}

.home-institutional-intro .home-institutional-copy,
.home-institutional-intro .home-institutional-card .text-gray {
    color: var(--theme-text-muted, #bdaeb3) !important;
}

.home-institutional-intro .home-institutional-divider {
    border-color: var(
        --theme-border-soft,
        rgba(255,255,255,.08)
    ) !important;
}

.home-institutional-intro .home-institutional-icon {
    border: 1px solid light-dark(
        color-mix(
            in srgb,
            var(--theme-text, #2b171d) 18%,
            transparent
        ),
        var(--theme-border, #443139)
    ) !important;

    background: light-dark(
        color-mix(
            in srgb,
            var(--theme-text, #2b171d) 5%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-text, #f5f1f2) 3.5%,
            transparent
        )
    ) !important;
}

.home-institutional-intro .home-institutional-icon svg {
    color: var(--theme-text, #f5f1f2) !important;
    stroke: var(--theme-text, #f5f1f2) !important;
}


/* Formación presencial: superficie estructural neutra */
.home-structure .home-structure-card--neutral {
    background: var(--theme-glass-surface-light-override, rgba(255,255,255,.02));
    background: light-dark(
        color-mix(
            in srgb,
            var(--theme-content-surface, #ffffff) 82%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-text, #f4f5f7) 2%,
            transparent
        )
    );

    border: var(--theme-card-border-width-override, 1px) solid var(--theme-border-soft, rgba(255,255,255,.05));
    border-color: light-dark(
        color-mix(
            in srgb,
            var(--theme-text, #2b171d) 16%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-text, #f4f5f7) 5%,
            transparent
        )
    );

    margin-right: 15px;
}


/* Formación digital: variante con identidad de acento */
.home-structure .home-structure-card--accent {
    background: color-mix(in srgb, var(--theme-accent, #b20000) 9%, transparent);
    background: light-dark(
        color-mix(
            in srgb,
            color-mix(
                in srgb,
                var(--theme-content-surface, #ffffff) 92%,
                var(--theme-accent, #b20000) 8%
            ) 84%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-accent, #b20000) 4.4%,
            transparent
        )
    );

    border: var(--theme-card-border-width-override, 1px) solid var(--theme-border-soft, rgba(255,255,255,.06));
    border-color: light-dark(
        color-mix(
            in srgb,
            var(--theme-text, #2b171d) 16%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--theme-text, #f4f5f7) 6%,
            transparent
        )
    );

    margin-left: 15px;
}

/*
 * ==========================================================
 * HOME — FORMACIÓN PRESENCIAL / DIGITAL
 * Contrato cromático Light / Dark
 * ==========================================================
 */

/* CTAs: sustituyen los blancos legacy inline por texto del tema */
.home-structure
.home-structure-card > .d-flex > a {
    color: color-mix(
        in srgb,
        var(--theme-text, #f4f5f7) 72%,
        transparent
    ) !important;

    border-color: color-mix(
        in srgb,
        var(--theme-text, #f4f5f7) 14%,
        transparent
    ) !important;
}

/* El CTA presencial históricamente es transparente */
.home-structure
.home-structure-card--neutral > .d-flex > a {
    background: transparent !important;
}

/* El CTA digital conserva su leve superficie */
.home-structure
.home-structure-card--accent > .d-flex > a {
    background: color-mix(
        in srgb,
        var(--theme-text, #f4f5f7) 3%,
        transparent
    ) !important;
}

.home-structure
.home-structure-card > .d-flex > a:hover,
.home-structure
.home-structure-card > .d-flex > a:focus {
    color: var(--theme-text, #f4f5f7) !important;

    border-color: color-mix(
        in srgb,
        var(--theme-text, #f4f5f7) 30%,
        transparent
    ) !important;
}

/* Separadores internos: mismo contraste relativo en Light y Dark */
.home-structure
.home-structure-card > .mb-25.pb-15 {
    border-bottom-color: color-mix(
        in srgb,
        var(--theme-text, #f4f5f7) 20%,
        transparent
    ) !important;
}

/*
 * La lista es contenido principal, no metadata.
 * Debe seguir theme-text y no quedar blanca en temas claros.
 */
.home-structure
.home-structure-card ul.text-gray,
.home-structure
.home-structure-card ul.text-gray > li {
    color: var(--theme-text, #f4f5f7) !important;
}

/*
 * ==========================================================
 * HOME STRUCTURE — MOBILE CARD ALIGNMENT
 * ==========================================================
 * En desktop ambas tarjetas conservan su separación interna.
 * Al apilarse bajo lg, eliminamos los márgenes laterales
 * asimétricos para que compartan exactamente el mismo eje.
 * ==========================================================
 */
@media (max-width: 991.98px) {

    .home-structure
    .home-structure-card--neutral {
        margin-right: 0 !important;
    }

    .home-structure
    .home-structure-card--accent {
        margin-left: 0 !important;
    }
}

/*
 * ==========================================================
 * HOME FEATURED — MOBILE COURSE CARD WIDTH
 * ==========================================================
 * Una tarjeta principal por slide, pero con una huella
 * horizontal más contenida en móvil.
 * Desktop no cambia.
 * ==========================================================
 */
@media (max-width: 767.98px) {

    .featuredCoursesSwiper
    .swiper-slide
    > .webinar-card {
        width: 100% !important;
        max-width: 330px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/*
 * ==========================================================
 * HOME FEATURED — MOBILE SLIDE WIDTH
 * ==========================================================
 * La card conserva max-width: 330px.
 * Reducimos únicamente el espacio estructural del slide
 * para evitar huecos excesivos entre tarjetas.
 * ==========================================================
 */
@media (max-width: 767.98px) {

    .featuredCoursesSwiper
    .swiper-slide {
        width: 340px !important;
    }
}

/*
 * ==========================================================
 * HOME — LIGHT BACKGROUND TEXT WEIGHT
 * ==========================================================
 * Refuerza únicamente textos que descansan directamente
 * sobre el fondo fotográfico de Home.
 *
 * Dark:
 *   títulos 500
 *   secundarios 400
 *
 * Light:
 *   títulos 600
 *   secundarios 500
 *
 * No afecta cards ni superficies con contenedor propio.
 * ==========================================================
 */

/* Títulos principales directamente sobre el fondo */
.home-institutional-intro h2,
.home-structure > .container > .text-center h2,
.home-featured > .container > .text-center h2 {
    font-weight: calc(
        500 + (100 * var(--theme-is-light, 0))
    ) !important;
}

/* Textos secundarios directamente sobre el fondo */
.home-institutional-intro p,
.home-structure > .container > .text-center p,
.home-featured > .container > .text-center p {
    font-weight: calc(
        500 + (100 * var(--theme-is-light, 0))
    ) !important;
}