/* --- Estilos generales para el Footer --- */
.main-footer {
    /* Degradado sutil en lugar de color plano */
    background: linear-gradient(to bottom, #2c3e50, #1a2a3a); /* Un degradado de azul oscuro a más oscuro */
    color: #ecf0f1; /* Texto claro para contraste */
    padding: 60px 20px; /* Más padding para una sensación más espaciosa */
    font-family: 'Open Sans', sans-serif; /* Usar una fuente legible */
    line-height: 1.8; /* Mejorar legibilidad */
    position: relative; /* Asegura que el footer esté encima de cualquier fondo giratorio de la página */
    z-index: 10; /* Un z-index alto para asegurar que siempre esté visible */
}

/* Contenedor del Grid para las columnas del footer */
.main-footer .container-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px; /* Mayor espacio entre las columnas */
    max-width: 1200px; /* Ancho máximo para el contenido del footer */
    margin: 0 auto; /* Centrar el footer en la página */
    align-items: start; /* Alinea los elementos al inicio de su celda */
}

/* Estilos para cada columna del footer */
.footer-col {
    padding: 0 10px;
}

.footer-col h3 {
    font-size: 1.6em; /* Tamaño de título más prominente */
    color: #00bfff; /* Un color de acento azul brillante, puedes usar #3498db si prefieres el anterior */
    margin-bottom: 25px; /* Espacio debajo del título */
    position: relative;
    padding-bottom: 12px; /* Más padding para la línea decorativa */
    font-family: 'Montserrat', sans-serif; /* O la fuente que uses para tus encabezados */
    font-weight: 600; /* Un poco más de peso */
}

/* Línea decorativa y animada debajo de los títulos h3 */
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Ancho de la línea */
    height: 3px; /* Grosor de la línea */
    background-color: #00bfff; /* Color de acento para la línea */
    border-radius: 2px; /* Esquinas redondeadas para la línea */
    transition: width 0.3s ease; /* Transición para el efecto hover */
}

.footer-col h3:hover::after {
    width: 90px; /* Se expande al pasar el ratón */
}

.footer-col p {
    font-size: 0.95em;
    color: #bdc3c7; /* Color de texto más suave */
    margin-bottom: 15px;
}

/* Estilos para los iconos sociales */
.social-icons {
    margin-top: 20px;
    display: flex; /* Para controlar el espacio entre iconos */
    gap: 15px; /* Espacio entre los iconos */
}

.social-icons a {
    display: inline-flex; /* Permite centrar el icono dentro del círculo */
    align-items: center;
    justify-content: center;
    width: 45px; /* Tamaño del círculo */
    height: 45px;
    font-size: 24px; /* Tamaño del icono social */
    color: #ecf0f1; /* Color del icono */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente para el círculo */
    border-radius: 50%; /* Icono en forma de círculo */
    transition: all 0.3s ease; /* Transición suave para hover */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombra sutil */
}

.social-icons a:hover {
    color: #2c3e50; /* Color de texto más oscuro al pasar el ratón */
    background-color: #00bfff; /* Fondo de acento al pasar el ratón */
    transform: translateY(-5px) scale(1.05); /* Efecto de elevación y ligero crecimiento */
    box-shadow: 0px 8px 15px rgba(0, 191, 255, 0.4); /* Sombra con el color de acento */
}

/* Estilos para las listas de enlaces (Enlaces Rápidos) */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    text-decoration: none;
    color: #bdc3c7;
    font-size: 0.95em;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col ul li a:hover {
    color: #00bfff; /* Cambio de color al pasar el ratón */
    padding-left: 5px; /* Pequeño desplazamiento hacia la derecha */
}

/* Estilo para los iconos de información de contacto */
.footer-col.contact-info p i {
    margin-right: 10px;
    color: #00bfff; /* Color de acento para los iconos de contacto */
    font-size: 1.1em;
}

/* Estilos para la sección de copyright */
.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Línea divisoria un poco más visible */
    font-size: 0.85em;
    color: #95a5a6;
}

/* --- Media Queries para la adaptación a pantallas más pequeñas --- */
@media (max-width: 768px) {
    .main-footer .container-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-col h3 {
        text-align: center;
    }

    .footer-col h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .social-icons {
        justify-content: center;
    }

    .footer-col ul {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .main-footer {
        padding: 40px 15px;
    }

    .footer-col h3 {
        font-size: 1.3em;
    }

    .social-icons a {
        font-size: 22px;
        width: 40px;
        height: 40px;
    }
}