/* =========================================
   1. BASE Y LIENZO GENERAL
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background-color: #000; padding-bottom: env(safe-area-inset-bottom);}
.lienzo-interactivo { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; display: block; }
img { border: none; outline: none; -webkit-user-drag: none; }

/* Gestor de visibilidad SPA */
.pantalla { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; }
.pantalla.activa { display: block; }

.capa-fondo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; z-index: 1; }
.elemento { position: absolute; z-index: 10; cursor: pointer; }
.elemento img { width: 100%; height: 100%; display: block; object-fit: fill; }
.oculto-inicial { display: none; }
[id$="-luz"], .nav-home-luz, .nav-izq-luz, .nav-der-luz { pointer-events: none; z-index: 120; display: none; }

/* =========================================
   2. BARRA GLOBAL IDIOMAS Y ACCESIBILIDAD
   ========================================= */
#barra-global {
    position: absolute;
    top: 2%; 
    right: 2%;
    display: none; 
    flex-direction: row; 
    gap: 1vw; 
    z-index: 150;
    width: 20%; 
    justify-content: flex-end; 
}

.icono-global {
    width: 3.5vw; 
    height: 3.5vw; 
    min-width: 25px; min-height: 25px; 
    max-width: 50px; max-height: 50px;
    cursor: pointer; 
    opacity: 0.5; 
    transition: opacity 0.3s, transform 0.3s; 
    object-fit: fill;
    flex-shrink: 0;
}

.icono-global.activo { 
    opacity: 1 !important; 
    transform: scale(1.1); 
}

/* =========================================
   3. COORDENADAS: INDEXPORTADA
   ========================================= */
#btn-periodo-orquesta, #btn-periodo-orquesta-luz { left: 73.49%; top: 20.56%; width: 14.48%; height: 12.82%; }
#btn-barroco, #btn-barroco-luz { left: 73.49%; top: 34.77%; width: 14.48%; height: 12.82%; }
#btn-clasicismo, #btn-clasicismo-luz { left: 73.49%; top: 49.12%; width: 14.48%; height: 12.82%; }
#btn-romanticismo, #btn-romanticismo-luz { left: 73.49%; top: 63.43%; width: 14.48%; height: 12.82%; }

.lang-icon { opacity: 0.5; transition: opacity 0.3s; }
.lang-icon.activo, #btn-accesibilidad.activo img { opacity: 1 !important; }

#btn-lang-es { left: 1.09%; top: 89.58%; width: 4.51%; height: 8.01%; }
#btn-lang-en { left: 7.37%; top: 89.58%; width: 4.51%; height: 8.01%; }
#btn-lang-pt { left: 13.56%; top: 89.58%; width: 4.51%; height: 8.01%; }
#btn-accesibilidad { left: 19.92%; top: 89.54%; width: 4.51%; height: 8.01%; }

#btn-inicio-orquesta, #btn-inicio-orquesta-luz { left: 29.5%; top: 89.54%; width: 29.87%; height: 8.19%; }
#btn-licencia, #btn-licencia-luz { left: 64.97%; top: 89.54%; width: 29.87%; height: 8.19%; }

/* =========================================
   4. FORMATO: CUADROS DE TEXTO Y SCROLL
   ========================================= */
#indextextdef .contenedor-layout {
    position: absolute;
    left: 7%; top: 18%; width: 86%; height: 32%;
    z-index: 20; pointer-events: none; background: transparent;
}

#indexbartextorq .contenedor-layout,
#indexclatextorq .contenedor-layout,
#indexromtextorq .contenedor-layout {
    position: absolute;
    left: 5%; top: 18.1%; width: 56%; height: 64.63%;
    z-index: 20; pointer-events: none; background: transparent;
}

#indexacercade .contenedor-layout, 
#indexlicencia .contenedor-layout {
    position: absolute;
    left: 7%; top: 18%; width: 86%; height: 68%;
    z-index: 20; pointer-events: none; background: transparent;
}

.scroll-wrapper {
    width: 100%; height: 100%;
    overflow-y: auto; pointer-events: auto;
    background: transparent; padding-right: 20px; 
}

.didact-text {
    font-family: 'Didact Gothic', sans-serif;
    font-size: clamp(1.2rem, 1.8vw + 0.8vh, 3.2vh); 
    color: #333; line-height: 1.45;
    text-align: justify; hyphens: auto;
}
.didact-text p { margin-bottom: 1em; }
.didact-text strong { color: #000; font-weight: bold; }

.scroll-wrapper::-webkit-scrollbar { width: 6px; }
.scroll-wrapper::-webkit-scrollbar-track { background: transparent; }
.scroll-wrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 10px; }

/* =========================================
   5. NAVEGACIÓN INFERIOR (Páginas Secundarias)
   ========================================= */
.nav-izq, .nav-izq-luz { left: 1.3%; top: 90.69%; width: 6.25%; height: 5.83%; }
.nav-home, .nav-home-luz { left: 9.11%; top: 90.23%; width: 7.6%; height: 6.85%; }
.nav-der, .nav-der-luz { left: 18.07%; top: 90.69%; width: 6.25%; height: 5.83%; }

/* =========================================
   6. CAPA ESPECÍFICA: PANTALLA ORQUESTA BARROCA (#indexbar)
   ========================================= */
#indexbar [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }
#indexbar #inst-contrabajos { z-index: 3; }
#indexbar #inst-violines1, #indexbar #inst-violonchelos { z-index: 4; }
#indexbar #inst-violines2, #indexbar #inst-violas { z-index: 5; }
#indexbar #inst-batuta { z-index: 8; } 

#indexbar .capa-perfilado-bar {
    z-index: 10;
    pointer-events: none !important;
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

#indexbar [id^="cartel-"] { z-index: 100; display: none; pointer-events: none; }

#indexbar .capa-texto-idioma-bar {
    position: absolute;
    width: 24.74%;    
    height: 8.94%;    
    left: 0.39%;      
    top: 75.23%;      
    z-index: 101;     
    object-fit: fill;
    pointer-events: none;
}

#indexbar .ins-bar { z-index: 110; cursor: pointer; }
#indexbar .btn-bar-familia { z-index: 110; cursor: pointer; }
#indexbar .btn-bar-inactivo { z-index: 110; cursor: default; }

/* Coordenadas de Instrumentos Barrocos */
#indexbar #inst-violines1 { left: 34.3%; top: 48.06%; width: 24.53%; height: 30.93%; }
#indexbar #inst-violines1-oculto { left: 37.81%; top: 48.56%; width: 22.16%; height: 31.94%; }
#indexbar #cartel-violines1 { left: 0.62%; top: 24.54%; width: 25.00%; height: 62.50%; }

#indexbar #inst-violines2 { left: 50.36%; top: 47.13%; width: 11.72%; height: 24.72%; }
#indexbar #inst-violines2-oculto { left: 48.62%; top: 44.03%; width: 14.32%; height: 31.06%; }
#indexbar #cartel-violines2 { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }

#indexbar #inst-violas { left: 63.7%; top: 48.01%; width: 9.64%; height: 15.97%; }
#indexbar #inst-violas-oculto { left: 62.34%; top: 44.03%; width: 14.3%; height: 31.06%; }
#indexbar #cartel-violas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }

#indexbar #inst-violonchelos { left: 70.29%; top: 63.52%; width: 12.71%; height: 11.94%; }
#indexbar #inst-violonchelos-oculto { left: 65.34%; top: 48.66%; width: 22.08%; height: 31.85%; }
#indexbar #cartel-violonchelos { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }

#indexbar #inst-contrabajos { left: 66.51%; top: 29.77%; width: 9.95%; height: 21.71%; z-index: 11; }
#indexbar #inst-contrabajos-oculto { left: 62.66%; top: 28.75%; width: 20.29%; height: 26.49%; }
#indexbar #cartel-contrabajos { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }

#indexbar #inst-batuta { left: 61.04%; top: 72.5%; width: 3.52%; height: 7.92%; }
#indexbar #inst-batuta-oculto { left: 58.2%; top: 71.99%; width: 8.91%; height: 8.56%; }

#indexbar #inst-clave { left: 50.21%; top: 32.55%; width: 7.55%; height: 17.00%; z-index: 11; }
#indexbar #inst-clave-oculto { left: 42.14%; top: 28.33%; width: 20.96%; height: 26.9%; }
#indexbar #cartel-clave { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }

#indexbar #inst-solista { left: 54.66%; top: 68.75%; width: 3.13%; height: 11.87%; z-index: 15; transition: transform 0.3s ease; transform-origin: center bottom; }
#indexbar #inst-solista.zoom-activo { transform: scale(1.10); z-index: 20; }
#indexbar #cartel-solista { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }

/* Botones de Familias Coordenadas Barroco */
#indexbar #btn-cuerda, #indexbar #btn-cuerda-luz { left: 43.67%; top: 89.44%; width: 16.27%; height: 8.19%; }
#indexbar #btn-viento { left: 62.65%; top: 89.44%; width: 16.27%; height: 8.19%; }
#indexbar #btn-percusion { left: 81.64%; top: 89.44%; width: 16.27%; height: 8.19%; }


/* =========================================
   7. CAPA ESPECÍFICA: PANTALLA ORQUESTA CLÁSICA (#indexcla)
   ========================================= */

/* Z-INDEX ORQUESTAL ESPECÍFICO DE CLÁSICA */
#indexcla #inst-contrabajos { z-index: 3; }
#indexcla #inst-violines1, #indexcla #inst-violonchelos { z-index: 4; }
#indexcla #inst-trompas { z-index: 5; }
#indexcla #inst-violines2, #indexcla #inst-violas { z-index: 6; }
#indexcla #inst-flautas, #indexcla #inst-oboes, #indexcla #inst-clarinetes, #indexcla #inst-fagotes { z-index: 7; }
#indexcla #inst-batuta { z-index: 8; }

#indexcla #capa-perfilado-cla {
    z-index: 10;
    pointer-events: none !important;
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

#indexcla .capa-texto-idioma {
    position: absolute;
    width: 24.74%;    
    height: 8.94%;    
    left: 0.39%;      
    top: 75.23%;      
    z-index: 101;     
    object-fit: fill;
    pointer-events: none;
}

#indexcla .btn-interactivo { z-index: 110; cursor: pointer; }
#indexcla .btn-inactivo { z-index: 110; cursor: default; }

/* POSICIONAMIENTOS DE INSTRUMENTOS CLÁSICA */
#indexcla #inst-violines1 { left: 34.74%; top: 54.47%; width: 19.06%; height: 23.24%; }
#indexcla #inst-violines1-oculto { left: 33.41%; top: 48.56%; width: 22.16%; height: 31.94%; }
#indexcla #cartel-violines1 { left: 0.62%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-violines2 { left: 46.95%; top: 46.25%; width: 10.81%; height: 26.99%; }
#indexcla #inst-violines2-oculto { left: 44.28%; top: 44.07%; width: 14.32%; height: 31.06%; }
#indexcla #cartel-violines2 { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-violas { left: 58.7%; top: 46.99%; width: 11.38%; height: 25.56%; }
#indexcla #inst-violas-oculto { left: 57.92%; top: 44.03%; width: 14.3%; height: 31.06%; }
#indexcla #cartel-violas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-violonchelos { left: 64.14%; top: 57.04%; width: 15.6%; height: 20.14%; }
#indexcla #inst-violonchelos-oculto { left: 60.89%; top: 48.7%; width: 22.08%; height: 31.85%; }
#indexcla #cartel-violonchelos { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-contrabajos { left: 80.21%; top: 43.66%; width: 8.18%; height: 34.44%; }
#indexcla #inst-contrabajos-oculto { left: 75.23%; top: 37.45%; width: 16.59%; height: 43.06%; }
#indexcla #cartel-contrabajos { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-flautas { left: 43.56%; top: 41.98%; width: 5.63%; height: 10.19%; }
#indexcla #inst-flautas-oculto { left: 41.3%; top: 39.26%; width: 8.99%; height: 15.66%; }
#indexcla #cartel-flautas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-oboes { left: 50.49%; top: 37.08%; width: 7.84%; height: 8.75%; }
#indexcla #inst-oboes-oculto { left: 49.73%; top: 36.73%; width: 10.19%; height: 11.76%; }
#indexcla #cartel-oboes { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-clarinetes { left: 59.29%; top: 37.35%; width: 7.5%; height: 9.12%; }
#indexcla #inst-clarinetes-oculto { left: 58.64%; top: 36.03%; width: 8.93%; height: 12.74%; }
#indexcla #cartel-clarinetes { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-fagotes { left: 66.4%; top: 40.56%; width: 6.98%; height: 13.29%; }
#indexcla #inst-fagotes-oculto { left: 65.69%; top: 38.07%; width: 9.4%; height: 16.95%; }
#indexcla #cartel-fagotes { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-trompas { left: 42.55%; top: 32.36%; width: 7.94%; height: 11.3%; }
#indexcla #inst-trompas-oculto { left: 38.06%; top: 29.58%; width: 16.46%; height: 18.9%; }
#indexcla #cartel-trompas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

#indexcla #inst-batuta { left: 56.74%; top: 72.45%; width: 2.94%; height: 7.27%; }
#indexcla #inst-batuta-oculto { left: 53.76%; top: 71.99%; width: 8.91%; height: 8.56%; }
#indexcla [id^="inst-"][id$="-oculto"] { z-index: 2; display: none; pointer-events: none; }

/* BOTONES INFERIORES CLÁSICA */
#indexcla #btn-cuerda, #indexcla #btn-cuerda-luz { left: 43.67%; top: 89.44%; width: 16.27%; height: 8.19%; }
#indexcla #btn-viento, #indexcla #btn-viento-luz { left: 62.65%; top: 89.44%; width: 16.27%; height: 8.19%; }
#indexcla #btn-percusion { left: 81.64%; top: 89.44%; width: 16.27%; height: 8.19%; }

/* ====================================================== */
/* ESTILOS ESPECÍFICOS PARA ORQUESTA ROMÁNTICA (#indexrom) */
/* ====================================================== */

/* Aseguramos que la pantalla Romántica tenga el tamaño correcto */
#indexrom {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
   
}

/* Capa de líneas sobre el fondo */
#indexrom #capa-perfilado {
    z-index: 10;
    pointer-events: none !important;
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

/* Posicionamiento de instrumentos y carteles (Prefijado con #indexrom) */
#indexrom #inst-violines1 { left: 38.41%; top: 51.30%; width: 20.05%; height: 27.82%; z-index: 4; }
#indexrom #inst-violines1-oculto { left: 37.81%; top: 48.56%; width: 22.16%; height: 31.94%; z-index: 2; display: none; }
#indexrom #cartel-violines1 { left: 0.62%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-violines2 { left: 49.79%; top: 45.38%; width: 12.55%; height: 28.57%; z-index: 6; }
#indexrom #inst-violines2-oculto { left: 48.62%; top: 44.03%; width: 14.32%; height: 31.06%; z-index: 2; display: none; }
#indexrom #cartel-violines2 { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-violas { left: 62.97%; top: 46.11%; width: 12.29%; height: 27.27%; z-index: 6; }
#indexrom #inst-violas-oculto { left: 62.34%; top: 44.03%; width: 14.3%; height: 31.06%; z-index: 2; display: none; }
#indexrom #cartel-violas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-violonchelos { left: 66.95%; top: 51.94%; width: 19.38%; height: 27.36%; z-index: 4; }
#indexrom #inst-violonchelos-oculto { left: 65.34%; top: 48.66%; width: 22.08%; height: 31.85%; z-index: 2; display: none; }
#indexrom #cartel-violonchelos { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-contrabajos { left: 80.94%; top: 41.53%; width: 14.35%; height: 37.45%; z-index: 3; }
#indexrom #inst-contrabajos-oculto { left: 79.64%; top: 37.45%; width: 16.59%; height: 43.06%; z-index: 2; display: none; }
#indexrom #cartel-contrabajos { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-flautas { left: 47.97%; top: 42.08%; width: 5.63%; height: 10.19%; z-index: 7; }
#indexrom #inst-flautas-oculto { left: 45.73%; top: 39.28%; width: 8.99%; height: 15.66%; z-index: 2; display: none; }
#indexrom #cartel-flautas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-oboes { left: 54.9%; top: 37.18%; width: 7.84%; height: 8.75%; z-index: 7; }
#indexrom #inst-oboes-oculto { left: 54.14%; top: 36.89%; width: 10.19%; height: 10.76%; z-index: 2; display: none; }
#indexrom #cartel-oboes { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-clarinetes { left: 63.7%; top: 37.45%; width: 7.5%; height: 9.12%; z-index: 7; }
#indexrom #inst-clarinetes-oculto { left: 63.05%; top: 36.95%; width: 8.93%; height: 11.74%; z-index: 2; display: none; }
#indexrom #cartel-clarinetes { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-fagotes { left: 70.81%; top: 40.56%; width: 6.98%; height: 13.29%; z-index: 7; }
#indexrom #inst-fagotes-oculto { left: 70.30%; top: 39.10%; width: 9.4%; height: 15.95%; z-index: 2; display: none; }
#indexrom #cartel-fagotes { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-trompas { left: 44.6%; top: 30.22%; width: 13.65%; height: 17.22%; z-index: 5; }
#indexrom #inst-trompas-oculto { left: 42.5%; top: 29.55%; width: 16.46%; height: 18.9%; z-index: 2; display: none; }
#indexrom #cartel-trompas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-trompetas { left: 59.61%; top: 29.12%; width: 6.61%; height: 6.85%; z-index: 5; }
#indexrom #inst-trompetas-oculto { left: 57.97%; top: 28.90%; width: 8.91%; height: 7.76%; z-index: 2; display: none; }
#indexrom #cartel-trompetas { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-trombones { left: 66.12%; top: 30.14%; width: 10.13%; height: 10.93%; z-index: 5; }
#indexrom #inst-trombones-oculto { left: 65.91%; top: 29.2%; width: 11.7%; height: 13.7%; z-index: 2; display: none; }
#indexrom #cartel-trombones { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-timbales { left: 59.24%; top: 21.2%; width: 4.82%; height: 6.71%; z-index: 8; }
#indexrom #inst-timbales-oculto { left: 57.85%; top: 20.95%; width: 7.4%; height: 7.5%; z-index: 2; display: none; }
#indexrom #cartel-timbales { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-bombo { left: 70.83%; top: 23.9%; width: 2.9%; height: 6.39%; z-index: 8; }
#indexrom #inst-bombo-oculto { left: 69.61%; top: 22.63%; width: 5.55%; height: 9.28%; z-index: 2; display: none; }
#indexrom #cartel-bombo { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-platillos { left: 80.21%; top: 33.8%; width: 3.96%; height: 6.11%; z-index: 8; }
#indexrom #inst-platillos-oculto { left: 78.93%; top: 31.25%; width: 6.93%; height: 11.59%; z-index: 2; display: none; }
#indexrom #cartel-platillos { left: 0.63%; top: 24.54%; width: 25.00%; height: 62.50%; z-index: 100; }

#indexrom #inst-batuta { left: 58.96%; top: 75.46%; width: 6.48%; height: 3.85%; z-index: 8; }
#indexrom #inst-batuta-oculto { left: 58.2%; top: 71.99%; width: 8.91%; height: 8.56%; z-index: 2; display: none; }

/* Botones y Navegación dentro de #indexrom */
#indexrom .btn-nav, #indexrom .btn-seccion { z-index: 110; cursor: pointer; }

#indexrom #nav-izq, #indexrom #nav-izq-luz { left: 1.3%; top: 90.69%; width: 6.25%; height: 5.83%; }
#indexrom #nav-home, #indexrom #home-luz { left: 9.11%; top: 90.23%; width: 7.6%; height: 6.85%; }
#indexrom #nav-der, #indexrom #nav-der-luz { left: 18.07%; top: 90.69%; width: 6.25%; height: 5.83%; }

#indexrom #btn-cuerda, #indexrom #btn-cuerda-luz { left: 43.67%; top: 89.44%; width: 16.27%; height: 8.19%; }
#indexrom #btn-viento, #indexrom #btn-viento-luz { left: 62.65%; top: 89.44%; width: 16.27%; height: 8.19%; }
#indexrom #btn-percusion, #indexrom #btn-percusion-luz { left: 81.64%; top: 89.44%; width: 16.27%; height: 8.19%; }

#indexrom .capa-texto-idioma {
    position: absolute;
    width: 24.74%;    
    height: 8.94%;    
    left: 0.39%;      
    top: 75.23%;      
    z-index: 101;     
    object-fit: fill;
    pointer-events: none;
}

/* =========================================
   BLOQUE INFERIOR: LICENCIA CC
   (Elemento único, centrado en eje virtual)
   ========================================= */

#contenedor-licencia-cc {
    position: absolute;
    bottom: 14%; /* Altura armónica unificada respecto al fondo */
    top: auto;
    left: 90%;
    transform: translateX(-50%); /* Centrado perfecto tras eliminar el logo */
    
    width: clamp(120px, 14vw, 180px); /* Ajustado para el badge CC */
    height: auto;
    z-index: 105;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el enlace interno (Interactividad) */
#contenedor-licencia-cc a {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease;
}

/* Efectos de estado (Hover / Focus) */
#contenedor-licencia-cc a:hover,
#contenedor-licencia-cc a:focus-visible {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Estilo estricto de accesibilidad para la navegación por teclado (WCAG) */
#contenedor-licencia-cc a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Comportamiento de la imagen (Core Web Vitals) */
#contenedor-licencia-cc img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; 
}


.img-flotante-texto {
    width: 5%;
    min-width: 30px; /* Límite de seguridad */
    
    /* Alineación vertical respecto a la línea base del texto */
    vertical-align: middle; /* También puedes probar 'text-bottom' o 'baseline' */
    
    /* Separación lateral */
    margin: 0 0.5rem; 
    
    display: inline-block;
}


/* =========================================
   8. RESPONSIVE MÓVIL
   ========================================= */
/* Aviso visual solo en móviles en vertical */
@media screen and (max-width: 900px) and (orientation: portrait) {
    .lienzo-interactivo::before {
        content: "📱 Por favor, gira tu dispositivo horizontalmente para interactuar con La orquesta.";
        position: absolute;
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        background-color: rgba(0, 0, 0, 0.95);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
        font-family: 'Didact Gothic', sans-serif;
        font-size: 1.2rem;
        z-index: 9999;
    }
}