/* Pie de página */
.footer {
    display: flex;
    justify-content: space-between; /* Distribuye las columnas con espacio entre ellas */
    align-items: flex-start; /* Alinea las columnas al principio */
    padding: 60px 20px; /* Ajuste del padding superior e inferior */
    background-color: #003b43; /* Fondo más oscuro */
    color: white; /* Texto blanco */
    margin-top: 40px; /* Menos espacio superior */
    border-top: 5px solid #fff; /* Borde superior blanco */
    box-sizing: border-box; /* Ajusta el box-sizing */
    flex-wrap: wrap; /* Permite que las columnas se apilen en pantallas pequeñas */
    gap: 40px; /* Más espacio entre las columnas */
}

/* Columnas dentro del pie de página */
.footer .column {
    width: 30%; /* Cada columna ocupa el 30% en pantallas grandes */
    padding: 20px; /* Más padding interno para mayor espacio */
    text-align: center; /* Centra el texto dentro de cada columna */
}

/* Títulos de las columnas */
.footer h3 {
    font-size: 1.2rem; /* Tamaño moderado para los títulos */
    margin-bottom: 12px; /* Margen inferior para separar los títulos */
    font-weight: 600; /* Fuente semi-negrita para mayor énfasis */
    color: #ffffff; /* Color blanco para el título */
}

/* Enlaces dentro del pie de página */
.footer a {
    color: white; /* Color blanco para los enlaces */
    text-decoration: none; /* Eliminar subrayado */
    display: block; /* Hace que los enlaces ocupen todo el ancho */
    margin: 6px 0; /* Espacio entre enlaces */
    font-size: 12px; /* Reducir tamaño de fuente a 11px */
    transition: color 0.3s ease; /* Transición suave en el cambio de color */
}

.footer a:hover {
    color: #ffcb00; /* Color amarillo al pasar el mouse */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Resposividad para pantallas pequeñas */
@media (max-width: 768px) {
    .footer {
        flex-direction: column; /* Apilar las columnas en pantallas pequeñas */
        align-items: center; /* Centrar las columnas */
        padding-top: 40px; /* Menos padding en la parte superior para móviles */
        padding-bottom: 40px; /* Menos padding en la parte inferior para móviles */
    }

    .footer .column {
        width: 100%; /* Las columnas ocupan el 100% en pantallas pequeñas */
        margin-bottom: 30px; /* Añadir margen entre columnas */
    }

    .footer h3 {
        font-size: 1.1rem; /* Títulos más pequeños en pantallas pequeñas */
        margin-bottom: 10px; /* Margen más pequeño */
    }

    .footer a {
        font-size: 10px; /* Enlaces más pequeños en pantallas pequeñas */
    }
}

/* Texto de copyright separado más abajo */
.footer-copy {
    width: 100%;
    text-align: center; /* Centrado del texto */
    margin-top: 0px; /* Mayor separación desde las columnas */
    font-size: 12px; /* Tamaño de fuente reducido para el copyright */
    color: white; /* Color blanco */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra verticalmente si hay más de una línea */
}

/* Estilo para el enlace en el copyright */
.footer-copy a {
    color: #ffcb00; /* Resalta el enlace en amarillo */
    text-decoration: none;
    font-weight: 600; /* Negrita para el enlace */
    margin-left: 5px; /* Espacio entre el texto y el enlace */
    font-size: 11px; /* Igual que el texto del copyright */
}

/* Sombra sutil para los enlaces en el pie de página */
.footer a {
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer a:hover {
    color: #ffcb00; /* Color amarillo */
    text-decoration: underline;
    transform: scale(1.05); /* Efecto de ampliación al pasar el ratón */
}