/* =========================================================
   style.css - Estilos compartidos para todas las páginas
   Retiros Espirituales
   
   Estructura de este archivo (para que sea fácil de ubicar
   qué modificar):
     1. Variables (colores, fuentes) 
     2. Reset básico
     3. Header / Menú de navegación
     4. Sección Hero (bienvenida)
     5. Secciones generales (títulos, contenedores)
     6. Tarjetas (eventos, sedes)
     7. Galería multimedia
     8. Footer
     9. Responsive (pantallas pequeñas)
   ========================================================= */

/* 1. VARIABLES ------------------------------------------- */
:root {
    --color-primario: #755000;   /* color de marca */
    --color-secundario: #f5a623; /* dorado/acento */
    --color-terciario: #f5a5234d;
    --color-texto: #333333;
    --color-fondo-claro: #fffbf2;
    --color-blanco: #ffffff;
    --color-alter: rgb(255, 255, 255);
    --fuente-principal: 'Segoe UI', Arial, sans-serif;
    --max-ancho-contenido: 1100px;
    --color-fondo-tarjeta: #7a6ca8;
    --fondo-alter:rgba(141, 114, 57, 0.75);
}

/* 2. RESET BÁSICO ------------------------------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    height: 100%; /* para simular scroll largo */
    overflow-y: auto;

    font-family: var(--fuente-principal);
    color: var(--color-texto);
    line-height: 1.6;
    background-color: var(--color-fondo-claro);
}

img {
    max-width: 100%;
    display: block;
}

/* Efecto de aparición al hacer scroll */
.aparecer {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.aparecer.visible {
    opacity: 1;
    transform: translateY(0);
}

.aparecer a{
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.aparecer.visible a{
    opacity: 1;
    transform: translateY(0);
}
.anuncio-bloque{
    display: inline-block;
    font-size: 0.85rem;
    background-color: var(--color-secundario);
    padding: 4px 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    margin-right: 6px;
    color: var(--color-alter);
}  
.texto-parrafo {
  max-width: 800px;      /* ancho máximo del bloque */
  font-size: 1.15rem;
  color: var(--color-blanco);
  margin: 0 auto; 
  text-align: justify;   /* distribuye el texto como párrafo */
  line-height: 1.6;      /* altura de línea para mejor lectura */
  hyphens: none;
  border-radius: 8px;
  padding: 15px;
  word-break: break-word;
}
a {
    align-items: center;
    position: relative;
    color: var(--color-blanco);
    text-align: center;
    padding: 0px;

    max-width: 650px;
    margin: 0 auto 100px auto;
    font-size: 1.15rem;

    text-decoration: none;
    box-sizing: border-box;
    margin: 0;
    
}

ul {
    list-style: none;
}

.contenedor {
    max-width: var(--max-ancho-contenido);
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
    
}

.contacto {
  display: flex;          /* coloca ícono y texto en fila */
  align-items: center;    /* centra verticalmente */
  gap: 8px;               /* espacio entre ícono y texto */
}
/* 3. HEADER / MENÚ DE NAVEGACIÓN ---------------------------- */
.encabezado {
    background-color: var(--color-primario);
    position: sticky;
    top: 0;
    z-index: 100;
}

.barra-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-ancho-contenido);
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
    height: 70px;    

    position: fixed;
    top: 0;
    left: 0;
    right: 0;              /* clave: junto con left:0, fuerza el ancho completo */
    
    z-index: 1001;         /* por encima del menú desplegable */

    transition: top 0.4s;
}
.zona-superior {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px; /* altura de la zona donde pasas el mouse */
    z-index: 9999;

}

.logo-sitio {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-alter) ;
    font-size: 1.3rem;
    font-weight: bold;
}

/* COLOCAR AQUÍ: imagen del logotipo pequeño (imagen/logo.png), ancho ~40-50px */
.logo-sitio img {
    filter: invert(100%);
    width: 45px ;
    height: 45px ;
    display: block;
    object-fit: cover;
    margin-left: 15px;
}
.imagen-banner {
  display: block; /* imagen visible */
}
.menu-nav {
    display: flex;
    gap: 30px;
    align-items: center;
    height: 70px;           /* misma altura que .barra-nav, en vez de "85px auto" */
    flex-wrap: nowrap;      /* evita que los enlaces salten a una segunda línea */
    white-space: nowrap;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(51, 51, 51, 0.7);
    padding: 0 20px;
    z-index: 1000;
    box-sizing: border-box;
    transition: top 0.32s;
}

.menu-nav a {
    text-align: center;
    align-items: center;
    color: var(--color-alter);
    font-weight: 500;
    padding: 8px 4px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
    margin: 2px; 

    
  text-decoration: none;
  
  font-size: 16px;
  transition: color 0.3s;
}

.menu-nav a:hover{
  
  border-radius: 5px;
 
  transition: border-color 0.32s ease;
  border-bottom: 4px solid var(--color-secundario);
}
.menu-nav a.activo {
    border-bottom: 4px solid var(--color-secundario);
    transition: top 0.32s; /* animación suave */
}

/* Botón hamburguesa (solo visible en móvil) */
.cerrar-menu{
    display: none;
}
.inicio-movil
{
    display: none;
}
.boton-menu {
  display: none; /* oculto en escritorio */
  background: rgba(51, 51, 51, 0.7);
  border: none;
  cursor: pointer;
  width: 35px;
  border-radius: 8px;
  height: 45px;
  color: var(--color-alter);
  font-size: 1.8rem;
  margin-left: auto;  
}


/* 4. SECCIÓN HERO (BIENVENIDA) -------------------------------- */
.hero {
    align-items: center;
    position: relative;
    color: var(--color-blanco);
    text-align: justify;
    padding: 100px 20px;
    /* COLOCAR AQUÍ: imagen de fondo del hero/banner principal (imagen/hero-bienvenida.jpg) */
    background-image: linear-gradient(rgba(22, 22, 22, 0.10), rgba(14, 0, 0, 1)), url('../imagen/hero-bienvenida.jpg');
    background-size: cover;
    background-position: center;
}
.logo-hero {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: contain ;
    margin: 0 auto 6px auto;
    border: 3px solid var(--color-blanco);
}
.hero h1 {
    
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
}
.hero h2 {
    font-style: bold   ;
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
}
.hero p {

    text-align: justify;
    max-width: 850px;
    margin: 0 auto 25px auto;
    font-size: 1.3rem;
}

.boton-principal {

    margin: 0 auto;
    width: 50%;
    

    display: block;
    background-color: var(--color-secundario);
    color: var(--color-texto);
    font-weight: bold;
    padding: 12px 28px;
    border-radius: 30px;
    transition: opacity 0.45s ease;
}
.boton-principal:hover {
    
    background-color: var(--fondo-alter);
    color: #fff;   
}
.boton-principal2 {

    margin: 0 auto;
    width: 50%;
    font-size: 1rem;

    display: block;
    background-color: var(--color-secundario);
    color: var(--color-texto);
    font-weight: bold;
    padding: 12px 28px;
    border-radius: 15px;
    transition: opacity 0.3s ease;
}
/* Estado hover */
.boton-principal2:hover {
    background-color: var(--fondo-alter); /* color más oscuro o diferente */
    color: #fff;               /* opcional: cambia el texto */
}



/* 5. SECCIONES GENERALES --------------------------------------- */
.seccion {
    padding: 60px 20px;
}

.seccion-alterna {
    display: block;
    background-blend-mode: multiply;
    background-color:var(--color-blanco);
    background-image: url('../texture_backgraunds/lineas_nazca.svg');
    background-repeat: repeat;
    background-position: center;
    background-size: cover var(--max-ancho-contenido); /* o "contain" si es un SVG decorativo pequeño */
}
.seccion-titulo {
    text-align: center;
    margin-bottom: 40px;
}
.seccion-titulo h2 {
    color: var(--color-primario);
    font-size: 2rem;
    margin-bottom: 10px;
}
.seccion-titulo h4 {
    
    text-align: center;
    color: var(--color-primario);
    max-width: 600px;
    margin: 0 auto;
}

.seccion-titulo p {
    text-align: justify ;
    max-width: 1000px;
    margin: 0 auto;
    color: #666;
    font-size: 1.3rem;
}



/* 6. TARJETAS (usadas en Eventos y Sedes) ------------------------ */
.grilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 45px;
    max-width: var(--max-ancho-contenido);
    margin: 0 auto;
}

.tarjeta {
    background-color: var(--color-blanco);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.tarjeta:hover {
    transform: translateY(-4px);
}

/* COLOCAR AQUÍ: cada imagen de evento/sede va en un <img> dentro de .tarjeta-imagen */
.tarjeta-imagen {
    width: 100%;
    height: auto;
    max-height: 680px;  
    background-color: #e2ddf0; /* color de relleno mientras no hay imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a6ca8;
    font-size: 0.9rem;
    text-align: center;
    padding: 10px;
}
.tarjeta-banner {
    width: 100%;
    height: 220px;        /* altura fija en px, en vez de "auto" */
    overflow: hidden;      /* por si la imagen es más grande, se recorta limpio */
    background-color: #e2ddf0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a6ca8;
    font-size: 0.9rem;
    text-align: center;
}
.tarjeta-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* ahora sí funciona, porque el padre tiene altura real */
    display: block;
}

.tarjeta-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* ahora sí funciona, porque el padre tiene altura real */
    display: block;
}

.tarjeta-contenido {
    padding: 20px;
}

.tarjeta-contenido h3 {
    color: var(--color-primario);
    margin-bottom: 8px;
}
.tarjeta-contenido .anuncio{
    display: inline-block;
    font-size: 0.85rem;
    background-color: var(--color-secundario);
    padding: 4px 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    margin-right: 6px;
    color: var(--color-alter);
}  
.tarjeta-contenido .fecha,
.tarjeta-contenido .ubicacion {
    display: inline-block;
    font-size: 0.85rem;
    background-color: var(--color-fondo-claro);
    padding: 4px 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    margin-right: 6px;
    color: var(--color-primario);
}


/* 7. GALERÍA MULTIMEDIA ------------------------------------------- */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    max-width: var(--max-ancho-contenido);
    margin: 0 auto;
}

/* COLOCAR AQUÍ: cada foto/miniatura de video va dentro de .galeria-item > img */
.galeria-item {
    aspect-ratio: 4 / 3;
    background-color: #e2ddf0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a6ca8;
    font-size: 0.85rem;
    text-align: center;
    padding: 10px;
    position: relative;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria-item.video::after {
    content: "▶";
    position: absolute;
    font-size: 2rem;
    color: white;
    background: rgba(0,0,0,0.4);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 8. FOOTER --------------------------------------------------------- */
.pie-pagina {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 30px 20px;
    margin-top: 40px;
}

.pie-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--max-ancho-contenido);
    margin: 0 auto;
    flex-wrap: wrap;
}

.pie-columna {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

/* Columna derecha*/
.pie-redes {
    flex-direction: row;
    align-items: left;
    gap: 14px;
    justify-content: flex-end;
}

.pie-redes img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.pie-redes a:hover img {
    transform: scale(1.15);
    opacity: 0.85;
}

/* Columna centro: texto centrado */
.pie-centro {
    align-items: center;
    text-align: center;
}

.pie-centro p {
   
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Columna izuiqeda */
.pie-contacto {
    align-items:flex-start;
    text-align: center;
    margin-right: auto;
}

.pie-contacto p {
    
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    opacity: 0.9;
}

.icono-contacto {
    align-items:center;
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ===== MODAL DE VIDEO ===== */
.modal-video {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-video.abierto {
    display: flex;
}

.modal-video-contenido {
    position: relative;
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: center;
}

/* Para videos LOCALES (.mp4): se adapta a su tamaño real, sin forzar proporción */
.modal-video-marco.local {
    position: relative;
    width: auto;
    max-width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.modal-video-marco.local video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Para videos de YOUTUBE/VIMEO (iframe): necesitan proporción fija 16:9 */
.modal-video-marco.embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.modal-video-marco.embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.modal-video-cerrar {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: var(--color-blanco);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
    z-index: 2001;
}

.modal-video-cerrar:hover {
    color: var(--color-secundario);
}

/* 9. RESPONSIVE (pantallas pequeñas) --------------------------------- */
@media (max-width: 768px) {

    .modal-video {
        padding: 10px;
    }
    .modal-video-cerrar {
        top: -35px;
        font-size: 1.6rem;
    }
    .menu-nav {
        display: none;
        flex-direction: column;
        background: rgba(51, 51, 51, 1);
        position: fixed;      /* en vez de "absolute" */
        top: 0px;             /* ajusta según la altura real de tu barra-nav */
        left: 0;
        padding: 15px 0;
        z-index: 1000;
        height: auto;   
        align-items: center    
         
    }
   .menu-nav.mostrando{
    display: flex;
   }
   
    .menu-nav a:hover{
        text-align:  center;
        transition: top 0.32s; /* animación suave */
        border-radius: 5px;
        background: rgb(83, 66, 29);
        background-size: contain;
        
        width: 100%;
        border-bottom: 3px solid var(--color-terciario);
    }
    
    .menu-nav a {
        width: 100%;
        text-align: center;
        /* Efecto extra: cada enlace aparece con un pequeño retraso escalonado */
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
     }

    .menu-nav.abierto a {
    opacity: 1;
    transform: translateY(0);
    }

    /* Retraso escalonado para cada enlace (efecto "cascada") */
        .menu-nav a:nth-child(1) { transition-delay: 0.05s; }
        .menu-nav a:nth-child(2) { transition-delay: 0.1s; }
        .menu-nav a:nth-child(3) { transition-delay: 0.15s; }
        .menu-nav a:nth-child(4) { transition-delay: 0.2s; }
        .menu-nav a:nth-child(5) { transition-delay: 0.25s; }


    .menu-nav a.activo {

        width: 100%;
        background-size: contain;
        border-bottom: 3px solid var(--color-terciario);
        transition: top 0.32s; /* animación suave */
    }
    .cerrar-menu {
        color: var(--color-fondo-claro);
        display: flex;
        top: 0;
        background: var(--fondo-alter); 
        background-size: contain;
        width: 100%;
        border: none;           /* elimina el borde */
        font-size: 1.4rem;      /* tamaño del icono ✖ */
        cursor: pointer; 
        padding: 10px 20px;            /* elimina el espacio interno */
        margin-left: auto;
        justify-content: right;



       
    }
    .cerrar-menu:hover{
        transition: top 0.32s; /* animación suave */
        border-radius: 5px;
        background: rgb(83, 66, 29);
        background-size: contain;
        
        border-bottom: 3px solid var(--color-terciario);

    }
   
    .inicio-movil {
        display: block ;         /* mejor "flex" que "block" para mantener alineado con align-items */
        align-items: center;
        text-align: center;
        margin-right: 5px;
    }
   

    .menu-nav.abierto {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.35s ease, opacity 0.3s ease, visibility 0s linear 0s;
        display: flex;
    }

    .imagen-banner {
        display: none;
    }

    .logo-sitio {
        display: none ;         /* mejor "flex" que "block" para mantener alineado con align-items */
        align-items: center;
        margin-right: 5px;
    }
    
   
    .boton-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
 /* pie de pagina en celulares */

    .pie-contacto {
    display: none;
    }
    .pie-contacto p{
    display: none;
    }
    .pie-contenedor {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .pie-redes {
        justify-content: center;
    }

    .texto-parrafo aparecer {
        font-size: 14px !important;
         line-height: 1.8!important;
    }
    .aparecer{
        font-size: 14px !important;
    line-height: 1.6 !important;
    }

}


/* ===== ACORDEÓN DE SEDES ===== */
.acordeon {
    max-width: var(--max-ancho-contenido);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acordeon-item {
    background-color: var(--color-fondo-claro);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.20);
}

.acordeon-item:hover {
    background-color: rgb(243, 242, 238);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.20);
}
.acordeon-boton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 22px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-primario);
    text-align: left;
}

.acordeon-icono {
    font-size: 1.4rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 10px;
}

.acordeon-item.abierto .acordeon-icono {
    transform: rotate(45deg); /* convierte el "+" en "x" visualmente */
}

.acordeon-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease;
}

.acordeon-item.abierto .acordeon-contenido {
    max-height: 1200px; /* suficientemente grande para el contenido de cada sede */
}

.acordeon-interior {
    padding: 0 22px 22px 22px;
}

.acordeon-imagen {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: #e2ddf0;
}