/* =========================================================================
   Sumaq · el restorán — hoja v8 (v7 intacta al lado)
   v8: los efectos de escritorio llegan al teléfono, en su propia versión, con
   capítulos clavados a la medida del teléfono (bloque «ESCENA DEL TELÉFONO», al
   final). Y ninguna medida usa vh a secas: todo es svh o dvh, para que nada
   salte cuando la barra del navegador aparece o se va.
   v6: el letrero luminoso de fondo en «El equipo», una sola foto con el equipo
   completo, y la web sin precios (viven en la carta).
   v7: las 10 mejoras aprobadas de REVISION-DISENO-SUMAQ-V1.html. Cada una va
   marcada en la hoja con «v7 · n», con n el número de la síntesis:
     1 la reserva responde al dedo      6 titulares con más cuerpo
     2 la cocina sin recalcular         7 un solo material
     3 la brasa solo en hero y cierre   8 sin hover pegado en el teléfono
     4 el menú sale de su botón         9 fluidez en el teléfono
     5 lo atenuado se lee               10 la barra del teléfono, liviana
   v5: la puerta de colores en el hero, el letrero entero en «El equipo» y, en
   «La cocina», la ficha de cada plato —qué lleva, cómo sabe, con qué tomarlo—
   en vez de su historia, que ya cuenta la carta.
   Diseñado por Operaria

   v3 sobre v2 (que queda intacta), dos pedidos de Francisco:
     · ninguna pantalla de navy liso: cada capítulo lleva su foto, y en el
       teléfono la foto queda de fondo mientras el texto pasa por encima;
     · el cierre es el de Restó360 en estructura y movimiento: la mesa a
       sangre que sube por detrás, la firma en cursiva, la marca y el orbital
       del canon sobre «Diseñado por Operaria».

   La v2 cuenta el local, no la carta: cómo empezó, la cocina, el equipo, la
   sala, la carta y la reserva. Guion de Vera (GUION-WEB-SUMAQ-V1.html).
   La v1 (sumaq-v1.css) queda intacta al lado.

   CÓMO LEER ESTA HOJA. Tres estados, en este orden, y el orden importa:

     1. BASE    — lo que se ve SIN JavaScript y en el teléfono. Todo el
                  contenido visible, apilado y en orden. Es el estado RESUELTO:
                  si algo falla, esto es lo que queda en pantalla.
     2. ESCRITORIO — (min-width:1025px): columnas y la barra en una fila.
                  Sigue sin pines: esto también lo ve quien pide menos
                  movimiento o navega sin JS.
     3. ESCENA  — el mismo 1025px, más alto suficiente, sin reduced-motion y
                  con html.js: rieles, pines y efectos. Es LUJO: cada efecto
                  arranca de su estado resuelto y el JS lo retrocede para
                  contarlo (lección del 10-ago-2026).

   Un solo número de ancho en toda la hoja: 1025px (ley 3). El alto mínimo de
   641px no es otro breakpoint de layout: es la guarda de la ley 1, que prefiere
   perder el freno a cortar el contenido.
   ========================================================================= */

:root{
  /* --- Suelo. Heredado verbatim de producto/menu-v2.css: la carta ya está en
     vivo y el sitio tiene que leerse como el mismo local, no como un primo. --- */
  --navy:#0A1428;
  --navy-2:#132649;
  --navy-3:#0d1b34;
  /* Peldaños derivados (vienen de la v1): continúan el eje navy hacia el teal
     para que los capítulos asciendan de lo hondo a lo alto sin colores nuevos. */
  --navy-cocina:#0F2140;
  --navy-4:#152C50;
  --navy-5:#173452;
  --navy-6:#1A3F59;
  --crema:#EDEAE3;

  --teal:#349891;
  --teal-cl:#7BC4BC;
  --tinta:#08211F;

  /* Irrupción. #ED5E22 lo decidió Francisco el 26-ago-2026. */
  --brasa:#ED5E22;
  --rosa:#EDC9C0;

  --display:'Cormorant Garamond',Georgia,serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;

  /* La mide el JS sobre la barra real y la reescribe: en el teléfono la barra
     tiene dos filas y en escritorio una. Suponer su alto fue lo que tapó un
     titular una vez (lección 10-ago-2026). */
  --barra-h:104px;

  --curva:cubic-bezier(.16,1,.3,1);
  --col:min(calc(100vw - 32px),1180px);
}

*{box-sizing:border-box;margin:0;padding:0}

/* smooth le pelea al scrubbing: el ancla viaja instantánea. */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;background:var(--navy);scroll-padding-top:var(--barra-h)}

body{
  font-family:var(--sans);
  background:var(--navy);
  color:var(--crema);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}

img{display:block;max-width:100%}
/* height:auto NO es opcional: los atributos width/height del <img> son CSS de
   baja prioridad, y sin esto el alto del atributo estira la foto. */
img{height:auto}

button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--teal-cl);text-decoration:none;transition:color .2s}
:focus-visible{outline:2px solid var(--teal-cl);outline-offset:3px;border-radius:4px}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:99;
  padding:12px 18px;background:var(--teal);color:var(--tinta);
  font-weight:600;font-size:14px;
}
.saltar:focus{left:8px;top:8px;color:var(--tinta)}

/* El centinela. El JS le pregunta al CSS en qué gramática estamos (ley 4). */
#modo{position:static;width:0;height:0;overflow:hidden}

/* ---------------- una sola voz por papel ---------------- */

/* UNA escala de h2 para todos los capítulos, y mide también por vh (ley 1). */
.cap h2{
  /* v7 · 6 · peso 400, más cuerpo y la interlínea cerrada: en 300 se leía
     delgado sobre las fotos veladas. Sigue siendo UNA escala, medida por vh. */
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,min(4.6vw,5.6svh),3.4rem);
  line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance;
  /* Cormorant trae cifras antiguas: «13:00» se leía «13:oo». */
  font-variant-numeric:lining-nums;
}
/* Un corte por oración, sin tocar el texto: «La cocina es / de Julio. La / sala…»
   partía la frase donde le tocaba al ancho. */
.cap h2 .frase{display:block}
/* La línea suelta bajo un título: serif cursiva. */
.linea{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.25rem,min(2.8vw,3.2svh),1.9rem);
  line-height:1.25;color:var(--crema);
}
.linea em{color:var(--teal-cl)}
/* Prosa: sans, una talla. */
.prosa{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1rem,1.15vw,1.06rem);
  line-height:1.66;max-width:58ch;color:rgba(237,234,227,.86);
}
/* La historia —de un plato o del local— es contenido protagónico, no pie de
   foto: tamaño de lectura, crema plena. Regla de Vera. */
.historia,.paso{
  font-family:var(--sans);font-size:clamp(1.02rem,min(1.3vw,2.4svh),1.16rem);line-height:1.6;
  color:var(--crema);max-width:52ch;
}
/* Rótulos: mono, caja alta, tracking. Nada bajo 11px (piso de Restó360). */
.rotulo{
  font-family:var(--mono);font-weight:400;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-cl);
}
.rotulo--brasa{color:var(--brasa)}
/* El nombre y el precio viajan SIEMPRE en la misma línea, y el precio no es
   más chico ni más gris. Sumaq no pide disculpas por cobrar. */
.plato__nombre{font-family:var(--display);font-weight:400;font-size:1.4rem;color:var(--crema)}
.precio{font-family:var(--sans);font-weight:700;font-size:19px;color:var(--crema);white-space:nowrap;font-variant-numeric:tabular-nums}
.prosa .plato__nombre{font-size:1.2em}
.prosa .precio{font-size:inherit}

/* ---------------- botones · blancos de dedo de 44px ---------------- */

.boton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:0 1.4rem;border:1px solid transparent;
  /* v7 · 1 · el botón muestra que recibió el dedo: se hunde 3% en 160 ms. */
  transition:background .2s var(--curva),color .2s var(--curva),border-color .2s var(--curva),transform 160ms var(--curva);
  cursor:pointer;
}
.boton--lleno{background:var(--teal);color:var(--tinta);font-weight:500}
.boton--linea{border-color:rgba(237,234,227,.42);color:var(--crema)}
.acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* El punto de brasa que respira. Elemento de casa heredado de la carta: marca
   que la mesa está abierta. Va por TIEMPO, nunca por scroll. */
.brasa{
  position:relative;
  display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--brasa);margin-right:.7em;vertical-align:middle;
  animation:latir 3.4s ease-in-out infinite;
}
/* v7 · 9 · el anillo que se expande era un box-shadow animado: repintaba en
   cada cuadro. Ahora es un ::after que crece con transform y se apaga con
   opacity, que corren en el compositor. Se ve igual. */
.brasa::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:var(--brasa);
  animation:anillo 3.4s ease-out infinite;
}
@keyframes latir{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes anillo{0%{transform:scale(1);opacity:.5}60%,100%{transform:scale(2.4);opacity:0}}

/* =========================================================================
   0 · LA BARRA
   v7 · 10 · En el teléfono la barra de arriba lleva solo la casa —Sumaq y la
   etiqueta—, translúcida, y las dos acciones bajan a una franja fija al
   alcance del pulgar. En escritorio, una fila arriba, como antes.
   La translucidez va en un ::before y no en la barra: un backdrop-filter en la
   barra la volvería contenedor de sus hijos fijos, y la franja de abajo se
   quedaría pegada a la barra en vez de a la pantalla.
   ========================================================================= */

.barra{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.15rem 16px;
}
.barra::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(10,20,40,.78);
  backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);
}
/* Un degradado corto en vez del filo de 1px: la barra flota sobre la foto. */
.barra::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:12px;pointer-events:none;
  background:linear-gradient(rgba(10,20,40,.35),rgba(10,20,40,0));
}
.barra__casa{display:flex;align-items:center;gap:.4rem;min-width:0}
.barra__marca{
  display:inline-flex;align-items:center;min-height:44px;padding-right:.3rem;
  font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--crema);letter-spacing:.01em;
}
/* La etiqueta es chica a la vista, pero su blanco de dedo mide 44px: el alto lo
   pone el <a>, la píldora es el <span> de adentro. */
.barra__demo{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem}
.barra__demo span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,234,227,.78);
  padding:.28rem .6rem;border:1px solid rgba(123,196,188,.4);border-radius:99px;
  transition:border-color .2s,color .2s;
}
.barra__acciones{
  position:fixed;left:0;right:0;bottom:0;z-index:41;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;
  padding:.5rem 16px calc(.5rem + env(safe-area-inset-bottom));
  background:rgba(10,20,40,.82);
  backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:0 -14px 28px -14px rgba(10,20,40,.7);
}
@media (prefers-reduced-transparency:reduce){
  .barra::before,.barra__acciones{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Lo que la franja de abajo tapa se le devuelve a la página. El JS la mide;
   el valor de acá es el arranque (y el de sin JS). */
:root{--acciones-h:0px;--barra-h:52px}   /* v9 · ya no hay franja abajo */
body{padding-bottom:var(--acciones-h)}
.barra__boton{width:100%;padding:0 .5rem;letter-spacing:.08em;white-space:nowrap}

/* «Quiero una web así»: <details> nativo. Abre sin JS. */
.quiero{position:relative}
.quiero summary{list-style:none}
.quiero summary::-webkit-details-marker{display:none}
.quiero summary::after{content:'';width:6px;height:6px;margin-left:.55em;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--curva)}
.quiero[open] summary{border-color:var(--teal-cl);color:var(--teal-cl)}
.quiero[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.quiero__menu{
  /* En el teléfono la franja está abajo: el menú abre hacia arriba. */
  position:absolute;right:0;bottom:calc(100% + .5rem);z-index:5;
  width:min(300px,calc(100vw - 32px));
  display:grid;
  background:var(--navy);border:1px solid rgba(123,196,188,.32);
  box-shadow:0 24px 48px -12px rgba(10,20,40,.85);   /* v7 · 7 · sombra navy, no negra */
  transform-origin:bottom right;
}
/* v7 · 4 · el menú sale de su botón: 180 ms, de 96% a 100% y de transparente a
   pleno, desde la esquina del botón. Cierra seco (el <details> lo esconde). */
@keyframes menu-abre{from{opacity:0;transform:scale(.96)}}
.quiero[open] .quiero__menu{animation:menu-abre 180ms var(--curva)}
.quiero__opcion{
  display:grid;gap:.1rem;min-height:56px;align-content:center;
  padding:.6rem 1rem;color:var(--crema);font-size:.98rem;
}
.quiero__opcion + .quiero__opcion{border-top:1px solid rgba(123,196,188,.18)}

/* v7 · 1 · el toque se ve: todo lo que se aprieta se hunde 3%. */
.boton:active,.chip:active{transform:scale(.97)}
/* v7 · 8 · hover solo donde hay puntero fino: en el teléfono el borde quedaba
   marcado después del toque. */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--teal)}
  .boton--lleno:hover{background:var(--teal-cl);color:var(--tinta)}
  .boton--linea:hover{border-color:var(--teal-cl);color:var(--teal-cl)}
  .barra__marca:hover{color:var(--crema)}
  .barra__demo:hover span{border-color:var(--teal-cl);color:var(--teal-cl)}
  .quiero__opcion:hover{background:var(--navy-2);color:var(--crema)}
  .chip:hover{border-color:var(--teal-cl)}
}

/* =========================================================================
   ESTRUCTURA DE CAPÍTULO
   Ley 5: un capítulo de texto mide su contenido. Ley 2: el riel por fuera, el
   sticky por dentro. `.cap__pin` recibe `position` en UN solo lugar de la hoja
   (lección 8-sep-2026: una regla posterior le ganaba al pin).
   ========================================================================= */

.cap{position:relative;background:var(--fondo,var(--navy))}
.cap__pin{position:static}
.cap__dentro{width:var(--col);margin-inline:auto;padding-block:clamp(3.5rem,9svh,6rem)}
/* El texto va siempre por encima de la foto y su velo. */
.cap__dentro,.sala__intro{position:relative;z-index:2}

/* Ley 6: cover con object-position decidido por escena (--enc). */
.foto-fondo{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--enc,50% 42%);
}
.velo{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(10,20,40,.92),rgba(10,20,40,.35) 58%,rgba(10,20,40,.62)),
    linear-gradient(90deg,rgba(10,20,40,.78),rgba(10,20,40,.06) 62%);
}
.velo--hondo{
  background:
    linear-gradient(0deg,rgba(10,20,40,.94),rgba(10,20,40,.66) 55%,rgba(10,20,40,.8)),
    linear-gradient(90deg,rgba(10,20,40,.9),rgba(10,20,40,.3) 70%);
}
/* El radial de brasa de la carta: lo que hace que una foto cálida se apoye en
   un campo frío sin pelearlo. */
.radial-brasa{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side at 12% 92%,rgba(237,94,34,.34),transparent 72%);
}

/* EL FONDO DE CAPÍTULO. Un navy liso no es un capítulo (Francisco, v3).
   La capa es absoluta y cubre la sección entera; adentro, el cuadro de la foto
   se queda PEGADO a la pantalla mientras el texto pasa por encima. Así una foto
   16:9 no se estira sobre 1.500px de teléfono: se recorta a una pantalla, con
   su --enc, y acompaña todo el capítulo.
   El sticky vive en un hijo de una capa absoluta, y no en la foto con margen
   negativo: así queda confinado a su capítulo y nunca asoma por debajo de él. */
.fondo{position:absolute;inset:0;z-index:0;pointer-events:none}
.fondo__cuadro{
  position:sticky;top:var(--barra-h);
  height:calc(100svh - var(--barra-h));max-height:100%;overflow:hidden;
}
.fondo .foto-fondo{height:100%}
.fondo .velo{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--fondo) 58%,transparent),
      color-mix(in srgb,var(--fondo) 80%,transparent) 55%,
      color-mix(in srgb,var(--fondo) 88%,transparent));
}

/* ---------------- 1 · hero ---------------- */

.cap--hero{--fondo:var(--navy)}
.cap--hero .cap__pin{min-height:calc(100svh - var(--barra-h) - var(--acciones-h));display:flex;align-items:flex-end;overflow:hidden}
.cap--hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.6rem,min(17vw,13svh),7.5rem);line-height:.95;letter-spacing:-.01em;
  margin:.15em 0 .05em;
}
.hero__linea{margin-top:.5rem;max-width:22ch}
/* En el teléfono el texto vive abajo: el velo oscurece solo ahí y deja ver la
   puerta y la luz de adentro, que son la foto. */
.cap--hero .velo{background:linear-gradient(0deg,rgba(10,20,40,.95) 0,rgba(10,20,40,.72) 42%,rgba(10,20,40,.12) 74%,rgba(10,20,40,.4))}
.hero__horario{
  display:flex;align-items:center;margin-top:1.4rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,234,227,.78);
}
/* «La palabra se traduce sola». ESTADO RESUELTO: las dos palabras apiladas y
   unidas por el filete. El JS solo las separa para poder contarlo. */
.traduce{margin:.2em 0 .1em;font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,min(4.4vw,5svh),2.6rem);line-height:1.1;color:var(--teal-cl)}
.traduce__par{display:inline-flex;flex-direction:column;align-items:flex-start}
.traduce__filete{display:block;width:2.6em;height:2px;background:var(--brasa);margin:.18em 0;transform-origin:left}

/* ---------------- 2 · cómo empezó ---------------- */

.cap--empezo{--fondo:var(--navy-3)}
.empezo__dentro{display:grid;gap:1.4rem}
.empezo__texto h2{margin:.6rem 0 0;max-width:18ch}
/* v8 · la escena solo es caja en el teléfono; acá sus hijos son de la grilla. */
.empezo__escena{display:contents}
.empezo__dentro .puerta{margin-top:.8rem}
.cocina__escena{display:contents}
.pin-marca{display:none}
.pasos{list-style:none;display:grid;gap:1.1rem;counter-reset:paso}
.paso{position:relative;padding-left:1.4rem}
.paso::before{
  content:'';position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--brasa);
}
/* La puerta. ESTADO RESUELTO: abierta. El JS la entorna y la abre con el scroll. */
.puerta{max-width:440px}
.puerta img{width:100%;border-radius:2px;clip-path:inset(0 var(--entorna,0%) 0 var(--entorna,0%));
  box-shadow:0 40px 80px -24px rgba(10,20,40,.9)}

/* ---------------- 3 · la cocina ---------------- */

.cap--cocina{--fondo:var(--navy-cocina)}
.entrada h2{margin:.6rem 0 .2rem}
.entrada .linea{color:rgba(237,234,227,.8)}
.duplas{list-style:none;display:grid;gap:clamp(2.6rem,7svh,4rem);margin-top:clamp(2rem,5svh,3rem)}
.dupla{display:grid;gap:1.1rem}
.dupla__texto{display:grid;gap:.7rem}
/* La ficha del plato: nombre y precio arriba, en la misma línea; debajo, tres
   rótulos con su texto a tamaño de lectura. El trago lleva también su precio. */
.dupla__nombre{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  max-width:52ch;padding-bottom:.55rem;border-bottom:1px solid rgba(237,94,34,.34)}
.ficha-plato{display:grid;gap:.8rem;max-width:52ch}
.ficha-plato dt{margin-bottom:.15rem}
.ficha-plato dd{margin:0;font-family:var(--sans);font-size:clamp(1rem,min(1.2vw,2.2svh),1.08rem);line-height:1.55;color:var(--crema)}
.trago{font-weight:400}
.trago .plato__nombre{font-size:1.18em}
.trago .precio{font-size:inherit}
.dupla__plato{max-width:560px}
.dupla__plato img{width:100%;border-radius:2px}
.dupla__plato figcaption,.brasa__pie{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(237,94,34,.34);
}

/* ---------------- 4 · el equipo ---------------- */

.cap--equipo{--fondo:var(--navy-2)}
.equipo__dentro{display:grid;gap:2.2rem}
.equipo__texto h2{margin:.6rem 0 1.2rem}
.equipo__prosa{font-size:clamp(1.02rem,min(1.3vw,2.4svh),1.16rem);color:var(--crema)}
/* Los nombres. ESTADO RESUELTO: todos encendidos. */
.nombre{
  font-family:var(--display);font-size:1.28em;font-weight:500;color:var(--crema);
  background:linear-gradient(var(--brasa),var(--brasa)) 0 100%/var(--subraya,100%) 1px no-repeat;
  transition:color .35s var(--curva),background-size .5s var(--curva);
}
.nombre.aun-no{color:rgba(237,234,227,.55);--subraya:0%}   /* v7 · 5 · antes .38 */
.mosaico{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.mosaico figure{margin:0;min-width:0}
.mosaico img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;object-position:var(--enc,50% 40%);border-radius:2px}
.mosaico__grande{grid-column:1 / -1}
.mosaico__grande img{aspect-ratio:4/5}
/* El letrero no se recorta nunca: «SUMAQ» y «COCINA PERUANA» enteros. Su cuadro
   ya mide 4:5 como el archivo; contain cubre el milímetro de diferencia (es un
   letrero, no una foto de ambiente: la ley 6 deja contain para esto). */
.mosaico__letrero{object-fit:contain!important;background:var(--navy)}

/* ---------------- 5 · la sala ---------------- */

.cap--sala{--fondo:var(--navy-2)}
.cap--sala .cap__pin{display:flex;flex-direction:column}
.sala__intro{order:-1;padding-block:clamp(3.5rem,9svh,6rem) 1.6rem}
.sala__intro h2{margin-top:.6rem}
.sala__lugar{transition:color .35s var(--curva)}
/* v7 · 5 · el JS escribe la opacidad continua, con piso de 50%; la sombra
   sostiene la palabra sobre la foto clara de la barra. */
.sala__intro h2{text-shadow:0 1px 10px rgba(10,20,40,.8)}
.sala__pista{display:grid}
.espacio{position:relative;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden}
.espacio__texto{padding-block:2rem 2.6rem}
/* El texto de cada espacio vive abajo: el velo oscurece solo ahí y deja ver la
   sala. Con el velo de capítulo entero, las tres fotos se leían como penumbra. */
.espacio .velo{background:linear-gradient(0deg,rgba(10,20,40,.92) 0,rgba(10,20,40,.55) 34%,rgba(10,20,40,.08) 72%)}
.espacio__linea{margin-top:.5rem;max-width:22ch;font-size:clamp(1.5rem,min(3.4vw,4.2svh),2.4rem)}
/* v8 · sin .espacio__chiste: Francisco sacó el chiste del pisco de la tarjeta de
   Barra («rompe la armonía de los otros»); las tres tarjetas son un rótulo y una línea. */

/* ---------------- 6 · la carta ---------------- */

.cap--carta{--fondo:var(--navy-4)}
/* v5 · La tira de la carta NO estaba posicionada, y la capa de foto de fondo
   (absoluta, z-index 0) le quedaba encima: en el teléfono, sin JS y con
   reduced-motion la carta no se veía (en escritorio con pin la salvaba el
   transform de la tira). Lo encontró la revisión de diseño (redesign-skill). */
.carta__dentro{position:relative;z-index:2}
.carta__intro{padding-bottom:1.6rem}
.carta__intro h2{margin:.6rem 0 .2rem}
.carta__intro .linea{color:rgba(237,234,227,.8)}
/* La tira. En el teléfono se desliza con el dedo, con imán por ficha: la misma
   gramática de la carta. */
.tira{
  list-style:none;display:flex;gap:1.1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:0 16px .6rem;scroll-padding-inline:16px;
  scrollbar-width:thin;scrollbar-color:rgba(123,196,188,.35) transparent;
}
.ficha{flex:0 0 min(62vw,240px);scroll-snap-align:start;min-width:0}
.ficha img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
/* Nombre y precio juntos, apilados en la misma ficha: lado a lado, el precio
   quedaba pegado al nombre de la ficha vecina y se leía como suyo. */
.ficha__pie{display:grid;gap:.1rem;margin-top:.55rem}
.ficha__nombre{font-family:var(--display);font-size:1.12rem;line-height:1.2;color:var(--crema)}
.ficha .precio{font-size:15px}
.carta__pie{padding-top:1.6rem}
.carta__alergenos{display:flex;align-items:center;color:var(--crema)}

/* ---------------- 7 · la reserva ---------------- */

.cap--reserva{--fondo:var(--navy-5)}
.velo--reserva{
  background:
    linear-gradient(0deg,rgba(23,52,82,.94),rgba(23,52,82,.6) 60%,rgba(23,52,82,.8)),
    linear-gradient(90deg,rgba(23,52,82,.94),rgba(23,52,82,.4) 70%);
}
.reserva__dentro{display:grid;gap:2rem}
.reserva__texto h2{margin:.6rem 0 .2rem}
.reserva__texto .linea{color:rgba(237,234,227,.82)}
.reserva__horario{margin-top:1.2rem;color:rgba(237,234,227,.72)}
/* El aviso de muestra: voz de Operaria, separado del formulario. */
.aviso{
  padding:.9rem 1rem;max-width:44ch;
  /* v7 · 7 · borde completo de 1px: la franja lateral de color leía a alerta. */
  border:1px solid rgba(237,94,34,.34);background:rgba(10,20,40,.5);
  font-size:.95rem;line-height:1.55;color:var(--crema);
}
.aviso .rotulo{display:block;margin-bottom:.25rem;color:var(--brasa)}

.reserva__caja{
  position:relative;
  /* v7 · 9 · sin backdrop-filter: sobre una foto que se reescala se recalculaba
     en cada cuadro. Fondo casi sólido. v7 · 7 · filo interior y sombra navy. */
  background:rgba(10,20,40,.92);border:1px solid rgba(123,196,188,.22);
  box-shadow:inset 0 1px 0 rgba(237,234,227,.08),0 40px 80px -24px rgba(10,20,40,.9);
  padding:clamp(1rem,2.4svh,1.5rem) clamp(1rem,2vw,1.6rem);
}
.reserva{display:grid;gap:clamp(.7rem,1.8svh,1.05rem)}
.campo{border:0;min-width:0}
.campo legend{margin-bottom:.45rem}
.chips{display:grid;gap:.4rem}
.chips--dias{grid-template-columns:repeat(7,minmax(0,1fr))}
.chips--turno{grid-template-columns:repeat(2,minmax(0,1fr))}
.chips--horas{grid-template-columns:repeat(3,minmax(0,1fr))}
.chips--personas{grid-template-columns:repeat(4,minmax(0,1fr))}
.chip{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:44px;min-width:0;padding:.3rem .25rem;
  border:1px solid rgba(237,234,227,.26);color:var(--crema);
  font-family:var(--sans);font-size:.95rem;line-height:1.15;text-align:center;
  /* v7 · 1 · sin transición de fondo: el chip elegido se marca al instante. */
  cursor:pointer;transition:border-color .2s var(--curva),color .2s var(--curva),transform 160ms var(--curva);
}
/* El radio queda dentro y encima del chip, invisible: se toca el chip entero, y
   el teclado y el lector de pantalla siguen hablando con un radio de verdad. */
.chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:inherit}
.chip:has(input:checked){background:var(--teal);border-color:var(--teal);color:var(--tinta)}
.chip:has(input:focus-visible){outline:2px solid var(--teal-cl);outline-offset:2px}
.chip__dia{font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.chip__estado{font-family:var(--mono);font-size:11px;letter-spacing:.02em;margin-top:.12rem}
.chip--hora[data-estado="libre"] .chip__estado{color:var(--teal-cl)}
.chip--hora[data-estado="pocas"] .chip__estado{color:var(--brasa)}
.chip--hora[data-estado="completo"]{cursor:not-allowed;border-style:dashed;color:rgba(237,234,227,.5)}
.chip--hora[data-estado="completo"] .chip__txt{text-decoration:line-through}
.chip--hora[data-estado="completo"] .chip__estado{color:rgba(237,234,227,.5)}
.chip:has(input:checked) .chip__estado{color:var(--tinta)}
/* Las horas del turno que no se eligió no se muestran. Funciona sin JS. */
.reserva:has(#turno-cena:checked) .horas--almuerzo,
.reserva:has(#turno-almuerzo:checked) .horas--cena{display:none}
.leyenda{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-top:.55rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(237,234,227,.72);
}
.punto{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:.3rem}
.punto:first-child{margin-left:0}
.punto--libre{background:var(--teal-cl)}
.punto--pocas{background:var(--brasa)}
.punto--completo{border:1px dashed rgba(237,234,227,.6)}
.reserva__enviar .boton{width:100%}

/* La confirmación. Sin JS se lee como ejemplo bajo el formulario. */
.lista{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(123,196,188,.22);display:grid;gap:.45rem}
.lista__rotulo{display:flex;align-items:center}
.lista__titulo{font-family:var(--display);font-size:clamp(1.6rem,min(3vw,4svh),2.2rem);line-height:1.1}
.lista__resumen{font-size:1.1rem;color:var(--crema)}
.lista__nota{font-size:.92rem;color:rgba(237,234,227,.72)}
.lista .boton{margin-top:.4rem}
/* Con JS la confirmación ocupa el lugar del formulario y solo aparece al
   confirmar: así el recuadro no cambia de alto dentro del pin. */
.js .lista{display:none;margin-top:0;padding-top:0;border-top:0}
/* v7 · 1 · «Listo» entra con opacidad y 8px, 300 ms, sus líneas escalonadas
   cada 50 ms. «Cambiar» vuelve seco. */
@keyframes aparece{from{opacity:0;transform:translateY(8px)}}
.js .confirmada .lista > *{animation:aparece 300ms var(--curva) both}
.js .confirmada .lista > :nth-child(2){animation-delay:50ms}
.js .confirmada .lista > :nth-child(3){animation-delay:100ms}
.js .confirmada .lista > :nth-child(4){animation-delay:150ms}
.js .confirmada .lista > :nth-child(5){animation-delay:200ms}
.js .confirmada .lista{display:grid}
.js .confirmada .reserva{display:none}

/* =========================================================================
   8 · LA DESPEDIDA + EL PIE — el cierre de Restó360
   Estructura, forma y movimiento tomados de resto360-v4.css (.cap--mesa,
   .mesa__*, .cierre__*, .pie). Lo que cambia es la paleta: la de Sumaq.
   ========================================================================= */

:root{
  /* Cuánto se monta el pie dentro del cuadro de la mesa: la suma de sus piezas
     —orbital, hueco, crédito de 44px, relleno— más un dedo de aire. Una sola
     declaración para dos reglas: el relleno del capítulo lo reserva y el pie lo
     sube (misma construcción que Restó360). */
  --pie-monta:calc(108px + .4rem + 44px + clamp(1.6rem,4svh,2.6rem) + 1.2rem);
}
.cap--mesa{
  --fondo:var(--navy-6);
  position:relative;overflow:clip;
  padding:clamp(3.4rem,10svh,6rem) 0 calc(clamp(2rem,5svh,3rem) + var(--pie-monta));
}
/* La foto vive en la SECCIÓN, no en el pin: cuando el marco se clava, la mesa
   sigue subiendo por detrás. Ese es el movimiento del cierre de Restó360. */
.mesa__foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 58%;   /* la vela y el plato, no el techo */
}
.mesa__velo{
  position:absolute;inset:0;
  background:
    /* la disolución de entrada: la reserva se apaga dentro de la foto */
    linear-gradient(180deg,#173452 0,rgba(23,52,82,.72) 34%,rgba(23,52,82,0) 100%)
      top / 100% clamp(88px,14svh,168px) no-repeat,
    linear-gradient(0deg,rgba(10,20,40,.92) 2%,rgba(10,20,40,.5) 48%,rgba(10,20,40,.82) 100%),
    linear-gradient(90deg,rgba(10,20,40,.62),rgba(10,20,40,.12) 50%,rgba(10,20,40,.62));
}
.mesa__marco{position:relative;z-index:2;width:var(--col);margin:0 auto;display:grid;gap:clamp(1.6rem,4svh,2.6rem)}
.mesa__intro{text-align:center;display:grid;justify-items:center}
.mesa__intro h2{max-width:18ch;margin-top:.6rem}
.acciones--centro{justify-content:center}
/* La nota de casa: cuerpo de lectura y crema plena, no letra chica. */
.mesa__bajada{max-width:46ch;margin-top:1.2rem;color:var(--crema);font-size:1rem;line-height:1.55;text-shadow:0 1px 10px rgba(10,20,40,.8)}
.mesa__bajada a{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(123,196,188,.55)}
.mesa__cierre{
  position:relative;text-align:center;display:grid;justify-items:center;gap:.5rem;
  margin-top:clamp(1.4rem,4svh,2.6rem);
  padding-top:clamp(1.6rem,4.5svh,2.8rem);
  border-top:1px solid rgba(237,234,227,.14);
}
/* El destello de brasa al pie del pulso: el único lugar donde la brasa manda.
   Cubre su propio bloque y no se pasa a ningún tamaño (lección de Restó360). */
.mesa__brasa{
  position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(237,94,34,.30),rgba(237,94,34,0) 68%);
}
.cierre__frase{
  position:relative;color:var(--crema);font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,min(4vw,4.4svh),2.7rem);line-height:1.12;
  max-width:22ch;text-shadow:0 1px 10px rgba(10,20,40,.8);
}
/* La cursiva va en el teal de la casa, como la línea en la portada de la carta. */
.cierre__frase em{font-style:italic;color:var(--teal-cl)}
.cierre__marca{
  position:relative;margin-top:clamp(.9rem,2.6svh,1.5rem);
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,min(2.8vw,3.2svh),1.95rem);letter-spacing:.01em;
}
.cierre__linea{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,234,227,.72)}

/* El pie no es franja: se monta dentro del cuadro de la mesa, sin fondo ni
   filo. Sigue siendo <footer> hermano de <main>. */
.pie{
  position:relative;z-index:3;color:var(--crema);
  margin-top:calc(-1 * var(--pie-monta));
  padding:0 0 clamp(1.6rem,4svh,2.6rem);
  display:grid;gap:1rem;justify-items:center;text-align:center;
}
.pie__marca{display:grid;justify-items:center;gap:.4rem}
/* el orbital es un <canvas>: el motor del canon dibuja, no un SVG suelto */
.pie__orbital{display:block;width:108px;height:108px}
.pie__credito{font-family:var(--display);font-style:italic;font-size:1.05rem;line-height:1}
.pie__credito a{display:inline-flex;align-items:center;min-height:44px;color:var(--brasa);text-underline-offset:3px}

/* =========================================================================
   ESCRITORIO — (min-width:1025px). Columnas y la barra en una fila.
   Sin pines: esto también vale sin JS y con reduced-motion.
   ========================================================================= */

@media (min-width:1025px){
  :root{--barra-h:64px;--col:min(92vw,1240px);--acciones-h:0px}

  .barra{
    gap:1.5rem;
    padding:.5rem clamp(1.6rem,3vw,2.6rem);
  }
  .barra__casa{gap:.8rem}
  .barra__acciones{
    position:static;display:flex;gap:.7rem;padding:0;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  }
  .quiero__menu{bottom:auto;top:calc(100% + .5rem);transform-origin:top right}
  .barra__boton{width:auto;padding:0 1.2rem;letter-spacing:.14em}

  .cap--hero .cap__pin{align-items:center}
  /* La puerta queda a la derecha y el texto sobre la pared lisa de la izquierda. */
  .cap--hero .foto-fondo{--enc:60% 35%}
  .cap--hero .velo{background:
    linear-gradient(0deg,rgba(10,20,40,.9),rgba(10,20,40,.3) 58%,rgba(10,20,40,.55)),
    linear-gradient(90deg,rgba(10,20,40,.8),rgba(10,20,40,.06) 62%)}
  .hero__texto{max-width:none}

  /* En escritorio el velo de fondo oscurece el lado del texto, no la foto entera. */
  .fondo .velo{background:
    linear-gradient(0deg,rgba(10,20,40,.82),rgba(10,20,40,.36) 55%,rgba(10,20,40,.6)),
    linear-gradient(90deg,rgba(10,20,40,.9) 22%,rgba(10,20,40,.35) 55%,rgba(10,20,40,.08) 80%)}
  .cap--reserva .fondo .velo{background:
    linear-gradient(0deg,rgba(23,52,82,.78),rgba(23,52,82,.3) 60%,rgba(23,52,82,.55)),
    linear-gradient(90deg,rgba(23,52,82,.95) 30%,rgba(23,52,82,.45) 55%,rgba(23,52,82,.1) 85%)}

  .empezo__dentro{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-areas:"texto puerta" "pasos puerta";
    grid-template-rows:auto auto;align-content:center;
    column-gap:clamp(2rem,5vw,5rem);row-gap:1.4rem;
  }
  .empezo__texto{grid-area:texto;align-self:end}
  .empezo__dentro .pasos{grid-area:pasos;align-self:start}
  .empezo__dentro .puerta{grid-area:puerta;align-self:center;margin-top:0}
  .puerta{justify-self:center;max-width:none}
  .puerta img{width:auto;max-width:100%;height:min(calc(100dvh - var(--barra-h) - 5rem),640px);object-fit:cover}

  .equipo__dentro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(2rem,5vw,4.5rem)}
  /* El mosaico mide por alto de pantalla (ley 1): la grande en 4:5 y las tres
     chicas apiladas a su lado, cuadradas, sumando el mismo alto. */
  .mosaico{
    --mh:min(calc(100dvh - var(--barra-h) - 6rem),620px);
    grid-template-columns:calc(var(--mh) * .8) calc((var(--mh) - 1.2rem) / 3);
    grid-template-rows:repeat(3,minmax(0,1fr));
    height:var(--mh);justify-content:end;
  }
  .mosaico__grande{grid-column:1;grid-row:1 / span 3}
  .mosaico img,.mosaico__grande img{aspect-ratio:auto;height:100%}

  .sala__pista{grid-template-columns:repeat(3,minmax(0,1fr))}
  .espacio{min-height:60svh}
  .espacio__texto{width:auto;margin:0;padding-inline:clamp(1.2rem,2.4vw,2rem)}

  .tira{padding-inline:max(4vw,calc((100vw - 1240px) / 2));scroll-padding-inline:max(4vw,calc((100vw - 1240px) / 2))}
  .ficha{flex-basis:clamp(190px,16vw,250px)}

  .reserva__dentro{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:"texto caja" "aviso caja";
    grid-template-rows:auto 1fr;
    column-gap:clamp(2rem,5vw,5rem);row-gap:1.6rem;align-items:start;
  }
  .reserva__texto{grid-area:texto;align-self:end}
  .reserva__caja{grid-area:caja;align-self:center}
  .aviso{grid-area:aviso}
  .espacio .velo{background:
    linear-gradient(0deg,rgba(10,20,40,.9) 0,rgba(10,20,40,.4) 34%,rgba(10,20,40,.05) 65%,rgba(10,20,40,.5)),
    linear-gradient(90deg,rgba(10,20,40,.55),rgba(10,20,40,0) 55%)}
  .reserva__caja{max-width:560px;justify-self:end;width:100%}
  .chips--personas{grid-template-columns:repeat(8,minmax(0,1fr))}
}

/* =========================================================================
   ESCENA — el mismo 1025px, con alto suficiente, sin reduced-motion y con JS.
   Lo que un capítulo necesita para frenar y contar. Todo es LUJO.
   ========================================================================= */

@media (min-width:1025px) and (min-height:641px) and (prefers-reduced-motion:no-preference){
  #modo{position:sticky}          /* el centinela: el JS lee ESTO, no el media query */

  /* El imán: `proximity`, nunca `mandatory` —con mandatory no se puede recorrer
     un riel por dentro—. Solo acá, donde los capítulos son pantallas. */
  html.js{scroll-snap-type:y proximity}
  .js .cap{scroll-snap-align:start}

  /* Ley 2 y ley 1: riel por fuera, pin por dentro, nunca más alto que la
     pantalla. `clip` y no `hidden` en la sección: hidden crea contenedor de
     scroll y el sticky se clavaría a la sección (lección 10-sep-2026). */
  .js .cap--riel{height:calc(var(--pantallas,2) * 100dvh);overflow:clip}
  .js .cap--riel .cap__pin{
    position:sticky;top:var(--barra-h);
    height:calc(100dvh - var(--barra-h));
    display:flex;align-items:center;overflow:hidden;
  }
  .js .cap--riel .cap__dentro{padding-block:clamp(1.2rem,3svh,2.4rem)}

  /* El fondo llena el pin. Su cuadro deja de ser sticky: el pin ya lo es, y
     como recorta con overflow, un sticky adentro se clavaría contra él. */
  .js .cap--riel .fondo__cuadro{position:absolute;inset:0;height:auto;max-height:none}
  /* En la sala la pista ya cubre el pin con sus tres fotos. */
  .js .fondo--sala{display:none}

  /* --- 8 · la despedida: la firma entra con el dedo ---------------------
     Estado resuelto por defecto (--p ausente = 1): sin JS la firma se ve. */
  .js .cap--mesa .mesa__cierre{
    opacity:clamp(0,calc(var(--p,1) * 2.6 - .5),1);
    transform:translateY(calc((1 - clamp(0,calc(var(--p,1) * 2.6 - .5),1)) * 28px));
  }

  /* --- 2 · la puerta se abre: el JS escribe el clip-path; los pasos suben con
     el dedo (v7 · 5: sin transición, que atrasaba la respuesta al scroll). --- */

  /* El acercamiento de los fondos es del teléfono: en el pin la foto no se mueve. */
  .js .cap--riel .fondo .foto-fondo{animation:none}

  /* --- 3 · los tres platos se turnan (v7 · 2: FLIP) ---------------------
     Dos columnas fijas: la ficha y los platos. Los tres platos viven en la
     misma celda, con el ancho del que manda (--wa, lo mide el JS en resize y lo
     limita por alto: ley 1), y cada cuadro solo escribe su transform. Ya no se
     reescribe la grilla: eso rearmaba la página en cada cuadro de scroll. */
  .js .cap--cocina .entrada{margin-bottom:0}
  .js .cap--cocina .duplas{
    margin-top:clamp(1rem,2.6svh,1.8rem);
    grid-template-columns:minmax(0,1.2fr) minmax(0,3fr);
    align-items:center;gap:clamp(.6rem,1.6vw,1.4rem);
  }
  .js .cap--cocina .dupla{display:contents}
  /* Las tres fichas comparten celda; el JS decide cuál se lee. Antes de su
     primer cuadro se ve la primera. */
  .js .cap--cocina .dupla__texto{grid-column:1;grid-row:1;align-self:center;opacity:0}
  .js .cap--cocina .dupla:first-child .dupla__texto{opacity:1}
  .js .cap--cocina .dupla__nombre,.js .cap--cocina .ficha-plato{max-width:42ch}
  .js .cap--cocina .ficha-plato{gap:clamp(.5rem,1.4svh,.8rem)}
  .js .cap--cocina .dupla__plato{
    grid-column:2;grid-row:1;justify-self:start;margin:0;min-width:0;max-width:none;
    width:var(--wa,min(22vw,calc(100dvh - var(--barra-h) - 16rem)));
    transform-origin:0 50%;will-change:transform;
  }
  /* v7 · 7 · el mismo radio y la misma sombra que el resto de la página; y el
     plato que espera se oscurece en vez de volverse transparente (se veía la
     sala a través del plato). */
  .js .cap--cocina .dupla__plato img{
    width:100%;aspect-ratio:1;height:auto;object-fit:cover;object-position:50% 55%;
    border-radius:2px;box-shadow:0 40px 80px -24px rgba(10,20,40,.9);
    filter:brightness(var(--luz,1));
  }
  .js .cap--cocina .paradas{display:flex;gap:.2rem;margin-top:.6rem}
  .js .cap--cocina .parada{
    width:44px;height:44px;display:grid;place-items:center;padding:0;
  }
  .js .cap--cocina .parada::before{
    content:'';width:8px;height:8px;border-radius:50%;background:rgba(237,234,227,.3);
    transition:background .3s var(--curva),transform .3s var(--curva);
  }
  .js .cap--cocina .parada[aria-current="true"]::before{background:var(--brasa);transform:scale(1.3)}

  /* --- 5 · la sala se recorre: tres espacios lado a lado, el scroll camina ---
     La pista mide tres pantallas de ancho y el JS escribe --paso (0 → 2). */
  .js .cap--sala .cap__pin{display:block}
  .js .sala__pista{
    position:absolute;inset:0;display:flex;width:300%;
    transform:translate3d(calc(var(--paso,0) * -33.3333%),0,0);
    will-change:transform;
  }
  .js .espacio{flex:0 0 33.3333%;height:100%;min-height:0;align-items:flex-end}
  .js .espacio .foto-fondo{height:100%}
  .js .espacio__texto{width:var(--col);margin-inline:auto;padding:0 0 clamp(2rem,7svh,4.5rem)}
  .js .sala__intro{position:absolute;left:0;right:0;top:0;padding-block:clamp(1.4rem,5svh,3rem) 0;pointer-events:none}

  /* --- 6 · la carta se hojea: la tira corre con el scroll --------------- */
  .js .cap--carta .carta__dentro{width:100%}
  .js .cap--carta .carta__intro{padding-block:0 clamp(1rem,2.6svh,1.6rem)}
  .js .cap--carta .carta__pie{padding-block:clamp(1rem,2.6svh,1.6rem) 0}
  .js .tira{
    overflow:visible;scroll-snap-type:none;padding-bottom:0;
    transform:translate3d(var(--corre,0px),0,0);will-change:transform;
  }
  /* La ficha mide por alto también: a 720 de alto la tira no puede comerse el pin. */
  .js .ficha{flex-basis:min(19vw,33svh)}

  /* --- 7 · la mesa se enciende: el JS escribe la opacidad del velo -------- */
}

/* ---------------- degradación que no se negocia ---------------- */

@media (prefers-reduced-motion:reduce){
  /* Quien pide menos movimiento no quiere que la página se mueva sola. */
  .brasa,.brasa::after{animation:none}
  .brasa::after{display:none}
  /* v7 · 8 · menos movimiento no es cero: el color del chip y los fundidos se
     quedan; lo que se desplaza o escala, no. */
  .quiero summary::after{transition:none}
  .boton:active,.chip:active{transform:none}
  @keyframes aparece-quieto{from{opacity:0}}
  .js .confirmada .lista > *{animation-name:aparece-quieto}
  .quiero[open] .quiero__menu{animation-name:aparece-quieto}
}

/* v7 · 9 · El fondo que acompaña en el teléfono (1,08 → 1 mientras se lee el
   capítulo) lo lleva el CSS con una línea de tiempo del scroll: corre fuera del
   hilo principal y no se atrasa respecto del dedo. Sin soporte, lo hace el JS. */
@keyframes acerca{from{transform:scale(1.08)}to{transform:scale(1)}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .cap{view-timeline:--cap block}
    .fondo .foto-fondo{animation:acerca linear both;animation-timeline:--cap;animation-range:contain}
  }
}

/* ═══ v6 · 24-sep-2026 ════════════════════════════════════════════════════
   «El equipo» lleva una sola foto: el equipo completo, entero (contain en su
   4:5, sin recorte). El letrero luminoso pasa al fondo del capítulo. */
.mosaico--solo{display:block}
.mosaico--solo .mosaico__grande{margin:0}
.mosaico--solo .mosaico__equipo{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:var(--navy);border-radius:2px}
@media (min-width:1025px){
  .mosaico--solo{height:auto;display:flex;justify-content:flex-end}
  .mosaico--solo .mosaico__grande{height:min(calc(100dvh - var(--barra-h) - 6rem),620px);aspect-ratio:4/5}
  .mosaico--solo .mosaico__equipo{height:100%;width:100%}
}
/* El letrero de fondo. En el teléfono queda como un brillo detrás del texto, no
   como letras que compiten con él. En escritorio se lee entero arriba y el equipo
   queda delante, abajo: nadie tapa el nombre. */
.cap--equipo .foto-fondo{--enc:50% 20%}
.cap--equipo .fondo .velo{background:linear-gradient(180deg,rgba(19,38,73,.8),rgba(19,38,73,.88) 45%,rgba(19,38,73,.92))}
@media (min-width:1025px){
  .cap--equipo .foto-fondo{--enc:50% 23%}
  .cap--equipo .fondo .velo{background:linear-gradient(180deg,rgba(10,20,40,.18) 0,rgba(10,20,40,.28) 40%,rgba(10,20,40,.82) 58%,rgba(10,20,40,.94) 100%)}
  .js .cap--equipo .cap__pin{align-items:flex-end}
  .mosaico--solo .mosaico__grande{height:min(calc(100dvh - var(--barra-h) - 22rem),470px)}
}

/* ═══ v7 · «El equipo» en escritorio ════════════════════════════════════════
   A 1440×720 la foto del equipo medía 246×307: el letrero de fondo ocupaba
   todo el ancho y la foto tenía que quedarse debajo de él. Ahora el letrero
   vive en los dos tercios de la izquierda —sus letras terminan en el 82% de su
   ancho, o sea en el 52% de la pantalla— y se funde hacia la derecha; el equipo
   toma la columna derecha a casi todo el alto, sin tocar «SUMAQ» ni «COCINA
   PERUANA». El texto queda abajo a la izquierda, bajo el letrero. */
@media (min-width:1025px){
  .cap--equipo .fondo .foto-fondo{
    width:64%;
    -webkit-mask-image:linear-gradient(90deg,#000 74%,transparent);
    mask-image:linear-gradient(90deg,#000 74%,transparent);
  }
  .equipo__dentro{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .mosaico--solo .mosaico__grande{height:min(calc(100dvh - var(--barra-h) - 4rem),640px)}
}

/* =========================================================================
   ESCENA DEL TELÉFONO — v8
   Francisco: «mantener los efectos de la web en la de teléfono, para que se
   aprecie la página de verdad». Cada capítulo trae su efecto, en una versión
   hecha para una pantalla angosta y alta.

   Cuándo: el mismo breakpoint de siempre (bajo 1025px), en vertical, con alto
   de teléfono de verdad (≥700px), sin reduced-motion y con JS. Una ventana
   apaisada o baja se queda con el apilado quieto de la v7 (ley 1: mejor perder
   el freno que cortar el contenido).

   Cómo: el alto de un capítulo clavado es la pantalla CHICA (svh) menos la
   barra de arriba y la franja de abajo: --pin-h. Nunca vh a secas, así el
   cuadro no salta cuando la barra del navegador se esconde.
   Dos maneras de clavar, y el JS le pregunta al CSS cuál rige:
     · el capítulo entero (.cap__pin), cuando su texto cabe;
     · solo su escena (.pin-movil), cuando el titular necesita pasar de largo
       primero: «Cómo empezó» y «La cocina». En «La reserva» se clava la foto
       de la mesa y no el formulario, que es para usarlo, no para mirarlo.
   Si a un capítulo no le cabe su contenido, el JS le pone .cap--suelto y ese
   capítulo vuelve al apilado resuelto de la v7.
   ========================================================================= */

@media (max-width:1024px) and (orientation:portrait) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  #modo{position:sticky}          /* el centinela: el JS lee ESTO */
  :root{--pin-h:calc(100svh - var(--barra-h) - var(--acciones-h))}

  /* El imán vertical, en proximity: acomoda al soltar, nunca retiene. */
  html.js{scroll-snap-type:y proximity}
  .js .cap{scroll-snap-align:start}

  /* En la escena del teléfono ninguna foto de fondo se acerca: el efecto del
     capítulo es otro, y dos efectos en un capítulo se anulan. */
  .js .fondo .foto-fondo{animation:none}

  /* ---- lo común de un capítulo clavado entero ---- */
  .js .cap--hero:not(.cap--suelto),
  .js .cap--equipo:not(.cap--suelto),
  .js .cap--sala:not(.cap--suelto),
  .js .cap--carta:not(.cap--suelto),
  .js .cap--mesa:not(.cap--suelto){height:calc(var(--pantallas-m,2) * 100svh);overflow:clip}
  .js .cap--hero:not(.cap--suelto) .cap__pin,
  .js .cap--equipo:not(.cap--suelto) .cap__pin,
  .js .cap--sala:not(.cap--suelto) .cap__pin,
  .js .cap--carta:not(.cap--suelto) .cap__pin,
  .js .cap--mesa:not(.cap--suelto) .cap__pin{
    position:sticky;top:var(--barra-h);height:var(--pin-h);min-height:0;overflow:hidden;
  }
  /* El fondo de un capítulo clavado llena el pin: su cuadro deja de ser sticky
     (el pin recorta, y un sticky adentro se clavaría contra él). */
  .js .cap--equipo:not(.cap--suelto) .fondo__cuadro,
  .js .cap--carta:not(.cap--suelto) .fondo__cuadro{position:absolute;inset:0;height:auto;max-height:none}

  /* ---- lo común de un capítulo con escena clavada ---- */
  .js .cap--empezo:not(.cap--suelto),
  .js .cap--cocina:not(.cap--suelto){height:calc(var(--pantallas-m,2) * 100svh);overflow:clip}
  .js .cap--empezo:not(.cap--suelto) .cap__pin,
  .js .cap--cocina:not(.cap--suelto) .cap__pin{height:100%}
  .js .cap--empezo:not(.cap--suelto) .cap__dentro,
  .js .cap--cocina:not(.cap--suelto) .cap__dentro{height:100%;display:block;padding-bottom:0}

  /* ── 1 · Sumaq: «hermoso → sabroso», igual que en escritorio ── */
  .js .cap--hero{--pantallas-m:1.6}

  /* ── 2 · Cómo empezó: la puerta se abre y los pasos se turnan ─────────
     El titular pasa de largo; se clava la escena: la puerta arriba, grande, y
     debajo un solo paso a la vez, en la misma celda, que se turnan con el dedo
     mientras la rendija se abre. */
  .js .cap--empezo{--pantallas-m:2.4}
  .js .cap--empezo:not(.cap--suelto) .empezo__texto{padding-bottom:1.2rem}
  .js .cap--empezo:not(.cap--suelto) .empezo__escena{
    position:sticky;top:var(--barra-h);height:var(--pin-h);
    display:flex;flex-direction:column;gap:1rem;padding-block:1rem 1.2rem;margin:0;
  }
  .js .cap--empezo:not(.cap--suelto) .puerta{
    order:-1;flex:1 1 auto;min-height:0;margin:0;max-width:none;
    display:flex;justify-content:center;
  }
  .js .cap--empezo:not(.cap--suelto) .puerta img{height:100%;width:auto;max-width:100%;object-fit:cover}
  .js .cap--empezo:not(.cap--suelto) .pasos{--turnos:1;display:grid;gap:0}
  .js .cap--empezo:not(.cap--suelto) .paso{grid-area:1 / 1;opacity:0}
  .js .cap--empezo:not(.cap--suelto) .paso:first-child{opacity:1}

  /* ── 3 · La cocina: los platos se turnan, en carrusel ──────────────────
     El titular pasa de largo; se clava la escena. Arriba, el plato que manda
     al centro y los otros dos asomando a los lados, más chicos y más oscuros;
     abajo, su ficha. El JS mide el cuadro (--wa) y mueve con transform. */
  .js .cap--cocina{--pantallas-m:2.8}
  .js .cap--cocina:not(.cap--suelto) .entrada{padding-bottom:1rem}
  .js .cap--cocina:not(.cap--suelto) .cocina__escena{
    position:sticky;top:var(--barra-h);height:var(--pin-h);
    display:flex;flex-direction:column;gap:.5rem;padding-block:.9rem .4rem;margin:0;
  }
  .js .cap--cocina:not(.cap--suelto) .duplas{
    --carrusel:1;flex:1 1 auto;min-height:0;margin:0;
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:.9rem;
  }
  .js .cap--cocina:not(.cap--suelto) .dupla{display:contents}
  .js .cap--cocina:not(.cap--suelto) .dupla__plato{
    grid-area:1 / 1;align-self:center;justify-self:start;margin:0;max-width:none;min-width:0;
    width:var(--wa,50vw);transform-origin:50% 50%;will-change:transform;
  }
  .js .cap--cocina:not(.cap--suelto) .dupla__plato img{
    width:100%;aspect-ratio:1;height:auto;object-fit:cover;object-position:50% 55%;
    border-radius:2px;box-shadow:0 30px 60px -20px rgba(10,20,40,.9);filter:brightness(var(--luz,1));
  }
  .js .cap--cocina:not(.cap--suelto) .dupla__texto{grid-area:2 / 1;opacity:0;gap:.45rem}
  .js .cap--cocina:not(.cap--suelto) .dupla:first-child .dupla__texto{opacity:1}
  .js .cap--cocina:not(.cap--suelto) .ficha-plato{gap:.45rem}
  .js .cap--cocina:not(.cap--suelto) .ficha-plato dd{font-size:.95rem;line-height:1.45}
  .js .cap--cocina:not(.cap--suelto) .dupla__nombre{padding-bottom:.35rem}
  .js .cap--cocina:not(.cap--suelto) .paradas{display:flex;justify-content:center;gap:.2rem;flex:none}
  .js .cap--cocina .parada{width:44px;height:44px;display:grid;place-items:center;padding:0}
  .js .cap--cocina .parada::before{
    content:'';width:8px;height:8px;border-radius:50%;background:rgba(237,234,227,.3);
    transition:background .3s var(--curva),transform .3s var(--curva);
  }
  .js .cap--cocina .parada[aria-current="true"]::before{background:var(--brasa);transform:scale(1.3)}

  /* ── 4 · El equipo: se pasa lista ───────────────────────────────────────
     Todo el capítulo clavado: la foto del equipo arriba, tan grande como deje
     el texto, y los nombres encendiéndose abajo. */
  .js .cap--equipo{--pantallas-m:2}
  .js .cap--equipo:not(.cap--suelto) .equipo__dentro{
    display:flex;flex-direction:column;height:100%;gap:1rem;padding-block:1rem 1.2rem;
  }
  .js .cap--equipo:not(.cap--suelto) .mosaico--solo{order:-1;flex:1 1 auto;min-height:0;display:flex;justify-content:center}
  .js .cap--equipo:not(.cap--suelto) .mosaico--solo .mosaico__grande{height:100%;max-width:100%;aspect-ratio:4/5;margin:0}
  .js .cap--equipo:not(.cap--suelto) .mosaico--solo .mosaico__equipo{height:100%;width:100%}
  .js .cap--equipo:not(.cap--suelto) .equipo__texto h2{margin:.4rem 0 .7rem}

  /* ── 5 · La sala: se recorre, de lado ──────────────────────────────────
     Los tres espacios lado a lado, cada uno a pantalla completa; el dedo
     camina de uno al siguiente y el titular marca dónde estás. */
  .js .cap--sala{--pantallas-m:2.6}
  .js .cap--sala:not(.cap--suelto) .cap__pin{display:block}
  .js .cap--sala:not(.cap--suelto) .fondo--sala{display:none}
  .js .cap--sala:not(.cap--suelto) .sala__pista{
    position:absolute;inset:0;display:flex;width:300%;will-change:transform;
  }
  .js .cap--sala:not(.cap--suelto) .espacio{flex:0 0 33.3333%;height:100%;min-height:0;align-items:flex-end}
  .js .cap--sala:not(.cap--suelto) .espacio .foto-fondo{height:100%}
  /* arriba vive el titular: el velo oscurece también ahí */
  .js .cap--sala:not(.cap--suelto) .espacio .velo{background:
    linear-gradient(0deg,rgba(10,20,40,.94) 0,rgba(10,20,40,.55) 30%,rgba(10,20,40,.08) 58%,rgba(10,20,40,.2) 76%,rgba(10,20,40,.7) 100%)}
  .js .cap--sala:not(.cap--suelto) .espacio__texto{padding-block:0 1.4rem}
  .js .cap--sala:not(.cap--suelto) .sala__intro{position:absolute;left:0;right:0;top:0;padding-block:1.1rem 0;pointer-events:none}

  /* ── 6 · La carta: se hojea ────────────────────────────────────────────
     La tira deja de deslizarse con el dedo de lado (un carril horizontal
     dentro de un capítulo clavado atrapa el dedo) y corre con el scroll. */
  /* 3 pantallas y no 2,2: con menos pista la tira corría 3px por cada px de
     dedo y una ficha pasaba entera en 70px de scroll, sin alcanzar a leerse. */
  .js .cap--carta{--pantallas-m:3}
  .js .cap--carta:not(.cap--suelto) .cap__pin{display:flex;align-items:center}
  .js .cap--carta:not(.cap--suelto) .carta__dentro{width:100%}
  .js .cap--carta:not(.cap--suelto) .carta__intro{padding-block:0 1rem}
  .js .cap--carta:not(.cap--suelto) .carta__pie{padding-block:1rem 0}
  .js .cap--carta:not(.cap--suelto) .tira{overflow:visible;scroll-snap-type:none;padding-bottom:0;will-change:transform}
  .js .cap--carta:not(.cap--suelto) .ficha{flex-basis:min(56vw,28svh)}

  /* ── 7 · La reserva: la mesa se enciende ──────────────────────────────
     El formulario no se clava: se usa. Lo clavado es la foto de la mesa (ya
     acompaña pegada a la pantalla), que se aclara mientras llegas. */

  /* ── 8 · La despedida: la mesa sube y la firma entra ─────────────────── */
  .js .cap--mesa{--pantallas-m:1.8}
  .js .cap--mesa:not(.cap--suelto) .cap__pin{display:flex;align-items:center}
  .js .cap--mesa:not(.cap--suelto) .mesa__marco{gap:1.2rem}
  .js .cap--mesa:not(.cap--suelto) .mesa__cierre{margin-top:.6rem;padding-top:1.2rem}
}


/* =========================================================================
   v9 · 24-sep-2026 · LAS ACCIONES SUBEN (Francisco: «los botones que quedan
   abajo fijos, los dejaría pequeños arriba o los sacaría»)
   En el teléfono no hay franja fija abajo. La barra de arriba lleva:
   - Sumaq;
   - una sola píldora de Operaria, «Demo Restó360 ▾», que abre Restó360, el
     correo y el WhatsApp (junta la etiqueta y «Quiero una web así»);
   - a la derecha, «Reservar», chico, en teal.
   Los blancos de dedo siguen midiendo 44 px: lo chico es el dibujo, que va en
   un ::before o en un <span> de adentro. En escritorio queda como la v8.
   ========================================================================= */
.solo-ancho{display:none}
@media (max-width:1024.98px){
  .barra__demo{display:none}
  .barra__acciones{
    position:static;flex:1;display:flex;align-items:center;justify-content:space-between;gap:.25rem;
    padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  }
  .quiero{order:-1}
  .barra__boton{width:auto}
  /* la píldora: el mismo dibujo de la etiqueta de la v8 */
  .quiero summary.barra__boton{padding:0 .2rem;border-color:transparent;background:none;letter-spacing:.14em}
  .quiero summary::after{display:none}
  .quiero__pildora{
    display:inline-flex;align-items:center;gap:.5em;
    padding:.28rem .6rem;border:1px solid rgba(123,196,188,.4);border-radius:99px;
    color:rgba(237,234,227,.78);transition:border-color .2s,color .2s;
  }
  .quiero__pildora::after{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--curva)}
  .quiero[open] summary.barra__boton{border-color:transparent;color:inherit}
  .quiero[open] .quiero__pildora{border-color:var(--teal-cl);color:var(--teal-cl)}
  .quiero[open] .quiero__pildora::after{transform:translateY(2px) rotate(-135deg)}
  /* el menú abre hacia abajo, desde la píldora */
  .quiero__menu{bottom:auto;top:calc(100% + .35rem);left:0;right:auto;transform-origin:top left}
  /* «Reservar», chico: el teal se dibuja en un ::before de 30 px; el dedo tiene 44 */
  .barra__acciones .boton--lleno.barra__boton{position:relative;z-index:0;background:none;padding:0 .85rem;letter-spacing:.12em}
  .barra__acciones .boton--lleno.barra__boton::before{content:'';position:absolute;inset:7px 0;z-index:-1;background:var(--teal)}
}
@media (min-width:1025px){
  .solo-fono{display:none!important}
  .solo-ancho{display:inline}
}

/* =========================================================================
   v10 · 25-sep-2026 · LA BARRA DE LOS NIVELES Y EL DISTINTIVO
   La barra lleva, a la izquierda, Sumaq y la píldora «Restó360» (vuelve a
   Restó360, en el teléfono también); a la derecha, «Nivel 1» y «Nivel 3».
   El distintivo del hero dice «Nivel 2 · Carta + web» con el dibujo del
   «Cocina hasta 23:30» de la carta: borde cian y la brasa que late.
   ========================================================================= */
.nivel{
  display:inline-flex;align-items:center;margin-top:1.4rem;
  padding:8px 15px;border-radius:999px;
  border:1px solid rgba(52,152,145,.45);background:rgba(31,91,87,.26);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-cl);
}
@media (max-width:1024.98px){
  .barra__demo{display:inline-flex}
  .barra__acciones{flex:none;justify-content:flex-end}
  /* «Nivel 3», chico: el borde se dibuja en un ::before de 30 px; el dedo tiene 44 */
  .barra__acciones .boton--linea.barra__boton{position:relative;z-index:0;border-color:transparent;padding:0 .85rem;letter-spacing:.12em}
  .barra__acciones .boton--linea.barra__boton::before{content:'';position:absolute;inset:7px 0;z-index:-1;border:1px solid rgba(237,234,227,.42)}
}
/* teléfonos angostos (≤ 374 px): la marca, la píldora y los dos niveles caben en
   una fila si todo se aprieta un poco; los blancos de dedo siguen en 44 px */
@media (max-width:374.98px){
  .barra{padding-inline:10px;gap:.25rem}
  .barra__marca{font-size:1.32rem;padding-right:.1rem}
  .barra__demo{padding:0 .1rem}
  .barra__demo span{padding:.26rem .45rem;letter-spacing:.1em;font-size:10px}
  .barra__acciones{gap:.15rem}
  .barra__acciones .barra__boton{padding:0 .5rem !important;letter-spacing:.06em}
}