/*
 * ==========================================================
 * INSTITUTE — FOOTER WEB
 * Superficie canónica integrada a Central de Temas
 * ==========================================================
 */

.footer {
    margin-top: 80px !important;
    padding-top: 50px;

    background-color: var(
        --theme-glass-surface-override,
        rgba(27, 27, 27, 0.19)
    ) !important;

    backdrop-filter: blur(
        var(--theme-blur-override, 12px)
    );

    -webkit-backdrop-filter: blur(
        var(--theme-blur-override, 12px)
    );
}

.footer .border-blue {
    border-top: 1px solid var(
        --theme-border,
        rgba(255,255,255,.18)
    );
}


/*
 * ==========================================================
 * FOOTER — CONTENIDO DINÁMICO SEMÁNTICO
 * ==========================================================
 *
 * Las columnas administrables pueden contener HTML histórico
 * generado por el editor, incluyendo <font color="#ffffff">.
 * Esta frontera devuelve esos descendientes a la semántica
 * cromática del tema sin modificar el contenido almacenado.
 * ==========================================================
 */

.footer .institute-footer-content {
    color: var(--theme-text, #f5f1f2) !important;
}

.footer .institute-footer-content p,
.footer .institute-footer-content span,
.footer .institute-footer-content font {
    color: inherit !important;
}

.footer .institute-footer-content a {
    color: var(--theme-text, #f5f1f2) !important;
}

.footer .institute-footer-content a:hover,
.footer .institute-footer-content a:focus {
    color: var(--theme-accent, #b4283e) !important;
}


/*
 * ==========================================================
 * FOOTER — ASSETS LIGHT / DARK
 * ==========================================================
 *
 * Logo Institute:
 * se renderizan ambas variantes porque el logotipo conserva
 * elementos rojos que no deben pasar por filtros cromáticos.
 *
 * Instagram:
 * el asset actual es SVG monocromático blanco, por lo que
 * puede alternar negro/blanco según el esquema del tema.
 * ==========================================================
 */

.footer .institute-footer-logo {
    position: relative;
}

.footer .institute-footer-logo > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.footer .institute-footer-logo__light,
.footer .institute-footer-logo__dark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .18s ease;
}

.footer .institute-footer-logo__light {
    opacity: var(--theme-is-light, 0);
}

.footer .institute-footer-logo__dark {
    opacity: var(--theme-is-dark, 1);
}


/*
 * Asset Instagram configurado actualmente:
 * SVG completamente monocromático blanco.
 *
 * Light -> negro
 * Dark  -> blanco
 */

.footer .footer-social img[src*="instagram.svg"] {
    filter: brightness(0)
        invert(calc(1 - var(--theme-is-light, 0)));
}