/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 19 2025 | 13:17:24 */
/* =============================================================== */
/*     C S S   C O M P L E T O   –  VERSIÓN “SIN FRANJA BLANCA”     */
/* =============================================================== */

/* ---------- GRID PRINCIPAL (3 columnas en desktop) -------------- */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  max-width:1200px;
  margin:auto;
  overflow-x:hidden !important;   /* cinturón de seguridad global */
}

/* ---------- TARJETAS DE CATEGORÍA ------------------------------- */
/*  Las tarjetas pueden llamarse .menu-col o .menu-hijos, cubrimos ambas */
.menu-col,
.menu-hijos{
  position:relative;
  overflow:hidden;                /* recorta cualquier desborde   */
  cursor:pointer;
  text-align:center;
  border-radius:12px;
  box-shadow:0 4px 8px #0006;
  transition:box-shadow .25s ease;
  /*  🔒 Desactiva cualquier transform previo (scale, translate)   */
  transform:none !important;
}
.menu-col:hover,
.menu-hijos:hover{
  box-shadow:0 6px 16px #0008;
  transform:none !important;      /* evita zoom que empuje layout */
}

/* --- imagen como <img> (si la tarjeta usa <img>) ---------------- */
.menu-col img,
.menu-hijos img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:inherit;
}

/* --- imagen como background (si la tarjeta usa background-image) */
.menu-col,
.menu-hijos{
  background-size:cover;
  background-position:center;
}

/* --- overlay de oscurecido (efecto hover seguro) ---------------- */
.menu-col::after,
.menu-hijos::after{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  border-radius:inherit;
}
.menu-col:hover::after,
.menu-hijos:hover::after{
  opacity:0.25;                  /* oscurece sin desplazar nada  */
}

/* --- título debajo de la imagen --------------------------------- */
.menu-col p,
.menu-hijos p{
  margin:.6rem 0 0;
  font-weight:600;
  color:#f5f5f5;
}

/* ---------- SECCIONES DESPLEGABLES ------------------------------ */
.menu-seccion{
  grid-column:1/-1;               /* ocupa las 3 columnas          */
  background:#1b1b1b;
  border:1px solid #333;
  border-radius:12px;
  padding:1.5rem 1rem;
  box-shadow:0 4px 12px #0008;

  opacity:0;
  transform:scale(.96);
  transition:opacity .35s ease, transform .35s ease;
}
.menu-seccion.open{
  opacity:1;
  transform:scale(1);
}
.hidden{ display:none !important; }

/* ---------- LISTADO DE PLATOS ----------------------------------- */
.menu-subgroup{
  margin:1.4rem 0 .6rem;
  font-weight:700;
  color:#f4b942;
  text-transform:uppercase;
  font-size:1rem;
}
.menu-item{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem 0;
  border-bottom:1px dashed #444;
}
.menu-item:last-child{ border-bottom:none; }
.menu-item .precio{ color:#f4b942; font-weight:600; }

/* ---------- TEXTO DE CARTA EN BLANCO ---------------------------- */
.menu-seccion,
.menu-seccion .menu-item,
.menu-seccion .menu-item .nombre,
.menu-seccion .menu-subgroup{
  color:#ffffff !important;
}

/* ---------- RESPONSIVE ----------------------------------------- */
@media(max-width:768px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .menu-grid{ grid-template-columns:1fr; }
}

/* ========================================================= */
/* 🔒 BLOQUEO GLOBAL DE SCROLL HORIZONTAL                     */
/* ========================================================= */
html, body{ overflow-x:hidden !important; }

/* ========================================================= */
/* TARJETAS DE MENÚ (cubren .menu-col y las columnas de Elementor) */
/* ========================================================= */

/* 1 ·  Selección amplia: tu clase + columnas Elementor que uses */
.menu-col,
.menu-hijos,
.elementor-column.menu-hijos,
.elementor-column.menu-col{
  position:relative;
  overflow:hidden;                 /* recorta cualquier desborde  */
  cursor:pointer;
  border-radius:12px;
  box-shadow:0 4px 8px #0006;

  /* ❌ ZEROS todas las transformaciones que añada Elementor       */
  transform:none !important;
  -webkit-transform:none !important;
  transition:box-shadow .25s ease; /* sombra suave                */
}

/* 2 ·  Sigue desactivando CUALQUIER transform al pasar el ratón   */
.menu-col:hover,
.menu-hijos:hover,
.elementor-column.menu-col:hover,
.elementor-column.menu-hijos:hover{
  transform:none !important;
  -webkit-transform:none !important;   /* Safari/Android           */
  box-shadow:0 6px 16px #0008;
}

/* 3 ·  Oscurecer con overlay – seguro, sin zoom                  */
.menu-col::after,
.menu-hijos::after,
.elementor-column.menu-col::after,
.elementor-column.menu-hijos::after{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  border-radius:inherit;
}
.menu-col:hover::after,
.menu-hijos:hover::after,
.elementor-column.menu-col:hover::after,
.elementor-column.menu-hijos:hover::after{
  opacity:0.28;                    /* ajusta intensidad a tu gusto */
}

/* 4 ·  Imagen como <img> – sigue funcionando                      */
.menu-col img,
.menu-hijos img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:inherit;
}

/* 5 ·  Texto debajo de la foto                                    */
.menu-col p,
.menu-hijos p{
  margin:.6rem 0 0;
  font-weight:600;
  color:#f5f5f5;
}

/* ========================================================= */
/* EL RESTO DE TU CSS (grid, secciones desplegables, etc.)    */
/* permanece igual, no hace falta tocarlo                     */
/* ========================================================= */

/* ——— Ocultar precios de la carta ——— */
.menu-item .precio{
  display:none !important;   /* ni se ven ni ocupan espacio */
}