@media screen and (max-width: 450px){
    :root {
        --primary-color: #f5f5f5;

        --rounded-corners: 12px;
        --rounded-viewport: 7px;
        --rounded-buttons: 5px;

        --padding-sides: 5vw;
        --padding-buttons: 10px;
        --padding-cards: 32px;
        --padding-viewport: 5px;
        
        --height-controls: 48px;

        --gap-elements: none;
    }

    body{
        margin: 0 !important;
        min-height: 100vh !important;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    /* GLOBAL HEADER */
    .sticky{
        position: relative;
    }

    #global_nav {
        background-color: var(--primary-color);
        border-radius: var(--rounded-corners);

        display: flex;
        flex-direction: column;
        height: auto !important;
        position: relative;
        margin-bottom: 0;
        font-family: Montserrat, sans-serif;
        font-weight: 600;
        font-size: 4vw;
        color: #282828;
    }

    .logoImage {
        width: 30vw; /* Asegura que el ancho del contenedor se tenga en cuenta */
        height: 100%; /* Asegura que la altura del contenedor se tenga en cuenta */
        object-fit: cover;
        transform: translate(2.5%, 0%);
    }

    /* HAMBURGUESA HORIZONTAL */
    #menu_ham{
        display: block;
        width: 6.5vw;
        font-size: 6vw;
        margin-left: 37.5vw;
        cursor: pointer;
    }

    #nav_buttons{
        display: none;
        flex-direction: column;
        align-items: center;
    }

    #nav_buttons.show{
        display: flex;
    }

    .navButtonStyle {
        cursor: pointer;

        border-radius: var(--rounded-buttons);
        padding: 10px 25px;

        justify-items: center;

        min-height: 10vmin;
    }

    .navButtonStyle:hover {
        background-color: #28282812;
    }

    .navButtonStyle:active {
        background-color: #28282840;
        transform: scale(0.9);
        transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Añadimos el cubic-bezier para el rebote al pulsar */
    }

    .navButtonStyle img{
        width: 7vmin;
        height: auto;
        transform: translate(0%, -50%);
    }

    /* INSTRUMENT INFO */
    #instrument_info {
        background-color: var(--primary-color);
        border-radius: var(--rounded-corners);

        height: auto;
        overflow: hidden;

        margin-top: auto;
        margin-bottom: 6vw;
    }

    .move{
        margin-top: 0.5vw !important;
        margin-bottom: 7vw !important;
    }

    #instrument_name {
        font-family: Montserrat, sans-serif;
        font-weight: 800;

        font-size: 5.5vw;
    }

    #instrument_description {
        font-family: Poppins, sans-serif;

        font-size: 3.5vw;
    }

    .tagStyle{
        display: flex;
        height: auto;
        padding: 2vw 4vw;
        justify-content: center;
        align-items: center;
        gap: 2vw;

        border-radius: var(--rounded-corners);
        background: rgba(40, 40, 40, 0.07);
    }

    .tagText{
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* SELECTOR BOX */
    #selector_container {
        background-color: var(--primary-color);
        border-radius: var(--rounded-corners);

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;

        height: 40vh;

        margin-bottom: 6vw;
    }

    #selector_title {
        font-family: Montserrat, sans-serif;
        font-weight: 700;
        font-size: 5vw;
        color: #282828;

        text-align: end;
    }

    #back {
        cursor: pointer;
        border-radius: 5px;
    }
    #back:hover {
        background-color: #28282812;
    }
    #back:active {
        background-color: #28282840;
    }

    #selector_main{
        justify-content: center;
        align-items: stretch;
        width: 100%;
        height: 40vh;
    }

    #category_selector{
        justify-content: center;
        width: 106%;
        height: 30vh;
    }

    #group_selector, #model_selector{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        gap: 1vh;

        overflow-y: auto;
        overflow-x: hidden;

        justify-content: flex-start;
        height: 100%;

        height: 25vh;
    }

    .categoryButtonStyle {
        flex-grow: 1;
        flex-shrink: 0;

        justify-content: center;
        padding: 2vw 5vw;
        border: none;
        border-radius: var(--rounded-corners);

        font-family: Montserrat, sans-serif;
        font-weight: 600;
        font-size: 3.5vw;

        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;

        background-color: #28282812;
        cursor: pointer;
    }

    .categoryButtonText {
        color: #282828;
    }

    .categoryButtonStyle:hover {
        background-color: #7A7A7A12;
    }

    .categoryButtonStyle:active {
        background-color: #28282840;
    }

    /* TEMPLATE -> GROUPBUTTON */
    /* Definen visualmente cómo se verán los botones y el texto del template */
    .groupButtonStyle, .modelButtonStyle {
        flex-grow: 1;

        width: 100%;
        justify-content: center;
        align-items: stretch;
        margin: 1.5vw;
        padding: 2vw 5vw;
        border: none;
        border-radius: var(--rounded-corners);
        box-sizing: border-box;

        font-family: Montserrat, sans-serif;
        font-weight: 600;
        font-size: 3vw;

        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;

        background-color: #28282812;
        cursor: pointer;
    }

    .groupButtonText, .modelButtonText {
        color: #282828;
    }

    .groupButtonStyle:hover, .modelButtonStyle:hover {
        background-color: #7A7A7A12;
    }

    .groupButtonStyle:active, .modelButtonStyle:active {
        background-color: #28282840;
    }

    /* Como se verá el botón seleccionado */
    .modelButtonStyle.selected {
        background-color: #28282840;
        font-weight: bold;
    }

    /* VIEWER CONTAINER */
    #viewer_container{
        gap: 3vh;
    }

    #canvas_controls{
        flex-wrap: wrap;
        gap: 1vw;
    }

    #canvas_controls > div:last-child{
        flex: 0 0 100%;
        margin: 3vw 0 0.5vw 0;
    }

    #canvas_container{
        background-color: var(--primary-color);
        border-radius: var(--rounded-corners);
        padding: none !important;

        font-family: Montserrat, sans-serif;
        font-weight: 700;
        font-size: 3vw;
        color: #282828;

        width: auto;
        height: 50vh;
        position: relative;
    }

    #autorotation, #playblack_controller, #scene_toggle, #viewport_scene, #HDR, #view_center {
        background-color: var(--primary-color);
        border-radius: var(--rounded-corners);

        font-family: Montserrat, sans-serif;
        font-weight: 700;
        font-size: 3vw;
        color: #282828;

        width: 16vw;
        height: 16vw;
    }

    #canvas_controls button.flex{
        flex: none;
    }

    #play_pause, #playback_speed {
        cursor: pointer;
    }


    #autorotation,
    #scene_toggle,
    #viewport_scene,
    #HDR,
    #view_center {
        cursor: pointer;
        transition: box-shadow 0.2s ease-in-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }


    #autorotation:hover,
    #scene_toggle:hover,
    #viewport_scene:hover,
    #HDR:hover,
    #view_center:hover {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
    }


    #autorotation:active,
    #scene_toggle:active,
    #viewport_scene:active,
    #HDR:active,
    #view_center:active {
        transform: scale(0.9);
        transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    #canvas3D {
        border-radius: 5vw;

        position: relative;
        left: 50%;
        transform: translate(-50%, 0%);
        padding: 0.5vw 1.25vw 0.5vw 1.25vw;
    }

    #image_viewer {
        background-color: #28282840;
        border-radius: var(--rounded-viewport);
    }

    /* Estilos de los botones de 'Atrás' y 'Siguiente' del Image Viewer*/
    #previous,
    #next {
        width: 10vw;
        height: 10vw;
        background-color: #28282812;
        opacity: 1;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Añadimos el cubic-bezier para el "volver" */
    }

    #previous:hover,
    #next:hover {
        background-color: #7A7A7A12;
        transform: scale(1.1);
    }

    #previous:active,
    #next:active {
        background-color: #28282840;
        transform: scale(0.9);
        transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Añadimos el cubic-bezier para el rebote al pulsar */
    }

    /* Estilos para el contenedor de los puntos de cantidad */
    .quantityDot {
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 50%;
        margin-left: 8px;
        margin-right: 8px;
        cursor: pointer;
        opacity: 1;
        transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Añadimos el cubic-bezier para el "volver" */
    }
    .quantityDot:hover {
        transform: scale(1.2);
    }
    .quantityDot:active {
        transform: scale(0.8);
        transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Añadimos el cubic-bezier para el rebote al pulsar */
    }

    /* Estilos para los estados activo e inactivo */
    .active {
        background-color: #69b8b8;
        opacity: 1;
    }
    .inactive {
        background-color: #ccc;
    }

    /* Estilos para el contenedor de la barra de progreso (el "track") */
    #progress_track {
        background-color: #ccc; /* Color de fondo del track */
        border-radius: 5px; /* Bordes redondeados */
        height: 8px; /* Altura del track */
        width: 100%; /* Ocupa todo el ancho disponible dentro de su contenedor */
        cursor: pointer; /* Indica que es interactivo */
        margin: 0 10px; /* Un poco de margen a los lados */
    }

    /* Estilos para la barra de progreso que indica el avance */
    #progress {
        background-color: #69b8b8; /* Color de la barra de progreso */
        /*background-image: linear-gradient(to right, #C4CBEB, #ACDAD4);*/ /* Izquierda a derecha */
        height: 100%; /* Ocupa toda la altura de su contenedor (#progress_bar) */
        width: 0%; /* Se llenará dinámicamente con JavaScript */
        border-radius: 5px; /* Bordes redondeados */
        transition: transform 0.15s ease-in-out; /* Mantenemos la transición */
        transform-origin: left center; /* Mantenemos el origen para consistencia, aunque no sea tan relevante para la escala Y pura */
    }

    #progress_track:hover #progress, #progress_track:active #progress {
        transform: scaleY(1.25); /* Escala solo en el eje Y (altura) al 150% */
    }

    .speedButton {
        background-color: #f9f9f9; /* Ejemplo de color de fondo */
        color: #333; /* Ejemplo de color de texto */
        padding: 8px 12px; /* Ejemplo de padding */
        text-align: left; /* Alineación del texto */
        display: block; /* Para que ocupe todo el ancho del menú */
        border: none;
        cursor: pointer;
    }

    .speedButton:hover {
        background-color: #e0e0e0; /* Ejemplo de color de fondo al pasar el ratón */
    }

    /* DESPLEGABLE EN VERTICAL */
    #playback_speed_menu {
        background-color: #f9f9f9;
        border: none;
        z-index: 10;

        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        align-items: end;
    }

    /* DESPLEGABLE EN HORIZONTAL */
    /* #playback_speed_menu {
        background-color: #f9f9f9;
        border: none;
        z-index: 10;

        top: auto !important;
        bottom: 100% !important;

        left: auto !important;
        right: 0 !important;
        display: flex;
        flex-direction: row;

        margin-top: 0 !important;
        align-items: flex-end;
    } */
}