/* General Reset & Body Styles (Existing styles) */
html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: white;
    background-color: #ffffff00;

}

#mobileOverlay {
    display: none;
    position: fixed;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(205, 205, 205);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#mobileOverlay .overlay-image {
    width: 22vmin;
    border-radius: 10px;
}

#mobileOverlay p {
    color: #2D2926;
    ;
    font-family: 'Segoe UI', Roboto;
    font-weight: 350;
}

* {
    box-sizing: border-box;
}

/* Aseguramos que el contenedor de la imagen desaparece por completo */
#logoWrapper.oculto {
    opacity: 0;
    visibility: hidden;
}



.flechas {
    display: none;
}

h3 {
    font-size: 12px;
}

.video-buttons {
    display: flex;
    padding-left: 5%;
    padding-right: 5%;
}

.video-video {
    height: 85%;
}

.play-img {
    width: 35px;
}

.pause-img {
    width: 35px;
}

/* Estilos para el nuevo modal sin zoom */
#logoModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

#logoModal .imagen-contenedor {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logoModal .imagen-sin-zoom {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    transform-origin: center center;
}

#logoModal .cerrar-modal {
    position: absolute;
    top: 0px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
}

#logoModal .cerrar-modal:hover,
#logoModal .cerrar-modal:focus {
    color: #bbb;
    text-decoration: none;
}

/* Estilos del modal de imagen y zoom */
#imagenModal {
    /* Oculta el modal por defecto */
    display: none;
    /* Posiciona el modal de forma fija para que cubra toda la pantalla */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    /* Fondo semitransparente oscuro */
    /* Usa flexbox para centrar el contenido */
    justify-content: center;
    align-items: center;
}

/* Clase para mostrar el modal */
#imagenModal.imagen-visible {
    display: flex;
}

.imagen-contenedor {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.imagen-contenedor img {
    max-width: 200%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    /* Transición suave para el efecto de zoom */
    transition: transform 0.2s ease-in-out;
    /* Punto de origen del zoom, en el centro de la imagen */
    transform-origin: center center;

    /* --- CÓDIGO AÑADIDO PARA ARRRASTRAR --- */
    cursor: grab;
    /* Cambia el cursor para indicar que se puede arrastrar */
    user-select: none;
    /* Evita la selección de texto al arrastrar */
}

.cerrar-imagen {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #000000;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
    /* Asegura que el botón de cerrar esté por encima de todo */
}

.cerrar-imagen:hover,
.cerrar-imagen:focus {
    color: #bbb;
    text-decoration: none;
}

.zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1001;
}

.zoom-btn {
    background-color: #ffffff00;
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}


.piece-detail-overlay {
    height: 100%;
}

.top {
    position: fixed;
    /* Lo fijamos en la parte superior */
    width: 100%;
    height: 3%;
    /* Altura de la barra superior para móvil */
    background-color: rgba(255, 255, 255, 0.5);
    /* Color de fondo de la barra superior */
    display: flex;
    /* Usamos flexbox */
    align-items: center;
    /* Centrar verticalmente los elementos */
    z-index: 10;
    /* Asegura que esté por encima del resto del contenido */
}

.language-selector {
    position: relative;
    /* Para posicionar el desplegable respecto a este contenedor */
    display: inline-block;
    /* Ocupa solo el espacio necesario */
    margin-left: auto;
    /* ESTO ES CLAVE: Empuja el selector de idioma a la derecha */
    z-index: 11;
    /* Asegura que esté por encima de otros elementos */
    height: 100%;
    padding-right: 2%;
}

.current-lang-button {
    background-color: rgba(0, 0, 0, 0);
    /* Fondo del botón actual */
    color: rgb(0, 0, 0);
    border-radius: 8px;
    border: none;
    /* Bordes redondeados */
    cursor: pointer;
    font-size: 0.9em;
    height: 100%;
    /* Ancho mínimo para que se vea bien "ES" o "EN" */
    text-align: center;
    width: 110%;

    display: flex;
    /* Usamos flexbox para alinear el texto y la flecha */
    align-items: center;
    /* Centramos verticalmente */
}

/* Estilo para el texto dentro del botón */
.lang-text {
    margin-right: 8px;
    /* Espacio entre el texto y la flecha */
}

/* Estilo para el icono de la flecha */
.dropdown-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgb(0, 0, 0);
    /* La flecha apunta hacia abajo por defecto */
    transition: transform 0.3s ease;
}

/* Estilo para la flecha cuando el menú está abierto */
.dropdown-arrow.open {
    transform: rotate(180deg);
}

.lang-dropdown {
    display: none;
    /* Oculto por defecto */
    position: absolute;
    background-color: #333;
    /* Fondo del menú desplegable */
    z-index: 1;
    border-radius: 8px;
    right: 20%;
    /* Alinea el desplegable a la derecha del botón */
    top: 100%;
    /* Coloca el desplegable justo debajo del botón */
    margin-top: 5px;
    /* Pequeño espacio entre botón y desplegable */
    overflow: hidden;
    /* Asegura que los bordes redondeados se vean bien */
}

.lang-dropdown a {
    color: white;
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.lang-dropdown a:hover {
    background-color: #575757;
    /* Color al pasar el ratón */
}

.lang-dropdown.show {
    display: block;
    /* Clase para mostrar el desplegable con JavaScript */
}


/* -------------------- MOBILE FIRST STYLES (Default for screens <= 768px) -------------------- */

/* Footer-bottom (which acts as a top header based on your HTML) */
.footer-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #ffffff00;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    min-height: 60px;
}

.logos-left {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-start;
}

.logos-right {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    flex-direction: row;
}

.top-icons {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 10px;
}

.bandera {
    width: 30px;
    height: auto;
}

.logos-left img {
    height: 25px;
    margin-right: 5px;
}

.marq-logo {
    height: 35px;
    max-width: 90px;
    object-fit: contain;
}

/* Main Content Area */
.main-content {
    display: flex;
    flex-direction: column;
    /*height: calc(100% - 60px - 70px);*/
    height: 85%;
    /* Assuming footer-bottom is 60px and footer is 70px */
    position: relative;
    z-index: 1;
}

/* Video Section */
.video-container {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    padding-top: 1%;
}

.play-button {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
    border: none;
    transition: background-color 0.3s ease;
}

.d-button {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
    border: none;
    transition: background-color 0.3s ease;
}

.play-button::before {
    content: url(assets/pause_50dp_000000_FILL0_wght400_GRAD0_opsz48.png);
    font-size: 2.5em;
    color: rgb(0, 0, 0);
    margin-left: 5px;
    transition: content 0.3s ease;
    height: 90%;

}

.play-button.paused::before {
    content: url(assets/play_arrow_50dp_000000_FILL0_wght400_GRAD0_opsz48.png);
}

.play-button.playing::before {
    content: url(assets/pause_50dp_000000_FILL0_wght400_GRAD0_opsz48.png);
    margin-left: 0;
    font-size: 2em;
    height: 90%;
}

.play-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Franja de texto sobre el video */
.video-text-overlay {
    left: 0;
    width: 100%;
    padding: 0px 15px;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 0.85em;
    z-index: 2;
    padding-left: 13%;
    display: flex;
    flex-direction: column;
    height: 6%;
}

/* Piece Detail Overlay */
.piece-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 200;
    color: white;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
}

.piece-detail-overlay.active {
    display: flex;
}

.close-overlay-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    border: 2px solid white;
    transition: background-color 0.3s ease;
}

.close-overlay-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.detail-header {
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    padding-right: 10%;
}

.detail-header .detail-title {
    font-size: 1.3em;
    margin: 0;
    font-weight: bold;
    color: rgb(0, 0, 0);
}

.detail-header .detail-subtitle {
    font-size: 0.85em;
    margin: 5px 0 0;
    color: #ACA39A;
}

.large-piece-image {
    max-width: 95%;
    max-height: 60%;
    object-fit: contain;
    display: block;
    margin: auto;
}

.detail-actions {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    z-index: 9999;
}

.detail-icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    border: none;
    background-color: #ffffff00;
    z-index: 9999;
}

.detail-icon:hover {
    transform: scale(1.05);
}

.detail-icon img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* Pieces Section */
.pieces-section {
    width: 100%;
    /*height: calc(100% - 60vh);*/
    height: 30%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.pieces-header {
    padding: 10px 15px;
    text-align: left;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    flex-shrink: 0;
}

.pieces-header a {
    color: inherit;
    text-decoration: none;
}

.selector-panel {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 0px 15px;
    padding-top: 5%;
    gap: 10px;
    background-color: #ffffff;
    flex-grow: 1;
    justify-content: space-around;
}

/* Hide scrollbar for Webkit browsers */
.selector-panel::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.selector-panel {
    scrollbar-width: none;
}


.selector-item {
    flex-shrink: 0;
    width: 85px;
    height: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease-out, border 0.3s ease-out;
    text-align: center;
    background-color: transparent;
    border-radius: 8px;
    padding-top: 6%;
}

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

.selector-item img {
    width: 100%;
    max-height: 70px;
    object-fit: contain;
    border-radius: 5px;
    filter: brightness(0.8) contrast(1.2);
}

.selector-label {
    font-size: 0.7em;
    color: white;
    margin-top: 5px;
}

/* Footer (at the bottom of the page) */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background-color: #000;
    min-height: 70px;
}

/* Modals (AR and Info) */
.modal-ar,
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.9);
    justify-content: center;
    align-items: center;
}

.modal-content-ar,
.modal-content {
    background-color: #fefefe;
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    border-radius: 10px;
}

.modal-content-ar iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Close button for AR modal - use a common class if possible */
.close-button {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1001;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

.close-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Specific styles for the Info Modal Content */
.modal-content.info-content {
    background-color: transparent;
    color: #ffffff;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    border-radius: 0;
    overflow: hidden;
    border-radius: 10px;
    width: fit-content;
    height: fit-content;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    max-height: 90%;
}

.info-modal-header {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    min-height: auto;
    flex-shrink: 0;
}

.info-modal-body {
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    color: #333;
    flex-grow: 1;
}

.info-modal-header .close-button {
    color: #333333;
    background-color: transparent;
    position: static;
    align-self: flex-end;
}

.info-modal-header .close-button img {
    width: 25px;
    height: 25px;
}

.info-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #000000;
    text-align: left;
    width: 100%;
}

.info-introduction {
    font-size: 0.75em;
    color: #000000;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    text-align: left;

}

.info-description-container {
    flex-grow: 1;
    padding-right: 8px;
    text-align: justify;
    font-size: 0.9em;
    line-height: 1.5;
    color: #333;
    width: 100%;
}

/* -------------------- ESTILOS ESPECÍFICOS PARA REDMI NOTE 10 5G (Y SIMILARES) -------------------- */
/*
    Consideraciones para Redmi Note 10 5G:
    - Resolución: 1080 x 2400 px
    - DPI: ~400dpi (dpr ~2.625)
    - El viewport lógico puede variar, pero un buen rango para probar es un ancho de ~360px a ~420px
      y un alto grande, además de un dpr > 2.

    IMPORTANTE: Estos estilos se aplicarán a CUALQUIER dispositivo que cumpla estas condiciones.
    No se puede garantizar que solo afecte al Redmi Note 10 5G.
    Es una buena idea colocar esto DESPUÉS de los estilos móviles generales pero ANTES de los estilos de escritorio,
    o como una media query anidada dentro de la de "pantallas pequeñas" si quieres que sea muy específico.
*/

@media only screen and (min-device-height: 700px)
/* Alto para móviles con pantallas largas */
and (max-device-height: 900px)
/* Alto para móviles con pantallas largas */
and (-webkit-min-device-pixel-ratio: 2.5)
/* Apunta a dpr alto, 2.625 es ~2.5 */
and (orientation: portrait) {
    /* Para orientación vertical */

    /* Ejemplo de ajustes para Redmi Note 10 5G, modifica según sea necesario */

    .detail-header .detail-title {
        font-size: 1.5em;
        /* Un poco más grande para mejor legibilidad */
    }

    .large-piece-image {
        max-height: 50%;
        /* Ajusta la altura de la imagen en el overlay si se ve cortada */
    }

    .piece-detail-overlay {
        height: 100%;
    }

    .video-video {
        height: 86%;
    }

    /* Puedes añadir cualquier otro estilo que necesites específicamente para este rango de dispositivos */
    /* Por ejemplo, ajustar tamaños de fuente, espaciados, etc. */
}

@media only screen and (min-device-width: 360px) and (max-device-width: 390px) {
    .piece-detail-overlay {
        height: 100%;
    }

    .video-video {
        height: 92%;
    }
}

.zoom-controls-overlay {
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1001;
    align-items: center;
}

.zoom-btn {
    border: none;
    color: rgb(0, 0, 0);
    font-size: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
    align-items: center;
}

/* Visible solo en móviles en modo horizontal */
@media only screen and (max-width: 932px) and (orientation: landscape) {
    #mobileOverlay {
        display: flex;
    }
}


/* -------------------- DESKTOP STYLES (Apply for screens > 768px) -------------------- */
@media screen and (min-width: 769px) {

    /* Footer-bottom (top bar on desktop) */
    .footer-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: 70px;
        padding: 10px 20px;
        flex-direction: row;
        justify-content: space-between;
        z-index: 1;
    }

    .play-img {
        width: 50px;
    }

    .pause-img {
        width: 50px;
    }


    h3 {
        font-size: 14px;
    }


    .flechas {
        display: flex;
        flex-direction: column;
    }

    .imagen-contenedor img {
        width: 50%;
        height: 50%;
        max-width: 100%;
    }

    .language-selector {
        padding-right: 0.6%;
    }

    .logos-left img {
        height: 25px;
        margin-right: 15px;
        padding-left: 0.2%;
    }

    .marq-logo {
        height: 60px;
        max-width: 210px;
    }

    .top-icons {
        justify-content: flex-end;
    }

    .bandera {
        width: 50px;
    }

    /* Main Content Area - Desktop adjustments */
    .main-content {
        flex-direction: row;
        height: calc(103vh - 70px);
        /* Adjust height for desktop footer (bottom) */
        /* Adjust margin-top for desktop footer-bottom (top) height */
        margin-bottom: 0;
    }

    /* Video Section - Desktop */
    .video-container {
        width: 50%;
        height: 100%;
        margin-top: 0;
    }

    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .play-button {
        width: 60px;
        height: 60px;
    }

    .play-button::before {
        font-size: 3em;
    }

    .play-button.playing::before {
        font-size: 2.5em;
    }

    /* Franja de texto sobre el video - Desktop Adjustments */
    .video-text-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 15px 20px;
        color: rgb(0, 0, 0);
        text-align: center;
        font-size: 1em;
        z-index: 2;
        padding-right: 50%;
    }

    /* Piece Detail Overlay - Desktop Adjustments - Still covers full screen */
    .piece-detail-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background-color: rgb(255, 255, 255);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        z-index: 200;
        overflow-y: auto;
    }

    /* Close button for overlay on Desktop */
    .close-overlay-button {
        top: 20px;
        right: 20px;
        font-size: 40px;
        width: 50px;
        height: 50px;
        z-index: 10;
    }

    .detail-header {
        position: absolute;
        top: 20px;
        left: 20px;
        width: auto;
    }

    .detail-header .detail-title {
        font-size: 1.8em;
    }

    .detail-header .detail-subtitle {
        font-size: 1.2em;
    }

    .large-piece-image {
        max-width: 90%;
        max-height: 80%;
    }

    .detail-actions {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        gap: 50px;
        z-index: 9999;
    }

    .detail-icon {
        width: 80px;
        height: 80px;
        background-color: #ffffff00;
        z-index: 9999;
    }

    .detail-icon img {
        width: 70%;
        height: 70%;
        border: none;
        background-color: none;
        z-index: 9999;
    }

    /* Pieces Section - Desktop */
    .pieces-section {
        width: 50%;
        /* Cambiado a flex-direction: column para que el selector-panel se centre */
        display: flex;
        /* Asegura que es un flex container */
        justify-content: flex-start;
        /* Alinea los elementos al principio (arriba) */
        align-items: center;
        /* CENTRA horizontalmente los elementos (selector-panel) dentro de pieces-section */
        height: 100%;
        overflow-y: hidden;
        flex-direction: row-reverse;
        z-index: 9999;
    }

    .pieces-header {
        display: none;
    }

    /* Selector Panel - Desktop */
    .selector-panel {
        width: 100%;
        /* El ancho que ocupará la columna de piezas. Puedes ajustar esto. */
        height: 100%;
        display: flex;
        /* Asegúrate de que sea un contenedor flex */
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        justify-content: flex-start;
        /* Las piezas individuales empiezan desde arriba de la columna */
        padding-top: 6%;
        padding-bottom: 5%;
        gap: 30px;
        border-bottom: none;
        /* CENTRA las imágenes (selector-item) horizontalmente dentro del selector-panel */
        align-items: center;
        justify-content: space-evenly;
        align-items: flex-start;
        padding-left: 5%;
    }

    .selector-item {
        width: 90%;
        height: 90%;
        padding: 5px;
        /* Configura selector-item como flex container para centrar su propio contenido */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* CENTRA la imagen y el label verticalmente dentro del item */
        justify-content: center;
        /* Centra horizontalmente la imagen y el label dentro del item */
        text-align: center;
        /* Asegura que el texto dentro de selector-item esté centrado */
    }

    .selector-item:hover {
        transform: scale(1.08);
        border: 2px solid #ACA39A;
        /* Borde al pasar el ratón */
        background-color: rgba(184, 184, 184, 0.1);
        /* Fondo sutil al pasar el ratón */
    }

    .selector-item.active {
        border: 2px solid #ACA39A;
        background-color: rgba(172, 163, 154, 0.2);
    }

    .selector-item img {
        width: 100%;
        /* Asegura que la imagen ocupe todo el ancho disponible del item */
        max-height: 95%;
        object-fit: contain;
        border-radius: 5px;
        filter: brightness(0.8) contrast(1.2);
    }

    .selector-label {
        font-size: 13px;
        margin-top: 5px;
        color: white;
        /* Asegura que el color del texto sea visible */
    }

    /* Footer (at the bottom on desktop) */
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: auto;
        padding: 10px 20px;
        flex-direction: row;
        justify-content: space-between;
        z-index: 1;
    }

    /* Modals - Desktop */
    .modal-ar,
    .modal {
        padding: 0;
    }

    .modal-content-ar,
    .modal-content {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        padding: 0;
    }

    /* Close button for AR modal on desktop */
    .close-button {
        top: 25px;
        right: 25px;
        font-size: 40px;
        width: 45px;
        height: 45px;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-content.info-content .close-button {
        color: #333333;
        background-color: transparent;
    }

    .info-title {
        font-size: 1.5em;
    }

    .info-introduction {
        font-size: 1em;
    }

    .info-description-container {
        padding-right: 15px;
        font-size: 1.1em;
    }

    .zoom-btn {
        width: 80px;
        height: 80px;
    }
}

@media only screen and (min-device-width: 425px) and (max-device-width: 430px) {
    .video-video {
        height: 87%;
    }
}

@media only screen and (min-device-height: 910px) and (max-device-height: 915px) {
    .video-video {
        height: 83%;
    }
}

/* ----- Modal general ----- */
.modal-creditos {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Contenedor interno */
.creditos-contenido {
    position: relative;
    text-align: center;
}

/* Imagen */
.creditos-imagen {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    transition: opacity 0.4s ease;
}

/* Texto */
.creditos-texto {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    font-size: 16px;
    text-align: center;
    transition: opacity 0.4s ease;
    padding-top: 15%;
}

/* Flecha */
.flecha {
    font-size: 30px;
    cursor: pointer;
}

/* Botón cerrar */
.cerrar-creditos {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 32px;
    color: white;
    cursor: pointer;
}

/* Ocultar elementos */
.oculto {
    display: none;
}