/** ESTILOS COMUNES A LOS 3 IDIOMAS **/
        #map
        {
        width: 100% ;
        height: 90% ;
        margin: 0 auto;
        /* border: 1px solid green; 
        padding: 10px; background-color: lightgrey; */
        }
        
        #coords { width: 500px; }

        i, img { vertical-align: middle; }

        .cetIn { text-align:center; width:100%; color:#0B0B61; }

        #containSpec { margin:10px 10px 10px 10px; }

        .sdec { text-decoration: none; }

        .tex1 { font-family:  "Lucida Console", Consola Mono, monospace; font-size:10pt; }
        .tex2 { font-family: monospace, monospace; font-size:12pt; }

        .small-BT { padding:5px; color:#fff; font-size: 12px; background:#6E6E6E; height:20pt; }
        .small-DE { padding:5px; color:#585858; font-size: 12px; background:#FFFF00; height:20pt; }

        p { color:#585858; }

        .texto { background-color: rgba(0,0,0,0.3); padding-left:5pt; position:absolute; top:80%; left:1%; font-size:18px; color:#fff; }
        .textS { background-color: rgba(0,0,0,0.3); padding-left:5pt; position:absolute; top:2%; left:1%; font-size:20px; color:#fff; }

        #zonasDeSoltar, #arrastrables { display:flex; }  
                #arrastrables div { margin:10px 17px 0 10px; }
                .arrastrable {
                    flex:0 0 120px;
                    height: 85px;
                    text-align: center;
                    background: white;
                    border:1px solid;
                }

        .zona-de-soltar {
                    flex:0 0 60px;
                    height: 50px; 
                    background: #D8D8D8; 
                    padding: 5px;
                    margin:10px 10px 0 5px ;
                    border:1px solid;
        }

        .video-wrapper {
            width: 100%;
            /* ¡Usa este valor exacto para tu video de 480x848! */
            padding-bottom: 176.67%; /* (848 / 480) * 100% */
            height: 0;
            background-color: black;
            margin-top: 20px; /* Mantén solo los márgenes superior/inferior si los necesitas */
            margin-bottom: 20px; /* Elimina 'auto' si width es 100% */
            overflow: hidden;
            
            /* ¡Añade esta línea crucial para que el video se posicione relativamente a él! */
            position: relative; 
        }

        .progress-container {
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            display: none;
        }
        .progress-bar {
            width: 0%;
            height: 20px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 20px;
            color: white;
            transition: width 0.3s;
        }
        .progress-bar-container {
            width: 100%;
            background-color: #ddd;
        }

        .contenedor-proporcional {
            width: 100%; /* Ocupa el 100% del col-md-6 */
        }

        .proporcion-4-3 {
            width: 100%;
            aspect-ratio: 4 / 3; /* Relación 800:600 */
        }

        /* Fallback para navegadores antiguos */
        @supports not (aspect-ratio: 4 / 3) {
            .proporcion-4-3 {
                padding-top: 75%; /* 600/800 = 0.75 */
                height: 0;
                position: relative;
            }
            .proporcion-4-3 > * {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }