/* =========================================
   ESTILOS DEL FOOTER (PIE DE PÁGINA)
   ========================================= */
.main-footer {
    background-color: var(--bg-header); /* Utiliza la variable del root cargada en el header */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 60px;
    font-family: system-ui, -apple-system, sans-serif;
    position: relative;
    margin-top: auto; /* Empuja el footer al fondo si hay poco contenido */
}

.footer-container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 40px; 
}

/* FILA 1: Estructura de 5 Columnas (Escritorio) */
.footer-grid { 
    display: grid; 
    grid-template-columns: 2.5fr 1fr 1fr 1fr 2.5fr; 
    gap: 40px; 
    margin-bottom: 50px; 
}

.footer-col .col-title { 
    color: var(--text-main); 
    font-size: 1rem; 
    font-weight: 600; 
    margin-bottom: 20px; 
    letter-spacing: 0.02em; 
    text-transform: uppercase; 
}

/* Identidad (Columna 1) */
.footer-brand { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    text-decoration: none; 
    margin-bottom: 15px; 
}

.footer-brand .brand-icon { 
    height: 32px; 
    width: 32px; /* Forzado a 32px para matar el salto visual */
    object-fit: contain; 
}

.footer-slogan { 
    font-size: 0.95rem; 
    color: var(--text-main); 
    margin-bottom: 15px; 
    font-weight: 500; 
}

.footer-desc { 
    font-size: 0.85rem; 
    color: var(--text-muted); 
    line-height: 1.6; 
    max-width: 90%; 
}

/* Enlaces Dinámicos (Columnas 2, 3 y 4) */
/* El contenedor ul pierde el decorado nativo */
.footer-links { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilos independientes inyectados vía PHP para los enlaces del Footer */
.footer-nav-link { 
    font-family: system-ui, -apple-system, sans-serif !important; 
    color: var(--text-muted); /* Color base gris tenue */
    text-decoration: none; 
    font-size: 0.85rem !important; /* Tamaño específico del footer */
    font-weight: 400 !important; /* Grosor regular */
    transition: color 0.3s ease; 
    display: block;
}

/* Color al pasar el cursor (Hover) */
.footer-nav-link:hover { 
    color: var(--cyan) !important; 
}

/* Escudo YMYL (Columna 5) */
.ymyl-box { 
    background-color: #020202; 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 20px; 
    border-radius: 0; 
}

.ymyl-text { 
    font-size: 0.75rem; 
    color: #888888; 
    line-height: 1.6; 
    text-align: justify; 
}

.ymyl-text strong { 
    color: var(--orange); 
}

/* FILA 2: Copyright y Redes Sociales */
.footer-bottom { 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 25px 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.copyright { 
    font-size: 0.8rem; 
    color: var(--text-muted); 
}

.social-section { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.social-text { 
    font-size: 0.8rem; 
    color: var(--text-muted); 
    margin-right: 5px; 
}

.social-icon { 
    color: var(--text-main); 
    transition: color 0.3s ease; 
    display: flex; 
    align-items: center; 
}

.social-icon:hover { 
    color: var(--cyan); 
}

/* FILA 3: Línea inferior de gradiente institucional */
.footer-gradient-line { 
    height: 4px; 
    width: 100%; 
    background: linear-gradient(90deg, var(--cyan), var(--azul), var(--mora), var(--magenta), var(--orange), var(--yellow)); 
}

/* =========================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================= */

/* Tablet: Colapsa a 2 columnas */
@media (max-width: 1050px) {
    .footer-grid { 
        grid-template-columns: 1fr 1fr; 
    }
    /* Expandir los bloques anchos para que ocupen ambas columnas */
    .col-identity, .col-disclaimer { 
        grid-column: span 2; 
    }
}

/* Teléfono móvil: Colapsa a 1 columna */
@media (max-width: 768px) {
    .footer-container { 
        padding: 0 20px; 
    }
    
    .footer-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    }
    
    .col-identity, .col-disclaimer { 
        grid-column: span 1; 
    }
    
    /* Apilar redes sociales y copyright */
    .footer-bottom { 
        flex-direction: column; 
        gap: 20px; 
        text-align: center; 
    }
}