/* =============================================================
   DELI FRESITA · LA CHINITA · diseño propio
   Mantel de cuadritos rosas (como su menú y su local), rojo fresa,
   crema y chocolate. Detalle vivo: el vaso que se sirve al tocar.
   ============================================================= */
:root {
  --rojo: #e5232b;
  --rojo-osc: #b5141c;
  --rosa: #f7c3d6;
  --rosa-claro: #fde8f0;
  --chicle: #ec5f98;
  --crema: #fffaf4;
  --choco: #5b2a17;
  --texto: #3b1d12;
  --suave: #8a5a4a;
  --verde: #1f9d55;
  --sombra: 0 6px 0 rgba(91, 42, 23, .12), 0 10px 24px rgba(229, 35, 43, .10);
  --radio: 22px;
  --titulo: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --letra: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--texto); font: 400 15px/1.45 var(--letra);
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(247, 195, 214, .45) 50%, transparent 0),
    linear-gradient(rgba(247, 195, 214, .45) 50%, transparent 0);
  background-size: 44px 44px;
}
body.con-pagina { overflow: hidden; }
img { display: block; max-width: 100%; }
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.numero { font-family: var(--letra); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.perfil { max-width: 480px; margin: 0 auto; padding: 0 16px 28px; }

/* ---------- entrada ---------- */
.sube { animation: sube .6s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }

/* ---------- portada ---------- */
.portada { position: relative; text-align: center; padding: 22px 0 4px; }
.logo { margin: 0 auto; width: min(54vw, 210px); }
.logo img { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(229, 35, 43, .22)); }
.frase {
  display: inline-block; margin: 10px 0 0; padding: 6px 16px; border-radius: 999px;
  background: var(--rojo); color: #fff; font: 400 17px/1.2 var(--titulo); letter-spacing: .02em;
  box-shadow: 0 4px 0 var(--rojo-osc);
}
.estado {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content;
  margin: 12px auto 0; padding: 6px 14px; border-radius: 999px; background: #fff;
  font-weight: 600; font-size: 14px; box-shadow: 0 2px 0 rgba(91, 42, 23, .1);
}
.estado i { width: 9px; height: 9px; border-radius: 50%; background: #b9a29a; }
.estado.abierto { color: #157a41; } .estado.abierto i { background: var(--verde); box-shadow: 0 0 0 4px rgba(31, 157, 85, .18); }
.estado.cerrado { color: var(--rojo-osc); } .estado.cerrado i { background: var(--rojo); }

/* fresitas que caen al entrar */
.lluvia { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.lluvia i { position: absolute; top: -40px; width: var(--t); height: var(--t); color: var(--rojo); animation: cae linear forwards; }
.lluvia svg { width: 100%; height: 100%; }
@keyframes cae { to { transform: translateY(110vh) rotate(var(--giro)); opacity: .9; } }

/* ---------- el vaso vivo ---------- */
.viva { margin: -6px auto 4px; }
.vaso-caja { position: relative; display: grid; justify-items: center; padding-top: 6px; }
.vaso {
  position: relative; width: 190px; height: 225px; padding: 0; border: 0; background: none;
  touch-action: manipulation;
}
.vaso svg { width: 100%; height: 100%; overflow: visible; }
.vaso:focus-visible { outline: 3px solid var(--chicle); outline-offset: 6px; border-radius: 24px; }
.vaso .capa { opacity: 0; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.vaso .c1 { transform: translateY(-40px); }
.vaso .c2 { transform: translateY(40px); }
.vaso .c2b { transform: translateY(30px) scale(.6); transform-origin: 110px 90px; }
.vaso .c3, .vaso .c3b { transform: translateY(-24px); }
.vaso .c4 { transform: translateY(-50px); }
.vaso.p1 .c1,
.vaso.p2 .c1, .vaso.p2 .c2, .vaso.p2 .c2b,
.vaso.p3 .c1, .vaso.p3 .c2, .vaso.p3 .c2b, .vaso.p3 .c3, .vaso.p3 .c3b,
.vaso.p4 .capa { opacity: 1; transform: none; }
.pista {
  position: absolute; right: calc(50% - 150px); top: 92px; display: flex; align-items: center; gap: 4px;
  pointer-events: none; animation: pista 1.6s ease-in-out infinite;
}
.pista i { width: 34px; height: 34px; transform: rotate(-20deg); }
.pista b {
  max-width: 82px; padding: 5px 9px; border-radius: 12px; background: var(--choco); color: #fff;
  font: 600 12px/1.2 var(--letra);
}
@keyframes pista { 50% { transform: translateX(-6px); } }
.etapas { display: flex; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.etapas li {
  padding: 3px 9px; border-radius: 999px; background: #fff; color: #b39189;
  font-size: 12px; font-weight: 600; border: 2px dashed var(--rosa); transition: all .25s;
}
.etapas li.lista { background: var(--rojo); color: #fff; border: 2px solid var(--rojo); }
.pista[hidden] { display: none; }
.globo {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 8px 8px 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sombra);
  animation: globo .4s cubic-bezier(.2, .9, .3, 1.4) both;
}
.globo[hidden] { display: none; }
.globo strong { font: 400 18px/1 var(--titulo); color: var(--rojo); }
@keyframes globo { from { opacity: 0; transform: translateY(-8px) scale(.85); } }
.mini {
  border: 0; border-radius: 999px; padding: 8px 16px; background: var(--rojo); color: #fff;
  font-weight: 700; font-size: 14px; box-shadow: 0 3px 0 var(--rojo-osc);
}
.chispa { position: absolute; left: 50%; top: 40px; width: 20px; height: 20px; color: var(--rojo); pointer-events: none; }
.chispa svg { width: 100%; height: 100%; }

/* ---------- botones ---------- */
.botones { display: grid; gap: 10px; margin-top: 14px; }
.botones.redes, .botones.utiles { grid-template-columns: 1fr 1fr; }
.boton {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; width: 100%;
  border: 0; border-radius: var(--radio); text-align: left; text-decoration: none;
  box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s;
}
.boton:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(91, 42, 23, .12); }
.boton:focus-visible { outline: 3px solid var(--choco); outline-offset: 3px; }
.boton .ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .22); }
.boton .ico svg { width: 24px; height: 24px; }
.boton span { display: grid; min-width: 0; }
.boton b { font: 400 18px/1.15 var(--titulo); letter-spacing: .01em; }
.boton small { font-size: 13px; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton small.numero { font-size: 15px; font-weight: 600; }
.boton.grande { min-height: 74px; }
.boton.grande b { font-size: 21px; }
.boton.rojo { background: var(--rojo); color: #fff; box-shadow: 0 6px 0 var(--rojo-osc), 0 12px 24px rgba(229, 35, 43, .25); }
.boton.rojo .ico { color: #fff; }
.boton.rojo .ico svg { color: #fff; }
.boton.whats { background: var(--verde); color: #fff; box-shadow: 0 6px 0 #157a41, 0 12px 24px rgba(31, 157, 85, .2); }
.boton.rosa { background: var(--rosa); color: var(--choco); box-shadow: 0 6px 0 #e59ab8; }
.boton.rosa .ico { background: #fff; color: var(--rojo); }
.boton.blanco { background: #fff; color: var(--texto); }
.boton.blanco .ico { background: var(--rosa-claro); color: var(--rojo); }
.botones.redes .boton, .botones.utiles .boton { padding: 10px 12px; gap: 9px; }
.botones.redes .boton b, .botones.utiles .boton b { font-size: 16px; }
.botones.redes .boton .ico, .botones.utiles .boton .ico { width: 34px; height: 34px; }
.ancho { width: 100%; }

/* ---------- local ---------- */
.local, .lugar {
  margin-top: 18px; padding: 16px; border-radius: var(--radio); background: var(--crema);
  box-shadow: var(--sombra); border: 3px solid #fff;
}
.local h2, .lugar h2 { margin: 0 0 10px; font: 400 22px/1.1 var(--titulo); color: var(--rojo); }
.tira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none;
}
.tira::-webkit-scrollbar { display: none; }
.tira img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; scroll-snap-align: center; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(91, 42, 23, .12); }
.dir { margin: 0 0 12px; font-weight: 600; }
.h-horario { margin-top: 18px !important; }
.horario-corto { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff; font-weight: 600; font-size: 16px; }
.horario { margin: 0; padding: 0; list-style: none; }
.horario li { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 10px; }
.horario li.hoy { background: var(--rosa-claro); font-weight: 700; }

.pie { margin-top: 26px; text-align: center; }
.pie a { color: var(--suave); font-size: 12px; text-decoration: none; }

/* ---------- página del menú ---------- */
.pagina {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background-color: var(--crema);
  background-image:
    linear-gradient(90deg, rgba(247, 195, 214, .28) 50%, transparent 0),
    linear-gradient(rgba(247, 195, 214, .28) 50%, transparent 0);
  background-size: 44px 44px;
  animation: entra .28s cubic-bezier(.2, .8, .3, 1);
}
.pagina[hidden] { display: none; }
@keyframes entra { from { opacity: 0; transform: translateY(24px); } }
.barra {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--rojo); color: #fff; box-shadow: 0 4px 0 var(--rojo-osc);
}
.barra h2 { margin: 0; font: 400 22px/1 var(--titulo); }
.atras { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .2); color: #fff; }
.atras svg { width: 22px; height: 22px; }
.cuerpo { max-width: 480px; margin: 0 auto; padding: 14px 16px 120px; }
.intro { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: #fff; font-size: 14px; box-shadow: 0 2px 0 rgba(91, 42, 23, .08); }
.pestanas {
  position: sticky; top: 64px; z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 8px 16px; background: linear-gradient(var(--crema) 70%, transparent);
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: none; padding: 9px 15px; border: 2px solid var(--rosa); border-radius: 999px; background: #fff;
  font: 400 16px/1 var(--titulo); color: var(--choco);
}
.pestanas button[aria-selected="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; box-shadow: 0 3px 0 var(--rojo-osc); }
.cabeza-linea { margin: 6px 0 10px; }
.precios-linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.precios-linea span { display: grid; justify-items: center; padding: 8px 4px; border-radius: 14px; background: #fff; border: 2px solid var(--rosa); }
.precios-linea small { font-size: 12px; color: var(--suave); font-weight: 600; }
.precios-linea b { font-size: 18px; color: var(--rojo); font-weight: 700; }
.nota { margin: 8px 0 0; font-size: 13px; color: var(--suave); }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rejilla.una { grid-template-columns: 1fr; }
.producto {
  display: grid; padding: 0; border: 3px solid #fff; border-radius: 20px; overflow: hidden; background: #fff;
  text-align: left; box-shadow: var(--sombra); animation: sube .45s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.producto:active { transform: scale(.97); }
.producto .foto { display: block; aspect-ratio: 1; background: var(--rosa-claro); }
.rejilla.una .producto .foto { aspect-ratio: 4 / 3; }
.producto img { width: 100%; height: 100%; object-fit: cover; }
.producto .info { display: grid; gap: 2px; padding: 8px 10px 10px; }
.producto .info b { font: 400 16px/1.15 var(--titulo); }
.producto .info em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--rojo); }
.dibujo { display: grid; place-items: center; width: 100%; height: 100%; }
.dibujo svg { width: 62%; height: 62%; }

/* barra del pedido */
.barra-pedido {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 10px; width: min(448px, calc(100% - 32px)); padding: 10px 16px;
  border: 0; border-radius: 20px; background: var(--choco); color: #fff; text-align: left;
  box-shadow: 0 6px 0 #3a1a0e, 0 14px 30px rgba(59, 29, 18, .35);
}
.barra-pedido[hidden] { display: none; }
.barra-pedido .ico svg { width: 26px; height: 26px; }
.barra-pedido > span { display: grid; flex: 1; }
.barra-pedido b { font: 400 18px/1.1 var(--titulo); }
.barra-pedido small { font-size: 12px; opacity: .85; }
.barra-pedido strong { font-size: 20px; font-weight: 700; }

/* ---------- hojas que suben ---------- */
.hoja-fondo {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(59, 29, 18, .45); animation: aparece .2s ease;
}
@keyframes aparece { from { opacity: 0; } }
.hoja {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: 92vh;
  border-radius: 26px 26px 0 0; background: var(--crema); animation: hoja .3s cubic-bezier(.2, .8, .3, 1);
}
@keyframes hoja { from { transform: translateY(100%); } }
.hoja-cuerpo { overflow-y: auto; padding: 16px 16px 8px; }
.hoja-pie { padding: 10px 16px max(14px, env(safe-area-inset-bottom)); background: var(--crema); border-top: 2px solid var(--rosa-claro); }
.cerrar {
  position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: #fff; color: var(--choco); box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.cerrar svg { width: 20px; height: 20px; }
.hoja-foto { width: 100%; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 18px; background: var(--rosa-claro); }
.hoja-foto img { width: 100%; height: 100%; object-fit: cover; }
.hoja-foto .dibujo svg { width: 40%; height: 70%; }
.linea-etq { margin: 12px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--chicle); }
.hoja-titulo { margin: 2px 40px 4px 0; font: 400 26px/1.1 var(--titulo); color: var(--rojo); }
.lista-pedido + .total, .hoja-cuerpo > .hoja-titulo:first-child { margin-top: 4px; }
.lleva { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--choco); }
.incluye { margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px dashed var(--rosa); font-size: 13px; font-weight: 600; }
.precio-grande { margin: 0; font-size: 22px; font-weight: 700; color: var(--rojo); }
.hoja h4 { margin: 16px 0 8px; font: 600 14px/1 var(--letra); color: var(--choco); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips button {
  display: grid; padding: 8px 13px; border: 2px solid var(--rosa); border-radius: 14px; background: #fff;
  font-size: 14px; text-align: left; transition: background .15s, border-color .15s;
}
.chips button b { font-weight: 600; }
.chips button small { font-size: 12px; color: var(--suave); }
.chips button[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.chips button[aria-pressed="true"] small { color: #ffe3ea; }
.chips.tamanos { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.chips.tamanos button { text-align: center; justify-items: center; }
.chips.tamanos button small { font-size: 15px; font-weight: 700; color: var(--rojo); }
.chips.tamanos button[aria-pressed="true"] small { color: #fff; }
.chips.tipos { display: grid; }
.cantidad { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.cantidad > span { font-weight: 600; }
.cantidad div { display: flex; align-items: center; gap: 12px; }
.cantidad button { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--rosa); color: var(--choco); font-size: 22px; font-weight: 700; }
.cantidad button:disabled { opacity: .4; }
.cantidad output { min-width: 22px; text-align: center; font-size: 18px; font-weight: 700; }
.bloque[hidden] { display: none; }

.lista-pedido { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lista-pedido li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.lista-pedido li > div { display: grid; flex: 1; min-width: 0; }
.lista-pedido b { font-weight: 600; }
.lista-pedido small { color: var(--suave); font-size: 12px; }
.lista-pedido .precio { font-weight: 700; color: var(--rojo); }
.quitar { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--rosa-claro); color: var(--rojo-osc); }
.quitar svg { width: 16px; height: 16px; }
.total { margin: 12px 0 0; font: 400 20px/1.1 var(--titulo); color: var(--choco); text-align: right; }
.campo { display: grid; gap: 6px; margin-top: 12px; font-weight: 600; font-size: 14px; }
.campo input, .campo textarea {
  width: 100%; padding: 11px 13px; border: 2px solid var(--rosa); border-radius: 14px; background: #fff;
  font: 400 16px/1.3 var(--letra); color: var(--texto);
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--rojo); }

/* aviso flotante */
.aviso {
  position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 18px; border-radius: 999px; background: var(--choco); color: #fff; font-weight: 600; font-size: 14px;
  transition: all .25s; pointer-events: none;
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- sin animaciones (?quieto o preferencia del celular) ---------- */
.quieto *, .quieto *::before, .quieto *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 359px) {
  .botones.redes, .botones.utiles { grid-template-columns: 1fr; }
}