/* /templates/eduai/css/sections/footer.css */

/* Estilos para el Footer (Pie de página) */
/* La etiqueta footer tiene id="contacto" */

footer {
    background: var(--dark); /* Fondo oscuro definido en base.css */
    color: white; /* Color de texto principal para el footer */
    padding: 60px 5% 25px; /* Padding superior, horizontal, inferior */
    margin-top: 50px; /* Espacio arriba del footer */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Cuadrícula responsiva para las columnas */
    gap: 25px; /* Espacio entre columnas */
    margin-bottom: 40px; /* Espacio antes del copyright */
}

.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    color: white; /* Asegura que el título sea blanco, aunque el color del footer ya lo es */
}

.footer-column h3::after { /* Línea decorativa debajo de los títulos de columna */
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--primary); /* Color primario definido en base.css */
}

.footer-column ul {
    list-style: none; /* Remueve los bullets por defecto de la lista */
    padding-left: 0; /* Remueve el padding por defecto de la lista */
}

.footer-column ul li {
    margin-bottom: 10px; /* Espacio entre ítems de la lista */
}

.footer-column ul li a {
    color: #aaa; /* Color de los enlaces, un gris claro */
    text-decoration: none;
    transition: var(--transition); /* Transición definida en base.css */
    display: flex; /* Para alinear el ícono (si existe) con el texto */
    align-items: center;
    gap: 8px; /* Espacio entre el ícono y el texto del enlace */
    font-size: 0.9rem;
}

.footer-column ul li a:hover {
    color: white; /* Enlaces se vuelven blancos al pasar el mouse */
    transform: translateX(5px); /* Ligero desplazamiento a la derecha */
}

.footer-column p { /* Párrafos dentro de las columnas del footer (ej. tagline) */
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-column .social-icons {
    /* Los estilos inline en footer.php (display:flex, gap:15px) podrían moverse aquí */
    /* display: flex; */
    /* gap: 15px; */
    /* margin-top: 20px; */
}

.footer-column .social-icons a {
    /* El estilo inline font-size: 1.5rem podría moverse aquí */
    /* font-size: 1.5rem; */
    color: #aaa;
    transition: var(--transition);
}

.footer-column .social-icons a:hover {
    color: white;
    transform: translateY(-2px); /* Ligero desplazamiento hacia arriba */
}

.copyright {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid #333; /* Línea separadora sutil */
    color: #777; /* Color de texto para el copyright, un gris más oscuro */
    font-size: 0.85rem;
}

/* Estilos para el botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    background: #25d366; /* Color verde de WhatsApp */
    color: white;
    border-radius: 50%; /* Círculo perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; /* Tamaño del ícono de WhatsApp */
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); /* Sombra con el color de WhatsApp */
    z-index: 1000; /* Asegura que esté sobre otros elementos (excepto quizás modales muy específicos) */
    transition: var(--transition);
    animation: pulse 2s infinite; /* Animación de pulso definida en base.css */
}

.whatsapp-float:hover {
    transform: scale(1.1) translateY(-5px); /* Efecto de escala y elevación */
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5); /* Sombra más pronunciada */
}

/* Responsive para el Footer */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
        text-align: center; /* Centra el texto de las columnas */
    }
    .footer-column h3::after { /* Centra la línea decorativa debajo del título */
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-column ul {
        /* Podrías querer centrar los items de la lista también si es necesario */
        /* display: inline-block; text-align: left; */ /* Para centrar el bloque de lista pero mantener texto alineado a la izq. */
    }
    .footer-column .social-icons {
        justify-content: center; /* Centra los iconos sociales */
    }
}