/* Importar fuentes de Google Fonts */
/* Cinzel Decorative es una buena opción para un estilo clásico con serifa */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap');
/* Reset y variables */
:root {
    --bg: #07101a;
    --card: #0b1a24;
    --accent: #00ff0d;
    --neon: rgba(0, 240, 255, 0.12);
    --glass: rgba(255, 255, 255, 0.03);
    --glass-2: rgba(255, 255, 255, 0.02);
    --muted: #dee5e9;
    --max-w: 1200px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, Arial, sans-serif;
    background: linear-gradient(180deg, var(--bg), #087736);
    color: #e6f7fb;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}
p {
    /* Aplica a todos los elementos <p> */
    text-align: left;
}
/* Global Container */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 1rem;
}

/* ==================== Header y Navegación ==================== */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* Icono 3D Home */
.home-3d {
    width: 54px;
    height: 54px;
    perspective: 800px;
    cursor: pointer;
    position: relative;
}

.home-3d .cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.home-3d:hover .cube {
    transform: rotateX(-14deg) rotateY(14deg) translateY(-4px);
}

.cube .face {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #06b6d4, #0284a8);
    box-shadow: 0 8px 24px rgba(2, 8, 23, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.cube .face.top {
    transform: rotateX(90deg) translateZ(27px);
}

.cube .face.front {
    transform: translateZ(27px);
}

.cube .face.right {
    transform: rotateY(90deg) translateZ(27px);
}

.home-label {
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--glass);
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.95rem;
    color: var(--muted);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.home-cloud {
    position: absolute;
    left: -8px;
    top: 66px;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.6rem 0.9rem;
    border-radius: 18px;
    display: none;
    color: var(--accent);
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
/*parrafo general*/
p{
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem); /* Responsivo */
    font-weight: bold;
    letter-spacing: 1px;
}
/* Toggle menu (mobile) */
.menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.hamburger {
    width: 42px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.hamburger span {
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #7afcff);
    border-radius: 3px;
    transition: transform 0.3s, opacity 0.3s;
}

.nav {
    display: flex;
    gap: 1rem;
}

/* Sidebar / Megamenu */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    max-width: 85%;
    background: linear-gradient(180deg, rgba(10, 20, 28, 0.98), rgba(8, 14, 18, 0.98));
    padding: 1.2rem;
    transform: translateX(-110%);
    transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1);
    z-index: 1200;
    overflow-y: auto; /* Usar overflow-y para el scroll vertical */
}

.sidebar.open {
    transform: translateX(0);
}

.side-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.2rem;
}

.menu-item>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem;
    border-radius: 8px;
}

.menu-item a .title {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.menu-item a .title .dot {
    width: 10px;
    height: 10px;
    background: linear-gradient(90deg, var(--accent), #7afcff);
    border-radius: 50%;
}

.sublist {
    list-style: none;
    padding-inline-start: 1rem;
    margin: 6px 0 10px 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
}

.sublist.open {
    max-height: 600px; /* Suficientemente grande para contener la lista */
}

.sublist li a {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--muted);
    cursor: pointer;
}

/* Neon hover efectos */
.menu-item a:hover,
.sublist li a:hover {
    box-shadow: 0 6px 18px rgba(0, 240, 255, 0.08);
    transform: translateY(-2px);
}

.sublist li a:hover {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
}

/* ==================== Main Content y Secciones ==================== */
main {
    padding: 1rem;
}

section.section {
    background: linear-gradient(180deg, var(--card), transparent);
    border-radius: 14px;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    width: 100%;
}

/* Carrusel automático - sección 1 */
.carousel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    max-width: var(--max-w);
    aspect-ratio: 16/9;
}

.carousel .track {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    gap: 0.5rem;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.dot.active {
    background: var(--accent);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.7);
}

/* Grid responsivo para las 4 secciones destacadas */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    cursor: pointer;
}

.card {
    background: transparent;
    color: #e6f7fb;;
    border-radius: 70px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(131, 85, 85, 0.2);
}

.card img {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

.card h3 {
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem); /* Responsivo */
    font-weight: bold;
    letter-spacing: 1px;
}

.card:hover {
    cursor: pointer;
    background: #055513;
    color: #e6f7fb;
}

/* Posters en grilla (4 PC - 2 tablet - 1 móvil) */
#postersArea {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin: 20px auto;
}

#postersArea .poster {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#postersArea .poster img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* #postersArea .poster img:hover {
    opacity: 0.7;
    transform: scale(1.05);
} */

#postersArea .poster.full {
    grid-column: 1 / span 4;
}
/* Posters en grilla (4 PC - 2 tablet - 1 móvil) */
#postersArea1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin: 20px auto;
}

#postersArea1 .poster {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#postersArea1 .poster img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#postersArea1 .poster img:hover {
    opacity: 0.7;
    transform: scale(1.05);
}

#postersArea1 .poster.full {
    grid-column: 1 / span 4;
}
/* Carrusel manual (seccion 13) */
.manual-carousel {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
}

.manual-carousel img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.manual-carousel .slides {
    flex-wrap: nowrap;
    display: flex;
    transition: transform 0.45s ease-in-out;
    width: 100%;
}

.manual-carousel .slide-item {
    flex-shrink: 0;
    width: 100%;
}

/* Estilos de Navegación (Flechas) */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--glass, rgba(255, 255, 255, 0.4));
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s, box-shadow 0.25s;
    border: none;
    color: white; /* Asegúrate de que el icono de la flecha sea visible */
    font-size: 1.5rem; /* Ajusta el tamaño de la flecha */
}

.arrow:hover,
.arrow:focus {
    transform: translateY(-50%) scale(1.08);
    outline: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.arrow.left {
    left: 12px;
}

.arrow.right {
    right: 12px;
}

/* Horarios visuales sección */
.schedules {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.schedule-card {
    flex: 1 1 260px;
    padding: 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.12));
    transition: opacity 0.25s;
    cursor: pointer;
}

.schedule-card:hover {
    opacity: 0.85;
}

/* Boton pago */
.pay-area {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn-3d {
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #06b6d4, #0284a8);
    box-shadow: 0 10px 30px rgba(2, 8, 23, 0.6);
    cursor: pointer;
    transform-style: preserve-3d;
}

/* Boton flotante subir */
.to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #0891b2, #012f34);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 1300;
}

/* ==================== Contador y Botón Maps ==================== */
.section-maps {
    display: flex;
    flex-direction: row; /* Por defecto en pantallas grandes */
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    min-height: 200px; /* Asegura un tamaño mínimo */
    box-sizing: border-box;
    gap: 1.5rem; /* Espacio entre contador y botón */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si no hay espacio */
}

/* Contador */
.contador {
    font-size: clamp(3rem, 8vw, 5rem); /* Ajuste responsivo del tamaño de la fuente */
    color: #fff;
    font-weight: bold;
    text-align: left;
    text-shadow:
        1px 1px 2px #000,
        2px 2px 4px #000,
        3px 3px 6px #000,
        4px 4px 8px #000;
    transform: perspective(500px) rotateX(10deg);
    opacity: 0;
    transition: opacity 0.5s ease-in;
    flex-shrink: 0; /* Evita que el contador se encoja */
    /* text-align: center; /* Puede que quieras centrarlo si se apila */
}

.contador.visible {
    opacity: 1;
}

.contador span {
    display: block;
    font-size: clamp(1.2rem, 3vw, 2rem); /* Ajuste responsivo del tamaño de la fuente */
    margin-top: 0.5rem;
    color: #fff;
    text-shadow:
        1px 1px 2px #000,
        2px 2px 4px #000;
}

/* Botón Maps */
.maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(10px, 2.5vw, 15px) clamp(15px, 4vw, 25px); /* Padding responsivo */
    background: #34a853;
    color: #fff;
    font-weight: bold;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: perspective(500px) translateZ(0);
    transition: all 0.3s ease-in-out;
    font-size: clamp(0.9rem, 2.2vw, 1.1rem); /* Tamaño de fuente responsivo */
    flex-shrink: 0; /* Evita que el botón se encoja */
}

.maps-btn img {
    width: clamp(24px, 5vw, 32px); /* Tamaño de imagen responsivo */
    height: clamp(24px, 5vw, 32px);
    transition: transform 0.3s ease-in-out;
}

.maps-btn:hover {
    background: #2c8c46;
    transform: perspective(500px) translateZ(10px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.maps-btn:hover img {
    transform: rotateY(360deg);
}

/* 🔑 CLAVE 1: Contenedor con ancho máximo y perspectiva dinámica */
.video-container {
    /* Define el ancho máximo, por ejemplo, 90% de la pantalla */
    width: 90vw; 
    /* El ancho máximo no debe superar un tamaño de escritorio estándar */
    max-width: 800px; 
    
    /* La altura se calcula con padding (el truco del 16:9) */
    position: relative;
    
    /* Define la profundidad 3D. 1000px es bueno. */
    perspective: 1000px; 
    margin: 20px auto; /* Centrar y añadir espacio */
}

/* 🔑 CLAVE 2: Proporción 16:9 (El truco del padding-top) */
/* Esto mantiene la altura proporcional al ancho (16:9) */
.video-container::before {
    content: '';
    display: block;
    /* (9 / 16) * 100 = 56.25% */
    padding-top: 56.25%; /* Esto fuerza la altura para mantener la relación 16:9 */
}


#video3D {
    /* 🔑 CLAVE 3: Ocupar todo el contenedor relativo */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* ¡CLAVE! Ocupa el ancho total del contenedor */
    height: 100%; /* ¡CLAVE! Ocupa la altura total (definida por el padding-top) */
    
    /* Propiedades de estilo y 3D */
    object-fit: cover;
    border: 5px solid #ecf0f1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: rotateY(0deg) scale(1); 
    transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out; 
    transform-style: preserve-3d;
}

/* CLASE CSS (usada por jQuery) */
.is-rotated-3d {
    /* Rotación 3D y ligero aumento de escala */
    transform: rotateY(15deg) scale(1.05) !important; 
    box-shadow: 0 40px 80px rgba(46, 204, 113, 0.7) !important; 
}
/* Estilos del Título Principal */
.elegant-title {
    /* 🔑 Tipografía Elegante: Cormorant Garamond */
    font-family: 'Cormorant Garamond', serif;
    font-size: 6vw; /* Tamaño responsive */
    font-weight: 700;
    text-align: center;
    padding: 10px 20px;
    
    /* Animación y Transiciones */
    transition: all 0.5s ease-out; /* Transición tranquila de 0.5 segundos */
    cursor: pointer;
    
    /* 🔑 Degradado de Color (Púrpura, Rosa, Blanco) */
    background: linear-gradient(
        135deg,
        #8e2de2 0%,      /* Púrpura oscuro */
        #e93f94 50%,      /* Rosa intenso */
        #ffffff 85%       /* Blanco brillante */
    );
    
    /* Aplicar el degradado solo al texto */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Hace que el texto sea transparente para ver el degradado */
}


/* 🔑 Efecto Hover Sutil y Tranquilo */
.elegant-title:hover {
    /* 1. Mueve el degradado (cambia ligeramente los colores visibles) */
    background: linear-gradient(
        135deg,
        #e93f94 10%,      /* Nuevo Rosa más temprano */
        #ffffff 60%,      /* Blanco más centrado */
        #8e2de2 100%       /* Púrpura al final */
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* 2. Sombra de texto suave (Efecto "Brillo Suave") */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), /* Brillo blanco */
                 0 0 20px rgba(233, 63, 148, 0.3); /* Brillo rosa/púrpura */
    
    /* 3. Ligero aumento de escala (Sutileza) */
    transform: scale(1.03); 
}
/* ==================== Footer ==================== */
footer {
    padding: 1.2rem;
    text-align: center;
    color: var(--muted);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2));
    margin-top: 2rem;
    border-radius: 12px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.socials a {
    padding: 0.5rem;
    border-radius: 8px;
    background: var(--glass);
    display: inline-block;
}

footer .socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem; /* Añadir espacio si es necesario */
}

footer .socials img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: transform 0.3s ease;
    cursor: pointer;
}

footer .socials img:hover {
    transform: scale(1.2);
}

/* Icono PSE (si es un contenedor) */
.contenedor-del-logo {
    background-color: transparent;
}

/* Titulo comunidad*/
.text-container {
    /* Nueva lógica de centrado para que ocupe y centre en el viewport */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    min-height: 20vh; /* Ocupa gran parte de la altura visible de la ventana */
    width: 100%; /* Ocupa todo el ancho */
    
    perspective: 1000px;
    cursor: pointer;
    /* Asegúrate de que no haya margen o padding indeseado aquí */
}

.community-title {
    text-align: center; 
    font-family: system-ui;
    font-size: 3rem; /* O el tamaño deseado */
    position: relative; /* Es necesario para que ::before se posicione correctamente */
    z-index: 1; /* Asegura que el texto original esté por encima del ::before */

    color: transparent; 
    -webkit-text-stroke: 1px var(--accent, #00ff0d);
    text-stroke: 1px var(--accent, #00ff0d);
    
    transition: all 0.4s ease; /* Mantener la transición para los efectos 3D */
}
/* Pseudo-elemento para el efecto de relleno (detrás del contorno) */
.community-title::before {
    content: attr(data-text); 
    position: absolute;
    top: 0;
    left: 0;
    
    /* SOLUCIÓN CLAVE 2: Le damos el color de relleno y eliminamos el contorno */
    color: #fff; /* O el color que quieres que tenga el relleno */
    -webkit-text-stroke: 0; 
    text-stroke: 0;
    
    text-shadow: none; 
    z-index: -1; /* Detrás del texto principal (contorno) */
}

/* Efecto Hover 3D titulo comunidad*/
.text-container:hover .community-title {
    transform: rotateX(10deg) rotateY(10deg) translateZ(20px) scale(1.05); /* Rotación y desplazamiento en 3D */
    text-shadow: 
        -2px -2px 0 #a6e70d, 
        2px -2px 0 #1ba01b,  
        -2px 2px 0 #55b91b,  
        2px 2px 0 #000000,
        5px 5px 15px rgba(0, 0, 0, 0.6); /* Sombra más pronunciada para mayor profundidad */
}

.text-container:hover .community-title::before {
    transform: translateZ(-5px); /* Pequeño desplazamiento hacia atrás para el efecto 3D */
    text-shadow: 2px 2px 5px rgba(26, 138, 128, 0.3); /* Sombra interna para el efecto */
}
  
/* Titulo simbolos*/
.text-container1 {
    /* Nueva lógica de centrado para que ocupe y centre en el viewport */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    min-height: 20vh; /* Ocupa gran parte de la altura visible de la ventana */
    width: 100%; /* Ocupa todo el ancho */
    
    perspective: 1000px;
    cursor: pointer;
    /* Asegúrate de que no haya margen o padding indeseado aquí */
}

.community-title1 {
    text-align: center; 
    font-family: system-ui;
    font-size: 3rem; /* O el tamaño deseado */
    position: relative; /* Es necesario para que ::before se posicione correctamente */
    z-index: 1; /* Asegura que el texto original esté por encima del ::before */

    color: transparent; 
    -webkit-text-stroke: 1px var(--accent, #00ff0d);
    text-stroke: 1px var(--accent, #00ff0d);
    
    transition: all 0.4s ease; /* Mantener la transición para los efectos 3D */
}
/* Pseudo-elemento para el efecto de relleno (detrás del contorno) */
.community-title1::before {
    content: attr(data-text); 
    position: absolute;
    top: 0;
    left: 0;
    
    /* SOLUCIÓN CLAVE 2: Le damos el color de relleno y eliminamos el contorno */
    color: #fff; /* O el color que quieres que tenga el relleno */
    -webkit-text-stroke: 0; 
    text-stroke: 0;
    
    text-shadow: none; 
    z-index: -1; /* Detrás del texto principal (contorno) */
}

/* Efecto Hover 3D titulo comunidad*/
.text-container1:hover .community-title1 {
    transform: rotateX(10deg) rotateY(10deg) translateZ(20px) scale(1.05); /* Rotación y desplazamiento en 3D */
    text-shadow: 
        -2px -2px 0 #a6e70d, 
        2px -2px 0 #1ba01b,  
        -2px 2px 0 #55b91b,  
        2px 2px 0 #000000,
        5px 5px 15px rgba(0, 0, 0, 0.6); /* Sombra más pronunciada para mayor profundidad */
}

.text-container1:hover .community-title1::before {
    transform: translateZ(-5px); /* Pequeño desplazamiento hacia atrás para el efecto 3D */
    text-shadow: 2px 2px 5px rgba(26, 138, 128, 0.3); /* Sombra interna para el efecto */
}
  /* -------------------------------------- */
/* 1. Estilos para el Contenedor del Logo */
/* -------------------------------------- */
.logo-container {
    /* Color de fondo institucional (verde oscuro) */
    background-color: #2e7d32; 
    
    /* Relleno para dar espacio alrededor del logo */
    padding: 15px 0; 
    
    /* Centrar el contenido horizontalmente */
    text-align: center;
    
    /* Un borde inferior sutil para delimitar la sección (opcional) */
    border-bottom: 3px solid #f9a825; /* Color amarillo/dorado para contraste */
}

/* -------------------------------------- */
/* 2. Estilos para la Imagen GIF (Responsive) */
/* -------------------------------------- */
.logo-gif {
    /* Máximo ancho del 100% del contenedor (esencial para ser responsive) */
    max-width: 100%;
    
    /* Altura automática para mantener la proporción de la imagen */
    height: auto; 
    
    /* Ancho máximo para evitar que sea demasiado grande en pantallas amplias */
    max-width: 150px; 
    
    /* Hace que la imagen sea un bloque para mejor control */
    display: block; 
    
    /* Centrar la imagen dentro del contenedor (alternativa a text-align: center en el padre) */
    margin: 0 auto; 
}

/* -------------------------------------- */
/* 3. Media Query para Móviles (Ajuste si es necesario) */
/* -------------------------------------- */
@media (max-width: 600px) {
    .logo-container {
        padding: 10px 0; /* Menos relleno en dispositivos pequeños */
    }
    
    .logo-gif {
        max-width: 120px; /* Tamaño un poco más pequeño en móviles */
    }
}

/* ======================================== */
    /* ESTRUCTURA PRINCIPAL DE GRID COMUNIDAD(30%/70%)   */
    /* ======================================== */

    .blog-section {
        padding: 2rem 1rem;
        background-color: var(--bg); /* Usa tu color de fondo definido */
    }

    .blog-container {
        max-width: var(--max-w); /* Usa tu ancho máximo global */
        margin: 0 auto;
        display: grid;
        /* Define 2 columnas: la primera 30% y la segunda 70% */
        grid-template-columns: 30% 70%; 
        gap: 30px; /* Espacio entre columnas */
        align-items: flex-start; /* Alinea las columnas arriba */
    }

    /* Columna de Carrusel (30%) */
    .columna-carrusel {
        background: var(--card); /* Fondo para la columna del carrusel */
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        position: sticky; /* Hace que la columna de imágenes se quede fija al hacer scroll */
        top: 70px; /* Distancia desde la parte superior del viewport (ajústalo si tienes un header fijo) */
    }
    
    .titulo-carrusel {
        color: var(--accent);
        margin-top: 0;
        text-align: center;
        font-size: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--neon);
    }

    .nota-carrusel {
        font-size: 0.85rem;
        color: var(--muted);
        text-align: center;
        margin-top: 1rem;
    }

    /* Carrusel y Posters */
    .carrusel-blog {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        width: 100%;
        aspect-ratio: 1 / 1.5; /* Relación de aspecto vertical para los posters */
    }

    .carrusel-blog .track {
        display: flex;
        transition: transform 0.8s ease-in-out;
        width: 100%;
        height: 100%;
    }

    .carrusel-blog .poster {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carrusel-blog img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ajusta la imagen para cubrir el espacio sin deformarse */
        display: block;
    }

    /* Columna de Texto del Blog (70%) */
    .columna-texto {
        background: linear-gradient(180deg, var(--card), transparent);
        padding: 2rem;
        border-radius: 12px;
    }

    .blog-header h1 {
        font-family: 'Cinzel Decorative', serif; /* Usa la fuente clásica que importaste */
        color: #0c0a0a;
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    .fecha {
        color: var(--accent);
        font-style: italic;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px dashed var(--muted);
    }

    .blog-content h2 {
        color: var(--accent);
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid var(--neon);
    }

    .blog-content p {
        color: #111213;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .list-title {
        font-weight: bold;
        color: #050505;
        margin-top: 1rem;
    }

    .blog-content ul {
        list-style: disc;
        padding-left: 20px;
    }

    .blog-content ul li {
        margin-bottom: 0.5rem;
        color: var(--muted);
    }
    /* 🔑 CLAVE 1: Contenedor con ancho máximo y perspectiva dinámica */
.video-container {
    /* Define el ancho máximo, por ejemplo, 90% de la pantalla */
    width: 90vw; 
    /* El ancho máximo no debe superar un tamaño de escritorio estándar */
    max-width: 800px; 
    
    /* La altura se calculará automáticamente con el padding (ver siguiente bloque) */
    position: relative;
    
    /* Define la profundidad 3D. 1000px es bueno. */
    perspective: 1000px; 
    margin: 20px auto; /* Centrar y añadir espacio */
}

/* 🔑 CLAVE 2: Proporción 16:9 (El truco del padding-top) */
/* Este bloque mantiene la altura proporcional al ancho (16:9) */
.video-container::before {
    content: '';
    display: block;
    /* (9 / 16) * 100 = 56.25% */
    padding-top: 56.25%; /* Esto fuerza la altura para mantener la relación 16:9 */
}


#video3D {
    /* 🔑 CLAVE 3: Ocupar todo el contenedor relativo */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Propiedades de estilo y 3D */
    object-fit: cover;
    border: 5px solid #ecf0f1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: rotateY(0deg) scale(1); 
    transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out; 
    transform-style: preserve-3d;
}

    /* CLASE CSS (usada por jQuery) */
    .is-rotated-3d {
        /* Rotación 3D y ligero aumento de escala */
        transform: rotateY(15deg) scale(1.05) !important; 
        box-shadow: 0 40px 80px rgba(46, 204, 113, 0.7) !important; 
    }
    /* Media Query (Opcional, para ajustes finos en móviles) */
    @media (max-width: 600px) {
    /* Reducimos la perspectiva en pantallas muy pequeñas si el efecto parece exagerado */
    .video-container {
        perspective: 800px;
    }
    
    /* Reducimos la rotación y la escala en móviles para evitar recortes */
    .is-rotated-3d {
        transform: rotateY(10deg) scale(1.02) !important; 
    }

}
/*
 * ----------------------------------------------------
 * ESTILOS GENERALES Y TIPOGRAFÍA DE LA RESEÑA
 * ----------------------------------------------------
 */

/* Variables de Color (Recomendado para mantener la coherencia) */
:root {
    --color-principal: #d0d0d4; /* Púrpura oscuro para fondo */
    --color-fondo-claro: #f4f4f9; /* Blanco/Gris claro para el cuerpo del texto */
    --color-resaltado-rosa: #3fe969;
    --color-resaltado-purpura: #143810;
    --font-elegante: 'Cormorant Garamond', serif;
    --font-cuerpo: Arial, sans-serif;
}

#fundacion {
    background-color: var(--color-principal);
   
    line-height: 1.6;
    font-family: var(--font-cuerpo);
    margin: 0;
    padding: 0;
}
#fundacion p{
    color: #fcf9f9;
}

/* 🔑 Contenedor Principal: Responsiveness y Centrado */
.historia-fundacional {
    max-width: 900px; /* Limita el ancho para una lectura cómoda */
    width: 95%; /* Ocupa casi todo el ancho en móviles */
    margin: 40px auto; /* Centra el contenido y añade margen vertical */
    padding: 20px;
    background: transparent ; /* Fondo blanco para el texto */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

/* ----------------------------------------------------
 * ESTILOS DE ENCABEZADOS (Títulos Elegantes)
 * ----------------------------------------------------
 */

.historia-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--color-resaltado-rosa);
}

.titulo-principal {
    font-family: var(--font-elegante);
    font-size: clamp(2.5rem, 5vw, 4rem); /* Tamaño fluido y responsive */
    font-weight: 700;
    margin: 0 0 10px 0;
    
    text-align: center;
    background: linear-gradient(to right, var(--color-resaltado-purpura), var(--color-resaltado-rosa));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subtitulo {
    font-family: var(--font-cuerpo);
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 400;
    color: var(--color-resaltado-purpura);
    margin: 0;
}

/* ----------------------------------------------------
 * ESTILOS DEL CUERPO DEL TEXTO
 * ----------------------------------------------------
 */

.introduccion {
    font-size: 1.15rem;
    color: #fcfafa;
    padding: 15px;
    border-left: 5px solid var(--color-resaltado-rosa);
    margin-bottom: 30px;
    background-color: var(--color-fondo-claro);
    background: transparent;
}

.contenido-reseña p {
    margin-bottom: 1.2rem;
}

/* Estilos de las Etapas (Artículos) */
.etapa {
    margin-bottom: 35px;
    padding: 15px 0;
}

.etapa h3 {
    font-family: var(--font-elegante);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-principal);
    border-bottom: 2px dashed #ddd;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

/* Resaltado de Negritas */
.contenido-reseña strong {
    color: var(--color-resaltado-rosa);
    font-weight: 700;
}

/* ----------------------------------------------------
 * ESTILOS DE LISTAS (Hitos y Valores)
 * ----------------------------------------------------
 */

.lista-hitos, .lista-valores {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.lista-hitos li, .lista-valores li {
    padding-left: 2em; /* Espacio para el ícono/viñeta */
    position: relative;
    margin-bottom: 8px;
    color: #555;
}

/* Iconos de Viñeta Personalizados */
.lista-hitos li::before {
    content: '📅'; /* Ícono de calendario para hitos */
    position: absolute;
    left: 0;
    color: var(--color-resaltado-purpura);
    font-size: 1.1rem;
}

.lista-valores li::before {
    content: '✨'; /* Ícono de brillo/estrella para valores */
    position: absolute;
    left: 0;
    color: var(--color-resaltado-rosa);
    font-size: 1.1rem;
}

/* ----------------------------------------------------
 * FOOTER
 * ----------------------------------------------------
 */

.historia-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

.historia-footer p {
    font-style: italic;
    color: #777;
    font-size: 1rem;
}
/* ----------------------------------------------------
 * ESTILOS DE ENCABEZADOS
 * ----------------------------------------------------
 */

.titulo-equipo {
    font-family: var(--font-elegante);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    text-align: center;
    color: var(--color-principal);
    margin-bottom: 5px;
}

.descripcion-equipo {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-fondo-claro);
}

.subtitulo-miembros, .subtitulo-funciones {
    font-family: var(--font-cuerpo);
    font-size: 1.5rem;
    color: linear-gradient(180deg, var(--bg), #087736);
    border-left: 5px solid var(--color-resaltado-rosa);
    padding-left: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* ----------------------------------------------------
 * 1. MIEMBROS DEL EQUIPO (Lista de Definición)
 * ----------------------------------------------------
 */

.lista-cargos {
    display: flex;
    flex-wrap: wrap; /* Permite que los ítems se apilen en pantallas pequeñas */
    gap: 20px;
    padding: 0;
    margin: 0;
}

.cargo-item {
    flex: 1 1 45%; /* Permite 2 ítems por fila en escritorio */
    display: flex;
    padding: 15px;
    border: 1px solid var(--color-fondo-claro);
    border-radius: 8px;
    background-color: var(--color-fondo-claro);
    align-items: center;
}

.cargo-item dt {
    font-weight: 700;
    color: var(--color-principal);
    margin-right: 10px;
}

.cargo-item dd {
    margin-left: 0;
    color: #444;
}

/* ----------------------------------------------------
 * 2. FUNCIONES Y OBJETIVOS (Lista no Ordenada)
 * ----------------------------------------------------
 */

.lista-objetivos {
    list-style: none;
    padding-left: 0;
}

.lista-objetivos li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 15px;
    color: #fcfbfb;
}

/* Ícono de viñeta personalizado (check/punto de color) */
.lista-objetivos .liGd::before {
    content: '✅'; /* Un check verde como símbolo de objetivo cumplido */
    position: absolute;
    left: 0;
    color: var(--color-resaltado-rosa); /* Usa el color rosa para el ícono */
    font-size: 1.1em;
}
/*lista propuesta pedagogica*/

.lista-objetivos .liPp::before {
    content: '🏆'; 
    position: absolute;
    left: 0;
    color: var(--color-resaltado-rosa); 
    font-size: 1.1em;
}
.lista-objetivos li::before {
    content: '■'; 
    position: absolute;
    left: 0;
    /* Ajustamos el color del icono a negro o gris oscuro para el minimalismo */
    color: #333; 
    font-size: 0.8em; /* Un tamaño más pequeño y discreto */
}
/* Resaltar texto importante dentro de los objetivos */
.lista-objetivos li strong {
    color: var(--color-resaltado-purpura);
    font-weight: 600;
}
/* ----------------------------------------------------
 * ESTILOS DE PROPUESTA PEGAGOGICA
 * ----------------------------------------------------
 */
.propuestaPedagogica{
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--color-resaltado-rosa);
} 
.propuestaPedagogica img{
     width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.funciones-equipo{
    
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--color-resaltado-rosa);
} 
.funciones-equipo img{
     width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ----------------------------------------------------
 * RESPONSIVE (Móviles)
 * ----------------------------------------------------
 */

@media (max-width: 768px) {
    .equipo-institucional {
        margin: 20px 10px;
        padding: 20px;
    }

    /* En móvil, los miembros del equipo ocupan todo el ancho (se apilan) */
    .cargo-item {
        flex: 1 1 100%; 
    }
}
/* ====================================================================== */
/* 🔑 MAPA CONCEPTUAL - REFACTORIZACIÓN UI/UX Y RESPONSIVIDAD */
/* (Añadir a la parte final de tu archivo CSS) */
/* ====================================================================== */

.mapa-conceptual {
    position: relative;
    /* Usar un ancho máximo fijo para limitar el contenedor en escritorio */
    width: 100%; 
    max-width: 900px;
    
    /* [RESPONSIVE FIX] Por defecto (móvil), se usa un layout tipo columna/stack */
    padding-top: 0;
    height: auto;
    min-height: 80vh; /* Altura mínima grande para el stack vertical en móvil */
    margin: 20px auto; /* Centrar el mapa */
    
    /* Usar Flexbox para el apilamiento Mobile-First */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Contenedor Flex para asegurar que el contenido del nodo se centre */
.nodo {
    position: static; /* Por defecto, NO absoluto en móvil */
    margin: 10px auto; /* Margen para apilamiento en móvil */
    
    /* [UX/RESPONSIVE FIX] Padding fijo con rem, no con vw, para evitar desbordes */
    padding: 0.8rem 1.2rem; 
    border-radius: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    box-sizing: border-box;
    display: flex; 
    justify-content: center;
    align-items: center;
    
    /* [UX/LEGIBILIDAD FIX] Usar clamp() para un tamaño de fuente responsivo y controlado */
    font-size: clamp(0.9rem, 2.5vw, 1.4rem); 
    line-height: 1.2;
}

/* ------------------------------------------- */
/* ESTILO Y POSICIONAMIENTO DEL NODO CENTRAL (MOBILE-FIRST) */
/* ------------------------------------------- */

.central {
    background-color: #5b9bd5; 
    width: 90%; 
    height: auto; 
    min-height: 10%; 
    font-size: clamp(1.2rem, 4vw, 1.8rem); 
    
    /* Posición estática en el flujo normal de la columna flex */
    position: static;
    transform: none;
    order: 0; /* El central va primero */
    margin-bottom: 20px;
    z-index: 10;
}

/* Estilo general para los nodos externos (verde oscuro) */
.nodo:not(.central) {
    background-color: #38761d; 
    width: 90%; /* Ocupa casi todo el ancho disponible en móvil */
    min-height: 8%;
    font-size: clamp(0.8rem, 2vw, 1.1rem); 
    padding: 0.8rem;
    order: 1; /* El resto de nodos va después del central */
}

/* Posiciones específicas para los nodos externos se vuelven irrelevantes en Mobile-First */
/* Se eliminan las clases .superior-izq, .inferior-der, etc. de las reglas estáticas */


/* ------------------------------------------- */
/* EFECTOS HOVER (Se mantienen) */
/* ------------------------------------------- */

.nodo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.central:hover {
    background-color: #79aede;
}

.nodo:not(.central):hover {
    background-color: #6aa84f;
}


@media (min-width: 414px) {
    
    .mapa-conceptual {
        /* [AJUSTE SUGERIDO]: Cambiar padding-top a 100% para un aspecto más cuadrado 
           en pantallas de celular/tablet (414px es aún bastante estrecho). */
        padding-top: 100%; 
        height: 0;
        display: block; 
        /* [AJUSTE SUGERIDO]: min-height más bajo para móvil/tablet si el contenedor es estrecho */
        min-height: 450px; 
    }

    .nodo {
        position: absolute; 
        margin: 0; 
        order: initial; 
    }

    /* Estilos del Nodo Central */
    .central {
        /* [AJUSTE SUGERIDO]: Aumentar el tamaño para que sea visible en 414px */
        width: 35%; 
        height: 18%; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Se mantiene el clamp() para la escalabilidad del nodo principal */
        font-size: clamp(1.2rem, 4vw, 1.8rem); 
    }
    
    /* Estilos de Nodos Externos */
    .nodo:not(.central) {
        /* [AJUSTE SUGERIDO]: Nodos más anchos para que quepa el texto en 414px */
        width: 20%; 
        height: 12%;
        
        /* 🚨 CORRECCIÓN CLAVE: 
           Reemplazar 0.75rem por clamp(). 0.75rem (~12px) es demasiado pequeño e ilegible. 
        */
        font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    }

    /* Posicionamiento del mapa (Ajustado para 414px) */
    /* Las posiciones están bien, pero aquí se incluyen para completar el bloque */
    
    /* Fila Superior */
    .superior-izq { top: 5%; left: 5%; }
    .superior-centro1 { top: 5%; left: 28%; }
    .superior-centro2 { top: 5%; right: 28%; }
    .superior-der { top: 5%; right: 5%; }

    /* Fila Media (Centrado verticalmente) */
    .medio-izq { top: 45%; left: 0; transform: translateY(-50%); }
    .medio-der { top: 45%; right: 0; transform: translateY(-50%); }

    /* Fila Inferior (Bottom: 5%) */
    .inferior-izq { bottom: 5%; left: 5%; }
    .inferior-centro1 { bottom: 5%; left: 28%; }
    .inferior-centro2 { bottom: 5%; right: 28%; }
    .inferior-der { bottom: 5%; right: 5%; }
}
/*====================================================================== */
/* 🛠️ CSS DE LA CAJA DE DESCRIPCIÓN (MODAL/TOGGLE BOX) */
/* ====================================================================== */

/* Capa de fondo que cubre toda la pantalla (Modal) */
.descripcion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Asegurar que esté por encima de todo */
    backdrop-filter: blur(5px);
}

/* Caja de contenido responsiva */
.descripcion-box {
    background: #0b1a24; /* Color de tarjeta del tema oscuro */
    color: #e6f7fb;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 240, 255, 0.4); /* Sombra neón */
    max-width: 90%;
    width: 500px;
    position: relative;
    border: 2px solid #00ff0d; /* Borde de acento */
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.descripcion-box h3 {
    color: #00ff0d; /* Título neón */
    margin-top: 0;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.descripcion-box p {
    color: #dee5e9;
    line-height: 1.6;
}

/* Botón de cerrar */
.cerrar-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c; /* Rojo para cerrar */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

.cerrar-btn:hover {
    background: #c0392b;
}
/* ----------------------------------------------------
 * RESPONSIVE PARA MÓVILES (Menos de 600px)
 * ----------------------------------------------------
 */

/*
 * MEDIA QUERY para asegurar apilamiento en pantallas pequeñas (Móviles)
 * Menos de 600px de ancho.
 */
@media (max-width: 600px) {
    
    /* * Aseguramos que el contenedor use display: block o flex-direction: column 
     * (aunque display: block suele ser suficiente para h1/h2) 
     */
    .historia-header {
        /*
         * Si el .historia-header tuviera display: flex en el CSS general 
         * y los elementos se alinearan horizontalmente, esta línea los obliga a apilarse:
         */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el texto */
    }
    
    /* Opcional: Ajuste del margen para que no queden pegados */
    .titulo-principal {
        margin-bottom: 5px; /* Reduce el espacio entre el h1 y el h2 en móvil */
    }

    .subtitulo {
        margin-top: 5px;
    }
}
    /* ======================================== */
    /* RESPONSIVE: APILAR EN MÓVILES          */
    /* ======================================== */

    @media (max-width: 900px) {
        .blog-container {
            /* En pantallas más pequeñas, se apilan las columnas (100% de ancho) */
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .columna-carrusel {
            /* Desactiva el sticky en móviles para que se desplace con el resto del contenido */
            position: static; 
            top: auto;
        }

        .columna-texto {
            padding: 1rem;
        }
    }

    /* Ajuste adicional para tablets para asegurar el carrusel */
    @media (min-width: 560px) and (max-width: 900px) {
        .carrusel-blog {
            aspect-ratio: 16/9; /* Hace el carrusel más horizontal en tablets */
        }
    }

/* ==================== Media Queries ==================== */
@media (max-width: 900px) {
    #postersArea {
        grid-template-columns: repeat(2, 1fr);
    }

    #postersArea .poster.full {
        grid-column: span 2;
    }
     #postersArea1 {
        grid-template-columns: repeat(2, 1fr);
    }

    #postersArea1 .poster.full {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .section-maps {
        flex-direction: column; /* Apilar en pantallas más pequeñas */
        text-align: center; /* Centrar el texto cuando se apilan */
        gap: 1rem; /* Ajustar el espacio entre elementos apilados */
    }

    .contador {
        text-align: center; /* Centrar el contador cuando se apila */
    }
}

@media (max-width: 560px) {
    #postersArea {
        grid-template-columns: 1fr;
    }

    #postersArea .poster.full {
        grid-column: span 1;
    }
     #postersArea1 {
        grid-template-columns: 1fr;
    }

    #postersArea1 .poster.full {
        grid-column: span 1;
    }
    .nav {
        display: none;
    }

    .header {
        padding: 0.6rem; /* Ajuste para pantallas muy pequeñas */
    }

    .maps-btn {
        width: 100%; /* El botón ocupa todo el ancho disponible */
        justify-content: center; /* Centrar el contenido del botón */
        padding: 12px; /* Ajuste de padding */
    }

    .contador {
        margin-bottom: 1rem; /* Espacio debajo del contador */
    }
}

/* Media Query para PC y Pantallas Grandes (p. ej., a partir de 1024px) */
@media screen and (min-width: 1024px) {
    .manual-carousel {
        max-height: 500px;
        overflow: hidden;
    }

    .manual-carousel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}