/* ===========================
   Footer moderno con imágenes de logos
=========================== */
footer {
    background: #001c4c; /* Azul principal */
    color: #ffffff;       /* Texto blanco */
    padding: 40px 20px;
    border-top: 2px solid #ec000b; /* Rojo para acento */
    border-radius: 15px 15px 0 0;
    box-shadow: 0 -5px 15px rgba(0,28,76,0.3);
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
}

.footer-info {
    flex: 1 1 300px;
    text-align: left;
}

.footer-info h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #ec000b; /* Rojo acento */
}

.footer-info p {
    font-size: 0.95rem;
    margin: 5px 0;
    color: #ffffff;
}

.footer-social {
    flex: 1 1 200px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* ===========================
   Logos de redes sociales
=========================== */
.footer-social a img {
    width: 40px;       
    height: 40px;      
    object-fit: contain; 
    transition: transform 0.3s, filter 0.3s;
    filter: brightness(1) invert(0); /* mantiene colores originales */
}

.footer-social a img:hover {
    transform: scale(1.2);
    filter: brightness(1.2) drop-shadow(0 0 5px #ec000b);
}

.footer-copy {
    text-align: center;
    font-size: 0.85rem;
    margin-top: 25px;
    border-top: 1px solid #99a4b8; /* Gris azulado */
    padding-top: 10px;
    color: #ffffff;
}

/* ===========================
   Media Queries - Footer Responsivo
=========================== */

/* Pantallas grandes - desktop */
@media (max-width: 1599px) {
    footer { padding: 35px 18px; }
    .footer-info h3 { font-size: 1.7rem; }
    .footer-info p, .footer-copy { font-size: 0.83rem; }
}

/* Laptops medianas */
@media (max-width: 1199px) {
    footer { padding: 32px 16px; }
    .footer-info h3 { font-size: 1.6rem; }
    .footer-info p, .footer-copy { font-size: 0.82rem; }
}

/* Tablets grandes */
@media (max-width: 1023px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-social { justify-content: center; margin-top: 20px; }
    footer { padding: 30px 15px; }
    .footer-info h3 { font-size: 1.5rem; }
    .footer-info p, .footer-copy { font-size: 0.8rem; }
}

/* Tablets pequeñas */
@media (max-width: 767px) {
    footer { padding: 28px 12px; }
    .footer-info h3 { font-size: 1.3rem; }
    .footer-info p, .footer-copy { font-size: 0.78rem; }
}

/* Móviles medianos */
@media (max-width: 599px) {
    footer { padding: 25px 10px; }
    .footer-info h3 { font-size: 1.2rem; }
    .footer-info p, .footer-copy { font-size: 0.75rem; }
}

/* Móviles pequeños */
@media (max-width: 479px) {
    footer { padding: 22px 8px; }
    .footer-info h3 { font-size: 1.1rem; }
    .footer-info p, .footer-copy { font-size: 0.7rem; }
}

/* Muy pequeños (<360px) */
@media (max-width: 359px) {
    footer { padding: 20px 5px; }
    .footer-info h3 { font-size: 1rem; }
    .footer-info p, .footer-copy { font-size: 0.65rem; }
}