/* ============================================================
   LUZZU CAFÉ — Estilos
   Concepto: la barra de azulejo cobalto. El menú es un mosaico
   de piezas iguales; el carrito se lee como un ticket.
   Una sola paleta clara, deliberada (identidad de marca).
   ============================================================ */
@font-face { font-family: 'Awesome Serif'; src: url('../assets/fuentes/awesome-serif-tall.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Awesome Serif'; src: url('../assets/fuentes/awesome-serif-tall-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Awesome Serif ExtraTall'; src: url('../assets/fuentes/awesome-serif-extratall.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --cobalto: #0742AB;
  --cobalto-osc: #052F7D;
  --azulejo: #E8EEFB;
  --papel: #FFFFFF;
  --barra: #F6F8FC;
  --tinta: #0B1633;
  --tinta-suave: #4A5778;
  --linea: #D3DCF1;
  --ok: #17784A;
  --alto: #B24A17;
  --wa: #128C4B;

  --f-display: 'Awesome Serif', 'Times New Roman', Georgia, serif;
  --f-alta: 'Awesome Serif ExtraTall', 'Awesome Serif', 'Times New Roman', Georgia, serif;
  --f-marcador: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-texto: 'Lexend', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --r: 14px;
  --sombra: 0 1px 0 rgba(7, 66, 171, .06), 0 10px 30px -18px rgba(7, 66, 171, .45);
  --ancho: 1120px;
  --barra-alto: 0px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--papel); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalto); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1; color: var(--cobalto); letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cobalto); outline-offset: 2px; border-radius: 6px; }

.seccion__in, .top__in, .hero__in {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.3rem; border-radius: 999px; border: 0;
  font-weight: 500; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn--primario { background: var(--cobalto); color: var(--papel); }
.btn--primario:hover { background: var(--cobalto-osc); }
.btn--primario:disabled, .btn--primario[aria-disabled="true"] { background: #9DB0D6; cursor: not-allowed; }
.btn--texto { background: transparent; color: var(--cobalto); padding-inline: .6rem; }
.btn--texto:hover { text-decoration: underline; }
.btn--wa { background: var(--wa); color: var(--papel); }
.btn--wa svg { width: 22px; height: 22px; }
.btn--ancho { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--cobalto); text-decoration: underline; cursor: pointer; }

/* ---------- Cabecera ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.top__in { display: flex; align-items: center; gap: 1rem; height: 64px; }
.top__logo img { height: 26px; width: auto; }
.top__nav { display: none; margin-left: auto; gap: 1.6rem; }
.top__nav a { text-decoration: none; color: var(--tinta); font-size: .95rem; }
.top__nav a:hover { color: var(--cobalto); }
.top__carrito {
  margin-left: auto; position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--cobalto); background: var(--papel); color: var(--cobalto);
  display: grid; place-items: center; cursor: pointer;
}
.top__carrito svg { width: 22px; height: 22px; }
.top__badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--cobalto); color: var(--papel); font-size: .72rem; font-weight: 600;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
@media (min-width: 820px) {
  .top__nav { display: flex; }
  .top__carrito { margin-left: 1rem; }
}

/* ---------- Estado (abierto / cerrado) ---------- */
.estado { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: .88rem; color: var(--tinta-suave); }
.estado__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-suave); flex: none; }
.estado.is-abierto .estado__punto { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.estado.is-cerrado .estado__punto { background: var(--alto); }
.estado.is-abierto .estado__txt strong { color: var(--ok); }
.estado.is-cerrado .estado__txt strong { color: var(--alto); }
.estado--bloque { display: flex; align-items: flex-start; padding: .8rem 1rem; border-radius: 12px; background: var(--barra); border: 1px solid var(--linea); }
.estado--bloque .estado__punto { margin-top: .45rem; }

/* ---------- Hero ---------- */
.hero { background: var(--papel); }
.hero__in { display: grid; gap: 1.6rem; padding-block: 1.6rem 2.6rem; }
.hero h1 {
  font-family: var(--f-display); font-weight: 400; color: var(--cobalto);
  font-size: clamp(3.1rem, 13vw, 5.6rem); line-height: .92; letter-spacing: -.02em; margin: .9rem 0 1rem;
}
.hero h1 em { font-style: italic; }
.hero__sub { margin: 0 0 1.4rem; max-width: 34ch; color: var(--tinta-suave); font-size: 1.05rem; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hero__datos { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--linea); padding-top: 1.1rem; }
.hero__datos li { font-size: .85rem; color: var(--tinta-suave); min-width: 0; }
.hero__datos strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--tinta); }
.hero__foto { position: relative; margin: 0; }
.hero__foto > img:first-child { border-radius: var(--r); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-height: 72vh; }
.hero__perro {
  position: absolute; width: 30%; max-width: 150px; left: -6px; bottom: -22px;
  background: var(--papel); border-radius: 18px; padding: 10px 8px 6px; box-shadow: var(--sombra);
  animation: perro 5s ease-in-out infinite;
}
@keyframes perro { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-3px); } }
@media (min-width: 820px) {
  .hero__in { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; padding-block: 3rem 4rem; }
  .hero__perro { left: -40px; }
}

/* ---------- Menú ---------- */
.menu { background: var(--azulejo); padding-bottom: 3rem;
  background-image: linear-gradient(90deg, rgba(255,255,255,.55) 2px, transparent 2px), linear-gradient(rgba(255,255,255,.55) 2px, transparent 2px);
  background-size: 48px 96px; }
.menu__cab { position: relative; z-index: 15; background: var(--azulejo); border-bottom: 1px solid var(--linea); }
.menu__cab-in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1rem; padding-block: 1rem .8rem; }
.menu__cab h2 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
.tabs { display: flex; gap: .35rem; background: var(--papel); padding: .3rem; border-radius: 999px; border: 1px solid var(--linea); max-width: 100%; overflow-x: auto; }
.tab {
  border: 0; background: transparent; padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
  font-size: .95rem; color: var(--tinta-suave); white-space: nowrap; min-height: 40px;
}
.tab[aria-selected="true"] { background: var(--cobalto); color: var(--papel); }
.menu__nota { margin: 1rem 0 .4rem; font-size: .85rem; color: var(--tinta-suave); min-height: 1.2em; }
.menu__ilustrativas { font-size: .78rem; color: var(--tinta-suave); margin: 1.4rem 0 0; }

.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 980px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pieza {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden;
  padding: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; min-width: 0;
  animation: entra .35s ease both;
}
@keyframes entra { from { transform: translateY(6px); } to { transform: none; } }
.pieza:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.pieza__media { aspect-ratio: 1; background: var(--azulejo); overflow: hidden; }
.pieza__media img, .pieza__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza__cuerpo { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.pieza__nombre { font-weight: 500; font-size: 1rem; line-height: 1.25; }
.pieza__desc { font-size: .8rem; color: var(--tinta-suave); line-height: 1.35; }
.pieza__pie { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.pieza__precio { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--tinta); }
.pieza__precio small { color: var(--tinta-suave); font-size: .75rem; }
.pieza__mas {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cobalto); color: var(--papel);
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
}
.pieza__chip {
  position: absolute; top: .55rem; left: .55rem; background: var(--papel); color: var(--cobalto);
  font-size: .68rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px;
}
.pieza.is-agotado { cursor: not-allowed; opacity: .55; }
.pieza.is-agotado .pieza__mas { background: var(--tinta-suave); }

/* ---------- Cómo pedir ---------- */
.pasos { padding-block: 3.5rem; }
.pasos .seccion__in { display: grid; gap: 2rem; }
.pasos__lista { list-style: none; counter-reset: paso; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.pasos__lista li { counter-increment: paso; display: grid; grid-template-columns: 2.8rem 1fr; column-gap: .9rem; }
.pasos__lista li::before {
  content: counter(paso); grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1.5px solid var(--cobalto); color: var(--cobalto); display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.4rem;
}
.pasos__lista p { margin: .2rem 0 0; color: var(--tinta-suave); font-size: .95rem; max-width: 52ch; }
.pasos__foto { margin: 0; }
.pasos__foto img { border-radius: var(--r); aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (min-width: 820px) { .pasos .seccion__in { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 4rem; } }

/* ---------- Ubicación ---------- */
.ubica { background: var(--cobalto); color: var(--papel); padding-block: 3.5rem; }
.ubica h2 { color: var(--papel); }
.ubica__in { display: grid; gap: 2rem; }
.ubica address { font-style: normal; font-size: 1.15rem; margin: 1rem 0 1.4rem; line-height: 1.45; }
.ubica .btn--primario { background: var(--papel); color: var(--cobalto); }
.horario { overflow-x: auto; }
.horario table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.horario caption { text-align: left; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; padding-bottom: .6rem; }
.horario th, .horario td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid rgba(255,255,255,.22); }
.horario thead th { font-weight: 500; font-size: .8rem; opacity: .8; }
.horario tr.is-hoy td { font-weight: 600; }
.horario tr.is-hoy td:first-child::after { content: " · hoy"; font-weight: 400; opacity: .8; }
@media (min-width: 820px) { .ubica__in { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }

/* ---------- Pie ---------- */
.pie { padding-block: 3rem calc(3rem + var(--barra-alto)); background: var(--papel); }
.pie__in { display: grid; gap: 1.4rem; align-items: center; }
.pie__firma { width: 180px; }
.pie__datos p { margin: .3rem 0; font-size: .95rem; }
.pie__etq { display: inline-block; min-width: 6.5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.pie__perro { width: 200px; justify-self: end; }
@media (min-width: 820px) { .pie__in { grid-template-columns: auto 1fr auto; gap: 3rem; } }

/* ---------- Barra fija del carrito ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: .7rem max(16px, env(safe-area-inset-right, 0px)) calc(.7rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, var(--papel) 60%, transparent);
  pointer-events: none;
}
.barra__btn {
  pointer-events: auto; width: 100%; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: .8rem;
  min-height: 56px; padding: .5rem .6rem .5rem .6rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cobalto); color: var(--papel); font-size: 1rem; font-weight: 500; box-shadow: 0 12px 30px -12px rgba(7,66,171,.7);
  animation: sube .3s ease;
}
@keyframes sube { from { transform: translateY(20px); opacity: .4; } to { transform: none; opacity: 1; } }
.barra__cant { width: 40px; height: 40px; border-radius: 50%; background: var(--papel); color: var(--cobalto); display: grid; place-items: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.barra__total { margin-left: auto; padding-right: .8rem; font-variant-numeric: tabular-nums; }

/* ---------- Hojas (dialog) ---------- */
.hoja {
  padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 560px;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
  border-radius: 22px 22px 0 0; background: var(--papel); color: var(--tinta);
  box-shadow: 0 -10px 40px -10px rgba(11, 22, 51, .35);
}
.hoja[open] { animation: hoja-sube .28s cubic-bezier(.2,.8,.2,1); }
@keyframes hoja-sube { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.hoja::backdrop { background: rgba(11, 22, 51, .45); }
@media (min-width: 640px) {
  .hoja { margin: auto; border-radius: 22px; max-height: min(88vh, 860px); }
}
.hoja__form { display: flex; flex-direction: column; max-height: inherit; position: relative; }
.vista { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.vista[hidden] { display: none !important; }
.hoja__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 1.2rem 1rem; flex: 1; min-height: 0; }
.hoja__cerrar {
  position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--papel); color: var(--tinta); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--sombra);
}
.hoja__pie {
  display: flex; gap: .7rem; align-items: center; padding: .8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea); background: var(--papel); border-radius: 0 0 22px 22px;
}
.hoja__pie--doble { justify-content: space-between; }
.hoja__agregar { flex: 1; }
.hoja__falta { margin: 0; padding: 0 1.2rem; font-size: .82rem; color: var(--alto); text-align: center; }
.hoja__falta:not(:empty) { padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); margin-top: -.3rem; }

/* Configurador */
.prod__media { margin: 0 -1.2rem; aspect-ratio: 16 / 10; overflow: hidden; background: var(--azulejo); }
.prod__media img, .prod__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod__media svg { object-fit: contain; }
.prod__cab { padding: 1rem 0 .4rem; }
.prod__temp { margin: 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalto); font-weight: 500; }
.prod__cab h2 { font-size: 2.3rem; color: var(--tinta); margin-top: .1rem; }
.prod__desc { margin: .3rem 0 0; color: var(--tinta-suave); }
.prod__opciones { display: grid; gap: 1.2rem; padding-top: .8rem; }

.grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.grupo legend { display: flex; align-items: baseline; gap: .5rem; width: 100%; padding: 0; margin-bottom: .55rem; font-weight: 500; }
.req, .opc { font-size: .7rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; }
.req { background: var(--azulejo); color: var(--cobalto); }
.req.is-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.opc { color: var(--tinta-suave); border: 1px solid var(--linea); }
.grupo.is-falta .req { background: color-mix(in srgb, var(--alto) 14%, transparent); color: var(--alto); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .95rem; border-radius: 12px;
  border: 1.5px solid var(--linea); background: var(--papel); font-size: .93rem; transition: border-color .15s, background-color .15s;
}
.chip small { color: var(--tinta-suave); font-variant-numeric: tabular-nums; font-size: .8rem; }
.chip input:checked + span { border-color: var(--cobalto); background: var(--azulejo); color: var(--cobalto-osc); }
.chip input:checked + span small { color: var(--cobalto); }
.chip input:focus-visible + span { outline: 3px solid var(--cobalto); outline-offset: 2px; }

.fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .3rem 0; border-bottom: 1px solid var(--linea); }
.fila:last-child { border-bottom: 0; }
.fila__txt { min-width: 0; }
.fila__txt small { display: block; color: var(--tinta-suave); font-size: .8rem; font-variant-numeric: tabular-nums; }
.interruptor { position: relative; width: 50px; height: 30px; flex: none; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: var(--linea); transition: background-color .2s; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--papel); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.interruptor input:checked + span { background: var(--cobalto); }
.interruptor input:checked + span::after { transform: translateX(20px); }
.interruptor input:focus-visible + span { outline: 3px solid var(--cobalto); outline-offset: 2px; }

.cant { display: inline-flex; align-items: center; gap: .2rem; border: 1.5px solid var(--linea); border-radius: 999px; padding: .2rem; }
.cant__btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--azulejo); color: var(--cobalto); font-size: 1.25rem; cursor: pointer; }
.cant__btn:disabled { opacity: .4; cursor: default; }
.cant output { min-width: 1.8rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.cant--chica .cant__btn { width: 32px; height: 32px; font-size: 1.1rem; }

/* Carrito */
.carrito__titulo { font-family: var(--f-display); font-weight: 400; font-size: 2.3rem; color: var(--cobalto); padding: 1.3rem 3rem .6rem 0; }
.lineas { list-style: none; margin: 0; padding: 0; }
.linea { display: grid; grid-template-columns: 1fr; gap: .8rem; padding: .9rem 0; border-bottom: 1px dashed var(--linea); }
.linea__img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--azulejo); }
.linea__img img, .linea__img svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.linea__cuerpo { min-width: 0; }
.linea__top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.linea__nombre { font-weight: 500; }
.linea__sub { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.linea__mods { list-style: none; margin: .25rem 0 .5rem; padding: 0; font-size: .82rem; color: var(--tinta-suave); }
.linea__mods li { display: flex; justify-content: space-between; gap: .6rem; font-variant-numeric: tabular-nums; }
.linea__acc { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.linea__acc .link { font-size: .85rem; }
.linea__acc .link--quitar { color: var(--alto); }
.totales { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; font-size: 1.05rem; }
.totales strong { font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; color: var(--cobalto); font-variant-numeric: tabular-nums; }
#checkout { display: grid; gap: 1rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 500; font-size: .95rem; display: flex; gap: .5rem; align-items: baseline; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--papel); font-size: 1rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--cobalto); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalto) 20%, transparent); }
.campo input[aria-invalid="true"] { border-color: var(--alto); }
.campo__ayuda { margin: 0; font-size: .8rem; color: var(--tinta-suave); }
.campo__error { margin: 0; font-size: .82rem; color: var(--alto); }
.aviso { background: var(--azulejo); border-radius: 12px; padding: .9rem 1rem; font-size: .88rem; }
.aviso strong { color: var(--cobalto); }
.aviso p { margin: .25rem 0 0; }
.vacio { text-align: center; padding: 1rem 0 2rem; display: grid; justify-items: center; gap: .6rem; }
.vacio img { width: 180px; }
.vacio p { margin: 0; color: var(--tinta-suave); }

/* Revisión (ticket) */
.volver { background: none; border: 0; color: var(--cobalto); padding: 1.1rem 0 0; cursor: pointer; font-size: .9rem; }
.revision__intro { margin: 0 0 1rem; color: var(--tinta-suave); font-size: .92rem; }
.ticket {
  margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.55; background: var(--barra); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem;
  background-image: radial-gradient(circle at 8px -2px, var(--papel) 6px, transparent 6.5px); background-size: 16px 12px; background-repeat: repeat-x;
}
.enviado { text-align: center; display: grid; justify-items: center; gap: .3rem; padding-top: 1rem; }
.enviado img { width: 190px; }
.enviado p { margin: .3rem 0; max-width: 40ch; }
.enviado .carrito__titulo { padding-right: 0; }
.enviado__alt { font-size: .85rem; color: var(--tinta-suave); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
  background: var(--tinta); color: var(--papel); padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem; max-width: calc(100% - 32px);
  box-shadow: var(--sombra); animation: sube .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Selector de modo ---------- */
.menu__fila1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .8rem; width: 100%; }
@media (max-width: 360px) { .modo button svg { display: none; } .modo button { padding-inline: .65rem; } }
.modo { display: inline-flex; background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: .25rem; gap: .2rem; }
.modo button {
  display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; color: var(--tinta-suave);
  padding: .45rem .8rem; border-radius: 999px; font-size: .85rem; cursor: pointer; min-height: 38px; white-space: nowrap;
}
.modo button svg { width: 16px; height: 16px; }
.modo button[aria-checked="true"] { background: var(--tinta); color: var(--papel); }
.menu__cab-in { flex-direction: column; align-items: stretch; }
.menu__cab .tabs { align-self: flex-start; }
@media (min-width: 820px) { .menu__cab-in { flex-direction: row; align-items: end; } .menu__fila1 { width: auto; gap: 1.6rem; } }

/* ---------- Menú visual ---------- */
.escena { position: relative; overflow: hidden; padding-top: .5rem; }
.escena__cupula {
  position: absolute; left: 50%; top: 190px; width: max(720px, 150vw); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background-color: var(--cobalto);
  background-image: linear-gradient(90deg, rgba(255,255,255,.13) 1.5px, transparent 1.5px), linear-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.5px);
  background-size: 34px 68px; pointer-events: none;
}
.escena__anillo { position: absolute; inset: -3%; width: 106%; height: 106%; animation: gira 70s linear infinite; }
.escena__anillo text { font-family: var(--f-texto); font-weight: 700; font-size: 15px; letter-spacing: .14em; fill: var(--cobalto); }
@keyframes gira { to { transform: rotate(360deg); } }

.carrusel {
  position: relative; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 1.2rem 0 1rem; outline: none;
  padding-inline: calc(50% - min(19vw, 95px));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline: 3px solid var(--cobalto); outline-offset: -3px; }
.carrusel__item { flex: none; width: min(38vw, 190px); scroll-snap-align: center; cursor: pointer; }
.carrusel__vaso { transform-origin: 50% 85%; transition: opacity .2s; will-change: transform; }
.carrusel__flota { animation: flota 4.4s ease-in-out infinite; }
.carrusel__item.is-centro .carrusel__flota { animation-duration: 3.6s; }
.vaso-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 18px rgba(4, 25, 70, .28)); }
.vaso-svg .vapor path { animation: vapor 3.2s ease-in-out infinite; }
.vaso-svg .vapor path:nth-child(2) { animation-delay: .6s; }
.vaso-svg .vapor path:nth-child(3) { animation-delay: 1.2s; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes vapor { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-10px); opacity: 0; } }
.carrusel__item.is-agotado .vaso-svg { filter: grayscale(1) opacity(.6); }
.escena__pista {
  position: relative; text-align: center; margin: -.4rem 0 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85);
}

.ficha { position: relative; background: var(--papel); border-radius: 26px 26px 0 0; margin-top: .6rem; padding-block: 1.2rem 2rem; }
.ficha__in { display: grid; justify-items: center; text-align: center; gap: .2rem; }
.ficha__meta { display: flex; gap: .8rem; align-items: center; margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalto); font-weight: 500; }
.ficha__cont { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.ficha__nombre {
  font-family: var(--f-alta); font-weight: 400; text-transform: uppercase; color: var(--cobalto);
  font-size: clamp(2.6rem, 13vw, 5rem); line-height: .9; letter-spacing: -.01em; margin: .2rem 0 .3rem; max-width: 100%; overflow-wrap: anywhere;
}
.ficha__nombre.entra { animation: nombre .35s cubic-bezier(.2,.8,.2,1); }
@keyframes nombre { from { opacity: 0; transform: translateY(10px); letter-spacing: .04em; } to { opacity: 1; transform: none; } }
.ficha__precio { margin: 0; font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha__desc { margin: .1rem 0 1rem; color: var(--tinta-suave); font-family: var(--f-display); font-style: italic; font-size: 1.3rem; }
.ficha__acc { display: flex; align-items: center; gap: .7rem; }
.ficha__cta { min-width: 12rem; }
.redondo {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--cobalto); background: var(--papel); color: var(--cobalto);
  font-size: 1.2rem; cursor: pointer; display: grid; place-items: center;
}
.redondo:disabled { opacity: .3; cursor: default; }
.ficha__sig { margin: .9rem 0 0; font-size: .8rem; color: var(--tinta-suave); min-height: 1.2em; }

/* ---------- Menú en lista (la carta) ---------- */
.carta { padding-top: .2rem; }
.carta__cab, .carta__fila { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 1), 4.2rem); align-items: baseline; column-gap: .4rem; }
.carta__cab { --cols: 1; font-size: .72rem; letter-spacing: .1em; color: var(--tinta-suave); padding: .2rem .2rem .4rem; }
.carta__col { text-align: right; }
.carta__lista { list-style: none; margin: 0; padding: 0; background: var(--papel); border-radius: var(--r); border: 1px solid var(--linea); }
.carta__lista li + li { border-top: 1px solid var(--linea); }
.carta__fila {
  grid-template-columns: auto minmax(1rem, 1fr) repeat(var(--cols, 1), 4.2rem);
  width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; padding: 1rem .9rem; min-height: 56px; border-radius: 0;
}
.carta__cab { grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 1), 4.2rem); padding-inline: .9rem; }
.carta__fila:hover { background: var(--barra); }
.carta__nombre { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .98rem; }
.carta__nombre em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--alto); font-size: .8rem; margin-left: .3rem; }
.carta__puntos { border-bottom: 2px dotted #B9C6E2; margin: 0 .3rem; transform: translateY(-.3em); }
.carta__precio { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.carta__fila.is-agotado { opacity: .55; }

.menu.is-lista .menu__cab { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); }
@media (min-width: 820px) {
  .carrusel { padding-inline: calc(50% - 115px); }
  .carrusel__item { width: 230px; }
  .escena__cupula { top: 230px; width: max(1100px, 120vw); }
}

/* ---------- Portada ---------- */
html:has(.portada:not([hidden])) { overflow: hidden; }
.portada {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  background-color: var(--cobalto);
  background-image: linear-gradient(90deg, rgba(255,255,255,.09) 1.5px, transparent 1.5px), linear-gradient(rgba(255,255,255,.09) 1.5px, transparent 1.5px);
  background-size: 44px 88px; background-position: center;
}
.portada__in { display: grid; justify-items: center; gap: clamp(2.4rem, 7vh, 3.6rem); }
.portada__logo { width: min(74vw, 440px); height: auto; filter: brightness(0) invert(1); animation: portada-logo .9s cubic-bezier(.2,.8,.2,1) both; }
.portada__btn {
  min-height: 58px; padding: .9rem 2.4rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--papel); color: var(--cobalto); font-family: var(--f-texto); font-weight: 600; font-size: 1.08rem; letter-spacing: .02em;
  box-shadow: 0 14px 34px -14px rgba(0, 10, 40, .6); transition: transform .2s ease, box-shadow .2s ease;
  animation: portada-btn .7s .45s cubic-bezier(.2,.8,.2,1) both;
}
.portada__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0, 10, 40, .7); }
.portada__btn:active { transform: scale(.97); }
.portada__btn:focus-visible { outline: 3px solid var(--papel); outline-offset: 4px; }
@keyframes portada-logo { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes portada-btn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.portada.sale { animation: portada-sale .85s cubic-bezier(.76, 0, .24, 1) forwards; pointer-events: none; }
.portada.sale .portada__logo { animation: portada-logo-sale .6s cubic-bezier(.76, 0, .24, 1) forwards; }
.portada.sale .portada__btn { animation: portada-btn-sale .35s ease forwards; }
@keyframes portada-sale { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } }
@keyframes portada-logo-sale { to { transform: translateY(-40px) scale(.92); opacity: 0; } }
@keyframes portada-btn-sale { to { transform: scale(.9); opacity: 0; } }

/* Entrada del inicio después de la portada */
body.inicia .hero__texto > *, body.inicia .hero__foto { animation: inicia .7s cubic-bezier(.2,.8,.2,1) both; }
body.inicia .hero__texto > :nth-child(2) { animation-delay: .08s; }
body.inicia .hero__texto > :nth-child(3) { animation-delay: .16s; }
body.inicia .hero__texto > :nth-child(4) { animation-delay: .24s; }
body.inicia .hero__texto > :nth-child(5) { animation-delay: .32s; }
body.inicia .hero__foto { animation-delay: .2s; }
@keyframes inicia { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .portada.sale { animation: none !important; opacity: 0; } }

/* ---------- Aviso especial (desde el panel) ---------- */
.aviso-banda { background: var(--tinta); color: var(--papel); text-align: center; padding: .65rem max(16px, env(safe-area-inset-right, 0px)) .65rem max(16px, env(safe-area-inset-left, 0px)); }
.aviso-banda p { margin: 0 auto; max-width: 60ch; font-size: .92rem; }