/* ==========================================================================
   ÍNDICE DEL ARCHIVO
   ==========================================================================
   Utilidades de accesibilidad
   1.  Configuración general
   2.  Cabecera (logo, redes, menú, submenús, paneles resumen)
         2.1 Cabecera — Responsive móvil y tablet (menú hamburguesa)
   3.  Carrusel principal
   4.  Próximo concierto
   5.  Sección noticias
         5.1 Noticias — Detalle: extras del listado a 3 columnas (noticias.html)
         5.2 Noticias — Feed de portada (index.html)
         5.3 Noticias — Feed de portada: responsive móvil
         5.4 Noticias — Listado editorial: responsive móvil
   6.  Sección patrocinadores
   7.  Pie de página (footer)
   8.  Sección hero (páginas interiores)
   9.  Sección biografía de la banda
   10. Sección solistas (+ modal de ficha)
   11. Sección temporadas (acordeón + carteles + lightbox)
   12. Enlaces directos de contacto
   13. Sección galería
   14. Compensación de anclas para la cabecera sticky
   15. Página de detalle de noticia
   16. Páginas legales (+ banner de cookies)
   17. Reproductor de música ("En concierto")
   ========================================================================== */

/* ==========================================================================
   UTILIDAD: OCULTO VISUALMENTE, ACCESIBLE PARA LECTORES DE PANTALLA Y SEO
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ==========================================================================
   1. CONFIGURACIÓN GENERAL
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif; /* Fuente discreta, limpia y muy legible */
    background-color: #f4f6f9;
    color: #1a1a1a;
}
/* ==========================================================================
   2. CABECERA: DISEÑO SANS-SERIF FINO Y ESPACIADO (UNIFICADO Y OPTIMIZADO)
   ========================================================================== */
.cabecera-premium {
    width: 100%;
    background-color: #040404; 
    border-bottom: 3px solid #39bb9c; 
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s ease-in-out; /* Suaviza el ocultar/mostrar del Smart Header */
}

/* Clase que añade tu JS para ocultar la cabecera al hacer scroll hacia abajo */
.cabecera-premium.ocultar {
    transform: translateY(-100%);
}

/* Ajusta el logo a un tamaño óptimo en escritorio */
.logo-marca img {
    height: 120px; 
    width: auto;
    display: block;
}

/* Contenedor interno: maximiza el espacio hacia los bordes de la pantalla */
.cabecera-interno {
    max-width: 96%;
    margin: 0 auto;
    padding: 0px 10px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px; 
}

/* --- BLOQUE DERECHO (REDES ARRIBA + MENÚ ABAJO) --- */
.bloque-navegacion {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea todo a la derecha en escritorio */
    gap: 15px; /* Espacio entre redes y menú */
}

.redes-cabecera {
    display: flex;
    gap: 15px; /* Espaciado entre iconos */
    align-items: center;
}

.icono-svg {
    width: 20px;       /* Tamaño del icono */
    height: 20px;
    fill: #39bb9c;     /* Color de los iconos */
    transition: fill 0.3s ease;
}

.icono-svg:hover {
    fill: #ffffff;     /* Color al pasar el ratón */
}

.redes-cabecera a {
    color: #39bb9c;
    font-family: sans-serif;
    font-size: 6px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-decoration: none;
    font-weight: 300;
    transition: opacity 0.3s ease;
}

.redes-cabecera a:hover {
    opacity: 0.7;
}

/* Menú de Navegación: Sans-Serif, Fino y Espaciado */
.menu-premium ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.menu-premium ul li a {
    text-decoration: none;
    color: #ffffff; 
    font-weight: 300;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 5px; /* Espacio entre el texto y la raya */
}

/* --- PANELES DE RESUMEN DESPLEGABLES --- */

/* Contenedor padre de la lista como referencia posicional */
.menu-premium ul li.item-menu-con-resumen {
    position: relative;
    padding-bottom: 15px; /* Margen invisible para mantener el hover */
    margin-bottom: -15px; 
}

/* Estado base oculto del panel descriptivo */
.panel-resumen {
    position: absolute;
    top: 100%;             
    right: 0;              
    width: 260px;          
    background-color: #111111; 
    border-top: 3px solid #39bb9c; 
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Animación de entrada */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    
    z-index: 1100;         
    pointer-events: none;  
}

.panel-resumen h4 {
    font-family: 'Montserrat', sans-serif;
    color: #39bb9c;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 400;
}

.panel-resumen p {
    font-family: 'Open Sans', sans-serif;
    color: #cccccc;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 300;
    text-transform: none; 
    letter-spacing: normal;
}

/* Activación por Hover del panel */
.menu-premium ul li.item-menu-con-resumen:hover .panel-resumen {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; 
}

/* =========================================
   ESTILOS DE LOS SUB-MENÚS (Dropdowns en Escritorio)
   ========================================= */

.menu-premium .desplegable {
    position: relative;
}

.menu-premium .sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto; 
    margin-top: 15px; 

    background-color: #111111;
    border-top: 2px solid #39bb9c; 
    list-style: none;
    padding: 6px 0;
    margin-left: 0;
    min-width: 170px; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    z-index: 1000;

    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* Mostrar sub-menú al hacer hover */
.menu-premium .desplegable:hover .sub-menu {
    visibility: visible !important;
    opacity: 1;
    transform: translateY(0);
}

.menu-premium .sub-menu li a {
    display: block;
    padding: 9px 18px;
    color: #cccccc;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 9.5px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap; 
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

/* Quitamos la raya animada a los sub-enlaces */
.menu-premium .sub-menu li a::after {
    content: none;
}

.menu-premium .sub-menu li a:hover {
    color: #39bb9c;
    padding-left: 22px;
}

/* ==========================================================================
   SUBRAYADO DE APARTADO ACTIVO EN ESCRITORIO
   ========================================================================== */
.menu-premium ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px; 
    width: 100%;
    height: 2px;
    background-color: #39bb9c; 
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.menu-premium ul li a.activo::after,
.menu-premium ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* ==========================================================================
   3. CARRUSEL PRINCIPAL: INTEGRACIÓN EDITORIAL Y CONTROL DE FLECHAS
   ========================================================================== */
.carrusel {
    position: relative;
    width: 100%;
    height: 600px;           
    max-width: 1920px;     
    margin: 0 auto;        
    background-color: #000000;
    overflow: hidden;      
}

/* Ya no se usa una capa global sobre todo el carrusel (oscurecía también el vídeo).
   El oscurecimiento se aplica únicamente a las fotos, ver regla "img.foto" más abajo. */

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.foto-contenedor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.35s ease-in-out; /* Transición rápida pero fluida[cite: 5] */
    z-index: 1; /*[cite: 5] */
}
.foto-contenedor.activo {
    opacity: 1; /*[cite: 5] */
    z-index: 2; /*[cite: 5] */
    /* Aplicamos la animación de luz suavizada */
    animation: destelloEtereo 2s ease-out forwards;
}

@keyframes destelloEtereo {
    0% {
        filter: brightness(1);
        opacity: 0;
    }
    30% {
        /* Un pico de luz mínimo y sofisticado, apenas un reflejo */
        filter: brightness(1.2); 
        opacity: 0.9;
    }
    100% {
        /* Retorno limpio al estado original */
        filter: brightness(1);
        opacity: 1;
    }
}
.foto {
    width: 100%;
    height: 100%;
    object-fit: cover;       
    object-position: center; 
    display: block;
}

/* Oscurecemos solo las fotos (no el vídeo) para que el texto por encima se lea bien */
img.foto {
    filter: brightness(0.68);
}

/* --- TEXTO INDEPENDIENTE INTERNO (Se desvanece sincronizado con la foto) --- */
.carrusel-contenido-flotante {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4; /* Capa intermedia al frente sobre el fondo oscuro */
    display: flex;
    align-items: center; 
}

.carrusel-texto-interno {
    max-width: 1400px; 
    width: 100%;
    margin: 0 auto;
    padding: 0 4%; 
    /* Margen izquierdo amplio para empujar el texto y que no entorpezca con la flecha izq */
    padding-left: 160px; 
    text-align: left;
}

/* Subtítulo superior */
.carrusel-subtitulo {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

/* Título de gran formato estilo revista de arte */
.carrusel-titulo-gigante {
    font-family: 'Montserrat', sans-serif;
    font-size: 64px; 
    font-weight: 200; 
    text-transform: uppercase;
    letter-spacing: 5px; 
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 25px;
}

/* Párrafo descriptivo */
.carrusel-descripcion {
    font-family: 'Open Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.8;
    color: #e0e0e0;
    max-width: 480px; 
    margin-bottom: 40px;
}

/* Grupo de botones en línea horizontal paralela */
.carrusel-botones-grupo {
    display: flex;
    gap: 15px; 
}

.btn-carrusel-transparente {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #ffffff; 
    background: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-carrusel-transparente:hover {
    background-color: #39bb9c; 
    border-color: #39bb9c;
}

/* --- BOTONES DE NAVEGACIÓN (FLECHAS RESTAURADAS Y ANCLADAS) --- */
.flecha-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent; 
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    cursor: pointer;
    font-size: 18px;
    z-index: 10; /* Prioridad máxima por encima del texto y las imágenes */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Forzamos las posiciones físicas absolutas para evitar herencias erróneas */
#carrusel-izq { 
    left: 4% !important;
    right: auto !important;
}

#carrusel-der { 
    right: 4% !important; 
    left: auto !important; /* Resetea el left heredado obligando a la flecha a irse a la derecha */
}

.flecha-btn:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%) scale(1.05);
}

/* Indicadores: Puntitos */
.carrusel-indicators,
.carrusel-indicadores {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.punto {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
}

.punto.activo {
    background: #39bb9c;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .carrusel-texto-interno {
        padding-left: 4%; 
    }
    .carrusel-titulo-gigante {
        font-size: 42px;
    }
}

.btn-volumen {
    position: absolute;
    bottom: 25px;
    right: 4%;               /* Alineado horizontalmente con la flecha derecha */
    background: transparent;  /* Fondo invisible premium */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 50%;      /* Botón circular */
    cursor: pointer;
    z-index: 10;             /* Al frente junto con las flechas y puntitos */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.btn-volumen:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* Ocultamos el botón de volumen automáticamente en las diapositivas que son fotos */
.foto-contenedor:not(.activo) .btn-volumen {
    display: none;
}
/* ==========================================================================
   4. PRÓXIMO CONCIERTO (COMPACTO, DINÁMICO Y EDITORIAL)
   ========================================================================== */
.seccion-evento-refinada {
    padding: 60px 5%; 
    background-color: #fafafa; 
    width: 100%;
}
.cabecera-seccion {
    max-width: 1100px;
    margin: 0 auto 40px auto; 
    text-align: left; /* Alineación a la izquierda */
    border-bottom: 1px solid #eaeaea; /* NUEVA BARRA: Separa el título del contenido */
    padding-bottom: 20px; /* Espacio entre el texto del título y la barra */
}

.subtitulo-seccion {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5em; 
    color: #39bb9c; 
    margin-bottom: 10px;
}

.contenedor-gran-titulo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; /* Alinea al principio (izquierda) */
    gap: 15px;
    position: relative;
}

.adorno-cuadrado {
    width: 6px;
    height: 6px;
    background-color: #39bb9c;
    transform: rotate(45deg); 
    display: inline-block;
}

.gran-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 200; 
    text-transform: uppercase;
    letter-spacing: 8px;
    color: #1a1a1a;
    line-height: 1;
}

.contenedor-evento {
    max-width: 1100px;
    margin: 0 auto;
}


.linea-divisoria {
    width: 1px;
    height: 120px; 
    background-color: #39bb9c;
    opacity: 0.3;
    justify-self: center;
}

.bloque-informacion {
    width: 100%;
    min-width: 0; 
    text-align: left;
}

.titulo-elegante {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #1a1a1a;
    line-height: 1.2;
}

.sinopsis {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
    white-space: normal;
}

.detalles-fila p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
    color: #444;
    border-bottom: 1px solid #eaeaea; 
    padding-bottom: 6px;
}

.detalles-fila strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #39bb9c; 
    margin-right: 15px;
    font-weight: 400;
    display: inline-block;
    width: 100px; 
}

.boton-linea {
    display: inline-block;
    margin-top: 20px;
    color: #1a1a1a;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-bottom: 2px solid #39bb9c; 
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

.boton-linea:hover {
    color: #39bb9c;
    background-color: rgba(57, 187, 156, 0.03); 
    padding-left: 6px;
    padding-right: 6px;
}

/* CONTENEDOR CON LÍNEAS CORPORATIVAS (ARRIBA Y ABAJO) */


/* Ajuste de la imagen dentro del adorno */


/* ==========================================================================
   ESTADO PRÓXIMAMENTE: ARMONIZADO CON LA ESTÉTICA GLOBAL
   ========================================================================== */
.grid-proximamente-armonizado {
    align-items: stretch !important;
    margin-top: 40px;
}

/* Espacio donde iría el cartel: Creamos un elemento artístico minimalista */
.bloque-visual-espera {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marco-cartel-vacio {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1.414; /* Misma proporción A4 que tus carteles reales */
    border: 1px dashed rgba(57, 187, 156, 0.4); /* Línea discontinua elegante en tu verde */
    background-color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01);
}

/* Geometría sutil evocando un lienzo preparado */
.lineas-interiores-boceto {
    position: absolute;
    top: 20px; left: 20px; right: 20px; bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    pointer-events: none;
}

.anagrama-centro-vacio {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: 24px;
    letter-spacing: 12px;
    text-indent: 12px; /* Centrado óptico de la letra por el espaciado */
    color: rgba(26, 26, 26, 0.2);
    text-transform: uppercase;
}

/* Bloque derecho de información narrativa */
.bloque-informacion-espera {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
}

.bloque-informacion-espera .titulo-elegante {
    margin-bottom: 25px;
    color: #1a1a1a;
}

.bloque-informacion-espera .sinopsis {
    margin-bottom: 20px;
    color: #555555;
    max-width: 540px;
}

/* Meta información inferior coordinada */
.detalles-fila-espera {
    margin-top: 15px;
    padding-top: 25px;
    border-top: 1px solid #eaeaea;
    display: flex;
}

.item-meta-espera {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.meta-etiqueta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
}

.meta-valor-destacado {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #39bb9c; /* Tu color verde para darle un toque vivo */
}

/* Animación sutil de carga */
.animate-fade-in {
    animation: fadeInSeccion 0.8s ease-out forwards;
}

@keyframes fadeInSeccion {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Adaptación responsive */
@media (max-width: 900px) {
    .grid-proximamente-armonizado {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .marco-cartel-vacio {
        max-width: 280px;
        margin: 0 auto;
    }
    .bloque-informacion-espera {
        text-align: center;
        padding-left: 0;
    }
    .detalles-fila-espera {
        justify-content: center;
    }
}
/* ==========================================================================
   5. SECCIÓN NOTICIAS: LISTADO EDITORIAL EN HILERAS
   ========================================================================== */
.seccion-historico-noticias {
    display: block !important;
    clear: both !important;
    width: 100%;
    background-color: #fafafa !important; /* Fondo fafafa continuo */
    padding: 100px 5% 60px 5% !important; /* Espacio superior generoso + margen lateral igual que el resto de secciones */
}

/* El contenedor se acopla de manera limpia al flujo sin alterar anchos */
.contenedor-noticias-feed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Grid original de 3 columnas horizontales: Chato y ancho */
.item-noticia-orquesta {
    display: grid !important;
    grid-template-columns: 180px 1fr 180px !important; 
    gap: 30px !important;       
    padding: 24px 0 !important;
    border-top: 1px solid #39bb9c !important; /* Línea turquesa de marca arriba */
    align-items: start !important;
    cursor: pointer;
    background: transparent !important;
    transition: background-color 0.3s ease;
}

.item-noticia-orquesta:first-child {
    padding-top: 24px !important; 
}

.item-noticia-orquesta:last-child {
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(57, 187, 156, 0.2) !important; /* Cierra el bloque elegantemente */
}

/* Columna 1: Fecha */
.noticia-col-fecha {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #777777;
    text-transform: none; 
    letter-spacing: 0.5px;
    padding-top: 2px;     
}

/* Columna 2: Texto */
.noticia-col-texto {
    display: flex;
    flex-direction: column;
    padding-right: 15px;
}

.noticia-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px; 
    font-weight: 400;
    color: #333333;
    line-height: 1.3;
    letter-spacing: 0.1px;
    margin-top: 0;
    margin-bottom: 6px; 
    transition: color 0.3s ease;
}

.item-noticia-orquesta:hover .noticia-titulo {
    color: #39bb9c; 
}

.noticia-resumen {
    font-family: 'Open Sans', sans-serif;
    font-size: 13.5px;
    color: #666666;
    line-height: 1.5;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Columna 3: Imagen */
.noticia-col-img {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border: 1px solid #eeeeee;
}

.noticia-col-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.5s ease;
}

.item-noticia-orquesta:hover .noticia-col-img img {
    transform: scale(1.03);
}

/* ==========================================================================
   5.4 Noticias — Listado editorial: responsive móvil
   ========================================================================== */
@media (max-width: 900px) {
    .contenedor-noticias-feed {
        width: 100% !important;
    }

    /* Transformamos las 3 columnas horizontales en una única columna fluida por noticia */
    .item-noticia-orquesta {
        grid-template-columns: 1fr !important; /* Pasa a ser vertical */
        gap: 15px !important;
        padding: 24px 0 !important;
    }

    /* La imagen se sitúa arriba y ocupa un espacio más proporcional en móvil */
    .noticia-col-img {
        order: -1; /* Envía la imagen al principio de la noticia */
        width: 100% !important;
        height: 160px !important; /* Altura ideal en smartphones */
        border-radius: 4px;
    }

    .noticia-col-fecha {
        font-size: 11px !important;
        color: #39bb9c !important; /* Destaca la fecha con el turquesa en móvil */
        padding-top: 0 !important;
    }

    .noticia-titulo {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .noticia-resumen {
        font-size: 13px !important;
        -webkit-line-clamp: 3; /* Un pelín más de lectura en móviles */
        line-clamp: 3;
    }
}

/* ==========================================================================
   6. SECCIÓN PATROCINADORES (DESPLAZAMIENTO HORIZONTAL)
   ========================================================================== */
.seccion-patrocinadores-editorial {
    padding: 40px 5% 100px 5%;
    background-color: #fafafa; /* Continuidad perfecta del fondo */
    width: 100%;
}

.contenedor-patrocinadores {
    max-width: 1100px;
    margin: 0 auto;
}

/* Contenedor del scroll horizontal */
.desplazamiento-horizontal-patrocinios {
    display: flex;
    align-items: center;
    gap: 60px; /* Separación generosa entre logotipos */
    overflow-x: auto; /* Permite el scroll nativo */
    padding: 30px 10px;
    cursor: grab; /* Cambia el cursor a una mano abierta */
    user-select: none; /* Evita que se seleccione el texto o imagen al arrastrar */
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Ocultar barra de scroll en navegadores basados en Webkit (Chrome, Safari, Edge) */
.desplazamiento-horizontal-patrocinios::-webkit-scrollbar {
    display: none;
}

/* Ocultar barra de scroll en Firefox y IE */

/* Estado del cursor mientras se mantiene pulsado el click y se arrastra */
.desplazamiento-horizontal-patrocinios.arrastrando {
    cursor: grabbing;
    scroll-behavior: auto; /* Desactiva el suavizado durante el arrastre para evitar tirones */
}

/* Envoltura de cada logo */
.enlace-patrocinador {
    flex: 0 0 auto; /* Impide que los logos se encojan, manteniendo su tamaño nativo en la fila */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px; /* Altura máxima controlada para unificar la fila */
    transition: transform 0.3s ease;
}

/* Imagen del logo */
.logo-patrocinador {
    max-height: 100%;
    width: auto;
    max-width: 160px; /* Ancho máximo para que ningún logo destaque exageradamente */
    object-fit: contain;
    filter: grayscale(100%) opacity(0.5); /* Estética de alta gama: logos unificados en gris tenue */
    transition: filter 0.3s ease, opacity 0.3s ease;
    pointer-events: none; /* Evita que el navegador intente arrastrar la imagen de forma nativa */
}

/* Efecto al pasar el ratón por encima (Hover) */
.enlace-patrocinador:hover {
    transform: translateY(-3px); /* Pequeña elevación muy sutil */
}

.enlace-patrocinador:hover .logo-patrocinador {
    filter: grayscale(0%) opacity(0.9); /* El logo recobra su color original de marca limpiamente */
}

/* INDICADOR "DESLIZA PARA CONTINUAR" (MINIMALISTA) */
.indicador-deslizar {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alineado a la derecha al final del carrusel */
    gap: 8px;
    margin-top: 15px;
    opacity: 0.5; /* Discreto */
    transition: opacity 0.3s ease;
}

.desplazamiento-horizontal-patrocinios:hover + .indicador-deslizar {
    opacity: 0.8; /* Se vuelve un poco más visible al interactuar */
}

.texto-deslizar {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888;
}

.flecha-deslizar {
    font-size: 12px;
    color: #39bb9c; /* Tu color corporativo en la flecha */
    animation: desplazarFlecha 1.6s infinite ease-in-out;
}

/* Animación sutil de vaivén para la flecha */
@keyframes desplazarFlecha {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

/* ==========================================================================
   7. PIE DE PÁGINA (FOOTER)
   ========================================================================== */
.pie-pagina-premium {
    background-color: #111111; /* Fondo oscuro sofisticado para cerrar la web */
    color: #ffffff;
    padding: 80px 5% 40px 5%;
    width: 100%;
}

.contenedor-footer {
    max-width: 1100px;
    margin: 0 auto;
}

/* Cuadrícula de 4 columnas */
.grid-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid #222222; /* Línea de división interna ultra sutil */
}

/* Títulos de las columnas */
.titulo-columna-footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #39bb9c; /* Tu color corporativo destaca en el título */
    margin-bottom: 25px;
    font-weight: 400;
}

/* Textos de descripción e información */
.descripcion-institucional,
.info-contacto {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #aaaaaa; /* Gris claro para lectura discreta */
    font-weight: 300;
}

.info-contacto strong {
    color: #ffffff;
    font-weight: 400;
}

.info-contacto {
    margin-bottom: 8px;
}

/* Listados de enlaces (Mapa web y Redes) */
.enlaces-footer {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enlaces-footer li {
    margin-bottom: 12px;
}

.enlaces-footer a {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #aaaaaa;
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

/* Efecto elegante al posar el cursor sobre los enlaces */
.enlaces-footer a:hover {
    color: #39bb9c; /* Cambia a tu verde de marca */
    padding-left: 4px; /* Desplazamiento mínimo premium */
}

/* Barra inferior de Copyright y Legales */
.barra-inferior-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
}

.copyright {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #666666;
    font-weight: 300;
}

.enlaces-legales a {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #666666;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 300;
    transition: color 0.3s ease;
}

.enlaces-legales a:hover {
    color: #aaaaaa;
}

/* Ajuste responsive básico por si se ve en móviles */
@media (max-width: 768px) {
    .grid-footer {
        grid-template-columns: repeat(2, 1fr);
    }
    .barra-inferior-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .enlaces-legales a {
        margin: 0 10px;
    }
}

/* ==========================================================================
   8. SECCIÓN HERO (INTRODUCCIÓN DE PÁGINA INTERIOR)
   ========================================================================== */
.hero-introduccion {
    position: relative;
    width: 100%;
    height: 65vh; /* Altura elegante (65% de la pantalla) */
    min-height: 450px;
    background-image: url('imagenes/banda/no_horizontal2.jpeg'); /* Puedes cambiarla por la imagen general de la banda que prefieras */
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

/* Capa oscura translúcida superpuesta para garantizar la lectura perfecta del texto */
.hero-capa-oscura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(4, 4, 4, 0.75), rgba(4, 4, 4, 0.5));
    z-index: 1;
}

.hero-contenido {
    position: relative;
    z-index: 2;
    max-width: 800px;
    animation: fadeInHero 1s ease-out;
}

.hero-subtitulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 6px;
    color: #39bb9c; /* Tu color corporativo */
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.hero-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200; /* Fino y elegante como la cabecera */
    font-size: 42px;
    letter-spacing: 4px;
    color: #ffffff;
    margin-bottom: 25px;
    text-transform: uppercase;
    line-height: 1.2;
}

.hero-descripcion {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 35px;
    padding: 0 40px;
}

/* Botón Minimalista Transparente */
.btn-hero-descubrir {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    transition: all 0.3s ease;
}

.btn-hero-descubrir:hover {
    background-color: #ffffff;
    color: #040404;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Animación de entrada suave al cargar la página */
@keyframes fadeInHero {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Adaptación para pantallas móviles */
@media (max-width: 768px) {
    .hero-introduccion {
        height: 55vh;
    }
    .hero-titulo {
        font-size: 30px;
        letter-spacing: 2px;
    }
    .hero-descripcion {
        font-size: 14px;
        padding: 0 10px;
    }
}

/* ==========================================================================
   9. SECCIÓN BIOGRAFÍA DE LA BANDA (DOS COLUMNAS Y ADORNOS)
   ========================================================================== */
.grid-biografia {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 20px 0;
}

.bloque-texto-bio {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Párrafo introductorio de mayor tamaño y tono corporativo */
.sinopsis-destacada {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    color: #39bb9c; /* Tu verde de marca */
    margin-bottom: 10px;
}

/* Estilo para el lema inferior */
.lema-corporativo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.linea-decorativa-corta {
    width: 30px;
    height: 1px;
    background-color: #39bb9c;
}

.texto-lema {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
}

/* Área de composición visual de la imagen */
.bloque-imagen-bio {
    display: flex;
    justify-content: center;
    align-items: center;
}

.marco-decorativo-bio {
    position: relative;
    padding: 10px;
    width: 100%;
    max-width: 460px;
}

/* Bloque asimétrico translúcido de fondo */
.geometria-fondo {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 75%;
    height: 85%;
    /* 10% de opacidad del verde corporativo para un fondo pastel impecable */
    background-color: rgba(57, 187, 156, 0.1); 
    z-index: 1;
    border-right: 2px solid #39bb9c;
    border-top: 2px solid #39bb9c;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Contenedor tipo cuadro de exposición artística */
.wrapper-imagen-elegante {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    padding: 12px;
    border: 1px solid #eaeaea;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
}

.imagen-bio {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3; /* Proporción limpia y apaisada */
    background-color: #eee;
}

/* Insignia oscura para romper la monotonía cromática */
.insignia-fundacion {
    position: absolute;
    bottom: -10px;
    left: -15px;
    background-color: #1a1a1a; /* Fondo oscuro sofisticado */
    border-left: 3px solid #39bb9c;
    padding: 10px 18px;
    z-index: 3;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.insignia-texto {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
}

/* --- ANIMACIONES SUTILES AL PASAR EL RATÓN --- */
.marco-decorativo-bio:hover .geometria-fondo {
    transform: translate(6px, -6px); /* El fondo verde reacciona levemente */
}

/* ==========================================================================
   9.1 Biografía — Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .grid-biografia {
        grid-template-columns: 1fr; /* Una columna en tablets y móviles */
        gap: 50px;
    }
    
    .bloque-imagen-bio {
        order: -1; /* En móviles la imagen sube arriba para mayor impacto visual */
        padding: 0 15px;
    }
    
    .sinopsis-destacada {
        font-size: 18px;
    }
}

/* ==========================================================================
   9.2 Biografía — Retrato del director
   ========================================================================== */
.grid-layout {
    display: grid;
    grid-template-columns: 450px auto 1fr; /* Ampliado de 340px a 450px para dar más ancho */
    gap: 40px;
    align-items: center;
    width: 100%;

}

.cartel-decorado {
    position: relative;
    padding: 12px 0;
    border-top: 2px solid #39bb9c;
    border-bottom: 2px solid #39bb9c;
    width: 100%;
    max-width: 450px; /* Consistente con la columna del grid */
    margin: 0 auto;
}

.cartel-elegante {
    width: 100%;
    aspect-ratio: 3 / 2; /* Proporción más apaisada para que quepa el cuadro completo sin recortes */
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   10. SECCIÓN SOLISTAS (RETRATOS CIRCULARES)
   ========================================================================== */
.seccion-solistas-carrusel {
    padding: 60px 0; /* Ajustamos padding para dar espacio al centrado */
    background-color: #fafafa;
    width: 100%;
    overflow: hidden;
    
    /* NUEVO: Forzamos a la sección a ocupar el alto de la pantalla y centrar su contenido */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical absoluto */
}

.cabecera-solistas {
    max-width: 1400px;
    margin: 0 auto 50px auto; /* Aumentamos ligeramente el margen inferior */
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    width: 100%; /* Asegura que ocupe todo el ancho disponible dentro del flex */
}

.titulo-solistas-wrapper {
    display: flex;
    align-items: stretch;
    gap: 15px;
}

.linea-vertical-titulo {
    width: 2px;
    background-color: #39bb9c; /* Detalle vertical en tu color corporativo */
}

.titulo-solistas {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 1.3;
}

.texto-arrastrar {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}

.contenedor-cinta-solistas {
    position: relative;
    width: 100%;
    padding: 30px 0; /* Más espacio para que la cinta luzca equilibrada en el centro */
}

/* Franja de fondo que corta las fotos por la mitad */
.fondo-cinta-color {
    position: absolute;
    top: 45%; 
    left: 0;
    width: 100%;
    height: 55%;
    /* Utilizo tu verde corporativo (#39bb9c) pero con un 8% de opacidad para crear el fondo pastel */
    background-color: rgba(57, 187, 156, 0.08); 
    z-index: 1;
}

.desplazamiento-horizontal-solistas {
    display: flex;
    gap: 60px;
    overflow-x: auto;
    padding: 0 5%;
    position: relative;
    z-index: 2;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */
    cursor: grab;
    user-select: none; /* Evita seleccionar texto/imagen al arrastrar */
    justify-content: center; 
}

/* Oculta la barra de scroll en Chrome/Safari */
.desplazamiento-horizontal-solistas::-webkit-scrollbar {
    display: none; 
}

.desplazamiento-horizontal-solistas.arrastrando {
    cursor: grabbing;
    scroll-behavior: auto; /* Evita tirones al arrastrar */
}

.item-solista {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    cursor: pointer;
}

.foto-solista-wrapper {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 25px;
    background-color: #f4f4f4;
}

.foto-solista {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Filtro blanco y negro por defecto */
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Efecto al posar el ratón: recupera color y hace un leve zoom */
.item-solista:hover .foto-solista {
    filter: grayscale(0%);
    transform: scale(1.03);
}

.nombre-solista {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #555;
    text-align: center;
    font-weight: 400;
}
/* ==========================================================================
   10.1 Solistas — Modal de ficha (fondo oscuro + ventana clara)
   ========================================================================== */
.modal-solista-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Volvemos al fondo oscuro elegante con desenfoque de fondo */
    background-color: rgba(4, 4, 4, 0.85); 
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000; /* Por encima de la cabecera sticky */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.modal-solista-overlay.activo {
    opacity: 1;
    visibility: visible;
}

/* Ventana del modal (Blanca, limpia y muy legible) */
.modal-solista-ventana {
    position: relative;
    width: 92%;
    max-width: 960px; 
    height: 80vh;
    max-height: 650px;
    background-color: #ffffff; /* Interior blanco impecable */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada sobre el fondo oscuro */
    overflow: hidden;
    
    transform: translateY(20px) scale(0.99);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-solista-overlay.activo .modal-solista-ventana {
    transform: translateY(0) scale(1);
}

/* Botón de cerrar minimalista (Líneas oscuras) */
.modal-solista-cerrar {
    position: absolute;
    top: 25px;
    right: 25px;
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 2010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.3s;
}

.modal-solista-cerrar:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.modal-solista-cerrar span {
    position: absolute;
    width: 20px;
    height: 1.5px;
    background-color: #1a1a1a; /* Aspas oscuras para que contrasten sobre el fondo blanco */
}

.modal-solista-cerrar .linea-cruz-h { transform: rotate(45deg); }
.modal-solista-cerrar .linea-cruz-v { transform: rotate(-45deg); }


/* --- GRID DE DOS COLUMNAS --- */
.modal-solista-grid-premium {
    display: grid;
    grid-template-columns: 380px 1fr; 
    height: 100%;
    width: 100%;
}

/* 1. Columna de la Foto (Gris claro de exposición) */
.modal-solista-lateral-foto {
    background-color: rgba(57, 187, 156, 0.08); /* Paspartú claro que enmarca la foto sin recortarla */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-right: 1px solid #eaeaea;
    height: 100%;
}

.modal-solista-marco-exacto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Conserva la imagen original al 100% sin recortar nada */
.modal-solista-marco-exacto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border: 1px solid #ffffff;
}

/* 2. Columna de Contenido y Textos (Luminosa) */
.modal-solista-cuerpo-contenido {
    padding: 50px 50px 40px 50px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; 
}

.modal-solista-info-fija {
    flex-shrink: 0; 
}

.modal-solista-subtitulo {
    font-family: 'Montserrat', sans-serif;
    color: #39bb9c; /* Verde corporativo destacando */
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.modal-solista-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a1a1a; /* Texto principal oscuro */
    line-height: 1.2;
}

.modal-solista-linea {
    width: 40px;
    height: 2px;
    background-color: #39bb9c;
    margin: 18px 0 25px 0;
}

/* Zona de scroll para la biografía */
.modal-solista-texto-scroller {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 20px;
}

.modal-solista-descripcion {
    font-family: 'Open Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.85;
    color: #444444; /* Lectura súper cómoda y nítida */
    font-weight: 300;
}

/* Barra de scroll fina y discreta */
.modal-solista-texto-scroller::-webkit-scrollbar {
    width: 4px;
}

.modal-solista-texto-scroller::-webkit-scrollbar-track {
    background: transparent;
}

.modal-solista-texto-scroller::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.modal-solista-texto-scroller::-webkit-scrollbar-thumb:hover {
    background-color: #39bb9c;
}


/* ==========================================================================
   10.2 Solistas — Modal responsive
   ========================================================================== */
@media (max-width: 900px) {
    .modal-solista-ventana {
        height: 85vh;
        max-height: none;
    }

    .modal-solista-grid-premium {
        grid-template-columns: 1fr; 
        grid-template-rows: 220px 1fr; 
    }

    .modal-solista-lateral-foto {
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid #eaeaea;
        height: 220px;
    }

    .modal-solista-cuerpo-contenido {
        padding: 30px;
    }

    .modal-solista-titulo {
        font-size: 20px;
    }
    .desplazamiento-horizontal-solistas {
        justify-content: flex-start !important;
    }
}
/* ==========================================================================
   11. SECCIÓN TEMPORADAS (ACORDEÓN EDITORIAL)
   ========================================================================== */
.contenedor-timeline-temporadas {
    max-width: 1000px;
    margin: 0 auto;
    border-top: 1px solid #e0e0e0;
}

.temporada-desplegable {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.4s ease;
}

/* El botón ahora es un contenedor sofisticado */
.btn-desplegable {
    width: 100%;
    background: transparent;
    border: none;
    padding: 40px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: padding-left 0.4s ease;
}

.btn-desplegable:hover {
    padding-left: 30px; /* Efecto sutil de desplazamiento al pasar el ratón */
}

/* Agrupación de la información (Número, Año, Título, Subtítulo) */
.info-temporada-premium {
    display: flex;
    align-items: center;
    gap: 50px;
}

.meta-ciclo {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.numero-ciclo {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #39bb9c;
    font-weight: 400;
    margin-bottom: 5px;
}

.año-ciclo {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    color: #1a1a1a;
    font-weight: 300;
    letter-spacing: 1px;
}

.textos-ciclo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-left: 1px solid #dcdcdc;
    padding-left: 40px;
}

.titulo-ciclo {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
}

.subtitulo-ciclo {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #777;
    font-weight: 300;
    max-width: 500px;
}

/* Icono Cruz Minimalista (+ / -) */
.icono-cruz {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.linea-h, .linea-v {
    position: absolute;
    background-color: #39bb9c;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.linea-h {
    top: 9px;
    left: 0;
    width: 20px;
    height: 2px;
}

.linea-v {
    top: 0;
    left: 9px;
    width: 2px;
    height: 20px;
}

/* --- ESTADOS ACTIVOS (Gestionados por tu JS) --- */
.temporada-desplegable.abierto {
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.02);
    border-bottom-color: transparent;
}

.temporada-desplegable.abierto .linea-v {
    transform: rotate(90deg); /* El palito vertical se tumba, formando un "menos" (-) */
}

/* --- INTERIOR: GRID DE CONCIERTOS --- */
.contenido-desplegable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-conciertos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 0 40px 60px 40px;
}

.tarjeta-concierto {
    display: flex;
    flex-direction: column;
}


.imagen-cartel {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1.414; 
    object-fit: cover;
}

.titulo-concierto {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.motivacion-concierto {
    font-family: 'Open Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #666;
    font-weight: 300;
}

.tarjeta-concierto:hover .wrapper-cartel {
    transform: translateY(-8px);
    border-color: #39bb9c;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .info-temporada-premium {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .textos-ciclo {
        border-left: none;
        padding-left: 0;
    }
    
    .grid-conciertos {
        grid-template-columns: 1fr;
        padding: 0 20px 40px 20px;
    }
    
    .btn-desplegable {
        padding: 30px 15px;
    }
}


/* ==========================================================================
   11.1 Temporadas — Carteles (cursor e indicador visual)
   ========================================================================== */
.wrapper-cartel {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #eaeaea;
    transition: transform 0.4s ease, border-color 0.4s ease;
    cursor: pointer; /* Cambia a mano para indicar que se puede pinchar */
}

/* Media query existente para asegurar que el diseño del director responda bien en móvil */
@media (max-width: 900px) {
    .grid-layout {
        grid-template-columns: 1fr;
    }
    .cartel-decorado {
        max-width: 100%;
    }
    .linea-divisoria {
        display: none;
    }
}


/* ==========================================================================
   11.2 Temporadas — Lightbox translúcido de carteles
   ========================================================================== */
.lightbox-visor-cartel {
    display: none;
    position: fixed;
    z-index: 2500; /* Asegura estar por encima de menús sticky */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro translúcido como la galería */
    backdrop-filter: blur(3px); /* Suave desenfoque estético */
    opacity: 0;
    transition: opacity 0.3s ease;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/* Clase de activación manejada por JavaScript */
.lightbox-visor-cartel.activo {
    display: flex;
    opacity: 1;
}

.lightbox-imagen-cartel {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85vh; /* Evita que desborde el alto de pantalla */
    width: auto;
    height: auto;
    object-fit: contain;
    border: 4px solid #ffffff; /* Marco elegante blanco */
    box-shadow: 0 10px 50px rgba(0,0,0,0.6);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.lightbox-visor-cartel.activo .lightbox-imagen-cartel {
    transform: scale(1);
}

.cerrar-visor-cartel {
    position: absolute;
    top: 25px;
    right: 40px;
    color: #ffffff;
    font-size: 50px;
    font-weight: 200;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 2600;
}

.cerrar-visor-cartel:hover {
    color: #39bb9c; /* Cambia al color verde de la marca al pasar el cursor */
}

@media (max-width: 768px) {
    .lightbox-visor-cartel {
        padding: 20px;
    }
    .cerrar-visor-cartel {
        right: 20px;
        top: 15px;
        font-size: 40px;
    }
    .lightbox-imagen-cartel {
        max-width: 100%;
        border-width: 2px;
    }
}

/* ==========================================================================
   12. ENLACES DIRECTOS DE CONTACTO (MAIL Y TELÉFONO)
   ========================================================================== */
.enlace-contacto {
    font-family: 'Open Sans', sans-serif;
    color: #aaaaaa; /* Mismo gris elegante del resto de enlaces */
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    transition: color 0.3s ease;
    display: inline-block;
    margin-top: 4px; /* Un pequeño respiro con el título de "Email:" o "Tel:" */
}

.enlace-contacto:hover {
    color: #39bb9c; /* Se ilumina con tu verde corporativo */
}

/* ==========================================================================
   13. SECCIÓN GALERÍA (GRID ASIMÉTRICO)
   ========================================================================== */

.hero-ver-escuchar {
    background-image: url('imagenes/banda/no_horizontal1.jpeg' ) !important; 
    background-position: center center;
}

.mosaico-galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    grid-auto-rows: 240px; /* Altura base de cada fila */
    gap: 25px;
    width: 100%;
    background-color: #fafafa; /* NUEVO: Asegura que el hueco entre fotos sea del color correcto */
}

/* Contenedor relativo para poder posicionar el texto encima */
.item-galeria {
    position: relative; /* Clave para que el pie de foto sepa dónde colocarse */
    background-color: #fafafa;
    padding: 0; /* Quitamos el padding para que la imagen ocupe todo */
    cursor: pointer;
    overflow: hidden;
}

/* La imagen base */
.item-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

/* Corrección para que el clic atraviese el pie de foto */
.pie-galeria {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none; /* ESTA ES LA CLAVE: El clic atraviesa el texto */
    z-index: 10;
}

/* --- EFECTO HOVER --- */

.item-galeria:hover img {
    opacity: 0.6; /* Oscurecemos la imagen al pasar el ratón */
    filter: grayscale(0%);
}

.item-galeria:hover .pie-galeria {
    opacity: 1; /* Aparece el pie de foto */
}

/* --- Reglas de Asimetría --- */

/* Las fotos anchas (horizontales potentes) ocupan 2 columnas */
.item-galeria.foto-ancha {
    grid-column: span 2;
}

/* Las cuadradas ocupan 1 columna y se fuerzan a proporción 1:1 perfecta */
.item-galeria.foto-cuadrada {
    grid-column: span 1;
}

/* Las normales ocupan 1 columna pero mantienen formato horizontal en el grid */
.item-galeria.foto-normal {
    grid-column: span 1;
}

/* Efectos Hover */
.item-galeria:hover {
    transform: translateY(-5px);
    border-color: #39bb9c;
}

/* Forzar que el lightbox esté siempre encima de todo */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999 !important; /* Prioridad máxima */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox.activo {
    opacity: 1;
    visibility: visible;
}
/* --- LIGHTBOX: ESTRUCTURA LIMPIA --- */
#lightbox-visor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#lightbox-visor.activo {
    display: flex;
    opacity: 1;
}

/* Contenedor de la imagen para que siempre se ajuste */
.lightbox-contenido {
    max-width: 90%;
    max-height: 80%;
    display: flex;
    justify-content: center;
}

#lightbox-imagen-principal {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border: 3px solid #fff;
}

/* --- BOTONES DE NAVEGACIÓN REDONDOS --- */
.lightbox-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Esto los hace perfectamente redondos */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px); /* Efecto cristalino moderno */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 24px;
    cursor: pointer;
    z-index: 10000;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-flecha:hover {
    transform: translateY(-50%) scale(1.1); /* Efecto de crecimiento suave */
    border-color: white; /* Cambio de color al pasar el ratón */
}

#lightbox-prev { left: 30px; }
#lightbox-next { right: 30px; }

/* Hitbox grande pero invisible */
.lightbox-cerrar {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px; /* Hitbox grande para facilitar el clic */
    height: 60px;
    background: transparent; /* Fondo transparente */
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* La X pequeña y discreta */
.lightbox-cerrar .linea-cruz-h, 
.lightbox-cerrar .linea-cruz-v {
    position: absolute;
    width: 15px; /* Tamaño muy pequeño */
    height: 1px; /* Grosor fino */
    background: white;
    transition: opacity 0.3s;
    opacity: 0.5; /* Casi invisible */
}

.lightbox-cerrar .linea-cruz-h { transform: rotate(45deg); }
.lightbox-cerrar .linea-cruz-v { transform: rotate(-45deg); }

/* Al pasar el ratón, la X se vuelve más visible */
.lightbox-cerrar:hover .linea-cruz-h,
.lightbox-cerrar:hover .linea-cruz-v {
    opacity: 1;
}

/* ==========================================================================
   5.1 Noticias — Detalle: extras del listado a 3 columnas (noticias.html)
   ========================================================================== */

   .hero-noticias {
    background-image: url('imagenes/banda/cuadrada3.JPG' ) !important; 
    background-position: center center;
}


/* Kicker superior "NOTICIAS" */
.noticias-titulo-seccion {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555555;
    padding-bottom: 12px;
    margin-bottom: 0;
}

/* Grid de 3 columnas horizontales: MÁS CHATO Y ANCHO */


/* Quitamos el padding extra del primer elemento para que se pegue bien a la línea superior */


/* El último elemento ya no necesita un tratamiento especial de borde inferior */


/* Columna 1: Fecha */


/* Columna 2: Texto */


/* Columna 3: Imagen */


/* ==========================================================================
   14. COMPENSACIÓN DE ANCLAS PARA LA CABECERA STICKY
   ========================================================================== */
#nuestra-historia,
#el-director,
#solistas,
#historial-conciertos {
    scroll-margin-top: 150px; /* Evita que la cabecera sticky tape el inicio de la sección al saltar desde el desplegable */
}

/* ==========================================================================
   15. PÁGINA DE DETALLE DE NOTICIA (noticia-detalle.html)
   ========================================================================== */
.noticia-detalle-hero {
    position: relative;
    width: 100%;
    height: 45vh;
    min-height: 320px;
    background-color: #040404;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

.noticia-detalle-capa-oscura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(4, 4, 4, 0.9), rgba(4, 4, 4, 0.25));
}

.noticia-detalle-contenido-hero {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 5% 45px;
    width: 100%;
}

.noticia-detalle-fecha {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #39bb9c;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.noticia-detalle-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.3;
}

/* Cuerpo del artículo */
.seccion-noticia-detalle {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0 100px;
}

.contenedor-noticia-detalle {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5%;
}

.enlace-volver-noticias {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888888;
    text-decoration: none;
    margin-bottom: 40px;
    transition: color 0.3s ease;
}

.enlace-volver-noticias:hover {
    color: #39bb9c;
}

.noticia-detalle-cuerpo {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.9;
    color: #333333;
}

.noticia-detalle-cuerpo p {
    margin-bottom: 22px;
}

.noticia-detalle-cuerpo strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* Adaptación móvil */
@media (max-width: 768px) {
    .noticia-detalle-hero {
        height: 35vh;
        min-height: 260px;
    }

    .noticia-detalle-titulo {
        font-size: 24px;
    }

    .noticia-detalle-cuerpo {
        font-size: 15px;
    }
}
/* ==========================================================================
   16. PÁGINAS LEGALES (Aviso Legal / Privacidad / Cookies)
   ========================================================================== */

.contenido-legal {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

.contenido-legal .fecha-actualizacion {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #39bb9c;
    margin-bottom: 40px;
    display: block;
}

.contenido-legal h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1px;
    color: #1a1a1a;
    margin-top: 46px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
}

.contenido-legal h2:first-of-type {
    margin-top: 0;
}

.contenido-legal h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    margin-top: 26px;
    margin-bottom: 10px;
}

.contenido-legal p {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 18px;
}

.contenido-legal ul,
.contenido-legal ol {
    margin: 0 0 20px 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

.contenido-legal li {
    margin-bottom: 8px;
}

.contenido-legal li::marker {
    color: #39bb9c;
}

.contenido-legal a {
    color: #1a8a70;
    text-decoration: none;
    border-bottom: 1px solid rgba(57, 187, 156, 0.4);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.contenido-legal a:hover {
    color: #39bb9c;
    border-color: #39bb9c;
}

.contenido-legal strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* Bloque de datos identificativos (tipo "ficha") */
.ficha-datos {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-left: 3px solid #39bb9c;
    padding: 24px 28px;
    margin-bottom: 30px;
}

.ficha-datos p {
    margin-bottom: 10px;
    font-size: 14px;
}

.ficha-datos p:last-child {
    margin-bottom: 0;
}

.marcador-editar {
    background-color: rgba(57, 187, 156, 0.12);
    color: #1a8a70;
    padding: 1px 6px;
    border-radius: 3px;
    font-style: normal;
}

/* Tabla de cookies */
.tabla-legal-wrapper {
    overflow-x: auto;
    margin-bottom: 30px;
}

.tabla-legal {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #555;
    background-color: #ffffff;
}

.tabla-legal th {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    color: #1a1a1a;
    background-color: #f4f6f9;
    padding: 14px 16px;
    border-bottom: 2px solid #39bb9c;
}

.tabla-legal td {
    padding: 14px 16px;
    border-bottom: 1px solid #eaeaea;
    vertical-align: top;
}

.tabla-legal tr:last-child td {
    border-bottom: none;
}

/* Índice / navegación rápida entre las tres páginas legales */
.nav-legal {
    max-width: 820px;
    margin: 0 auto 10px auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-legal a {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #555;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #eaeaea;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.nav-legal a:hover,
.nav-legal a.activo {
    color: #ffffff;
    background-color: #39bb9c;
    border-color: #39bb9c;
}

@media (max-width: 768px) {
    .contenido-legal h2 {
        font-size: 18px;
    }
    .ficha-datos {
        padding: 18px 20px;
    }
}
/* ==========================================================================
   16.1 Legales — Banner de consentimiento de cookies
   ========================================================================== */
.banner-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: #111111;
    color: #f5f5f5;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.banner-cookies.visible {
    transform: translateY(0);
    opacity: 1;
}

.banner-cookies-contenido {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.banner-cookies-texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    flex: 1 1 320px;
}

.banner-cookies-texto a {
    color: #39bb9c;
    text-decoration: underline;
}

.banner-cookies-botones {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-cookies {
    padding: 10px 22px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.btn-cookies-aceptar {
    background-color: #39bb9c;
    color: #ffffff;
}

.btn-cookies-aceptar:hover {
    background-color: #2fa389;
}

.btn-cookies-rechazar {
    background-color: transparent;
    color: #f5f5f5;
    border-color: rgba(245, 245, 245, 0.4);
}

.btn-cookies-rechazar:hover {
    border-color: #f5f5f5;
}

@media (max-width: 600px) {
    .banner-cookies-botones {
        width: 100%;
        justify-content: stretch;
    }
    .btn-cookies {
        flex: 1;
    }
}

/* ==========================================================================
   17. REPRODUCTOR DE MÚSICA (SECCIÓN "EN CONCIERTO")
   ========================================================================== */
.cabecera-reproductor-musica {
    margin-top: 0;
}

.reproductor-musica {
    padding-bottom: 20px;
}

.musica-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
    align-items: start;
}

/* --- COLUMNA IZQUIERDA: LISTA DE CONCIERTOS --- */
.musica-conciertos-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-concierto-musica {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px;
    background: #f1f3f5;
    border: none;
    border-left: 2px solid transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.item-concierto-musica:hover {
    background-color: #fafafa;
}

.item-concierto-musica.activo {
    background-color: #f1f3f5;
    border-left: 2px solid #39bb9c; /* Mantiene el turquesa de marca en la lista activa */
}

.portada-concierto-musica {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #eaeaea;
}

.texto-concierto-musica {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.nombre-concierto-musica {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: #1a1a1a;
    line-height: 1.3;
}

.item-concierto-musica.activo .nombre-concierto-musica {
    color: #39bb9c;
}

.fecha-concierto-musica {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}

/* --- COLUMNA DERECHA: OBRAS DEL CONCIERTO SELECCIONADO --- */
.musica-obras-panel {
    min-width: 0;
}

.musica-obras-cabecera {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 16px;
    margin-bottom: 6px;
}

.musica-obras-cabecera h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.musica-obras-cabecera span {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888;
}

.musica-obras-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item-obra-musica {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 6px;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.item-obra-musica:last-child {
    border-bottom: none;
}

.item-obra-musica:hover {
    background-color: #f1f3f5;
}

.item-obra-musica.activo {
    background-color: #f1f3f5;
}

.numero-obra-musica {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #999;
}

.icono-obra-musica {
    color: #39bb9c;
    font-size: 13px;
}

.texto-obra-musica {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.titulo-obra-musica {
    font-family: 'Open Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    color: #1a1a1a;
}

.item-obra-musica.activo .titulo-obra-musica {
    color: #39bb9c;
}

.compositor-obra-musica {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #888;
}

.duracion-obra-musica {
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #999;
}

.mensaje-no-obras {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #777;
    font-style: italic;
    padding: 20px 0;
}

/* --- BARRA DEL REPRODUCTOR (ANCHO INTEGRADO Y SIEMPRE IGUAL) --- */
.reproductor-barra {
    position: sticky;
    bottom: 20px;
    margin-top: 40px;
    background-color: #111111 !important;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 5;
    
    /* DEFINICIÓN ÚNICA DE ANCHO (Para evitar saltos visuales) */
    width: calc(100% - 40px) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    border-radius: 6px !important;
    box-shadow: none !important;
    border-top: 3px solid #39bb9c !important; /* Raya turquesa tipo cabecera */
    overflow: hidden;
    box-sizing: border-box;
}

/* CUANDO SE REPRODUCE Y ARRASTRA POR TODA LA PÁGINA:
   Conserva exactamente las mismas dimensiones, alineación y bordes.
*/
.reproductor-barra.reproduciendo {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    /* Los anchos y márgenes se heredan del estado base sin sufrir cambios */
}

/* BOTÓN DE PLAY/PAUSA: Blanco limpio */
.reproductor-btn-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff !important;
    border: none;
    color: #111111 !important; /* Icono oscuro sobre el botón blanco */
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
    padding-left: 2px; /* Alineación del triángulo */
}

.reproductor-btn-play:hover {
    background-color: #e5e5e5 !important;
    transform: scale(1.05);
}

.reproductor-btn-play.sonando {
    padding-left: 0; /* Centra el icono de pausa ❚❚ */
}

/* Información de la canción */
.reproductor-barra-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    max-width: 250px;
}

.reproductor-barra-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reproductor-barra-detalle {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BARRA DE PROGRESO DE AUDIO: Blanca y delgada */
.reproductor-progreso-contenedor {
    flex: 1;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.2s ease;
}

.reproductor-progreso-contenedor:hover {
    height: 6px;
}

.reproductor-progreso-barra {
    height: 100%;
    width: 0%;
    background-color: #ffffff !important; /* Barra de avance en blanco */
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* --- RESPONSIVE ADAPTADO Y PROTEGIDO --- */
@media (max-width: 900px) {
    .musica-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .musica-conciertos-lista {
        flex-direction: row;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
    }
    .item-concierto-musica {
        flex: 0 0 220px;
        border-left: none;
        border-bottom: 2px solid transparent;
    }
    .item-concierto-musica.activo {
        border-left: none;
        border-bottom: 2px solid #39bb9c;
    }
    
    /* 1. Barra parada en móvil (conserva el tamaño) */
    .reproductor-barra {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: calc(100% - 24px) !important; /* Se calcula igual que el reproduciendo */
        max-width: 480px !important;
        margin-top: 30px;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 6px !important;
        padding: 12px 15px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 2. Barra en reproducción en móvil (conserva el mismo tamaño exacto pero flota) */
    .reproductor-barra.reproduciendo {
        position: fixed !important;
        bottom: 15px !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
        width: calc(100% - 24px) !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 14px !important;
        gap: 12px !important;
        z-index: 9999 !important;
        box-sizing: border-box !important;
    }

    /* Reducción sutil de elementos móviles */
    .reproductor-btn-play {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
    }
    
    .reproductor-barra-info {
        max-width: 120px !important;
        min-width: 0 !important;
        flex: none !important;
        text-align: left !important;
    }

    .reproductor-barra-titulo {
        font-size: 11.5px !important;
    }

    .reproductor-barra-detalle {
        font-size: 10px !important;
    }

    .reproductor-progreso-contenedor {
        flex: 1 !important;
        height: 3px !important;
    }
}

@media (max-width: 600px) {
    .item-obra-musica {
        gap: 12px;
    }
    .duracion-obra-musica {
        display: none;
    }
}

/* ==========================================================================
   2.1 Cabecera — Responsive móvil y tablet (menú hamburguesa)
   ========================================================================== */

/* Estilos base del botón hamburguesa (oculto en escritorio por defecto) */
.menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1100; /* Siempre visible por encima del menú desplegado */
    position: relative;
}

/* Las tres líneas de la hamburguesa usando los colores corporativos */
.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: #39bb9c;
    margin: 6px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* MEDIA QUERY: Activación para pantallas por debajo de 900px */
@media (max-width: 900px) {
    /* Se mantiene fija (sticky) y por encima del menú desplegable en móvil */
    .cabecera-premium {
        position: sticky;
        top: 0;
        z-index: 1001;
    }

    /* 1. Ajustes finos a la cabecera para liberar espacio */
    .cabecera-interno {
        padding: 5px 20px;
        min-height: 70px;
        position: relative;
        z-index: 1002;
        background-color: #040404;
    }
    
    .logo-marca img {
        height: 60px; /* Reducción proporcional del logo */
    }

    /* 2. Mostramos el botón */
    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    /* Animación del botón: se convierte en una "X" al abrir */
    .menu-toggle.activo span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .menu-toggle.activo span:nth-child(2) {
        opacity: 0; /* Desvanece la raya central */
    }
    .menu-toggle.activo span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* 3. Panel de navegación: se despliega suavemente debajo de la cabecera */
    .bloque-navegacion {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #040404;
        border-top: 1px solid #39bb9c;
        flex-direction: column;
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
        z-index: 1050;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        pointer-events: none;
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
        align-items: center;
        gap: 20px;
        border-bottom: 2.5px solid #39bb9c;
        padding: 20px 0;
    }

    .bloque-navegacion.abierto {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .bloque-navegacion .menu-premium,
    .bloque-navegacion .redes-cabecera {
        padding: 0 20px;
    }

    .bloque-navegacion .menu-premium {
        padding-top: 10px;
    }

    .menu-premium {
        width: 100%;
    }

    /* 4. Lista principal — la línea va pegada a cada enlace, no al <li>,
       así todos los renglones (con o sin submenú) quedan igual de cuadrados */
    .menu-premium ul {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        width: 100%;
    }

    .menu-premium ul li {
        width: 100%;
        text-align: center;
    }

    .menu-premium ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 0;
        font-size: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-sizing: border-box;
        letter-spacing: 3px;
    }

    .menu-premium ul li a::after {
        display: none !important; /* la raya animada de escritorio no aplica aquí */
        content: none !important;
    }

    .menu-premium ul li:last-child a {
        border-bottom: none;
    }

    /* Flecha que indica que el ítem tiene sub-secciones (gira al desplegarse) */
    .menu-premium .desplegable > a::after {
        content: '' !important;
        display: block !important;
        position: static !important;
        width: 10px !important;
        height: 10px !important;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339bb9c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        border: none !important;
        margin-left: auto;
        flex-shrink: 0;
        transform: none !important;
        transition: transform 0.3s ease;
    }

    .menu-premium .desplegable.abierto > a::after {
        transform: rotate(90deg) !important;
    }

    /* 5. Sub-secciones: visibles, con sangría simple y su propia línea alineada */
    .menu-premium .sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
        border-top: none;
        background-color: transparent;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    .menu-premium .desplegable.abierto .sub-menu {
        max-height: 400px;
        padding: 10px 0;
    }

    .menu-premium .sub-menu li a {
        display: block;
        padding: 10px 0 10px 18px;
        font-size: 11px;
        color: #999999;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .menu-premium .sub-menu li:last-child a {
        border-bottom: none;
    }

    .menu-premium .sub-menu li a:hover {
        color: #39bb9c;
    }

    /* 6. Ocultamos los paneles de resumen dinámicos (solo aplican en escritorio) */
    .panel-resumen {
        display: none !important;
    }

    .menu-premium ul li.item-menu-con-resumen {
        padding-bottom: 0;
        margin-bottom: 0 !important;
    }

    /* 7. Redes sociales, al pie del menú */
    .redes-cabecera {
        display: flex;
        padding: 16px 20px;
        justify-content: center;
        width: 100%;
        padding-bottom: 10px;
    }

    .icono-svg {
        width: 18px;
        height: 18px;
    }
}
/* ==========================================================================
   5.2 Noticias — Feed de portada (index.html)
   ========================================================================== */

.seccion-noticias-editorial {
    padding: 100px 5% 60px 5%;
    background-color: #fafafa;
    width: 100%;
}

.contenedor-noticias {
    max-width: 1100px;
    margin: 0 auto;
}

/* Barra con el enlace "Todas las noticias", alineada bajo el título */
.barra-utilidades-noticias {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

/* Mismo espíritu que "Desliza para ver más": gris discreto, flecha, sin subrayado */
.enlace-todas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #888888;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
}

.enlace-todas::after {
    content: '→';
    font-size: 13px;
    transition: transform 0.3s ease;
}

.enlace-todas:hover {
    color: #39bb9c; /* Turquesa corporativo al pasar el ratón */
}

.enlace-todas:hover::after {
    transform: translateX(4px);
}

#lista-noticias,
.contenedor-noticias-feed {
    max-width: 1100px; /* Mismo ancho que .contenedor-evento y .contenedor-patrocinadores */
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Cada noticia: imagen a la izquierda, contenido a la derecha */
.item-noticia {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 30px 0;
    border-top: 1px solid #39bb9c; /* Línea corporativa arriba, como el resto de la web */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.item-noticia:last-child {
    border-bottom: 1px solid rgba(57, 187, 156, 0.2);
}

/* Imagen */
.imagen-noticia-contenedor {
    flex: 0 0 260px;
    width: 260px;
    height: 150px;
    overflow: hidden;
    border: 1px solid #eeeeee;
}

.imagen-noticia-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.item-noticia:hover .imagen-noticia-contenedor img {
    transform: scale(1.04);
}

/* Contenido de texto */
.contenido-noticia {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.fecha-noticia {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #39bb9c; /* Verde corporativo */
    margin-bottom: 10px;
}

.titulo-noticia-enlace a {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.35;
    letter-spacing: 0.1px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.item-noticia:hover .titulo-noticia-enlace a {
    color: #39bb9c;
}

.resumen-noticia {
    font-family: 'Open Sans', sans-serif;
    font-size: 14.5px;
    color: #666666;
    line-height: 1.6;
    font-weight: 300;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   5.3 Noticias — Feed de portada: responsive móvil
   ========================================================================== */

@media (max-width: 900px) {
    /* Cabecera de la sección (kicker + título grande): mismo aspecto en
       la home (.seccion-noticias-editorial) y en noticias.html (.seccion-historico-noticias) */
    .seccion-noticias-editorial,
    .seccion-historico-noticias {
        padding: 60px 5% 40px 5% !important;
    }

    .seccion-noticias-editorial .cabecera-seccion,
    .seccion-historico-noticias .cabecera-seccion {
        margin: 0 auto 25px auto !important; /* Anula el margin-bottom:50px puesto en línea en noticias.html */
    }

    .seccion-noticias-editorial .gran-titulo,
    .seccion-historico-noticias .gran-titulo {
        font-size: 26px;
        letter-spacing: 4px;
    }

    .seccion-noticias-editorial .subtitulo-seccion,
    .seccion-historico-noticias .subtitulo-seccion {
        letter-spacing: 0.3em;
    }

    /* Enlace "Todas las noticias" centrado y con margen en móvil */
    .barra-utilidades-noticias {
        justify-content: center;
        padding: 0 20px;
        margin-bottom: 25px;
    }

    /* Contenedor general: columna única con espacio entre noticias */
    #lista-noticias,
    .contenedor-noticias-feed {
        display: flex !important;
        flex-direction: column;
        gap: 30px !important;
        padding: 0 20px;
    }

    /* Cada noticia: imagen arriba, contenido debajo */
    .item-noticia {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        background: transparent !important;
        border-bottom: 1px solid #eaeaea !important;
        padding: 0 0 30px 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        align-items: stretch !important;
    }

    .item-noticia:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Imagen a todo el ancho, arriba del todo */
    .imagen-noticia-contenedor {
        display: block !important;
        width: 100%;
    }

    /* Contenido debajo, ocupando todo el ancho */
    .contenido-noticia {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Tipografía ajustada para lectura móvil */
    .fecha-noticia {
        font-size: 11px !important;
        color: #39bb9c !important;
        margin-bottom: 8px !important;
    }

    .titulo-noticia-enlace a {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    .resumen-noticia {
        font-size: 14px !important;
        margin-top: 0 !important;
    }
}