/* ============================================================
   CARTA DINÁMICA - LO DE FACU (28/08/2026)
   Reemplaza las 5 imágenes fijas (imgsMenu/*.jpg) por HTML real
   generado desde menuLDF.json. No toca estilos8.css existente.
   ============================================================ */

@font-face {
  font-family: 'Uni Sans Book';
  src: url('fonts/UniSansBook.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Uni Sans SemiBold';
  src: url('fonts/UniSansSemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root{
  --ldf-rojo: #B8222C;
  --ldf-negro-guarda: #3a3634;
  --ldf-texto: #1E1E1E;
  --ldf-texto-dim: #6E6C6C;
}

html, body{
  overflow-x: hidden; /* red de seguridad: nada debe generar scroll horizontal */
  max-width: 100%;
  margin: 0; /* sin esto el navegador le pone ~8px de margen por defecto al body,
                y las guardas/imágenes de ancho completo quedan corridas del borde */
  padding: 0;
}

.carta-wrap{
  width: 100%;
  max-width: 100%;
  background: #FFFFFF;
  overflow: hidden;
}

.carta-modulo{
  position: relative;
  width: 100%;
  max-width: 100%;
  background: #FFFFFF;
  overflow: hidden;
  contain: paint; /* refuerza el recorte: nada de adentro pinta afuera del módulo, ni rotado */
  padding-bottom: 18px;
}

/* Guarda superior (banda roja ondulada) */
.carta-modulo .guarda-top{
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px; /* evita línea blanca entre guarda y módulo */
}

/* Logo LDF como marca de agua: ahora vive DENTRO de .carta-contenido (que
   arranca recién después de la guarda en el flujo normal), así nunca
   puede quedar por encima de ella - el límite lo marca la guarda.
   "contain:paint" en .carta-modulo recorta lo que sobresalga del módulo
   (a la derecha, a propósito) para que no genere scroll horizontal. */
.carta-modulo .logo-marca{
  position: absolute;
  top: 0;
  right: 0; /* borde derecho del logo alineado exacto al borde derecho de la página/guarda */
  width: 58%;
  max-width: 520px;
  opacity: 0.10;
  transform: rotate(30deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.carta-contenido{
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 10px;
  overflow: hidden; /* la marca de agua nunca pisa la guarda de arriba */
}

.carta-contenido-inner{
  position: relative;
  z-index: 1;
}

/* Un módulo puede agrupar varios bloques (ej. Bebidas + Cerveza +
   Cafetería bajo una sola guarda/logo) - separación entre ellos */
.carta-bloque + .carta-bloque{
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #EFE8E5;
}

/* Cada título tiene proporciones (ancho/alto) distintas según la palabra,
   así que se normaliza por ALTURA fija (no por ancho) - así todos pesan
   visualmente igual sin importar si el texto es corto o largo. */
.carta-titulo{
  display: block;
  height: 60px;
  width: auto;
  max-width: 90%;
  margin: 8px 0 14px;
}
.carta-titulo.doble{
  height: 42px;
  margin-bottom: 0;
}
.carta-titulo.doble + .carta-titulo.doble{
  height: 60px;
  margin-top: 2px;
  margin-bottom: 14px;
}

.carta-item{
  margin-bottom: 10px;
}

.carta-item .item-nombre{
  font-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--ldf-texto);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
  margin-bottom: 2px;
}

.carta-item .badge-icono{
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}

/* Fila de detalle+precio (o nombre+precio si no hay detalle): flexbox con
   align-items:flex-end - el precio SIEMPRE queda pegado al borde derecho
   de la fila (columna angosta, ancho fijo), y si el detalle se envuelve a
   2-3 líneas, el precio se alinea con la ÚLTIMA línea (abajo), nunca
   flotando arriba con un hueco en blanco debajo. position:relative para
   que .item-puntos-abs (los puntos, posicionados por JS) se ubique en
   relación a esta fila. */
.carta-item .item-fila{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: relative;
}
.carta-item .item-fila + .item-fila{
  margin-top: 4px;
}

.carta-item .item-detalle{
  font-family: 'Uni Sans Book', Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--ldf-texto-dim);
  text-transform: uppercase;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}

/* Nombre del producto cuando va como primera "palabra" de una fila sin
   detalle propio (ej. "TIRAS DE POLLO ... $X") - mismo tratamiento que
   item-nombre pero dentro de la fila flex, para que ocupe la columna
   izquierda igual que el detalle. */
.item-fila .item-nombre-inline{
  font-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--ldf-texto);
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}
.item-fila .item-nombre-inline .badge-icono{
  vertical-align: middle;
  margin: 0 2px 4px 4px;
}

/* Puntos suspensivos: posicionados por JS (ajustarPuntosDeCarta) con
   position:absolute, left/top/width/height puestos inline por fila - NO
   participan del flujo normal del texto, así que nunca pueden empujar el
   precio a otra línea (a diferencia de insertarlos como texto real, que
   se rompía si el cálculo no daba exacto). Arrancan ocultos
   (display:none) hasta que JS calcula dónde van; overflow:hidden recorta
   el contenido repetido de sobra. */
.item-puntos-abs{
  display: none;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Uni Sans Book', Arial, sans-serif;
  font-size: 20px;
  color: #C9C4C1;
  letter-spacing: 2px;
}
.item-puntos-abs::after{
  content: "........................................................................................................................";
}

/* Ancho fijo + alineado a la derecha: así el límite izquierdo de la
   columna de precio (donde terminan los puntos) queda siempre en el
   mismo lugar entre filas, sin importar si el precio es "$9.000" o
   "$120.000" - columnas de precio prolijamente alineadas entre sí. */
.carta-item .item-precio{
  font-family: 'Uni Sans SemiBold', Arial, sans-serif;
  font-weight: 600;
  font-size: 25px;
  color: var(--ldf-texto);
  white-space: nowrap;
  flex: none;
  min-width: 96px;
  text-align: right;
}

/* Guarda inferior (franja divisoria con dibujitos) - cierra el último módulo */
.carta-guarda-inf{
  display: block;
  width: 100%;
  height: auto;
}

/* Unión de módulos: guarda oscura (cierre) + guarda roja (apertura del
   siguiente) ya combinadas en una sola pieza sin costura */
.carta-union{
  display: block;
  width: 100%;
  height: auto;
  margin-top: -1px;
}

@media (max-width: 640px){
  .carta-contenido{ padding: 4px 16px 6px; }
  .carta-titulo{ height: 50px; max-width: 92%; }
  .carta-titulo.doble{ height: 36px; }
  .carta-titulo.doble + .carta-titulo.doble{ height: 50px; }
  .carta-item .item-nombre{ font-size: 32px; }
  .item-fila .item-nombre-inline{ font-size: 32px; }
  .carta-item .item-detalle{ font-size: 22px; }
  .carta-item .item-leader{ font-size: 22px; }
  .item-puntos-abs{ font-size: 22px; }
  .carta-item .item-precio{ font-size: 29px; min-width: 120px; }
  .carta-modulo .logo-marca{ width: 75%; right: -15%; opacity: .08; }
}