/*
===============================================================================
Archivo: footer.css
Ubicación: assets/css/footer.css
-------------------------------------------------------------------------------
Footer corporativo compartido de NominareIA.

Responsabilidad:
- Identidad corporativa del pie de página.
- Accesos a las soluciones NominareIA.
- Navegación secundaria.
- Enlaces legales.
- Datos de contacto.
- Copyright.
- Diseño responsive.

La estructura HTML será cargada desde:
includes/footer.html
===============================================================================
*/


/* ==========================================================================
   1. CONTENEDOR DEL FOOTER
   ========================================================================== */

#site-footer {
    position: relative;

    width: 100%;
}


/* ==========================================================================
   2. FOOTER CORPORATIVO
   ========================================================================== */

.corporate-footer {
    position: relative;

    overflow: hidden;

    width: 100%;

    padding:
        5rem 0
        0;

    color:
        rgba(255, 255, 255, 0.68);

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(0, 187, 223, 0.13),
            transparent 28rem
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(0, 95, 186, 0.18),
            transparent 30rem
        ),
        linear-gradient(
            145deg,
            #020b24 0%,
            #041437 52%,
            #061b4c 100%
        );
}


/*
 * Trama tecnológica muy sutil.
 * Es decorativa y no requiere elementos adicionales en el HTML.
 */
.corporate-footer::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.55;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size:
        44px 44px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.75),
            transparent 92%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.75),
            transparent 92%
        );
}


/* Mantiene el contenido sobre los elementos decorativos. */
.corporate-footer > .container {
    position: relative;

    z-index: 1;
}


/* ==========================================================================
   3. ESTRUCTURA PRINCIPAL
   ========================================================================== */

.footer-grid {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.45fr)
        repeat(3, minmax(150px, 0.75fr));

    gap:
        3rem;

    padding-bottom:
        4rem;
}


/* ==========================================================================
   4. IDENTIDAD CORPORATIVA
   ========================================================================== */

.footer-brand {
    max-width:
        390px;
}


/* Logo + nombre. */
.footer-brand__link {
    display: inline-flex;
    align-items: center;

    gap:
        0.75rem;

    margin-bottom:
        1.3rem;

    color:
        #ffffff;

    text-decoration:
        none;
}

.footer-brand__link:hover {
    color:
        #ffffff;
}


/* Logo del footer. */
.footer-brand__logo {
    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    object-fit:
        contain;
}


/* Nombre NominareIA. */
.footer-brand__name {
    color:
        #ffffff;

    font-family:
        var(--font-primary);

    font-size:
        1.2rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.03em;
}


/* Descripción corporativa. */
.footer-brand__description {
    max-width:
        360px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.82rem;

    line-height:
        1.8;
}


/* ==========================================================================
   5. COLUMNAS DEL FOOTER
   ========================================================================== */

.footer-column {
    min-width:
        0;
}


/* Título de cada columna. */
.footer-column__title {
    margin:
        0 0
        1.15rem;

    color:
        #ffffff;

    font-family:
        var(--font-primary);

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/*
 * Línea cyan bajo cada título.
 * Refuerza la identidad visual sin recargar el footer.
 */
.footer-column__title::after {
    content: "";

    display:
        block;

    width:
        2rem;

    height:
        2px;

    margin-top:
        0.55rem;

    border-radius:
        var(--radius-pill);

    background:
        var(--gradient-primary);
}


/* ==========================================================================
   6. LISTAS DE ENLACES
   ========================================================================== */

.footer-links {
    display:
        grid;

    gap:
        0.72rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.footer-links li {
    margin:
        0;

    padding:
        0;
}


.footer-links a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        rgba(255, 255, 255, 0.60);

    font-size:
        0.76rem;

    font-weight:
        500;

    line-height:
        1.5;

    text-decoration:
        none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


.footer-links a:hover,
.footer-links a:focus-visible {
    color:
        var(--color-cyan-300);

    transform:
        translateX(3px);
}


/* ==========================================================================
   7. ENLACES A LAS SOLUCIONES
   ========================================================================== */

/*
 * Los accesos a las tres plataformas pueden utilizar esta clase
 * para distinguirse de la navegación secundaria.
 */
.footer-solution-link {
    position:
        relative;

    padding-left:
        0.9rem;
}


.footer-solution-link::before {
    content: "";

    position:
        absolute;

    top:
        0.62em;

    left:
        0;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--color-cyan-400);

    box-shadow:
        0 0 10px
        rgba(0, 187, 223, 0.65);
}


/* ==========================================================================
   8. CONTACTO
   ========================================================================== */

.footer-contact {
    display:
        grid;

    gap:
        0.8rem;
}


.footer-contact__item {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.65rem;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.76rem;

    line-height:
        1.6;
}


/*
 * Espacio preparado para iconos.
 * Puede utilizar SVG inline cuando construyamos el HTML.
 */
.footer-contact__icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 1.8rem;

    width:
        1.8rem;

    height:
        1.8rem;

    border:
        1px solid rgba(103, 234, 255, 0.17);

    border-radius:
        9px;

    background:
        rgba(103, 234, 255, 0.06);

    color:
        var(--color-cyan-300);
}


.footer-contact__icon svg {
    width:
        0.9rem;

    height:
        0.9rem;
}


.footer-contact a {
    color:
        rgba(255, 255, 255, 0.72);

    text-decoration:
        none;
}


.footer-contact a:hover {
    color:
        var(--color-cyan-300);
}


/* ==========================================================================
   9. SEPARADOR INFERIOR
   ========================================================================== */

.footer-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    min-height:
        78px;

    padding:
        1.25rem 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}


/* Copyright. */
.footer-copyright {
    margin:
        0;

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        0.68rem;

    line-height:
        1.6;
}


/* ==========================================================================
   10. ENLACES LEGALES
   ========================================================================== */

.footer-legal {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        0.6rem 1.25rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.footer-legal a {
    color:
        rgba(255, 255, 255, 0.44);

    font-size:
        0.67rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color var(--transition-fast);
}


.footer-legal a:hover,
.footer-legal a:focus-visible {
    color:
        var(--color-cyan-300);
}


/* ==========================================================================
   11. ACENTO DECORATIVO
   ========================================================================== */

/*
 * Resplandor inferior derecho.
 * No interfiere con el contenido ni requiere HTML adicional.
 */
.corporate-footer::after {
    content: "";

    position:
        absolute;

    right:
        -12rem;

    bottom:
        -14rem;

    width:
        30rem;

    height:
        30rem;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(0, 187, 223, 0.07);

    filter:
        blur(35px);
}


/* ==========================================================================
   12. TABLET
   ========================================================================== */

@media screen and (max-width: 980px) {

    .corporate-footer {
        padding-top:
            4rem;
    }


    .footer-grid {
        grid-template-columns:
            1.3fr
            1fr
            1fr;

        gap:
            2.5rem
            2rem;
    }


    /*
     * La marca ocupa toda la primera fila para mantener
     * una composición equilibrada en tablet.
     */
    .footer-brand {
        grid-column:
            1 / -1;

        max-width:
            600px;
    }


    .footer-brand__description {
        max-width:
            560px;
    }
}


/* ==========================================================================
   13. MÓVIL
   ========================================================================== */

@media screen and (max-width: 736px) {

    .corporate-footer {
        padding-top:
            3.5rem;
    }


    .footer-grid {
        grid-template-columns:
            1fr
            1fr;

        gap:
            2.5rem
            1.5rem;

        padding-bottom:
            3rem;
    }


    .footer-brand {
        grid-column:
            1 / -1;
    }


    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap:
            0.8rem;

        padding:
            1.4rem 0;
    }


    .footer-legal {
        justify-content:
            flex-start;
    }
}


/* ==========================================================================
   14. MÓVILES PEQUEÑOS
   ========================================================================== */

@media screen and (max-width: 480px) {

    .footer-grid {
        grid-template-columns:
            1fr;

        gap:
            2rem;
    }


    .footer-brand {
        grid-column:
            auto;
    }


    .footer-brand__logo {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;
    }


    .footer-brand__name {
        font-size:
            1.05rem;
    }


    .footer-legal {
        flex-direction:
            column;

        gap:
            0.55rem;
    }
}


/* ==========================================================================
   15. REDUCCIÓN DE MOVIMIENTO
   ========================================================================== */

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

    .footer-links a {
        transition:
            none;
    }
}