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

.footer {
    background-color: var(--azul-oscuro);
    font-family: sans-serif;
    color: var(--blanco);
}


/* ==========================================
   VARIANTES DE COLOR DEL FOOTER
========================================== */

.footer--dark {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
}

.footer--dark .footer-main .col h4 {
    color: var(--blanco);
}

.footer--dark .footer-main .col ul li {
    color: var(--blanco);
}

.footer--dark .footer-main .col ul li a {
    color: var(--blanco);
}

.footer--dark .footer-main .col ul li a:hover {
    color: #b0bec5;
}

.footer--dark .footer-text {
    color: var(--blanco);
}



/* ==========================================
   2. CONTENIDO PRINCIPAL (footer-main)
========================================== */

.footer-main {
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
    gap: 10px;
    border-top: 1px solid rgba(176, 190, 197, 0.35);
}

/* Base de todas las columnas */
.col {
    flex: 1;
}

/* Columnas de menú separadas del borde superior */
.footer-main .col:not(:first-child) {
    margin-top: 20px;
}

/* Columna 1 (Logo) - más ancha */
.col:first-child{
    flex: 2;
    max-width: 420px;
}

/* Columnas 2 a 6 (menús) - compactas */
.col:nth-child(2),
.col:nth-child(3),
.col:nth-child(4),
.col:nth-child(5),
.col:nth-child(6) {
    flex: 1;
    gap: 15px;
}


/* ==========================================
   4. COLUMNA 1 - LOGO Y REDES SOCIALES
========================================== */

/* Centrar logo y contenido de la primera columna */
.col:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Logo del footer - altura fija, ancho automático */
.footer-logo {
    height: 90px;
    width: auto;
    max-width: 350px;
    margin-left: 0;
    margin-bottom: 0;
    object-fit: contain;
    object-position: left center;
}

/* Texto descriptivo del logo */
.footer-text {
    font-size: 0.65rem;
    line-height: 1.5;
    margin: 0;
    color: var(--blanco);
    max-width: 265px;
    overflow: hidden;
}

/* Contenedor de redes sociales */
.social-links {
    display: flex;
    gap: 18px;
    margin-top: 10px;
    align-content: start;
    margin-left: 0;
}

/* Enlace de cada red social */
.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    text-decoration: none;
}

/* Contenedor de cada icono */
.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border-radius: 0;
    transition: transform 0.3s ease;
}

/* Imagen del logo de red social */
.social-links a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Efecto hover */
.social-icon:hover {
    transform: translateY(-3px);
}


/* ==========================================
   5. TÍTULOS DE COLUMNAS
========================================== */

.col h4 {
    color: var(--azul-secundario);
    margin-bottom: 15px;

    text-transform: uppercase;
    font-size: 0.8rem;
}

/* ==========================================
   7. ÍCONOS DE CONTACTO (Columna 5)
========================================== */

/* Elementos de lista de contacto con icono */
.col:last-child ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icono de contacto general */
.icon-contact {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

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

/* Reset de lista */
.col ul {
    list-style: none;
    padding: 0;
}

/* Elemento de lista */
.col ul li {
    margin-bottom: 12px;
    font-size: 0.75rem;
    color: var(--gris-texto);
}

/* Enlace dentro de la lista */
.col ul li a {
    color: var(--gris-texto);
    text-decoration: none;
}

/* Hover del enlace - cambia color */
.col ul li a:hover {
    color: var(--azul-secundario);
}

/* ==========================================
   8. BARRA DE COPYRIGHT
========================================== */

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    background-color: var(--azul-oscuro);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 15px 50px;
    font-size: 0.7rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--azul-secundario);
}

.footer--dark .footer-bottom {
    color: #fff;
}

.footer--dark .footer-bottom-links a {
    color: #fff;
}

.footer--dark .footer-bottom-links a:hover {
    color: #b0bec5;
}


/* ==========================================
   10. RESPONSIVE - TABLET (≤768px)
========================================== */

@media (max-width: 768px) {

    /* Contenido principal con wrap */
    .footer-main {
        flex-wrap: wrap;
        gap: 30px;
        padding: 30px 5%;
    }

    /* Logo ocupa toda la fila */
    .col:first-child {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        align-items: center;
        text-align: center;
    }

    /* Las demás columnas comparten la segunda fila */
    .col:not(:first-child) {
        flex: 1 1 20%;
        max-width: none;
        text-align: center;
    }

    /* Columna 5 centrada */
    .col:last-child {
        align-items: center;
    }

    .col:last-child ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .col:last-child ul li {
        justify-content: center;
    }
}


/* ==========================================
   11. RESPONSIVE - CELULARES (≤480px)
========================================== */

@media (max-width: 480px) {

    /* Contenido principal vertical */
    .footer-main {
        flex-direction: column;
        gap: 24px;
        padding: 24px 5%;
    }

    /* Todas las columnas al 100% */
    .col {
        flex: 1 1 100%;
        text-align: center;
    }

    /* Columna 1 y 5 al 100% */
    .col:first-child,
    .col:last-child {
        flex: 1 1 100%;
    }

    /* Columna 1 centrada en móvil */
    .col:first-child {
        align-items: center;
        text-align: center;
    }

    .col:last-child ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .col:last-child ul li {
        justify-content: center;
    }

    /* Logo centrado en móvil */
    .footer-logo {
        margin: 0 auto 15px;
        object-position: center;
    }

    /* Barra de copyright apilada en móvil */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        padding: 15px 5%;
    }
}