/* ======================================================
   FOOTER GLOBAL EMAÚS
====================================================== */

.site-footer{
background:#000;
color:white;
padding:50px 20px 30px;
text-align:center;
}

.footer-title{
color:#ffd700;
margin-bottom:10px;
}

.social-links{
display:flex;
justify-content:center;
gap:15px;
margin-bottom:20px;
}

.social-links a{
background:#222;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-decoration:none;
}

.footer-links{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
margin-bottom:20px;
}

.footer-links a{
color:#ddd;
text-decoration:none;
}

.footer-adoracion{
background:#8b0000;
padding:6px 12px;
border-radius:4px;
color:white !important;
}

.footer-motto{
color:#ffd700;
margin:20px 0;
}

.footer-bottom{
border-top:1px solid #333;
padding-top:15px;
font-size:13px;
color:#bbb;
}


/* Color amarillo para "Síguenos en" y la proclamación de fe */
.footer-redes {
    color: #FFD700 !important; /* Amarillo Dorado */
    font-weight: bold !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    margin: 20px 0 !important;
    display: block !important;
}

/* Opcional: Si quieres que el texto de la resurrección sea un poco más grande */
p.footer-redes:last-of-type {
    font-size: 1.2rem !important;
    letter-spacing: 0.5px;
}

/* 1. Efecto amarillo para los enlaces normales del footer */
.footer-links a:hover {
    color: #FFD700 !important; /* Amarillo Dorado */
    text-decoration: none !important; /* Quita el subrayado si aparece */
    transition: color 0.3s ease; /* Hace que el cambio sea suave */
}

/* 2. Efecto amarillo específico para el botón "+ Música de Adoración" */
/* Como el botón tiene fondo rojo, cambiaremos el color del texto a amarillo */
.footer-adoracion:hover {
    color: #FFD700 !important;
    background-color: #8B0000 !important; /* Un rojo un poco más oscuro al pasar el mouse */
    border-color: #FFD700 !important; /* Si tiene borde, también se pone amarillo */
    transition: all 0.3s ease;
}

/* 3. Ajuste para los iconos de redes sociales (opcional, por si quieres uniformidad) */
.social-links a:hover i {
    color: #FFD700 !important;
    transform: scale(1.2); /* Hace que el icono crezca un poquito */
    transition: all 0.3s ease;
}
.social-links a i{
    transition: all 0.3s ease;
}