/* ==========================================================================
   INSOR Conecta — paridad visual del Moodle (/edu) con el portal WordPress
   --------------------------------------------------------------------------
   Referencia: https://conecta.insor.gov.co/  (tema Salient + Open Sans)
   Cubre: barra GOV.CO, lockup de marca, buscador pastilla, barra de menu
   traida de WordPress y pie de pagina institucional + barra GOV.CO inferior.

   Valores tomados del CSS real de WordPress:
     body 14px/26px Open Sans 400 | h3 22/34 | h4 18/32 | h5 16/26 (peso 600)
     menu nivel 1: 14px/20px, padding 0 10px, margen vertical 20px (barra 60px)
     submenu: 12px, padding 10px 15px, fondo #25368b, borde superior naranja
   El ancho (1270px + 30px de gutter) es el de .container-fluid de mb2nl, para
   que estas bandas queden alineadas con el resto del Moodle.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
    --insor-azul: #25368b;
    --insor-azul-texto: #253786;
    --insor-naranja: #f39c12;
    --insor-borde: #d8d8d8;
    --insor-ancho: 1270px;
    --insor-font: 'Open Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.insor-container {
    width: 100%;
    max-width: var(--insor-ancho);
    margin: 0 auto;
    padding: 0 30px;
}

@media (max-width: 991px) {
    .insor-container {
        padding: 0 15px;
    }
}

/* ==========================================================================
   1. Barra superior GOV.CO
   ========================================================================== */
.insor-govco-topbar {
    width: 100%;
    background-color: var(--insor-azul);
}

.insor-govco-topbar .insor-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* En píxeles a propósito: WordPress usa 8.5rem/1.875rem con una raíz de 16px,
   pero la raíz de Moodle es de 15px y el logo saldría un 6% más pequeño. */
.insor-govco-topbar__link {
    display: block;
    width: 136px;
    height: 30px;
    background: url(img/logo-gov-co.svg) no-repeat left center;
    background-size: 136px 30px;
}

.insor-govco-topbar__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ==========================================================================
   2. Lockup de marca en el header: logo Conecta + logo institucional INSOR
   ========================================================================== */

/* Alto de la banda blanca: 72px de logo + 28px de aire arriba y abajo, que es
   el `data-padding="28"` del header de WordPress. */
#master-header .flexcols {
    height: 128px;
}

/* Al fijarse el header hay que dejarlo encoger: una barra fija de 128px se
   come demasiada pantalla (mb2nl por su cuenta baja el logo a 38px). */
#master-header.sticky-el .flexcols {
    height: 88px;
}

@media (max-width: 991px) {
    #master-header .flexcols,
    #master-header.sticky-el .flexcols {
        height: auto;
        min-height: 72px;
    }
}

#main-header .logo-wrap,
.login-header .logo-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: none;
}

/* Altura del logo de Conecta igual a la de WordPress (72px). */
#main-header .main-logo .logo-light,
#main-header .main-logo .logo-dark,
.login-header .main-logo .logo-light,
.login-header .main-logo .logo-dark {
    height: 72px !important;
    width: auto;
}

.insor-brand-insor {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    padding-left: 20px;
    border-left: 1px solid var(--insor-borde);
}

.insor-brand-insor img {
    display: block;
    width: 186px;
    height: auto;
    margin: 0;
    transition: width 0.3s ease;
}

.insor-brand-insor:focus-visible {
    outline: 2px solid var(--insor-azul);
    outline-offset: 3px;
}

/* Al fijarse el header (sticky) mb2nl encoge la barra: acompanamos la escala. */
#master-header.sticky-el .main-logo .logo-light,
#master-header.sticky-el .main-logo .logo-dark {
    height: 56px !important;
}

#master-header.sticky-el .insor-brand-insor img {
    width: 145px;
}

@media (max-width: 999px) {
    #main-header .logo-wrap,
    .login-header .logo-wrap {
        gap: 12px;
    }

    #main-header .main-logo .logo-light,
    #main-header .main-logo .logo-dark,
    .login-header .main-logo .logo-light,
    .login-header .main-logo .logo-dark,
    #master-header.sticky-el .main-logo .logo-light,
    #master-header.sticky-el .main-logo .logo-dark {
        height: 52px !important;
    }

    .insor-brand-insor {
        padding-left: 12px;
    }

    .insor-brand-insor img,
    #master-header.sticky-el .insor-brand-insor img {
        width: 100px;
    }
}

@media (max-width: 690px) {
    #main-header .main-logo .logo-light,
    #main-header .main-logo .logo-dark,
    .login-header .main-logo .logo-light,
    .login-header .main-logo .logo-dark,
    #master-header.sticky-el .main-logo .logo-light,
    #master-header.sticky-el .main-logo .logo-dark {
        height: 38px !important;
    }

    .insor-brand-insor img,
    #master-header.sticky-el .insor-brand-insor img {
        width: 86px;
    }
}

/* ==========================================================================
   3. Buscador pastilla del header (busca cursos en Moodle)
   ========================================================================== */
.insor-header-search {
    flex: 0 1 340px;
    margin-left: 24px;
    margin-right: auto;
    min-width: 0;
}

.insor-pill-search {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0;
}

.insor-pill-search input[type="search"] {
    width: 100%;
    height: 44px;
    padding: 0 46px 0 16px;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    outline: none;
    background: #fff;
    color: #3d3d3d;
    font-family: var(--insor-font);
    font-size: 15px;
    line-height: normal;
    transition: box-shadow 0.2s, border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.insor-pill-search input[type="search"]::placeholder {
    color: #9aa3a7;
}

.insor-pill-search input[type="search"]:focus {
    border-color: #bbb;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.insor-pill-search button {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #3d3d3d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.insor-pill-search button svg {
    width: 18px;
    height: 18px;
}

.insor-pill-search button svg path {
    fill: #fff;
}

.insor-pill-search button:hover {
    filter: brightness(1.25);
}

/* De momento el buscador pastilla no se pinta (ver layout/parts/insor_search.php):
   en Moodle basta con la lupa nativa del tema. Los estilos quedan listos por si
   se vuelve a activar. En móvil siempre manda la lupa nativa. */
@media (max-width: 991px) {
    .insor-header-search {
        display: none;
    }
}

/* ==========================================================================
   4. Barra de menu traida de WordPress
   ========================================================================== */
#insor-wp-menu-bar {
    position: relative;
    z-index: 10000;
    width: 100%;
    background: var(--insor-azul);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-family: var(--insor-font);
}

.insor-wp-menu-container {
    width: 100%;
    max-width: var(--insor-ancho);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    position: relative;
}

.insor-wp-menu-nav {
    flex: 1;
    min-width: 0;
}

.insor-wp-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

/* --- Nivel 1 ------------------------------------------------------------ */
.insor-wp-menu-item {
    position: relative;
    list-style: none;
}

.insor-wp-menu-list > .insor-wp-menu-item {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.insor-wp-menu-list > .insor-wp-menu-item:last-child {
    border-right: none;
}

.insor-wp-menu-list > .insor-wp-menu-item:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.insor-wp-menu-list > .insor-wp-menu-item > a {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
    padding: 0 10px;
    color: #ffffff;
    text-decoration: none;
    font-family: inherit;
    /* Peso 400 como en WordPress: en negrita el texto crece ~7% y se comen
       los 20px de aire que debe haber entre un ítem y el siguiente. */
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.insor-wp-menu-list > .insor-wp-menu-item > a:hover,
.insor-wp-menu-list > .insor-wp-menu-item > a:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--insor-naranja);
}

/* Linea decorativa animada (expansion desde el centro). */
.insor-wp-menu-list > .insor-wp-menu-item::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background-color: var(--insor-naranja);
    border-radius: 4px 4px 0 0;
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

.insor-wp-menu-list > .insor-wp-menu-item:hover::before,
.insor-wp-menu-list > .insor-wp-menu-item.insor-wp-current::before {
    width: 100%;
}

/* Item que corresponde a la seccion actual (Cursos Virtuales dentro de /edu). */
.insor-wp-menu-list > .insor-wp-menu-item.insor-wp-current > a {
    color: var(--insor-naranja);
    background-color: rgba(255, 255, 255, 0.08);
}

.insor-wp-arrow {
    font-size: 11px;
    opacity: 0.7;
}

/* --- Desplegable -------------------------------------------------------- */
.insor-wp-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 380px;
    min-height: 130px;
    padding: 15px 15px 15px 130px;
    background: var(--insor-azul);
    border-top: 3px solid var(--insor-naranja);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10001;
}

.insor-wp-has-children:hover > .insor-wp-dropdown,
.insor-wp-has-children:focus-within > .insor-wp-dropdown {
    display: flex;
    align-items: stretch;
}

/* Los desplegables del final no se salen de la pantalla. */
.insor-wp-menu-list > .insor-wp-menu-item:last-child > .insor-wp-dropdown,
.insor-wp-menu-list > .insor-wp-menu-item:nth-last-child(2) > .insor-wp-dropdown {
    left: auto;
    right: 0;
}

/* Visor del video/GIF dentro del desplegable. */
.insor-wp-gif-preview {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 130px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    z-index: 2;
    transition: background-image 0.3s ease;
    clip-path: inset(20px 0 10px 0 round 12px);
    pointer-events: none;
}

@keyframes insorGifFlip {
    0% {
        transform: translateY(-50%) perspective(500px) rotateY(-90deg) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateY(-50%) perspective(500px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

.insor-wp-gif-animate {
    animation: insorGifFlip 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.insor-wp-dropdown-links {
    flex: 1;
    padding: 10px 0;
}

/* --- Submenus ----------------------------------------------------------- */
.insor-wp-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.insor-wp-submenu li {
    list-style: none;
}

.insor-wp-submenu li a {
    display: block;
    padding: 10px 15px;
    color: #d8d8d8;
    text-decoration: none;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    transition: all 0.3s ease;
}

.insor-wp-submenu li a:hover,
.insor-wp-submenu li a:focus {
    background: rgba(255, 255, 255, 0.08);
    color: var(--insor-naranja);
    padding-left: 22px;
}

.insor-wp-submenu .insor-wp-has-children {
    position: relative;
}

.insor-wp-submenu .insor-wp-has-children > .insor-wp-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 250px;
    padding: 10px;
    background: var(--insor-azul);
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.insor-wp-submenu .insor-wp-has-children:hover > .insor-wp-submenu,
.insor-wp-submenu .insor-wp-has-children:focus-within > .insor-wp-submenu {
    display: block;
}

/* --- Popup de video para items sin submenu ------------------------------ */
.insor-wp-gif-only-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    background: var(--insor-azul);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    pointer-events: none;
    overflow: hidden;
}

.insor-wp-gif-only:hover > .insor-wp-gif-only-popup,
.insor-wp-gif-only:focus-within > .insor-wp-gif-only-popup {
    display: block;
}

.insor-wp-gif-only-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 10px;
    background-size: 130% auto;
    background-position: center calc(50% - 5px);
    border: 2px solid #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* --- Hamburguesa (solo movil) ------------------------------------------- */
.insor-wp-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
}

.insor-wp-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 5px 0;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s;
}

@media (max-width: 991px) {
    .insor-wp-menu-toggle {
        display: block;
    }

    .insor-wp-menu-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 80vh;
        overflow-y: auto;
        background: var(--insor-azul);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        z-index: 10002;
    }

    .insor-wp-menu-nav.insor-wp-menu-open {
        display: block;
    }

    .insor-wp-menu-list {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .insor-wp-menu-list > .insor-wp-menu-item,
    .insor-wp-menu-list > .insor-wp-menu-item:first-child {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .insor-wp-menu-list > .insor-wp-menu-item > a {
        margin: 0;
        padding: 14px 18px;
    }

    .insor-wp-menu-list > .insor-wp-menu-item::before {
        display: none;
    }

    .insor-wp-dropdown,
    .insor-wp-menu-list > .insor-wp-menu-item:last-child > .insor-wp-dropdown,
    .insor-wp-menu-list > .insor-wp-menu-item:nth-last-child(2) > .insor-wp-dropdown {
        position: static;
        display: block;
        min-width: 100%;
        min-height: 0;
        padding: 0 0 8px;
        background: #1b2765;
        border-radius: 0;
        border-top: none;
        box-shadow: none;
    }

    .insor-wp-gif-preview,
    .insor-wp-gif-only-popup {
        display: none !important;
    }

    .insor-wp-submenu li a {
        padding-left: 30px;
    }

    .insor-wp-submenu .insor-wp-has-children > .insor-wp-submenu {
        display: block;
        position: static;
        padding: 0;
        box-shadow: none;
    }

    .insor-wp-submenu .insor-wp-submenu li a {
        padding-left: 45px;
    }
}

/* ==========================================================================
   5. Pie de pagina institucional (replica del footer de WordPress)
   ========================================================================== */
.insor-footer {
    background-color: var(--insor-azul);
    font-family: var(--insor-font);
    font-size: 14px;
    line-height: 26px;
    color: var(--insor-azul-texto);
}

.insor-footer .insor-container {
    padding-bottom: 30px;
}

.insor-footer h3,
.insor-footer h4,
.insor-footer h5 {
    margin: 0 0 7px;
    color: var(--insor-azul-texto);
    font-family: var(--insor-font);
    font-weight: 600;
    letter-spacing: 0;
}

.insor-footer h3 { font-size: 22px; line-height: 34px; }
.insor-footer h4 { font-size: 18px; line-height: 32px; }
.insor-footer h5 { font-size: 16px; line-height: 26px; }

.insor-footer p {
    margin: 0 0 20px;
    color: var(--insor-azul-texto);
    font-weight: 700;
}

.insor-footer p:last-child {
    margin-bottom: 0;
}

.insor-footer a {
    color: var(--insor-azul-texto);
    text-decoration: none;
}

.insor-footer a:hover,
.insor-footer a:focus {
    text-decoration: underline;
}

/* --- Tarjetas blancas --------------------------------------------------- */
.insor-footer-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.insor-footer-card {
    box-sizing: border-box;
    flex: 1 1 50%;
    max-width: 50%;
    background: #fff;
    padding: 20px 30px 33px;
}

.insor-footer-info {
    border-left: 1px solid var(--insor-borde);
    border-top-left-radius: 8px;
}

.insor-footer-logos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    border-right: 1px solid var(--insor-borde);
    border-top-right-radius: 8px;
}

.insor-footer-logos img {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: 0;
}

/* --- Redes sociales ----------------------------------------------------- */
.insor-footer .insor-social {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin-top: 20px;
}

.insor-footer .insor-social-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.insor-footer .insor-social-item svg {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.insor-footer .insor-social-item h5 {
    margin: 0;
    color: var(--insor-azul-texto);
}

/* --- Barra blanca de enlaces ------------------------------------------- */
.insor-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    background: #fff;
    border-left: 1px solid var(--insor-borde);
    padding: 0 0 10px 30px;
}

.insor-footer-bar__left {
    flex: 1 1 66.66%;
    max-width: 66.66%;
}

.insor-footer-bar__right {
    flex: 1 1 33.33%;
    max-width: 33.33%;
    border-right: 1px solid var(--insor-borde);
}

/* Selector con dos clases para ganarle a la regla de encabezados de arriba. */
.insor-footer .insor-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 3em;
    margin: 0;
    color: var(--insor-azul-texto);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
}

.insor-footer .insor-links-center {
    justify-content: center;
}

@media (max-width: 999px) {
    .insor-footer-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .insor-footer-info {
        border-top-right-radius: 8px;
        border-right: 1px solid var(--insor-borde);
    }

    .insor-footer-logos {
        border-left: 1px solid var(--insor-borde);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .insor-footer-logos img {
        margin-left: auto;
        margin-right: auto;
    }

    .insor-footer-bar {
        padding-right: 30px;
    }

    .insor-footer-bar__left,
    .insor-footer-bar__right {
        flex: 1 1 100%;
        max-width: 100%;
        border-right: none;
    }

    .insor-footer .insor-links-center {
        justify-content: flex-start;
    }
}

@media (max-width: 690px) {
    .insor-footer .insor-social {
        grid-template-columns: 1fr;
    }
}

/* --- Pie propio de Moodle: mismo azul que el resto de la franja --------- */
#footer.theme-footer,
#footer.theme-footer.dark1 {
    background-color: var(--insor-azul);
    padding-top: 20px;
    font-family: var(--insor-font);
    font-size: 13px;
}

#footer.theme-footer,
#footer.theme-footer p,
#footer.theme-footer a,
#footer.theme-footer .footer-content {
    color: rgba(255, 255, 255, 0.85);
}

#footer.theme-footer a:hover,
#footer.theme-footer a:focus {
    color: var(--insor-naranja);
}

#footer.theme-footer .container-fluid {
    padding-bottom: 20px;
}

.login-footer {
    background-color: var(--insor-azul);
}

.login-footer,
.login-footer p,
.login-footer a {
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   6. Barra inferior GOV.CO (Marca Pais + GOV.CO)
   ========================================================================== */
.insor-govco-footer {
    position: relative;
    width: 100%;
    height: 96px;
    background-color: var(--insor-azul);
}

.insor-govco-footer .insor-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.insor-govco-footer__co {
    display: inline-block;
    width: 130px;
    height: 48px;
    background: url(img/logo-colombia.svg) no-repeat left center;
    background-size: contain;
}

.insor-govco-footer__sep {
    display: inline-block;
    height: 44px;
    margin-left: 10px;
    margin-right: 15px;
    border-left: 1px solid #e5eefb;
}

.insor-govco-footer__gov {
    display: inline-block;
    width: 136px;
    height: 30px;
    background: url(img/logo-gov-co.svg) no-repeat left center;
    background-size: 136px 30px;
}

.insor-govco-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ==========================================================================
   PORTADA /edu — separacion entre filas y tarjeta de curso (18-sep-2026)
   --------------------------------------------------------------------------
   Dos ajustes pedidos sobre la portada del aula:
     1. una linea que separe visualmente las filas del constructor;
     2. el titulo del curso encima del banner, no debajo.
   Todo se resuelve aqui, en hoja propia: el JSON del constructor
   (mdl_local_mb2builder_pages id=1) NO se toca.
   ========================================================================== */

/* --- 1. Filete divisorio entre filas ------------------------------------ */
/* Replica el borde nativo del tema (.bordert1 + .borderfw0: filete de 1px
   centrado sobre el ancho de banda) pero aplicado por CSS. Solo se dibuja en
   una fila precedida por otra fila, de modo que la primera no lleva linea, y
   solo si la fila tiene contenido: la ultima fila del home es un separador
   vacio (.mb2-pb-column.empty) y no debe arrastrar un filete suelto.
   Si el navegador no soporta :has(), la regla completa se descarta y
   simplemente no se ve la linea: no rompe nada. */
#page-site-index .mb2-pb-row + .mb2-pb-row:has(.mb2-pb-column.noempty) > .mb2-pb-row-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--insor-ancho);
    max-width: calc(100% - 60px);
    height: 1px;
    background-image: linear-gradient(
        90deg,
        rgba(37, 54, 139, 0) 0%,
        rgba(37, 54, 139, 0.22) 12%,
        rgba(37, 54, 139, 0.22) 88%,
        rgba(37, 54, 139, 0) 100%
    );
}

@media (max-width: 991px) {
    #page-site-index .mb2-pb-row + .mb2-pb-row:has(.mb2-pb-column.noempty) > .mb2-pb-row-inner::before {
        max-width: calc(100% - 30px);
    }
}

/* --- 2. Titulo del curso encima del banner ------------------------------ */
/* El tema arma la tarjeta como imagen -> contenido (titulo) -> pie
   (estudiantes y fecha). Para subir solo el titulo se aplana el envoltorio
   .content-wrap con display:contents, de modo que titulo, imagen y pie
   quedan como hermanos del mismo flex y se reordenan con `order`.
   .content-wrap no aporta caja propia en este estilo de tarjeta
   (cstyle-n: el relleno solo existe en cstyle-la / cstyle-d), asi que
   aplanarlo no cambia el aspecto. */
#page-site-index .mb2-pb-courses .theme-course-item .theme-course-item-inner {
    display: flex;
    flex-direction: column;
}

#page-site-index .mb2-pb-courses .theme-course-item .content-wrap {
    display: contents;
}

#page-site-index .mb2-pb-courses .theme-course-item .course-content {
    order: 1;
    margin-bottom: 12px;
}

#page-site-index .mb2-pb-courses .theme-course-item .image-wrap {
    order: 2;
}

#page-site-index .mb2-pb-courses .theme-course-item .course-footer {
    order: 3;
}

/* Categoria e instructores estan desactivados en esta tarjeta: el div queda
   vacio y solo aporta 8px de aire entre el titulo y el banner. */
#page-site-index .mb2-pb-courses .theme-course-item .course-item-deatils:empty {
    display: none;
}

/* Remate tipografico del titulo ya promovido a encabezado de la tarjeta. */
#page-site-index .mb2-pb-courses .theme-course-item .course-content .title {
    font-family: var(--insor-font);
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

#page-site-index .mb2-pb-courses .theme-course-item .course-content .title a {
    color: var(--insor-azul);
    text-decoration: none;
    transition: color 0.2s ease;
}

#page-site-index .mb2-pb-courses .theme-course-item:hover .course-content .title a,
#page-site-index .mb2-pb-courses .theme-course-item .course-content .title a:focus-visible {
    color: #a2238f;
}

/* --- 3. Bajos alineados: la tarjeta iguala la altura del video ---------- */
/* El video de la izquierda tiene proporcion fija (16:9) y la tarjeta de la
   derecha suma titulo + banner + pie, de modo que sobresalia por abajo.
   En vez de fijar una proporcion a ojo —que solo cuadraria en un ancho— se
   deja que el banner absorba el espacio sobrante: la cadena de alturas baja
   desde la columna hasta la imagen y esta se declara `flex:1 1 0`, asi su
   altura natural deja de contar para el alto de la fila. Resultado: manda la
   altura del video y el banner se recorta (object-fit:cover) lo justo para
   que ambas columnas terminen a la misma altura, sea cual sea el ancho.
   Solo en escritorio: por debajo de 992px las columnas se apilan y la tarjeta
   recupera su proporcion normal. */
@media (min-width: 992px) {

    /* La caja del elemento trae 33px de margen inferior y la del video 30px;
       igualarlos es lo que hace que los bajos coincidan exactamente. */
    #page-site-index .mb2-pb-column:has(.mb2-pb-courses) .mb2-pb-courses {
        margin-bottom: 30px !important;
    }

    /* Cadena de alturas: columna -> envoltorios -> lista -> tarjeta. */
    #page-site-index .mb2-pb-column:has(.mb2-pb-courses) > .column-inner > .clearfix {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #page-site-index .mb2-pb-column:has(.mb2-pb-courses) .mb2-pb-courses,
    #page-site-index .mb2-pb-column:has(.mb2-pb-courses) .mb2-pb-content-inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    #page-site-index .mb2-pb-column:has(.mb2-pb-courses) .mb2-pb-content-list {
        flex: 1 1 auto;
        min-height: 0;
        align-content: stretch;
    }

    #page-site-index .mb2-pb-column:has(.mb2-pb-courses) .theme-course-item {
        display: flex;
        flex-direction: column;
    }

    #page-site-index .mb2-pb-column:has(.mb2-pb-courses) .theme-course-item-inner {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* La clave: base 0 para que la altura natural del banner no infle la fila. */
    #page-site-index .mb2-pb-courses .theme-course-item .image-wrap {
        flex: 1 1 0;
        min-height: 0;
    }

    #page-site-index .mb2-pb-courses .theme-course-item .image-wrap .image {
        height: 100%;
    }

    /* Anula la proporcion fija 1.65 del tema (.objfit) y llena la altura. */
    #page-site-index .mb2-pb-courses .theme-course-item .image-wrap img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center 45%;
    }
}

/* ==========================================================================
   Visor de Lengua de Señas del logo (insor-conecta.js). Copia del visor de
   WordPress (insor-hover-lsc.css del tema hijo) para que se vean iguales.
   ========================================================================== */
.insor-lsc-viewer {
    position: fixed;
    z-index: 100000;
    width: 220px;
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    border: 3px solid #a2238f;
    opacity: 0;
    transform: scale(.9);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.21, 1, .32, 1);
}

.insor-lsc-viewer.is-visible {
    opacity: 1;
    transform: scale(1);
}

.insor-lsc-viewer video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insor-lsc-viewer::after {
    content: "LSC";
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(162, 35, 143, .92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.6;
}

@media (max-width: 690px) {
    .insor-lsc-viewer {
        width: 170px;
        height: 170px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .insor-lsc-viewer {
        transition: none;
    }
}