/* =========================================================
   DELIKATESSEN MEGA MENÚ 6.5
   - Fondo del panel controlable
   - Fondo y borde de cada tarjeta controlables
   - Sombra configurable
   - Mouseover con intensidad 0–100%
   - 6 + 6 escritorio / 4 tablet / 2 móvil
   ========================================================= */
.dl-mm51-trigger{cursor:pointer!important}
.dl-mm51-root{display:none!important}
.dl-mm-panel{
    --dl-mm-overlay-opacity:.16;
    --dl-mm-zoom-min:1;
    --dl-mm-zoom-max:1.18;
    --dl-mm-card-border-width:3px;
    --dl-mm-card-radius:12px;
    --dl-mm-image-inset:3px;
    --dl-mm-shadow-opacity:16%;
    --dl-mm-shadow-x:4px;
    --dl-mm-shadow-y:6px;
    --dl-mm-shadow-blur:14px;
    --dl-mm-shadow-spread:0px;
    --dl-mm-shadow-rgba:rgba(25,32,17,.16);
    --dl-mm-overlay-bg:rgba(0,0,0,.16);
    --dl-mm-hover-intensity:50;
    --dl-mm-hover-scale:1.175;
    --dl-mm-hover-lift:4px;
    --dl-mm-hover-brightness:1.075;
    --dl-mm-hover-saturate:1.20;
    --dl-mm-gradient-opacity:.62;
    --dl-mm-text-shadow:0 2px 7px rgba(0,0,0,.55);
}

/* PANEL PRINCIPAL */
.dl-mm-panel{
    position:fixed!important;
    z-index:2147483000!important;
    left:0;
    top:100px;
    width:900px!important;
    max-width:calc(100vw - 24px)!important;
    box-sizing:border-box;
    padding:10px!important;
    background-color:var(--dl-mm-panel-bg-color,#f5e9d2);
    background-image:none;
    border:1px solid rgba(193,138,36,.52);
    border-radius:15px;
    box-shadow:var(--dl-mm-shadow-x,4px) var(--dl-mm-shadow-y,6px) var(--dl-mm-shadow-blur,14px) var(--dl-mm-shadow-spread,0px) var(--dl-mm-shadow-rgba,rgba(25,32,17,.16));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px)!important;
    transition:opacity .20s ease,transform .20s ease,visibility .20s ease;
}
.dl-mm-panel::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background-image:var(--dl-mm-panel-bg-image,none);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:var(--dl-mm-panel-bg-opacity,0);
    z-index:0;
}
.dl-mm-front-grid{position:relative;z-index:1;}
.dl-mm-panel.dl-mm51-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0)!important;
}
.dl-mm-panel.dl-mm-shadow-off{box-shadow:none!important}

/* DESKTOP: 6 + 6 */
.dl-mm-front-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
}

/* TARJETAS */
.dl-mm-tile-shell{
    position:relative;
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1;
    border-radius:var(--dl-mm-card-radius,12px);
    box-shadow:var(--dl-mm-shadow-x,4px) var(--dl-mm-shadow-y,6px) var(--dl-mm-shadow-blur,14px) var(--dl-mm-shadow-spread,0px) var(--dl-mm-shadow-rgba,rgba(25,32,17,.16));
    transition:transform .22s ease,filter .22s ease;
    z-index:0;
    overflow:visible;
}
.dl-mm-tile{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    box-sizing:border-box;
    border:var(--dl-mm-card-border-width,3px) solid var(--dl-mm-card-border-color,#c18a24);
    border-radius:var(--dl-mm-card-radius,12px);
    background:var(--dl-mm-card-bg,#354a20);
    text-decoration:none!important;
    color:#fff!important;
    isolation:isolate;
    box-shadow:none;
    transition:transform .22s ease,border-color .22s ease;
}

/* FOTO: el margen deja ver el fondo elegido de la categoría */
.dl-mm-image{
    position:absolute;
    inset:var(--dl-mm-image-inset,3px);
    z-index:0;
    border-radius:max(0px,calc(var(--dl-mm-card-radius,12px) - var(--dl-mm-image-inset,3px)));
    background-image:var(--dl-mm-bg,none);
    background-color:var(--dl-mm-card-bg,#354a20);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transform:scale(1);
    transform-origin:center;
    transition:transform .42s cubic-bezier(.2,.7,.2,1),filter .35s ease;
    will-change:transform,filter;
}
.dl-mm-overlay{
    position:absolute;
    inset:var(--dl-mm-image-inset,3px);
    border-radius:max(0px,calc(var(--dl-mm-card-radius,12px) - var(--dl-mm-image-inset,3px)));
    z-index:1;
    background:var(--dl-mm-overlay-bg,rgba(0,0,0,.16));
    pointer-events:none;
}
.dl-mm-tile::after{
    content:"";
    position:absolute;
    inset:var(--dl-mm-image-inset,3px);
    z-index:2;
    border-radius:max(0px,calc(var(--dl-mm-card-radius,12px) - var(--dl-mm-image-inset,3px)));
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 34%,rgba(0,0,0,var(--dl-mm-gradient-opacity,0.62)) 100%);
    transition:opacity .25s ease;
}

/* TEXTO CENTRADO */
.dl-mm-content{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    z-index:3;
    padding:7px 8px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:5px;
    transform:translateY(-50%);
    transition:transform .22s ease;
}
.dl-mm-index{
    order:1;
    font:6.5px Arial,sans-serif;
    letter-spacing:1.4px;
    color:#f5e9d2;
    text-align:center;
}
.dl-mm-title{
    order:2;
    max-width:92%;
    font-size:var(--dl-mm-font-size,10px);
    line-height:1.08;
    font-weight:var(--dl-mm-font-weight,700);
    font-family:var(--dl-mm-font-family,Arial,sans-serif);
    letter-spacing:var(--dl-mm-letter-spacing,0px);
    color:var(--dl-mm-font-color,#fff);
    text-transform:uppercase;
    text-align:center;
    text-shadow:var(--dl-mm-text-shadow,0 2px 7px rgba(0,0,0,.55));
}
.dl-mm-arrow{
    order:3;
    width:22px;
    height:22px;
    flex:0 0 22px;
    border:1px solid rgba(245,233,210,.82);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f5e9d2;
    font-size:12px;
    line-height:1;
    transition:.22s ease;
}

/* MOUSEOVER: efecto real por CSS + respaldo JS.
   La intensidad 0% equivale a escala 1 y sin desplazamiento. */
@media (hover:hover) and (pointer:fine){
    .dl-mm-tile-shell{
        transition:transform .22s ease,filter .22s ease;
    }
    .dl-mm-tile{
        transition:border-color .22s ease;
    }
    .dl-mm-image{
        transition:transform .42s cubic-bezier(.2,.7,.2,1),filter .35s ease;
    }
    .dl-mm-effect-zoom .dl-mm-tile:hover .dl-mm-image,
    .dl-mm-effect-zoom_lift .dl-mm-tile:hover .dl-mm-image,
    .dl-mm-effect-zoom_brightness .dl-mm-tile:hover .dl-mm-image{
        transform:scale(var(--dl-mm-hover-scale,1));
    }
    .dl-mm-effect-lift .dl-mm-tile-shell:hover,
    .dl-mm-effect-zoom_lift .dl-mm-tile-shell:hover{
        transform:translateY(calc(-1 * var(--dl-mm-hover-lift,0px)));
        z-index:4;
    }
    .dl-mm-effect-brightness .dl-mm-tile:hover .dl-mm-image,
    .dl-mm-effect-zoom_brightness .dl-mm-tile:hover .dl-mm-image{
        filter:brightness(var(--dl-mm-hover-brightness,1));
    }
    .dl-mm-effect-saturate .dl-mm-tile:hover .dl-mm-image{
        filter:saturate(var(--dl-mm-hover-saturate,1));
    }
    .dl-mm-effect-border .dl-mm-tile:hover{
        border-color:var(--dl-mm-hover-border-color,#F5E9D2);
    }
    .dl-mm-tile-shell:hover .dl-mm-arrow{
        transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
    }
}

.dl-mm-tile:focus-visible{outline:3px solid #c18a24;outline-offset:2px}

/* TABLET */
@media(max-width:1100px) and (min-width:981px){
    .dl-mm-panel{width:820px!important}
    .dl-mm-front-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
    .dl-mm-title{font-size:10.5px}
}

/* MÓVIL: 2 columnas */
@media(max-width:980px){
    .dl-mm-panel{
        width:calc(100vw - 16px)!important;
        max-width:calc(100vw - 16px)!important;
        padding:8px!important;
        border-radius:14px;
        max-height:calc(100vh - 90px);
        overflow:auto;
    }
    .dl-mm-front-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
    .dl-mm-tile-shell{border-radius:var(--dl-mm-card-radius,10px)}
    .dl-mm-tile{border-radius:var(--dl-mm-card-radius,10px)}
    .dl-mm-image,.dl-mm-overlay{border-radius:max(0px,calc(var(--dl-mm-card-radius,10px) - var(--dl-mm-image-inset,3px)))}
    .dl-mm-content{top:50%;bottom:auto;padding:7px 6px 4px;gap:5px;transform:translateY(-50%)}
    .dl-mm-title{font-size:var(--dl-mm-font-size,9.5px);line-height:1.06;max-width:94%}
    .dl-mm-arrow{width:20px;height:20px;flex-basis:20px;font-size:11px}
    .dl-mm-index{font-size:6px;letter-spacing:1.1px}
}