/* ============================================================
   PALETA & VARIABLES — Reggia Pizza (oscuro + mostaza)
   ============================================================ */
:root{
  --mx-sand:    #0f0f10;                 /* fondo base oscuro */
  --mx-oxblood: #b8840a;                 /* MOSTAZA principal */
  --mx-maize:   #b8840a;                 /* mostaza p/ decorativos */
  --mx-agave:   #7a5a08;                 /* mostaza profundo p/ gradiente */
  --mx-ink:     #ffffff;                 /* texto blanco */
  --mx-line:    rgba(255,255,255,.15);   /* líneas/bordes sutiles */
  --mx-card:    rgba(20,20,22,.90);      /* tarjeta oscura (ligeramente menos opaca) */
  --mx-shadow:  0 10px 28px rgba(0,0,0,.55);

  --radius-card: 16px;
  --radius-pill: 9999px;

  --fondo-opacidad: 1;
  --chip-min: 64px;
}

/* ============================================================
   FONDO ESTÁTICO A PANTALLA COMPLETA
   ============================================================ */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url('fondo.jpg');
  background-size:cover;
  background-position:center;
  opacity:var(--fondo-opacidad);
  z-index:-1;
  pointer-events:none;
}

/* ============================================================
   TIPOGRAFÍA GLOBAL Y COLORES BASE
   ============================================================ */
body{
  font-family:"Inter","Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-color:var(--mx-sand);
  color:var(--mx-ink);
  margin:0; padding:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ letter-spacing:.2px; color:var(--mx-ink); }

/* ============================================================
   CONTENEDOR GENERAL
   ============================================================ */
.contenedor{
  max-width:1100px;
  margin:auto;
  padding:22px 18px 28px;
}

/* ============================================================
   ENCABEZADO
   ============================================================ */
.encabezado{ text-align:center; margin-bottom:36px; }
.encabezado h1{
  font-family:"Oswald","Fjalla One",Impact,system-ui,sans-serif;
  font-size:clamp(30px,4.2vw,46px);
  margin:0;
  color:var(--mx-oxblood);
}
.subtitulo{ font-size:15px; color:rgba(255,255,255,.72); margin-top:8px; }

/* ============================================================
   CATEGORÍAS (H2) + SUBCATEGORÍAS (H3)
   ============================================================ */
.categoria{ margin-bottom:36px; }
.categoria h2{
  font-family:"Oswald",system-ui,sans-serif;
  font-size:clamp(22px,3vw,30px);
  color:var(--mx-ink);
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:3px dotted var(--mx-line);
}
.categoria h2::after{
  content:"";
  display:inline-block; vertical-align:middle;
  margin-left:10px; width:36px; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--mx-maize),var(--mx-agave));
  opacity:.95;
}
.subcategoria{
  font-family:"Oswald",system-ui,sans-serif;
  font-size:clamp(17px,2.4vw,22px);
  color:var(--mx-ink);
  margin:20px 0 10px;
  padding-left:10px;
  border-left:6px solid var(--mx-oxblood);
}

/* ============================================================
   TARJETA DE PRODUCTO — imagen encima con fade hacia el recuadro
   ============================================================ */
.item{
  position:relative;
  --img-w: clamp(160px, 30%, 320px);
  --img-gap: 16px;

  margin-bottom:18px;
  padding:16px calc(var(--img-w) + var(--img-gap)) 14px 16px;

  /* Fondo SOLO en la zona de texto (izquierda). La derecha la rellena ::after. */
  background:
    linear-gradient(to right, var(--mx-card), var(--mx-card)) left / calc(100% - var(--img-w)) 100% no-repeat,
    transparent;

  border:none;
  box-shadow:var(--mx-shadow);
  backdrop-filter:blur(2px);

  /* 🔴 CLAVE: redondeo real del contenedor y recorte de hijos */
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Borde sutil completo (respeta el radio por overflow) */
.item::before{
  content:"";
  position:absolute; inset:0;
  border:1px solid var(--mx-line);
  border-radius: inherit;
  pointer-events:none;
  z-index:1; /* sobre ::after, bajo imagen y texto */
}

/* Bajo-fondo en la zona de la imagen (visible cuando la imagen se desvanece) */
.item::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0;
  width:var(--img-w);
  background: var(--mx-card);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;  /* redondo sólo lado derecho */
  z-index:0;
}

/* ============================================================
   IMAGEN DEL PRODUCTO (derecha) con fade hacia el recuadro
   ============================================================ */
.imagen-producto-container{
  position:absolute; top:0; right:0; bottom:0;
  width:var(--img-w);
  border-top-right-radius:var(--radius-card);
  border-bottom-right-radius:var(--radius-card);
  overflow:hidden;
  background:transparent !important;
  box-shadow:none;
  z-index:2; /* por encima del borde y del bajo-fondo */
}

.imagen-producto-container img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity .5s ease;
  display:block;

  /* Redondeo explícito del lado derecho (además del overflow del contenedor) */
  border-top-right-radius:var(--radius-card);
  border-bottom-right-radius:var(--radius-card);

  /* La máscara desvanece a la izquierda revelando el recuadro interno (no el fondo de la página). */
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1)    56%,
    rgba(0,0,0,0.92) 70%,
    rgba(0,0,0,0.65) 82%,
    rgba(0,0,0,0.32) 91%,
    rgba(0,0,0,0.10) 97%,
    rgba(0,0,0,0)   100%
  );
          mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1)    56%,
    rgba(0,0,0,0.92) 70%,
    rgba(0,0,0,0.65) 82%,
    rgba(0,0,0,0.32) 91%,
    rgba(0,0,0,0.10) 97%,
    rgba(0,0,0,0)   100%
  );
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
.imagen-producto-container img.active{ opacity:1; }

/* Fallback (navegadores sin mask-image) */
@supports not ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))){
  .imagen-producto-container::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:none; /* corte limpio */
  }
}

/* En PROMOS se omite el bloque de imagen */
.promo-item .imagen-producto-container{ display:none !important; }

/* ============================================================
   TEXTO DEL PRODUCTO (nombres + descripción)
   ============================================================ */
.item > .texto-producto{
  position:relative;
  z-index:3; /* por encima de ::before y ::after */
  display:flex; flex-direction:column; justify-content:flex-start;
  min-width:0;
}
.item > .texto-producto > h3{
  font-family:"Oswald",system-ui,sans-serif;
  font-size:clamp(16px, 2.2vw, 20px);
  font-weight:800; margin:0 0 6px 0; color:var(--mx-ink);
  line-height:1.18; letter-spacing:.2px;
  white-space:normal; word-break:normal; overflow-wrap:break-word; text-overflow:clip;
}
.descripcion-general{
  color:rgba(255,255,255,.8);
  font-size:15px; margin:2px 0 0 0; line-height:1.45; max-width:70ch;
}

/* Badges */
.badges{ display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--radius-pill); font-size:12px; font-weight:800; line-height:1; letter-spacing:.2px; }
.badge-vegan{ background:#107a2b; color:#fff; }
.badge-veggie{ background:rgba(255,255,255,.1); color:#cde8d4; border:1px solid rgba(205,232,212,.35); }

/* ============================================================
   PRECIO & PRESENTACIONES (chips)
   ============================================================ */
.valor-general{
  margin-top:10px; display:inline-block;
  background:transparent; color:#fff;
  border:2px solid var(--mx-oxblood);
  padding:6px 12px; border-radius:var(--radius-pill);
  font-weight:900; font-size:14px; letter-spacing:.2px; width:fit-content;
  text-transform:uppercase; font-variant-numeric:tabular-nums;
  min-width:var(--chip-min); text-align:center;
}
.presentaciones{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:8px; }
.presentacion{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:2px solid var(--mx-oxblood); border-radius:var(--radius-pill); padding:5px 10px; }
.presentacion-descripcion{ font-weight:700; font-size:13px; color:var(--mx-ink); }
.presentacion-valor{ font-weight:900; font-size:13.5px; color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums; min-width:var(--chip-min); text-align:center; }

/* ============================================================
   AJUSTES: ITEMS SIN IMAGEN
   ============================================================ */
.item:has(.imagen-producto-container:empty),
.item:not(:has(.imagen-producto-container)){
  padding:16px;
  background:var(--mx-card);
  border:1px solid var(--mx-line);
}
.item:has(.imagen-producto-container:empty)::before,
.item:not(:has(.imagen-producto-container))::before{ display:none; }
.item:has(.imagen-producto-container:empty)::after,
.item:not(:has(.imagen-producto-container))::after{ display:none; }

.item:has(.imagen-producto-container:empty) > .texto-producto,
.item:not(:has(.imagen-producto-container)) > .texto-producto{
  display:grid; grid-template-columns:1fr auto; column-gap:14px; row-gap:8px; align-items:start;
}
.item:has(.imagen-producto-container:empty) > .texto-producto > h3,
.item:not(:has(.imagen-producto-container)) > .texto-producto > h3{ grid-column:1; }
.item:has(.imagen-producto-container:empty) .descripcion-general,
.item:not(:has(.imagen-producto-container)) .descripcion-general{ grid-column:1; }
.item:has(.imagen-producto-container:empty) .valor-general,
.item:not(:has(.imagen-producto-container)) .valor-general{
  grid-column:2; grid-row:1; justify-self:end; align-self:start;
}
.item:has(.imagen-producto-container:empty) .presentaciones,
.item:not(:has(.imagen-producto-container)) .presentaciones{
  grid-column:2; grid-row:2; justify-content:flex-end;
}

/* Fallback manual si fuerzas .no-image */
.item.no-image{
  padding:16px !important; background:var(--mx-card);
  border:1px solid var(--mx-line);
}
.item.no-image::before,
.item.no-image::after{ display:none !important; }
.item.no-image > .texto-producto{
  display:grid !important; grid-template-columns:1fr auto; column-gap:14px; row-gap:8px; align-items:start;
}
.item.no-image > .texto-producto > h3,
.item.no-image .descripcion-general{ grid-column:1; }
.item.no-image .valor-general{ grid-column:2; grid-row:1; justify-self:end; }
.item.no-image .presentaciones{ grid-column:2; grid-row:2; justify-content:flex-end; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .item{
    --img-w: clamp(120px, 42vw, 260px);
    --img-gap: 12px;
    padding:14px calc(var(--img-w) + var(--img-gap)) 12px 14px;
  }
  .descripcion-general{ font-size:14.5px; }
  .valor-general{ font-size:13.5px; padding:6px 10px; }
  .presentacion{ padding:4px 8px; }
  .presentacion-valor{ font-size:13px; }
}

/* Mobile */
@media (max-width: 600px){
  .item{
    padding:12px calc(var(--img-w) + var(--img-gap)) 10px 12px;
    background:var(--mx-card);
    border:1px solid var(--mx-line);
    /* mantenemos el radio y el recorte */
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  /* En móvil no necesitamos los pseudos */
  .item::before,
  .item::after{ display:none; }

  .item:has(.imagen-producto-container:empty),
  .item:not(:has(.imagen-producto-container)),
  .item.no-image{
    padding:12px;
  }
  .item:has(.imagen-producto-container:empty) > .texto-producto,
  .item:not(:has(.imagen-producto-container)) > .texto-producto,
  .item.no-image > .texto-producto{
    grid-template-columns:1fr;
  }
  .item:has(.imagen-producto-container:empty) .valor-general,
  .item:not(:has(.imagen-producto-container)) .valor-general,
  .item.no-image .valor-general{
    grid-column:1; justify-self:start;
  }
  .item:has(.imagen-producto-container:empty) .presentaciones,
  .item:not(:has(.imagen-producto-container)) .presentaciones,
  .item.no-image .presentaciones{
    grid-column:1; justify-content:flex-start;
  }
}

/* ============================================================
   SIN IMAGEN → oculta contenedor vacío
   ============================================================ */
.imagen-producto-container:empty{ display:none; }

/* ===================== PROMOS — compacto, loop y sin scrollbar ===================== */

#promos-global { margin-top: 16px; }

/* Pista */
#promos-slider{
  display: flex;
  gap: 14px;
  padding: 6px 2px;
  overflow: hidden;                 /* el JS mueve scrollLeft sin mostrar barra */
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#promos-slider::-webkit-scrollbar{ display: none; }

/* Card compacto */
.promo-item{
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 42vw, 360px);
  height: clamp(150px, 28vw, 210px);
  border-radius: 16px;              /* ✅ esquinas redondeadas */
  background-image: var(--promo-bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;                 /* recorta contenido a su radio */
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

/* Overlay de lectura suave */
.promo-item::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.38) 50%, rgba(0,0,0,.26) 100%),
    radial-gradient(120% 80% at 30% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* El .item interno NO debe pintar nada */
.promo-item .item{
  position:absolute; inset:0;
  padding: 14px 16px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: inherit;           /* ✅ coincide con la tarjeta promo */
  overflow: hidden;
}
.promo-item .item::before,
.promo-item .item::after{ display:none !important; }

/* Texto */
.promo-item .texto-producto{
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-content:stretch;
  color:#fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  max-width: 88%;
}
.promo-item h3{
  font-size: clamp(16px, 2.8vw, 22px) !important;
  margin: 0 0 4px 0 !important;
}
.promo-item .descripcion-general{
  font-size: clamp(13px, 2.2vw, 16px) !important;
  opacity: .95;
}

/* Precio burbuja arriba-derecha */
.promo-item .valor-general{
  position:absolute;
  top: 10px; right: 10px;
  margin:0 !important;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

/* Chips al fondo, si existen */
.promo-item .presentaciones{
  align-self:end;
  max-width:88%;
}
.promo-item .presentacion{
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.55);
}

/* Ajuste en pantallas chicas */
@media (max-width: 680px){
  .promo-item{
    width: clamp(220px, 70vw, 320px);
    height: clamp(140px, 38vw, 190px);
  }
}

/* ===== Logo encabezado ===== */
.logo-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.logo-img{
  width: 40%;
  max-width: 260px;
  height: auto;
}