/* main-menu.css (Minificado y Optimizado) */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
:root{
    --color-bg-base:#333;
    --color-accent:#FFA500;
    --rueda-tamano:0px;
    --posicion-left:0px;
    --rueda-rotacion-actual:0deg
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    margin:0;
    font-family:Arial,sans-serif;
    position:relative;
    overflow:hidden
}
#background-container{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none
}
.background-layer{
    position:absolute;
    inset:0; 
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    transition:opacity .5s ease
}
#bg-layer-1{opacity:1;z-index:2}
#bg-layer-2{opacity:0;z-index:1}
.rueda{
    width:var(--rueda-tamano);
    height:var(--rueda-tamano);
    border-radius:50%;
    position:fixed;
    top:50%;
    left:var(--posicion-left);
    transform:translateY(-50%) rotate(var(--rueda-rotacion-actual)) translateZ(0);
    transition:transform .2s ease-out
}
.rueda:focus{outline:none}
.opcion{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background-color:transparent;
    border-radius:0;
    cursor:pointer;
    z-index:10;
    transition:transform .2s ease-out;
    --x-offset:0px;
    --y-offset:0px;
    left:calc(50% + var(--x-offset));
    top:calc(50% + var(--y-offset));
    transform:translate(-50%,-50%) rotate(calc(var(--rueda-rotacion-actual) * -1)) translateZ(0)
}
.opcion.seleccionada{z-index:11}
.opcion img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .3s ease-out,filter .3s ease-out,opacity .3s ease;
    transform:translateZ(0)
}
.opcion img[data-src]{opacity:0}
.opcion.seleccionada img{
    transform:scale(1.3) translateX(30px) translateZ(0);
    filter:drop-shadow(0 4px 15px rgba(0,0,0,.6))
}
@media (max-width:768px){
    body{overflow-y:auto;align-items:flex-start;justify-content:center}
    #rueda{
        position:relative!important;
        width:100%!important;
        height:auto!important;
        left:0!important;
        top:0!important;
        transform:none!important;
        border-radius:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:10px 0;
        overflow:scroll;
        max-height:100vh;
        transition:none!important;
        will-change:auto
    }
    .opcion,
    .opcion.seleccionada{
        position:relative;
        left:auto!important;
        top:auto!important;
        transform:none!important;
        will-change:auto;
        background-color:initial;
        box-shadow:none;
        z-index:auto;
    }
    .opcion{
        width:150px!important;
        height:150px!important;
        margin-bottom:5px;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column
    }
    .opcion img{
        width:130px!important;
        height:130px!important;
        min-width:130px;
        transform:none!important;
        filter:none!important;
        transition:transform .2s ease-out,filter .2s ease-out;
        will-change:transform,filter
    }
    .opcion.seleccionada img{
         transform:scale(1.2) translateZ(0)!important;
         filter:drop-shadow(0 0 10px var(--color-accent))!important
    }
}