/* Anany · v2. Tokens y reglas en DESIGN.md */
:root {
  --rosa-pared: #FFC7D4;
  --crema-letras: #FDFBD3;
  --cafe-mandil: #7A4A36;

  /* Tema activo: lo cambia app.js con cada bebida (arranca en caramel) */
  --fondo: #FBF1E1;
  --capa: #EBCFAA;
  --tinta: #4A2F1E;
  --acento: #9C5A24;
  --display: 'Chewy', system-ui, sans-serif;
  --display-peso: 400;
  --display-caja: none;
  --titulos: 'Chewy', system-ui, sans-serif;

  --texto: 'Fredoka', system-ui, sans-serif;
  --lata-h: clamp(210px, 33svh, 330px);
  --escala-ing: 1;
  --t-color: 900ms ease;
  --resorte: cubic-bezier(.34, 1.3, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  transition: background-color var(--t-color), color var(--t-color);
  overflow-x: hidden;
}
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }

.saltar { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--tinta); color: var(--fondo); padding: 8px 14px; border-radius: 999px; }
.saltar:focus { left: 12px; }

/* ── Barra ─────────────────────────────── */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--fondo);
  box-shadow: 0 1px 0 rgba(60, 30, 20, .08);
  transition: background-color .5s ease, box-shadow .3s ease;
}
.barra.sobre-inicio { background: transparent; box-shadow: none; }
main > section { scroll-margin-top: 66px; }
.marca { display: flex; align-items: center; gap: 6px; flex: none; color: var(--tinta); text-decoration: none; }
.marca-sol { --sol-trazo: 6.5; width: 32px; height: 32px; transition: rotate .9s var(--resorte); }
.marca:hover .marca-sol { rotate: 90deg; }
.marca-palabra { height: 26px; width: 68px; }
.nav { display: none; }
.barra-der { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Estado con forma de popote: rayas, punta cortada en diagonal y una perla de boba entrando */
.estado {
  position: relative; display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0;
  padding: 6px 18px 6px 7px; border-radius: 999px 6px 6px 999px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: repeating-linear-gradient(-58deg, var(--capa) 0 8px, color-mix(in srgb, var(--capa) 45%, #fff) 8px 16px);
  font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums; color: var(--tinta); text-decoration: none;
  transition: background-color var(--t-color), transform .3s var(--resorte);
}
/* Verde abierto, rojo cerrado: ≥4.5:1 sobre la capa de todas las bebidas */
.estado.abierto, #estadoMenu.abierto { color: #155A29; }
.estado.cerrado, #estadoMenu.cerrado { color: #8F1414; }
.estado:hover { transform: translateX(-3px); }
.estado:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tinta); }  /* el clip-path cortaría un outline */
.estado::before {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}
.estado.abierto::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 0 0 4px var(--acento); animation: lateAbierto 2.4s ease-in-out infinite; }
@keyframes lateAbierto { 50% { transform: scale(.82); } }
.estado-largo { display: none; }
.bolsa-btn {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--tinta); background: transparent;
  display: grid; place-items: center;
}
.bolsa-btn svg { width: 26px; height: 26px; }
.bolsa-cuenta {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--acento); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  transition: background-color var(--t-color), transform .3s var(--resorte);
}
.bolsa-cuenta[data-n="0"] { transform: scale(0); }
.bolsa-btn.brinca .bolsa-cuenta { animation: brinca .45s var(--resorte); }
@keyframes brinca { 40% { transform: scale(1.45); } }

/* Menú de tres líneas que terminan en perlas de boba */
.perla { background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06); }
.boba-btn {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--tinta); background: transparent; padding: 0 7px 0 0;
  display: grid; align-content: center; justify-items: center; gap: 5px;
}
.boba-linea { position: relative; display: block; width: 20px; height: 2.4px; border-radius: 2px; background: var(--tinta); transition: transform .4s var(--resorte), opacity .25s ease; }
.boba-linea:nth-child(2) { width: 14px; justify-self: center; translate: -3px 0; }
.boba-linea i {
  position: absolute; right: -8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06);
  transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .3s ease;
}
.boba-linea:nth-child(2) i { transition-delay: .05s; }
.boba-linea:nth-child(3) i { transition-delay: .1s; }
/* Abierto ya no hay perlas a la derecha: sin el margen que les hacía lugar, la X queda al centro del círculo */
.boba-btn.abierto { padding: 0; }
.boba-btn.abierto .boba-linea:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.boba-btn.abierto .boba-linea:nth-child(2) { opacity: 0; }
.boba-btn.abierto .boba-linea:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }
.boba-btn.abierto .boba-linea i { transform: translate(-4px, 26px); opacity: 0; }

.menu-movil {
  border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: var(--fondo); color: var(--tinta);
}
.menu-movil::backdrop { background: transparent; }
.menu-movil[open] { animation: menuEntra .35s var(--suave); }
@keyframes menuEntra { from { opacity: 0; } }
.menu-movil-hoja:focus { outline: none; }
.menu-movil-hoja { position: relative; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; padding: 10px 16px 150px; overflow: hidden; }
.menu-movil-cabeza { display: flex; justify-content: space-between; align-items: center; }
.menu-movil-nav { display: grid; align-content: center; gap: 2px; }
.menu-movil-nav a {
  display: flex; align-items: center; gap: 16px; padding: 6px 0; text-decoration: none;
  font-family: var(--titulos); font-weight: 400;
  font-size: clamp(40px, 12vw, 58px); line-height: 1.05;
  animation: linkEntra .5s var(--suave) both;
}
.menu-movil-nav a:nth-child(2) { animation-delay: .06s; }
.menu-movil-nav a:nth-child(3) { animation-delay: .12s; }
.menu-movil-nav a:nth-child(4) { animation-delay: .18s; }
.menu-movil-nav a::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06); transition: transform .3s var(--resorte); }
.menu-movil-nav a:hover::before, .menu-movil-nav a:focus-visible::before { transform: scale(1.4); }
@keyframes linkEntra { from { opacity: 0; transform: translateX(-18px); } }
.menu-movil .cta-pedir { justify-self: start; }
.menu-movil-horario { font-size: 14px; line-height: 1.6; }
.menu-movil-fondo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: var(--capa); border-radius: 50% 50% 0 0 / 34px 34px 0 0;
}
.menu-movil-fondo img {
  position: absolute; bottom: 14px; left: var(--x); width: var(--s); height: auto; translate: -50% 0;
  filter: drop-shadow(0 6px 6px rgba(40, 20, 10, .25));
  animation: cae .8s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: calc(.2s + var(--i) * 70ms);
}
@keyframes cae { from { transform: translateY(-340px); opacity: 0; } 30% { opacity: 1; } }

/* ── Inicio: la lata fija y la casa cambiando de color ── */
.inicio {
  --palabra: color-mix(in srgb, var(--acento) 42%, var(--capa));
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh;
  display: grid; grid-template-rows: auto auto auto; align-content: start;
  padding: 72px 16px 20px;
  background: var(--fondo); color: var(--tinta);
  transition: background-color .7s ease, color .7s ease;
}
.inicio::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 44% at 50% 38%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 72%);
}
/* Alto fijo: aunque cambie el texto de abajo, el espacio de la lata no se recorre */
.inicio-escenario { position: relative; display: grid; place-items: center; height: calc(46svh + 30px); }
.inicio-sol { position: absolute; left: 50%; top: 50%; width: min(132vw, 80svh); aspect-ratio: 1; translate: -50% -50%; color: #fff; opacity: .8; animation: gira 70s linear infinite; }
.inicio-sol-giro { width: 100%; height: 100%; transition: rotate 1s var(--resorte), scale .6s var(--resorte); }
.inicio-sol svg { width: 100%; height: 100%; display: block; }
@keyframes gira { to { rotate: 360deg; } }
.inicio-palabra {
  position: absolute; left: 50%; top: 50%; width: min(96vw, 1180px); aspect-ratio: 594 / 228; translate: -50% -38%;
  color: var(--palabra); transition: color .7s ease;
  animation: pinta 1.2s .15s var(--suave) both;
}
@keyframes pinta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.inicio-lata { position: relative; z-index: 2; height: 46svh; width: 60%; animation: subeLata 1s .3s var(--resorte) both; }
@keyframes subeLata { from { opacity: 0; transform: translateY(40px) scale(.94); } }
.inicio-lata::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -12px; translate: -50% 0;
  width: 46%; height: 26px; background: radial-gradient(ellipse at center, rgba(40, 20, 10, .32), rgba(40, 20, 10, 0) 70%);
}
.inicio-lata img {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; translate: -50% 0;
  opacity: 0;
  filter: drop-shadow(0 20px 24px rgba(40, 20, 10, .18));
  transition: opacity .4s ease;
}
/* La lata nunca se mueve: solo se funde una sobre otra */
.inicio-lata img.activa { opacity: 1; }
.inicio-ing { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.inicio-ing img {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; translate: -50% -50%;
  filter: drop-shadow(0 12px 12px rgba(40, 20, 10, .18));
  animation: pop .7s var(--resorte) both; animation-delay: var(--d, 0s);
}
.inicio-ing img.lejos { z-index: -1; filter: blur(1.4px); }
.inicio-ing img.sale { animation: popSale .35s ease-in both; }
@keyframes pop { from { opacity: 0; transform: scale(.3) rotate(-30deg); } }
@keyframes popSale { to { opacity: 0; transform: scale(.4) rotate(30deg); } }

.inicio-texto { position: relative; z-index: 4; display: grid; justify-items: center; text-align: center; gap: 10px; }
.inicio-lema { line-height: 1; }
.inicio-lema span, .conocenos-lema span { display: block; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.inicio-lema em, .conocenos-lema em { display: block; font-family: var(--titulos); font-style: normal; font-weight: 400; font-size: clamp(46px, 13vw, 92px); line-height: .95; letter-spacing: .01em; }
.inicio-sub { font-size: 15px; font-weight: 600; }
.inicio-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.inicio-ritmo { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.inicio-ahora { font-size: 13px; font-weight: 700; min-width: 10ch; max-width: 46vw; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inicio-puntos { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.inicio-puntos button { width: 22px; height: 26px; border: 0; padding: 0; background: none; display: grid; place-items: center; }
.inicio-puntos button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 28%, transparent); transition: width .4s var(--resorte), background-color .4s; }
.inicio-puntos button[aria-current="true"]::before { width: 20px; background: var(--tinta); }

/* Botones de acción rápida */
.cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 24px 0 18px; border-radius: 999px;
  font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: .01em;
  transition: transform .3s var(--resorte), background-color .7s ease, color .7s ease, box-shadow .3s ease;
}
.cta svg { width: 26px; height: 26px; stroke-width: 2.4; transition: rotate .45s var(--resorte); }
.cta:hover { transform: translateY(-3px); }
.cta:active { transform: scale(.97); }
.cta-pedir { background: var(--acento); color: #fff; box-shadow: 0 14px 24px -14px var(--acento), inset 0 -3px 0 rgba(0, 0, 0, .14); }
.cta-pedir:hover svg { rotate: -16deg; }
.cta-perlas { display: flex; gap: 3px; margin-left: 2px; }
.cta-perlas i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.cta-pedir:hover .cta-perlas i { animation: rebota .55s var(--resorte); }
.cta-perlas i:nth-child(2) { animation-delay: .07s !important; }
.cta-perlas i:nth-child(3) { animation-delay: .14s !important; }
@keyframes rebota { 40% { transform: translateY(-7px); } }
.cta-menu { background: rgba(255, 255, 255, .66); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.cta-menu:hover { background: var(--capa); }
.cta-menu:hover svg { rotate: 8deg; }

/* ── Escena: la latita real ─────────────── */
.escena {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sel" "lata" "lleva" "ficha";
  gap: 8px;
  padding: 0 16px 28px;
}
/* Luz de estudio detrás de la lata */
.escena::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(ellipse 70% 46% at 50% 26%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.palabra {
  position: absolute; z-index: -1; left: 0; right: 0; top: 214px;
  display: flex; justify-content: center;
  pointer-events: none; user-select: none;
}
.palabra span {
  font-family: var(--display);
  font-weight: var(--display-peso);
  text-transform: var(--display-caja);
  font-size: clamp(96px, 30vw, 380px);
  line-height: .9;
  white-space: nowrap;
  color: var(--palabra, var(--capa));
  transition: color var(--t-color), transform 700ms var(--suave), opacity 400ms ease;
}
.cambiando .palabra span { transform: translateX(-18%); opacity: 0; transition: color var(--t-color), transform 380ms ease-in, opacity 300ms ease; }
.palabra span.desde-derecha { transform: translateX(18%); opacity: 0; transition: none; }

.lata-zona {
  grid-area: lata; position: relative;
  display: grid; place-items: center;
  height: calc(var(--lata-h) + 44px);
  touch-action: pan-y;
}
.lata-foto { position: relative; z-index: 2; height: var(--lata-h); display: grid; place-items: end center; }
.lata-foto::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -10px;
  width: calc(var(--lata-h) * .42); height: 26px; translate: -50% 0;
  background: radial-gradient(ellipse at center, rgba(40, 20, 10, .32), rgba(40, 20, 10, 0) 70%);
  transition: opacity .4s ease;
}
.lata-foto img {
  height: var(--lata-h); width: auto; max-width: none;
  filter: drop-shadow(0 18px 22px rgba(40, 20, 10, .16));
  transition: transform 1000ms var(--resorte), opacity 500ms ease;
  animation: respira 5s ease-in-out infinite alternate;
  user-select: none; -webkit-user-drag: none;
}
@keyframes respira { to { translate: 0 -8px; } }
.cambiando .lata-foto img { transform: translateX(-70%) rotate(-12deg) scale(.86); opacity: 0; transition: transform 420ms ease-in, opacity 320ms ease-in; }
.cambiando .lata-foto::after { opacity: 0; }
.lata-foto img.desde-derecha { transform: translateX(70%) rotate(12deg) scale(.86); opacity: 0; transition: none; }
.lata-foto img.desde-abajo { transform: translateY(50px) scale(.94); opacity: 0; transition: none; }

.ingredientes { position: absolute; inset: 0; pointer-events: none; }
.ingredientes.atras { z-index: 1; }
.ingredientes.frente { z-index: 3; }
.ing {
  --t: calc(var(--s) * var(--escala-ing));
  position: absolute; width: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
}
.ing img { width: 100%; height: auto; animation: flota 6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.ing[data-z="1"] img { filter: blur(1.2px) saturate(.9); opacity: .92; }
.ing[data-z="3"] img { filter: blur(2.2px) drop-shadow(0 14px 14px rgba(40, 20, 10, .18)); }
.ing[data-z="2"] img { filter: drop-shadow(0 10px 10px rgba(40, 20, 10, .14)); }
@keyframes flota { to { transform: translateY(-12px) rotate(7deg); } }

/* Ficha */
.ficha { grid-area: ficha; position: relative; z-index: 3; display: grid; gap: 10px; }
.ficha-grupo { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.ficha-nombre {
  font-family: var(--display);
  font-weight: var(--display-peso);
  text-transform: var(--display-caja);
  font-size: clamp(38px, 11vw, 92px);
  line-height: .94;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ficha-desc { max-width: 36ch; font-size: 16px; }
.ficha-grupo, .ficha-nombre, .ficha-desc { transition: opacity 260ms ease, transform 460ms var(--suave); }
.cambiando .ficha-grupo, .cambiando .ficha-nombre, .cambiando .ficha-desc { opacity: 0; transform: translateY(10px); }
/* va en .ficha (no en .ficha-pedido) para quedarse en la página cuando las opciones pasan a la hoja; -2 px: queda donde
   estaba en la compu */
.ficha-nota { font-size: 13px; opacity: .8; margin-top: -2px; }
/* «Agregar» junto a la lata y los titulitos de la hoja: solo en celular y tablet */
.lata-agregar, .titulo-hoja { display: none; }
.ficha-pedido { display: grid; gap: 8px; margin-top: 4px; }

.tamanos, .temperatura { display: flex; gap: 8px; flex-wrap: wrap; }
.tamano, .temp, .chip-sabor {
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--tinta); background: transparent;
  font-weight: 600; font-size: 15px;
  transition: background-color .25s, color .25s;
}
.tamano[aria-checked="true"], .temp[aria-checked="true"], .chip-sabor[aria-checked="true"] { background: var(--tinta); color: var(--fondo); }
.tamano small { font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; margin-left: 4px; opacity: .8; }
/* el sabor: chips más chicos que se acomodan en renglones (el latte trae 9) */
.opciones-sabor { display: grid; gap: 4px; }
.opciones-titulo { font-size: 13px; font-weight: 700; }
.sabores-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip-sabor { min-height: 32px; padding: 4px 12px; font-size: 14px; border-width: 1.5px; border-color: color-mix(in srgb, var(--tinta) 55%, transparent); }
/* frío o caliente: dos píldoras juntas, como interruptor */
.temperatura { gap: 0; }
.temp { min-width: 92px; }
.temp:first-child { border-radius: 999px 0 0 999px; }
.temp:last-child { border-radius: 0 999px 999px 0; border-left-width: 0; }
/* extras: píldoras con su casilla, en un renglón (topping de boba, leche de avena, cold foam) */
.extras { display: flex; gap: 6px; flex-wrap: wrap; }
.extra {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px 5px 9px; border-radius: 999px;
  border: 1.5px dashed color-mix(in srgb, var(--tinta) 55%, transparent); font-size: 14px; font-weight: 600; cursor: pointer; width: fit-content;
  transition: background-color .25s, color .25s, border-color .25s;
}
.extra input { width: 18px; height: 18px; accent-color: var(--tinta); margin: 0; }
.extra b { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .8; }
.extra:has(input:checked) { border-style: solid; border-color: var(--tinta); background: color-mix(in srgb, var(--capa) 70%, var(--fondo)); }
.extra:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.ficha-acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.precio { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.4ch; }

.btn-principal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 24px; border-radius: 999px; border: 0;
  background: var(--acento); color: #fff;
  font-weight: 700; font-size: 16px;
  transition: background-color var(--t-color), transform .15s ease;
}
.btn-principal:active { transform: scale(.97); }
.btn-principal svg { width: 22px; height: 22px; }
.btn-secundario {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  min-height: 46px; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--tinta); background: transparent;
  font-weight: 700; text-decoration: none;
}
.btn-secundario svg { width: 22px; height: 22px; }

/* Selector de sabores: cintilla en celular, dock en compu */
.selector { grid-area: sel; position: relative; z-index: 4; min-width: 0; margin: 0 -16px; }
/* «Menú» arriba del selector: deja claro que la cintilla de latitas es el menú completo */
.selector-menu { font-family: var(--titulos); font-weight: 400; font-size: clamp(30px, 7vw, 40px); line-height: 1; text-align: center; padding-top: 8px; scroll-margin-top: 80px; }
.selector-titulo { text-align: center; font-size: 13px; font-weight: 600; padding-top: 2px; }
.cinta {
  --sabor-w: 82px;
  position: relative; list-style: none; margin: 0;
  display: flex; align-items: flex-end;
  padding: 38px calc(50% - var(--sabor-w) / 2) 6px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.cinta::-webkit-scrollbar { display: none; }
.sabor { flex: none; scroll-snap-align: center; }
.sabor-btn {
  width: var(--sabor-w); display: grid; justify-items: center; gap: 6px;
  padding: 0 2px 2px; border: 0; background: none;
  -webkit-tap-highlight-color: transparent;
}
.sabor-lata { height: 60px; display: grid; align-items: end; transform-origin: 50% 100%; }
.sabor-lata img {
  height: 60px; width: auto; max-width: none;
  transform-origin: 50% 100%; transform: scale(var(--zoom, 1));
  filter: drop-shadow(0 6px 6px rgba(40, 20, 10, .16));
  transition: transform .12s linear;
}
.sabor-nombre { font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; min-height: 2.3em; }
/* categoría: su lata portada con otra asomándose detrás (se nota que adentro hay varias) y cuántas trae */
.cat-lata { position: relative; isolation: isolate; }
.cat-lata .cat-atras { position: absolute; bottom: 0; left: 50%; z-index: -1; translate: -6% -3px; rotate: 13deg; scale: .84; opacity: .92; }
.cat-cuantas { display: block; font-size: 10.5px; font-weight: 500; opacity: .75; }
/* dentro de una categoría: «‹ Menú» para regresar y el nombre de la categoría */
.selector-titulo b { font-weight: 800; }
.volver-cat {
  min-height: 30px; margin-right: 8px; padding: 2px 12px; border-radius: 999px;
  border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.volver-cat:hover { background: var(--tinta); color: var(--fondo); }
.sabor-btn[aria-pressed="true"] .sabor-nombre { font-weight: 800; }
/* Agotada hoy (la marca la caja en el panel): la latita en gris y la nota debajo del nombre */
.sabor-btn.agotada .sabor-lata img { filter: grayscale(1); opacity: .5; }
.sabor-agotada { display: block; font-size: 11px; font-weight: 700; color: #8F1414; }
.item-agotada { color: #8F1414; }
#agregar:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.sabor-btn[aria-pressed="true"] .sabor-nombre::after { content: ""; display: block; width: 18px; height: 3px; margin: 4px auto 0; border-radius: 3px; background: var(--acento); transition: background-color var(--t-color); }

@media (hover: hover) and (pointer: fine) {
  /* con mouse no hay cómo deslizar: las 19 latitas caben en una fila (más angostas) y, si la pantalla no alcanza,
     bajan a un segundo renglón. --n lo pone app.js (cuántas latitas hay) */
  .selector { container-type: inline-size; }
  .cinta {
    --sabor-w: clamp(64px, calc((100cqw - 32px) / var(--n, 10) - 4px), 108px);
    justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 14px 4px;
    padding: 48px 16px 6px; scroll-snap-type: none; overflow: visible;
  }
  .sabor-nombre { font-size: 11.5px; }
  .sabor-lata img { transition: transform .5s var(--resorte); }
  .sabor:has(+ .sabor .sabor-btn:hover) .sabor-lata img,
  .sabor:has(.sabor-btn:hover) + .sabor .sabor-lata img { transform: scale(1.14); }
  .sabor-btn:hover .sabor-lata img { transform: scale(1.4) rotate(-4deg); }
  .cinta .sabor .sabor-btn[aria-pressed="true"] .sabor-lata img { transform: scale(1.55); }
  .cinta .sabor .sabor-btn[aria-pressed="true"]:hover .sabor-lata img { transform: scale(1.6) rotate(-3deg); }
}

/* Lo que lleva */
.lleva { grid-area: lleva; position: relative; z-index: 3; display: grid; gap: 12px; align-content: start; margin-top: 18px; }
.lleva-titulo { font-size: 15px; font-weight: 700; }
.lleva-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; transition: opacity .25s ease; }
.cambiando .lleva-lista { opacity: 0; }
.ingr {
  display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center;
  padding: 12px 6px 10px; border-radius: 20px;
  background: color-mix(in srgb, var(--capa) 55%, var(--fondo));
  transition: background-color var(--t-color);
  animation: aparece .55s var(--suave) both; animation-delay: calc(var(--i) * 70ms);
}
.ingr img { height: 62px; width: auto; max-width: 80px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(40, 20, 10, .15)); }
/* ingrediente sin foto: un punto del color de la bebida */
.ingr-punto { width: 34px; height: 34px; margin: 14px 0; border-radius: 50%; background: var(--acento); opacity: .75; }
.ingr b { font-size: 13px; line-height: 1.2; }
.ingr small { font-size: 12px; line-height: 1.2; }
@keyframes aparece { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.lleva-nota { font-size: 12px; }
/* Celular y tablet: lo que lleva va justo abajo de la lata en una tira que se desliza, para que se asome en la primera pantalla */
@media (max-width: 1023px) {
  .lleva { margin-top: 0; gap: 8px; }
  .lleva-lista { display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px 2px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; }
  .lleva-lista::-webkit-scrollbar { display: none; }
  .ingr { flex: none; width: 92px; padding: 8px 4px 8px; gap: 4px; scroll-snap-align: start; }
  .ingr img { height: 44px; max-width: 64px; }
  .ingr-punto { width: 26px; height: 26px; margin: 9px 0; }
  .ingr b { font-size: 12px; }
  .ingr small { font-size: 11px; }
}
/* Celular y tablet (Daniel, 2026-10-28: que «Agregar» no quede hasta abajo): a la derecha de la lata va «Agregar» con
   desde cuánto; abre la hoja para elegir tamaño, sabor y extras. Las opciones de la ficha se pasan a esa hoja */
@media (max-width: 1023px) {
  .lata-agregar {
    grid-area: lata; justify-self: end; align-self: center; position: relative; z-index: 4;
    display: grid; justify-items: center; gap: 1px; min-height: 0; margin-top: 56px; padding: 12px 18px 13px; border-radius: 999px;
    box-shadow: 0 14px 24px -14px var(--acento), inset 0 -3px 0 rgba(0, 0, 0, .14);
    font-size: 16px; line-height: 1.15;
  }
  .lata-agregar svg { width: 24px; height: 24px; margin-bottom: 2px; }
  .lata-agregar small { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .92; }
  .lata-agregar small:empty { display: none; }
  .lata-agregar:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
}
/* en tablet sobra ancho: el botón se arrima a la lata (media lata de ancho, contando vasos y platos, más aire) */
@media (min-width: 600px) and (max-width: 1023px) {
  .lata-agregar { justify-self: start; margin-left: calc(50% + var(--lata-h) * .33 + 16px); }
}
/* La hoja «Agregar»: la latita y su nombre arriba, luego tamaño (frío o caliente), sabor y extras, y abajo, siempre a la
   vista, el precio y «Agregar a mi pedido» */
.hoja-latita .bolsa-hoja { gap: 12px; padding-bottom: 0; }
.hoja-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.hoja-foto { height: 64px; width: auto; filter: drop-shadow(0 6px 6px rgba(40, 20, 10, .16)); }
.hoja-grupo { font-size: 13px; font-weight: 600; }
.hoja-titulo {
  font-family: var(--display); font-weight: var(--display-peso); text-transform: var(--display-caja);
  font-size: 32px; line-height: 1; text-wrap: balance;
}
.hoja-latita .ficha-pedido { gap: 10px; margin-top: 0; }
.hoja-latita .titulo-hoja { display: block; margin-bottom: -4px; }
.hoja-latita #tituloTamano { order: 1; }
.hoja-latita .temperatura { order: 2; }
.hoja-latita .tamanos { order: 3; }
.hoja-latita .opciones-sabor { order: 4; margin-top: 4px; }
.hoja-latita #tituloExtras { order: 5; margin-top: 4px; }
.hoja-latita .extras { order: 6; }
.hoja-latita .ficha-acciones {
  order: 7; position: sticky; bottom: 0; flex-wrap: nowrap; margin: 6px -18px 0;
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: var(--fondo);
  box-shadow: 0 -1px 0 rgba(60, 30, 20, .1);
}
.hoja-latita #agregar { flex: 1; }

/* Celulares de pantalla corta (SE y similares): un poco más compacto para que «Lo que lleva» también se asome */
@media (max-width: 1023px) and (max-height: 680px) {
  :root { --lata-h: clamp(160px, 30svh, 330px); }
  .lata-zona { height: calc(var(--lata-h) + 30px); }
  .selector-menu { font-size: 26px; padding-top: 4px; }
  .cinta { padding-top: 34px; }
  .sabor-lata, .sabor-lata img { height: 52px; }
}
/* Celular (Daniel, 2026-10-28: «probemos un 15% más chica»): la cintilla de categorías y latas al 85%. La letra baja
   un poco menos para que se siga leyendo */
@media (max-width: 767px) {
  .cinta { --sabor-w: 70px; padding-top: 32px; padding-bottom: 5px; }
  .sabor-btn { gap: 5px; }
  .sabor-lata, .sabor-lata img { height: 51px; }
  .sabor-nombre { font-size: 10.5px; }
  .cat-cuantas { font-size: 9.5px; }
  .sabor-btn[aria-pressed="true"] .sabor-nombre::after { width: 15px; margin-top: 3px; }
}
@media (max-width: 767px) and (max-height: 680px) {
  .cinta { padding-top: 29px; }
  .sabor-lata, .sabor-lata img { height: 44px; }
}

/* ── Menú ───────────────────────────────── */
.gemday h2, .eventos h2, .visita h2, .conocenos h2 {
  font-family: var(--titulos); font-weight: 400;
  font-size: clamp(40px, 9vw, 64px); line-height: 1;
}

/* ── Conócenos ──────────────────────────── */
.conocenos { display: grid; gap: 24px; padding: 48px 16px; max-width: 1272px; margin: 0 auto; }
.conocenos-fotos { position: relative; padding: 0 0 18% 0; }
.conocenos-foto { width: 86%; height: auto; aspect-ratio: 1088 / 1200; object-fit: cover; border-radius: 28px; }
.conocenos-foto-2 {
  position: absolute; right: 0; bottom: 0; width: 46%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px;
  rotate: 4deg; box-shadow: 0 0 0 6px var(--fondo), 0 18px 30px -16px rgba(40, 20, 10, .45);
  transition: rotate .4s var(--resorte), transform .4s var(--resorte);
}
.conocenos-foto-2:hover { rotate: 0deg; transform: scale(1.03); }
.conocenos-texto { display: grid; gap: 14px; align-content: center; }
.conocenos-texto p { max-width: 46ch; }
.conocenos-lema em { font-size: clamp(44px, 11vw, 72px); }

/* ── Gem Day y eventos ──────────────────── */
/* Gem Day: decora tu latita */
.gemday { --tinta: #4B2A33; --acento: #7A4A36; --capa: #FFE1E8; background: var(--rosa-pared); color: var(--tinta); padding: 48px 16px 40px; overflow: hidden; }
.gem-intro { display: grid; gap: 10px; max-width: 640px; }
.gem-dias { width: fit-content; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 700; }
.gem-intro p:last-child { max-width: 46ch; }
.gem-taller { display: grid; gap: 12px; margin-top: 18px; }
.gem-escenario {
  position: relative; display: grid; place-items: center; padding: 14px 0 24px; border-radius: 28px;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .25) 75%);
}
.gem-escenario::after { content: ""; position: absolute; bottom: 22px; left: 50%; translate: -50% 0; width: 120px; height: 20px; background: radial-gradient(ellipse at center, rgba(60, 20, 30, .28), transparent 70%); }
.gem-lata { position: relative; z-index: 1; height: min(270px, 36svh); touch-action: none; user-select: none; }
.gem-lata img { height: 100%; width: auto; filter: drop-shadow(0 16px 20px rgba(60, 20, 30, .2)); transition: opacity .3s ease; }
.gem-pegadas { position: absolute; inset: 0; }
.gema {
  position: absolute; width: 16%; margin: -8% 0 0 -8%; cursor: grab; touch-action: none;
  filter: drop-shadow(0 2px 2px rgba(40, 10, 20, .35));
}
.gema img { width: 100%; height: auto; pointer-events: none; }
.gema:active { cursor: grabbing; }
.gema.cae { transition: transform .6s cubic-bezier(.5, 0, .75, 0), opacity .5s ease; transform: translateY(220px) rotate(80deg); opacity: 0; }
.gem-mesa { display: grid; gap: 14px; align-content: start; }
.gem-instruccion { font-weight: 600; }
.gem-charola { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; border-radius: 22px; background: rgba(255, 255, 255, .7); }
.gem-charola button {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 6px; border: 0; border-radius: 14px; background: transparent;
  transition: transform .3s var(--resorte), background-color .2s ease;
}
.gem-charola button:hover { background: #fff; transform: translateY(-3px) rotate(-8deg) scale(1.12); }
.gem-charola button:active { transform: scale(.9); }
.gem-charola img { width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(40, 10, 20, .25)); pointer-events: none; }
.gem-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.gem-acciones .btn-secundario { background: rgba(255, 255, 255, .6); }
.gem-cuenta { font-size: 14px; }
.gem-fotos { list-style: none; margin: 28px -16px 0; padding: 0 16px 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gem-fotos::-webkit-scrollbar { display: none; }
.gem-fotos li { flex: 0 0 62%; scroll-snap-align: center; }
.gem-fotos img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; transition: transform .4s var(--resorte); }
.gem-fotos li:nth-child(odd) img { rotate: -1.5deg; }
.gem-fotos li:nth-child(even) img { rotate: 1.5deg; }
.gem-fotos img:hover { transform: scale(1.04) rotate(0deg); }

/* Eventos: elegancia pastel (referencias en Estilos/Elegancia pastel). El video ocupa la mitad izquierda y se difumina
   hacia los textos; la tarjeta es el menú de la fiesta en papel claro, con filo dorado doble y moño de satín;
   perlas blancas, letras finas espaciadas y luz suave. Sin serif ni cursivas (sección 3) */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eventos {
  --dorado: #C6A266;
  position: relative; display: grid; grid-template-areas: "video" "cabeza" "form"; gap: 24px; padding: 0 16px 56px; overflow: hidden;
  background: radial-gradient(80% 40% at 50% 66%, rgba(255, 255, 255, .5), transparent 70%);
}
/* Celular: el video a todo lo ancho arriba y se desvanece hacia el título */
.eventos-video { grid-area: video; position: relative; margin: 0 -16px; }
.eventos-video video {
  display: block; width: 100%; height: min(125vw, 72svh); object-fit: cover; filter: saturate(.9) brightness(1.03);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 56%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 56%, transparent 96%);
}
.eventos-sello { position: absolute; right: 16px; top: 13%; width: 86px; height: 86px; rotate: -10deg; color: var(--tinta); }
.sello-fondo { fill: color-mix(in srgb, var(--fondo) 35%, #fff); stroke: #fff; stroke-width: 3; transition: fill var(--t-color); }
.sello-filo { fill: none; stroke: var(--dorado); stroke-width: .8; }
.sello-giro { transform-box: view-box; transform-origin: 50% 50%; animation: gira 26s linear infinite; }
.eventos-sello text { font-family: var(--texto); font-weight: 600; font-size: 11.5px; letter-spacing: 2.1px; fill: currentColor; }
.eventos-sello use { --sol-trazo: 7; }
.eventos-cabeza { grid-area: cabeza; position: relative; z-index: 1; margin-top: -92px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.eventos-antetitulo { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.eventos-antetitulo::before, .eventos-antetitulo::after { content: ""; width: 34px; height: 1px; background: var(--dorado); }
.eventos-cabeza p:last-child { max-width: 44ch; line-height: 1.7; }
.eventos-cabeza b { font-weight: 600; white-space: nowrap; }
.subraya { position: relative; display: inline-block; }
.subraya::after {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: -.1em; height: .2em; background: var(--dorado);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 16C45 5 75 5 102 13s62 9 93-6' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 16C45 5 75 5 102 13s62 9 93-6' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* La tarjeta: menú de papel con filo dorado doble, amarrado con un moño de satín del color de la bebida */
.cotiza {
  grid-area: form; position: relative; display: grid; gap: 16px; margin-top: 26px; padding: 46px 22px 26px; border-radius: 28px;
  background: color-mix(in srgb, var(--fondo) 30%, #fffdfa);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dorado) 30%, transparent), 0 36px 60px -46px color-mix(in srgb, var(--tinta) 60%, transparent);
  transition: background-color var(--t-color);
}
.cotiza::before { content: ""; position: absolute; inset: 7px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--dorado) 50%, transparent); pointer-events: none; }
.cotiza-mono {
  position: absolute; top: -36px; left: 50%; width: 106px; height: 74px; translate: -50% 0;
  color: color-mix(in srgb, var(--acento) 48%, #fff); filter: drop-shadow(0 6px 6px rgba(60, 40, 30, .16)); transition: color var(--t-color);
}
.mono-lazo, .mono-cola, .mono-nudo { fill: url(#satin); }
.mono-cola { opacity: .9; }
.mono-pliegue { fill: none; stroke: color-mix(in srgb, var(--tinta) 20%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.cotiza-campo { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cotiza-etiqueta { font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.cotiza-etiqueta small { margin-left: 8px; padding: 1px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--dorado); font-size: 11px; font-weight: 500; letter-spacing: .1em; vertical-align: 1px; }
.cotiza-campo legend { padding: 0; margin-bottom: 12px; }
/* Hilo de perlas blancas bajo cada grupo (abajo: el legend del fieldset taparía uno de arriba) */
.cotiza-separa {
  padding-bottom: 22px;
  background:
    radial-gradient(circle at 5.6px 2.9px, #fff 0 .8px, rgba(255, 255, 255, 0) 1.6px) 0 100% / 14px 9px repeat-x,
    radial-gradient(circle at 7px 4.5px, #f1ebef 0 1.4px, #ddd2d9 2.6px, #c9bcc5 3.5px, rgba(201, 188, 197, 0) 4px) 0 100% / 14px 9px repeat-x;
}
.cotiza-invitados { grid-template-columns: 1fr auto; align-items: end; row-gap: 6px; }
.cotiza-invitados output { font-family: var(--texto); font-weight: 300; font-size: 46px; line-height: .8; font-variant-numeric: tabular-nums; }
.cotiza-invitados input { grid-column: 1 / -1; }
/* Barra de invitados: carril fino que se llena en acento y una perla blanca como jalador */
/* El relleno va en el fondo del input y no en el carril: Chrome no siempre repinta el carril cuando cambia --p */
.cotiza input[type="range"] {
  --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; cursor: pointer;
  background: linear-gradient(var(--acento), var(--acento)) 0 50% / var(--p) 4px no-repeat, linear-gradient(color-mix(in srgb, var(--tinta) 14%, #fff), color-mix(in srgb, var(--tinta) 14%, #fff)) 0 50% / 100% 4px no-repeat;
}
.cotiza input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.cotiza input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 14%, #fff); }
.cotiza input[type="range"]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--acento); }
.cotiza input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, #f6f1f4 32%, #ddd3da 72%, #c3b7c0);
  box-shadow: 0 0 0 1px rgba(140, 120, 130, .25), 0 6px 12px -4px rgba(60, 40, 50, .45); transition: transform .3s var(--resorte);
}
.cotiza input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, #f6f1f4 32%, #ddd3da 72%, #c3b7c0);
  box-shadow: 0 0 0 1px rgba(140, 120, 130, .25), 0 6px 12px -4px rgba(60, 40, 50, .45); transition: transform .3s var(--resorte);
}
.cotiza input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.cotiza input[type="range"]:active::-moz-range-thumb { transform: scale(1.18); }
.cotiza-campo input:not([type="range"]) {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 2px; border: 0; border-radius: 0; font-size: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); background: transparent;
  transition: border-color .2s, box-shadow .2s;
}
.cotiza-campo input:not([type="range"])::placeholder { color: color-mix(in srgb, var(--tinta) 45%, transparent); }
.cotiza-campo input:not([type="range"]):focus-visible { outline: none; border-bottom-color: var(--acento); box-shadow: 0 1px 0 var(--acento); }
.cotiza-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 18px; }
/* Los sabores en cuadrícula pareja (Daniel, 2026-10-26: «más simétricas»): la latita arriba y el nombre abajo, como en el
   menú; tres por renglón y cinco cuando la tarjeta es ancha. Un renglón incompleto queda centrado. */
.cotiza-sabores { --cols: 3; container-type: inline-size; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@container (min-width: 520px) { .sabor-chip { --cols: 5; } }
/* Cada sabor elegido toma los colores de su propia bebida */
.sabor-chip {
  flex: 0 0 calc((100% - (var(--cols) - 1) * 8px) / var(--cols));
  display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 6px 8px; border: 0; border-radius: 18px;
  background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 16%, transparent);
  font-size: 13px; font-weight: 500; line-height: 1.12; text-align: center;
  transition: background-color .25s, color .25s, box-shadow .25s, transform .3s var(--resorte);
}
.sabor-chip img { height: 48px; width: auto; }
/* todos con lugar para dos renglones: así quedan del mismo alto */
.sabor-chip span { display: grid; place-items: center; min-height: 2.24em; }
.sabor-chip:hover { background: #fff; transform: translateY(-2px); }
.sabor-chip[aria-pressed="true"] { background: var(--c-capa); color: var(--c-tinta); box-shadow: inset 0 0 0 1.5px var(--c-acento), 0 8px 14px -10px var(--c-acento); }
.sabor-chip[aria-pressed="true"] img { animation: saltito .45s var(--resorte); }
@keyframes saltito { 40% { transform: translateY(-5px) rotate(-8deg); } }
.sabor-chip:active { transform: scale(.95); }
/* La tina galvanizada: las latitas (una por cada 5 invitados) se asoman sobre la pared de enfrente, con asas a los lados */
/* Crece con los invitados (--latas lo pone app.js) */
.cotiza-tina { --latas: 6; position: relative; justify-self: center; width: min(calc(100% - 30px), max(180px, calc(var(--latas) * 19px + 64px))); max-width: 440px; margin-top: 18px; padding: 0 16px 30px; container-type: inline-size; transition: width .45s var(--resorte); }
.cotiza-tina::before { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 42px; border-radius: 20px 20px 24px 24px / 12px 12px 24px 24px; background: linear-gradient(#b9c2ca, #dfe4e8); }
.cotiza-tina::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 24px; border-radius: 4px 4px 22px 22px;
  background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(255, 255, 255, .55) 8px 10px, transparent 10px 12px), linear-gradient(#f7f9fa, #d5dbe0 65%, #c0c8cf);
  box-shadow: inset 0 2px 0 #fff, 0 8px 12px -10px rgba(40, 50, 60, .6);
}
.tina-latas { display: flex; justify-content: center; min-height: 30px; }
.tina-latas::before, .tina-latas::after { content: ""; position: absolute; z-index: 2; bottom: 5px; width: 13px; height: 15px; border: 3px solid #c0c8cf; }
.tina-latas::before { left: -10px; border-right: 0; border-radius: 10px 0 0 10px; }
.tina-latas::after { right: -10px; border-left: 0; border-radius: 0 10px 10px 0; }
/* Una sola fila: si no caben, se enciman más (paso = ancho libre entre el número de latitas), como en la tina de verdad */
.tina-latas img { position: relative; z-index: 1; flex: none; height: 56px; width: 21px; object-fit: contain; margin: 0 calc(min(19px, (100cqw - 21px) / max(1, var(--latas) - 1)) - 21px) -26px 0; animation: entraLata .4s var(--resorte) both; }
.tina-latas img:nth-child(3n) { rotate: -5deg; }
.tina-latas img:nth-child(3n + 1) { rotate: 3deg; translate: 0 2px; }
.tina-latas img:last-child { margin-right: 0; }
@keyframes entraLata { from { transform: translateY(-14px); opacity: 0; } }
.cotiza-resumen { font-size: 15px; line-height: 1.55; text-align: center; }
.cotiza-resumen b { font-weight: 600; }
.cotiza .error { justify-self: start; }
/* Botón de cotizar: píldora con línea interior blanca, ícono en círculo blanco y tres perlas blancas que rebotan */
.cta-evento { justify-self: stretch; justify-content: center; gap: 10px; padding: 0 20px 0 8px; white-space: nowrap; font-weight: 600; font-size: 16px; letter-spacing: .05em; box-shadow: 0 14px 24px -16px var(--acento), inset 0 -3px 0 rgba(0, 0, 0, .1); }
.cta-evento::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 1.5px solid rgba(255, 255, 255, .42); pointer-events: none; }
.cta-icono { display: grid; place-items: center; width: 40px; height: 40px; margin-right: auto; border-radius: 50%; background: #fff; color: var(--acento); transition: color var(--t-color); }
.cta-evento .cta-icono svg { width: 22px; height: 22px; }
.cta-evento .cta-perlas { margin-left: auto; }
.cta-evento .cta-perlas i { background: radial-gradient(circle at 35% 30%, #fff 0 18%, #f2edf0 45%, #cbbfc8); box-shadow: none; }
@media (max-width: 370px) { .cta-evento .cta-perlas { display: none; } .cta-evento > span:nth-child(2) { margin-right: auto; } }

/* ── Visita ─────────────────────────────── */
.visita { background: var(--capa); transition: background-color var(--t-color); padding: 44px 16px; display: grid; gap: 28px; }
.visita-mapa { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 1; background: var(--fondo); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 18%, transparent); transition: background-color var(--t-color); }
.visita-mapa .mapa { position: absolute; inset: 0; }  /* gana a .maplibregl-map { position: relative } */
.mapa-respaldo { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: var(--tinta); z-index: 0; }
.mapa.listo + .mapa-respaldo { display: none; }
/* Controles del mapa con el estilo de la página */
.visita-mapa .maplibregl-ctrl-group { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--tinta); background: color-mix(in srgb, var(--fondo) 85%, #fff); }
.visita-mapa .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.visita-mapa .maplibregl-ctrl-group button + button { border-top: 1.5px solid color-mix(in srgb, var(--tinta) 25%, transparent); }
.visita-mapa .maplibregl-ctrl.maplibregl-ctrl-attrib { font-family: var(--texto); font-size: 11px; background: color-mix(in srgb, var(--fondo) 88%, transparent); color: var(--tinta); }
.visita-mapa .maplibregl-ctrl-attrib a { color: inherit; }
.visita-mapa .maplibregl-cooperative-gesture-screen { font-family: var(--texto); font-weight: 600; background: color-mix(in srgb, var(--tinta) 70%, transparent); }
/* Marcador: una perla de boba con su popote a rayas */
.marcador { position: relative; width: 70px; height: 92px; border: 0; padding: 0; background: none; cursor: pointer; }
.marcador-sombra { position: absolute; left: 50%; bottom: -5px; width: 34px; height: 10px; margin-left: -17px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40, 20, 10, .38), transparent 70%); }
.marcador-popote {
  position: absolute; left: 50%; bottom: 22px; width: 13px; height: 70px; margin-left: -2px; rotate: 16deg; transform-origin: 50% 100%;
  border-radius: 3px 3px 5px 5px; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(-35deg, var(--acento) 0 6px, #fff 6px 11px);
  box-shadow: inset -2px 0 0 rgba(0, 0, 0, .1);
}
.marcador-perla {
  position: absolute; left: 50%; bottom: 3px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #9a7462, #2a1810 56%, #120804);
  box-shadow: 0 0 0 3px #fff, 0 6px 10px rgba(40, 20, 10, .35);
}
.marcador-perla::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 0 var(--acento); animation: pulsoPerla 2.2s ease-out infinite; }
@keyframes pulsoPerla { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.marcador-etiqueta {
  position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: 2px; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; background: var(--tinta); color: var(--fondo);
  font-family: var(--titulos); font-size: 17px; line-height: 1.1;
}
.marcador-etiqueta::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--tinta); }
.marcador.cae { animation: caeMarcador .9s cubic-bezier(.3, 1.45, .5, 1) both; }
@keyframes caeMarcador { from { transform: translateY(-140px); opacity: 0; } 40% { opacity: 1; } }
.marcador-perla { transition: transform .3s var(--resorte); }
.marcador:hover .marcador-perla { transform: scale(1.08); }
.visita-datos { display: grid; gap: 16px; align-content: start; }
.direccion { display: flex; gap: 10px; font-size: 17px; }
.direccion svg { width: 26px; height: 26px; flex: none; }
.visita-datos h3 { font-size: 15px; font-weight: 700; margin-top: 10px; }
.horario { width: 100%; max-width: 440px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horario th, .horario td { padding: 9px 0; border-bottom: 1px solid rgba(60, 30, 20, .14); font-size: 16px; }
.horario th { text-align: left; font-weight: 600; }
.horario td { text-align: right; }
.horario tr.hoy th, .horario tr.hoy td { font-weight: 800; }
.horario tr.hoy th::after { content: " · hoy"; font-weight: 600; }

.pie { padding: 40px 16px 44px; display: grid; gap: 12px; justify-items: center; text-align: center; font-size: 15px; }
.pie-logo { display: flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; }
.pie-sol { --sol-trazo: 6; width: 52px; height: 52px; transition: rotate .9s var(--resorte); }
.pie-logo:hover .pie-sol { rotate: 90deg; }
.pie-palabra { height: 46px; width: 120px; }
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.red {
  display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 20px 0 14px; border-radius: 999px;
  border: 1.5px solid var(--tinta); background: rgba(255, 255, 255, .5); color: var(--tinta);
  font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--resorte);
}
.red svg { width: 24px; height: 24px; }
.red:hover { background: var(--acento); border-color: var(--acento); color: #fff; transform: translateY(-3px); }
.red:hover svg { animation: brinca .5s var(--resorte); }
.red small { font-weight: 400; font-size: 14px; }
.pie-nota { font-size: 13px; }

/* ── Bolsa ──────────────────────────────── */
.bolsa {
  border: 0; padding: 0; color: var(--tinta); background: var(--fondo);
  width: 100%; max-width: 100%; max-height: 90svh;
  margin: auto 0 0; border-radius: 26px 26px 0 0;
}
.bolsa::backdrop { background: rgba(40, 20, 25, .4); }
.bolsa[open] { animation: sube .38s var(--suave); }
@keyframes sube { from { transform: translateY(40px); opacity: 0; } }
.bolsa-hoja { display: grid; gap: 14px; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); }
.bolsa-cabeza { display: flex; justify-content: space-between; align-items: center; }
.bolsa-cabeza h2 { font-family: var(--titulos); font-weight: 400; font-size: 34px; }
.cerrar { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tinta); background: transparent; font-size: 26px; line-height: 1; }
.bolsa-items { display: grid; gap: 4px; }
.item { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(60, 30, 20, .14); }
.item-foto { height: 48px; width: auto; justify-self: center; }
.item-nombre { font-weight: 700; line-height: 1.2; }
.item-nombre small { display: block; font-weight: 400; font-size: 14px; }
.item-lado { display: grid; justify-items: end; gap: 4px; }
.item-precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.cantidad { display: flex; align-items: center; gap: 4px; }
.cantidad button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--tinta); background: transparent; font-size: 18px; line-height: 1; }
.cantidad span { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.vacia { display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; text-align: center; }
.vacia p { max-width: 28ch; }
.vaciar { justify-self: end; border: 0; background: none; text-decoration: underline; font-size: 14px; padding: 4px 0; }
.bolsa-form { display: grid; gap: 12px; }
.campo { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.campo em { font-style: normal; font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px;
  border: 1.5px solid var(--tinta); background: rgba(255, 255, 255, .55); font-weight: 400; font-size: 16px;
}
.campo textarea { resize: vertical; min-height: 64px; }
.error { font-weight: 700; font-size: 14px; padding-left: 10px; border-left: 3px solid var(--acento); }
.aviso { font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--capa); }
.bolsa-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; padding-top: 4px; }
.bolsa-total strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.bolsa-form .btn-principal { width: 100%; }
.bolsa-nota { text-align: center; font-size: 14px; }

/* Salto entre secciones: se desvanece, brinca de golpe y vuelve */
.cortina { position: fixed; inset: 0; z-index: 25; background: var(--fondo); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.cortina.tapa { opacity: 1; transition-duration: .16s; }

/* Dock inferior en celular y tablet */
.dock {
  position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr 82px 1fr 1fr; align-items: end;
  max-width: 560px; margin: 0 auto; height: 66px; padding: 0 4px; border-radius: 26px;
  background: color-mix(in srgb, var(--fondo) 88%, #fff); color: var(--tinta);
  box-shadow: 0 12px 30px -12px rgba(40, 20, 10, .4), inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 16%, transparent);
  transition: background-color .5s ease, color .5s ease, transform .45s var(--resorte), opacity .2s ease, visibility 0s,
    max-width .32s var(--suave), height .32s var(--suave), grid-template-columns .32s var(--suave);
}
/* Mientras se hace scroll se hace más chico, como el de Instagram: más angosto y bajito, solo con los íconos y la perla
   de «Pedir» más chica; al detenerse vuelve a su tamaño (Daniel, 2026-10-28). Lo pone y lo quita app.js (dockCompacto) */
.dock.compacto { max-width: 290px; height: 50px; grid-template-columns: 1fr 1fr 62px 1fr 1fr; }
.dock-item span, .dock-pedir span { display: block; max-height: 16px; transition: max-height .32s var(--suave), opacity .2s ease; }
.dock.compacto .dock-item span, .dock.compacto .dock-pedir span { max-height: 0; opacity: 0; }
.dock.compacto .dock-item { padding: 13px 0 14px; gap: 0; }
.dock.compacto .dock-item svg { width: 22px; height: 22px; }
.dock.compacto .dock-pedir { transform: scale(.74); margin-top: -18px; }
.dock.compacto .dock-pedir:active { transform: scale(.68); }
/* En el inicio no hay dock (ahí ya está «Pedir»): sube en cuanto bajas o saltas a una sección (Daniel, 2026-10-24) */
.dock.escondido {
  transform: translateY(calc(100% + 40px + env(safe-area-inset-bottom))); opacity: 0; visibility: hidden; pointer-events: none;
  transition: background-color .5s ease, color .5s ease, transform .3s ease-in, opacity .25s ease .05s, visibility 0s .3s;
}
.dock-item { position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 0 11px; color: inherit; text-decoration: none; font-size: 11px; font-weight: 600; transition: padding .32s var(--suave); }
.dock-item svg { width: 24px; height: 24px; transition: transform .3s var(--resorte), width .32s var(--suave), height .32s var(--suave); }
.dock-sol { --sol-trazo: 11; }
.dock-item::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06); transform: scale(0); transition: transform .35s var(--resorte);
}
.dock-item.activo { font-weight: 700; }
.dock-item.activo::after { transform: scale(1); }
.dock-item:active svg { transform: scale(.85); }
.dock-pedir {
  position: relative; justify-self: center; align-self: start; margin-top: -24px;
  width: 74px; height: 74px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--fondo) 88%, #fff);
  display: grid; place-items: center; align-content: center; gap: 0; padding: 0;
  background: var(--acento); color: #fff; font-weight: 700; font-size: 12px; line-height: 1.1;
  box-shadow: 0 12px 22px -10px var(--acento), inset 0 -4px 0 rgba(0, 0, 0, .14);
  transition: background-color .5s ease, transform .3s var(--resorte), margin-top .32s var(--suave);
}
.dock-pedir svg { width: 26px; height: 26px; stroke-width: 2.4; }
.dock-pedir:active { transform: scale(.92); }
.dock-cuenta {
  position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 24px; box-shadow: 0 0 0 2px #fff;
  transition: transform .3s var(--resorte);
}
.dock-cuenta[data-n="0"] { transform: scale(0); }
.dock-pedir.brinca .dock-cuenta { animation: brinca .45s var(--resorte); }
.btn-principal.llama { animation: llama .6s var(--resorte) 2; }
@keyframes llama { 50% { transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--acento) 25%, transparent); } }
@media (max-width: 1023px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .barra .bolsa-btn { display: none; }
  .inicio { padding-bottom: 100px; }
}
@media (min-width: 1024px) { .dock { display: none; } }
/* Celular: en el inicio no hay dock, así que el espacio de abajo se reparte y los botones bajan (Daniel, 2026-10-26: «se
   ven menos amontonados»). Dos partes arriba de los botones y una abajo, hacia los puntos. */
@media (max-width: 767px) {
  .inicio { grid-template-rows: auto 1fr auto; padding-bottom: 26px; }
  .inicio-texto { grid-template-rows: auto auto minmax(0, 2fr) auto minmax(0, 1fr); }
  .inicio-cta { grid-row: 4; }
}

/* Pedido registrado (Fase 2): confirmación en la bolsa, pedido en curso y «Ver mi pedido» */
.confirmado { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 6px 0 4px; }
.confirmado-num { font-family: var(--titulos); font-size: 54px; line-height: 1; }
.confirmado h3 { font-size: 20px; font-weight: 700; }
.confirmado .btn-principal, .confirmado .btn-secundario { width: 100%; justify-content: center; }
.anti-robots:empty { display: none; }
.pie-pedido { margin-top: 4px; }
.ver-pedido { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
/* «Tu pedido #N» al volver a la página: una píldora con la latita mini del estado que regresa al seguimiento */
.en-curso {
  position: fixed; z-index: 25; left: 16px; right: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); width: fit-content; margin-inline: auto;
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 12px; border-radius: 999px;
  background: var(--tinta); color: var(--fondo); text-decoration: none; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .5);
  transition: background-color var(--t-color), color var(--t-color), bottom .3s ease, opacity .25s ease, visibility .25s;
  animation: en-curso .5s cubic-bezier(.34, 1.4, .64, 1) backwards;
}
@keyframes en-curso { from { transform: translateY(24px); opacity: 0; } }
/* En el inicio va DENTRO de su renglón, en lugar del nombre y los puntos del bucle: así no se encima con «Pedir» ni con
   los puntos en ningún tamaño (Daniel, 2026-10-27: flotando, en celular tapaba los puntos y en compu «Pedir» y «Menú»).
   La que flota (#enCurso) sale en cuanto bajas: sobre el dock en celular, abajo a la izquierda en compu. */
.en-curso-inicio { position: static; z-index: auto; margin: 0; }
.inicio.con-pedido .inicio-ahora, .inicio.con-pedido .inicio-puntos { display: none; }
/* nunca las dos a la vez: en celular y tablet, arriba la del inicio y, en cuanto bajas y sube el dock, la que flota;
   en compu (sin dock), la que flota sale cuando la del inicio ya se fue de la pantalla (pedido-a-la-vista, app.js) */
@media (max-width: 1023px) {
  body.sin-dock #enCurso, body:not(.sin-dock) .en-curso-inicio { visibility: hidden; opacity: 0; }
}
@media (min-width: 1024px) {
  body.pedido-a-la-vista #enCurso { visibility: hidden; opacity: 0; }
}
.en-curso-lata { width: 20px; height: 30px; flex: none; }
.en-curso-lata .ecl-vaso { fill: none; stroke: currentColor; stroke-width: 2; }
.en-curso-lata .ecl-liquido, .en-curso-lata .ecl-tapa { fill: var(--capa); }
.en-curso-lata .ecl-tapa { stroke: currentColor; stroke-width: 1.5; }
.en-curso-texto { display: grid; line-height: 1.2; white-space: nowrap; }
.en-curso-texto small { font-size: 12px; opacity: .85; }
.en-curso-texto b { font-size: 15px; font-weight: 700; }
.en-curso-ver { padding: 9px 14px; border-radius: 999px; background: var(--fondo); color: var(--tinta); font-size: 14px; font-weight: 700; white-space: nowrap; }
@media (min-width: 1024px) { .en-curso { left: 24px; right: auto; bottom: 24px; margin: 0; } }
.buscar-pedido { border: 0; padding: 0; border-radius: 24px; background: var(--fondo); color: var(--tinta); width: min(420px, calc(100% - 32px)); }
.buscar-pedido::backdrop { background: rgba(40, 20, 25, .45); }
.buscar-hoja { display: grid; gap: 12px; padding: 22px; }
.buscar-hoja h2 { font-family: var(--titulos); font-weight: 400; font-size: 30px; }
.buscar-hoja .campo input { min-height: 48px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--tinta); background: rgba(255, 255, 255, .7); font-size: 17px; }
.buscar-hoja .btn-principal, .buscar-hoja .btn-secundario { width: 100%; justify-content: center; }
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  translate: -50% 0;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px;
  background: var(--tinta); color: var(--fondo); font-weight: 600; font-size: 15px;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--resorte);
}
.toast.visible { opacity: 1; transform: none; }

/* ── Tablet y escritorio ────────────────── */
@media (min-width: 720px) {
  .gemday { padding: 72px max(32px, calc((100vw - 1240px) / 2)) 56px; }
  .gem-taller { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
  .gem-lata { height: 420px; }
  .gem-fotos { display: grid; grid-template-columns: repeat(4, 1fr); margin: 40px 0 0; padding: 0; overflow: visible; gap: 18px; }
  .eventos { padding: 0 32px 72px; }
  /* Tablet: el video centrado a ≤520 px y difuminado en las orillas, sin estirarlo a todo lo ancho */
  .eventos-video { justify-self: center; width: min(520px, 86%); margin: 0; }
  .eventos-video video {
    height: auto; aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 66%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 66%, transparent);
    mask-composite: intersect;
  }
  .eventos-sello { right: -28px; }
  .eventos-cabeza { margin-top: -64px; }
  .cotiza { justify-self: center; width: min(100%, 640px); padding: 48px 30px 28px; }
  .visita { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 56px; padding: 64px max(32px, calc((100vw - 1240px) / 2)); }
  .visita-mapa { aspect-ratio: 4 / 5; max-height: 640px; }
  .conocenos { grid-template-columns: 1fr 1.1fr; align-items: center; column-gap: 56px; padding: 72px 32px; }
  .bolsa { width: 440px; height: 100svh; max-height: 100svh; margin: 0 0 0 auto; border-radius: 26px 0 0 26px; }
  .bolsa[open] { animation-name: entra; }
  @keyframes entra { from { transform: translateX(60px); opacity: 0; } }
  .bolsa-hoja { padding: 24px 26px; }
}

@media (min-width: 600px) {
  .estado-largo { display: inline; }
  .estado-corto { display: none; }
}

@media (min-width: 900px) {
  .barra { padding: 14px max(32px, calc((100vw - 1320px) / 2)); }
  .nav { display: flex; gap: 30px; margin-inline: auto; }
  .nav a { position: relative; padding: 6px 0; font-weight: 700; font-size: 15px; text-decoration: none; }
  .nav a::after {
    content: ""; position: absolute; left: 50%; bottom: -8px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #8d6a59, #2a1810 58%, #160b06);
    transform: scale(0) translateY(-6px); transition: transform .4s var(--resorte);
  }
  .nav a:hover::after, .nav a:focus-visible::after { transform: none; }
  .boba-btn { display: none; }
}

@media (min-width: 1024px) {
  /* El video a la izquierda a ≤460 px (la fuente mide 720: así no se estira), difuminado en las orillas y más hacia los textos */
  .eventos {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); grid-template-areas: "video cabeza" "video form"; grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4.5vw, 72px); row-gap: 20px; padding: 60px max(40px, calc((100vw - 1320px) / 2)) 72px;
    background: radial-gradient(45% 60% at 74% 55%, rgba(255, 255, 255, .55), transparent 70%);
  }
  .eventos-video { align-self: center; justify-self: end; width: min(460px, 100%); margin: 0 -24px 0 0; }
  .eventos-video video {
    height: auto; aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 62%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 62%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 80%, transparent);
    mask-composite: intersect;
  }
  .eventos-sello { top: auto; right: auto; left: -36px; bottom: 15%; width: 112px; height: 112px; }
  .eventos-cabeza { margin: 0; justify-items: start; text-align: left; align-self: end; }
  .eventos-cabeza p:last-child { max-width: 50ch; }
  .eventos-antetitulo::after { display: none; }
  .cotiza { margin: 30px 0 0; align-self: start; gap: 14px; padding: 44px 30px 26px; }
  .cotiza-separa { padding-bottom: 18px; }
  .cotiza-tina { margin-top: 12px; }
  .cta-evento { justify-self: start; min-width: 320px; }
}
@media (min-width: 1024px) {
  .inicio {
    grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch;
    padding: 84px max(40px, calc((100vw - 1320px) / 2)) 36px;
  }
  .inicio-escenario { grid-column: 1 / -1; grid-row: 1 / -1; height: auto; min-height: 0; }
  .inicio-texto { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; align-self: end; }
  .inicio-ritmo { grid-column: 2; grid-row: 2; align-self: end; justify-content: flex-end; margin-top: 0; }
  .inicio-lata { height: min(64svh, 620px); width: 40%; }
  .inicio-sol { width: min(94svh, 880px); }
  .inicio-palabra { width: min(82vw, 1180px); translate: -50% -50%; }
  .inicio-lema em { font-size: clamp(56px, 5vw, 80px); }
  .inicio-ing { left: 50%; right: auto; width: min(44vw, 620px); translate: -50% 0; }
  .inicio-palabra { width: min(78vw, 1120px); }
}

@media (min-width: 1024px) {
  /* La lata se ajusta al alto de la pantalla: título, latitas, lata y botón de agregar caben sin bajar */
  :root { --lata-h: clamp(340px, calc(100svh - 395px), 580px); --escala-ing: 1.3; }
  .escena {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px) minmax(0, 1fr);
    grid-template-areas: "sel sel sel" "ficha lata lleva";
    grid-template-rows: auto 1fr;
    align-items: center; gap: 10px 24px;
    min-height: calc(100svh - 72px);
    padding: 0 max(32px, calc((100vw - 1320px) / 2)) 32px;
  }
  .escena::before { background: radial-gradient(ellipse 42% 60% at 50% 50%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 72%); }
  .palabra { top: 58%; translate: 0 -55%; }
  .palabra span { font-size: clamp(200px, 23vw, 400px); }
  .lata-zona { height: calc(var(--lata-h) + 80px); }
  .ficha { align-self: center; }
  .ficha-nombre { font-size: clamp(56px, min(6.4vw, 9svh), 92px); }
  .selector-menu { padding-top: 8px; }
  .selector { margin: 0; }
  .lleva { align-self: center; justify-self: end; width: 100%; max-width: 290px; margin-top: 0; }
  .lleva-lista { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ingr { grid-template-columns: 60px 1fr; justify-items: start; align-content: center; text-align: left; padding: 8px 14px 8px 8px; column-gap: 12px; row-gap: 0; }
  .ingr img { grid-row: span 2; justify-self: center; height: 50px; max-width: 58px; }
  .ingr-punto { grid-row: span 2; justify-self: center; width: 30px; height: 30px; margin: 10px 0; }
  .ingr b { font-size: 14px; }
  .ingr b:last-child { grid-row: span 2; align-self: center; }
  .ingredientes { inset: -4% -2%; }
  .sabor-lata, .sabor-lata img { height: 84px; }
}
/* Tablet grande con el dedo: la latita del centro crece ×1.6 y necesita más aire arriba */
@media (min-width: 1024px) and (hover: none) { .cinta { padding-top: 54px; } }

@media (prefers-reduced-motion: reduce) {
  .estado.abierto::before, .marcador-perla::after, .marcador.cae { animation: none; }
  .cortina { transition: none; }
  .dock.escondido { transform: none; }
  /* el dock compacto cambia de tamaño de golpe, sin animarse */
  .dock, .dock-item, .dock-item svg, .dock-item span, .dock-pedir, .dock-pedir span { transition-property: background-color, color, opacity, visibility; }
  .sello-giro, .sabor-chip[aria-pressed="true"] img,
  .lata-foto img, .ing img, .ingr, .tina-latas img, .inicio-sol, .inicio-palabra, .inicio-lata, .inicio-ing img, .menu-movil-fondo img, .menu-movil-nav a, .menu-movil[open] { animation: none; }
  .sabor-lata img { transition: none; }
  .cambiando .lata-foto img, .cambiando .palabra span, .cambiando .ficha-grupo, .cambiando .ficha-nombre, .cambiando .ficha-desc { transform: none; }
  .lata-foto img, .palabra span { transition-property: opacity, color; }
  .bolsa[open], .en-curso { animation: none; }
}
@media (max-width: 1023px) {
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
  /* sin dock (en el inicio), el aviso baja a la orilla («Tu pedido #N» ahí va dentro del inicio, no flotando) */
  body.sin-dock .toast { bottom: calc(18px + env(safe-area-inset-bottom)); }
}