/* ============================================================
   PUNTO LOCO - Comida Diferente
   Estilos. Colores y letras sacados de las cartas impresas y del logo
   (medidos contando pixeles el 25-sep-2026):
      amarillo de las cartas y el logo   #FFC20E
      rojo de "Punt" en el logo           #E3141B
      naranja de "LoCo"                   #F7561B
      negro de tiza de la carta de noche  #232323
      crema de MICHELADAS LOCAS           #FCE6B6
      azul de CARNES Y ASADOS             #353B52
   Las letras de las cartas son de pago; en Google Fonts estas son las
   mas parecidas:
      Oswald     -> ESPECIALIDADES, SALCHIPAPAS, SOPAS Y CALDERITOS
      Rye        -> CARNES Y ASADOS, PARRILLAS
      Lilita One -> EN PUNTO LOCO SE COME BACANO, precios, botones
      Lobster    -> Hot Dogs, Shawarma, "Comida Diferente"
   Almuerzos sobre BLANCO y cena sobre NEGRO: lo pidio Gabriel.
   ============================================================ */

:root{
  --amarillo:#FFC20E;
  --amarillo-claro:#FFE9A3;
  --rojo:#E3141B;
  --rojo-oscuro:#B30E14;
  --naranja:#F7561B;
  --negro:#161616;
  --pizarra:#232323;
  --crema:#FCE6B6;
  --azul-carta:#353B52;
  --gris:#6B6B6B;
  --gris-claro:#F4F4F4;
  --borde:#E6E6E6;
  --blanco:#FFFFFF;
  --verde:#178A4A;
  --verde-wa:#25D366;
  --neon-rosa:#FF3D9A;
  --neon-azul:#2BE3FF;
  --sombra:0 2px 8px rgba(0,0,0,.08);
  --sombra-alta:0 12px 28px rgba(0,0,0,.16);
  --radio:16px;
  --ancho:1200px;
  --fuente:'Outfit','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --titulo:'Oswald','Arial Narrow','Segoe UI',sans-serif;
  --gorda:'Lilita One','Arial Black','Segoe UI',sans-serif;
  --script:'Lobster','Brush Script MT',cursive;
  --vaquero:'Rye',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fuente);background:var(--blanco);color:var(--negro);
  line-height:1.5;overflow-x:hidden;
}
.ico-svg{display:inline-block;vertical-align:middle;flex-shrink:0}
.aviso .ico-svg{margin-top:1px}
/* height:auto: las imagenes llevan width y height en el html (para que la
   pagina no brinque mientras cargan), y sin esta regla, al darles solo el
   ancho por CSS se quedaban con el alto del html y salian ESTIRADAS (el logo
   del pie se veia de 150x190 en vez de 150x67; lo vio Gabriel el 25-sep). */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.oculto{display:none !important}

/* ---------------- Cabecera ---------------- */
.cabecera{position:sticky;top:0;z-index:900;background:var(--blanco);border-bottom:1px solid var(--borde)}
.cabecera-fila{display:flex;align-items:center;gap:16px;height:78px}
/* El logo va en su cuadro amarillo, como en Instagram: sobre blanco
   se lee de una y no hubo que recortarle el fondo (el naranja de
   "LoCo" se parece mucho al amarillo y se dañaba al quitarlo). */
.logo{display:flex;align-items:center;flex-shrink:0;background:var(--amarillo);border-radius:12px;padding:4px 8px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.logo img{height:48px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:9px 14px;border-radius:999px;font-weight:600;font-size:15px;transition:background .15s}
.nav a:hover{background:var(--gris-claro)}
.nav a.activo{background:var(--amarillo)}
.btn-carrito{
  position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;
  background:var(--rojo);color:#fff;padding:10px 18px;border-radius:999px;
  font-family:var(--gorda);font-size:16px;letter-spacing:.3px;
  box-shadow:0 3px 0 var(--rojo-oscuro);transition:transform .15s;
}
.btn-carrito:hover{transform:translateY(-2px)}
.burbuja{
  position:absolute;top:-7px;right:-7px;background:var(--amarillo);color:var(--negro);
  font-family:var(--fuente);font-size:11px;font-weight:800;min-width:21px;height:21px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 5px;
  box-shadow:0 0 0 2px #fff;
}
.menu-movil{display:none;padding:4px 6px;-webkit-tap-highlight-color:transparent}
.menu-movil .ico-burger{display:block;transition:transform .2s}
.menu-movil:active .ico-burger{transform:scale(.88) rotate(-6deg)}
.menu-movil[aria-expanded="true"] .ico-burger{transform:rotate(-10deg) scale(1.06)}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:16px;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-primario{background:var(--rojo);color:#fff}
.btn-primario:hover{background:var(--rojo-oscuro);transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.btn-secundario{background:var(--amarillo);color:var(--negro)}
.btn-secundario:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.btn-wa{background:var(--verde-wa);color:#fff}
.btn-wa:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.btn-borde{background:#fff;color:var(--negro);border:2px solid var(--borde)}
.btn-borde:hover{border-color:var(--negro)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none !important}

/* ---------------- Hero de la portada ----------------
   Una foto (o el video, cuando Gabriel lo haga en Flow) a pantalla
   completa: arriba el titulo animado con la letra del logo y abajo el
   boton CARTA.
   La escena (Gabriel, 25-sep): al bajar, la foto se queda quieta el
   trecho de .hero-pista mientras el humo sube de la comida y las luces
   del fondo se acercan; despues la pagina baja normal. js/hero-escena.js
   pone --p (0 a 1) segun cuanto se ha bajado. */
.hero-pista{position:relative;height:calc(200svh - 78px - 30svh)}
.hero-video{
  position:sticky;top:78px;overflow:hidden;height:calc(100svh - 78px);
  display:flex;align-items:flex-end;background:#000 center/cover no-repeat;
}
.hero-video-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La capa tiene la forma exacta de la foto (igual que background:cover),
   asi el humo y las luces caen donde estan en la foto. */
.hero-capa{
  position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:max(100%, calc((100svh - 78px) * var(--ar, 1.7778)));aspect-ratio:var(--ar, 1.7778);
  background:center/100% 100% no-repeat;
  transform:translate(-50%,-50%) scale(calc(1 + var(--p, 0) * .08));will-change:transform;
}
.hero-luces{
  position:absolute;inset:0;opacity:0;background:center/100% 100% no-repeat;
  transform-origin:var(--lx) var(--ly);transform:scale(calc(1 + var(--p, 0) * .38));will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse var(--lrx) var(--lry) at var(--lx) var(--ly),#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse var(--lrx) var(--lry) at var(--lx) var(--ly),#000 40%,transparent 100%);
}
.hero-luces.activa{opacity:1}
.hero-humos{position:absolute;inset:0;opacity:calc(.55 + var(--p, 0) * .45)}
.humo{
  position:absolute;width:calc(10% * var(--e, 1));aspect-ratio:140/340;transform-origin:50% 100%;
  transform:translate(-50%,-100%) scale(calc(1 + var(--p, 0) * .9));
}
.humo i{
  position:absolute;inset:0;opacity:0;background:url(../img/humo-1.png) center/100% 100% no-repeat;
  animation:humoSube 4.4s linear infinite;animation-delay:var(--d, 0s);
}
.humo i:nth-child(2){background-image:url(../img/humo-2.png)}
.humo i:nth-child(3){background-image:url(../img/humo-3.png)}
@keyframes humoSube{
  0%{opacity:0;transform:translateY(14%) scale(.65,.8)}
  25%{opacity:.9}
  70%{opacity:.5}
  100%{opacity:0;transform:translateY(-36%) scale(1.15,1.2)}
}
.escena-quieta .humo i{animation-play-state:paused}
.hero-video::before{
  content:'';position:absolute;left:0;right:0;top:0;height:48%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));
}
.hero-video::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:45%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));
}
.hero-video-texto{
  position:absolute;inset:0;z-index:2;display:flex;
  padding:clamp(18px,4.5vh,46px) 0 calc(34px + env(safe-area-inset-bottom,0px));
}
.hero-video-texto .contenedor{
  width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:18px;
}
.hero-marca{max-width:640px}
.hero-marca .hero-logo{width:min(250px,56vw);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.45);margin-bottom:16px}
.hero-titulo{margin:0;line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.titulo-vivo{display:block;width:min(600px,50vw);height:auto;overflow:visible;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.titulo-vivo .lt-l{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:lvCae .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(250ms + var(--i) * 55ms);
}
.titulo-vivo.lt-listo .lt-l{animation:none}
.titulo-vivo.lt-listo.lt-ola .lt-l{animation:lvSalta .62s ease-out both;animation-delay:calc(var(--i) * 40ms)}
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-sub{
  margin-top:12px;color:#fff;font-size:clamp(15px,2.2vw,19px);font-weight:600;line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.9);max-width:36ch;
}
/* El boton CARTA: en la Terraza la gente mayor tocaba el video y no
   encontraba nada. Aqui va desde el principio. */
.btn-carta-hero{
  align-self:flex-end;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;
  background:var(--amarillo);color:var(--rojo);
  font-family:var(--gorda);font-size:clamp(26px,3vw,34px);letter-spacing:.06em;line-height:1;
  padding:17px 34px 14px;border-radius:16px;
  box-shadow:0 6px 0 var(--rojo-oscuro),0 16px 30px rgba(0,0,0,.5);
  animation:llamarCarta 2.6s ease-in-out infinite;
}
.btn-carta-hero svg{width:.85em;height:.85em;margin-top:-3px}
.btn-carta-hero:active{animation:none;transform:translateY(4px);box-shadow:0 2px 0 var(--rojo-oscuro)}
@keyframes llamarCarta{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------------- Categorias (chips con foto) ---------------- */
.barra-categorias{position:sticky;top:78px;z-index:800;background:var(--blanco);border-bottom:1px solid var(--borde)}
.chips{
  display:flex;gap:6px;overflow-x:auto;padding:10px 20px 0;max-width:var(--ancho);margin:0 auto;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 12px 0;min-width:100px;font-weight:600;font-size:13.5px;text-align:center;line-height:1.25;
  border-bottom:4px solid transparent;transition:border-color .18s;
}
.chip-foto{width:62px;height:62px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.chip-foto img{width:100%;height:100%;object-fit:contain;transition:transform .22s}
.chip:hover .chip-foto img{transform:scale(1.12)}
.chip-texto{padding-bottom:9px;white-space:nowrap}
.chip.activo{border-bottom-color:var(--amarillo)}
.chip.activo .chip-texto{font-weight:800}
.chips-grupo{display:none}
.chips-grupo.viendo{display:contents}

/* De noche y en micheladas: etiquetas como las de la carta impresa */
.barra-categorias.de-noche{background:#0B0B0B;border-bottom-color:#262626}
.barra-categorias.de-noche .chips{min-height:106px;align-items:center;padding-bottom:10px}
.eti-carta{
  flex-shrink:0;font-family:var(--gorda);font-size:16.5px;letter-spacing:.3px;
  padding:10px 20px;border-radius:8px;background:var(--amarillo);color:var(--negro);
  transform:skewX(-7deg);box-shadow:3px 3px 0 var(--rojo);white-space:nowrap;
  transition:transform .14s, box-shadow .14s;
}
.eti-carta span{display:inline-block;transform:skewX(7deg)}
.eti-carta:hover{transform:skewX(-7deg) translateY(-2px)}
.eti-carta.activo{background:var(--rojo);color:var(--amarillo);box-shadow:3px 3px 0 var(--amarillo)}
.eti-carta.neon{background:transparent;color:var(--crema);border:2px solid var(--neon-rosa);
  box-shadow:0 0 10px rgba(255,61,154,.55),inset 0 0 8px rgba(255,61,154,.35)}
.eti-carta.neon.activo{background:var(--neon-rosa);color:#fff}

/* Carta de noche: las etiquetas con la letra del logo (Gabriel, 25-sep:
   "que no se parezcan a la Terraza"). Rectangulo derecho y amarillo, como
   el cuadro del logo en la cabecera, y la letra en degradado rojo con
   filete blanco y borde negro, como "Punt". La que se esta viendo va en
   rojo con la letra naranja, como "LoCO". Gabriel escogio esta (la "A")
   entre esta y solo la letra sobre el negro. */
.eti-carta.eti-logo{
  transform:none;background:var(--amarillo);border-radius:10px;padding:7px 15px 8px;
  box-shadow:0 3px 0 rgba(0,0,0,.45);font-size:19px;letter-spacing:.5px;text-transform:uppercase;line-height:1.15;
}
.eti-carta.eti-logo:hover{transform:translateY(-2px)}
.eti-carta.eti-logo span{transform:none}
.eti-carta .eti-letra{display:inline-grid}
.eti-carta .eti-letra>span{grid-area:1/1;white-space:nowrap}
.eti-letra .k{color:#000;-webkit-text-stroke:6px #000}
.eti-letra .w{color:#fff;-webkit-text-stroke:3px #fff}
.eti-letra .f{
  background:linear-gradient(#FF3B2B,#FE0002 28%,#F10003 72%,#C00A0E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eti-carta.eti-logo.activo{background:var(--rojo);box-shadow:0 3px 0 var(--amarillo)}
.eti-carta.eti-logo.activo .f{
  background-image:linear-gradient(#FFCB22,#FFA306 16%,#FF6E02 42%,#FE4F02 70%,#EF3B05);
}

.chips-mas{
  position:absolute;top:0;bottom:1px;right:max(0px, calc((100% - var(--ancho)) / 2));
  display:flex;align-items:center;gap:3px;padding:0 12px 0 36px;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--blanco) 46%);
  color:var(--rojo);font-family:var(--gorda);font-size:15px;
}
.chips-mas svg{animation:empujar 1.4s ease-in-out infinite}
@keyframes empujar{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.barra-categorias.de-noche .chips-mas{background:linear-gradient(90deg,rgba(11,11,11,0),#0B0B0B 46%);color:var(--amarillo)}

/* ---------------- Rejilla de categorias (portada) ---------------- */
.rejilla-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-tarjeta{
  background:var(--blanco);border-radius:var(--radio);padding:20px 12px 22px;text-align:center;
  border:1px solid var(--borde);transition:transform .2s, box-shadow .2s;
}
.cat-tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.cat-foto{width:min(200px,78%);aspect-ratio:1;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cat-foto img{width:100%;height:100%;object-fit:contain;transition:transform .25s}
.cat-tarjeta:hover .cat-foto img{transform:scale(1.08)}
.cat-tarjeta h3{font-family:var(--titulo);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.3px}
.cat-tarjeta p{font-size:12.5px;color:var(--gris);margin-top:2px}
.cat-tarjeta.de-noche{background:#000;border-color:#222}
.cat-tarjeta.de-noche h3{color:#fff}
.cat-tarjeta.de-noche p{color:#9A9A9A}
.cat-tarjeta .ico{
  width:74px;height:74px;margin:0 auto 12px;border-radius:50%;background:var(--gris-claro);
  display:flex;align-items:center;justify-content:center;
}
.cat-tarjeta .ico.paso{background:var(--amarillo);font-family:var(--gorda);font-size:34px}

/* ---------------- Secciones ---------------- */
.seccion{padding:48px 0;scroll-margin-top:190px}
.seccion-titulo{
  font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,42px);letter-spacing:.4px;line-height:1.05;margin-bottom:6px;
}
.seccion-sub{color:var(--gris);font-size:15px;margin-bottom:24px}

/* ---------------- Tarjetas de plato (almuerzo: blancas, como McDonald's) ---------------- */
.rejilla-platos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.plato{
  position:relative;background:var(--blanco);border-radius:var(--radio);border:1px solid var(--borde);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.plato:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta)}
.plato-foto{position:relative;aspect-ratio:1/1;background:var(--blanco);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.plato-foto img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.plato:hover .plato-foto img{transform:scale(1.05)}
.etiqueta{
  position:absolute;top:12px;left:12px;z-index:1;background:var(--rojo);color:#fff;
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.3px;
}
.etiqueta.se-acabo{background:var(--negro)}
.etiqueta.solo-sede{left:auto;right:12px;background:var(--amarillo);color:var(--negro)}
.plato-cuerpo{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.personas{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-bottom:6px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--amarillo-claro);color:#6B4E00;padding:3px 9px;border-radius:999px;
}
.plato-nombre{font-size:16.5px;font-weight:800;line-height:1.22;margin-bottom:5px}
.plato-desc{font-size:13px;color:var(--gris);line-height:1.42;margin-bottom:10px;flex:1}
.plato-precio{font-family:var(--gorda);font-size:23px;color:var(--rojo);margin-bottom:10px;letter-spacing:.3px}
.plato-acciones{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.btn-personalizar{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:10px;
  border-radius:999px;background:#fff;color:var(--negro);border:2px solid var(--negro);
  font-weight:700;font-size:13.5px;transition:background .15s,color .15s;
}
.btn-personalizar:hover{background:var(--negro);color:#fff}
.btn-agregar{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:12px;
  border-radius:999px;background:var(--amarillo);color:var(--negro);
  font-family:var(--gorda);font-size:16px;letter-spacing:.4px;
  box-shadow:0 3px 0 #C99400;transition:transform .15s;
}
.btn-agregar:hover{transform:translateY(-2px)}
.btn-agregar:active{transform:translateY(2px);box-shadow:0 1px 0 #C99400}

/* Tamaño en la misma tarjeta: Entero / Medio, 700 g / 500 g */
.variantes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.var{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-radius:12px;
  border:2px solid var(--borde);background:#fff;transition:all .15s;
}
.var b{font-size:13px;font-weight:800}
.var small{font-size:12px;color:var(--gris);font-weight:600}
.var.activa{border-color:var(--negro);background:var(--amarillo)}
.var.activa small{color:var(--negro)}

/* Papa o yuca, Light o Negra... se escoge en la tarjeta */
.eleccion{margin-bottom:10px;border-radius:12px;transition:box-shadow .2s}
.eleccion-titulo{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:5px;text-align:center}
/* Van en cajitas como el tamaño (no en pildoras) para que no se
   confundan con los ingredientes que se tachan, que si son pildoras. */
.eleccion-ops{display:flex;flex-wrap:wrap;gap:6px}
.op{
  flex:1 1 calc(50% - 6px);font-size:13px;font-weight:800;padding:8px 4px;border-radius:12px;
  border:2px solid var(--borde);background:#fff;transition:all .15s;line-height:1.15;
}
.op.activa{background:var(--amarillo);border-color:var(--negro);color:var(--negro)}
.eleccion.llamar{animation:llamar .5s ease 2;box-shadow:0 0 0 3px rgba(227,20,27,.45)}
@keyframes llamar{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Ingredientes que se pueden quitar: se tachan al tocarlos */
.quitables{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:5px}
.ing{
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--gris-claro);
  border:1px solid var(--borde);transition:all .15s;
}
.ing:hover{border-color:var(--negro)}
.ing.fuera{text-decoration:line-through;opacity:.45;background:transparent;color:var(--gris)}
.ayuda-ing{display:block;text-align:center;margin-bottom:10px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rojo)}

/* Un plato que a esta hora no se pide: la foto NO se toca (comida en
   gris se ve dañada); solo cambian los botones. */
.plato-cerrado{display:flex;flex-direction:column;gap:9px;align-items:center;margin-top:auto}
.plato-cerrado .cuando{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;width:100%;padding:10px 12px;
  border-radius:999px;border:1px solid var(--borde);background:var(--gris-claro);color:var(--gris);
  font-size:12.5px;font-weight:600;text-align:center;
}
.plato-cerrado .salidas{display:flex;flex-direction:column;gap:4px;align-items:center}
.salida{font-size:13px;font-weight:700;padding:3px 6px;border-bottom:1px solid transparent}
.salida.ahora{color:var(--rojo)}
.salida.manana{color:var(--verde)}
.salida:hover{border-bottom-color:currentColor}
.plato-agotado{
  margin-top:auto;padding:11px 10px;border-radius:999px;text-align:center;background:var(--gris-claro);
  color:var(--gris);border:1px dashed #CFCFCF;font-size:13px;font-weight:700;
}

/* ==================================================================
   LAS TRES CARTAS
   ================================================================== */
#lista-menu:empty{min-height:130vh}
body.carta-noche{background:#000}
body.carta-noche .cinta-reloj{margin-top:18px}
.momento{margin:0;scroll-margin-top:190px}
.momento-cabeza{text-align:center;padding:34px 0 10px}
.momento-titulo{font-family:var(--titulo);font-weight:700;text-transform:uppercase;line-height:1;margin:0}
.momento-lema{font-size:clamp(15px,2.4vw,19px);font-weight:600;margin-top:8px}
.momento-datos{margin-top:14px}
.momento-estado{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:7px 16px;border-radius:999px;
}
.momento-estado.abierto{background:var(--verde);color:#fff}
.momento-estado .punto,.cinta-reloj .punto{
  width:8px;height:8px;border-radius:50%;background:#A6F5C6;animation:latir 2s ease-in-out infinite;
}
@keyframes latir{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.momento-estado.cerrado{background:var(--gris-claro);color:var(--gris);border:1px solid var(--borde)}
.momento-nota{font-size:13.5px;color:var(--gris);margin-top:10px}

/* ---------- ALMUERZOS: sobre blanco, titulo con la franja amarilla ---------- */
.m-dia{
  background:var(--blanco);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:10px calc(50vw - 50%) 30px;
}
.m-dia .momento-titulo{
  display:inline-block;font-size:clamp(46px,9vw,88px);color:var(--negro);
  background:var(--amarillo);padding:4px 26px 8px;transform:rotate(-1.5deg);
  box-shadow:6px 6px 0 var(--negro);
}
.m-dia .momento-lema{margin-top:18px}
.m-dia .seccion-titulo{
  display:inline;background:linear-gradient(transparent 60%,var(--amarillo) 60%);padding:0 4px;
}
.m-dia .seccion-titulo + .seccion-sub{margin-top:10px}
.m-dia .tit-vaquero .seccion-titulo{font-family:var(--vaquero);font-weight:400;color:var(--azul-carta);text-transform:uppercase;letter-spacing:1px}

/* ---------- CENA: sobre negro, el plato flotando ---------- */
.m-noche,.m-neon{
  background:#000;color:#F2F2F2;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:10px calc(50vw - 50%) 40px;
}
.m-noche .momento-titulo{
  font-family:var(--gorda);font-weight:400;color:var(--amarillo);font-size:clamp(54px,11vw,110px);
  letter-spacing:2px;text-shadow:5px 5px 0 var(--rojo);
}
.m-noche .momento-lema.bacano{font-family:var(--gorda);color:#fff;font-size:clamp(20px,3.6vw,30px);text-transform:uppercase;letter-spacing:.5px;text-shadow:3px 3px 0 #000}
.m-noche .momento-nota,.m-neon .momento-nota{color:#9C9C9C}
.m-noche .momento-estado.cerrado,.m-neon .momento-estado.cerrado{background:#151515;color:#9C9C9C;border-color:#2B2B2B}
.m-noche .seccion-titulo{color:#fff}
.m-noche .seccion-sub,.m-neon .seccion-sub{color:#9C9C9C}
.m-noche .tit-burger .seccion-titulo{
  font-family:var(--gorda);font-weight:400;color:var(--rojo);letter-spacing:2px;
  -webkit-text-stroke:1.5px #FF8A7A;text-shadow:3px 3px 0 #000,5px 5px 0 rgba(227,20,27,.45);
}
.m-noche .tit-script .seccion-titulo{font-family:var(--script);font-weight:400;text-transform:none;font-size:clamp(40px,6vw,58px);letter-spacing:0}
.m-noche .tit-vaquero .seccion-titulo{font-family:var(--vaquero);font-weight:400;letter-spacing:1.5px}

.m-noche .plato,.m-neon .plato{background:transparent;border:0;border-radius:0;overflow:visible;text-align:center}
.m-noche .plato:hover,.m-neon .plato:hover{transform:none;box-shadow:none}
.m-noche .plato-foto,.m-neon .plato-foto{background:transparent;overflow:visible}
.m-noche .plato:hover .plato-foto img,.m-neon .plato:hover .plato-foto img{transform:translateY(-8px) scale(1.03)}
.m-noche .plato-nombre,.m-neon .plato-nombre{color:#fff}
.m-noche .plato-desc,.m-neon .plato-desc{color:#9C9C9C}
.m-noche .plato-precio{color:var(--amarillo)}
.m-noche .personas,.m-neon .personas{align-self:center;background:rgba(255,194,14,.16);color:var(--amarillo)}
.m-noche .ing,.m-neon .ing{background:rgba(255,194,14,.1);color:#EDE0B8;border-color:rgba(255,194,14,.28)}
.m-noche .ing.fuera,.m-neon .ing.fuera{background:transparent;color:#777;border-color:#333}
.m-noche .ayuda-ing{color:var(--amarillo)}
.m-noche .btn-personalizar,.m-neon .btn-personalizar{background:transparent;color:#fff;border-color:#fff}
.m-noche .btn-personalizar:hover,.m-neon .btn-personalizar:hover{background:#fff;color:#000}
.m-noche .var,.m-neon .var{background:transparent;border-color:#3A3A3A;color:#fff}
.m-noche .var small,.m-neon .var small{color:#9C9C9C}
.m-noche .var.activa,.m-neon .var.activa{background:var(--amarillo);border-color:var(--amarillo);color:#000}
.m-noche .var.activa small,.m-neon .var.activa small{color:#000}
.m-noche .eleccion-titulo,.m-neon .eleccion-titulo{color:#9C9C9C}
.m-noche .op,.m-neon .op{background:transparent;border-color:#3A3A3A;color:#fff}
.m-noche .op.activa,.m-neon .op.activa{background:var(--amarillo);border-color:var(--amarillo);color:#000}
.m-noche .plato-cerrado .cuando,.m-neon .plato-cerrado .cuando{background:#151515;border-color:#2B2B2B;color:#9C9C9C}
.m-noche .salida.ahora,.m-neon .salida.ahora{color:var(--amarillo)}
.m-noche .salida.manana,.m-neon .salida.manana{color:#7FE0A8}
.m-noche .plato-agotado,.m-neon .plato-agotado{background:#151515;border-color:#2B2B2B;color:#9C9C9C}
.m-noche .etiqueta.se-acabo,.m-neon .etiqueta.se-acabo{background:#fff;color:#000}
/* La sombra de abajo: es lo que hace que el plato parezca flotar */
.m-noche .plato-foto::after,.m-neon .plato-foto::after{
  content:'';position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:50%;height:14px;
  border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.9) 0%,transparent 70%);filter:blur(7px);
}

/* ---------- MICHELADAS LOCAS: negro con neon ---------- */
.m-neon{
  background:
    radial-gradient(900px 420px at 15% 0%,rgba(255,61,154,.18),transparent 60%),
    radial-gradient(900px 420px at 85% 10%,rgba(43,227,255,.14),transparent 60%),
    #050505;
}
.neon-titulo{
  font-family:var(--gorda);font-weight:400;color:var(--crema);font-size:clamp(50px,10vw,100px);
  letter-spacing:2px;text-shadow:0 0 6px rgba(255,61,154,.9),0 0 22px rgba(255,61,154,.7),0 0 44px rgba(255,61,154,.45);
}
.neon-titulo span{color:#fff;text-shadow:0 0 6px rgba(43,227,255,.9),0 0 22px rgba(43,227,255,.65),0 0 44px rgba(43,227,255,.4)}
.m-neon .momento-lema{color:var(--crema)}
.m-neon .seccion-titulo{color:var(--crema);font-family:var(--gorda);font-weight:400;letter-spacing:1px;text-shadow:0 0 12px rgba(255,61,154,.55)}
.m-neon .plato-precio{color:var(--neon-azul);text-shadow:0 0 10px rgba(43,227,255,.5)}
.m-neon .ayuda-ing{color:var(--neon-rosa)}

@media (max-width:720px){
  .momento{scroll-margin-top:160px}
  .momento-cabeza{padding:24px 0 6px}
  .barra-categorias.de-noche .chips{min-height:92px;padding-bottom:8px}
}

/* ---------- la cinta viva del horario ---------- */
.cinta-reloj{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;
  background:linear-gradient(90deg,var(--rojo),var(--rojo-oscuro));color:#fff;font-size:14px;font-weight:600;
  padding:12px 18px;border-radius:999px;margin:22px 0 4px;
}
.cinta-reloj b{font-family:var(--gorda);font-weight:400;letter-spacing:.4px}
.cinta-reloj .queda{color:var(--amarillo);font-weight:700}
.cinta-reloj.apura{background:linear-gradient(90deg,#C77700,var(--rojo))}
.cinta-reloj.cerrada{background:#2A2A2A;color:#E8E8E8}

/* ---------------- Ventanas (modal) ----------------
   OJO con el z-index: el carrito esta en 1100 y su fondo en 1050. Si
   una ventana queda por debajo, se abre DETRAS del carrito y parece que
   el boton no hace nada (paso en la Terraza). */
.capa{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1300;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .2s;
}
.capa.abierta{opacity:1;pointer-events:auto}
.modal{
  background:#fff;border-radius:var(--radio);width:100%;max-width:540px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;transform:translateY(20px);transition:transform .25s;
}
.capa.abierta .modal{transform:translateY(0)}
.modal-cab{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--borde);flex-shrink:0}
.modal-cab h3{font-size:19px;font-weight:800;flex:1}
.cerrar{
  width:36px;height:36px;border-radius:50%;background:var(--gris-claro);display:flex;align-items:center;justify-content:center;
  transition:background .15s;flex-shrink:0;
}
.cerrar:hover{background:#E2E2E2}
.modal-cuerpo{padding:20px;overflow-y:auto;flex:1}
.modal-pie{padding:14px 20px;border-top:1px solid var(--borde);display:flex;align-items:center;gap:14px;flex-shrink:0;background:#fff}
.modal-pie .total{font-family:var(--gorda);font-size:24px;color:var(--rojo);flex:1}
.modal-foto{width:100%;aspect-ratio:16/10;object-fit:contain;background:#fff;margin-bottom:12px;border-radius:12px}
.modal-foto.de-noche{background:#000}
.modal-desc{color:var(--gris);font-size:14.5px;margin-bottom:20px}
.grupo{margin-bottom:22px}
.grupo-titulo{font-size:16px;font-weight:800;margin-bottom:2px}
.grupo-ayuda{font-size:12.5px;color:var(--gris);margin-bottom:10px}
.grupo-error{font-size:12.5px;color:var(--rojo);font-weight:700;margin-bottom:8px}
.opcion{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:2px solid var(--borde);
  margin-bottom:7px;cursor:pointer;transition:border-color .15s, background .15s;
}
.opcion:hover{border-color:#C9C9C9;background:#FAFAFA}
.opcion.marcada{border-color:var(--amarillo);background:#FFFBEA}
.opcion input{width:20px;height:20px;accent-color:var(--rojo);cursor:pointer;flex-shrink:0}
.opcion-nombre{flex:1;font-size:15px;font-weight:600}
.opcion-precio{font-size:14px;font-weight:700;color:var(--gris)}
.quitar-lista{display:flex;flex-wrap:wrap;gap:9px}
.quitar-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:2px solid var(--borde);
  background:#fff;font-size:14px;font-weight:600;transition:all .15s;user-select:none;
}
.quitar-chip.quitado{border-color:var(--rojo);background:#FFF1F1;color:var(--rojo);text-decoration:line-through}
.quitar-chip:not(.quitado) .marca{color:#3FA465}
.cantidad{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--borde);border-radius:999px;padding:4px}
.cantidad button{width:34px;height:34px;border-radius:50%;font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cantidad button:hover{background:var(--gris-claro)}
.cantidad span{min-width:30px;text-align:center;font-weight:800;font-size:16px}
.notas{width:100%;border:2px solid var(--borde);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;resize:vertical;min-height:70px}
.notas:focus{outline:none;border-color:var(--amarillo)}

/* ---------------- Carrito ---------------- */
.panel{
  position:fixed;top:0;right:0;height:100dvh;width:100%;max-width:450px;background:#fff;z-index:1100;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.18);
}
.panel.abierto{transform:translateX(0)}
.panel-fondo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
.panel-fondo.visible{opacity:1;pointer-events:auto}
.panel-cab{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--borde);flex-shrink:0}
.panel-cab h3{font-family:var(--gorda);font-weight:400;font-size:24px;flex:1;letter-spacing:.3px}
.panel-cuerpo{flex:1;overflow-y:auto;padding:14px 20px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
body.carrito-abierto{overscroll-behavior-y:none}
.carrito-barra{
  display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:4px;
  border-bottom:1px solid var(--borde);font-size:13px;color:var(--gris);font-weight:600;
}
.vaciar-carrito{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--gris);padding:6px 10px;border-radius:999px}
.vaciar-carrito:hover{background:#FFF1F1;color:var(--rojo)}
.linea{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--borde)}
.linea:last-child{border-bottom:none}
.linea-foto{width:64px;height:64px;border-radius:10px;object-fit:contain;background:var(--gris-claro);flex-shrink:0}
.linea-foto.de-noche{background:#000}
.linea-info{flex:1;min-width:0}
.linea-nombre{font-size:15px;font-weight:700;margin-bottom:3px}
.linea-detalle{font-size:12.5px;color:var(--gris);line-height:1.45}
.linea-detalle .quita,.res-detalle .quita{color:var(--rojo);font-weight:600}
.linea-pie{display:flex;align-items:center;gap:10px;margin-top:8px}
.linea-precio{font-weight:800;font-size:15px;margin-left:auto}
.mini-cant{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--borde);border-radius:999px;padding:2px}
.mini-cant button{width:28px;height:28px;border-radius:50%;font-size:16px;font-weight:700}
.mini-cant button:hover{background:var(--gris-claro)}
.mini-cant span{min-width:24px;text-align:center;font-weight:700;font-size:14px}
.linea-enlaces{display:flex;gap:18px;margin-top:8px}
.enlace-linea{font-size:12.5px;font-weight:600;color:var(--gris);text-decoration:underline;padding:3px 0}
.enlace-linea:hover{color:var(--negro)}
.enlace-linea.borrar:hover{color:var(--rojo)}
.linea.fuera-de-hora .linea-foto{opacity:.5}
.linea-fuera{
  display:inline-flex;align-items:center;gap:5px;margin:2px 0 4px;padding:3px 10px;border-radius:999px;
  background:#FDECEC;color:#A61B1B;font-size:12px;font-weight:700;
}
.vacio{text-align:center;padding:56px 20px;color:var(--gris)}
.vacio-ico{margin-bottom:14px;opacity:.28}
.btn-mas-productos{
  display:flex;align-items:center;gap:11px;width:100%;padding:13px 15px;margin-top:12px;border:2px dashed var(--borde);
  border-radius:14px;background:#fff;text-align:left;font-size:13.5px;line-height:1.3;transition:border-color .15s, background .15s;
}
.btn-mas-productos:hover{border-color:var(--amarillo);background:#FFFBEA}
.btn-mas-productos strong{font-size:14.5px;font-weight:800}

/* El pie del carrito, fijo: productos, domicilio, total y confirmar.
   Encima lleva un difuminado para que se note que el carrito sigue
   por debajo (lo pidio Gabriel en la Terraza). */
.panel-pie{
  position:relative;flex-shrink:0;padding:14px 20px 16px;background:#FFF8E1;border-top:1px solid #F1E2B0;
  box-shadow:0 -8px 22px -12px rgba(60,40,10,.3);
}
.panel-pie::before{
  content:'';position:absolute;left:0;right:0;bottom:calc(100% + 1px);height:60px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.95));transition:opacity .25s;
}
.panel.al-final .panel-pie::before{opacity:0}
.resumen{display:flex;justify-content:space-between;font-size:14px;color:#5A4A1A;margin-bottom:3px}
.resumen.total{font-family:var(--gorda);font-size:24px;color:var(--negro);margin:6px 0 10px;letter-spacing:.3px}
.resumen.total span:last-child{color:var(--rojo)}
.estado-entrega{
  display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:12px;margin-bottom:10px;
  font-size:13px;line-height:1.35;text-align:left;
}
.estado-entrega.falta{background:#FFF0E0;color:#8A4B00}
.estado-entrega.listo{background:#E9F7EE;color:#1B6E33}
.estado-entrega strong{font-weight:800}
.nota-pie{font-size:11.5px;color:var(--gris);text-align:center;margin-top:8px;line-height:1.45}

/* ---------------- Datos de entrega ----------------
   Van DENTRO del area que se desplaza y siempre abiertos: si quedan
   escondidos, el cliente no se entera y se va derecho al boton. */
.bloque-entrega{border-top:1px solid var(--borde);margin-top:14px;padding-bottom:8px}
.titulo-entrega{
  font-family:var(--gorda);font-weight:400;font-size:18px;letter-spacing:.5px;padding:16px 0 12px;
  display:flex;align-items:center;gap:8px;
}
.paso-entrega{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:4px 0 8px}

/* El boton "Usar mi ubicacion": todo pasa ADENTRO del boton */
.btn-ubicacion{
  position:relative;overflow:hidden;width:100%;min-height:66px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;padding:10px 14px;text-align:left;
  background:#fff;color:var(--negro);border:2px solid var(--negro);border-radius:14px;
  transition:background .35s,border-color .35s,color .35s;
}
.btn-ubicacion:disabled{cursor:progress}
.ubi-mapa{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.ubi-mapa svg{width:100%;height:100%;display:block}
.ubi-barrido{
  position:absolute;left:34px;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(227,20,27,.34),rgba(227,20,27,0) 22%);
}
.ubi-pin{
  position:relative;z-index:1;flex:none;width:40px;height:40px;border-radius:50%;background:#FDECEC;
  display:flex;align-items:center;justify-content:center;transition:background .35s;
}
.ubi-pin svg{width:22px;height:22px;animation:ubiSalta 1.6s ease-in-out infinite}
.ubi-pin path{fill:var(--rojo)}
.ubi-pin circle{fill:#fff}
.ubi-texto{position:relative;z-index:1;display:flex;flex-direction:column;border-radius:8px;transition:background .35s,padding .35s}
.ubi-texto b{font-family:var(--gorda);font-weight:400;font-size:18px;line-height:1.1;letter-spacing:.3px}
.ubi-texto small{font-size:12.5px;color:var(--gris);transition:color .35s}
@keyframes ubiSalta{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}
@keyframes ubiLatido{0%{box-shadow:0 0 0 0 rgba(227,20,27,.55)}100%{box-shadow:0 0 0 14px rgba(227,20,27,0)}}
@keyframes girar{to{transform:rotate(360deg)}}
.btn-ubicacion.buscando{border-color:#CDBF98}
.btn-ubicacion.buscando .ubi-mapa{opacity:1}
.btn-ubicacion.buscando .ubi-barrido{animation:girar 1.5s linear infinite}
.btn-ubicacion.buscando .ubi-pin{background:var(--rojo);animation:ubiLatido 1.2s ease-out infinite}
.btn-ubicacion.buscando .ubi-pin path{fill:#fff}
.btn-ubicacion.buscando .ubi-pin circle{fill:var(--rojo)}
.btn-ubicacion.buscando .ubi-texto{background:rgba(255,253,246,.9);padding:3px 9px}
.btn-ubicacion.dentro{background:var(--verde);border-color:var(--verde);color:#fff}
.btn-ubicacion.fuera{background:#9A5B00;border-color:#9A5B00;color:#fff}
.btn-ubicacion.dentro .ubi-pin,.btn-ubicacion.fuera .ubi-pin{background:#fff}
.btn-ubicacion.dentro .ubi-pin path{fill:var(--verde)}
.btn-ubicacion.fuera .ubi-pin path{fill:#9A5B00}
.btn-ubicacion.dentro .ubi-pin svg,.btn-ubicacion.fuera .ubi-pin svg{animation:none}
.btn-ubicacion.dentro small,.btn-ubicacion.fuera small{color:rgba(255,255,255,.92)}

/* La sede que atiende y el valor del domicilio */
.sede-caja{border-radius:14px;margin-bottom:16px;transition:box-shadow .2s}
.sede-caja.malo{box-shadow:0 0 0 3px var(--rojo)}
.sede-caja.calculando{display:flex;align-items:center;gap:10px;padding:14px;background:var(--gris-claro);font-size:14px;font-weight:600}
.sede-cargando{width:18px;height:18px;border-radius:50%;border:3px solid #DDD;border-top-color:var(--rojo);animation:girar .8s linear infinite}
.sede-caja.lista{background:#FFF8E1;border:2px solid var(--amarillo);padding:12px 14px}
.sede-caja.lista.lejos{border-color:#E0A400}
.sede-atiende small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8A6A00}
.sede-atiende b{display:block;font-family:var(--gorda);font-weight:400;font-size:20px;line-height:1.1}
.sede-atiende span{display:block;font-size:12.5px;color:var(--gris);margin-top:2px}
.sede-cuenta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:9px;padding-top:9px;border-top:1px dashed #E8D48A}
.sede-cuenta span{font-size:13px;color:#5A4A1A}
.sede-cuenta b{font-family:var(--gorda);font-weight:400;font-size:19px;color:var(--rojo)}
.sede-aviso{font-size:12.5px;color:#8A4B00;margin-top:8px;font-weight:600}
.sede-enlaces{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px}
.sede-enlaces button{font-size:12.5px;font-weight:700;color:var(--negro);text-decoration:underline;padding:2px 0}
.sede-caja.escoger{background:var(--gris-claro);padding:12px}
.sede-pregunta b{display:block;font-size:14.5px}
.sede-pregunta small{display:block;font-size:12.5px;color:var(--gris);margin:2px 0 8px}
.sede-lista{display:flex;flex-direction:column;gap:6px}
.sede-op{display:flex;align-items:center;gap:10px;padding:9px 11px;background:#fff;border:2px solid var(--borde);border-radius:12px;cursor:pointer}
.sede-op input{width:19px;height:19px;accent-color:var(--rojo);flex:none}
.sede-op b{display:block;font-size:14px}
.sede-op small{display:block;font-size:12px;color:var(--gris);line-height:1.3}
.sede-op.marcada{border-color:var(--amarillo);background:#FFFBEA}
.sede-nota{font-size:12px;color:var(--gris);margin-top:8px;line-height:1.4}

/* ---------------- Formulario ---------------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px}
.campo label .op-txt{font-weight:500;color:var(--gris)}
.campo input,.campo select,.campo textarea{
  width:100%;border:2px solid var(--borde);border-radius:12px;padding:12px 14px;font-size:15.5px;font-family:inherit;background:#fff;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--amarillo)}
.campo .pista{font-size:12px;color:var(--gris);margin-top:5px}
.campo .pista:empty{display:none}
.campo .pista.verificar{color:#A05E00;font-weight:700}
.campo .pista.cobra{color:#A05E00;font-weight:700}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.obligatorio{color:var(--rojo);font-weight:800}
.campo.malo input,.campo.malo select,.campo.malo textarea{border-color:var(--rojo);background:#FFF8F8}
.campo .error{font-size:12.5px;color:var(--rojo);font-weight:700;margin-top:5px;display:flex;align-items:center;gap:5px}
.recordar{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:12px;background:var(--gris-claro);cursor:pointer;margin-bottom:10px}
.recordar input{width:20px;height:20px;accent-color:var(--rojo);flex-shrink:0;margin-top:1px}
.recordar strong{display:block;font-size:14px;font-weight:700}
.recordar small{display:block;font-size:11.5px;color:var(--gris);line-height:1.4;margin-top:3px}
.borrar-datos{font-size:12.5px;color:var(--gris);text-decoration:underline;padding:4px 0;margin-bottom:6px}
.borrar-datos:hover{color:var(--rojo)}
.aviso{padding:12px 14px;border-radius:12px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;line-height:1.45}
.aviso-ok{background:#E9F7EE;color:#1B6E33}
.aviso-mal{background:#FDECEC;color:#A61B1B}
.aviso-info{background:#FFF8E1;color:#7A5A00}

/* ---------------- Revisar el pedido ---------------- */
.paso-final{font-size:14px;line-height:1.5;color:#7A5A00;background:#FFF8E1;padding:12px 14px;border-radius:12px;margin-bottom:16px}
.res-bloque{margin-bottom:20px}
.res-bloque h4{font-size:12.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.res-linea{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--borde)}
.res-linea img{width:48px;height:48px;object-fit:contain;background:var(--gris-claro);border-radius:9px;flex-shrink:0}
.res-linea img.de-noche{background:#000}
.res-info{flex:1;min-width:0}
.res-nombre{font-size:14px;font-weight:700}
.res-detalle{font-size:12px;color:var(--gris);line-height:1.45;margin-top:2px}
.res-precio{font-size:14px;font-weight:800;white-space:nowrap}
.res-sub{display:flex;justify-content:space-between;font-size:14px;padding:8px 0 0;color:#444}
.res-total{display:flex;justify-content:space-between;align-items:center;padding:10px 0 0;font-family:var(--gorda);font-size:21px}
.res-total span:last-child{color:var(--rojo)}
.res-datos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.res-datos dt{color:var(--gris);font-size:12.5px;padding-top:2px}
.res-datos dd{font-weight:600;word-break:break-word}
.aviso-domicilio{display:flex;align-items:flex-start;gap:12px;background:var(--amarillo);color:#3D2F00;border-radius:14px;padding:14px 16px;margin-top:4px}
.aviso-domicilio strong{display:block;font-size:14.5px;font-weight:800;letter-spacing:.3px;line-height:1.25}
.aviso-domicilio span{display:block;font-size:12.5px;line-height:1.45;margin-top:4px;color:#5C4800}
.fuera-intro{font-size:15px;line-height:1.5}
.fuera-lista{list-style:none;margin:12px 0 0}
.fuera-lista li{padding:10px 0;border-bottom:1px solid var(--borde)}
.fuera-lista b{display:block;font-size:15px}
.fuera-lista small{display:flex;align-items:center;gap:5px;margin-top:3px;color:#A61B1B;font-size:13px;font-weight:600}
.modal-pie.fuera-botones{flex-direction:column;align-items:stretch;gap:9px}
.modal-pie.fuera-botones .btn{width:100%}

/* ---------------- Escribirle a una sede ---------------- */
.sedes-intro{font-size:14px;color:var(--gris);margin-bottom:10px}
.sede-wa{
  display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;margin-bottom:8px;
  border:2px solid var(--borde);border-radius:14px;transition:border-color .15s, background .15s;
}
.sede-wa:hover{border-color:var(--verde-wa);background:#F3FCF6}
.sede-wa-txt b{display:block;font-size:15px}
.sede-wa-txt small{display:block;font-size:12px;color:var(--gris);line-height:1.35}
.sede-wa-btn{
  flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--verde-wa);color:#fff;
  font-size:13px;font-weight:800;padding:8px 12px;border-radius:999px;white-space:nowrap;
  min-width:10.6em;justify-content:center;font-variant-numeric:tabular-nums;
}

/* ---------------- Opiniones ---------------- */
.rejilla-op{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.opinion{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:22px;transition:transform .2s, box-shadow .2s}
.opinion:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.estrellas{display:flex;gap:2px;margin-bottom:10px;color:#FFB400}
.estrellas .vacia{color:#DCDCDC}
.opinion p{font-size:15px;line-height:1.6;margin-bottom:14px}
.opinion .autor{font-weight:800;font-size:14px}
.opinion .meta{font-size:12px;color:var(--gris)}
.puntaje{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:18px 22px;margin-bottom:24px;flex-wrap:wrap}
.puntaje .num{font-family:var(--gorda);font-size:46px;line-height:1;color:var(--rojo)}
.puntaje .estrellas{margin-bottom:4px}

/* ---------------- Sedes (Contactenos e Inicio) ---------------- */
.sedes-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:26px;align-items:start}
.lista-sedes{display:flex;flex-direction:column;gap:12px}
.sede-tarjeta{
  position:relative;background:#fff;border:2px solid var(--borde);border-radius:var(--radio);padding:16px 18px;
  transition:border-color .15s, box-shadow .15s;
}
.sede-tarjeta.activa{border-color:var(--amarillo);box-shadow:0 8px 22px rgba(0,0,0,.1)}
.sede-tarjeta h3{font-family:var(--gorda);font-weight:400;font-size:22px;letter-spacing:.3px;margin-bottom:4px}
.sede-tarjeta p{display:flex;align-items:flex-start;gap:7px;font-size:14px;color:#444;margin-top:4px}
.sede-tarjeta p .ico-svg{margin-top:2px;color:var(--rojo)}
/* Almuerzos y pizzas solo en algunas sedes (Gabriel, 26-sep) */
.aviso-solo-sedes{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 18px;border-radius:12px;
  background:var(--rojo);color:#fff;font-family:var(--gorda);font-size:clamp(16px,2.6vw,21px);letter-spacing:.3px;
  text-transform:uppercase;box-shadow:0 4px 0 var(--rojo-oscuro);
}
.sede-aviso.no-llega{background:#FDECEC;border:2px solid var(--rojo);color:#8A0A0A;border-radius:10px;padding:10px 12px}
.capa-aviso-sedes{
  position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity .2s;
}
.capa-aviso-sedes.abierta{opacity:1}
.aviso-sedes-caja{
  background:#fff;border-radius:18px;max-width:380px;padding:26px 22px 22px;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.4);transform:scale(.9);transition:transform .2s;
}
.capa-aviso-sedes.abierta .aviso-sedes-caja{transform:none}
.aviso-sedes-caja .ico-svg{color:var(--rojo)}
.aviso-sedes-caja h3{font-family:var(--gorda);font-weight:400;font-size:24px;margin:6px 0 8px}
.aviso-sedes-caja p{font-size:15.5px;line-height:1.5;color:#333;margin-bottom:18px}
.aviso-sedes-caja .btn{width:100%}
.sede-tarjeta.con-foto{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.sede-tarjeta.con-foto:hover{transform:translateY(-3px);border-color:var(--amarillo);box-shadow:0 8px 22px rgba(0,0,0,.1)}
.sede-ver-foto{
  display:inline-block;margin-top:10px;font-family:var(--gorda);font-size:14px;color:var(--rojo);
  border-bottom:2px solid var(--amarillo);padding-bottom:1px;
}
.sede-cal .ico-svg{color:#FFB400 !important}
.sede-cerca{display:inline-block;background:var(--verde);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.sede-botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sede-botones .btn{padding:9px 14px;font-size:13.5px}
.sede-botones .btn-wa{min-width:11.4em;font-variant-numeric:tabular-nums}
.mapa-caja{position:sticky;top:98px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde);background:var(--gris-claro)}
.mapa-caja h3{font-family:var(--gorda);font-weight:400;font-size:19px;padding:12px 16px;background:var(--amarillo)}
.mapa-caja iframe{display:block;width:100%;height:470px;border:0}
.btn-cerca{
  display:inline-flex;align-items:center;gap:9px;background:var(--negro);color:#fff;font-weight:800;font-size:15px;
  padding:13px 22px;border-radius:999px;margin-bottom:18px;
}
.btn-cerca:disabled{opacity:.6}

/* ---------------- Cartel "En Punto Loco se come bacano" ---------------- */
.cartel-bacano{background:var(--pizarra);padding:clamp(34px,6vw,58px) 0;text-align:center;overflow:hidden}
.cartel-bacano p{
  font-family:var(--gorda);color:var(--amarillo);font-size:clamp(34px,7vw,74px);line-height:1;text-transform:uppercase;
  text-shadow:4px 4px 0 #000;letter-spacing:.5px;
}
.cartel-bacano p span{display:block;color:#fff}
.cartel-bacano .cartel-logo{width:min(470px,88vw);margin:0 auto 26px}

/* ---------------- Logo vivo ----------------
   img/logo-vivo.svg es el logo en vectores (scripts/armar-logo.py): se ve
   nitido a cualquier tamano. Sin JS es una imagen quieta; js/logo-vivo.js
   lo mete en la pagina y aqui estan sus movimientos. Cada pieza trae su
   centro de giro desde el SVG. */
.logo-vivo{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.logo-vivo img,.logo-vivo svg{display:block;width:100%;height:auto;overflow:visible}
.lv .lv-l{transform-box:fill-box;transform-origin:50% 100%}
.lv .lv-pupila{transition:transform .2s ease-out}
.lv .lv-lengua{animation:lvLengua 4.6s ease-in-out infinite}
.lv.lv-quieto *{animation-play-state:paused !important}
/* esperando a que aparezca en pantalla, para entrar */
.lv.lv-espera .lv-l,.lv.lv-espera .lv-cabeza,.lv.lv-espera .lv-cejas,.lv.lv-espera .lv-gorro{opacity:0}
.lv.lv-entra .lv-punt .lv-l{animation:lvCae .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 70ms)}
.lv.lv-entra .lv-loco .lv-l{animation:lvCae .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(260ms + var(--i) * 70ms)}
.lv.lv-entra .lv-comida .lv-l,.lv.lv-entra .lv-diferente .lv-l{animation:lvSube .45s ease-out both;animation-delay:calc(560ms + var(--i) * 35ms)}
.lv.lv-entra .lv-cabeza,.lv.lv-entra .lv-cejas{animation:lvInfla .6s cubic-bezier(.34,1.56,.64,1) .12s both}
.lv.lv-entra .lv-gorro{animation:lvAterriza .8s cubic-bezier(.3,1.35,.6,1) .55s both}
/* parpadeo */
.lv.lv-parpadea .lv-ojo{animation:lvParpado .19s ease-in-out}
/* al tocarlo */
.lv.lv-fiesta .lv-punt .lv-l{animation:lvSalta .62s ease-out both;animation-delay:calc(var(--i) * 55ms)}
.lv.lv-fiesta .lv-loco .lv-l{animation:lvSalta .62s ease-out both;animation-delay:calc(200ms + var(--i) * 55ms)}
.lv.lv-fiesta .lv-comida .lv-l,.lv.lv-fiesta .lv-diferente .lv-l{animation:lvOla .5s ease-in-out both;animation-delay:calc(280ms + var(--i) * 30ms)}
.lv.lv-fiesta .lv-cabeza,.lv.lv-fiesta .lv-cejas{animation:lvBoing .75s ease-out both}
.lv.lv-fiesta .lv-gorro{animation:lvGorro .95s cubic-bezier(.3,.6,.4,1) both}
.lv.lv-fiesta .lv-remolino{animation:lvRemolino .9s ease-in-out both}
.lv.lv-fiesta .lv-lengua{animation:lvLenguaLoca .9s ease-in-out both}
@keyframes lvCae{from{opacity:0;transform:translateY(-60px) scale(.5)}to{opacity:1;transform:none}}
@keyframes lvSube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lvInfla{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes lvAterriza{0%{opacity:0;transform:translateY(-150px) rotate(-25deg)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lvParpado{50%{transform:scaleY(.08)}}
@keyframes lvLengua{0%,62%,100%{transform:none}70%{transform:rotate(6deg)}78%{transform:rotate(-3deg)}86%{transform:rotate(4deg)}93%{transform:rotate(-1deg)}}
@keyframes lvSalta{0%{transform:none}30%{transform:translateY(-22px) scale(.96,1.06)}55%{transform:scale(1.1,.88)}75%{transform:scale(.97,1.04)}100%{transform:none}}
@keyframes lvOla{0%,100%{transform:none}50%{transform:translateY(-9px) rotate(-5deg)}}
@keyframes lvBoing{0%{transform:none}18%{transform:scale(1.14,.86)}38%{transform:scale(.9,1.12)}58%{transform:scale(1.05,.96)}78%{transform:scale(.98,1.02)}100%{transform:none}}
@keyframes lvGorro{0%{transform:none}35%{transform:translateY(-70px) rotate(-16deg)}55%{transform:translateY(-78px) rotate(12deg)}82%{transform:translateY(3px) rotate(-3deg)}100%{transform:none}}
@keyframes lvRemolino{from{transform:rotate(0)}to{transform:rotate(720deg)}}
@keyframes lvLenguaLoca{0%,100%{transform:none}20%{transform:rotate(10deg)}40%{transform:rotate(-5deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-3deg)}}

/* ---------------- Nosotros ---------------- */
.nos-hero{background:#000 center/cover no-repeat;position:relative;min-height:62vh;display:flex;align-items:flex-end;color:#fff}
.nos-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.15) 70%)}
.nos-hero .contenedor{position:relative;z-index:1;padding-bottom:44px;padding-top:120px}
.nos-hero h1{font-family:var(--gorda);font-weight:400;color:var(--amarillo);font-size:clamp(40px,8vw,82px);line-height:1;text-shadow:4px 4px 0 var(--rojo)}
.nos-hero p{font-family:var(--script);font-size:clamp(24px,4vw,36px);margin-top:8px}
.nos-fila{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.nos-texto p{font-size:16.5px;line-height:1.75;margin-bottom:14px;color:#333}
.nos-texto strong{color:var(--rojo)}
.nos-foto{border-radius:22px;overflow:hidden;box-shadow:var(--sombra-alta);transform:rotate(1.5deg)}
.nos-foto img{width:100%;height:auto}
.cifras{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cifra{background:var(--pizarra);color:#fff;border-radius:var(--radio);padding:22px 16px;text-align:center}
.cifra b{display:block;font-family:var(--gorda);font-weight:400;font-size:clamp(30px,4vw,44px);color:var(--amarillo);line-height:1}
.cifra span{display:block;font-size:13.5px;color:#CFCFCF;margin-top:6px;line-height:1.35}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}

/* ---------------- Encabezado de paginas internas ---------------- */
.cabeza-pagina{background:var(--amarillo);padding:40px 0 34px;text-align:center}
.cabeza-pagina h1{font-family:var(--gorda);font-weight:400;font-size:clamp(34px,6vw,58px);line-height:1;text-shadow:3px 3px 0 #fff}
.cabeza-pagina p{font-size:16px;margin-top:8px;font-weight:600}

/* ---------------- Pie ---------------- */
.pie{background:var(--negro);color:#fff;padding:50px 0 26px}
.pie-rejilla{display:grid;grid-template-columns:1.2fr 1.3fr 1fr;gap:36px;margin-bottom:30px}
.pie h4{font-family:var(--gorda);font-weight:400;font-size:19px;color:var(--amarillo);margin-bottom:12px;letter-spacing:.3px}
.pie p,.pie li{font-size:14px;color:#C9C9C9;line-height:1.75;list-style:none}
.pie-logo{width:min(270px,100%);margin:0 0 16px -6px}
.pie a:hover{color:var(--amarillo)}
.pie-sedes li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);padding:4px 0}
/* tabular-nums: todos los numeros del mismo ancho, para que los WhatsApp
   queden parejos (Gabriel vio unos mas cortos que otros, 25-sep) */
.pie-sedes a{color:#fff;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.redes{display:flex;gap:10px;margin-top:14px}
.redes a{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s;
}
.redes a:hover{background:var(--amarillo);color:var(--negro);transform:translateY(-3px)}
.pie-abajo{
  border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  align-items:center;font-size:12.5px;color:#9A9A9A;
}

/* ---------------- Boton flotante: el chef del video de Gabriel ----------------
   Sin fondo, sin circulo y sin el logo de WhatsApp (Gabriel, 25-sep): solo
   el chef moviendose (js/ayuda-chef.js lo pinta en el canvas desde
   img/ayuda-chef.mp4; mientras tanto se ve la foto quieta meciendose).
   La letra va negra sobre fondo claro y blanca sobre oscuro (.sobre-oscuro).
   Al tocarlo abre las sedes por WhatsApp, como el boton verde de antes. */
.ayuda-flotante{
  position:fixed;bottom:12px;left:10px;z-index:700;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:0;background:none;-webkit-tap-highlight-color:transparent;
}
.ayuda-chef{position:relative;display:block;width:88px;height:88px;transition:transform .18s;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.ayuda-chef img,.ayuda-chef canvas{position:absolute;inset:0;width:100%;height:100%}
.ayuda-chef canvas{opacity:0}
.ayuda-chef.con-video canvas{opacity:1}
.ayuda-chef.con-video img{opacity:0}
.ayuda-chef:not(.con-video) img{animation:ayudaMece 2.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes ayudaMece{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-3px)}}
.ayuda-texto{
  margin-top:-4px;font-family:var(--gorda);font-size:14.5px;letter-spacing:.2px;line-height:1.1;white-space:nowrap;
  color:#111;text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 1px #fff;transition:color .25s,text-shadow .25s;
}
.ayuda-flotante.sobre-oscuro .ayuda-texto{color:#fff;text-shadow:0 0 3px #000,0 0 7px rgba(0,0,0,.9),0 0 1px #000}
.ayuda-flotante:hover .ayuda-chef{transform:scale(1.08) rotate(-4deg)}

/* ---------------- Foto en grande ---------------- */
.capa-zoom{
  position:fixed;inset:0;z-index:1400;background:rgba(255,255,255,.98);display:flex;flex-direction:column;align-items:center;
  justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;
}
.capa-zoom.oscuro{background:rgba(0,0,0,.97)}
.capa-zoom.oscuro .zoom-nombre{color:#fff}
.capa-zoom.abierta{opacity:1;pointer-events:auto}
.zoom-marco{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px 0;min-height:0}
.zoom-marco img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(.94);transition:transform .25s}
.capa-zoom.abierta .zoom-marco img{transform:scale(1)}
.zoom-nombre{order:-1;padding:16px 20px 0;width:100%;text-align:center;font-size:18px;font-weight:800}
/* El boton de cerrar va ABAJO y de ancho completo: lo alcanza el pulgar
   de cualquier mano sin tener que apuntar. */
.zoom-cerrar{
  width:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));background:var(--negro);color:#fff;font-size:16.5px;font-weight:800;
}
.capa-zoom.oscuro .zoom-cerrar{background:var(--amarillo);color:#000}
@media (min-width:721px){
  .zoom-cerrar{width:auto;min-width:230px;margin:22px auto 30px;border-radius:999px;padding:15px 34px}
}

/* ---------------- Aviso emergente ---------------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);background:var(--negro);color:#fff;
  padding:14px 24px;border-radius:999px;font-weight:600;font-size:14.5px;z-index:1600;opacity:0;
  transition:transform .3s, opacity .3s, bottom .3s;box-shadow:var(--sombra-alta);max-width:90vw;text-align:center;
}
.toast.visible{transform:translate(-50%,0);opacity:1}
body.carrito-abierto .toast{bottom:240px}

/* ---------------- La tarjeta del MENU DEL DIA ---------------- */
.menu-dia{
  position:fixed;inset:0;z-index:1500;display:flex;overflow-y:auto;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));background:rgba(10,8,6,.76);animation:mdFondo .3s ease both;
}
.md-caja{width:100%;max-width:400px;margin:auto;display:flex;flex-direction:column}
.md-cerrar{
  align-self:flex-end;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--negro);border-radius:999px;
  padding:11px 18px 11px 14px;font-weight:800;font-size:14px;letter-spacing:.03em;box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.md-tarjeta{margin-top:12px;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 22px 48px rgba(0,0,0,.5);animation:mdEntra .6s cubic-bezier(.2,1.35,.45,1) both}
.md-banda{position:relative;background:var(--rojo);padding:14px 12px 12px;overflow:hidden;text-align:center}
.md-rayos{position:absolute;left:50%;top:50%;width:460px;height:460px;margin:-230px 0 0 -230px;opacity:.35;animation:girar 60s linear infinite}
.md-rotulo{position:relative;font-family:var(--gorda);color:var(--amarillo);font-size:40px;line-height:.95;text-transform:uppercase;text-shadow:3px 3px 0 #000}
.md-rotulo span{color:#fff}
.md-foto{background:#fff;height:180px;display:flex;align-items:center;justify-content:center}
.md-foto.de-noche{background:#000}
.md-foto img{height:100%;width:auto;max-width:100%;object-fit:contain}
.md-info{padding:10px 18px 0;text-align:center}
.md-seccion{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--verde)}
.md-nombre{font-family:var(--gorda);font-weight:400;font-size:28px;line-height:1.02;margin:4px 0}
.md-desc{font-size:13.5px;line-height:1.4;color:var(--gris)}
.md-precio{font-family:var(--gorda);font-size:30px;color:var(--rojo);margin-top:4px}
.md-accion{padding:12px 16px 16px}
.md-agregar{
  width:100%;border-radius:14px;background:var(--amarillo);color:var(--negro);font-family:var(--gorda);font-size:19px;letter-spacing:.03em;
  padding:14px 10px 12px;box-shadow:0 4px 0 #C99400;
}
.md-cuando{background:#F4EDD8;color:#6E604D;border-radius:14px;padding:12px 8px;text-align:center;font-family:var(--gorda);font-size:17px}
.md-encargar{display:block;margin:9px auto 0;color:var(--verde);font-weight:800;font-size:14.5px;text-decoration:underline}
.md-seguir{
  margin-top:14px;border:2px solid rgba(255,255,255,.55);background:rgba(20,12,8,.9);color:#fff;border-radius:15px;padding:15px;
  font-weight:800;font-size:14.5px;letter-spacing:.04em;animation:mdFondo .4s .35s ease both;
}
@keyframes mdEntra{from{opacity:0;transform:translateY(46px) scale(.92)}to{opacity:1;transform:none}}
@keyframes mdFondo{from{opacity:0}to{opacity:1}}

/* ---------------- Celular ---------------- */
@media (max-width:1024px){
  .rejilla-cats{grid-template-columns:repeat(3,1fr)}
  .rejilla-platos{grid-template-columns:repeat(3,1fr)}
  .rejilla-op{grid-template-columns:repeat(2,1fr)}
  .pie-rejilla{grid-template-columns:1fr 1fr}
  .sedes-rejilla{grid-template-columns:1fr}
  .mapa-caja{position:relative;top:0}
  .cifras{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .cabecera-fila{height:66px;gap:10px}
  .barra-categorias{top:66px}
  .logo{padding:3px 6px}
  .logo img{height:40px}
  .chips{gap:2px;padding:8px 14px 0}
  .chip{min-width:84px;padding:5px 8px 0;font-size:12px}
  .chip-foto{width:50px;height:50px}
  .nav{
    display:none;position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--borde);
    flex-direction:column;padding:10px;gap:2px;box-shadow:var(--sombra);
  }
  .nav.abierto{display:flex}
  .nav a{padding:13px 16px;border-radius:12px}
  .menu-movil{display:block;order:-1}
  .btn-carrito{padding:9px 14px;font-size:15px}
  .hero-pista{height:calc(200svh - 66px - 40svh)}
  .hero-video{top:66px;height:calc(100svh - 66px)}
  .hero-capa{width:max(100%, calc((100svh - 66px) * var(--ar, .5625)))}
  .hero-video-texto{padding:22px 0 calc(122px + env(safe-area-inset-bottom,0px))}
  .titulo-vivo{width:min(92vw,440px)}
  .btn-carta-hero{width:100%;align-self:stretch}
  .rejilla-cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-tarjeta{padding:14px 8px 16px}
  .cat-foto{width:min(150px,82%)}
  .cat-tarjeta h3{font-size:16px}
  .rejilla-platos{grid-template-columns:repeat(2,1fr);gap:12px}
  .plato-cuerpo{padding:10px 10px 14px}
  .plato-nombre{font-size:14.5px}
  .plato-desc{font-size:12px;line-height:1.35}
  .plato-precio{font-size:20px;margin-bottom:8px}
  .btn-personalizar{padding:9px;font-size:12.5px}
  .btn-agregar{padding:11px 6px;font-size:14.5px}
  .var b{font-size:12px}
  .var small{font-size:11px}
  .op{font-size:12px;padding:6px 10px}
  .rejilla-op{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr;gap:26px}
  .pie-logo{width:min(300px,82vw);margin-left:-4px}
  .seccion{padding:34px 0;scroll-margin-top:160px}
  .capa{padding:0;align-items:flex-end}
  .modal{max-width:100%;max-height:92vh;border-radius:var(--radio) var(--radio) 0 0}
  .fila-2{grid-template-columns:1fr}
  .ayuda-flotante{bottom:10px;left:6px}
  .ayuda-chef{width:70px;height:70px}
  .ayuda-texto{font-size:13px}
  .nos-fila{grid-template-columns:1fr;gap:26px}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .mapa-caja iframe{height:340px}
}
@media (prefers-reduced-motion:reduce){
  .btn-carta-hero,.chips-mas svg,.ubi-pin svg,.btn-ubicacion.buscando .ubi-barrido,.btn-ubicacion.buscando .ubi-pin,
  .menu-dia,.md-tarjeta,.md-seguir,.md-rayos,.eleccion.llamar{animation:none}
  .lv *{animation:none !important;transition:none !important}
  .hero-pista{height:auto}
  .hero-video{position:relative;top:0}
  .humo i,.titulo-vivo .lt-l,.ayuda-chef img{animation:none !important}
}
@media print{.cabecera,.barra-categorias,.ayuda-flotante,.plato-acciones,.pie{display:none}}