/* ==========================================================================
   SPABAR — La carta como aplicación
   --------------------------------------------------------------------------
   Dos pantallas y un solo gesto entre ellas.

   · Índice (.svx): una retícula que ocupa exactamente un viewport. Diez
     categorías, diez celdas, sin scroll y sin huecos: 5x2 en escritorio,
     2x5 en móvil. Nada de tarjetas — el papel es blanco de punta a punta y
     lo único que separa una categoría de otra es un filete de 1 px.

   · Ficha (.svp): una capa fija a pantalla completa con su propia barra,
     su propio scroll y su propio "volver". En móvil se comporta como una
     vista empujada de app nativa; en escritorio, como un panel a dos
     columnas con la foto fija y la lista corriendo al lado.

   El paso de una a otra NO es un fundido. La ficha se abre recortada a la
   caja EXACTA de la celda que tocaste y crece hasta llenar la pantalla
   (clip-path:inset). Por eso el ojo no pierde el hilo: la cosa que abriste
   es literalmente la que se despliega. Al cerrar, vuelve a su celda.
   ========================================================================== */

/* ================================================================= ÍNDICE */

.svx{
  position:relative;
  height:100vh; height:100dvh;
  min-height:600px;
  padding-top:var(--nav-h);
  display:flex; flex-direction:column;
  background:var(--white);
}

.svx__stage{
  flex:1; min-height:0;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(.8rem,2.2vh,1.6rem);
  padding-block:clamp(.9rem,2.6vh,2rem) clamp(.8rem,2.2vh,1.5rem);
}

/* ---- cabecera del índice ----
   El margen lateral lo ponen la cabecera y el pie, no un `wrap` en el
   contenedor: la retícula tiene que llegar a los dos bordes de la pantalla
   y con un padding en el padre eso sería imposible. */
.svx__top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-inline:var(--gut);
}
.svx__h{
  font-family:var(--serif); font-size:clamp(1.9rem,3.4vw,3.1rem);
  line-height:1; letter-spacing:-.02em;
}
.svx__h em{font-style:italic; color:var(--rose)}
.svx__meta{
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding-bottom:.35rem;
}
.svx__meta i{display:block; width:26px; height:1px; background:var(--line)}

/* ---- retícula ----
   El filete de separación es el `gap` sobre un fondo de línea: así no hay
   bordes dobles ni medio píxel de más entre celda y celda, y las esquinas
   del bloque salen limpias con un solo overflow:hidden. */
.svx__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows:minmax(0,1fr);
  gap:var(--hair);
  background:var(--line-soft);
  /* A sangre: sin radio y sin filetes laterales. Los únicos filetes de fuera
     son el de arriba y el de abajo, que son los que separan la retícula del
     resto de la página. */
  border-block:var(--hair) solid var(--line-soft);
  overflow:hidden;
  min-height:0;
}

/* ---- celda ---- */
.svx__t{
  position:relative; z-index:0;
  appearance:none; border:0; margin:0; cursor:pointer;
  font:inherit; color:var(--fg); text-align:left;
  background:var(--white);
  display:grid; place-items:center;
  padding:clamp(.85rem,1.5vw,1.35rem);
  min-height:0; overflow:hidden;
  transition:background-color .55s var(--e-silk);
}
.svx__t::after{                    /* filete que se pinta al pasar por encima */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rose); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-silk);
}
.svx__t:hover, .svx__t:focus-visible{
  background:color-mix(in oklab, var(--sand) 13%, var(--white));
  outline:none;
}
.svx__t:hover::after, .svx__t:focus-visible::after{transform:scaleX(1)}
.svx__t:focus-visible{box-shadow:inset 0 0 0 2px var(--navy)}
.svx__t:active{background:color-mix(in oklab, var(--sand) 22%, var(--white))}

/* Ordinal y flecha: fuera del flujo, pegados a las esquinas. Así el grupo
   central queda centrado de verdad y no desplazado por el peso del ordinal. */
.svx__t-n{
  position:absolute; left:clamp(.85rem,1.5vw,1.35rem); top:clamp(.85rem,1.5vw,1.35rem);
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.14em;
  color:var(--sand-deep); font-variant-numeric:tabular-nums;
  transition:color .45s var(--e-out);
}
.svx__t:hover .svx__t-n{color:var(--rose)}

.svx__t-go{
  position:absolute; right:clamp(.85rem,1.5vw,1.35rem); bottom:clamp(.85rem,1.5vw,1.35rem);
  width:18px; height:18px; color:var(--rose);
  opacity:0; transform:translate(-6px,6px);
  transition:opacity .45s var(--e-out), transform .55s var(--e-silk);
}
.svx__t:hover .svx__t-go{opacity:1; transform:none}
.svx__t-go svg{width:100%; height:100%; display:block}

/* ---- el grupo: ilustración, nombre, recuento ---- */
.svx__t-g{
  display:grid; justify-items:center; text-align:center;
  gap:clamp(.5rem,1.4vh,1rem);
  max-width:100%; min-height:0;
  transition:transform .7s var(--e-silk);
}
.svx__t:hover .svx__t-g{transform:translateY(-4px)}

.svx__t-ico{display:block; color:var(--navy); line-height:0}
.svx__t-ico .svxi{
  width:clamp(72px,7.4vw,116px); height:auto; display:block;
  transition:color .45s var(--e-out);
}

.svx__t-name{
  font-family:var(--serif); font-size:clamp(1.05rem,1.35vw,1.5rem);
  line-height:1.1; letter-spacing:-.01em;
}
.svx__t-c{
  font-size:var(--fs-micro); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sand-deep);
  transition:color .45s var(--e-out);
}
.svx__t:hover .svx__t-c{color:var(--rose)}

/* ---- pie del índice ----
   Va pegado al borde inferior del viewport, que es justo donde flotan el
   selector de idioma (izquierda) y el botón de WhatsApp (derecha). Sin este
   margen la frase se leería por debajo de las dos burbujas. */
.svx__foot{
  display:flex; align-items:center; justify-content:flex-end;
  gap:1rem; flex-wrap:wrap;
  padding-inline:var(--gut);
  padding-right:max(var(--gut), 88px);      /* deja pasar el botón flotante */
  font-size:var(--fs-small); color:var(--muted);
}
.svx__foot b{font-weight:600; color:var(--fg)}
.svx__foot kbd{
  font:inherit; font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em;
  border:var(--hair) solid var(--line); border-radius:4px;
  padding:.15rem .4rem; color:var(--muted);
}

/* ================================================== dibujo del trazo ==== */
/* pathLength="1" en cada trazo ⇒ un mismo dasharray vale para todos. */
.svxi > *{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .95s var(--e-out);
  transition-delay:calc(var(--n,0) * .05s);
}
.svx__grid.is-in .svxi > *,
.svp .svxi > *{stroke-dashoffset:0}

.svxi > :nth-child(1){--n:0}
.svxi > :nth-child(2){--n:1}
.svxi > :nth-child(3){--n:2}
.svxi > :nth-child(4){--n:3}
.svxi > :nth-child(5){--n:4}
.svxi > :nth-child(6){--n:5}
.svxi > :nth-child(7){--n:6}

/* Al pasar el cursor el icono se vuelve a dibujar. Va por animación y no por
   transición porque hay que RE-disparar el mismo valor final (0 → 0): una
   transición no se entera de eso y no haría nada. */
@keyframes svx-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@media (hover:hover) and (pointer:fine){
  .svx__grid.is-in .svx__t:hover .svxi > *{
    animation:svx-draw .8s var(--e-out) both;
    animation-delay:calc(var(--n,0) * .05s);
  }
}

/* ==================================================== entrada del índice */
.svx__grid .svx__t{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--e-out) var(--d,0s),
             transform .9s var(--e-hero) var(--d,0s),
             background-color .55s var(--e-silk);
}
.svx__grid.is-in .svx__t{opacity:1; transform:none}

/* Mientras la ficha está abierta, la retícula se retira: la celda de origen
   se queda quieta (es la que "se convirtió" en la ficha) y el resto cae un
   punto de opacidad. No se oculta del todo porque asoma por los bordes del
   recorte durante el primer tercio del gesto. */
.svx__grid.is-away .svx__t{opacity:.28; transition-duration:.5s; transition-delay:0s}
.svx__grid.is-away .svx__t.is-source{opacity:1}

/* ================================================================== FICHA */

.svp{
  position:fixed; inset:0; z-index:900;
  display:block;
}
.svp[hidden]{display:none}
.svp::before{                                   /* velo sobre la página */
  content:""; position:absolute; inset:0;
  background:rgba(11,15,36,.22);
  opacity:0; transition:opacity .5s var(--e-out);
}
.svp.is-open::before{opacity:1}

.svp__sheet{
  position:absolute; inset:0; height:100%;
  background:var(--white); color:var(--fg);
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(11,15,36,.45);
  clip-path:inset(0 round 0px);
  will-change:clip-path;
  transition:clip-path .68s var(--e-exit);
}

/* ---- barra superior ---- */
.svp__bar{
  flex:none;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(.75rem,2vw,1.5rem);
  padding:clamp(.7rem,1.6vh,1.05rem) var(--gut);
  padding-top:max(clamp(.7rem,1.6vh,1.05rem), env(safe-area-inset-top));
  border-bottom:var(--hair) solid var(--line-soft);
  background:var(--white);
}
/* Volver: UNA cápsula que encierra flecha y palabra, no un círculo con texto
   al lado. Al pasar por encima se invierte entera —fondo navy, texto crema—,
   que era lo que antes hacía sólo el círculo. */
.svp__back{
  appearance:none; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.6rem; flex:none;
  padding:.72rem 1.2rem .72rem 1rem;
  border-radius:999px;
  border:var(--hair) solid var(--line);
  background:transparent; color:var(--fg);
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  transition:background-color .45s var(--e-silk), border-color .45s var(--e-silk),
             color .45s var(--e-silk);
}
.svp__back svg{width:16px; height:16px; flex:none; transition:transform .5s var(--e-silk)}
.svp__back:hover{background:var(--navy); border-color:var(--navy); color:var(--cream)}
.svp__back:hover svg{transform:translateX(-4px)}
.svp__back:focus-visible{outline:2px solid var(--navy); outline-offset:3px}

.svp__id{display:flex; align-items:center; min-width:0}
.svp__t{
  font-family:var(--serif); font-size:clamp(1.25rem,2.5vw,2.15rem);
  line-height:1.05; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.svp__n{
  flex:none; font-size:var(--fs-micro); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

/* ---- cuerpo ----
   Cada categoría es su propia capa con su propio scroll: cambiar de una a
   otra es un cruce de opacidad y no obliga a re-pintar la lista ni pierde
   la posición de lectura de la anterior. */
.svp__body{position:relative; flex:1; min-height:0}
/* En escritorio la ficha es un partido fijo: a la izquierda la lista, que es
   lo único que se mueve, y a la derecha la foto ocupando TODO el alto del
   cuerpo, ajena al scroll. Recorrer los tratamientos deja de ser una página
   que se va: la categoría sigue delante mientras lees. */
.svp__cat{
  --mw:clamp(340px,37vw,680px);
  position:absolute; inset:0;
  display:grid; grid-template-columns:minmax(0,1fr) var(--mw);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--e-out), visibility .4s;
}
.svp__cat.is-on{opacity:1; visibility:visible; pointer-events:auto}

.svp__scroll{
  position:relative; min-width:0; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  /* Las filas se desvanecen al cruzar los bordes en vez de cortarse a hueso
     contra la barra de arriba y la de abajo. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%);
}
.svp__in{
  padding:clamp(1.4rem,3.4vh,2.8rem) clamp(1.6rem,3.2vw,3.4rem)
          clamp(2.5rem,7vh,5rem) var(--gut);
}

/* Barra de avance de la lista. Va sobre la columna izquierda y sólo hasta
   donde empieza la foto, por eso el `right` reutiliza el ancho del medio. */
.svp__prog{
  position:absolute; top:0; left:0; right:var(--mw); height:2px; z-index:4;
  background:var(--rose); transform:scaleX(var(--sp,0)); transform-origin:left;
  pointer-events:none;
}

.svp__tag{
  color:var(--muted); font-size:clamp(1rem,1.1vw,1.2rem); line-height:1.55;
  max-width:56ch;
  padding-bottom:clamp(1.1rem,2.6vh,1.8rem);
  border-bottom:var(--hair) solid var(--line-soft);
  margin-bottom:clamp(.4rem,1.2vh,.9rem);
}

/* ---- lista de precios ---- */
.svp__list{columns:2; column-gap:clamp(1.6rem,3.4vw,3rem)}
/* Una sola columna en un contenedor de 1000 px deja el precio a un palmo del
   nombre y la fila deja de leerse como una fila. */
.svp__list--one{columns:1; max-width:46rem}
.svp__row{
  break-inside:avoid;
  position:relative;
  display:flex; align-items:baseline; gap:.75rem;
  padding:.78rem 0;
  border-bottom:var(--hair) solid var(--line-soft);
  transition:padding-left .5s var(--e-silk);
}
.svp__row::before{
  content:""; position:absolute; left:0; top:.85rem; bottom:.85rem; width:1px;
  background:var(--rose); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--e-silk);
}
.svp__row b{font-weight:500; font-size:.9375rem; line-height:1.35}
/* Con la columna izquierda a media pantalla hay sitio de sobra: la fila
   respira y el nombre sube un punto. La lista se alarga y hay que rodar más,
   que es exactamente lo que se pedía poder hacer. */
@media (min-width:1001px){
  .svp__row{padding:.95rem 0}
  .svp__row b{font-size:1rem}
}
.svp__row i{flex:1; min-width:1.5rem; height:1px; background:transparent}
.svp__row em{
  font-style:normal; font-weight:700; color:var(--navy); white-space:nowrap;
  font-variant-numeric:tabular-nums; transition:color .4s var(--e-out);
}
.svp__row em small{
  font-weight:600; color:var(--muted); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; margin-right:.4rem;
}
@media (hover:hover) and (pointer:fine){
  .svp__row:hover{padding-left:.7rem}
  .svp__row:hover::before{transform:scaleY(1); transform-origin:top}
  .svp__row:hover em{color:var(--rose)}
}

/* ---- columna de la foto ----
   A sangre por arriba, abajo y por la derecha: sin margen ni radio. Es la
   pieza que sostiene la pantalla, y en cuanto se le pone un marco vuelve a
   parecer una miniatura al lado de una tabla. */
.svp__media{
  position:relative; margin:0; overflow:hidden; min-height:0;
  background:color-mix(in oklab, var(--sand) 40%, var(--white));
}
.svp__media img{
  position:absolute; left:0; top:0; width:100%; height:112%;
  object-fit:cover; display:block;
  /* Paralaje: la foto se desplaza un sexto de lo que corre la lista. Es un
     acompañamiento, no un segundo scroll — de ahí los 52 px de recorrido
     total y el 112 % de alto, que es lo que evita que asome el fondo. */
  transform:translateY(calc(var(--sp,0) * -52px));
  will-change:transform;
}
.svp__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(11,15,36,.74), rgba(11,15,36,.2) 42%, transparent 70%);
}
.svp__media-in{
  position:absolute; z-index:2;
  left:clamp(1.3rem,2.4vw,2.6rem); right:clamp(1.3rem,2.4vw,2.6rem);
  bottom:clamp(1.3rem,3.2vh,2.6rem);
  display:grid; gap:clamp(.55rem,1.5vh,1.1rem); justify-items:start;
  color:var(--white);
}
/* La misma ilustración de la celda, en blanco y a trazo fino, encabezando el
   bloque. Es lo que hace que la categoría que abriste te siga: la reconoces
   sin volver a leer el título. */
.svp__media-ico{display:block; line-height:0; margin-bottom:clamp(.2rem,1vh,.6rem)}
.svp__media-ico .svxi{
  width:clamp(58px,5.4vw,88px); height:auto; display:block;
  stroke-width:.85;                       /* el CSS gana al atributo del SVG */
}
.svp__media-k{
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; opacity:.74;
}
.svp__media-p{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:var(--serif); font-size:clamp(2rem,3.2vw,3.4rem); line-height:1;
}
.svp__media-p small{
  font-family:var(--sans); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; opacity:.74;
}
/* Sin botón sobre la foto: el de reservar vive en la barra de abajo y está
   siempre a la vista. Dos cápsulas idénticas a un palmo una de otra no son
   dos oportunidades de reservar, son ruido. */

/* La foto se descubre de abajo arriba en cuanto la ficha termina de crecer.
   El recorte va en el contenedor y no en la imagen porque la imagen ya lleva
   el transform del paralaje y los dos se pisarían. */
@keyframes svx-wipe{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}}
.svp.is-ready .svp__cat.is-on .svp__media{
  animation:svx-wipe .9s var(--e-exit) both; animation-delay:.14s;
}

/* ---- barra inferior ---- */
.svp__nav{
  flex:none;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(.75rem,2vw,1.5rem);
  padding:clamp(.7rem,1.7vh,1.1rem) var(--gut);
  padding-bottom:max(clamp(.7rem,1.7vh,1.1rem), env(safe-area-inset-bottom));
  border-top:var(--hair) solid var(--line-soft);
  background:var(--white);
}
/* Anterior / siguiente: cápsulas, no texto suelto.
   Como texto plano no se leían como botón —había que adivinar dónde empieza
   la zona pinchable— y el objetivo aquí es saltar de categoría sin pensar.
   Mismo idioma que el chip de "Volver": borde fino, y al pasar por encima
   se invierte entera. */
.svp__step{
  appearance:none; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.62rem 1.25rem; border-radius:999px;
  border:var(--hair) solid var(--line);
  background:transparent; color:var(--fg);
  min-width:0; max-width:100%;
  transition:background-color .45s var(--e-silk), border-color .45s var(--e-silk),
             color .45s var(--e-silk);
}
/* En la primera y la última categoría el paso correspondiente no existe. Se
   oculta con visibility y no con display para que la barra no se recomponga
   —el botón de reservar tiene que quedarse centrado en las diez fichas. */
.svp__step:disabled{visibility:hidden}
.svp__step--prev{justify-self:start}
.svp__step--next{justify-self:end; flex-direction:row-reverse; text-align:right}
.svp__step svg{width:17px; height:17px; flex:none; transition:transform .5s var(--e-silk)}
.svp__step:hover:not(:disabled){background:var(--navy); border-color:var(--navy); color:var(--cream)}
.svp__step:hover:not(:disabled) b{color:currentColor; opacity:.66}
.svp__step--prev:hover:not(:disabled) svg{transform:translateX(-4px)}
.svp__step--next:hover:not(:disabled) svg{transform:translateX(4px)}
.svp__step > span{min-width:0}
.svp__step b{
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  display:block; line-height:1.25;
  transition:color .45s var(--e-silk), opacity .45s var(--e-silk);
}
.svp__step u{
  text-decoration:none; font-size:.9375rem; font-weight:600;
  display:block; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22ch;
}
.svp__step:focus-visible{outline:2px solid var(--navy); outline-offset:3px}

/* Reservar: es la acción de la página, y con el tamaño `--sm` competía de tú
   a tú con dos botones de navegación. Pesa por tamaño —ancho mínimo y
   tipografía mayor—, no por sombra: sobre papel blanco y filetes de 1 px una
   sombra proyectada era lo único borroso de la pantalla. */
.svp__book{
  padding:1.15rem 2.5rem;
  font-size:.875rem; letter-spacing:.1em;
  min-width:clamp(210px,20vw,290px);
}
.svp__book svg{width:18px; height:18px}

/* ================================================ coreografía de apertura */
/* El contenido no aparece hasta que el recorte lleva recorrido un tercio:
   antes de eso lo que se ve es un trozo de papel creciendo, y eso es
   justamente lo que hace que el gesto lea como "la celda se abre". */
.svp__bar, .svp__nav, .svp__in{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e-out), transform .7s var(--e-hero);
}
.svp.is-ready .svp__bar{opacity:1; transform:none; transition-delay:.20s}
.svp.is-ready .svp__in  {opacity:1; transform:none; transition-delay:.28s}
.svp.is-ready .svp__nav {opacity:1; transform:none; transition-delay:.34s}

.svp.is-ready .svp__cat.is-on .svp__row{
  animation:svx-row .6s var(--e-out) both;
  animation-delay:calc(.30s + var(--r,0) * .028s);
}
/* La ilustración de la foto se dibuja cuando la ficha ya está en firme, algo
   después de que la imagen termine de descubrirse. Como la regla depende de
   `.is-on`, al cambiar de categoría la nueva empieza a emparejar y se vuelve
   a dibujar sola: no hace falta tocarla desde JS. */
.svp.is-ready .svp__cat.is-on .svp__media-ico .svxi > *{
  animation:svx-draw .95s var(--e-out) both;
  animation-delay:calc(.52s + var(--n,0) * .06s);
}
@keyframes svx-row{
  from{opacity:0; transform:translateX(-14px)}
  to  {opacity:1; transform:none}
}

/* ====================================================== móvil / tableta */
@media (max-width:1000px){
  .svx__grid{grid-template-columns:repeat(2,1fr)}
  .svx__t{padding:clamp(.7rem,2.6vw,1rem)}
  .svx__t-g{gap:clamp(.35rem,1vh,.7rem)}
  .svx__t-name{font-size:clamp(.95rem,3.6vw,1.2rem)}
  .svx__t-go{display:none}
  .svx__h{font-size:clamp(1.65rem,6.4vw,2.4rem)}
  .svx__meta{padding-bottom:0}

  /* El partido fijo necesita dos columnas anchas. Por debajo de 1000 px no
     las hay, así que la ficha vuelve a ser una sola cosa que se desplaza:
     foto arriba, lista debajo, y el scroll otra vez en la propia ficha. */
  .svp__cat{display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain}
  .svp__media{order:-1; flex:none; aspect-ratio:16/10}
  .svp__media img{height:100%; transform:none}
  .svp__scroll{
    overflow:visible; flex:1;
    -webkit-mask-image:none; mask-image:none;
  }
  .svp__prog{display:none}
  .svp__in{padding:clamp(1.2rem,4vw,2rem) var(--gut) clamp(2rem,6vw,3rem)}
  .svp__list{columns:1}
  .svp__t{font-size:clamp(1.15rem,5vw,1.6rem)}

  /* Sin sitio para el rótulo "anterior/siguiente": manda el nombre de la
     categoría, que es el dato que decide si pulsas o no. */
  .svp__step{padding:.55rem 1rem; gap:.55rem}
  .svp__step b{display:none}
  .svp__step u{font-size:.875rem; max-width:16ch}
  .svp__book{padding:1rem 1.9rem; min-width:0}

  /* En táctil no hay teclas que anunciar. Con el pie vacío, fuera. Pero el
     hueco no se lo queda entero la retícula: el selector de idioma y el
     botón de WhatsApp flotan justo ahí abajo, y sin este margen se comían
     el recuento de la última fila. */
  .svx__foot{display:none}
  .svx__stage{padding-bottom:max(3.75rem, calc(env(safe-area-inset-bottom) + 3.25rem))}
  .svx__t-ico .svxi{width:clamp(50px,13.5vw,74px)}
}

@media (max-width:600px){
  /* 10,6 px con letter-spacing en un telefono no se lee: se entrecierra
     el ojo. `desde` es la etiqueta que cambia el sentido del precio, no
     un adorno, asi que en pantalla estrecha sube a 12 px y afloja el
     espaciado. En escritorio se queda como estaba. */
  .svp__row em small{font-size:.75rem; letter-spacing:.06em}
  .svx{min-height:0}
  .svx__stage{gap:.7rem}
  .svp__bar{grid-template-columns:auto minmax(0,1fr); padding-inline:1.1rem; gap:.7rem}
  .svp__back{padding:.6rem .85rem .6rem .7rem; gap:.45rem; letter-spacing:.1em}
  .svp__n{display:none}
  /* En un teléfono los tres controles no caben con texto. Anterior y
     siguiente pasan a ser dos dianas circulares de 48 px —tamaño de dedo— y
     el nombre de la categoría viaja en el aria-label; reservar se queda con
     todo el ancho que sobra, que es lo que tiene que pesar. */
  .svp__nav{padding-inline:1.1rem; gap:.6rem; grid-template-columns:auto minmax(0,1fr) auto}
  .svp__step{width:48px; height:48px; padding:0; justify-content:center; gap:0}
  .svp__step > span{display:none}
  .svp__step svg{width:19px; height:19px}
  .svp__book{width:100%; padding:1.05rem 1rem; font-size:.8125rem; letter-spacing:.08em}
  .svp__book svg{width:16px; height:16px}
  .svp__in{padding-inline:1.1rem}
}

/* En apaisado de móvil un viewport entero son 380 px: si la retícula se
   empeña en caber, cada celda queda en 60 px y no cabe ni el nombre. Ahí
   deja de ser una pantalla y pasa a ser una sección normal con scroll. */
@media (max-height:560px) and (orientation:landscape){
  .svx{height:auto; min-height:0; padding-block:calc(var(--nav-h) + 1rem) 2rem}
  .svx__grid{grid-auto-rows:minmax(120px,auto)}
}

/* ============================================== accesibilidad del gesto */
@media (prefers-reduced-motion:reduce){
  .svx__grid .svx__t,
  .svp__bar, .svp__nav, .svp__in{transition-duration:.01ms !important}
  .svp__sheet{transition:opacity .2s linear !important; clip-path:none !important}
  .svp{opacity:0; transition:opacity .2s linear}
  .svp.is-open{opacity:1}
  .svxi > *{transition:none !important; stroke-dashoffset:0 !important}
  .svp.is-ready .svp__cat.is-on .svp__row{animation:none}
  .svx__grid.is-in .svx__t:hover .svxi > *{animation:none}
}