/* =========================================

   ESTILOS ESTRUCTURALES DEL FOOTER (3 Columnas)

   ========================================= */

.footer-ayuntamiento {

    background: #1d1d1f; 

    color: #f5f5f7; 

    padding: 90px 20px 45px; 

    margin-top: 80px; 

    text-align: left; 

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Poppins", sans-serif;

    overflow: hidden; 

}



.footer-content { 

    max-width: 1150px; 

    margin: 0 auto; 

    display: grid; 

    /* Forzamos exactamente 3 columnas en pantallas medianas y grandes, tal como los recuadros de la imagen */

    grid-template-columns: repeat(3, minmax(0, 1fr)); 

    gap: 40px; 

    margin-bottom: 50px; 

}



.footer-col {

    display: flex;

    flex-direction: column;

}



.footer-col h3 { 

    color: #ffffff; 

    font-size: 1.2rem; 

    margin-bottom: 25px; 

    font-weight: 600; 

    letter-spacing: 0.5px; 

}



.footer-col p { 

    color: #a1a1a6; 

    font-size: 0.92rem; 

    margin-bottom: 14px; 

    line-height: 1.7; 

    display: flex; 

    align-items: flex-start; 

    gap: 12px; 

}



.footer-col p i { 

    margin-top: 4px; 

    color: #ffffff; 

    opacity: 0.7; 

}



.footer-col a { 

    color: #a1a1a6; 

    font-size: 0.92rem; 

    margin-bottom: 10px; 

    display: inline-block; 

    text-decoration: none; 

    transition: color 0.2s ease; 

}



.footer-col a:hover { 

    color: #ffffff; 

}



/* Enlaces rápidos organizados en filas o inline si se desea */

.footer-links-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 20px;

    margin-bottom: 20px;

}



/* ESTILO PARA EL BOTÓN DE DESCARGAR APP EN EL FOOTER */

.btn-download-app {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: linear-gradient(135deg, #0A84FF 0%, #005bb5 100%);

    color: #ffffff !important;

    padding: 14px 28px;

    border-radius: 25px;

    font-weight: 600;

    font-size: 0.95rem;

    text-decoration: none;

    margin-top: 15px;

    box-shadow: 0 8px 20px rgba(10, 132, 255, 0.3);

    transition: all 0.3s ease;

    border: 1px solid rgba(255, 255, 255, 0.2);

    width: fit-content;

}

.btn-download-app:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(10, 132, 255, 0.5);

    color: #ffffff !important;

}



/* REDES SOCIALES */

.social-links { 

    display: flex; 

    gap: 15px; 

    margin-top: 20px; 

}



.social-links a { 

    display: flex; 

    align-items: center; 

    justify-content: center; 

    width: 42px; 

    height: 42px; 

    border-radius: 50%; 

    background: rgba(255, 255, 255, 0.1); 

    color: #ffffff; 

    transition: all 0.3s ease; 

}



.social-links a:hover { 

    background: #ffffff; 

    color: #1d1d1f; 

    transform: translateY(-3px); 

}



/* PARTE INFERIOR (COPYRIGHT) */

.footer-bottom { 

    border-top: 1px solid rgba(255, 255, 255, 0.1); 

    padding-top: 30px; 

    max-width: 1150px; 

    margin: 0 auto; 

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

    flex-wrap: wrap; 

    gap: 15px; 

}



.footer-bottom p { 

    color: #a1a1a6; 

    font-size: 0.88rem; 

    margin: 0; 

}



.footer-bottom .vandev-credito a { 

    color: #ffffff; 

    font-weight: 700; 

    text-decoration: none; 

    letter-spacing: 0.5px; 

}



/* RESPONSIVE MÓVIL (Se adapta a una sola columna en pantallas pequeñas) */

@media (max-width: 768px) {

    .footer-content {

        grid-template-columns: 1fr; /* Una columna en celulares */

        gap: 35px;

    }

    .footer-ayuntamiento {

        padding: 60px 20px 35px; 

    }

    .footer-bottom { 

        flex-direction: column; 

        text-align: center; 

    }

    .logos-ayuntamiento { 

        justify-content: center !important; 

    }

} 

/* =========================================
   ESTILOS DE ANIMACIÓN DE ENTRADA DEL FOOTER
   ========================================= */

/* Estado inicial (oculto antes de hacer scroll) */
.anim-hidden {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Direcciones iniciales de desplazamiento */
.anim-left {
    transform: translateX(-50px);
}

.anim-up {
    transform: translateY(40px);
}

.anim-right {
    transform: translateX(50px);
}

/* Estado final cuando JavaScript detecta que es visible en pantalla */
.anim-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, 0) !important;
}

/* Retardos escalonados para las columnas */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.25s;
}

.delay-3 {
    transition-delay: 0.4s;
}