/* Divará · acabado de INTEGRA (tienda, formularios, accesos) en tema claro.
   Tokens tomados de GIMNASIO/app/src/index.css: escala ink, papel, ámbar de marca, radios 28/16/12 y píldora. */

@font-face { font-family: "Inter"; src: url("../fuentes/inter-v20-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fuentes/oswald-v57-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --ink-950: #0a0a0a; --ink-900: #121212; --ink-800: #1f1f1f; --ink-700: #333; --ink-600: #4d4d4d;
  --ink-500: #6b6b6b; --ink-400: #8f8f8f; --ink-300: #b3b3b3; --ink-200: #d4d4d4; --ink-150: #e4e4e4;
  --ink-100: #ececec; --ink-50: #f6f6f6; --papel: #fff;
  --marca: #8a5200; --acento: #c08a2b; --acento-50: #fff8eb; --exito: #128a45; --senal: #c81e2c;
  --fondo: #faf8f5;
  --r-panel: 1.75rem; --r-2xl: 1rem; --r-xl: .75rem;
  --sombra: 0 10px 24px -16px rgb(10 10 10 / .5);
  --sombra-lg: 0 18px 40px -22px rgb(10 10 10 / .55), 0 2px 8px rgb(10 10 10 / .07);
  --sombra-2xl: 0 32px 70px -32px rgb(10 10 10 / .65);
  --ios: cubic-bezier(.32, .72, 0, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --temporada: #b4532a; --temporada-fondo: #fbefe6;
  --display: "Oswald", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-synthesis: style; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: var(--sans); color: var(--ink-950); background: var(--fondo); -webkit-font-smoothing: antialiased; line-height: 1.5; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #e08700; outline-offset: 2px; }
::selection { background: var(--ink-950); color: var(--papel); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

.display { font-family: var(--display); letter-spacing: .01em; font-weight: 600; }
.etiqueta { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }
.marca-texto { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--marca); }
.envoltura { width: min(1240px, 100% - 32px); margin-inline: auto; }
.seccion { padding-block: clamp(56px, 8vw, 104px); }
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.seccion__titulo { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1; margin: 6px 0 0; text-transform: uppercase; }
.seccion__texto { max-width: 46ch; color: var(--ink-600); margin: 10px 0 0; }

/* ——— Vidrio (barra y la isla) ——— */
.vidrio { background-color: color-mix(in oklab, var(--papel) 74%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid color-mix(in oklab, var(--ink-950) 9%, transparent); }

/* ——— Botones (form.jsx / HojaProducto) ——— */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--r-2xl); font-weight: 600; font-size: .9375rem; transition: transform .2s var(--suave), background-color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; }
.boton:active { transform: scale(.97); }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton--primario { background: var(--ink-950); color: var(--papel); box-shadow: var(--sombra); }
.boton--primario:hover { background: var(--ink-800); }
.boton--secundario { background: var(--papel); color: var(--ink-950); border: 1px solid var(--ink-200); }
.boton--secundario:hover { border-color: var(--ink-950); }
.boton--suave { background: var(--ink-100); color: var(--ink-800); }
.boton--suave:hover { background: var(--ink-150); }
.boton--whatsapp { background: #1f8f4e; color: #fff; }
.boton--whatsapp:hover { background: #18773f; }
.boton--ancho { width: 100%; }
.boton--grande { min-height: 52px; font-family: var(--display); font-size: 1.05rem; letter-spacing: .02em; }
.boton[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.icono-redondo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--ink-100); color: var(--ink-800); flex: none; transition: transform .2s var(--suave), background-color .2s; }
.icono-redondo:hover { background: var(--ink-150); }
.icono-redondo:active { transform: scale(.95); }
.icono-redondo svg { width: 18px; height: 18px; }
.insignia { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: #d9706b; color: #fff; box-shadow: 0 0 0 2px var(--papel); }
.insignia:empty, .insignia[data-n="0"] { display: none; }

/* ——— Chips y accesos (PanelTienda / FiltrosTienda) ——— */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--ink-200); background: var(--papel); color: var(--ink-800); transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--suave); scroll-snap-align: start; }
.chip:active { transform: scale(.95); }
.chip svg { width: 16px; height: 16px; }
.chip__n { color: var(--ink-500); font-weight: 400; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--ink-950); border-color: var(--ink-950); color: var(--papel); }
.chip[aria-pressed="true"] .chip__n, .chip[aria-selected="true"] .chip__n { color: var(--ink-300); }
.chip--quieto { border-color: transparent; background: var(--ink-100); }
.separador-v { width: 1px; align-self: stretch; background: var(--ink-200); margin-inline: 4px; flex: none; }
.pastilla { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: var(--ink-100); color: var(--ink-700); }
.pastilla svg { width: 13px; height: 13px; }
.pastilla--abierto { background: #e3f4e9; color: #0d6b34; }
.pastilla--cerrado { background: #fbe7e7; color: #a3121e; }
.pastilla--ambar { background: #fef0c7; color: #8a5200; }

/* ——— Barra superior ——— */
.barra { position: sticky; top: 0; z-index: 50; padding: max(10px, env(safe-area-inset-top)) 0 10px; }
.barra__caja { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; box-shadow: var(--sombra-lg); }
.logo { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: .14em; text-transform: uppercase; }
.logo small { font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; font-weight: 600; color: var(--marca); }
.barra__nav { display: flex; gap: 2px; margin-left: auto; }
.barra__nav a { padding: 10px 14px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--ink-600); transition: background-color .2s, color .2s; }
.barra__nav a:hover { background: var(--ink-100); color: var(--ink-950); }
.barra__nav a[aria-current="true"] { background: var(--ink-950); color: var(--papel); }
.barra__acciones { display: flex; gap: 8px; align-items: center; }
@media (max-width: 960px) { .barra__nav { display: none; } .barra__acciones { margin-left: auto; } .barra__reservar span { display: none; } .barra__reservar { width: 44px; padding: 0; border-radius: 999px; } }

/* ——— Isla inferior (móvil) ——— */
.isla { position: fixed; z-index: 60; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; gap: 2px; padding: 6px; border-radius: 999px; box-shadow: var(--sombra-2xl); }
.isla a { display: grid; justify-items: center; gap: 2px; min-width: 60px; padding: 7px 8px 6px; border-radius: 999px; font-size: .625rem; font-weight: 600; color: var(--ink-600); transition: background-color .25s var(--ios), color .25s; }
.isla a svg { width: 20px; height: 20px; }
.isla a[aria-current="true"] { background: var(--ink-950); color: var(--papel); }
@media (max-width: 960px) { .isla { display: flex; } body { padding-bottom: 96px; } }

/* ——— Portada ——— */
.portada { padding-top: clamp(20px, 4vw, 48px); }
.portada__rejilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.portada__eyebrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.portada h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.75rem, 7.4vw, 5.75rem); line-height: .92; margin: 18px 0 18px; letter-spacing: .005em; }
.portada h1 em { font-style: normal; color: var(--marca); }
.portada__texto { font-size: 1.0625rem; color: var(--ink-600); max-width: 46ch; margin: 0 0 26px; }
.portada__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cifras { display: flex; gap: clamp(18px, 4vw, 40px); margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--ink-150); }
.cifra b { display: block; font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1; }
.cifra span { font-size: .78rem; color: var(--ink-500); font-weight: 500; }
.portada__video { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 1; background: var(--ink-100); box-shadow: var(--sombra-2xl); }
.portada__video video, .portada__video img { width: 100%; height: 100%; object-fit: cover; }
/* arriba: abajo va el texto propio del video */
.portada__sello { position: absolute; left: 16px; top: 16px; right: 16px; display: flex; justify-content: space-between; gap: 8px; align-items: end; }
.portada__sello .vidrio { border-radius: var(--r-2xl); padding: 10px 14px; }
@media (max-width: 860px) { .portada__rejilla { grid-template-columns: 1fr; } .portada__video { aspect-ratio: 1; order: -1; } }

/* ——— Accesos ——— */
.accesos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: clamp(28px, 5vw, 56px); }
.acceso { display: grid; justify-items: start; gap: 10px; padding: 16px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); transition: transform .2s var(--suave), box-shadow .2s; }
.acceso:hover { box-shadow: inset 0 0 0 1px var(--ink-300), var(--sombra); }
.acceso:active { transform: scale(.97); }
.acceso .icono-redondo { width: 40px; height: 40px; }
.acceso b { font-size: .9rem; }
.acceso span { font-size: .75rem; color: var(--ink-500); margin-top: -8px; }
@media (max-width: 860px) { .accesos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .acceso { padding: 12px; } .acceso span { display: none; } }

/* ——— Tarjetas de sucursal ——— */
.sucursales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .sucursales { grid-template-columns: 1fr; } }
.sucursal { display: flex; flex-direction: column; border-radius: var(--r-panel); overflow: hidden; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--sombra); }
.sucursal__foto { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--ink-100); }
.sucursal__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--suave); }
.sucursal:hover .sucursal__foto img { transform: scale(1.04); }
.sucursal__foto .pastilla { position: absolute; left: 14px; top: 14px; }
.sucursal__galeria { position: absolute; right: 14px; bottom: 14px; display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.sucursal__galeria svg { width: 15px; height: 15px; }
.sucursal__cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1; }
.sucursal__nombre { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1; text-transform: uppercase; margin: 2px 0 0; }
.sucursal__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--ink-600); }
.sucursal__meta span { display: inline-flex; align-items: center; gap: 5px; }
.sucursal__meta svg { width: 15px; height: 15px; color: var(--ink-400); }
.estrellas { color: #e08700; font-weight: 700; }
.sucursal__desc { font-size: .9rem; color: var(--ink-600); margin: 0; }
.sucursal__rasgos { display: flex; flex-wrap: wrap; gap: 6px; }
.sucursal__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 6px; }
.sucursal__acciones .boton { font-size: .875rem; padding-inline: 10px; }

/* ——— Temporada ——— */
.temporada { border-radius: calc(var(--r-panel) + 8px); background: var(--temporada-fondo); padding: clamp(16px, 3vw, 28px); transition: background-color .5s var(--suave); }
.temporada__banner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-panel); overflow: hidden; background: var(--papel); min-height: 300px; box-shadow: var(--sombra); }
.temporada__banner img { width: 100%; height: 100%; object-fit: cover; }
.temporada__info { padding: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.temporada__info h3 { font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: .95; text-transform: uppercase; margin: 0; color: var(--temporada); transition: color .5s; }
.temporada__info p { margin: 0; color: var(--ink-600); }
.temporada__fechas { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-500); }
.temporada__fechas svg { width: 15px; height: 15px; }
.temporada__tabs { margin: 18px 0; }
@media (max-width: 760px) { .temporada__banner { grid-template-columns: 1fr; } .temporada__banner img { aspect-ratio: 16 / 9; } }
.nota { display: flex; gap: 8px; align-items: start; font-size: .78rem; color: var(--ink-500); margin-top: 14px; }
.nota svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ——— Menú: filtros y tarjeta de producto (TarjetaProducto 4:5) ——— */
.filtros { position: sticky; top: 72px; z-index: 30; display: grid; gap: 10px; padding: 10px 0 12px; margin-bottom: 18px; background: var(--fondo); }
.filtros::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(var(--fondo), color-mix(in oklab, var(--fondo) 0%, transparent)); pointer-events: none; }
.buscador { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink-200); background: var(--papel); transition: border-color .2s, box-shadow .2s; }
.buscador:focus-within { border-color: var(--ink-950); box-shadow: 0 0 0 4px rgb(10 10 10 / .06); }
.buscador svg { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.buscador input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: max(16px, .95rem); }
.buscador input::placeholder { color: var(--ink-400); }
.buscador input::-webkit-search-cancel-button { display: none; }
.filtros__fila { display: flex; gap: 8px; align-items: center; }
.filtros__fila .buscador { flex: 1; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 44vw), 1fr)); gap: 14px; }
@media (max-width: 520px) { .rejilla { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.producto { container-type: inline-size; }
.producto__boton { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-panel); background: var(--papel); text-align: left; color: #141416; box-shadow: inset 0 0 0 1px var(--ink-150); transition: transform .25s var(--suave), box-shadow .25s; }
.producto__boton:hover { box-shadow: inset 0 0 0 1px var(--ink-200), var(--sombra-lg); }
.producto__boton:active { transform: scale(.97); }
.producto__imagen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ink-100); }
.producto__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--suave); }
.producto__boton:hover .producto__imagen img { transform: scale(1.05); }
.fondo-icono { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(155deg, #b36a00 0%, #3d2000 100%); color: rgb(255 255 255 / .85); }
.fondo-icono::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 58%); }
.fondo-icono svg { width: 34cqw; height: 34cqw; stroke-width: 1.15; }
.fondo-icono[data-tono="verde"] { background: linear-gradient(155deg, #128a45 0%, #042612 100%); }
.fondo-icono[data-tono="rojo"] { background: linear-gradient(155deg, #b8283a 0%, #33080f 100%); }
.fondo-icono[data-tono="grafito"] { background: linear-gradient(155deg, #5b5c63 0%, #1a1a1e 100%); }
.producto__pastilla { position: absolute; left: 5cqw; top: 5cqw; max-width: 78%; padding: 1.3cqw 3.4cqw; border-radius: 999px; font-size: clamp(.625rem, 4.6cqw, .75rem); font-weight: 600; line-height: 1.2; background: #141416; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.producto__pastilla--ambar { background: #f5a524; color: #1a1000; box-shadow: none; }
.producto__pie { flex: none; padding: 2.5cqw max(6cqw, .625rem) max(5.5cqw, .625rem); }
.producto__marca { display: block; font-size: clamp(.625rem, 4.4cqw, .75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.producto__nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; line-height: 1.2; font-size: clamp(.875rem, 7cqw, 1.125rem); margin-top: 1cqw; min-height: 2.4em; }
.producto__fila { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2.5cqw; }
.producto__precio { font-family: var(--display); font-weight: 600; line-height: 1; font-size: clamp(1.125rem, 10cqw, 1.75rem); }
.producto__precio small { font-family: var(--sans); font-size: .62em; font-weight: 600; color: var(--ink-500); }
.producto__mas { display: flex; align-items: center; justify-content: center; width: clamp(1.75rem, 12cqw, 2.75rem); aspect-ratio: 1; border-radius: 999px; background: #141416; color: #fff; flex: none; transition: transform .2s var(--suave), background-color .2s; }
.producto__mas svg { width: 55%; height: 55%; stroke-width: 2.4; }
.producto__mas[data-en-mesa="true"] { background: var(--exito); }
.producto__mas:active { transform: scale(.9); }
.vacio { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: 48px 16px; text-align: center; color: var(--ink-500); }
.vacio svg { width: 32px; height: 32px; }

/* ——— Experiencias ——— */
.experiencias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.experiencias::-webkit-scrollbar { display: none; }
.experiencia { position: relative; scroll-snap-align: start; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-100); color: #fff; }
.experiencia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.experiencia::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .72)); }
.experiencia__txt { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 6px; }
.experiencia__txt b { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.experiencia__txt span { font-size: .85rem; opacity: .9; }
.experiencia .icono-redondo { position: absolute; z-index: 1; left: 16px; top: 16px; background: #fff; color: #000; width: 40px; height: 40px; }
.experiencia .pastilla { position: absolute; z-index: 1; right: 16px; top: 20px; background: rgb(255 255 255 / .9); }

/* ——— Videos ——— */
.videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .videos { grid-template-columns: repeat(2, 1fr); } }
.video-tarjeta { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 9 / 16; background: var(--ink-100); box-shadow: inset 0 0 0 1px var(--ink-150); }
.video-tarjeta video, .video-tarjeta img, .video-tarjeta iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-tarjeta__capa { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; text-align: left; color: #fff; background: linear-gradient(rgb(0 0 0 / .25), transparent 30%, transparent 55%, rgb(0 0 0 / .7)); }
.video-tarjeta__capa b { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; line-height: 1.05; }
.video-tarjeta__play { align-self: center; width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: #000; box-shadow: var(--sombra-lg); transition: transform .25s var(--suave); }
.video-tarjeta:hover .video-tarjeta__play { transform: scale(1.08); }
.video-tarjeta__play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-tarjeta--ig { aspect-ratio: auto; min-height: 560px; background: var(--papel); }
.subtitulo { display: flex; align-items: center; gap: 10px; margin: 36px 0 14px; font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; }
.subtitulo svg { width: 20px; height: 20px; }

/* ——— Reservas (formularios de INTEGRA) ——— */
.reserva { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .reserva { grid-template-columns: 1fr; } }
.reserva > *, .campos > *, .portada__rejilla > *, .mapa > *, .filtros > *, .temporada > * { min-width: 0; }
.panel { border-radius: var(--r-panel); background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--sombra); padding: clamp(18px, 3vw, 30px); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campos .completo { grid-column: 1 / -1; }
@media (max-width: 520px) { .campos { grid-template-columns: 1fr; } }
.campo label, .campo .etiqueta-campo { display: block; margin-bottom: 7px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-600); }
.campo label i { font-style: normal; color: var(--senal); }
.entrada-campo { width: 100%; min-height: 50px; padding: 13px 16px; border-radius: var(--r-2xl); border: 1px solid var(--ink-200); background: var(--ink-50); font-size: max(16px, .95rem); color: var(--ink-950); outline: 0; transition: border-color .2s, background-color .2s, box-shadow .2s; appearance: none; }
.entrada-campo::placeholder { color: var(--ink-400); }
.entrada-campo:focus { border-color: var(--ink-950); background: var(--papel); box-shadow: 0 0 0 4px rgb(10 10 10 / .06); }
.entrada-campo[aria-invalid="true"] { border-color: var(--senal); background: #fdf1f1; }
select.entrada-campo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
textarea.entrada-campo { min-height: 92px; resize: vertical; }
.ayuda { display: block; margin-top: 6px; font-size: .75rem; color: var(--ink-400); }
.error { display: none; margin-top: 6px; font-size: .78rem; color: var(--senal); font-weight: 500; }
.campo[data-error] .error { display: block; }
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-2xl); background: var(--ink-100); }
.segmentado button { min-height: 44px; border-radius: 12px; font-size: .875rem; font-weight: 600; color: var(--ink-600); transition: background-color .25s var(--ios), color .2s, box-shadow .25s; }
.segmentado button[aria-pressed="true"] { background: var(--papel); color: var(--ink-950); box-shadow: 0 1px 2px rgb(10 10 10 / .08), 0 3px 10px -2px rgb(10 10 10 / .12); }
.contador { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 4px; border-radius: var(--r-2xl); border: 1px solid var(--ink-200); background: var(--ink-50); }
.contador b { font-family: var(--display); font-size: 1.35rem; }
.contador .icono-redondo { width: 42px; height: 42px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-200); }
.resumen { position: sticky; top: 92px; display: grid; gap: 16px; }
.resumen__foto { aspect-ratio: 16 / 9; border-radius: var(--r-2xl); overflow: hidden; background: var(--ink-100); }
.resumen__foto img { width: 100%; height: 100%; object-fit: cover; }
.resumen__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.resumen__lista li { display: flex; gap: 12px; align-items: center; font-size: .9rem; }
.resumen__lista li svg { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.resumen__lista li b { margin-left: auto; text-align: right; font-weight: 600; }
.resumen__acciones { display: grid; gap: 8px; }
.resumen__acciones .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mis-reservas { display: grid; gap: 8px; }
.mis-reservas__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-2xl); background: var(--ink-50); font-size: .85rem; }
.mis-reservas__item b { display: block; font-size: .9rem; }
.mis-reservas__item button { margin-left: auto; }

/* ——— Ubicaciones ——— */
.mapa { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
@media (max-width: 860px) { .mapa { grid-template-columns: 1fr; } }
.mapa__lista { display: grid; gap: 10px; align-content: start; }
.mapa__item { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; text-align: left; padding: 12px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); transition: box-shadow .2s, transform .2s var(--suave); }
.mapa__item:active { transform: scale(.98); }
.mapa__item[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink-950), var(--sombra); }
.mapa__item img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.mapa__item b { display: block; }
.mapa__item span { font-size: .8rem; color: var(--ink-500); display: block; }
.mapa__marco { position: relative; min-height: 420px; border-radius: var(--r-panel); overflow: hidden; background: var(--ink-100); box-shadow: inset 0 0 0 1px var(--ink-150); }
.mapa__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__flotante { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 20px; box-shadow: var(--sombra-lg); }
.mapa__flotante p { margin: 0; font-size: .85rem; flex: 1 1 220px; }

/* ——— Hoja (HojaProducto / galería / mi mesa) ——— */
.velo { position: fixed; inset: 0; z-index: 80; background: rgb(10 10 10 / .38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ios); }
.velo[data-abierto="true"] { opacity: 1; pointer-events: auto; }
.hoja { position: fixed; z-index: 90; left: 50%; bottom: 0; width: min(560px, 100%); max-height: min(92dvh, 860px); display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: var(--papel); box-shadow: var(--sombra-2xl); transform: translate(-50%, 104%); transition: transform .42s var(--ios); }
.hoja[data-abierto="true"] { transform: translate(-50%, 0); }
.hoja:not([data-abierto="true"]) { visibility: hidden; transition: transform .42s var(--ios), opacity .25s, visibility 0s .45s; }
.hoja--ancha { width: min(980px, 100%); }
@media (min-width: 760px) { .hoja { bottom: 50%; border-radius: 28px; transform: translate(-50%, calc(50% + 40px)) scale(.97); opacity: 0; pointer-events: none; transition: transform .38s var(--ios), opacity .25s; } .hoja[data-abierto="true"] { transform: translate(-50%, 50%); opacity: 1; pointer-events: auto; } }
.hoja__asa { width: 40px; height: 5px; border-radius: 999px; background: var(--ink-200); margin: 10px auto 0; flex: none; }
@media (min-width: 760px) { .hoja__asa { display: none; } }
.hoja__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 8px 22px; flex: none; }
.hoja__cuerpo { overflow-y: auto; padding: 4px 22px 22px; overscroll-behavior: contain; }
.hoja__pie { position: sticky; bottom: 0; padding: 14px 22px max(18px, env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--ink-100); display: grid; gap: 10px; flex: none; }
.hoja__foto { aspect-ratio: 16 / 10; border-radius: var(--r-2xl); overflow: hidden; background: var(--ink-100); position: relative; container-type: inline-size; box-shadow: inset 0 0 0 1px var(--ink-150); }
.hoja__foto img { width: 100%; height: 100%; object-fit: cover; }
.hoja__foto .fondo-icono svg { width: 22cqw; height: 22cqw; }
.hoja h3 { font-family: var(--display); font-size: 1.75rem; line-height: 1.05; margin: 14px 0 6px; text-transform: uppercase; }
.hoja__desc { color: var(--ink-600); margin: 0 0 16px; }
.precio-bloque { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-2xl); background: var(--ink-50); box-shadow: inset 0 0 0 1px var(--ink-150); }
.precio-bloque b { font-family: var(--display); font-size: 1.75rem; line-height: 1; }
.cantidad { display: flex; align-items: center; gap: 6px; }
.cantidad b { min-width: 28px; text-align: center; font-family: var(--display); font-size: 1.25rem; }
.cantidad .icono-redondo { width: 40px; height: 40px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-200); }
.disponible { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--ink-100); }
.galeria img:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 520px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
.mesa__lista { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.mesa__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.mesa__item img, .mesa__item .mini-icono { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.mesa__item .mini-icono { position: relative; overflow: hidden; container-type: inline-size; }
.mesa__item b { display: block; font-size: .9rem; line-height: 1.25; }
.mesa__item span { font-size: .8rem; color: var(--ink-500); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--ink-600); }
.total b { font-family: var(--display); font-size: 1.6rem; color: var(--ink-950); }

/* ——— Botón flotante «Mi mesa» ——— */
.flotante-mesa { position: fixed; z-index: 55; right: 20px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--ink-950); color: var(--papel); box-shadow: var(--sombra-2xl); transform: translateY(24px) scale(.9); opacity: 0; pointer-events: none; transition: transform .4s var(--ios), opacity .3s; font-weight: 600; font-size: .9rem; }
.flotante-mesa[data-visible="true"] { transform: none; opacity: 1; pointer-events: auto; }
.flotante-mesa .icono-redondo { background: rgb(255 255 255 / .14); color: #fff; width: 40px; height: 40px; }
/* En el celular «Mi mesa» vive en la barra superior (con su insignia): nada flota sobre las tarjetas. */
@media (max-width: 960px) { .flotante-mesa { display: none; } }

/* ——— Pie ——— */
.pie { margin-top: 40px; padding: 48px 0 40px; border-top: 1px solid var(--ink-150); background: var(--papel); }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie h4 { margin: 0 0 10px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }
.pie p, .pie li { font-size: .875rem; color: var(--ink-600); margin: 0 0 6px; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie a:hover { color: var(--ink-950); text-decoration: underline; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--ink-100); font-size: .78rem; color: var(--ink-400); }

/* ——— Aviso (toast) ——— */
.aviso { position: fixed; z-index: 100; left: 50%; top: 18px; transform: translate(-50%, -160%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--ink-950); color: #fff; font-size: .875rem; font-weight: 600; box-shadow: var(--sombra-2xl); transition: transform .4s var(--ios); }
.aviso[data-visible="true"] { transform: translate(-50%, 0); }
.aviso svg { width: 18px; height: 18px; color: #6ee7a0; }

/* ——— Entrada suave al hacer scroll ——— */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--suave), transform .7s var(--suave); }
.aparece[data-visto="true"] { opacity: 1; transform: none; }

[data-res-zona] { flex-wrap: wrap; overflow: visible; }

/* El botón de reproducir va abajo, junto al título: el centro del póster queda libre para el logo del reel. */
.video-tarjeta__capa { justify-content: flex-start; }
.video-tarjeta__capa b { margin-top: auto; padding-right: 64px; }
.video-tarjeta__play { position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; }
.video-tarjeta__play svg { width: 22px; height: 22px; }

/* ═══════════ Portada general: entrada tipo «¿quién está viendo?» ═══════════ */
.vista[hidden] { display: none !important; }
.entrada { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: var(--ink-100); }
.entrada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* velo claro: la foto se ve, pero el panel manda */
.entrada__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(250 248 245 / .55) 0%, rgb(250 248 245 / .1) 55%, rgb(250 248 245 / 0) 100%); }
.entrada__caja { position: relative; width: min(1240px, 100% - 32px); margin-inline: auto; padding-block: 28px; }
.entrada__panel { width: min(520px, 100%); padding: clamp(22px, 3.4vw, 36px); border-radius: 32px; box-shadow: var(--sombra-2xl); background-color: color-mix(in oklab, var(--papel) 84%, transparent); animation: subir .7s var(--suave) both; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }
.entrada__marca { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.entrada h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .92; margin: 22px 0 12px; }
.entrada h1 em { font-style: normal; color: var(--marca); }
.entrada__texto { color: var(--ink-600); margin: 0 0 20px; }
.entrada__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; font-size: .8rem; }
.entrada__pie .etiqueta { text-transform: none; letter-spacing: 0; font-weight: 500; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .875rem; padding: 10px 4px; }
.enlace-flecha svg { width: 16px; height: 16px; }
.selector { display: grid; gap: 10px; }
.opcion { position: relative; display: grid; grid-template-columns: 88px 1fr 44px; gap: 14px; align-items: center; padding: 8px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); transition: transform .25s var(--suave), box-shadow .25s; animation: subir .6s var(--suave) both; }
.opcion:nth-child(2) { animation-delay: .08s; } .opcion:nth-child(3) { animation-delay: .16s; }
.opcion:hover { box-shadow: inset 0 0 0 1px var(--ink-950), var(--sombra-lg); transform: translateY(-2px); }
.opcion:active { transform: scale(.98); }
.opcion[data-recordada="true"] { box-shadow: inset 0 0 0 2px var(--acento); }
.opcion__medio { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--ink-100); }
.opcion__medio img, .opcion__medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opcion__medio video { opacity: 0; transition: opacity .4s; }
.opcion[data-video="true"] .opcion__medio video { opacity: 1; }
.opcion__texto { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.opcion__texto b { font-family: var(--display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.opcion__texto > span:not(.pastilla) { font-size: .8rem; color: var(--ink-500); }
.opcion__texto .pastilla { margin-top: 4px; font-size: .65rem; padding: 4px 8px; }
.opcion__flecha { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--ink-950); color: #fff; transition: transform .25s var(--suave); }
.opcion:hover .opcion__flecha { transform: translateX(3px); }
.opcion__flecha svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .entrada { align-items: end; }
  .entrada__velo { background: linear-gradient(180deg, rgb(250 248 245 / 0) 0%, rgb(250 248 245 / .35) 45%, rgb(250 248 245 / .9) 100%); }
  .entrada__caja { padding-top: 34vh; }
  .opcion { grid-template-columns: 72px 1fr 40px; }
  .opcion__flecha { width: 40px; height: 40px; }
}

.conoce { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.conoce > * { min-width: 0; }
@media (max-width: 860px) { .conoce { grid-template-columns: 1fr; } }

.tira-reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.tira-reels::-webkit-scrollbar { display: none; }
.reel { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: var(--r-panel); overflow: hidden; background: var(--ink-100); scroll-snap-align: start; box-shadow: var(--sombra); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: center; }
.boton--blanco { background: rgb(255 255 255 / .94); color: var(--ink-950); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sombra); }
.boton--blanco:hover { background: #fff; }

/* ═══════════ Barra de la casa: cambiador de sucursal ═══════════ */
.cambiador { position: relative; }
.cambiador__boton { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--ink-100); font-weight: 600; font-size: .875rem; transition: background-color .2s; }
.cambiador__boton:hover { background: var(--ink-150); }
.cambiador__boton svg { width: 15px; height: 15px; color: var(--ink-500); }
.cambiador__menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 70; width: 300px; padding: 6px; border-radius: 22px; box-shadow: var(--sombra-2xl); background-color: color-mix(in oklab, var(--papel) 92%, transparent); display: grid; gap: 2px; animation: subir .25s var(--suave); }
.cambiador__menu[hidden] { display: none; }
.cambiador__op { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; transition: background-color .15s; }
.cambiador__op:hover { background: var(--ink-100); }
.cambiador__op img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.cambiador__op b { display: block; font-size: .9rem; }
.cambiador__op small { color: var(--ink-500); font-size: .75rem; }
.cambiador__op > svg { width: 18px; height: 18px; color: var(--exito); }
.cambiador__op--portada { border-top: 1px solid var(--ink-100); border-radius: 0 0 16px 16px; margin-top: 4px; padding-top: 12px; }
@media (max-width: 960px) { .barra__caja { gap: 8px; padding-left: 14px; } .logo { font-size: 1.2rem; } }

/* ═══════════ Cabecera de la casa con video ═══════════ */
.casa { padding-top: 6px; }
.casa__escena { position: relative; min-height: min(78svh, 720px); border-radius: calc(var(--r-panel) + 6px); overflow: hidden; background: var(--ink-100); display: flex; align-items: end; box-shadow: var(--sombra-2xl); }
.casa__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.casa__velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 10 10 / .32), rgb(10 10 10 / 0) 45%); }
.casa__info { position: relative; margin: clamp(14px, 2.4vw, 28px); width: min(500px, 100% - 28px); padding: clamp(20px, 3vw, 30px); border-radius: 28px; box-shadow: var(--sombra-2xl); background-color: color-mix(in oklab, var(--papel) 86%, transparent); animation: subir .6s var(--suave) both; }
.casa__nombre { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .95; margin: 6px 0 10px; }
.casa__desc { color: var(--ink-600); margin: 12px 0 18px; font-size: .95rem; }
.casa__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.casa__rapidos { display: flex; gap: 8px; margin-top: 14px; }
.casa__estado { position: absolute; top: 18px; right: 18px; box-shadow: var(--sombra); }
.casa__rasgos { margin-top: 14px; }
@media (max-width: 640px) { .casa__escena { min-height: 0; flex-direction: column; align-items: stretch; } .casa__escena::before { content: ""; display: block; aspect-ratio: 4 / 3; } .casa__video { height: auto; aspect-ratio: 4 / 3; bottom: auto; } .casa__velo { display: none; } .casa__info { width: auto; margin: -36px 10px 10px; } .casa__acciones .boton { flex: 1; } }

/* ═══════════ Carta por secciones ═══════════ */
.segmentado--chico { display: inline-grid; grid-auto-flow: column; }
.segmentado--chico button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; }
.segmentado--chico svg { width: 16px; height: 16px; }
.carta { columns: 2 420px; column-gap: 20px; }
.carta__seccion { break-inside: avoid; margin: 0 0 20px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-panel); background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); scroll-margin-top: 170px; }
.carta__cabeza { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--ink-950); }
.carta__cabeza h3 { margin: 0; font-family: var(--display); font-size: 1.75rem; line-height: 1; text-transform: uppercase; flex: 1; }
.carta__cabeza .icono-redondo { width: 40px; height: 40px; background: var(--acento-50); color: var(--marca); }
.carta__n { font-family: var(--display); font-size: 1rem; color: var(--ink-400); }
.carta__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 6px; }
.carta__fotos[data-n="1"] { grid-template-columns: 1fr; } .carta__fotos[data-n="2"] { grid-template-columns: 1fr 1fr; }
.carta__fotos button { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--ink-100); }
.carta__fotos[data-n="1"] button { aspect-ratio: 16 / 7; }
.carta__fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--suave); }
.carta__fotos button:hover img { transform: scale(1.06); }
.carta__lista { list-style: none; margin: 0; padding: 0; }
.plato { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--ink-200); }
.plato:last-child { border-bottom: 0; padding-bottom: 0; }
.plato__boton { display: grid; gap: 4px; text-align: left; min-width: 0; border-radius: 10px; }
.plato__boton:hover .plato__nombre { text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.plato__linea { display: flex; align-items: baseline; gap: 8px; }
.plato__nombre { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.plato__puntos { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--ink-300); transform: translateY(-4px); }
.plato__precio { font-family: var(--display); font-weight: 600; font-size: 1.2rem; white-space: nowrap; }
.plato__precio small { font-family: var(--sans); font-size: .72rem; color: var(--ink-500); font-weight: 600; }
.plato__desc { font-size: .84rem; color: var(--ink-500); line-height: 1.45; }
.plato__marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.plato__marca { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: var(--ink-100); color: var(--ink-600); }
.plato__marca--ambar { background: #fef0c7; color: var(--marca); }
.producto__mas.plato__mas { width: 36px; }
.producto__mas.plato__mas svg { width: 18px; height: 18px; }

/* ═══════════ Ubicación de la casa ═══════════ */
.mapa__marco--solo { min-height: 460px; }
.otras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; align-items: center; }
.otras > .etiqueta { grid-column: 1 / -1; }
.otras .mapa__item { grid-template-columns: 56px 1fr 20px; }
.otras .mapa__item > svg { width: 18px; height: 18px; color: var(--ink-400); }
@media (max-width: 640px) { .otras { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .entrada__caja { padding-top: 18vh; padding-bottom: 16px; }
  .entrada__panel { padding: 20px 16px 16px; border-radius: 28px; }
  .entrada h1 { font-size: 2.35rem; margin: 16px 0 14px; }
  .entrada__texto { display: none; }
  .selector { gap: 8px; }
  .opcion { grid-template-columns: 60px 1fr 40px; gap: 12px; padding: 6px; border-radius: 18px; }
  .opcion__medio { border-radius: 13px; }
  .opcion__texto b { font-size: 1.35rem; }
  .opcion__texto > span:not(.pastilla) { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .opcion__texto .pastilla { white-space: nowrap; font-size: .6rem; }
  .entrada__pie { margin-top: 12px; }
}

/* ═══════════ Pedido y ticket ═══════════ */
.pedido { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ink-100); }
.pedido .segmentado button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
.pedido .segmentado svg { width: 16px; height: 16px; }
.pedido .campos { gap: 12px; margin-top: 6px; }
.ticket { position: relative; margin-top: 16px; padding: 22px 20px; border-radius: 20px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); display: grid; gap: 10px;
  /* muescas de boleto */
  -webkit-mask: radial-gradient(circle 10px at 0 64px, transparent 98%, #000) , radial-gradient(circle 10px at 100% 64px, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.ticket__cabeza { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 2px dashed var(--ink-200); font-size: .8rem; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.ticket__cabeza .logo { font-size: 1.2rem; color: var(--ink-950); }
.ticket__folio { font-family: var(--display); font-size: 2rem; letter-spacing: .06em; line-height: 1; margin-top: -4px; }
.ticket__platillos { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--ink-200); display: grid; gap: 6px; font-size: .88rem; }
.ticket__platillos li { display: flex; justify-content: space-between; gap: 12px; }
.mis-reservas__ver { text-align: left; font-size: .8rem; color: var(--ink-500); display: grid; }
.mis-reservas__ver b { color: var(--ink-950); }

/* Banda del modo prueba (solo aparece si el Worker corre con SIMULAR=1) */
.banda-prueba { position: fixed; z-index: 120; left: 50%; top: max(4px, env(safe-area-inset-top)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #fef0c7; color: #8a5200; font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--sombra); pointer-events: none; }
.banda-prueba svg { width: 12px; height: 12px; }
@media (min-width: 961px) { .banda-prueba { top: auto; bottom: 16px; left: 16px; transform: none; } }


/* ═══════════ Pulido para iOS ═══════════ */
/* Fotos: entran con un fundido suave sobre un tono cálido, nunca «saltan». app.js marca .lista al cargar. */
:root { --hueco: #eee8e0; }
.producto__imagen, .sucursal__foto, .hoja__foto, .carta__fotos button, .opcion__medio, .experiencia, .galeria img, .resumen__foto, .temporada__banner, .video-tarjeta, .reel, .portada__video, .casa__escena { background-color: var(--hueco); }
img { transition: opacity .55s var(--suave); }
img:not(.lista) { opacity: 0; }
/* El video aparece cuando ya tiene cuadro; mientras, se ve su póster (iOS en Ahorro de batería no reproduce solo). */
video { transition: opacity .6s var(--suave); }

/* Desplazamientos horizontales: inercia nativa y sin disparar el gesto de «atrás» de Safari. */
.chips, .experiencias, .tira-reels { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

/* En pantallas táctiles el :hover se queda pegado tras tocar: ahí solo cuenta :active. */
@media (hover: none) {
  .opcion:hover { transform: none; box-shadow: inset 0 0 0 1px var(--ink-150); }
  .opcion[data-recordada="true"]:hover { box-shadow: inset 0 0 0 2px var(--acento); }
  .opcion:hover .opcion__flecha { transform: none; }
  .producto__boton:hover { box-shadow: inset 0 0 0 1px var(--ink-150); }
  .producto__boton:hover .producto__imagen img, .sucursal:hover .sucursal__foto img, .carta__fotos button:hover img { transform: none; }
  .acceso:hover { box-shadow: inset 0 0 0 1px var(--ink-150); }
  .video-tarjeta:hover .video-tarjeta__play { transform: none; }
  .boton--primario:hover { background: var(--ink-950); }
  .opcion:active, .acceso:active, .mapa__item:active { transform: scale(.975); }
}

/* Hoja: se arrastra hacia abajo para cerrar, como en iOS. */
.hoja { will-change: transform; touch-action: pan-y; }
.hoja[data-arrastre="true"] { transition: none; }
.hoja__asa { width: 44px; height: 5px; margin-top: 8px; cursor: grab; }
.hoja__cabeza { touch-action: none; }
.hoja__asa { touch-action: none; padding: 0; }
@media (max-width: 759px) { .hoja__asa::after { content: ""; display: block; height: 18px; margin-top: -10px; } }

/* Transición entre la portada y una casa (View Transitions; Safari 18+, Chrome). */
::view-transition-old(root) { animation: vt-sale .32s var(--ios) both; }
::view-transition-new(root) { animation: vt-entra .42s var(--ios) both; }
@keyframes vt-sale { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px) scale(1.01); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ═══════════ Móvil primero: ajustes de la prueba de usabilidad ═══════════ */
/* Portada: filtros por plan */
.filtros-casa { margin: 0 0 12px; }
.filtros-casa .chip { min-height: 38px; padding: 0 12px; font-size: .78rem; background: rgb(255 255 255 / .7); }
.opcion { transition: transform .25s var(--suave), box-shadow .25s, opacity .3s var(--suave), filter .3s; }
.opcion[data-encaja="false"] { opacity: .38; filter: saturate(.3); transform: scale(.98); }
.opcion[data-encaja="true"] { box-shadow: inset 0 0 0 2px var(--ink-950), var(--sombra); }
.opcion__motivo:empty { display: none; }
.opcion__motivo { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--marca); margin-top: 2px; }
.selector--hoja { gap: 10px; }

/* Barra en celular: cambiador claro; el pedido vive en la isla */
.cambiador__boton svg:first-child { color: var(--marca); }
@media (max-width: 960px) { .barra__acciones [data-abrir-mesa] { display: none; } .cambiador__boton { min-height: 44px; padding: 0 12px; } }

/* Isla con «Pedido» y su contador */
.isla__pedido { display: grid; justify-items: center; gap: 2px; min-width: 60px; padding: 7px 8px 6px; border-radius: 999px; font-size: .625rem; font-weight: 600; color: var(--ink-600); }
.isla__icono { position: relative; display: grid; }
.isla__icono svg { width: 20px; height: 20px; }
.isla__icono .insignia { right: -10px; top: -6px; min-width: 18px; height: 18px; font-size: .62rem; }
.insignia.salta { animation: salta .5s var(--suave); }
@keyframes salta { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Aviso con acción («Ver pedido») */
.aviso { padding: 8px 8px 8px 18px; }
.aviso:not(:has(.aviso__accion)) { padding: 12px 18px; }
.aviso__accion { margin-left: 4px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink-950); font-weight: 700; font-size: .8rem; }
.aviso[data-visible="true"] { pointer-events: auto; }
@media (max-width: 760px) { .aviso { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translate(-50%, 180%); max-width: calc(100% - 24px); } .aviso[data-visible="true"] { transform: translate(-50%, 0); } .aviso span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* Reserva: días en un toque */
.dias .dia { display: grid; justify-items: center; gap: 0; min-width: 64px; min-height: 56px; padding: 6px 12px; line-height: 1.15; }
.dias .dia b { font-size: .82rem; text-transform: capitalize; }
.dias .dia span { font-size: .7rem; font-weight: 500; color: var(--ink-500); }
.dias .dia[aria-pressed="true"] span { color: var(--ink-300); }
.otra-fecha { display: flex !important; align-items: center; gap: 10px; margin: 10px 0 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .8rem !important; color: var(--ink-500) !important; }
.otra-fecha .entrada-campo { flex: 1; min-height: 44px; padding: 8px 12px; }

/* Hoja: pista de «desliza hacia abajo» la primera vez */
.hoja[data-pista="true"] .hoja__asa { animation: asa 1.1s var(--suave) 2; background: var(--ink-400); }
.hoja[data-pista="true"] .hoja__cabeza::after { content: "Desliza hacia abajo para cerrar"; position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-size: .7rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; animation: subir .4s var(--suave); }
.hoja__cabeza { position: relative; }
@keyframes asa { 50% { transform: translateY(6px); width: 56px; } }

/* Toques cómodos en celular: el «+» nunca menor de 40 px */
@media (max-width: 760px) {
  .producto__mas { width: max(40px, clamp(1.75rem, 12cqw, 2.75rem)); }
  .producto__mas.plato__mas { width: 42px; }
  .seccion { padding-block: 44px; }
  .seccion__titulo { font-size: 2.1rem; }
  .carta__seccion { padding: 16px; border-radius: 24px; scroll-margin-top: 150px; }
  .carta__cabeza h3 { font-size: 1.5rem; }
  .plato__nombre { font-size: .95rem; }
  .filtros { top: max(64px, calc(env(safe-area-inset-top) + 58px)); }
  .casa__info { padding: 18px; }
  .casa__nombre { font-size: 2.3rem; }
  .temporada { padding: 10px; border-radius: 28px; }
  .temporada__info { padding: 18px; }
}
/* correcciones móvil */
.entrada__caja, .entrada__panel, .selector, .opcion { min-width: 0; }
.filtros-casa .chip[aria-pressed="true"] { background: var(--ink-950); border-color: var(--ink-950); color: var(--papel); }
.aviso { opacity: 0; transition: transform .4s var(--ios), opacity .3s; }
.aviso[data-visible="true"] { opacity: 1; }
.aviso__accion { white-space: nowrap; flex: none; }
.aviso span { min-width: 0; }
.hoja[data-pista="true"] .hoja__cabeza::after { top: 50%; transform: translate(-50%, -50%); }
.hoja [data-hoja-titulo] { transition: opacity .3s; }
.hoja[data-pista="true"] [data-hoja-titulo] { opacity: 0; }
.dias .dia { min-width: 74px; border-radius: 18px; }

/* ═══════════ Más vida: carruseles, cinta viva, promociones y redes ═══════════ */
/* Carrusel de la carta: fotos grandes con nombre, precio y «+»; se desliza con el dedo */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 14px -4px 8px; padding: 2px 4px 6px; overscroll-behavior-x: contain; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel__item { scroll-snap-align: start; display: grid; gap: 8px; container-type: inline-size; }
.carrusel__foto { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--hueco); box-shadow: var(--sombra); }
.carrusel__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--suave), opacity .55s var(--suave); }
@media (hover: hover) { .carrusel__foto:hover img { transform: scale(1.05); } }
.carrusel__foto:active { transform: scale(.98); }
.carrusel__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.carrusel__pie span { display: grid; font-size: .9rem; min-width: 0; font-family: var(--display); font-weight: 600; }
.carrusel__pie b { font-family: var(--sans); font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrusel__pie .producto__mas { width: 38px; }
.carta__seccion .carrusel + .carta__lista { margin-top: 4px; }

/* Cinta de fotos en movimiento continuo (portada) */
.viva { overflow: hidden; padding: 4px 0 clamp(40px, 6vw, 72px); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.viva__pista { display: flex; gap: 12px; width: max-content; animation: cinta 70s linear infinite; }
.viva:hover .viva__pista, .viva:active .viva__pista { animation-play-state: paused; }
.viva__pista img { width: clamp(150px, 22vw, 240px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; background: var(--hueco); }
.viva__pista img:nth-child(even) { transform: translateY(18px); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Galería viva de la casa (avanza sola) */
.galeria-viva { padding-top: 18px; }
.galeria-viva__pista { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 520px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galeria-viva__pista::-webkit-scrollbar { display: none; }
.galeria-viva__item { scroll-snap-align: start; aspect-ratio: 3 / 2; border-radius: 24px; overflow: hidden; background: var(--hueco); }
.galeria-viva__item img { width: 100%; height: 100%; object-fit: cover; }
.puntos { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.puntos span { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-200); transition: width .3s var(--suave), background-color .3s; }
.puntos span[data-activo] { width: 22px; background: var(--ink-950); }

/* Promociones */
.promos { display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 380px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; }
.promos::-webkit-scrollbar { display: none; }
.promo { position: relative; scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden; background: var(--hueco); box-shadow: var(--sombra-lg); }
.promo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__capa { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 18px; color: #fff; background: linear-gradient(180deg, rgb(0 0 0 / .15), transparent 30%, rgb(0 0 0 / .78)); }
.promo__arriba { display: flex; justify-content: space-between; align-items: center; }
.promo__etiqueta { font-family: var(--display); font-size: 1.6rem; line-height: 1; padding: 8px 14px; border-radius: 14px; background: #f5a524; color: #1a1000; transform: rotate(-3deg); }
.promo h3 { font-family: var(--display); font-size: 2rem; line-height: 1; text-transform: uppercase; margin: 0 0 6px; }
.promo p { margin: 0 0 8px; font-size: .9rem; opacity: .92; }
.promo__vigencia { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; opacity: .9; }
.promo__vigencia svg { width: 14px; height: 14px; }
.promo .boton { align-self: flex-start; }

/* Redes oficiales */
.redes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.red { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); transition: transform .2s var(--suave), box-shadow .2s; }
.red:active { transform: scale(.98); }
@media (hover: hover) { .red:hover { box-shadow: inset 0 0 0 1px var(--ink-950), var(--sombra); } }
.red__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; }
.red__icono svg { width: 22px; height: 22px; }
.red--instagram .red__icono { background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af); }
.red--facebook .red__icono { background: #1877f2; }
.red__texto { display: grid; min-width: 0; }
.red__texto b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.red__texto span { font-size: .78rem; color: var(--ink-500); }
.red__ir { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-600); }
.red__ir svg { width: 15px; height: 15px; }

/* Regla general: un elemento con [hidden] nunca se ve, aunque su clase le dé display */
[hidden] { display: none !important; }

/* ═══════════ Botón fijo «Ordenar o reservar» y asistente ═══════════ */
.cta-ordenar { position: fixed; z-index: 58; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--ink-950); color: #fff; box-shadow: 0 18px 40px -12px rgb(10 10 10 / .55); transition: transform .3s var(--ios), box-shadow .3s; animation: subir .6s var(--suave) .4s both; }
.cta-ordenar:active { transform: translateX(-50%) scale(.96); }
.cta-ordenar__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: #25d366; color: #fff; }
.cta-ordenar__icono svg { width: 22px; height: 22px; }
.cta-ordenar__texto { display: grid; text-align: left; line-height: 1.2; }
.cta-ordenar__texto b { font-family: var(--display); font-size: 1.05rem; letter-spacing: .02em; font-weight: 600; }
.cta-ordenar__texto small { font-size: .7rem; color: var(--ink-300); font-weight: 500; }
.cta-ordenar .insignia { right: auto; left: 38px; top: 2px; }
/* en la casa, en celular, el botón vive dentro de la isla */
@media (max-width: 960px) { .cta-ordenar[data-vista="casa"] { display: none; } }
@media (min-width: 961px) { .cta-ordenar { left: auto; right: 24px; transform: none; } .cta-ordenar:active { transform: scale(.96); } .flotante-mesa { bottom: 96px; } }
body:has(.hoja[data-abierto="true"]) .cta-ordenar { opacity: 0; pointer-events: none; }
[data-vista="portada"] .pie { padding-bottom: 110px; }

.isla__ordenar { display: grid; justify-items: center; gap: 2px; min-width: 64px; margin-top: -22px; font-size: .625rem; font-weight: 700; color: var(--ink-950); }
.isla__ordenar-boton { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; background: #25d366; color: #fff; box-shadow: 0 10px 22px -8px rgb(37 211 102 / .8), 0 0 0 4px var(--fondo); transition: transform .2s var(--suave); }
.isla__ordenar:active .isla__ordenar-boton { transform: scale(.92); }
.isla__ordenar-boton svg { width: 24px; height: 24px; }

/* Asistente dentro de la hoja */
.hoja--asistente { height: min(92dvh, 860px); }
.hoja--asistente .hoja__cuerpo { flex: 1; }
.asis__progreso { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 2px 0 16px; }
.asis__progreso span { height: 4px; border-radius: 9px; background: var(--ink-150); transition: background-color .3s; }
.asis__progreso span[data-hecho] { background: var(--ink-950); }
.asis__titulo { font-family: var(--display); font-size: 1.9rem; line-height: 1; text-transform: uppercase; margin: 0 0 16px; }
.asis__pie { display: flex; justify-content: space-between; gap: 10px; }
.asis__pie .boton { min-height: 50px; }
.asis__pie .boton--primario, .asis__pie .boton--whatsapp { flex: 1; max-width: 320px; margin-left: auto; }
.modos { display: grid; gap: 10px; }
.modo { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; text-align: left; padding: 14px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--ink-150); transition: box-shadow .2s, transform .2s var(--suave); }
.modo:active { transform: scale(.98); }
.modo[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink-950); }
.modo .icono-redondo { width: 48px; height: 48px; background: var(--acento-50); color: var(--marca); }
.modo b { display: block; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }
.modo span span { font-size: .84rem; color: var(--ink-500); }
.chips.horas { flex-wrap: wrap; overflow: visible; }
.chips.horas .chip { min-height: 40px; padding: 0 12px; }
.asis__menu { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.asis__menu li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 6px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ink-100); }
.asis__menu img, .asis__menu .mini-icono { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; position: relative; overflow: hidden; container-type: inline-size; }
.asis__menu b { display: block; font-size: .9rem; line-height: 1.25; }
.asis__menu span span { font-size: .8rem; color: var(--ink-500); font-family: var(--display); }
.asis__menu .cantidad .icono-redondo { width: 38px; height: 38px; }
.icono-redondo.mas-negro { background: var(--ink-950); color: #fff; box-shadow: none; }
.asis__barra-total { position: sticky; bottom: -22px; display: flex; justify-content: space-between; align-items: baseline; margin: 12px -22px -22px; padding: 12px 22px; background: color-mix(in oklab, var(--papel) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--ink-100); font-weight: 600; }
.asis__barra-total b { font-family: var(--display); font-size: 1.4rem; }

/* Foto que vuela al pedido */
.vuela { position: fixed; z-index: 200; object-fit: cover; pointer-events: none; box-shadow: var(--sombra-lg); opacity: 1 !important; }

/* «Ahora se antoja» */
.carrusel--antojo { grid-auto-columns: min(70%, 280px); margin: 0; }
.antojo .seccion__cabeza { margin-bottom: 16px; }

/* Tarjeta de visitas (lealtad) */
.lealtad { margin-top: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(155deg, #fff8eb, #fdf0d8); box-shadow: inset 0 0 0 1px #f3dfb4; display: grid; gap: 10px; }
.lealtad__cabeza { display: flex; justify-content: space-between; align-items: baseline; }
.lealtad__cabeza b { font-family: var(--display); font-size: 1.3rem; }
.lealtad__sellos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lealtad__sellos span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 999px; border: 2px dashed #e2c78f; color: #d9bb7d; }
.lealtad__sellos span svg { width: 45%; height: 45%; }
.lealtad__sellos span[data-lleno] { border-style: solid; border-color: var(--marca); background: var(--marca); color: #fff; }
.lealtad__sellos span[data-nuevo] { animation: sello .7s var(--suave) .3s both; }
@keyframes sello { 0% { transform: scale(1.6) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lealtad p { margin: 0; font-size: .9rem; }
.cta-ordenar { width: max-content; white-space: nowrap; }
@media (max-width: 640px) { .entrada__caja { padding-bottom: 96px; } }

/* Vista previa difuminada (LQIP): la foto se ve al instante y se afina al cargar */
img[data-lqip] { opacity: 1 !important; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ═══════════ Casa en páginas deslizables (Casa ↔ Carta ↔ Temporada ↔ Videos ↔ Reservar) ═══════════ */
body.en-casa { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
.barra--casa { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding-bottom: 6px; }
.paginas { display: flex; height: 100dvh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.paginas::-webkit-scrollbar { display: none; }
.pagina { flex: 0 0 100%; width: 100%; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-align: start; scroll-snap-stop: always; padding-top: var(--alto-barra, 128px); padding-bottom: calc(110px + env(safe-area-inset-bottom)); overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; contain: layout paint; }
.pagina > .seccion:first-child { padding-top: 14px; }
.pagina > .casa:first-child { padding-top: 6px; }
.pagina .filtros { top: calc(var(--alto-barra, 128px) - 6px); }
.pagina .resumen { top: calc(var(--alto-barra, 128px) + 12px); }
.pagina .pie { margin-top: 24px; }

/* Pestañas con indicador que sigue al dedo */
.pestanas { position: relative; display: flex; gap: 2px; margin-top: 8px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; box-shadow: var(--sombra); }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { position: relative; z-index: 1; flex: 1 0 auto; text-align: center; padding: 9px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink-600); transition: color .25s; white-space: nowrap; }
.pestanas a[aria-current="true"] { color: #fff; }
.pestanas__indicador { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 60px); transform: translateX(var(--x, 4px)); border-radius: 999px; background: var(--ink-950); transition: transform .35s var(--ios), width .35s var(--ios); }
.pestanas[data-arrastrando] .pestanas__indicador { transition: none; }
@media (min-width: 961px) { .pestanas { display: none; } .pagina { padding-bottom: 40px; } }
@media (max-width: 380px) { .pestanas a { padding: 8px 10px; font-size: .76rem; } }

/* ═══════════ Pila inteligente (widgets de iOS) ═══════════ */
.pila { position: relative; margin-bottom: 14px; }
.pila__pista { height: clamp(200px, 52vw, 250px); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: 28px; overscroll-behavior: contain; box-shadow: var(--sombra-lg); }
.pila__pista::-webkit-scrollbar { display: none; }
.widget { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; border-radius: 28px; padding: 18px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.widget--foto { background-color: var(--hueco); background-size: cover; background-position: center; color: #fff; padding: 0; }
.widget__capa { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; background: linear-gradient(180deg, rgb(0 0 0 / .05), rgb(0 0 0 / .7)); }
.widget h3 { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1; text-transform: uppercase; }
.widget__eti { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgb(255 255 255 / .9); color: var(--ink-950); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.widget__eti svg { width: 13px; height: 13px; }
.widget__eti--oscura { background: var(--ink-950); color: #fff; }
.widget__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.widget__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--ink-950); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.widget__chip img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; }
.widget__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.widget__lista button { width: 100%; display: grid; grid-template-columns: 18px 36px 1fr auto; gap: 10px; align-items: center; text-align: left; font-size: .85rem; }
.widget__lista b { font-family: var(--display); color: var(--marca); }
.widget__lista img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.widget__lista span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.widget__lista em { font-style: normal; font-family: var(--display); }
.widget--pedido { background: linear-gradient(155deg, #0f2a1b, #0a0a0a); color: #fff; justify-content: space-between; }
.widget--pedido .boton { align-self: flex-start; }
.widget .promo__etiqueta { align-self: flex-start; }
.pila__puntos { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); display: grid; gap: 5px; }
.pila__puntos span { width: 5px; height: 5px; border-radius: 9px; background: var(--ink-200); transition: height .3s var(--suave), background-color .3s; }
.pila__puntos span[data-activo] { height: 16px; background: var(--ink-950); }

/* Paneles por categoría */
.paneles-cat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (min-width: 700px) { .paneles-cat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .paneles-cat { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.panel-cat { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; text-align: left; color: #fff; background-color: var(--hueco); background-size: cover; background-position: center; box-shadow: var(--sombra); transition: transform .25s var(--suave); }
.panel-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / .72)); }
.panel-cat[data-sin-foto] { background: linear-gradient(155deg, #5b5c63, #1a1a1e); }
.panel-cat:active { transform: scale(.97); }
@media (hover: hover) { .panel-cat:hover { transform: translateY(-2px); } }
.panel-cat__icono { position: absolute; z-index: 1; top: 10px; left: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--ink-950); }
.panel-cat__icono svg { width: 17px; height: 17px; }
.panel-cat__texto { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; display: grid; gap: 2px; }
.panel-cat__texto b { font-family: var(--display); font-size: clamp(1rem, 4.4vw, 1.25rem); line-height: 1.05; text-transform: uppercase; }
.panel-cat__texto span { font-size: .7rem; opacity: .9; }

/* Reserva: sucursales en paneles con foto */
.paneles-suc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.panel-suc { position: relative; aspect-ratio: 1 / 1.05; border-radius: 18px; overflow: hidden; text-align: left; color: #fff; box-shadow: inset 0 0 0 1px var(--ink-150); transition: transform .2s var(--suave), box-shadow .2s; }
.panel-suc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-suc__capa { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / .72)); }
.panel-suc__capa b { font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; line-height: 1; }
.panel-suc__capa span { font-size: .68rem; opacity: .9; }
.panel-suc[aria-pressed="false"] { opacity: .62; }
.panel-suc[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink-950); transform: scale(1.02); }
.panel-suc:active { transform: scale(.97); }
.panel-suc__check { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #fff; color: var(--ink-950); }
.panel-suc__check svg { width: 15px; height: 15px; }

/* Asistente: «ver más» del platillo */
.asis__menu li { grid-template-columns: 1fr auto; }
.asis__ver { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-align: left; min-width: 0; }
.asis__ver span { min-width: 0; }
.asis__menu li[data-abierto] { box-shadow: inset 0 0 0 2px var(--ink-950); }
.asis__detalle { grid-column: 1 / -1; display: grid; gap: 10px; padding: 4px 4px 8px; animation: subir .35s var(--suave); }
.asis__detalle img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.asis__detalle p { margin: 0; font-size: .88rem; color: var(--ink-600); }

/* Pantallas grandes: el contenido de cada página no se estira de más */
@media (min-width: 1400px) { .pagina .envoltura { width: min(1320px, 100% - 64px); } }
.asis__menu .asis__detalle img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 14px; }
.panel-suc__capa b { font-size: clamp(.85rem, 3.6vw, 1.1rem); overflow-wrap: anywhere; }

/* ═══════════ Platillo: detalle y personalización ═══════════ */
.plato-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plato-cabeza h3 { margin: 14px 0 6px; }
.chips--envuelve { flex-wrap: wrap; overflow: visible; }
.personaliza { margin-top: 18px; display: grid; gap: 10px; }
.personaliza__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.personaliza__cabeza b { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
.personaliza__cabeza span { font-size: .75rem; color: var(--ink-500); }
.chip.ing { min-height: 40px; padding: 0 14px; font-size: .8rem; }
.personaliza .chip.ing[data-cambio="sin"][aria-pressed="true"] { background: #fff; color: var(--ink-950); border-color: var(--ink-950); }
.personaliza .chip.ing[data-cambio="sin"][aria-pressed="false"] { background: var(--ink-50); color: var(--ink-400); border-color: var(--ink-150); text-decoration: line-through; }
.chip.ing--base { background: var(--ink-950); color: #fff; border-color: var(--ink-950); }
.chip.ing--base svg { width: 13px; height: 13px; opacity: .7; }
.personaliza .chip.ing[data-cambio="pet"][aria-pressed="true"] { background: var(--acento-50); color: var(--marca); border-color: var(--acento); }
.resumen-mods { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--ink-50); font-size: .85rem; font-weight: 600; color: var(--ink-600); transition: background-color .25s, color .25s; }
.resumen-mods[data-cambio="true"] { background: var(--acento-50); color: var(--marca); }
.alergenos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.alergenos .ayuda { flex-basis: 100%; }
.pastilla--verde { background: #e3f4e9; color: #0d6b34; }
.pastilla--picante { background: #fde7dc; color: #a0421c; }
.mesa__cambios { display: block; font-size: .75rem !important; color: var(--marca) !important; font-weight: 600; }
.mesa__editar { font-size: .75rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; color: var(--ink-950); }
.ticket__platillos small, .asis small { display: block; font-size: .72rem; color: var(--marca); margin-top: 2px; }

/* Vista previa del mensaje (burbuja de WhatsApp) */
.burbuja-wa { position: relative; margin: 6px 0 0 auto; max-width: 92%; padding: 10px 12px 18px; border-radius: 16px 4px 16px 16px; background: #dcf8c6; box-shadow: 0 1px 1px rgb(0 0 0 / .12); }
.burbuja-wa pre { margin: 0; white-space: pre-wrap; font-family: var(--sans); font-size: .9rem; line-height: 1.4; color: #111; }
.burbuja-wa > span { position: absolute; right: 10px; bottom: 4px; font-size: .65rem; color: #4a7a52; }
.plato__marca--verde { background: #e3f4e9; color: #0d6b34; }
.plato__marca--picante { background: #fde7dc; color: #a0421c; }
.asis__pie { flex-wrap: wrap; }
.aviso-prueba { flex-basis: 100%; margin: 0 0 4px; font-size: .72rem; font-weight: 600; color: #8a5200; text-align: center; }