/* 
 * FOOTER.CSS - Estilos del pie de página
 * Contiene:
 * - Estilos del footer principal
 * - Íconos sociales y su disposición
 * - Texto legal y copyright
 * - Responsive para todas las pantallas
 * - Iconos Sociales
 * - Marca de agua
 */

footer {
    background-color: var(--color-primario);
    color: var(--blanco);
    padding: 25px 0; /* Define el padding superior e inferior fijo del footer */
    text-align: center; /* Centra el texto del footer por defecto */
}

/* Contenedor principal del footer */
.footer-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben */
    align-items: center; /* **Centra verticalmente** los elementos (social-icons y footer-text) que están en el flujo normal, PERO no directamente los absolutos */
    justify-content: center; /* Centra horizontalmente los elementos en el flujo normal */
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Es **CRUCIAL** para que los íconos con 'position: absolute' se posicionen respecto a este contenedor */
    /* ¡Asegúrate de NO tener 'min-height' ni 'height' aquí! La altura se ajustará automáticamente al contenido. */
}

/* Íconos sociales - pantallas grandes (desktop) */
.social-icons {
    display: flex;
    gap: 10px;
    position: absolute; /* **Mantiene los íconos fuera del flujo normal para anclarlos a la izquierda** */
    left: 0; /* Ancla los íconos a la izquierda del .footer-container */
    padding-left: 100px; /* Margen desde el borde izquierdo */    
    /* **Clave para el centrado vertical sin altura fija del padre:** */
    top: 50%; /* Mueve el punto de inicio superior del elemento al 50% de la altura del padre */
    transform: translateY(-50%); /* Ajusta el elemento hacia arriba en la mitad de su propia altura, logrando el centrado */
}

/* Íconos visuales */
.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: var(--blanco);
    border-radius: 50%;
    color: var(--color-primario);
    font-size: 15px;
    transition: transform 0.3s ease;
}

.social-icons a:hover {
    transform: scale(1.2);
    color: var(--color-terciario);
}

/* Texto del footer */
.footer-text {
    text-align: center;
    width: 100%; /* Asegura que el texto ocupe todo el ancho para que 'text-align: center' funcione bien */
    /* Este elemento es el que principalmente determinará la altura del footer-container en pantallas grandes */
}

footer p {
    margin: 5px 0;
}

/* Marca de Agua */
.marca-agua {
    text-align: center;
    width: 100%;
    color: white;
    opacity: 0.5;
    font-size: 1.0rem;
    font-style: italic;
}

/* Responsive para pantallas ≤768px (móviles) */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Apila los elementos (íconos y texto) verticalmente */
        align-items: center; /* Centra horizontalmente los elementos apilados */
        padding: 0 20px; /* Ajusta el padding horizontal en móviles */
    }

    .social-icons {
        position: static; /* **CRUCIAL**: Vuelve el elemento al flujo normal del documento para que Flexbox lo apile y centre */
        padding-left: 0; /* Elimina el padding izquierdo específico de desktop */
        justify-content: center; /* Centra los íconos horizontalmente cuando están apilados */
        margin-bottom: 15px; /* Añade espacio debajo de los íconos cuando están apilados */
        
        /* Desactiva las propiedades de centrado vertical absoluto de desktop */
        top: auto; 
        transform: none; 
    }

    /* Opcional: Si quieres ajustar el texto del footer en móvil para que no ocupe 100% de ancho */
    .footer-text {
        width: auto; /* Permite que el ancho del texto se ajuste a su contenido */
    }
}

/* Responsive para pantallas ≤768px (móviles) */
@media (max-width: 576px) {
    footer {
         padding: 20px 0; /* Define el padding superior e inferior fijo del footer */
    }
       .social-icons {
        margin-bottom: 10px; /* Añade espacio debajo de los íconos cuando están apilados */
    }
    .marca-agua {
          font-size: 0.8rem; /* Tamaño le ra
    }
}