body {    
        background-color: #1a1a1a;
        color:#fff;
        margin: 0;
       
    } 
    /*fondo visita virtual*/
    .fondovirtual {
        background-image: url(img/index/pentagrama.webp);

    }
    /* TARJETAS CON TEXTO QUE SUBE */
    .card-hover{
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .card-hover img{
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: transform 0.4s ;
    }

    /* CAPA DEL TEXTO */
    .card-overlay{
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.4));
        color: white;
        padding: 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all 0.5s ease;
    }

    /* EFECTO HOVER */
    .card-hover:hover img{
        transform: scale(1.1);
    }

    .card-hover:hover .card-overlay{

        bottom: 0;
    }
    /* GALERÍA */

    .titulo-galeria {
        text-align: center;
        color: #89700d;
        /* Dorado teatro */
        text-transform: uppercase;
    }

    /* Contenedor Grid - Responsive */
   
.galeria{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

   
.teatro-item{
    position:relative;
    overflow:hidden;
    border:3px solid #89700d;
    border-radius:8px;
    aspect-ratio: 4/3;
}

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

@media (max-width:992px){
    .galeria{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:576px){
    .galeria{
        grid-template-columns:1fr;
    }
}

    /* Efecto al pasar el mouse (Hover) */
    .teatro-item:hover {
        transform: scale(1.05);
        /* Ligeramente más grande */
    }

    .teatro-item:hover img {
        transform: scale(1.1);
        /* Efecto zoom interior */
    }

    /* Capa de texto (título de la parte) */
    .capa {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .teatro-item:hover .capa {
        opacity: 1;
        /* Mostrar texto al pasar mouse */
    }

    .capa h3 {
        color: #fff;
        border: 2px solid #89700d;
        padding: 10px 20px;
        text-transform: uppercase;
    }
    .w-90{
    width:90%;
    }
    

.modal-contenido360 {
        background-color: white;
        margin: 15% auto;
        padding: 20px;
        width: 70%;
        border-radius: 5px;
        position: relative;
        text-align: center;
    }



/* Botón de cerrar (X) */


 /*video 360 en index*/

.video-container{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: black;
}
.video-container-360{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: black;
    max-width: 100vw;
    height: 80vh;
}

/* Poster */
.video-poster{
    object-fit: cover;
}

/* Iframe */
.video-frame{
    width: 100%;   
    display: none;            
    height: 100%;

}

/* Botón play */
.custom-play-button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.custom-play-button:hover{
    transform: translate(-50%, -50%) scale(1.1);
}

/* Triángulo play */
.play-icon{
    width: 0;
    height: 0;
    border-left: 25px solid white;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin-left: 30px;
}

/*************************************************************/

.parallax-techo{
    background-image: url(../img/index/parallax_techo_premium.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 800px;
    background-attachment: fixed;
}


/*********************************************************/



.mosaico-cultura{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 300px 300px;
    gap:20px;
}


.mosaico-item{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    cursor:pointer;
}

.mosaico-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.mosaico-item:hover img{
    transform:scale(1.08);
}

.grande{
    grid-row:span 2;
}
.ancho{
  
    background-size:cover;
    background-position:center;
   
}
.mosaico-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:2rem;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.80),
        rgba(0,0,0,.10)
    );

    color:white;

    opacity:0;
    transition:.35s ease;
}

.mosaico-item:hover .mosaico-overlay{
    opacity:1;
}

.mosaico-overlay h3{
    font-size:2rem;
    margin-bottom:.5rem;
}

.mosaico-overlay p{
    max-width:320px;
    margin:0;
}

@media (max-width: 991px){

    .mosaico-cultura{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .grande,
    .ancho{
        grid-column:auto;
        grid-row:auto;
    }

    .mosaico-item{
        height:280px;
    }
}

.mosaico-cultura{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 300px 300px;
    gap:20px;
}

.mosaico-item{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    cursor:pointer;
}

.mosaico-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.mosaico-item:hover img{
    transform:scale(1.1);
}

.grande{
    grid-row:span 2;
}

.ancho{
    grid-column:span 2;
    height:350px;
}

.mosaico-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:2rem;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.80),
        rgba(0,0,0,.10)
    );

    color:white;

    opacity:0;
    transition:.35s ease;
}

.mosaico-item:hover .mosaico-overlay{
    opacity:1;
}

.mosaico-overlay h3{
    font-size:2rem;
    margin-bottom:.5rem;
}

.mosaico-overlay p{
    max-width:320px;
    margin:0;
}

@media (max-width: 991px){

    .mosaico-cultura{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .grande,
    .ancho{
        grid-column:auto;
        grid-row:auto;
    }

    .mosaico-item{
        height:280px;
    }
}
/*************************************************************************************/
 html,
body {
    overflow-x: hidden;
}
video {

    filter:
        brightness(.85)
        contrast(1.05)
        saturate(.9);

}


        /*cifras******************************/
        .estadisticas-filarmonica {
            background: #111;
            color: white;
            padding: 60px 0;
        }

        .estadisticas-filarmonica h2 {
            font-size: 3rem;
            color: #c9a96a;
            margin-bottom: 10px;
        }

        .estadisticas-filarmonica p {
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        
        /*************************************************************
    GALERÍA "DESCUBRE SUS ESPACIOS"

    - Escritorio: 3 cards en línea
    - Tablet: 2 cards arriba + 1 destacada debajo
    - Móvil: 1 card por fila***********************************************************/

        /* CONTENEDOR GENERAL */
        .galeria-teatro {
            display: grid;

            /* Tres columnas en escritorio */
            grid-template-columns: repeat(3, 1fr);

            gap: 1.5rem;
            padding: 2rem;
        }

        /* TARJETA */
        .galeria-teatro .card {

            position: relative;

            overflow: hidden;

            border-radius: 20px;

            cursor: pointer;

            border: 1px solid rgba(201, 169, 106, .15);

            box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

            transition:
                transform .4s ease,
                box-shadow .4s ease,
                border-color .4s ease;
        }

        /* EFECTO HOVER */
        .galeria-teatro .card:hover {

            transform: translateY(-10px);

            border-color: rgba(201, 169, 106, .35);

            box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
        }

        /* CONTENEDOR DE LA FOTO */
        .galeria-teatro .card figure {

            position: relative;

            margin: 0;

            height: 450px;
        }

        /* IMAGEN */
        .galeria-teatro .card img {

            width: 100%;
            height: 100%;

            object-fit: cover;

            filter:
                saturate(1.15) contrast(1.08) brightness(1.04);

            transition:
                transform .6s ease,
                filter .6s ease;
        }

        /* ZOOM SUAVE */
        .galeria-teatro .card:hover img {

            transform: scale(1.08);

            filter:
                saturate(1.25) contrast(1.12) brightness(1.08);
        }

        /* TEXTO SOBRE LA IMAGEN */
        .galeria-teatro figcaption {

            position: absolute;
            inset: 0;

            display: flex;
            flex-direction: column;
            justify-content: flex-end;

            padding: 2rem;

            color: white;

            background:
                linear-gradient(to top,
                    rgba(0, 0, 0, .70),
                    rgba(0, 0, 0, .15),
                    transparent);
        }

        .galeria-teatro h3 {

            margin: 0;

            font-size: 1.8rem;

            font-weight: 700;
        }

        .galeria-teatro p {

            margin-top: .5rem;

            opacity: .9;
        }

        /* REFLEJO DORADO SUAVE */
        .galeria-teatro .card::after {

            content: "";

            position: absolute;

            inset: 0;

            background:
                linear-gradient(135deg,
                    rgba(201, 169, 106, .12),
                    transparent 40%);

            opacity: 0;

            transition: .4s;

            pointer-events: none;
        }

        .galeria-teatro .card:hover::after {

            opacity: 1;
        }

        /******************************TABLET (entre 768px y 1200px)************************************************************/

        @media (max-width:1200px) {

            .galeria-teatro {

                grid-template-columns: repeat(2, 1fr);

                max-width: 900px;

                margin: 0 auto;
            }

            /* La tercera card ocupa una fila propia */
            .galeria-teatro article:last-child {

                grid-column: 1 / -1;

                max-width: 450px;

                margin: 0 auto;
            }

            .galeria-teatro .card figure {

                height: 320px;
            }
        }

        /************* MÓVIl****************************************************/

        @media (max-width:768px) {

            .galeria-teatro {

                grid-template-columns: 1fr;

                max-width: 500px;

                margin: 0 auto;
            }

            /* Quitamos la regla especial de la tercera card */
            .galeria-teatro article:last-child {

                grid-column: auto;

                max-width: none;
            }

            .galeria-teatro .card figure {

                height: 300px;
            }

            .galeria-teatro h3 {

                font-size: 1.6rem;
            }
        }

        .card-img-top {

            object-fit: cover;

        }


        .imagen-lateral {
            position: relative;
            overflow: hidden;
        }

        .imagen-lateral::after {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(to bottom,
                    rgba(0, 0, 0, .15),
                    rgba(0, 0, 0, 0) 30%,
                    rgba(0, 0, 0, .25));

            pointer-events: none;
        }

        /* TARJETAS LATERALES IGUALADAS */


         /*  HISTORIAS QUE PERMANECEN · VÍCTOR LUQUE */

        .historia-hero {
            position: relative;
            min-height: 500px;
            overflow: hidden;
        }

        .historia-hero img {
            position: absolute;
            inset: 0;

            width: 100%;
            height: 100%;

            object-fit: cover;
        }

        /* Texto principal */

        .historia-overlay {
            position: absolute;

            left: 5rem;
            top: 50%;

            transform: translateY(-50%);

            max-width: 380px;

            color: white;
        }

        .historia-kicker {
            font-size: .85rem;

            letter-spacing: .25rem;

            font-weight: 600;

            opacity: .85;

            margin-bottom: 1rem;
        }

        .historia-overlay p {
            line-height: 1.7;
        }

        /* Crédito fotográfico */

        .credito-victor {

            position: absolute;

            right: 1.5rem;
            bottom: 1.5rem;

            background: rgba(0, 0, 0, .45);

            backdrop-filter: blur(3px);

            padding: .5rem .8rem;

            border-radius: .35rem;

            font-size: .7rem;

            line-height: 1.35;

            color: #cfcfcf;

            max-width: 260px;

            text-decoration: none;
        }
  /* Enlace sin decoración */

        .enlaceluque {
            text-decoration: none;
            color: inherit;
        }