/* ==========================================================================================
   ESTRUCTURA GENERAL DEL FOOTER y MENU /   AJUSTE DE DESPLAZAMIENTO (SCROLL-MARGIN) SESIONES
   ======================================================================================= */


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f4f4f4;
color:#333;
}

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
background:white;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
z-index:1000;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 20px;
}

/* LOGO AREA */

.logo-area{
display:flex;
align-items:center;
gap:10px;
max-width:420px;
}

.logo-area img{
height:40px;
width:auto;
}

.logo-text{
display:flex;
flex-direction:column;
line-height:1.1;
}

.logo-title{
font-size:14px;
font-weight:700;
color:#8b0000;
}

.logo-sub{
font-size:12px;
color:#444;
}

/* MENU */

.menu{
display:flex;
gap:18px;
align-items:center;
}

.menu a{
text-decoration:none;
color:#333;
font-size:14px;
}

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

/* HAMBURGER */

.hamburger{
display:none;
font-size:26px;
cursor:pointer;
}

/* HERO */

.hero{
height:90vh;
margin-top:70px;
position:relative;
overflow:hidden;
}

.hero img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
top:0;
left:0;
opacity:0;
transition:opacity 2s ease-in-out;
}

.hero img.active{
opacity:1;
}

.hero-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,0.65);
color:white;
padding:45px 50px;
border-radius:14px;
text-align:center;
max-width:750px;
width:90%;
}

.hero-text h1{
color:white;
margin-bottom:5px;
}

.hero-subtexto{
font-size:14px;
margin-top:2px;
line-height:1.4;
opacity:0.9;
}
.hero-text h1{
font-size:36px;
margin-bottom:10px;
}

.hero-text h2{
color:#ffd700;
margin-bottom:15px;
}

.hero-text p{
font-size:20px;
line-height:1.6;
}

.linea-emaus{
width:120px;
height:2px;
background:#ffd700;
border:none;
margin:10px auto;
opacity:0.8;
}


/* FOOTER */

.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;
}



/* CONFIGURACIÓN PARA ESCRITORIO (Desktop)CONFIGURACIÓN PARA ESCRITORIO (DesktopCONFIGURACIÓN PARA ESCRITORIO (Desktop */

/* --- VISTA PARA ESCRITORIO (Desktop) --- */
.emaus-grid-acciones {
    display: flex;
    flex-direction: row; /* Asegura la fila */
    justify-content: center;
    align-items: stretch; /* Mantiene la misma altura en todas las tarjetas */
    gap: 20px;
    padding: 50px 5%;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* Ajuste para que las tarjetas no se aplasten ni se expandan de más */
.emaus-card-accion, .evangelio-card {
    flex: 1; /* Reparte el espacio equitativamente */
    min-width: 300px; /* Evita que se compriman */
    max-width: 420px; /* Evita que el Evangelio crezca demasiado */
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Control de imágenes para evitar que se corten en Desktop */
.emaus-card-accion img {
    width: 100%;
    height: 250px;
    object-fit: cover; /* Mantiene la proporción de la imagen */
    border-radius: 12px;
    margin-bottom: 15px;
}

/* CONFIGURACIÓN PARA DESKTOP */
.emaus-card-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px; /* Ancho fijo para que no se deforme */
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.emaus-card-accion img {
    width: 100%; /* Ocupa todo el ancho de la tarjeta */
    height: 250px; /* Altura fija para mantener la simetría */
    object-fit: contain; /* CLAVE: Ajusta la imagen completa sin cortarla */
    background-color: #f9f9f9; /* Fondo suave por si la imagen es más angosta */
    border-radius: 15px;
    margin-bottom: 15px;
}

/* EFECTO DE BOTÓN: ROJO A AZUL */
.btn-accion {
    background-color: #cc0000;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    transition: 0.3s ease;
    text-decoration: none;
    font-weight: bold;
}


.btn-accion:hover {
    background-color: #003366 !important; /* Azul de la Hermandad */
}
/* --- EFECTO DE BOTONES: ROJO A AZUL --- */
.btn-accion {
    background-color: #cc0000; /* Rojo original */
    color: white;
    transition: 0.4s ease;
    border: none;
    cursor: pointer;
}

.btn-accion:hover {
    background-color: #003366 !important; /* Azul Hermandad al pasar el mouse */
}

@media (max-width:768px){

.nav-container{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 12px;
}

/* logo + texto */

.logo{
display:flex;
align-items:center;
gap:8px;
}

/* imagen del logo */

.logo img{
height:36px;
}

/* texto del logo */

.logo span{
font-size:14px;
font-weight:600;
color:#8b0000;
line-height:1.2;
}

/* hamburguesa */

.hamburger{
font-size:24px;
cursor:pointer;
}

}

/* --- VISTA PARA MÓVIL (Lo que ya te funcionaba) --- */
@media (max-width: 992px) {
    .emaus-grid-acciones {
        flex-direction: column; /* Apila las tarjetas verticalmente */
        align-items: center;
    }

    .emaus-card-accion, .evangelio-card {
        width: 100% !important;
        max-width: 400px;
        margin-bottom: 25px;
    }
}


/* Ajuste individual de tarjetas en Desktop */
.emaus-card-accion, .evangelio-card {
    flex: 1; /* Distribuye el espacio equitativamente */
    min-width: 300px;
    max-width: 400px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* CONFIGURACIÓN PARA MÓVIL (Lo que ya te funcionaba bien) */
@media (max-width: 992px) {
    .emaus-grid-acciones {
        flex-direction: column; /* Cambia a columna en móviles/tablets */
        align-items: center;
    }

    .emaus-card-accion, .evangelio-card {
        width: 100% !important;
        max-width: 450px;
        margin-bottom: 25px;
    }
}

.btn-accion {
    background-color: #cc0000;
    transition: background-color 0.3s ease;
}
.btn-accion:hover {
    background-color: #003366 !important;
}


/* CONFIGURACIÓN PARA ESCRITORIO (Desktop)CONFIGURACIÓN PARA ESCRITORIO (DesktopCONFIGURACIÓN PARA ESCRITORIO (Desktop */

.btn-accion {
    background-color: #cc0000;
    transition: background-color 0.4s ease;
}

.btn-accion:hover {
    background-color: #003366 !important; /* Azul Hermandad */
}


/* Ajustes para Celulares (Pantallas menores a 768px) */
@media (max-width: 768px) {
    /* Evita que la página "baile" de lado a lado */
    html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    /* Ajuste del Menú Lateral para que no estorbe */
    .nav-menu {
        width: 80% !important;
        position: fixed;
        right: -80%; /* Escondido por defecto */
        transition: 0.3s;
    }

    .nav-menu.active {
        right: 0; /* Solo se muestra al activarlo */
    }
}

/* AJUSTES PARA DISPOSITIVOS MÓVILES (Celulares) */
@media (max-width: 768px) {
    /* 1. Evita que la página se mueva hacia los lados */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    /* 5. Corrige el menú que empuja el contenido */
    .nav-menu {
        width: 80% !important;
        right: -80%; /* Escondido por defecto */
    }

    .nav-menu.active {
        right: 0; /* Solo se muestra al activarlo */
    }
}


/* ICONOS REDES */

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

.social-links a{
background:#222;
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:18px;
transition:all 0.3s ease;
}

/* FACEBOOK */

.social-fb:hover{
background:#8b0000;
transform:translateY(-2px);
}

/* YOUTUBE */

.social-yt:hover{
background:#8b0000;
transform:translateY(-2px);
}

/* INSTAGRAM */

.social-ig:hover{
background:#8b0000;
transform:translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:900px){

.logo-sub{
display:none;
}

.menu{
display:none;
flex-direction:column;
background:white;
position:absolute;
top:70px;
right:20px;
padding:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.menu.active{
display:flex;
}

.hamburger{
display:block;
}

.hero-text h1{
font-size:28px;
}

.hero-text h2{
font-size:20px;
}

.hero-text p{
font-size:17px;
}

}

/* ======================================================
   BLOQUE DE REPARACIÓN INTEGRAL PARA MOBILE
====================================================== */
@media (max-width: 768px) {

    /* 1. LOGO: Mostrar las dos líneas completas */
    .logo-area {
        max-width: 85% !important;
        display: flex !important;
        align-items: center !important;
    }
    .logo-text {
        display: flex !important;
        flex-direction: column !important;
    }
    .logo-title {
        font-size: 13px !important;
        white-space: nowrap !important; /* Evita que se corte el nombre */
        display: block !important;
        color: #8b0000 !important;
    }
    .logo-sub {
        font-size: 11px !important;
        display: block !important;
        color: #444 !important;
    }


    /* EXTRA: Ajuste del Copyright Arial 10.5 */
    .footer-bottom p, .copyright-black-strip p {
        font-family: Arial, sans-serif !important;
        font-size: 10.5pt !important;
    }
}

/* ======================================================
   LOGO: TAMAÑO REDUCIDO Y EQUILIBRADO
====================================================== */
.logo-area .logo-text .logo-title, 
.logo-area .logo-text .logo-sub {
    font-size: 15px !important;      /* Tamaño reducido para mayor elegancia */
    font-weight: 700 !important;      /* Negrita clara */
    color: #8b0000 !important;        /* Rojo institucional */
    font-family: Arial, sans-serif !important;
    line-height: 1.2 !important;      /* Espaciado cómodo entre líneas */
    display: block !important;
    text-align: left !important;
}

/* ======================================================
   AJUSTE DE DESPLAZAMIENTO (SCROLL-MARGIN)
   Evita que el menú fijo tape los títulos de las secciones
====================================================== */

/* Aplicamos a todas las secciones principales */
section[id], 
#quienes-somos, 
#historia, 
#que-es-emaus, 
#retiros-emaus {
    scroll-margin-top: 100px !important; /* Ajusta este valor según la altura de tu navbar */
}

/* Ajuste específico para Mobile si tu navbar es más alta o baja */
@media (max-width: 768px) {
    section[id],
    #quienes-somos, 
    #historia, 
    #que-es-emaus, 
    #retiros-emaus {
        scroll-margin-top: 80px !important;
    }
}

/*  RERACION DEL MENU / ESPACIO GRIS DEL DISEÑO */

.menu{
display:flex;
gap:18px;
align-items:center;
}

.hamburger{
display:none;
font-size:26px;
cursor:pointer;
}

/* MOBILE */

@media(max-width:900px){

.menu{
display:none;
flex-direction:column;
position:absolute;
top:70px;
right:20px;
background:white;
padding:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.menu.active{
display:flex;
}

.hamburger{
display:block;
}

}.menu{
display:flex;
gap:18px;
align-items:center;
}

.hamburger{
display:none;
font-size:26px;
cursor:pointer;
}

/* MOBILE */

@media(max-width:900px){

.menu{
display:none;
flex-direction:column;
position:absolute;
top:70px;
right:20px;
background:white;
padding:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.menu.active{
display:flex;
}

.hamburger{
display:block;
}

}
.hero{
height:90vh;
margin-top:70px;
position:relative;
overflow:hidden;

}

/* 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;
}