/* ============================================================
   RESTAURANTE TERRAZA DE LA 96
   Estilos - fondo blanco, minimalismo tipo McDonald's
   ============================================================ */

:root{
  /* ---------------------------------------------------------------
     Los tres primeros son los de siempre. Los dos ultimos salen de los
     AFICHES que la dueña manda a imprimir: se contaron los pixeles de
     los 7 afiches y estos son los que mandan.
        amarillo del afiche  #F0C024   25,6% del area
        rojo del afiche      #D82424   23,4%   (casi igual al de aqui)
        crema                #F0F0CC   17,9%
        verde petroleo       #0C786C    6,9%
     La crema reemplaza al blanco puro como fondo de pagina: es lo que
     le da el aire de aviso pintado. El verde es el acento; NUNCA va en
     un boton de pedir, ahi manda el rojo que ya lo reconocen.
     --------------------------------------------------------------- */
  --crema:#F9F5E3;
  --crema-fuerte:#F0F0CC;
  --verde:#0C786C;
  --verde-oscuro:#095E55;
  --amarillo-afiche:#F0C024;
  --gordas:'Baloo 2','Trebuchet MS',sans-serif;

  --rojo:#D8232A;
  --rojo-oscuro:#B01B21;
  --amarillo:#FFC72C;
  --amarillo-claro:#FFE9A8;
  --negro:#1A1A1A;
  --gris:#6B6B6B;
  --gris-claro:#F4F4F4;
  --borde:#E6E6E6;
  --blanco:#FFFFFF;
  --verde-wa:#25D366;
  --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;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fuente);
  /* Crema y no blanco puro: es el fondo de los afiches. Las tarjetas
     siguen en blanco, y ese contraste suave es lo que da la sensacion
     de papel. */
  background:var(--crema);
  color:var(--negro);
  line-height:1.5;
  overflow-x:hidden;
}

/* ---------------- Iconos SVG (aqui no se usan emoticones) ---------------- */
.ico-svg{display:inline-block;vertical-align:middle;flex-shrink:0}
.aviso .ico-svg{margin-top:1px}
.redes .ico-svg{width:19px;height:19px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.oculto{display:none !important}

/* ---------------- Header ---------------- */
.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:80px;
}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{height:54px;width:54px;border-radius:50%;object-fit:cover}
.logo-texto{
  font-weight:800;font-size:23px;line-height:1.05;
  letter-spacing:-.7px;text-transform:uppercase;
}
.logo-texto span{
  display:block;font-size:11.5px;font-weight:500;color:var(--gris);
  letter-spacing:1.6px;text-transform:uppercase;margin-top:2px;
}

.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
  padding:9px 14px;border-radius:999px;font-weight:600;font-size:15px;
  color:var(--negro);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;
  background:var(--amarillo);color:var(--negro);
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;
  transition:transform .15s, box-shadow .15s;flex-shrink:0;
}
.btn-carrito:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.burbuja{
  position:absolute;top:-6px;right:-6px;
  background:var(--rojo);color:#fff;font-size:11px;font-weight:800;
  min-width:20px;height:20px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.menu-movil{display:none;font-size:26px;line-height:1;padding:4px 8px}

/* ---------------- Hero ---------------- */
.hero{
  background:linear-gradient(180deg,#FFFDF5 0%,var(--blanco) 100%);
  padding:56px 0 44px;text-align:center;
}
.hero h1{
  font-size:clamp(30px,5.5vw,52px);font-weight:800;letter-spacing:-1px;
  line-height:1.08;margin-bottom:14px;
}
.hero h1 em{color:var(--rojo);font-style:normal}
.hero p{font-size:clamp(15px,2.2vw,19px);color:var(--gris);max-width:620px;margin:0 auto 26px}
.hero-acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sello{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--amarillo-claro);color:#7A5A00;
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:18px;
}

/* ---------------- Hero con el video de fondo ----------------
   El video ocupa todo el alto de la pantalla y el texto va encima en
   blanco. La sombra degradada NO es decoración: sin ella el texto se
   pierde cuando la cámara llega al caldo, que es lo más claro. */
.hero-video{
  position:relative;overflow:hidden;
  min-height:calc(100svh - 80px);
  display:flex;align-items:flex-end;
  background:var(--negro) center/cover no-repeat;
}
.hero-video-fondo{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
/* CERO sombra encima del video. Ni degradado ni capa ni filtro: el video
   se ve tal cual salió, con toda su luz y su nitidez.
   Lo que hace legible el texto es la sombra de CADA LETRA (--halo y
   --flote, aquí abajo), no una cortina por encima de la imagen. */
.hero-video-texto{
  position:relative;z-index:2;width:100%;color:#fff;
  padding:78px 0 calc(40px + env(safe-area-inset-bottom,0px));
  /* Fraunces en TODO el hero, no solo en el titular. Se hereda hacia
     abajo, asi que la bajada, el nombre del plato, el precio y la
     cinta la toman solas. El resto del sitio sigue en Outfit. */
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
}

/* ---------------------------------------------------------------
   LAS SOMBRAS DE LAS LETRAS DEL HERO

   Por qué son DOS y no una (medido sobre este video, 02-sep-2026):
   detrás del texto el fondo va de 137 a 155 de brillo, y en la
   mazorca llega a 203. La letra blanca es 255. Con 203 detrás,
   una sombra suave sola NO se ve: el texto se pierde justo cuando
   pasa la mazorca.

     --halo   pegado al borde de la letra, 1 a 3 px. Aquí el
              contraste deja de ser letra-contra-video y pasa a ser
              letra-contra-halo (255 contra casi negro). Funciona
              sobre cualquier fondo y solo oscurece los milímetros
              que rodean la letra: el video no se toca.
     --flote  caída suave y hacia abajo. Esta es la que da la
              sensación de que la letra flota por encima del plato.

   Si algún día se cambia el video por uno más claro, lo que hay que
   subir es la opacidad del HALO, nunca poner una capa encima.
   --------------------------------------------------------------- */
.hero-video-texto{
  --halo:
     0 0 1px rgba(0,0,0,1),
     0 1px 2px rgba(0,0,0,1),
     0 0 5px rgba(0,0,0,.92),
     0 0 10px rgba(0,0,0,.7);
  --flote:
     0 6px 16px rgba(0,0,0,.75),
     0 16px 40px rgba(0,0,0,.6),
     0 26px 70px rgba(0,0,0,.4);
}

/* El titular: cada palabra en su renglón y su tamaño, para que el ojo
   caiga en "casera" y "casa". */
.titular{
  display:flex;flex-direction:column;
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  margin-bottom:16px;
  text-shadow:var(--halo),var(--flote);
}
.titular .chica{
  font-size:clamp(19px,4vw,27px);font-weight:400;font-style:italic;
  opacity:.9;line-height:1.15;
}
.titular .media{
  font-size:clamp(29px,6vw,45px);font-weight:700;
  line-height:1.05;letter-spacing:-.6px;
}
.titular .grande{
  font-size:clamp(53px,11.6vw,96px);font-weight:900;font-style:italic;
  line-height:.94;letter-spacing:-2px;
  font-variation-settings:'SOFT' 60,'WONK' 1;
}
.hero-video-texto .bajada{
  /* Sin la cortina negra, este parrafo es el que sufre: es el texto mas
     chico y le toca competir con la parte clara del caldo, que se midio
     en 203 de brillo. Un halo sobre letra delgada de 14px no alcanza.
     Por eso aqui, y SOLO aqui, se sube el cuerpo y el grosor: una letra
     mas gruesa tiene mas superficie blanca que separar del fondo, y el
     halo por fin tiene de donde agarrarse.
     Se probo primero solo con mas sombra y no sirvio: se veia sucia. */
  /* Este parrafo YA era Fraunces, pero no lo parecia: le faltaban los
     ejes SOFT y WONK que son los que le dan la personalidad a la fuente
     (son los que hacen la "a" y la "g" curvaditas del titular). Sin
     ellos Fraunces se ve como una serif cualquiera.
     Peso 600 y no 500: la serif tiene trazos finos y sobre el caldo
     claro esos pelitos desaparecen. */
  font-size:clamp(17.5px,2.9vw,21px);line-height:1.55;font-weight:600;
  font-variation-settings:'SOFT' 45,'WONK' 1;
  color:#fff;max-width:52ch;margin-bottom:28px;
  text-shadow:
     0 0 1px rgba(0,0,0,1),
     0 1px 1px rgba(0,0,0,1),
     0 0 3px rgba(0,0,0,.95),
     0 0 8px rgba(0,0,0,.7),
     0 4px 12px rgba(0,0,0,.5);
}

.hero-plato{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:22px;position:relative;
}
/* La rayita que separa el plato del dia.
   OJO: antes esto era border-top + box-shadow, y se veia un RECTANGULO
   FANTASMA sobre el video. El box-shadow se dibuja alrededor de TODA la
   caja, y con 3px de desenfoque asomaba por los cuatro lados.
   Ahora la linea es un ::before y la sombra la lleva SOLO la linea. */
.hero-plato::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(0,0,0,.65);
}
.hero-plato-info{flex:1;min-width:190px}
.plato-dia-nombre{
  font-size:clamp(24px,3.9vw,33px);font-weight:800;
  line-height:1.15;letter-spacing:-.5px;
  text-shadow:var(--halo),var(--flote);
}
.plato-dia-precio{
  font-size:clamp(25px,4.1vw,34px);font-weight:800;margin-top:2px;
  text-shadow:var(--halo),var(--flote);
}
/* El boton tambien va en Fraunces: es parte del hero. Los demas botones
   del sitio siguen en Outfit; si algun dia se ve raro, se quita esta
   linea y vuelve a la de siempre. */
.plato-dia-boton{
  flex-shrink:0;padding:16px 32px;font-size:17.5px;
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:700;
}

.cinta-dia{
  display:inline-block;background:var(--amarillo);color:var(--negro);
  padding:8px 18px;border-radius:999px;
  /* Agrandada el 02-sep-2026 a pedido de Gabriel: de 11.5 a 15px.
     El relleno sube con ella, si no la pastilla queda apretada. */
  font-size:15px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:12px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;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}

/* ---------------- Categorias (chips) ---------------- */
.barra-categorias{
  position:sticky;top:80px;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;-ms-overflow-style:none;
}
.chips::-webkit-scrollbar{display:none}

/* Navegacion de categorias con foto del producto, estilo McDonald's */
.chip{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 14px 0;min-width:104px;
  color:var(--negro);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:64px;height:64px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.chip-foto img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.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:700}

/* ---------------- Rejilla de categorias (home) ---------------- */
.rejilla-cats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.cat-tarjeta{
  background:var(--blanco);border-radius:var(--radio);
  padding:22px 12px 24px;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)}
/* La foto de la categoria. Se agrando de 120 a 172px el 02-sep-2026:
   el plato se veia perdido dentro de la tarjeta.
   Se midio antes: las fotos ya llenan el 87% de su marco, o sea que el
   problema NO era margen blanco de la imagen sino que la caja era chica.
   Medido en la pagina: en escritorio la tarjeta da 287px, asi que a
   200px quedan 43px de aire a cada lado; en celular la tarjeta da 182px
   y la foto va a 138px, con 22px de aire. Con object-fit:contain el
   plato nunca se corta ni se sale. El margen de abajo sube a 14 para que no roce el
   nombre de la categoria. */
.cat-foto{
  width:min(210px,76%);aspect-ratio:1;height:auto;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cat-foto img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.cat-tarjeta:hover .cat-foto img{transform:scale(1.08)}
.cat-tarjeta .ico{
  width:76px;height:76px;margin:0 auto 12px;border-radius:50%;
  background:var(--gris-claro);color:var(--negro);
  display:flex;align-items:center;justify-content:center;
}
.cat-tarjeta .ico.paso{
  background:var(--amarillo);
  font-size:32px;font-weight:800;letter-spacing:-1px;
}
.cat-tarjeta h3{font-size:16.5px;font-weight:700}
.cat-tarjeta p{font-size:12.5px;color:var(--gris);margin-top:3px}

/* ---------------- Seccion ---------------- */
/* scroll-margin-top: al saltar a una categoria, el titulo tiene que
   quedar DEBAJO de la cabecera y de la cinta de categorias, que son
   fijas. Sin esto la cinta le queda encima al titulo. */
.seccion{padding:52px 0;scroll-margin-top:190px}
.seccion-titulo{
  font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.6px;
  margin-bottom:6px;
}
.seccion-sub{color:var(--gris);font-size:15px;margin-bottom:26px}
.seccion-cinta{
  display:inline-block;background:var(--amarillo);
  padding:3px 12px;border-radius:8px;font-size:12px;font-weight:700;
  margin-bottom:10px;
}

/* ---------------- Tarjetas de plato ---------------- */
.rejilla-platos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.plato{
  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;
}
.plato-foto img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.plato:hover .plato-foto img{transform:scale(1.06)}
.plato-foto .sin-foto{
  font-size:52px;opacity:.28;
}
.etiqueta{
  position:absolute;top:12px;left:12px;
  background:var(--rojo);color:#fff;
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;
  letter-spacing:.3px;
}
.plato-cuerpo{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.plato-nombre{font-size:16px;font-weight:700;line-height:1.25;margin-bottom:5px}
.plato-desc{font-size:13px;color:var(--gris);line-height:1.4;margin-bottom:12px;flex:1}
.plato-precio{font-size:20px;font-weight:800;margin-bottom:12px}
.plato-acciones{display:flex;flex-direction:column;gap:8px}
.btn-personalizar{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:11px;border-radius:999px;
  background:#fff;color:var(--negro);
  border:2px solid var(--negro);
  font-weight:700;font-size:14px;
  transition:background .15s, color .15s;
}
.btn-personalizar:hover{background:var(--negro);color:#fff}
.btn-agregar{
  width:100%;padding:12px;border-radius:999px;
  background:var(--amarillo);color:var(--negro);
  font-weight:800;font-size:14px;
  transition:transform .15s, box-shadow .15s;
}
.btn-agregar:hover{transform:translateY(-2px);box-shadow:var(--sombra)}

/* ---------------- Modal ---------------- */
/* OJO con el z-index: el carrito esta en 1100 y su fondo en 1050.
   Si esta capa se queda por debajo, la ventana de revisar el pedido
   se abre DETRAS del carrito y parece que el boton no hiciera nada. */
.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:18px 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;font-size:20px;
  transition:background .15s;flex-shrink:0;
}
.cerrar:hover{background:#E2E2E2}
.modal-cuerpo{padding:20px;overflow-y:auto;flex:1}
.modal-pie{
  padding:16px 20px;border-top:1px solid var(--borde);
  display:flex;align-items:center;gap:14px;flex-shrink:0;background:#fff;
}
.modal-pie .total{font-size:22px;font-weight:800;flex:1}

.modal-foto{
  width:100%;aspect-ratio:16/10;object-fit:contain;
  background:var(--blanco);margin-bottom:14px;
}

/* --- Grupos de opciones --- */
.grupo{margin-bottom:24px}
.grupo-titulo{font-size:16px;font-weight:800;margin-bottom:2px}
.grupo-ayuda{font-size:12.5px;color:var(--gris);margin-bottom:12px}
.grupo-error{font-size:12.5px;color:var(--rojo);font-weight:600;margin-bottom:10px}

.opcion{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;
  border:2px solid var(--borde);margin-bottom:8px;
  cursor:pointer;transition:border-color .15s, background .15s;
}
.opcion:hover{border-color:#C9C9C9;background:#FAFAFA}
.opcion.marcada{border-color:var(--amarillo);background:#FFFDF2}
.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 ingredientes --- */
.quitar-lista{display:flex;flex-wrap:wrap;gap:9px}
.quitar-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:999px;
  border:2px solid var(--borde);background:#fff;
  font-size:14px;font-weight:600;
  cursor:pointer;transition:all .15s;user-select:none;
}
.quitar-chip:hover{border-color:#C9C9C9}
.quitar-chip.quitado{
  border-color:var(--rojo);background:#FFF1F1;color:var(--rojo);
  text-decoration:line-through;
}
.quitar-chip .marca{color:inherit}
.quitar-chip:not(.quitado) .marca{color:#4FA86A}

/* --- Cantidad --- */
.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;
  transition:background .15s;
}
.cantidad button:hover{background:var(--gris-claro)}
.cantidad span{min-width:32px;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:74px;
}
.notas:focus{outline:none;border-color:var(--amarillo)}

/* ---------------- Carrito ---------------- */
.panel{
  position:fixed;top:0;right:0;height:100dvh;width:100%;max-width:440px;
  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:18px 20px;border-bottom:1px solid var(--borde);flex-shrink:0;
}
.panel-cab h3{font-size:19px;font-weight:800;flex:1}
.panel-cuerpo{
  flex:1;overflow-y:auto;padding:16px 20px;
  /* Evita que al arrastrar hacia abajo dentro del carrito se dispare
     el "recargar pagina" del celular y saque al cliente del pedido. */
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
body.carrito-abierto{overscroll-behavior-y:none}

/* Barra de arriba del carrito: cuantos productos y vaciar */
.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;
  transition:background .15s, color .15s;
}
.vaciar-carrito:hover{background:#FFF1F1;color:var(--rojo)}

/* Enlaces de cada linea del carrito */
.linea-enlaces{display:flex;gap:16px;margin-top:8px}
.enlace-linea{
  font-size:12.5px;font-weight:600;color:var(--gris);
  text-decoration:underline;padding:2px 0;
}
.enlace-linea:hover{color:var(--negro)}
.enlace-linea.borrar:hover{color:var(--rojo)}
.panel-pie{border-top:1px solid var(--borde);padding:18px 20px;flex-shrink:0;background:#fff}

.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-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{color:var(--rojo)}
.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:26px;height:26px;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}
.quitar-linea{font-size:12.5px;color:var(--gris);text-decoration:underline}
.quitar-linea:hover{color:var(--rojo)}

.vacio{text-align:center;padding:56px 20px;color:var(--gris)}
.vacio-ico{margin-bottom:14px;opacity:.28}

.resumen{display:flex;justify-content:space-between;font-size:15px;margin-bottom:7px}
.resumen.total{font-size:21px;font-weight:800;margin:12px 0 16px}

/* Datos de entrega: va DENTRO del area que se desplaza (no en el pie
   fijo) y SIEMPRE visible, no plegado: si queda escondido el cliente
   no se entera de que hay que llenarlo y se va derecho al boton. */
.bloque-entrega{
  border-top:1px solid var(--borde);
  margin-top:14px;padding-bottom:8px;
}
.titulo-entrega{
  font-size:14px;font-weight:800;letter-spacing:.6px;
  padding:16px 0 14px;display:flex;align-items:center;gap:8px;
  color:var(--negro);
}

/* Boton para seguir pidiendo sin tener que cerrar el carrito */
.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;color:var(--negro);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:#FFFDF2}
.btn-mas-productos strong{font-size:14.5px;font-weight:800}

/* Aviso del pie: si ya lleno los datos o le falta */
.estado-entrega{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:11px 13px;border-radius:12px;margin-bottom:11px;
  font-size:13px;line-height:1.35;text-align:left;
}
.estado-entrega.falta{background:#FFF4E5;color:#8A4B00}
.estado-entrega.listo{background:#EAF7EE;color:#1B6E33}
.estado-entrega strong{font-weight:800}

/* ---------------- Pantalla de revisar el pedido ---------------- */
.paso-final{
  font-size:14px;line-height:1.5;color:#7A5A00;
  background:#FFF8E6;padding:12px 14px;border-radius:12px;margin-bottom:18px;
}
.res-bloque{margin-bottom:22px}
.res-bloque h4{
  font-size:12.5px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--gris);margin-bottom:10px;
}
.res-linea{
  display:flex;align-items:center;gap:11px;
  padding:10px 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-info{flex:1;min-width:0}
.res-nombre{font-size:14.5px;font-weight:700}
.res-detalle{font-size:12px;color:var(--gris);line-height:1.45;margin-top:2px}
.res-detalle .quita{color:var(--rojo);font-weight:600}
.res-precio{font-size:14.5px;font-weight:800;white-space:nowrap}
.res-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0 0;font-size:18px;font-weight:800;
}
.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 del domicilio: tiene que verse sí o sí antes de enviar */
.aviso-domicilio{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--amarillo);color:#3D2F00;
  border-radius:14px;padding:15px 16px;margin-top:6px;
}
.aviso-domicilio .ico-svg{flex-shrink:0;margin-top:1px}
.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;
}

/* ---------------- Formulario ---------------- */
.campo{margin-bottom:15px}
.campo label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.campo label .op{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:15px;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:#B26A00;font-weight:600}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.obligatorio{color:var(--rojo);font-weight:800}

/* Campo con error: se marca en rojo y se explica debajo */
.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:600;margin-top:5px;
  display:flex;align-items:center;gap:5px;
}

/* Recordar mis datos */
.recordar{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 14px;border-radius:12px;
  background:var(--gris-claro);cursor:pointer;margin-bottom:10px;
}
.recordar input{
  width:20px;height:20px;accent-color:var(--rojo);
  cursor:pointer;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:13px 15px;border-radius:12px;font-size:13.5px;
  display:flex;gap:10px;align-items:flex-start;margin-bottom:15px;line-height:1.45;
}
.aviso .ico{font-size:17px;flex-shrink:0;line-height:1.2}
.aviso-ok{background:#EAF7EE;color:#1B6E33}
.aviso-mal{background:#FDECEC;color:#A61B1B}
.aviso-info{background:#FFF8E6;color:#7A5A00}

/* ---------------- 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}
.puntaje .estrellas{margin-bottom:4px}
.opinion p{font-size:14.5px;line-height:1.6;margin-bottom:14px}
.opinion .autor{font-weight:700;font-size:14px}
.opinion .meta{font-size:12px;color:var(--gris)}
.puntaje{
  display:flex;align-items:center;gap:14px;
  background:var(--gris-claro);border-radius:var(--radio);
  padding:20px 24px;margin-bottom:26px;flex-wrap:wrap;
}
.puntaje .num{font-size:42px;font-weight:800;line-height:1}

/* ---------------- Pie ---------------- */
.pie{background:var(--negro);color:#fff;padding:52px 0 26px;margin-top:40px}
.pie-rejilla{display:grid;grid-template-columns:2fr 1fr 1fr;gap:38px;margin-bottom:34px}
.pie h4{font-size:15px;font-weight:800;margin-bottom:14px}
.pie p,.pie li{font-size:14px;color:#C9C9C9;line-height:1.75;list-style:none}
.pie a:hover{color:var(--amarillo)}
.redes{display:flex;gap:10px;margin-top:16px}
.redes a{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  transition:background .15s, transform .15s;
}
.redes a:hover{background:var(--amarillo);transform:translateY(-3px)}
.pie-abajo{
  border-top:1px solid rgba(255,255,255,.14);padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  align-items:center;
  font-size:12.5px;color:#9A9A9A;
}
/* Entrada al panel: se ve, pero no llama la atención del cliente */
.enlace-admin{
  font-size:11.5px;color:#6E6E6E;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  transition:color .15s, border-color .15s;
}
.enlace-admin:hover{color:var(--amarillo);border-color:rgba(255,199,44,.5)}

/* ---------------- Boton flotante WhatsApp ---------------- */
.wa-flotante{
  position:fixed;bottom:22px;left:22px;z-index:700;
  width:56px;height:56px;border-radius:50%;
  background:var(--verde-wa);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  box-shadow:0 6px 20px rgba(37,211,102,.45);
  transition:transform .18s;
}
.wa-flotante:hover{transform:scale(1.09)}

/* ---------------- 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.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 cubic-bezier(.2,.8,.2,1);
}
.capa-zoom.abierta .zoom-marco img{transform:scale(1)}
.zoom-nombre{
  order:-1;padding:16px 20px 0;width:100%;text-align:center;
  font-size:17px;font-weight:800;letter-spacing:-.3px;
}
.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:700;
  border-radius:0;
}
.zoom-cerrar:active{background:#333}
@media (min-width:721px){
  .zoom-cerrar{
    width:auto;min-width:230px;margin:22px auto 30px;
    border-radius:999px;padding:15px 34px;
  }
}
.plato-foto{cursor:zoom-in}

/* ---------------- 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:1200;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}
/* Con el carrito abierto, el aviso sube para no taparle
   el boton de "Pedir por WhatsApp" al cliente.
   Se usa una clase en el <body> (la pone app.js al abrir el
   carrito) en vez de un selector de hermanos: es mas facil de
   revisar y no depende del orden de los elementos. */
body.carrito-abierto .toast{bottom:220px}

/* ---------------- Responsive ---------------- */
@media (max-width:720px){
  .hero-video{min-height:calc(100svh - 66px)}
  .hero-video-texto{padding:38px 0 calc(30px + env(safe-area-inset-bottom,0px))}
  .plato-dia-boton{width:100%}
}
@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}
}
@media (max-width:720px){
  .cabecera-fila{height:66px;gap:10px}
  .barra-categorias{top:66px}
  .logo img{height:42px;width:42px}
  .logo-texto{font-size:17px;letter-spacing:-.5px}
  .logo-texto span{font-size:9.5px;letter-spacing:1.2px}
  .chips{gap:2px;padding:8px 14px 0}
  .chip{min-width:86px;padding:5px 9px 0;font-size:12px}
  .chip-foto{width:52px;height:52px}
  .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:14px}
  .btn-carrito .txt{display:none}

  .rejilla-cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-tarjeta{padding:14px 8px 16px}
  /* En celular van 2 por fila. Se deja PROPORCIONAL y no en pixeles
     fijos: con un valor fijo, en un telefono angosto (320px) la foto
     quedaba a 9px del borde de la tarjeta, apretada. Asi crece y se
     encoge con la tarjeta y siempre le queda aire. */
  .cat-foto{width:min(150px,80%);aspect-ratio:1;height:auto;margin-bottom:10px}
  .cat-tarjeta .ico{width:58px;height:58px}
  .cat-tarjeta h3{font-size:14.5px}

  .rejilla-platos{grid-template-columns:repeat(2,1fr);gap:12px}
  .plato-cuerpo{padding:12px 12px 14px}
  .plato-nombre{font-size:14px}
  .plato-desc{display:none}
  .plato-precio{font-size:17px;margin-bottom:9px}
  .btn-personalizar{padding:9px;font-size:12.5px}
  .btn-agregar{padding:10px;font-size:13px}

  .rejilla-op{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr;gap:26px}
  /* cabecera 66 + cinta de categorias ~90 */
  .seccion{padding:36px 0;scroll-margin-top:160px}
  .linea-enlaces{gap:20px}
  .enlace-linea{font-size:13px;padding:4px 0}
  .hero{padding:38px 0 30px}
  .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}
  .wa-flotante{bottom:16px;left:16px;width:50px;height:50px;font-size:25px}
}

/* ---------------- Impresion ---------------- */
@media print{
  .cabecera,.barra-categorias,.wa-flotante,.plato-acciones,.pie{display:none}
}

/* --- Fraunces en los titulos de Nosotros y Contactenos (02-sep-2026) ---
   Gabriel escogio la opcion B: SOLO los titulos.
   El texto corrido se queda en Outfit porque en el celular tres parrafos
   seguidos en letra serif se leen mas lento.
   OJO: el pie de pagina usa h4 y queda por fuera a proposito. El pie es
   igual en las 4 paginas; si se cambia solo aqui, se ve distinto al de
   la portada y la carta. */
.serif-titulos h1,
.serif-titulos h2,
.serif-titulos h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-variation-settings:'SOFT' 40,'WONK' 1;
}


/* ================= Los afiches de la dueña =================
   Cierran cada seccion de la carta. Son DECORATIVOS: no son enlaces,
   no cambian con el mouse y no se pueden tocar. Por eso no llevan
   cursor:pointer ni efecto de hover: si se movieran, el cliente
   creeria que hacen algo y no hacen nada. */
.afiche{
  border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--borde);
  background:var(--blanco);
  display:flex;align-items:stretch;
  box-shadow:var(--sombra);
}
.afiche img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* object-position arriba: los afiches llevan el logo abajo y el
     mensaje arriba; si se recorta, que se pierda el logo y no el
     mensaje. */
  object-position:center top;
}

/* ================= La letra gorda de los afiches =================
   Baloo 2 va SOLO donde hay poco texto y letra grande. Nunca en
   parrafos: es una letra de aviso, cansa leyendo de corrido. */
.cat-tarjeta h3,
.seccion-titulo,
.plato-precio,
.cinta-dia{
  font-family:var(--gordas);
}
.seccion-titulo{font-weight:800;letter-spacing:-.4px}
.cat-tarjeta h3{font-weight:800;font-size:17.5px}
.plato-precio{font-weight:800}
/* En Nosotros y Contactenos manda Fraunces, que fue lo que se escogio
   para esas dos paginas. Se repite el selector con mas peso para que
   le gane a la regla de arriba. */
.serif-titulos .seccion-titulo{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
}

/* El verde de los afiches, como acento */
.seccion-cinta{background:var(--verde);color:#fff}



/* En celular la seccion de la carta va a 2 columnas, asi que el afiche
   ocupa una casilla y queda del alto de una tarjeta de plato.
   Se le deja el alto libre para que no se deforme. */
@media (max-width:720px){
  .tira-afiche{padding:32px 0 34px}
  .afiche img{object-position:center top}
}


/* ==================================================================
   LOS CARTELES DE LA CASA  (final de Inicio, Nosotros y Contactenos)

   Son los afiches de la dueña, pero rehechos en html para poder
   animarlos: un JPEG es una foto plana y no se le pueden mover las
   manecillas ni teclear las letras.
   Mismos colores medidos de los afiches. La letra es Baloo 2, que es
   la mas parecida que hay gratis; la de ellos es de pago.
   El SELLO si es el de verdad, recortado del afiche: por eso el fondo
   de cada cartel usa EXACTAMENTE el color del recorte, para que el
   cuadrito de la imagen se funda y no se vea el borde.
   ================================================================== */
.cartel{
  position:relative;overflow:hidden;
  padding:clamp(30px,5vw,46px) 0;
}
.cartel-caja{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,4vw,44px);flex-wrap:wrap;text-align:center;
}
.cartel-sello{
  width:clamp(94px,15vw,132px);height:auto;display:block;flex-shrink:0;
  border-radius:6px;
}
.cartel-texto{
  font-family:var(--gordas);font-weight:800;line-height:.95;
  letter-spacing:-.4px;margin:0;
}

/* ---------- 1. Inicio: HORA DE PEDIR ALMUERZO ---------- */
/* #E12D2C es el rojo EXACTO del recorte del sello, no el del sitio:
   asi el cuadrito del sello desaparece contra el fondo. */
.cartel-almuerzo{background:#E12D2C}
.cartel-almuerzo .arriba{color:var(--crema-fuerte);font-size:clamp(26px,5.6vw,44px)}
.cartel-almuerzo .abajo{color:var(--amarillo-afiche);font-size:clamp(30px,6.6vw,54px)}
.cartel-almuerzo .tel{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--amarillo-afiche);color:#C8221F;
  font-family:var(--gordas);font-weight:800;
  font-size:clamp(17px,3.2vw,25px);letter-spacing:.5px;
  padding:8px 20px;border-radius:999px;margin-top:12px;
  font-variant-numeric:tabular-nums;
}

/* El reloj. Las manecillas giran de verdad, no es un gif. */
.reloj{width:clamp(88px,15vw,124px);height:auto;flex-shrink:0;color:var(--crema-fuerte)}
/* OJO: el centro del reloj esta en 200,200 dentro del viewBox de
   400x400. Si el eje se pone en otro punto, las manecillas no giran
   sobre su base: se van dando vueltas por el cuadro. */
.reloj .aguja{transform-origin:200px 200px}
.reloj .horas{animation:girar 12s linear infinite}
.reloj .minutos{animation:girar 2s linear infinite}
@keyframes girar{ to{ transform:rotate(360deg) } }

/* ---------- 2. Nosotros: AQUI SE COME SABROSO ---------- */
/* #F4C329 es el amarillo exacto del recorte del sello. */
.cartel-sabroso{background:#F4C329}
.cartel-sabroso .cartel-texto{
  color:var(--rojo);font-size:clamp(23px,5.4vw,48px);
  /* El efecto de maquina de escribir: la caja crece de 0 a su ancho en
     pasos, uno por letra, y lo que sobra queda tapado. Necesita ir en
     UNA sola linea (nowrap), por eso este cartel es horizontal. */
  white-space:nowrap;overflow:hidden;
  width:20ch;max-width:100%;
  border-right:.09em solid var(--rojo);
  animation:teclear 2.6s steps(20,end) .4s both, cursor .75s step-end infinite;
}
.cartel-sabroso .cr{color:#FFF8EC}
@keyframes teclear{ from{width:0} to{width:20ch} }
@keyframes cursor{ 50%{border-color:transparent} }

/* ---------- 3. Contactenos: SANCOCHOS ---------- */
.cartel-sancochos{background:#F4C329}
.cartel-sancochos .cartel-caja{flex-direction:column;gap:6px;position:relative;z-index:1}
.cartel-sancochos .titulo{color:var(--verde);font-size:clamp(24px,5.2vw,42px)}
.cartel-sancochos .lista{
  color:var(--rojo);font-size:clamp(19px,4.4vw,38px);line-height:1.06;
  max-width:20ch;
}
.cartel-sancochos .pide{
  color:var(--verde);font-size:clamp(16px,3vw,25px);margin-top:4px;
}
/* Los rayos titilan INTERCALADOS: a cada uno se le corre el arranque,
   asi que nunca se prenden todos a la vez.
   Van DOS soles, uno a cada lado del texto, y no uno solo detras:
   se probo con uno centrado y los rayos cruzaban por encima de las
   letras y estorbaban la lectura. Asi acompanan sin tapar. */
.rayos-titilan{
  position:absolute;top:50%;transform:translateY(-50%);
  height:min(240px,150%);width:auto;color:var(--rojo);pointer-events:none;
}
.rayos-titilan.izq{left:clamp(-58px,2vw,26px)}
.rayos-titilan.der{right:clamp(-58px,2vw,26px)}
/* En pantalla angosta no caben a los lados: se esconden y queda el
   texto solo, que es lo que importa. */
@media (max-width:620px){ .rayos-titilan{display:none} }
/* El "both" importa: sin el, los rayos que tienen retraso se quedan a
   plena luz hasta que les llega el turno, y al cargar se ven casi todos
   prendidos. Con "both" arrancan ya apagaditos. */
.rayos-titilan line{animation:titilar 1.9s ease-in-out infinite both}
@keyframes titilar{ 0%,100%{opacity:.22} 50%{opacity:.85} }

/* Si el celular esta puesto en "reducir animaciones" (lo usa quien se
   marea con el movimiento), se quedan quietos y el texto se muestra
   completo. Nunca dejarlo a medio teclear. */
@media (prefers-reduced-motion:reduce){
  .reloj .horas,.reloj .minutos,.rayos-titilan line{animation:none}
  .cartel-sabroso .cartel-texto{animation:none;width:auto;border-right:none}
  .rayos-titilan line{opacity:.5}
}