/* FOOTER */
/* Estilos Generales del Footer */
footer {
    background-color: #00295E;
    /* Fondo azul oscuro */
    color: white;
    /* Texto blanco */
    padding: 40px 0;
    /* Espaciado vertical */
    border-top: 5px solid #007FB6;
    /* Borde superior */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Sombra suave */
    font-family: 'Arial';
}

/* Contenedor Principal del Footer */
.footer-container {
    display: flex;
    /* Flexbox para alineación */
    justify-content: space-around;
    /* Espacio entre columnas */
    flex-wrap: wrap;
    /* Ajuste flexible en pantallas pequeñas */
    max-width: 1200px;
    /* Ancho máximo */
    margin: 0 auto;
    /* Centrando el contenedor */
    padding: 0 20px;
    /* Espaciado horizontal */
}

/* Estilos de las Columnas */
.footer-column {
    flex: 1;
    /* Columnas flexibles */
    min-width: 250px;
    /* Ancho mínimo */
    margin: 20px;
    /* Espaciado entre columnas */
    text-align: center;
    /* Centrando el texto */
}

/* Títulos de las Columnas */
.footer-column h3 {
    margin-bottom: 15px;
    /* Espaciado inferior */
    color: #ffffff;
    /* Color del título */
    font-size: 1.5rem;
    /* Tamaño de fuente del título */
}

/* Párrafos dentro del Footer */
.footer-column p {
    margin-bottom: 15px;
    /* Espaciado inferior en párrafos */
    font-size: 1rem;
    /* Tamaño de fuente */
}

/* Estilo para los íconos de redes sociales */
.social-media {
    display: flex;
    /* Flexbox para los íconos */
    justify-content: center;
    /* Alinear los íconos al centro */
    gap: 25px;
    /* Espacio entre los íconos */
    padding: 10px 0;
    /* Espaciado vertical */
}

/* Estilo de los íconos de redes sociales */
.social-media img {
    width: 35px;
    /* Tamaño de los íconos */
    height: 35px;
    /* Tamaño de los íconos */
    transition: transform 0.3s ease;
    /* Transición suave */
}

/* Efecto de pulsación en hover */
.social-media a:hover img {
    animation: pulsate 1s infinite;
    /* Animación de pulsación infinita */
}

/* Animación de pulsación infinita */
@keyframes pulsate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
        /* Aumenta ligeramente el tamaño */
    }

    100% {
        transform: scale(1);
    }
}

/*MAPA*/
/* Estilo del botón en el footer */
.footer-column .btn {
    display: inline-block;
    /* Asegura que el enlace se comporte como un bloque */
    padding: 10px 20px;
    /* Espaciado interno del botón */
    background-color: #007FB6;
    /* Color de fondo azul celeste */
    color: white;
    /* Color del texto del botón */
    border: none;
    /* Sin borde */
    border-radius: 5px;
    /* Bordes redondeados */
    text-decoration: none;
    /* Eliminar subrayado */
    font-size: 1rem;
    /* Tamaño de fuente igual al de los otros elementos */
    font-weight: 600;
    /* Peso de fuente semi-negrita */
    transition: background-color 0.3s ease;
    /* Transición suave para el fondo */
}

/* Efecto hover para el botón */
.footer-column .btn:hover {
    background-color: #005f8c;
    /* Color de fondo más oscuro al pasar el ratón */
}

/* Estilo para la parte inferior del Footer */
.footer-bottom {
    text-align: center;
    /* Centrar el texto */
    padding: 20px 0;
    /* Espaciado vertical */
    background-color: #00295E;
    /* Fondo azul oscuro */
    border-top: 3px solid rgba(0, 64, 148, 0.747);
    /* Línea superior sutil */
    font-size: 0.85rem;
    /* Tamaño de fuente más pequeño */
    font-family: 'Arial';
    font-weight: bold;
}

/* Estilo de párrafos en la parte inferior */
.footer-bottom p {
    margin: 8px 0;
    /* Espaciado vertical en párrafos */
    font-size: 0.95em;
    /* Tamaño de fuente más grande para mejor legibilidad */
    color: #bbbbbbd0;
    /* Color gris más suave para el texto */
    line-height: 1.6;
    /* Espaciado entre líneas para una lectura más cómoda */
    transition: color 0.3s ease;
    /* Transición suave para cambios de color */
}

/* Estilo de enlaces en la parte inferior */
.footer-bottom a {
    color: #007FB6;
    /* Color azul celeste para los enlaces */
    text-decoration: none;
    /* Eliminar subrayado por defecto */
    font-weight: 600;
    /* Peso de fuente semi-negrita para destacar los enlaces */
    position: relative;
    /* Para posicionar el pseudo-elemento */
    transition: color 0.3s ease;
    /* Transición suave para el color */
}

/* Efecto hover para los enlaces */
.footer-bottom a {
    color: transparent;
    /* Hacer el color del texto transparente inicialmente */
    background-image: linear-gradient(to right, #007FB6, #007FB6, #007FB6);
    /* Degradado horizontal */
    background-clip: text;
    /* Hacer que el fondo se aplique al texto */
    transition: background-position 0.3s ease;
    /* Transición suave para el fondo */
    background-size: 200%;
    /* Aumentar el tamaño del fondo para el efecto de movimiento */
    background-position: 0% 50%;
    /* Posicionar el fondo al inicio */
}

/* Efecto hover */
.footer-bottom a:hover {
    background-position: 100% 50%;
    /* Mover el fondo al final para el efecto hover */
}

/* Pseudo-elemento para el efecto de subrayado en hover */
.footer-bottom a::after {
    content: '';
    /* Pseudo-elemento vacío */
    display: block;
    /* Mostrar como bloque */
    width: 0;
    /* Ancho inicial */
    height: 2px;
    /* Altura del subrayado */
    background-color: #007FB6;
    /* Color del subrayado */
    transition: width 0.3s ease;
    /* Transición suave para el ancho */
    position: absolute;
    /* Posición absoluta */
    bottom: -4px;
    /* Espaciado desde la parte inferior */
    left: 0;
    /* Alinear a la izquierda */
}

/* Expande el subrayado en hover */
.footer-bottom a:hover::after {
    width: 100%;
    /* Expande a ancho completo en hover */
}

/* Estilo adicional para el footer */
.footer-bottom {
    background-color: #00295E;
    /* Fondo gris claro para el footer */
    padding: 15px;
    /* Espaciado interno en el footer */
    border-top: 3px solid #007fb680;
    /* Borde superior azul celeste */
    text-align: center;
    /* Centrar el texto en el footer */
}

.footer-column .brands {
    display: flex;
    gap: 20px;
    /* Espacio entre los logos */
    justify-content: center;
    /* Centra los logos horizontalmente */
    align-items: center;
    margin-top: 10px;
    /* Separación del título */
}

.footer-column .brands a img {
    max-width: 100px;
    /* Ajusta el tamaño máximo de los logos */
    height: auto;
    transition: transform 0.3s ease;
    /* Suaviza la animación */
}

.footer-column .brands a:hover img {
    transform: scale(1.1);
    /* Aumenta el tamaño al hacer hover */
    filter: brightness(1.1);
    /* Hace el logo un poco más claro al hacer hover */
}

/* MEDIA QUERIES */

/* Estilos generales para dispositivos móviles */
@media (max-width: 767px) {
    footer {
        padding: 20px 0;
        /* Reducir el espaciado vertical */
    }

    .footer-container {
        flex-direction: column;
        /* Cambiar a columna en móviles */
        align-items: center;
        /* Centrar columnas */
        padding: 0 10px;
        /* Espaciado horizontal reducido */
    }

    .footer-column {
        margin: 10px 0;
        /* Espaciado entre columnas */
        text-align: center;
        /* Alinear texto al centro */
        min-width: 100%;
        /* Asegurar que ocupen todo el ancho */
    }

    .footer-column h3 {
        font-size: 1.25rem;
        /* Reducir tamaño de fuente de títulos */
    }

    .footer-column p {
        font-size: 0.9rem;
        /* Reducir tamaño de fuente de párrafos */
    }

    .social-media img {
        width: 30px;
        /* Reducir tamaño de los íconos */
        height: 30px;
        /* Reducir tamaño de los íconos */
    }

    .footer-bottom {
        font-size: 0.75rem;
        /* Reducir tamaño de fuente en la parte inferior */
    }
}

/* Estilos para tabletas */
@media (min-width: 768px) and (max-width: 1024px) {
    footer {
        padding: 30px 0;
        /* Ajustar espaciado vertical */
    }

    .footer-container {
        flex-direction: row;
        /* Mantener dirección en fila */
        justify-content: space-around;
        /* Espacio entre columnas */
        padding: 0 20px;
        /* Espaciado horizontal */
    }

    .footer-column {
        margin: 15px;
        /* Espaciado entre columnas */
        min-width: 220px;
        /* Ancho mínimo ajustado */
        text-align: center;
        /* Alinear texto al centro */
    }

    .footer-column h3 {
        font-size: 1.4rem;
        /* Tamaño de fuente de títulos */
    }

    .footer-column p {
        font-size: 0.95rem;
        /* Tamaño de fuente de párrafos */
    }

    .social-media img {
        width: 35px;
        /* Tamaño de íconos para tabletas */
        height: 35px;
        /* Tamaño de íconos para tabletas */
    }

    .footer-bottom {
        font-size: 0.8rem;
        /* Tamaño de fuente en la parte inferior */
    }
}

/* Estilos para pantallas grandes */
@media (min-width: 1025px) {
    footer {
        padding: 40px 0;
        /* Espaciado vertical estándar */
    }

    .footer-container {
        flex-direction: row;
        /* Mantener dirección en fila */
        justify-content: space-around;
        /* Espacio entre columnas */
    }

    .footer-column {
        margin: 20px;
        /* Margen estándar para pantallas grandes */
        min-width: 250px;
        /* Ancho mínimo */
        text-align: center;
        /* Alinear texto al centro */
    }

    .footer-column h3 {
        font-size: 1.5rem;
        /* Tamaño de fuente de títulos */
    }

    .footer-column p {
        font-size: 1rem;
        /* Tamaño de fuente de párrafos */
    }

    .social-media img {
        width: 35px;
        /* Tamaño de íconos para pantallas grandes */
        height: 35px;
        /* Tamaño de íconos para pantallas grandes */
    }

    .footer-bottom {
        font-size: 0.85rem;
        /* Tamaño de fuente en la parte inferior */
    }
}