/* ========================================================================= */
/* FLOW & MATCH - ESTILOS DEL PIE DE PÁGINA (footer.css)                     */
/* ========================================================================= */

.footer-principal {
    /* Un negro ligeramente más profundo que el fondo general para dar contraste */
    background-color: #050505; 
    padding: 50px 20px 30px;
    text-align: center;
    /* Una línea superior casi invisible en color dorado para separar */
    border-top: 1px solid rgba(212, 175, 55, 0.15); 
}

.contenedor-footer {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espacio uniforme entre redes, texto y legales */
}

/* ------------------------------------------------------------------------- */
/* Redes Sociales                                                            */
/* ------------------------------------------------------------------------- */
.redes-sociales {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.redes-sociales a {
    color: var(--color-texto);
    font-size: 1.5rem;
    opacity: 0.6; /* Un poco apagados por defecto */
    transition: all 0.3s ease;
}

.redes-sociales a:hover {
    color: var(--color-primario); /* Se encienden en dorado */
    opacity: 1;
    transform: translateY(-5px); /* El toque "Flow": saltan un poquito hacia arriba al pasar el ratón */
}

/* ------------------------------------------------------------------------- */
/* Textos y Enlaces Legales                                                  */
/* ------------------------------------------------------------------------- */
.copyright {
    font-size: 0.9rem;
    color: var(--color-gris-claro);
    letter-spacing: 1px; /* Letras un pelín separadas da un toque más premium */
    text-transform: uppercase;
}

.enlaces-legales {
    font-size: 0.8rem;
}

.enlaces-legales a {
    color: var(--color-gris-claro);
    text-decoration: none;
    transition: color 0.3s ease;
}

.enlaces-legales a:hover {
    color: var(--color-primario);
}

.separador {
    color: #333333;
    margin: 0 10px;
}

/* Adaptación móvil exclusiva para el Footer */
@media (max-width: 768px) {
    .enlaces-legales {
        display: flex;
        flex-direction: column; /* Apilamos los enlaces en vertical */
        gap: 15px;
    }
    .separador {
        display: none; /* Ocultamos la barrita vertical '|' en móviles */
    }
}