/* Ajustes adicionales para reducir espacios en móviles */
@media (max-width: 767px) {
    #hero-content-wrapper {
        margin-bottom: -2rem !important; /* Ajustado para evitar superposición */
        padding: 0 !important; /* Elimina el padding en móviles */
    }
    
    #about-elena {
        padding-top: 2rem !important; /* Aumentado para dar más espacio */
    }
    
    /* Estilos específicos para la galería en móvil */
    .gallery-grid {
        display: block !important; /* Cambiar a display block para mejor control del espaciado */
    }
    
    /* Aplicar margen directamente a los elementos de la galería */
    .gallery-item {
        display: block !important;
        line-height: normal !important; /* Anular line-height: 0 */
    }
    
    /* Asegurar que las imágenes tengan el espaciado correcto */
    .gallery-item img {
        margin-bottom: 20px !important; /* Espacio adicional después de cada imagen */
    }
}

@media (max-width: 480px) {
    #hero-content-wrapper {
        margin-bottom: -1.5rem !important; /* Ajustado para pantallas muy pequeñas */
    }
}

/* Ajustes para el banner en dispositivos móviles */
@media (max-width: 767px) {
    .hero {
        height: 50vh !important; /* Reduce la altura del banner en móviles */
        min-height: 300px !important; /* Altura mínima más pequeña */
    }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 480px) {
    .hero {
        height: 40vh !important; /* Aún más pequeño para pantallas muy pequeñas */
        min-height: 250px !important;
    }
}

/* Estilos adicionales de index.html */
.hero-content-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 0;
    margin-bottom: -3rem;
}

.hero-content {
    text-align: center;
}

.hero-content h1 {
    white-space: nowrap;
    margin-bottom: 0.5rem;
}

.hero-content .tagline {
    margin-bottom: 0;
}

.section-title::after {
    background-color: #4a90e2 !important; /* Azul claro */
    width: 50% !important; /* 50% del ancho */
}
.section {
    padding: 1rem 0 !important; /* Reduce el espacio entre secciones */
}
.section-title {
    margin-bottom: 1rem !important; /* Reduce el espacio debajo de los títulos */
}
/* 
   Responsive CSS - Estilos para diferentes tamaños de pantalla
   Enfoque Mobile-First: Los estilos base en main.css están diseñados para móviles,
   aquí añadimos media queries para pantallas más grandes.
*/

/* ======= Dispositivos pequeños (576px y superiores) ======= */
@media (min-width: 576px) {
    :root {
        --font-size-base: 17px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ======= Tablets (768px y superiores) ======= */
@media (min-width: 768px) {
    :root {
        --font-size-base: 18px;
        --container-padding: 2rem;
    }
    
    .section {
        padding: var(--spacing-xl) 0;
    }
    
    .hero-content h1 {
        font-size: calc(var(--font-size-xxlarge) * 1.2);
    }
    
    .about-content {
        flex-wrap: nowrap;
    }
    
    /* Estilos para el contenido de disciplinas en pantallas grandes */
    .section .discipline-content {
        /* Revertido a flujo normal para que videos e imágenes estén en filas separadas */
    }

    .videos-grid {
        width: 100%;
        height: auto;
        /* Asegura que el video ocupe el ancho completo de su celda */
    }

    
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Las imágenes se ajustan automáticamente */
        gap: var(--spacing-sm);
        margin-top: 0; /* Eliminar el margen superior si ya está en el contenedor grid */
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 1/1; /* Revertir a proporción original si es necesario */
    }
    
    .contact-form {
        padding: var(--spacing-md);
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: var(--border-radius-medium);
    }
}

/* ======= Laptops/Desktops (992px y superiores) ======= */
@media (min-width: 992px) {
    :root {
        --container-padding: 3rem;
    }
    
    .section-title {
        font-size: calc(var(--font-size-xlarge) * 1.2);
    }
    
    .hero-content {
        max-width: 900px;
    }
    
    .hero-content h1 {
        font-size: calc(var(--font-size-xxlarge) * 1.5);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .videos-grid {
        grid-template-columns: 1fr; /* Asegura que el video ocupe todo el ancho disponible */
    }
    
    /* Efecto hover solo para dispositivos con hover */
    @media (hover: hover) {
        .gallery-item img {
            transition: transform var(--transition-medium);
        }
        
        .gallery-item:hover img {
            transform: scale(1.05);
        }
        
    .video-container-yt {
        max-width: 1000px; /* Ancho máximo para videos de Youtube en PC */
        margin: 0 auto; /* Centrar el video en PC */
    }
    }
}

/* ======= Pantallas grandes (1200px y superiores) ======= */
@media (min-width: 1200px) {
    :root {
        --font-size-base: 19px;
    }
    
    .hero-content h1 {
        font-size: calc(var(--font-size-xxlarge) * 1.8);
    }
    
    .about-content {
        gap: var(--spacing-lg);
    }
    
    .gallery-grid {
        gap: var(--spacing-lg);
    }
}

/* ======= Pantallas extra grandes (1400px y superiores) ======= */
@media (min-width: 1400px) {
    :root {
        --container-width: 1320px;
    }
    
    .section {
        padding: calc(var(--spacing-xl) * 1.5) 0;
    }
}

/* ======= Orientación específica ======= */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        height: auto;
        min-height: 100vh;
        padding: var(--spacing-lg) 0;
    }
    
    .scroll-indicator {
        display: none;
    }
}

/* ======= Preferencias de usuario ======= */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    .arrow-down {
        animation: none;
    }
    
    .gallery-item:hover {
        transform: none;
    }
    
    .gallery-item:hover img {
        transform: none;
    }
    
    .social-icon:hover {
        transform: none;
    }
    
    * {
        transition-duration: 0.001ms !important;
    }
}

/* ======= Impresión ======= */
@media print {
    .hero, .gallery-grid, .contact-form, .footer {
        display: none;
    }
    
    body {
        background-color: white;
        color: black;
    }
    
    .about-content {
        display: block;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
}

/* Ajuste para GLightbox: asegurar que el body no tenga espacio extra */
body.glightbox-open {
    height: 100vh;
    overflow: hidden;
}

/* Ajustes para GLightbox: asegurar que el contenedor ocupe toda la pantalla */
.glightbox-container {
    height: 100vh; /* Asegurar que ocupe toda la altura de la ventana */
    width: 100vw;  /* Asegurar que ocupe todo el ancho de la ventana */
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Asegurar que esté fijo en la ventana */
    top: 0;
    left: 0;
    z-index: 9999; /* Asegurar que esté por encima de todo */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro para el lightbox */
}

/* Solución específica para los títulos H2 en español */
/* Esta solución funciona en todas las resoluciones */

/* Estilos base para todos los títulos en español */
html[lang="es"] h2.section-title[data-lang-key^="discipline_"] {
    font-size: 0 !important; /* Oculta el texto original */
    position: relative;
    margin-bottom: 3rem !important; /* Aumentar el margen inferior para evitar superposiciones */
    height: auto !important; /* Asegurar que el elemento tenga altura */
    min-height: 3rem !important; /* Altura mínima para el título */
    display: block !important; /* Asegurar que el elemento sea un bloque */
    clear: both !important; /* Evitar que otros elementos floten alrededor */
}

html[lang="es"] h2.section-title[data-lang-key^="discipline_"]::after {
    font-size: 2.5rem; /* Tamaño de fuente para desktop */
    display: inline-block;
    position: relative; /* Cambiado de absolute a relative para evitar superposiciones */
    width: 100%;
    text-align: center;
    margin-bottom: 1rem; /* Espacio adicional después del título */
}

/* Telas Aéreas */
html[lang="es"] h2.section-title[data-lang-key="discipline_aerial_silks_title"]::after {
    content: "Telas Aéreas";
}

/* Trapecio de Danza */
html[lang="es"] h2.section-title[data-lang-key="discipline_dance_trapeze_title"]::after {
    content: "Trapecio de Danza";
}

/* Aro Aéreo */
html[lang="es"] h2.section-title[data-lang-key="discipline_aerial_hoop_title"]::after {
    content: "Aro Aéreo";
}

/* Verticales */
html[lang="es"] h2.section-title[data-lang-key="discipline_handbalancing_title"]::after {
    content: "Verticales";
}

/* Cintas Aéreas */
html[lang="es"] h2.section-title[data-lang-key="discipline_straps_title"]::after {
    content: "Cintas Aéreas";
}

/* Ajustes específicos para móviles */
@media (max-width: 767px) {
    /* Aumentar el espacio para los títulos en móviles */
    html[lang="es"] h2.section-title[data-lang-key^="discipline_"] {
        margin-bottom: 4rem !important; /* Más espacio en móviles */
        padding-top: 1rem !important; /* Espacio adicional arriba */
    }
    
    html[lang="es"] h2.section-title[data-lang-key^="discipline_"]::after {
        font-size: 2rem; /* Tamaño de fuente más pequeño para móviles */
        margin-bottom: 2rem; /* Más espacio después del título en móviles */
    }
    
    /* Ajustar el espacio para el contenido que sigue al título */
    html[lang="es"] .discipline-content {
        margin-top: 2rem !important; /* Espacio adicional después del título */
    }
    
    /* Asegurar que las galerías y videos no se superpongan con los títulos */
    html[lang="es"] .gallery-grid,
    html[lang="es"] .videos-grid {
        margin-top: 3rem !important; /* Espacio adicional para evitar superposiciones */
    }
}

/* Ajuste responsive para los títulos en pantallas muy pequeñas */
@media (max-width: 480px) {
    html[lang="es"] h2.section-title[data-lang-key^="discipline_"]::after {
        font-size: 1.8rem; /* Tamaño de fuente aún más pequeño para pantallas muy pequeñas */
    }
    
    /* Aumentar aún más el espacio en pantallas muy pequeñas */
    html[lang="es"] h2.section-title[data-lang-key^="discipline_"] {
        margin-bottom: 5rem !important; /* Aún más espacio en pantallas muy pequeñas */
    }
}