/* ==========================================================================
   ENCCI — FOOTER
   Footer + contacto + redes + enlaces legales
   --------------------------------------------------------------------------
   Arquitectura:
   - El footer ocupa el 100% del viewport.
   - El contenido interior utiliza el sistema de contenedor de ENCCI.
   - La navegación/header pertenece a header.css.
   - El selector de idioma pertenece a header.css.
   ========================================================================== */


/* ==========================================================================
   01. FOOTER BASE
   ========================================================================== */

footer {
    width: 100%;
    padding: 0 !important;
}

.footer-top {
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
    color: var(--encci-text);
    background:
        linear-gradient(
            180deg,
            var(--encci-primary) 0%,
            var(--encci-primary-dark) 100%
        );
    border: 0;
}

.footer-bottom {
    background: var(--encci-primary-dark);
    border-top: 1px solid rgba(255, 255, 255, .12);
}


/* ==========================================================================
   02. CONTENEDOR
   ========================================================================== */

/*
 * El fondo del footer ocupa todo el ancho.
 * El contenido mantiene el ancho general de ENCCI.
 */

footer .container {
    width: min(
        var(--encci-container-width),
        calc(100% - (var(--layout-gutter) * 2))
    );
}


/* ==========================================================================
   03. CABECERA / TÍTULOS
   ========================================================================== */

.footer-header {
    margin-bottom: 1rem;
    color: var(--encci-text);
    font-weight: 700;
}


/* ==========================================================================
   04. CONTACTO
   ========================================================================== */

.b5_center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.b5_center a {
    color: var(--encci-text);
    font-weight: 500;
    text-decoration: none;
}


/* ==========================================================================
   05. BLOQUE IZQUIERDO
   ========================================================================== */

.b5_left {
    display: flex;
    align-items: center;
}


/* ==========================================================================
   06. REDES SOCIALES
   ========================================================================== */

.b5_right {
    text-align: center;
}

.b5_right .view-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.logo-rss a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    color: var(--encci-white);
    background: rgba(255, 255, 255, .08);
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.logo-rss a:hover {
    color: var(--encci-white);
    background: var(--encci-primary-dark);
    border-color: var(--encci-primary-light);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.logo-rss img {
    width: 19px;
    height: 19px;
    opacity: .92;
}


/* ==========================================================================
   07. ENLACES
   ========================================================================== */

footer a {
    color: var(--encci-text);
    text-decoration: none;
    transition:
        color var(--transition),
        background-color var(--transition);
}

footer a:hover {
    color: var(--encci-secondary);
}

footer a:focus-visible {
    outline: 3px solid var(--encci-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.navbar-nav > .nav-item > .nav-link.active{
    color:var(--encci-text);
}

/* ==========================================================================
   08. MENÚ INFERIOR / ENLACES LEGALES
   ========================================================================== */

.footer-bottom .nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 1.2rem 0;
}

.footer-bottom .nav-link {
    padding: 0;
    color: var(--encci-text);
    background: transparent;
    font-size: .92rem;
    text-decoration: none;
    transition:
        color var(--transition),
        background-color var(--transition);
}

.footer-bottom .nav-link:hover {
    color: var(--encci-secondary);
    background: transparent;
}


/* ==========================================================================
   09. TABLET
   ========================================================================== */

@media (min-width: 768px) {

    .b5_center_container {
        align-items: center;
    }

    .b5_left {
        flex: 0 0 28%;
        justify-content: flex-start;
    }

    .b5_center {
        flex: 1;
        padding-inline: 2rem;
        text-align: left;
    }

    .b5_right {
        flex: 0 0 auto;
        text-align: left;
    }

    .b5_right .view-content {
        justify-content: flex-start;
    }

    .footer-bottom .nav {
        justify-content: center;
    }

}


/* ==========================================================================
   10. DESKTOP
   ========================================================================== */

@media (min-width: 992px) {

    .footer-top {
        padding: 5rem 0;
    }

    .b5_center_container {
        gap: 4rem;
    }

    .b5_left img {
        min-width: 380px;
    }

}


/* ==========================================================================
   11. MOBILE / TABLET PEQUEÑA
   ========================================================================== */

@media (max-width: 991.98px) {

    .b5_center_container {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }

    .b5_left,
    .b5_center,
    .b5_right {
        width: 100%;
    }

    .b5_right .view-content {
        justify-content: center;
    }

}



/* ==========================================================================
   11.1. MENÚ INFERIOR EN MÓVIL
   ========================================================================== */

@media (max-width: 767.98px) {

    .footer-bottom .nav {
        flex-direction: column;
        align-items: center;
        gap: .75rem;
    }

}

/* ==========================================================================
   12. ACCESIBILIDAD
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    footer *,
    footer *::before,
    footer *::after {
        animation: none !important;
        transition: none !important;
    }

}


/* ==========================================================================
   13. PRINT
   ========================================================================== */

@media print {

    footer {
        background: transparent;
        color: #000;
    }

    .footer-top,
    .footer-bottom {
        background: transparent;
        color: #000;
        border: 0;
    }

    footer .footer-header,
    footer .b5_center,
    footer .b5_left,
    footer .b5_right,
    footer .footer-bottom .nav-link {
        color: #000;
    }

    footer a {
        color: #000;
    }

}