/* ═══════════════════════════════════════════════════════════════════════════
   LA JALISCIENSE · secciones
   Cero librerias de movimiento. Corte unico en 56.25rem (900px), en rem.
   Ningun contenido depende de JavaScript para ser visible.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer componentes {

  @property --brasa-giro {
    syntax: '<angle>'; inherits: false; initial-value: 0deg;
  }

  .saltar {
    position: absolute; top: .6rem; left: .6rem; z-index: 90;
    padding: .6rem 1rem; border-radius: .3rem;
    background: var(--guajillo); color: var(--noche);
    font-weight: 600; text-decoration: none;
    transform: translateY(-160%);
    transition: transform .2s ease;
  }
  .saltar:focus-visible { transform: translateY(0); }

  .kicker {
    font-size: var(--paso--1);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--guajillo);
    margin-bottom: 1.1rem;
  }
  .kicker.centrado { text-align: center; }
  .centrado { text-align: center; }
  .ancho-corto { max-width: 46ch; margin-inline: auto; }

  .parrafo {
    color: var(--papel-2);
    font-size: var(--paso-0);
    margin-block: 0 1.1rem;
  }
  .parrafo b { color: var(--papel); font-weight: 600; }

  h2 em, h1 em { font-style: italic; color: var(--guajillo-2); }

  .precio { color: var(--guajillo); font-weight: 600; }

  .aval { font-size: var(--paso--1); color: var(--papel-3); margin-top: .8rem; }
  .aval--promo { color: var(--guajillo); }
  .aval--promo b { color: var(--guajillo-2); }

  .firma {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso-1);
    line-height: 1.35;
    color: var(--papel-3);
    margin-top: 1.6rem;
  }

  /* ── BOTONES · sin text-box-trim, que recorta el area tactil ───────────── */
  /* ── LOS BOTONES ─────────────────────────────────────────────────────────
     No son pildoras: son placas, como el letrero. Tres capas —el degradado de
     la chapa, el filete de luz de arriba y la sombra que la despega— mas un
     barrido diagonal que la cruza al pasar por encima. El fuerte ademas late.
     Se anima `background-position` sobre un ::before que calca la caja, no el
     `transform` del boton: asi el halo del ::after no hay que recortarlo. */
  .boton {
    position: relative;
    isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3rem;
    padding: .85rem 1.7rem;
    border-radius: .55rem;
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--papel);
    border: 1px solid color-mix(in srgb, var(--madera-2) 66%, transparent);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--papel) 10%, transparent),
        color-mix(in srgb, var(--papel) 2%, transparent));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--papel) 16%, transparent),
      0 .5rem 1.3rem -.6rem rgb(0 0 0 / .8);
    transition: border-color .28s ease, translate .28s ease, box-shadow .28s ease;
  }
  .boton::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: linear-gradient(105deg,
      transparent 42%,
      color-mix(in srgb, var(--papel) 24%, transparent) 50%,
      transparent 58%);
    background-size: 260% 100%;
    background-position: 160% 0;
    transition: background-position .8s cubic-bezier(.2,.7,.3,1);
  }
  .boton:hover, .boton:focus-visible {
    border-color: var(--papel-2);
    translate: 0 -2px;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--papel) 22%, transparent),
      0 .9rem 1.8rem -.6rem rgb(0 0 0 / .85);
  }
  .boton:hover::before, .boton:focus-visible::before { background-position: -60% 0; }
  .boton:active { translate: 0 0; }

  .boton--fuerte {
    color: #fff;
    border-color: color-mix(in srgb, var(--rojo) 55%, #000);
    background: linear-gradient(180deg, #D62F29, #C92A24 45%, #B4211C);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .3),
      0 .75rem 1.7rem -.55rem color-mix(in srgb, var(--rojo) 72%, transparent);
  }
  /* El halo late abriendo el `spread` del box-shadow, no escalando la caja.
     Un scale que se sale cuenta para el scrollWidth igual que un inset
     negativo: con scale 1.14 el boton reportaba 14 px mas de los que ocupa y
     arrastraba a sus contenedores. El box-shadow no toca el layout jamas. */
  .boton--fuerte::after {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    border-radius: inherit;
    animation: boton-latido 3.4s cubic-bezier(.3,0,.5,1) infinite;
  }
  @keyframes boton-latido {
    0%       { box-shadow: 0 0 0 0    color-mix(in srgb, var(--rojo) 62%, transparent); }
    70%, 100%{ box-shadow: 0 0 0 .8rem color-mix(in srgb, var(--rojo)  0%, transparent); }
  }
  .boton--fuerte:hover, .boton--fuerte:focus-visible {
    border-color: color-mix(in srgb, var(--rojo) 30%, #fff);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .38),
      0 1rem 2.1rem -.5rem color-mix(in srgb, var(--rojo) 82%, transparent);
  }
  .boton--fuerte::before {
    background: linear-gradient(105deg,
      transparent 42%, rgb(255 255 255 / .3) 50%, transparent 58%);
    background-size: 260% 100%;
    background-position: 160% 0;
  }
  .boton--grande { min-height: 3.5rem; padding: 1.05rem 2.3rem; font-size: var(--paso-0); }
  .boton--ancho { width: 100%; }

  /* En telefono los dos botones principales van a todo el ancho. No es
     estetica: parte del publico que pide por WhatsApp es gente mayor, y una
     diana de 390 px se acierta siempre. En escritorio vuelven a su medida. */
  .portal__acciones .boton,
  .cierre__acciones .boton { width: 100%; }

  @media (prefers-reduced-motion: reduce) {
    .boton--fuerte::after { animation: none; opacity: 0; }
    .boton::before { transition: none; }
  }

  .enlace-flecha {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 2.75rem;
    margin-top: 1.2rem;
    color: var(--guajillo);
    font-weight: 600; font-size: var(--paso--1);
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  }
  .enlace-flecha::after {
    content: '→';
    transition: translate .3s cubic-bezier(.2,.7,.3,1);
  }
  .enlace-flecha:hover::after { translate: .4rem 0; }

  .tocable { display: inline-block; padding-block: .95rem; line-height: 1.3; }

  /* ═══════════════ EL PASE ═══════════════════════════════════════════════
     El menu lateral. Es un <details> nativo: abre sin JavaScript, cierra con
     Escape, entra en el orden de tabulacion y anuncia su estado solo. El JS
     unicamente le agrega la animacion de SALIDA, que <details> no sabe hacer.
     Si el JS no carga, cierra de golpe y todo sigue funcionando. */
  .pase { position: relative; z-index: 80; }
  /* El tirador es ambar solido sobre un sitio que es todo negro: no hay forma
     de no verlo. Encima late un anillo cada 2,2 s. Es un pulso, no un
     parpadeo: por debajo de tres destellos por segundo, que es el limite de
     WCAG 2.3.1 por fotosensibilidad. Con el panel abierto se apaga y el
     tirador se vuelve oscuro, porque ya esta sobre el panel. */
  .pase__tirador {
    position: fixed;
    top: clamp(.7rem, 2.2vw, 1.15rem);
    right: clamp(1rem, 2.2vw, 1.15rem);
    z-index: 82;
    display: inline-flex; align-items: center; gap: .7rem;
    min-height: 3rem;
    padding: .55rem 1.05rem .55rem 1.25rem;
    border-radius: .6rem;
    cursor: pointer;
    list-style: none;
    color: var(--noche);
    font-size: var(--paso-0);
    letter-spacing: .1em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--guajillo-2), var(--guajillo) 65%, #D18A22);
    border: 1px solid color-mix(in srgb, var(--guajillo-2) 70%, #fff);
    box-shadow:
      0 .7rem 1.8rem -.4rem color-mix(in srgb, var(--guajillo) 60%, transparent),
      inset 0 1px 0 rgb(255 255 255 / .45);
    transition: background .3s ease, translate .3s ease, box-shadow .3s ease;
  }
  .pase__tirador::-webkit-details-marker { display: none; }
  .pase__tirador::marker { content: ''; }
  .pase__tirador:hover, .pase__tirador:focus-visible {
    translate: 0 -2px;
    box-shadow:
      0 1rem 2.2rem -.4rem color-mix(in srgb, var(--guajillo) 75%, transparent),
      inset 0 1px 0 rgb(255 255 255 / .55);
  }
  .pase__pulso {
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    animation: pase-pulso 2.2s cubic-bezier(.25,0,.35,1) infinite;
  }
  @keyframes pase-pulso {
    0%        { box-shadow: 0 0 0 0     color-mix(in srgb, var(--guajillo) 85%, transparent); }
    62%, 100% { box-shadow: 0 0 0 .9rem color-mix(in srgb, var(--guajillo)  0%, transparent); }
  }
  .pase__palabra { line-height: 1; }

  /* Las tres barritas — lo que el cliente pidio por su nombre. Se doblan en
     cruz al abrir. Se animan `rotate` y `translate` por separado, nunca el
     atajo `transform`: con el atajo, getComputedStyle devuelve 'none' y las
     mediciones dan la animacion por muerta. */
  .pase__rayas { display: grid; gap: .3rem; width: 1.3rem; }
  .pase__rayas i {
    display: block; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: rotate .32s cubic-bezier(.2,.8,.2,1),
                translate .32s cubic-bezier(.2,.8,.2,1),
                opacity .18s ease, scale .18s ease;
  }
  .pase[open] .pase__rayas i:nth-child(1) { translate: 0 .4rem; rotate: 45deg; }
  .pase[open] .pase__rayas i:nth-child(2) { opacity: 0; scale: .2 1; }
  .pase[open] .pase__rayas i:nth-child(3) { translate: 0 -.4rem; rotate: -45deg; }

  .pase[open] .pase__tirador {
    color: var(--papel);
    background: color-mix(in srgb, var(--noche) 82%, transparent);
    border-color: color-mix(in srgb, var(--papel) 32%, transparent);
    box-shadow: 0 .5rem 1.4rem -.5rem rgb(0 0 0 / .75);
  }
  .pase[open] .pase__pulso { animation: none; opacity: 0; }

  .pase[open] .pase__lienzo {animation: pase-vela .34s ease both; }
  .pase[open] .pase__panel {animation: pase-entra .44s cubic-bezier(.16,.84,.24,1) both; }
  .pase[open] .pase__nav a {animation: pase-linea .5s cubic-bezier(.2,.8,.2,1) both; }
  .pase[open] .pase__pie {animation: pase-linea .5s cubic-bezier(.2,.8,.2,1) .42s both; }
  .pase[open] .pase__datos {animation: pase-linea .5s cubic-bezier(.2,.8,.2,1) .5s both; }

  .pase__lienzo {
    position: fixed; inset: 0; z-index: 81;
    display: grid; justify-items: end;
    background: color-mix(in srgb, var(--noche) 70%, transparent);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);

  }
  @keyframes pase-vela { from { opacity: 0; } to { opacity: 1; } }

  .pase__panel {
    position: relative;
    width: min(25rem, 89vw);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5.6rem clamp(1.5rem, 5vw, 2.5rem) 2.2rem;
    background:
      radial-gradient(120% 55% at 100% 0%,
        color-mix(in srgb, var(--guajillo) 12%, transparent), transparent 62%),
      linear-gradient(190deg, var(--carbon), var(--noche) 72%);
    border-left: 1px solid color-mix(in srgb, var(--madera-2) 48%, transparent);
    box-shadow: -2rem 0 4rem -1rem rgb(0 0 0 / .7);

  }
  @keyframes pase-entra { from { translate: 100% 0; } to { translate: 0 0; } }

  .pase__marca {
    display: inline-flex; align-items: center; gap: .7rem;
    margin: 0 0 1.5rem;
    padding: .4rem 0;
    font-size: var(--paso--1);
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--papel-3);
    transition: color .26s ease;
  }
  .pase__marca img { width: 2.2rem; height: 2.2rem; }
  .pase__marca:hover, .pase__marca:focus-visible { color: var(--papel); }

  /* El apartado en el que se esta: ni se subraya ni se apaga, se marca. */
  .pase__nav a[aria-current='page'] .pase__folio { color: var(--papel); }
  .pase__nav a[aria-current='page'] .pase__linea b { color: var(--guajillo); }
  .pase__nav a[aria-current='page'] .pase__linea b::after {
    content: '\2022'; opacity: 1; translate: 0 0;
  }

  .pase__nav { display: grid; }
  .pase__nav a {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    align-items: baseline;
    gap: .2rem;
    padding: 1.15rem 0;
    border-top: 1px solid color-mix(in srgb, var(--papel) 11%, transparent);
    text-decoration: none;
    color: var(--papel);

    animation-delay: calc(.12s + var(--i, 0) * .07s);
  }
  .pase__nav a:nth-child(1) { --i: 0; }
  .pase__nav a:nth-child(2) { --i: 1; }
  .pase__nav a:nth-child(3) { --i: 2; }
  .pase__nav a:nth-child(4) { --i: 3; }
  .pase__nav a:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--papel) 11%, transparent);
  }
  @keyframes pase-linea {
    from { opacity: 0; translate: 1.4rem 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  .pase__folio {
    font-size: var(--paso--1);
    color: var(--guajillo);
    letter-spacing: .06em;
    transition: color .28s ease;
  }
  .pase__linea { display: grid; gap: .2rem; }
  .pase__linea b {
    position: relative;
    font-size: var(--paso-2);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    transition: translate .3s cubic-bezier(.2,.8,.2,1), color .28s ease;
  }
  .pase__linea b::after {
    content: '\2192';
    position: absolute; margin-left: .55rem;
    opacity: 0;
    transition: opacity .28s ease, translate .3s cubic-bezier(.2,.8,.2,1);
    translate: -.5rem 0;
  }
  .pase__linea small {
    font-size: var(--paso--1);
    color: var(--papel-3);
    letter-spacing: .02em;
  }
  .pase__nav a:hover .pase__linea b,
  .pase__nav a:focus-visible .pase__linea b { color: var(--guajillo); translate: .35rem 0; }
  .pase__nav a:hover .pase__linea b::after,
  .pase__nav a:focus-visible .pase__linea b::after { opacity: 1; translate: 0 0; }

  .pase__pie {
    display: grid; gap: 1.3rem;
    margin-top: 2rem;

  }

  .pase__datos {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid color-mix(in srgb, var(--papel) 11%, transparent);
    font-size: var(--paso--1);
    line-height: 1.55;
    color: var(--papel-3);

  }
  .pase__datos p { margin: .35rem 0 0; }
  .pase__datos a {
    display: inline-block;
    padding-block: .5rem;
    font-size: var(--paso-0);
    color: var(--papel);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--guajillo) 55%, transparent);
    transition: color .26s ease, border-color .26s ease;
  }
  .pase__datos a:hover, .pase__datos a:focus-visible {
    color: var(--guajillo); border-color: var(--guajillo);
  }

  /* El numero, debajo de la etiqueta del boton: dice cual es cual sin
     convertir el boton en dos lineas de texto suelto. */
  .boton__dato {
    display: block;
    margin-top: .25em;
    /* .74em daba 11.8px sobre el cuerpo del boton: por debajo del piso de
       12,5 que fija el sistema. Es un numero de telefono — se marca. */
    font-size: .82em;
    font-weight: 400;
    letter-spacing: .06em;
    opacity: .85;
  }
  .boton--grande { flex-direction: column; line-height: 1.15; }

  /* ── LOS TRES LOGUITOS ────────────────────────────────────────────────── */
  .redes { display: flex; flex-wrap: wrap; gap: .7rem; }
  .red {
    display: inline-grid; place-items: center;
    width: 2.9rem; height: 2.9rem;
    border-radius: .55rem;
    color: var(--papel-2);
    background: color-mix(in srgb, var(--papel) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--madera-2) 52%, transparent);
    transition: color .26s ease, background .26s ease,
                border-color .26s ease, translate .26s ease;
  }
  .red svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
  .red__nombre {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .red:hover, .red:focus-visible {
    color: var(--noche);
    background: var(--guajillo);
    border-color: var(--guajillo);
    translate: 0 -2px;
  }
  .pase__pie .red { width: 3.2rem; height: 3.2rem; }
  .pase__pie .red svg { width: 1.4rem; height: 1.4rem; }
  .red--grande { width: 3.4rem; height: 3.4rem; }
  .red--grande svg { width: 1.5rem; height: 1.5rem; }
  .redes--cierre { justify-content: center; margin-top: 2rem; }

  #carta, #galeria, #llegar, #contacto, #platillos, #birria, #pan {
    scroll-margin-top: clamp(4rem, 9vw, 5.5rem);
  }

  /* ═══════════════ LOS APARTADOS ════════════════════════════════════════
     Cuatro puertas en la portada. Sin ellas, quien no abre el menu no llega
     a enterarse de que hay sitio detras — que es justo lo que se pidio. */
  .apartados { padding-block: 0; }
  .apartados__titulo { font-size: var(--paso-4); line-height: .98; margin: .6rem 0 0; }

  /* ── EL INDICE ───────────────────────────────────────────────────────────
     Cinco filas, no cinco tarjetas. Lo que las hace navegacion evidente no es
     una caja: es el folio, el nombre a tamano de titular, la linea que las
     separa y la flecha. La foto entra al pasar el puntero — es un premio, no
     el mensaje: en tactil no existe y la fila funciona igual. */
  .indice {
    margin-top: clamp(2rem, 5vw, 3.2rem);
    border-top: var(--filete);
  }
  .indice__fila {
    position: relative;
    display: grid;
    /* CUATRO columnas declaradas. Con tres, la vista previa caia en una cuarta
       IMPLICITA que no entra en 390px y la miniatura salia cortada por el
       borde. No lo canta ningun detector —no hay scroll horizontal— pero se
       ve a la primera en la captura. */
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--e-4);
    padding-block: var(--e-5);
    border-bottom: var(--filete);
    text-decoration: none;
    color: var(--papel);
    transition: padding-left var(--t-medio) var(--e-suave),
                color var(--t-medio) ease;
  }
  .indice__folio {
    font-size: var(--paso--1);
    color: var(--guajillo);
    letter-spacing: .1em;
    align-self: start;
    padding-top: .35em;
  }
  .indice__nombre {
    font-size: var(--paso-3);
    line-height: .95;
    letter-spacing: -.01em;
    text-transform: uppercase;
    transition: color var(--t-medio) ease;
  }
  .indice__pie {
    grid-column: 2;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso--1);
    color: var(--papel-3);
    line-height: 1.4;
    margin-top: .3em;
    max-inline-size: var(--medida-corta);
  }
  /* La flecha se dibuja, no se escribe: un glifo depende de la fuente que
     acabe cargando y en Anton la punta se pierde. */
  /* La punta rota DENTRO; el contenedor no. Un cuadrado de 24px girado 45
     grados tiene una caja envolvente de 34, y en la ultima columna eso sacaba
     la fila 5px de su propio ancho. Rotando solo el hijo, la caja del padre
     mide lo que dice medir. */
  .indice__flecha {
    grid-row: 1 / span 2;
    grid-column: 3;
    display: grid; place-items: center;
    width: 1.5rem; height: 1.5rem;
    color: var(--papel-3);
    transition: translate var(--t-medio) var(--e-suave), color var(--t-medio) ease;
  }
  .indice__flecha::after {
    content: '';
    width: 1.02rem; height: 1.02rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    rotate: 45deg;
  }
  .indice__vista {
    grid-row: 1 / span 2;
    grid-column: 4;
    justify-self: end;
    display: block;
    width: 4.2rem;
    aspect-ratio: 1;
    overflow: clip;
    border-radius: var(--r-2);
    margin-left: var(--e-4);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--papel) 12%, transparent);
  }
  .indice__vista img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 56.1875rem) {
    .indice__vista { width: 3.6rem; margin-left: var(--e-3); }
    .indice__flecha { width: 1.1rem; height: 1.1rem; }
  }

  .indice__fila:hover,
  .indice__fila:focus-visible { color: var(--guajillo); }
  .indice__fila:hover .indice__nombre,
  .indice__fila:focus-visible .indice__nombre { color: var(--guajillo); }
  .indice__fila:hover .indice__flecha,
  .indice__fila:focus-visible .indice__flecha {
    color: var(--guajillo);
    translate: .35rem 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .indice__fila, .indice__flecha, .indice__nombre { transition: none; }
  }

  /* ═══════════════ EL ENCABEZADO DE APARTADO ════════════════════════════ */
  .cabecera {
    position: relative;
    padding-block: clamp(6.5rem, 16vw, 10rem) clamp(2.5rem, 6vw, 4rem);
    overflow: clip;
  }
  .cabecera__ambiente {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(90% 120% at 50% -20%,
        color-mix(in srgb, var(--guajillo) 13%, transparent), transparent 60%),
      linear-gradient(180deg, var(--carbon), transparent 85%);
  }
  .cabecera .envoltura { text-align: center; }
  .cabecera__titulo {
    font-size: var(--paso-5);
    line-height: .95;
    margin: .6rem 0 0;
    text-wrap: balance;
  }
  /* La palabra que carga el sentido va en la cursiva del sitio y en el ambar
     de la marca. Es el mismo gesto del lema del letrero, repetido. */
  .cabecera__titulo em {
    font-style: italic;
    color: var(--guajillo-2);
  }
  /* La entrada es una frase, no un párrafo: medida corta y renglones
     equilibrados, para que no cuelgue una palabra sola («Se», «la plaza.»). */
  .cabecera__entrada {
    margin: 1.25rem auto 0;
    max-width: 27rem;
    color: var(--papel-2);
    text-wrap: balance;
  }
  @media (prefers-reduced-motion: no-preference) {
    .cabecera .kicker,
    .cabecera__titulo,
    .cabecera__entrada,
    .cabecera .envoltura::after { animation: asomar .9s var(--e-salida) both; }
    .cabecera__titulo { animation-delay: .07s; }
    .cabecera__entrada { animation-delay: .16s; }
    .cabecera .envoltura::after { animation-delay: .26s; }
    @keyframes asomar { from { opacity: 0; translate: 0 .55rem; } }
  }
  /* Un filete corto bajo el titulo: cierra el bloque sin poner una caja. */
  .cabecera .envoltura::after {
    content: '';
    display: block;
    width: 3.5rem; height: 2px;
    margin: 1.6rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--guajillo), transparent);
  }
  /* El apartado que sigue a una cabecera no repite su respiro de arriba: los
     dos paddings se sumaban y dejaban once rem de vacio. */
  .cabecera + section { padding-top: 0; }

  /* ═══════════════ SEGUIR VIENDO ════════════════════════════════════════ */
  .seguir {
    padding-block: clamp(3rem, 8vw, 5.5rem);
    border-top: 1px solid color-mix(in srgb, var(--papel) 9%, transparent);
    text-align: center;
  }
  .seguir__fila {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .7rem;
    margin-top: 1.4rem;
  }
  .seguir__accion { margin-top: 1.8rem; }

  @media (prefers-reduced-motion: reduce) {
    .pase__pulso { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--guajillo) 70%, transparent); }
    .apartado:hover .apartado__foto img { scale: 1; }
  }

  /* ── LA CURSIVA DE LA CASA ───────────────────────────────────────────────
     El lema del letrero ya iba en Instrument Serif italica. Extenderla a
     TODOS los subtextos —lo que describe, matiza o acompana— es lo que sube
     el nivel percibido sin meter una quinta tipografia en el sitio. Los
     precios y los datos duros se quedan en la de siempre: una cifra en
     cursiva se lee peor. */
  .cabecera__entrada,
  .tramo__entrada,
  .plato__desc,
  .apartado__pie,
  .pase__linea small,
  .galeria__entrada,
  .cierre__pie,
  .carta__nota,
  .pieza .parrafo,
  .cinta__pie,
  .pan__pie,
  .marco figcaption {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: var(--paso-0);
    line-height: 1.4;
    letter-spacing: .004em;
  }
  .plato__desc, .pase__linea small, .apartado__pie { font-size: var(--paso--1); }
  .tramo__entrada { font-size: var(--paso-0); }
  .cabecera__entrada { font-size: clamp(1.08rem, 1rem + .6vw, 1.4rem); line-height: 1.34; }

  /* ═══════════════ LA APROXIMACION ══════════════════════════════════════
     La camara baja hacia el edificio conforme se hace scroll: el plano entero
     escala y se desplaza, y encima van entrando el halo del local, la subida
     por la escalera y los rotulos. Es un solo timeline para toda la escena —
     con un `view()` por elemento cada uno mide su propio rango y la
     coreografia se rompe. */
  .llegada {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 8vw, 5rem);
  }
  .llegada__cielo {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(80% 60% at 50% 22%,
        color-mix(in srgb, var(--guajillo) 10%, transparent), transparent 65%);
  }
  .llegada__escena {
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 5vw, 2rem);
  }
  .llegada__plano {
    width: 100%; height: auto;
    display: block;
    border-radius: .5rem;
    border: 1px solid color-mix(in srgb, var(--madera-2) 40%, transparent);
    box-shadow: var(--sombra-honda);
    background: var(--noche);
  }
  /* Los rotulos viven en HTML sobre la escena, no dentro del SVG: dentro
     escalaban con el viewBox y en telefono quedaban en 6 px. */
  .llegada__escena { position: relative; }
  .llegada__rot {
    position: absolute;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso--1);
    color: var(--papel-3);
    white-space: nowrap;
    pointer-events: none;
  }
  .llegada__rot--alta {
    top: 8%; right: clamp(1.5rem, 8vw, 4rem);
    color: var(--guajillo-2);
  }
  .llegada__rot--baja { bottom: 22%; left: 26%; }
  .llegada__rot--calle {
    bottom: 3%; left: 50%; translate: -50% 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .llegada__rotulo {
    font-family: 'Anton', Impact, sans-serif;
    font-size: 36px;
    letter-spacing: .1em;
    fill: #2A1B10;
  }
  .llegada__rotulo--grande { font-size: 46px; letter-spacing: .01em; }

  .llegada__pasos {
    max-width: 42rem;
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    padding-inline: clamp(1.1rem, 5vw, 2rem);
    list-style: none;
    display: grid;
    gap: 1.1rem;
  }
  .llegada__pasos li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: .6rem;
    align-items: baseline;
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--papel) 10%, transparent);
  }
  .llegada__pasos li:last-child { border-bottom: 0; padding-bottom: 0; }
  .llegada__paso { color: var(--guajillo); font-size: var(--paso--1); letter-spacing: .06em; }
  .llegada__pasos p { margin: 0; color: var(--papel-2); line-height: 1.5; }
  .llegada__pasos b { color: var(--papel); }

  @media (prefers-reduced-motion: no-preference) {
    /* el trazo de la subida se dibuja solo, en bucle */
    .llegada__subida {
      stroke-dashoffset: 0;
      animation: subir-escalera 2.6s linear infinite;
    }
    @keyframes subir-escalera { to { stroke-dashoffset: -36; } }

    /* el local respira: es lo unico encendido en todo el edificio */
    .llegada__halo { animation: respirar-halo 4.5s ease-in-out infinite; }
    @keyframes respirar-halo {
      0%, 100% { opacity: .55; }
      50%      { opacity: 1; }
    }

    @supports (animation-timeline: view()) {
      /* la camara baja: un solo timeline para toda la escena */
      .llegada__plano {
        animation: bajar-camara linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 55%;
      }
      @keyframes bajar-camara {
        from { scale: 1.14; translate: 0 -3%; }
        to   { scale: 1;    translate: 0 0; }
      }
      .llegada__pasos li {
        animation: entrar-paso linear both;
        animation-timeline: view();
        animation-range: entry 4% entry 52%;
      }
      @keyframes entrar-paso {
        from { opacity: .2; translate: -1rem 0; }
        to   { opacity: 1;  translate: 0 0; }
      }
    }
  }

  /* ═══════════════ LA VITRINA DE PLATILLOS ══════════════════════════════
     Catorce fotos del cliente, enteras y enmarcadas. Antes iban recortadas y
     flotando; con este material —de fotógrafo, con fondo de madera trabajado—
     el recorte dejaba los platos deformes. El carril desliza con snap: catorce
     platos no caben en una pantalla y obligarlos a caber es como se llega a la
     cuadrícula triste. */
  .vitrina-p {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(.5rem, 2vw, 1.2rem) clamp(3rem, 8vw, 5rem);
  }
  .vitrina-p__carril {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 66vw;
    gap: clamp(1rem, 3.5vw, 1.8rem);
    margin: 0;
    padding: 1rem clamp(1.1rem, 5vw, 2rem) 1.6rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1.1rem, 5vw, 2rem);
    scrollbar-width: none;
  }
  .vitrina-p__carril::-webkit-scrollbar { display: none; }
  .vitrina-p__carril:focus-visible { outline: 2px solid var(--guajillo); outline-offset: 4px; }

  .antojo { min-width: 0; scroll-snap-align: center; text-align: center; }
  .antojo__figura {
    overflow: clip;
    border-radius: .5rem;
    border: 1px solid color-mix(in srgb, var(--madera-2) 42%, transparent);
    box-shadow: var(--sombra-honda);
    background: var(--carbon);
    margin-bottom: 1rem;
  }
  .antojo__figura img {
    display: block;
    width: 100%; height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: scale .7s cubic-bezier(.2,.7,.3,1);
  }
  .antojo:hover .antojo__figura img { scale: 1.05; }

  .antojo__nombre {
    font-size: var(--paso-1);
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
  }
  .antojo__dicho {
    margin: .4rem auto 0;
    max-width: 17rem;
    text-wrap: balance;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso-0);
    line-height: 1.35;
    color: var(--papel-2);
  }
  .antojo__precio {
    margin: .5rem 0 0;
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--guajillo);
  }
  .vitrina-p__pista {
    margin: 0;
    text-align: center;
    font-size: var(--paso--2);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--papel-3);
  }
  .vitrina-p__pista span { color: var(--papel-3); }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .antojo {
        animation: desplegar-plato linear both;
        animation-timeline: view(block);
        animation-range: entry 6% cover 26%;
      }
      @keyframes desplegar-plato {
        from { opacity: .3; translate: 0 1.8rem; }
        to   { opacity: 1;  translate: 0 0; }
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .antojo:hover .antojo__figura img { scale: 1; }
  }

  .llegar__directo {
    margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
    text-align: center;
  }

  /* ═══════════════ LA GALERÍA ════════════════════════════════════════════
     Un muro de corrido, sin tramos ni pies. Cada foto entra en un marco
     parecido a SU forma —las panorámicas a todo el ancho, las apaisadas a dos
     columnas, las verticales a una— para que el recorte sea mínimo: antes iban
     todas forzadas a 4/5 y las panorámicas salían destrozadas.
     `dense` rellena el hueco que deja una pieza grande al no caber en la fila:
     sin él, el final del muro queda con agujeros. */
  .galeria { padding-bottom: clamp(2rem, 6vw, 4rem); }
  .galeria__muro {
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: clamp(.7rem, 3vw, 1.4rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: clamp(.45rem, 1.5vw, .75rem);
  }
  .galeria__pieza {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: .4rem;
    overflow: clip;
    cursor: zoom-in;
    background: var(--carbon);
    box-shadow: 0 .6rem 1.6rem -1rem rgb(0 0 0 / .8);
  }
  .galeria__pieza img {
    display: block;
    width: 100%; height: 100%;
    aspect-ratio: var(--marco, 4 / 5);
    object-fit: cover;
    transition: scale .6s cubic-bezier(.2,.7,.3,1);
  }
  .galeria__pieza:hover img { scale: 1.05; }
  .galeria__pieza:focus-visible { outline: 2px solid var(--guajillo); outline-offset: 3px; }

  /* las apaisadas y las panorámicas mandan sobre la retícula */
  .galeria__pieza.foto--ancha,
  .galeria__pieza.foto--panoramica { grid-column: span 2; }
  /* Cierre de huecos: con un número impar de verticales queda una celda vacía.
     muro.py marca la última vertical para que ocupe las dos columnas (su marco
     4/5 no cambia, solo crece). En escritorio, doble-escritorio hace lo mismo
     con las apaisadas que falten para completar la fila de cuatro. */
  .galeria__pieza.doble-movil { grid-column: span 2; }

  /* una lupa discreta: dice que la foto se abre, sin taparla */
  .galeria__pieza::after {
    content: '';
    position: absolute; right: .5rem; bottom: .5rem;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    background:
      radial-gradient(circle at 42% 42%, transparent 5px, currentColor 5px 6px, transparent 6px),
      linear-gradient(45deg, transparent 46%, currentColor 46% 54%, transparent 54%) no-repeat 62% 62% / 9px 9px,
      color-mix(in srgb, var(--noche) 72%, transparent);
    color: var(--papel);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .galeria__pieza:hover::after,
  .galeria__pieza:focus-visible::after { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .galeria__pieza {
        animation: subir-foto linear both;
        animation-timeline: view();
        animation-range: entry 2% entry 40%;
      }
      @keyframes subir-foto {
        from { opacity: .35; translate: 0 1.2rem; }
        to   { opacity: 1;   translate: 0 0; }
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .galeria__pieza:hover img { scale: 1; }
  }

  /* ── el visor ── */
  .visor {
    width: 100%; max-width: none;
    height: 100%; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: color-mix(in srgb, var(--noche) 96%, transparent);
    color: var(--papel);
  }
  .visor::backdrop { background: rgb(0 0 0 / .85); }
  .visor[open] { display: grid; place-items: center; }
  .visor__foto {
    max-width: 94vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: .3rem;
  }
  .visor__cerrar, .visor__paso {
    position: absolute;
    display: grid; place-items: center;
    width: 3rem; height: 3rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--papel) 26%, transparent);
    background: color-mix(in srgb, var(--noche) 78%, transparent);
    color: var(--papel);
    font-size: 1.6rem; line-height: 1;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
  }
  .visor__cerrar:hover, .visor__paso:hover {
    background: var(--guajillo); border-color: var(--guajillo); color: var(--noche);
  }
  .visor__cerrar { top: 1rem; right: 1rem; }
  .visor__paso { top: 50%; translate: 0 -50%; }
  .visor__paso--antes { left: clamp(.5rem, 2vw, 1.5rem); }
  .visor__paso--despues { right: clamp(.5rem, 2vw, 1.5rem); }
  .visor__cuenta {
    position: absolute; bottom: 1.1rem; left: 50%;
    translate: -50% 0;
    margin: 0;
    font-size: var(--paso--1);
    letter-spacing: .1em;
    color: var(--papel-3);
  }

  .vitrina-p__pista span { color: var(--papel-3); }

  /* El plato respira. Delays negativos escalonados para que no floten los
     nueve al unisono, que es lo que delata el truco. */
  @media (prefers-reduced-motion: no-preference) {
    .antojo__figura img {
      animation: flotar-plato 7s ease-in-out infinite;
      animation-delay: calc(var(--i, 0) * -.8s);
    }
    @keyframes flotar-plato {
      0%, 100% { translate: 0 0; }
      50%      { translate: 0 -11px; }
    }

    /* Se despliegan uno a uno al entrar. El estado inicial NO es invisible:
       si el timeline no corre —el carril es scroll container y puede robarle
       el ancla— las nueve piezas siguen legibles. */
    @supports (animation-timeline: view()) {
      .antojo {
        animation: desplegar-plato linear both;
        animation-timeline: view(block);
        animation-range: entry 6% cover 26%;
      }
      @keyframes desplegar-plato {
        from { opacity: .25; translate: 0 2.2rem; scale: .94; }
        to   { opacity: 1;   translate: 0 0;      scale: 1; }
      }
    }
  }


  /* ── EL MARCO ────────────────────────────────────────────────────────────
     La foto se enmarca, nunca va a sangre: las fuentes miden 550-600px. */
  .marco { position: relative; }
  .marco__ventana {
    position: relative;
    /* clip, no hidden: `hidden` crea un scroll container y entonces
       `animation-timeline: view()` se ancla a ESTA caja — que nunca se
       desplaza — y el reencuadre se queda quieto sin dar ningun error. */
    overflow: clip;
    border-radius: .35rem;
    background: var(--carbon);
    box-shadow: var(--sombra-honda);
    border: 1px solid color-mix(in srgb, var(--madera-2) 40%, transparent);
  }
  .marco__ventana img { width: 100%; height: 100%; object-fit: cover; }
  /* ── EL CLIP EN BUCLE ────────────────────────────────────────────────────
     El <img> es el poster: pinta primero, sostiene el aspect-ratio y es lo
     unico que queda si el video no puede reproducirse (datos, reduced-motion,
     el navegador que bloquea el autoplay). El video se monta encima, nunca
     en su lugar.
     `muted` + `playsinline` van juntos y no son opcionales: sin el segundo,
     iOS abre el video a pantalla completa al arrancar. */
  .marco__ventana video {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
  }
  /* El clip ya se mueve solo: no se le suma el reencuadre de scroll, que
     ademas lo escalaria un 30 % desde 540 px de origen. El destello si le
     pasa por encima — vive en ::after, con z-index 2. */
  @media (prefers-reduced-motion: reduce) {
    .marco__ventana video { display: none; }
  }

  .marco figcaption {
    margin-top: .9rem;
    font-size: var(--paso--1);
    color: var(--papel-3);
    letter-spacing: .04em;
  }

  /* ── LA COMIDA COBRA VIDA ────────────────────────────────────────────────
     Dos capas ligadas al scroll: la foto se reencuadra y un destello cálido
     la cruza, como el brillo de la grasa al girar el plato bajo la luz.
     Se animan `scale`/`translate` (compositor), nunca propiedades de layout. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .marco--vivo .marco__ventana img {
        animation: reencuadre linear both;
        animation-timeline: view();
        animation-range: entry 5% exit 95%;
        will-change: scale, translate;
      }
      @keyframes reencuadre {
        from { scale: 1.30; translate: 0 -7%; }
        to   { scale: 1.02; translate: 0  6%; }
      }

      .marco--vivo .marco__ventana::after {
        content: '';
        position: absolute; inset: -30% -60%;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(102deg,
          transparent 40%,
          color-mix(in srgb, var(--guajillo-2) 22%, transparent) 49%,
          color-mix(in srgb, #fff 12%, transparent) 51%,
          transparent 60%);
        animation: destello linear both;
        animation-timeline: view();
        animation-range: entry 15% exit 85%;
        will-change: translate;
      }
      @keyframes destello {
        from { translate: -60% 0; }
        to   { translate:  60% 0; }
      }
    }
  }
}

/* ═══════════════════════════ SECCIONES ═══════════════════════════════════ */
@layer secciones {

  /* ── EL PORTAL ─────────────────────────────────────────────────────────── */
  /* La foto NO va a pantalla completa: su propio letrero chocaba con el
     nuestro y se leian dos nombres encimados. Va como banda superior. */
  .portal {
    position: relative;
    isolation: isolate;
    min-height: clamp(33rem, 92svh, 58rem);
    display: grid;
    /* la banda crece en escritorio: antes se recortaba tanto que se veía
       menos local que en un teléfono */
    grid-template-rows: clamp(12rem, 38svh, 27rem) 1fr;
    padding-bottom: clamp(2rem, 6svh, 4rem);
    overflow: clip;
  }

  .portal__foto {
    grid-row: 1;
    position: relative;
    overflow: clip;
    /* la mascara va en el contenedor: sobre el <img> el filter la corta en seco */
    mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 99%);
  }
  .portal__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    filter: brightness(.7) saturate(.94) contrast(1.05);
    /* margen de sobra: el recorrido de cámara es amplio y no puede descubrir
       los bordes en ningún punto del ciclo */
    scale: 1.26;
  }

  /* MOVIMIENTO DE CÁMARA. Recorre el local de izquierda a derecha y vuelve,
     acercándose al pasar por el centro — como una toma de mano, no como un
     zoom. La versión anterior movía un 3,4 % en 21 s: había que buscarlo.
     Esta recorre un 15 % del ancho en 17 s: se ve sin buscarlo. */
  @media (prefers-reduced-motion: no-preference) {
    .portal__foto img {
      animation: camara 17s cubic-bezier(.37,0,.63,1) infinite alternate;
      will-change: scale, translate;
    }
    @keyframes camara {
      0%   { scale: 1.22; translate: -7.5% -1.2%; }
      50%  { scale: 1.32; translate:  0%    2.2%; }
      100% { scale: 1.22; translate:  7.5% -1.2%; }
    }

    @supports (animation-timeline: scroll()) {
      .portal__foto {
        animation: hundirse linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 80svh;
      }
      @keyframes hundirse {
        to { translate: 0 14%; }
      }
    }
  }

  .portal__foto::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(92% 130% at 50% -8%, transparent 28%, color-mix(in srgb, var(--noche) 74%, transparent) 100%);
  }

  .portal__brasa {
    position: absolute; inset: -35% -25%; z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(34% 26% at 50% 56%, color-mix(in srgb, var(--brasa) 26%, transparent) 0%, transparent 72%),
      conic-gradient(from var(--brasa-giro) at 50% 56%,
        color-mix(in srgb, var(--guajillo) 10%, transparent),
        transparent 30%,
        color-mix(in srgb, var(--rojo-hondo) 13%, transparent) 55%,
        transparent 78%,
        color-mix(in srgb, var(--guajillo) 10%, transparent));
    filter: blur(80px);
    opacity: .8;
    animation: brasa-gira 46s linear infinite;
  }
  @keyframes brasa-gira { to { --brasa-giro: 360deg; } }

  .portal__cuerpo {
    grid-row: 2;
    position: relative;
    align-self: center;
    text-align: center;
    padding-top: clamp(1.5rem, 4vh, 3rem);
    /* en telefono sigue siendo una columna centrada: el ancho no da para
       componer fuera del eje sin apretar el letrero */
    row-gap: var(--e-7);
  }
  .portal__texto { grid-column: 1 / -1; }

  /* ── EL ANTOJO ───────────────────────────────────────────────────────────
     La foto de producto que le faltaba a la primera pantalla. Va en silueta
     recta —marco de papel, no rectangulo redondeado— y CRUZA LA FRONTERA de
     la banda de la fachada: se monta sobre ella en vez de quedar debajo. */
  .portal__antojo {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(72vw, 17rem);
    position: relative;
    margin: 0;
  }
  .portal__antojo img {
    width: 100%;
    /* SIN height:auto el atributo height="1600" del HTML gana al aspect-ratio
       y la foto se pinta de 1600px de alto. El reset trae max-width pero no
       height, asi que hay que decirlo aqui. */
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 56%;
    border-radius: var(--r-2);
    /* el filete de papel: separa la foto del negro sin caja ni sombra grande */
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--papel) 16%, transparent),
      0 1.6rem 3.4rem -1rem rgb(0 0 0 / .75);
  }
  .portal__antojo figcaption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-4);
    margin-top: var(--e-3);
    padding-top: var(--e-2);
    border-top: var(--filete);
  }
  .portal__antojo-nom {
    font-size: var(--paso--1);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--papel-2);
  }
  .portal__antojo-pre {
    font-size: var(--paso--1);
    color: var(--guajillo);
  }

  .portal__antes {
    font-size: var(--paso--1);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--papel-3);
    margin-bottom: 1.4rem;
  }

  /* ── EL LETRERO ──
     Enciende letra a letra, como los tubos de un anuncio real. Y al final
     entra el LA que no cupo en la fachada del local. */
  .letrero {
    display: grid;
    gap: clamp(.1rem, .6vw, .4rem);
    line-height: .82;
    text-transform: uppercase;
  }
  .letrero__birria,
  .letrero__nombre { display: flex; justify-content: center; align-items: baseline; }

  .letrero__birria {
    --tracking: clamp(.26em, 1.5vw, .42em);
    font-size: clamp(1.9rem, 8.2vw, 5.3rem);
    letter-spacing: var(--tracking);
    color: var(--papel);
    text-shadow: 0 0 .06em rgb(255 255 255 / .55), 0 0 1.4rem rgb(255 245 230 / .35);
  }
  .letrero__nombre {
    font-size: clamp(2.6rem, 12.4vw, 8rem);
    letter-spacing: clamp(.005em, .2vw, .02em);
    color: var(--rojo);
    text-shadow: 0 0 .05em rgb(255 90 90 / .5), 0 0 1.8rem rgb(224 49 49 / .5);
  }
  .letrero__la {
    color: var(--papel);
    margin-right: clamp(.12em, .8vw, .2em);
    text-shadow: 0 0 .06em rgb(255 255 255 / .55), 0 0 1.6rem rgb(255 245 230 / .4);
  }
  /* El tracking añade hueco tambien DESPUES de la ultima letra: sin quitarlo,
     la linea se centra con el hueco dentro y queda corrida a la izquierda. */
  .letrero__birria span:last-child { margin-right: calc(var(--tracking) * -1); }

  /* Visible por defecto. La animacion solo enciende: si algo falla, se lee.
     Despues del encendido el letrero NO se queda quieto: cada letra sigue un
     oleaje lento, con la fase corrida por su posicion. Amplitud minima —
     .07em, unos 2-4 px — y periodo largo: se siente vivo sin distraer. */
  .letrero span span {
    display: inline-block;
    animation:
      enciende .5s cubic-bezier(.2,.8,.3,1) both,
      oleaje 5.4s ease-in-out infinite;
    animation-delay:
      calc(var(--i) * .055s + .2s),
      calc(var(--i) * .12s + 1.1s);
    will-change: translate;
  }
  @keyframes enciende {
    0%   { opacity: 0; filter: brightness(.25); translate: 0 .12em; }
    55%  { opacity: 1; filter: brightness(1.9); }
    72%  { filter: brightness(.75); }
    100% { opacity: 1; filter: brightness(1); translate: 0 0; }
  }
  @keyframes oleaje {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -.07em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .letrero span span { animation: none; }
    .portal__brasa { animation: none; }
  }

  .portal__lema {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso-2);
    color: var(--papel-2);
    margin-top: clamp(1rem, 2.4vw, 1.8rem);
  }
  /* La dirección es dato secundario: baja de tamaño y de color para no
     competir con la marca, y se separa un poco más del lema. En teléfono va
     en dos renglones sin el punto medio, que quedaba colgando al final. */
  .portal__donde {
    font-size: var(--paso--2);
    letter-spacing: .18em; text-transform: uppercase;
    line-height: 1.75;
    color: var(--papel-3);
    margin-top: clamp(1.3rem, 3vw, 1.6rem);
  }
  .portal__donde b { color: var(--papel-2); font-weight: 600; }
  .portal__donde .en-linea { white-space: nowrap; }
  .portal__sep { margin-inline: .55em; }
  @media (max-width: 56.24rem) {
    .portal__donde .en-linea { display: block; }
    .portal__sep { display: none; }
  }

  .portal__acciones {
    display: flex; flex-wrap: wrap; gap: .8rem;
    justify-content: center;
    margin-top: clamp(2rem, 4.5vw, 2.8rem);
  }

  /* ── LA CINTA ──────────────────────────────────────────────────────────── */
  .cinta {
    background: var(--noche-2);
    border-block: var(--filete);
    padding-block: clamp(1.6rem, 4vw, 2.4rem);
  }
  .cinta__rejilla {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 1rem; text-align: center;
  }
  .cinta__dato b {
    display: block;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: var(--paso-2);
    color: var(--guajillo); line-height: 1.1;
  }
  .cinta__dato span {
    display: block; font-size: var(--paso--1);
    color: var(--papel-3); margin-top: .25rem;
  }

  /* ── EL PAN ──────────────────────────────────────────────────────────────
     Spread: la foto es la protagonista y el texto se apoya en su borde, bajo
     la mitad. El aire de la derecha es espacio negativo compuesto, no sobra. */
  .pan__spread { row-gap: var(--e-7); align-items: end; }
  .pan__foto { grid-column: 1 / -1; margin: 0; }
  .pan__foto img {
    width: 100%; height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 46%;
    border-radius: var(--r-2);
  }
  .pan__pie {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--e-4);
    margin-top: var(--e-3); padding-top: var(--e-2);
    border-top: var(--filete);
    font-size: var(--paso--1);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--papel-3);
  }
  .pan__pie .precio { color: var(--guajillo); letter-spacing: 0; }
  .pan__texto { grid-column: 1 / -1; }
  .pan h2 { font-size: var(--paso-4); margin-bottom: var(--e-5); }
  .pan .parrafo { max-inline-size: var(--medida); }

  /* ── EL CAZO ─────────────────────────────────────────────────────────────
     Pieza de origen, ya no una tarjeta centrada. */
  .cazo {
    position: relative; isolation: isolate;
    background: var(--noche-2);
    border-block: var(--filete);
    overflow: clip;
  }
  .cazo__ambiente, .barra__ambiente, .cierre__ambiente {
    position: absolute; inset: -30% -20%; z-index: -1;
    pointer-events: none; opacity: .5;
    background:
      radial-gradient(30% 40% at 30% 40%, color-mix(in srgb, var(--brasa) 22%, transparent), transparent 70%),
      radial-gradient(26% 34% at 72% 62%, color-mix(in srgb, var(--guajillo) 14%, transparent), transparent 70%);
    filter: blur(60px);
    animation: vapor 82s linear infinite alternate;
    will-change: translate;
  }
  @keyframes vapor {
    from { translate: -3% -2%; scale: 1; }
    to   { translate:  3%  2%; scale: 1.08; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cazo__ambiente, .barra__ambiente, .cierre__ambiente { animation: none; }
  }

  .cazo__cabeza { row-gap: var(--e-5); align-items: end; }
  .cazo__intro { grid-column: 1 / -1; }
  /* «Hecha con mucho amor…» se dice, no se informa: va en la cursiva. */
  .cazo__parrafo {
    grid-column: 1 / -1;
    max-inline-size: 30rem;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso-1);
    line-height: 1.36;
    margin-bottom: 0;
  }
  .cazo__titulo { font-size: var(--paso-5); margin: .5rem 0 0; }

  /* La cazuela pasa de medallon circular de 24rem a LAMINA a todo lo ancho.
     Y deja de girar: una cazuela en rotacion perpetua es movimiento sin
     motivo — no explica nada del plato y compite con la lectura. */
  .cazo__foto {
    width: 100%;
    margin: var(--aire-corto) 0 0;
    overflow: clip;
  }
  .cazo__foto img {
    width: 100%; height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 52%;
  }

  /* Los tres cortes: linea de ficha, sin vinetas, sin iconos y sin tarjetas. */
  .cortes {
    margin-top: var(--aire-corto);
    row-gap: var(--e-5);
  }
  .cortes__uno {
    grid-column: span 12;
    padding-top: var(--e-4);
    border-top: 1px solid color-mix(in srgb, var(--guajillo) 34%, transparent);
  }
  .cortes__nom {
    font-size: var(--paso-1);
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--papel);
  }
  .cortes__pie {
    margin: .35em 0 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso-0);
    color: var(--papel-3);
  }


  /* ── LA VITRINA ────────────────────────────────────────────────────────── */
  .vitrina { padding-block: 0; }
  .vitrina__titulo { font-size: var(--paso-4); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
  .vitrina__lista {
    row-gap: clamp(2.8rem, 7vw, 4.5rem);
    list-style: none;
  }
  .pieza {
    grid-column: 1 / -1;
    display: grid; gap: var(--e-5);
    align-items: start;
  }
  /* Los tres apoyos no comparten proporcion: el formato distinto de cada foto
     es parte de la composicion, no un defecto que igualar. */
  .pieza__foto .marco__ventana { aspect-ratio: 4 / 5; }
  .pieza--manda .pieza__foto .marco__ventana { aspect-ratio: 4 / 5; }
  .pieza:nth-child(3) .pieza__foto .marco__ventana { aspect-ratio: 3 / 4; }
  .pieza:nth-child(4) .pieza__foto .marco__ventana { aspect-ratio: 1 / 1; }
  /* Folio de revista, no marcador: pequeño, espaciado, en el tono del texto
     secundario. Antes era ámbar y del tamaño de un subtítulo. */
  .pieza__num {
    font-size: var(--paso--2);
    letter-spacing: .24em;
    color: var(--papel-3);
    margin-bottom: .6rem;
  }
  .pieza h3 { font-size: var(--paso-3); margin-bottom: .9rem; }

  /* ── LA CARTA ──────────────────────────────────────────────────────────────
     Se hojea. Cada sección es una hoja de un carril con snap: en el teléfono
     se pasa con el dedo, en escritorio se ven dos hojas y se pasa con las
     flechas, los puntos o el teclado. Sin JavaScript el carril sigue siendo
     deslizable y todo el contenido está en el DOM. */
  .carta {
    background: var(--noche-2);
    border-block: var(--filete);
    padding-block: clamp(4.5rem, 12vw, 9rem);
  }
  .carta__titulo { font-size: var(--paso-4); text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.2rem); }

  .carta__indice { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
  .carta__indice ul {
    display: flex;
    gap: .4rem;
    list-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-inline: .2rem;
    margin-inline: -.2rem;
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  }
  .carta__indice ul::-webkit-scrollbar { display: none; }
  .carta__indice li { scroll-snap-align: center; }
  /* Los capitulos dejan de ser pastillas: son un indice de carta. El area
     tactil se conserva en 2.75rem — lo que se quita es la caja, no el blanco
     donde se pulsa. El capitulo activo se marca con filete, no con relleno. */
  .carta__indice a {
    display: inline-flex; align-items: center; gap: .5em;
    min-height: 2.75rem;
    padding: .5rem .2rem;
    white-space: nowrap;
    font-size: var(--paso--2);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--papel-3);
    border-bottom: 2px solid transparent;
    transition: color var(--t-rapido) ease, border-color var(--t-rapido) ease;
  }
  .carta__folio {
    /* sin .82em: sobre --paso--2 daba 10.3px y el piso del sistema es 12,5 */
    font-weight: 400;
    color: color-mix(in srgb, var(--guajillo) 70%, transparent);
    letter-spacing: .04em;
  }
  .carta__indice a:hover,
  .carta__indice a:focus-visible { color: var(--papel); }
  .carta__indice a[aria-current='true'] {
    color: var(--papel);
    border-bottom-color: var(--guajillo);
  }
  .carta__indice a[aria-current='true'] .carta__folio { color: var(--guajillo); }

  /* ── el visor ── */
  .carta__visor {
    position: relative;
    max-width: 74rem;
    margin-inline: auto;
  }

  .carta__carril {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border: 1px solid color-mix(in srgb, var(--guajillo) 24%, transparent);
    border-radius: .6rem;
    background:
      radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--guajillo) 5%, transparent), transparent 70%),
      var(--noche);
    box-shadow: var(--sombra-honda);
  }
  .carta__carril::-webkit-scrollbar { display: none; }
  .carta__carril:focus-visible { outline-offset: 3px; }
  /* el panel se ajusta a la hoja abierta — la altura la fija el JS */
  .carta__carril { transition: height .38s cubic-bezier(.3,.8,.35,1); }
  .hoja { align-self: start; }
  @media (prefers-reduced-motion: reduce) {
    .carta__carril { scroll-behavior: auto; transition: none; }
  }

  .hoja {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.2rem, 3vw, 2.2rem) clamp(1.8rem, 4vw, 2.6rem);
    /* el pliegue: una hoja de carta tiene su vecina al lado */
    border-right: 1px solid color-mix(in srgb, var(--papel) 8%, transparent);
  }
  .hoja:last-child { border-right: 0; }

  .tramo__cabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--guajillo) 26%, transparent);
  }
  .tramo__sello {
    width: clamp(3.4rem, 10vw, 4.4rem);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: clip;
    border: 1px solid color-mix(in srgb, var(--guajillo) 40%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--guajillo) 7%, transparent),
                0 .5rem 1.2rem -.5rem rgb(0 0 0 / .9);
  }
  .tramo__sello img { width: 100%; height: 100%; object-fit: cover; }
  .tramo__rotulo { min-width: 0; }
  .tramo__folio {
    font-size: var(--paso--2);
    letter-spacing: .22em;
    /* con `color-mix … transparent` el folio quedaba a 1,13:1 — invisible.
       Se mezcla contra el fondo, no contra la nada. */
    color: #B88232;
    margin-bottom: .15rem;
  }
  .tramo__nombre {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
    font-size: var(--paso-1);
    line-height: 1.05;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--papel);
  }
  .tramo__entrada {
    margin-top: .2rem;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso--1);
    line-height: 1.35;
    color: var(--papel-3);
  }

  .tramo__lista { display: grid; }
  .plato { padding-block: .55rem; }
  .plato + .plato { border-top: 1px solid color-mix(in srgb, var(--papel) 6%, transparent); }
  .plato__linea {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(1.2rem, 1fr) auto;
    align-items: baseline;
    column-gap: .5rem;
    margin: 0;
  }
  .plato__nombre {
    font-weight: 600;
    font-size: var(--paso-0);
    color: var(--papel);
    letter-spacing: .005em;
  }
  .plato__puntos {
    align-self: baseline;
    border-bottom: 1px dotted color-mix(in srgb, var(--papel) 24%, transparent);
    translate: 0 -.3em;
  }
  /* Los precios forman UNA columna: la variante («mediano $107») baja a su
     renglón, alineada a la derecha. En línea empujaba cada precio a una
     posición distinta y la columna se deshacía. El contenedor se disuelve
     (display: contents) para que precio y variante sean celdas de la línea:
     así la variante no ensancha la columna y los puntos llegan al precio. */
  .plato__precio {
    display: contents;
    font-weight: 600;
    font-size: var(--paso-0);
    color: var(--guajillo);
    white-space: nowrap;
  }
  .plato__precio em {
    font-style: normal; font-weight: 400;
    grid-column: 1 / -1;
    justify-self: end;
    font-size: var(--paso--2);
    line-height: 1.25;
    color: var(--papel-3);
  }
  .plato__desc {
    margin: .12rem 0 0;
    font-size: var(--paso--2);
    line-height: 1.45;
    color: var(--papel-3);
    max-width: 52ch;
  }
  .plato__nota {
    color: var(--guajillo);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  /* Rotulo dentro de una hoja de la barra: «Tequila», «Mezcal», «Vinos, por
     copa». Va en el mismo tono que el folio, que ya pasa contraste. */
  .plato-grupo {
    padding-top: 1.1rem;
    padding-bottom: .15rem;
    font-size: var(--paso--2);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #B88232;
  }
  .plato-grupo:first-child { padding-top: .2rem; }
  .plato-grupo + .plato { border-top: 0; }
  /* Sin foto suya de cerveza ni de destilados, esas hojas van sin sello: el
     rotulo ocupa la cabecera entera en vez de quedarse en la columna «auto». */
  .tramo__cabecera--sin-sello { grid-template-columns: minmax(0, 1fr); }

  /* ── flechas y puntos ── */
  .carta__flecha {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.9rem; height: 2.9rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--guajillo) 40%, transparent);
    background: color-mix(in srgb, var(--noche) 88%, transparent);
    backdrop-filter: blur(6px);
    color: var(--guajillo);
    transition: background .2s ease, scale .2s ease, opacity .2s ease;
  }
  .carta__flecha svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .carta__flecha:hover { background: var(--guajillo); color: var(--noche); scale: 1.06; }
  .carta__flecha[disabled] { opacity: .25; pointer-events: none; }
  .carta__flecha--izq { left: -.6rem; }
  .carta__flecha--der { right: -.6rem; }
  /* En un teléfono la flecha flotaba SOBRE un platillo y le tapaba el precio.
     Ahí se desliza con el dedo y quedan los puntos: las flechas son para el
     ratón, que no desliza cómodo. */
  @media (max-width: 56.24rem) {
    .carta__flecha { display: none; }
  }

  .carta__puntos {
    display: flex;
    flex-wrap: wrap;          /* 7 dianas de 44px no caben en 320: se parten */
    justify-content: center;
    gap: .35rem .2rem;
    margin-top: 1.3rem;
  }
  /* El boton mide 44x44: el area tactil es el propio rectangulo, comprobable.
     El punto se dibuja dentro con ::before, asi que crece la diana y no el
     dibujo. Siete de ellos no caben en una fila de 320px — por eso el
     contenedor envuelve. */
  .carta__punto {
    display: grid;
    place-items: center;
    /* 1.6rem daba 26px de ancho: por debajo de la diana de 44 que exige AA.
       El punto pintado sigue midiendo .5rem — crece el area, no el dibujo. */
    width: 2.75rem;
    min-width: 2.75rem;   /* el flex del contenedor lo encogia a 42px */
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0;
  }
  .carta__punto::before {
    content: '';
    width: .5rem; height: .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--papel) 26%, transparent);
    transition: background .25s ease, width .25s ease;
  }
  .carta__punto[aria-current='true']::before {
    background: var(--guajillo);
    width: 1.2rem;
  }
  .carta__punto:hover::before { background: var(--papel-2); }

  .carta__nota {
    margin-top: clamp(1.4rem, 3vw, 2rem);
    text-align: center;
    font-size: var(--paso--2);
    color: var(--papel-3);
    letter-spacing: .04em;
  }

  /* ── LA BARRA ──────────────────────────────────────────────────────────── */
  .barra {
    position: relative; isolation: isolate; overflow: clip;
    padding-block: clamp(4.5rem, 12vw, 9rem);
  }
  .barra__rejilla { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
  .barra h2 { font-size: var(--paso-4); margin-bottom: 1.4rem; }
  .barra__foto { max-width: 26rem; margin-inline: auto; }
  .barra__foto .marco__ventana { aspect-ratio: 3 / 4; }
  .barra__lista { margin-top: 1.8rem; }
  .barra__lista li {
    display: flex; align-items: baseline; gap: .6rem;
    padding-block: .72rem;
    border-top: var(--filete);
    font-size: var(--paso-0);
  }
  .barra__lista li > span:first-child { flex: 1; }
  .barra__lista b { color: var(--guajillo); font-weight: 600; }
  .barra__lista em {
    font-style: normal; font-size: var(--paso--2);
    color: var(--papel-3); letter-spacing: .05em;
  }
  .barra .enlace-flecha { margin-top: 1.6rem; }
  .barra__aviso {
    margin-top: 1.2rem;
    font-size: var(--paso--2);
    color: var(--papel-3);
    letter-spacing: .04em;
  }

  /* ── CÓMO LLEGAR ───────────────────────────────────────────────────────── */
  .llegar {
    background: var(--noche-2);
    border-block: var(--filete);
    padding-block: clamp(4.5rem, 12vw, 9rem);
  }
  .llegar__titulo { font-size: var(--paso-4); text-align: center; margin-bottom: 1.2rem; }
  .llegar__panel {
    display: grid; gap: clamp(2rem, 5vw, 3.5rem);
    margin-top: clamp(2.4rem, 6vw, 3.6rem);
    align-items: center;
  }

  .croquis {
    position: relative;
    aspect-ratio: 800 / 500;
    background: var(--noche);
    border: 1px solid color-mix(in srgb, var(--madera-2) 45%, transparent);
    border-radius: .4rem;
    box-shadow: var(--sombra-honda);
    overflow: clip;
  }
  .croquis__trazo { width: 100%; height: 100%; }

  /* Los rotulos van en HTML, no dentro del SVG: el texto de un SVG escala con
     el dibujo y acaba a 6px en un teléfono. Aquí el trazo escala, la letra no. */
  .croquis > p {
    position: absolute;
    left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    margin: 0; text-align: center; white-space: nowrap;
    line-height: 1.25; pointer-events: none;
  }
  .croquis__aqui {
    font-family: 'Anton', Impact, sans-serif;
    font-size: var(--paso-1);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--papel);
  }
  .croquis__local {
    font-family: 'Anton', Impact, sans-serif;
    font-size: var(--paso--1);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--guajillo);
  }
  .croquis__via {
    font-size: var(--paso--1); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--papel-2);
    background: var(--noche); padding-inline: .5em;
  }
  .croquis__calle {
    font-size: var(--paso--2);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--papel-3);
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg);
    background: var(--noche); padding-block: .5em;
  }
  .croquis__hito {
    font-size: var(--paso--2);
    color: var(--papel-3);
    white-space: normal; max-width: 9em;
  }

  .croquis__calles line {
    stroke: color-mix(in srgb, var(--papel) 22%, transparent);
    stroke-width: 9; stroke-linecap: round;
  }
  .croquis__calles line.fina { stroke-width: 5; }
  .croquis__flechas path {
    fill: none;
    stroke: color-mix(in srgb, var(--guajillo) 55%, transparent);
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .croquis .pin { fill: var(--rojo); }
  .croquis .pin-ojo { fill: var(--noche); }
  .croquis .halo {
    fill: color-mix(in srgb, var(--rojo) 18%, transparent);
    /* sin transform-box, `center` se refiere al viewBox entero y el halo se
       va de paseo al escalar en vez de latir en su sitio */
    transform-box: fill-box; transform-origin: center;
    animation: latido 3.4s ease-in-out infinite;
  }
  .croquis .halo--2 {
    fill: color-mix(in srgb, var(--guajillo) 20%, transparent);
    animation-delay: .5s;
  }
  @keyframes latido {
    0%, 100% { opacity: .35; scale: .86; }
    50%      { opacity: .9;  scale: 1.06; }
  }
  @media (prefers-reduced-motion: reduce) {
    .croquis .halo { animation: none; opacity: .55; }
    .portal__foto img, .cazo__foto img { animation: none; }
  }
  /* En pantallas estrechas el croquis se queda sin sitio para los nombres de
     calle rotados. No pasa nada: están al lado, en la lista de datos. */
  @media (max-width: 34rem) { .croquis__calle { display: none; } }

  /* ── LA SENALETICA ────────────────────────────────────────────────────── */
  .donde {
    display: grid;
    gap: .1em;
    margin-bottom: var(--e-6);
    padding-bottom: var(--e-5);
    border-bottom: var(--filete);
  }
  .donde__linea {
    font-size: var(--paso-3);
    line-height: .96;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--papel-2);
  }
  /* «planta alta» es el dato que el negocio necesita que se lea: es la razon
     de que la gente no los encuentre. */
  .donde__linea--fuerte { color: var(--guajillo); }

  /* Cada rótulo pegado a SU dato y los pares separados entre sí: con un solo
     gap de rejilla el rótulo quedaba igual de lejos de su dato que del bloque
     anterior, y la ficha se leía como una lista suelta. */
  .llegar__datos dl { display: grid; gap: 0; }
  .llegar__datos dt {
    font-size: var(--paso--2);
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--guajillo); margin-bottom: .4rem;
  }
  .llegar__datos dd { color: var(--papel-2); margin-bottom: var(--e-6); }
  .llegar__datos dd:last-of-type { margin-bottom: 0; }
  .llegar__datos dd b { color: var(--papel); font-weight: 600; }
  .llegar__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

  .mapa-vivo { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
  .mapa-vivo iframe {
    width: 100%;
    height: clamp(20rem, 50vw, 27rem);
    border: 1px solid color-mix(in srgb, var(--madera-2) 45%, transparent);
    border-radius: .4rem;
    /* el mapa de Google es claro: se lleva a la noche del sitio */
    filter: invert(.92) hue-rotate(180deg) saturate(.62) brightness(.94) contrast(.96);
  }

  /* ── LAS VOCES ─────────────────────────────────────────────────────────── */
  .voces { padding-block: 0; }
  .voces__cabeza { row-gap: var(--e-7); align-items: start; }
  .voces__intro { grid-column: 1 / -1; }
  .voces__titulo { font-size: var(--paso-4); margin: .5rem 0 0; }

  /* ── LO QUE SE REPITE ────────────────────────────────────────────────────
     Las palabras que más aparecen en las reseñas, compuestas a distinto
     tamaño. Sin cifras a la vista: el cliente pidió que no pareciera un
     informe (2026-09-11), así que el tamaño es lo único que queda.
     Sin caja, sin borde, sin relleno — deja de parecer un cuadro de mando. */
  .repite {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap;
    align-items: baseline;
    gap: .1em .55em;
  }
  .repite li {
    display: inline-flex;
    align-items: flex-start;
    gap: .18em;
    font-family: 'Instrument Serif', Georgia, serif;
    line-height: 1.08;
    color: var(--papel-2);
    /* de ~1.05rem con n=2 a ~2.4rem con n=23 */
    font-size: calc(1rem + var(--n) * .062rem);
  }
  .repite li:first-child .repite__pal { color: var(--papel); }

  /* ── LAS CITAS ───────────────────────────────────────────────────────────
     Prueba cualitativa. Ni tarjetas ni fondo: un filete arriba, aire y la
     atribucion en pequeno. La primera manda; las otras dos la acompanan. */
  .voces__lista {
    margin-top: var(--aire-corto);
    row-gap: var(--e-7);
    list-style: none;
  }
  .voz {
    grid-column: 1 / -1;
    padding-top: var(--e-5);
    border-top: var(--filete);
  }
  .voz blockquote p {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--paso-1); line-height: 1.32;
    color: var(--papel);
    text-wrap: pretty;
    /* la comilla cuelga fuera del margen y el texto alinea con el filete */
    text-indent: -.42em;
  }
  .voz--manda blockquote p { font-size: var(--paso-2); line-height: 1.26; }
  .voz blockquote p::before { content: '\201C'; }
  .voz blockquote p::after { content: '\201D'; }
  /* Quién lo dijo y dónde, en voz baja: la cita es la protagonista. */
  .voz footer {
    margin-top: 1.1rem; font-size: var(--paso--2);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--papel-3);
  }
  .voz footer span {
    display: block;
    margin-top: .15rem;
    letter-spacing: .01em; text-transform: none;
    font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
    font-size: var(--paso--1);
    color: var(--papel-3);
  }
  .voces__nota {
    margin-top: var(--aire-corto);
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic; font-size: var(--paso-1);
    color: var(--guajillo);
  }


  /* ── SU HISTORIA ───────────────────────────────────────────────────────── */
  .historia {
    padding-block: clamp(4rem, 10vw, 7rem);
    background: var(--noche-2);
    border-block: var(--filete);
  }
  .historia__caja {
    max-width: 52rem;
    padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.5rem, 4vw, 3.2rem);
    border: 1px solid color-mix(in srgb, var(--guajillo) 26%, transparent);
    border-radius: .7rem;
    background:
      radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--guajillo) 7%, transparent), transparent 70%),
      color-mix(in srgb, var(--papel) 3%, transparent);
  }
  .historia__cabecera { text-align: center; margin-bottom: clamp(2rem, 5vw, 2.8rem); }
  .historia__sello { width: 4rem; height: auto; margin: 0 auto 1.1rem; opacity: .9; }
  .historia__titulo { font-size: var(--paso-3); line-height: 1.08; }

  .historia__lista {
    display: grid;
    list-style: none;
    margin-bottom: clamp(1.8rem, 4vw, 2.4rem);
  }
  .historia__lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding-block: 1.05rem;
    border-top: 1px solid color-mix(in srgb, var(--papel) 11%, transparent);
  }
  .historia__lista li:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--papel) 11%, transparent);
  }
  .historia__num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--paso-1);
    line-height: 1.1;
    color: var(--guajillo);
  }
  .historia__lista p { margin: 0; color: var(--papel-3); font-size: var(--paso--1); }
  .historia__lista b { color: var(--papel); font-weight: 600; }

  .historia__cierre {
    margin: 0;
    text-align: center;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--paso-1);
    line-height: 1.45;
    color: var(--papel-2);
  }
  .historia__cierre b { color: var(--guajillo-2); font-weight: 400; font-style: italic; }
  /* ── EL CIERRE ─────────────────────────────────────────────────────────── */
  .cierre {
    position: relative; isolation: isolate; overflow: clip;
    background: var(--noche);
    padding-block: clamp(4.5rem, 13vw, 8rem);
    text-align: center;
  }
  .cierre__titulo {
    font-size: clamp(2.2rem, 10.5vw, 6.6rem);
    line-height: .92; letter-spacing: .01em;
    color: var(--papel);
    margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
  }
  /* El mismo gesto del letrero del portal, aqui abajo: las letras se encienden
     una a una «al abrir el apartado».
     No cuelga de `view()`: en una pagina corta el titular ya esta en pantalla
     al cargar, el rango de scroll se agota antes de que nadie mire y el
     encendido no se ve nunca. Cuelga de que la seccion ENTRE en pantalla, que
     es lo que se pidio. Lo dispara un IntersectionObserver de seis lineas.
     Las letras estan encendidas por defecto: sin JavaScript se leen igual y
     solo pierden el encendido, nunca el texto. */
  .cierre__renglon { display: block; }
  .cierre__renglon > span[style] {
    display: inline-block;
    will-change: translate;
  }
  .cierre__renglon .letrero__hueco { display: inline-block; width: .34em; }

  @media (prefers-reduced-motion: no-preference) {
    .cierre__renglon > span[style] {
      animation: oleaje 5.4s ease-in-out infinite;
      animation-delay: calc(var(--i) * .12s);
    }
    .letrero-vivo.prende .cierre__renglon > span[style] {
      animation:
        enciende-cierre .52s cubic-bezier(.2,.8,.3,1) both,
        oleaje 5.4s ease-in-out infinite;
      animation-delay:
        calc(var(--i) * .055s),
        calc(var(--i) * .12s + .95s);
    }
    @keyframes enciende-cierre {
      0%   { opacity: .1; filter: brightness(.28); translate: 0 .16em; }
      55%  { opacity: 1;  filter: brightness(2.1); }
      74%  { filter: brightness(.78); }
      100% { opacity: 1;  filter: brightness(1); translate: 0 0; }
    }
  }

  .cierre__acciones { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
  .cierre__pie {
    margin: 2rem auto 0; max-width: 32rem;
    font-size: var(--paso--1); line-height: 1.6;
    letter-spacing: .12em; text-transform: uppercase; color: var(--papel-3);
    text-wrap: balance;
  }

  /* ── EL PIE ────────────────────────────────────────────────────────────── */
  .pie {
    background: var(--noche);
    border-top: var(--filete);
    padding-block: clamp(3rem, 8vw, 4.5rem) 2rem;
    font-size: var(--paso--1);
    color: var(--papel-3);
  }
  /* ── EL CIERRE DE MARCA ──────────────────────────────────────────────
     El wordmark hace de arquitectura: cruza el ancho, sangrado por los dos
     lados, y es lo ultimo que se ve. Escala con el contenedor, asi que nunca
     desborda ni deja hueco. */
  .pie__cierre { text-align: center; padding-bottom: var(--aire-corto); }
  .pie__sello { width: 4.6rem; height: auto; margin: 0 auto .9rem; }
  .pie__wordmark {
    font-size: clamp(2.2rem, 13.5vw, 11rem);
    line-height: .9;
    letter-spacing: -.02em;
    color: var(--papel);
    /* el nombre ya se anuncia en el sello y en el titulo: aqui es grafico */
    white-space: nowrap;
  }
  .pie__datos { row-gap: var(--e-6); padding-top: var(--e-6); border-top: var(--filete); }
  .pie__bloque { grid-column: 1 / -1; }
  .pie__lema {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic; color: var(--papel-2);
  }
  .pie__titulo {
    font-family: 'Archivo', sans-serif;
    font-size: var(--paso--2); font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--guajillo); margin-bottom: .7rem;
  }
  .pie a {
    color: var(--papel-2);
    text-decoration-color: color-mix(in srgb, var(--papel) 30%, transparent);
    text-underline-offset: .25em;
  }
  .pie a { transition: color var(--t-rapido) ease; }
  .pie a:hover { color: var(--guajillo); }
  /* «TikTok» medía 40px de ancho porque un enlace en linea mide lo que su
     texto. Es el nombre mas corto de la lista y el unico que no llegaba a la
     diana de 44. Se le da minimo sin tocar el flujo de las lineas. */
  /* Los enlaces del pie: en linea median lo que su texto —«TikTok» daba 40px
     de ancho— y al pasarlos a inline-block por eso, la altura se colapso de 48
     a 23 porque dejaron de heredar la linea del parrafo. Se les da diana
     completa DONDE SE TOCAN, y en escritorio se quedan compactos. */
  .pie a.tocable { display: inline-block; min-width: 2.75rem; }
  @media (max-width: 56.1875rem) {
    /* Filas de 44 px exactos. El enlace de 44 px se sumaba al interlineado
       del párrafo y al relleno de .tocable (15 px arriba y abajo): 74 px por
       fila, con huecos enormes entre «Facebook» e «Instagram». */
    .pie__bloque p:has(.tocable) { line-height: 2.75rem; }
    .pie a.tocable { min-height: 2.75rem; line-height: 2.75rem; padding-block: 0; }
    .pie__titulo:has(+ p .tocable) { margin-bottom: 0; }
    /* Cualquier enlace de telefono es una diana de pulgar, este donde este:
       el del pase medía 99x42 y le faltaban dos pixeles. */
    a[href^="tel:"] { display: inline-block; min-height: 2.75rem; }
  }
  .pie__firma {
    margin-top: 2.6rem; padding-top: 1.4rem;
    border-top: var(--filete);
    text-align: center; font-size: var(--paso--2); letter-spacing: .1em;
  }

  /* ── NOTA DE PROPUESTA ─────────────────────────────────────────────────────
     Dirigida al dueño del negocio, no al comensal. Se retira al cerrar.
     Va en tarjeta con cuatro pasos numerados: antes era un bloque de texto
     corrido que parecía un documento pegado al final del sitio. */
  .nota {
    background: #0A0908;
    padding-block: clamp(3rem, 8vw, 5rem);
  }
  .nota__caja {
    max-width: 62rem;
    margin-inline: auto;
    padding: clamp(1.8rem, 4.5vw, 3rem);
    border: 1px solid color-mix(in srgb, var(--guajillo) 30%, transparent);
    border-radius: .8rem;
    background:
      radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--guajillo) 6%, transparent), transparent 72%),
      #100E0D;
  }

  .nota__cabecera {
    text-align: center;
    padding-bottom: clamp(1.6rem, 4vw, 2.2rem);
    margin-bottom: clamp(1.6rem, 4vw, 2.2rem);
    border-bottom: 1px solid color-mix(in srgb, var(--papel) 10%, transparent);
  }
  .nota__sello {
    display: inline-block;
    padding: .34rem 1rem;
    border: 1px solid color-mix(in srgb, var(--guajillo) 45%, transparent);
    border-radius: 999px;
    font-size: var(--paso--2);
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--guajillo);
    margin-bottom: 1rem;
  }
  .nota__titulo {
    font-size: var(--paso-3);
    line-height: 1.1;
    color: var(--papel);
    margin-bottom: .8rem;
  }
  .nota__bajada {
    max-width: 46ch;
    margin-inline: auto;
    font-size: var(--paso--1);
    color: var(--papel-3);
  }

  .nota__pasos {
    display: grid;
    gap: 1rem;
    list-style: none;
    margin-bottom: clamp(1.8rem, 4vw, 2.4rem);
  }
  .nota__paso {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: .35rem;
    padding: clamp(1rem, 2.5vw, 1.3rem);
    border-radius: .5rem;
    background: color-mix(in srgb, var(--papel) 3.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--papel) 9%, transparent);
  }
  .nota__num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--paso-1);
    line-height: 1;
    color: var(--guajillo);
  }
  .nota__paso h3 {
    font-family: 'Archivo', sans-serif;
    font-size: var(--paso-0);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--papel);
  }
  .nota__paso p {
    margin: 0;
    font-size: var(--paso--1);
    color: var(--papel-3);
  }

  .nota__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: clamp(1.4rem, 3.5vw, 1.8rem);
    border-top: 1px solid color-mix(in srgb, var(--papel) 10%, transparent);
  }
  .nota__pie p {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: var(--paso-1);
    color: var(--papel-2);
  }
}

/* ═══════════════ LOS TITULARES ASOMAN ════════════════════════════════════
   Solo los titulares de sección y las citas: suben un rem y ganan opacidad
   mientras entran en pantalla. Desde .25, no desde cero — si el navegador no
   soporta view() o la animación no corre, el texto ya está ahí. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @layer secciones {
      .apartados__titulo, .pan h2, .cazo__titulo, .vitrina__titulo, .voces__titulo, .voz {
        animation: asomar-scroll linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
      .voz:nth-child(2) { animation-range: entry 8% entry 68%; }
      .voz:nth-child(3) { animation-range: entry 16% entry 76%; }
      @keyframes asomar-scroll { from { opacity: .25; translate: 0 1rem; } }
    }
  }
}

/* ═══════════════ EL CORTE ÚNICO · 56.25rem = 900px ═══════════════════════ */
@media (min-width: 56.25rem) {
  @layer secciones {

    /* ── EL PORTAL, COMPUESTO ────────────────────────────────────────────
       Deja de ser una columna centrada. El letrero se apoya en el borde
       izquierdo de la rejilla y el antojo ocupa las cuatro ultimas columnas,
       SUBIENDO hasta montarse sobre la banda de la fachada. Ese solape es
       deliberado: fachada = contexto, producto = deseo, tipografia = marca,
       las tres en la misma pantalla y no una debajo de otra. */
    /* La banda NO sube de 38svh: por encima de eso el letrero de su propia
       fachada entra en cuadro y se leen dos nombres encimados. Ya estaba
       documentado en la regla de arriba y lo rompi al recomponer. */
    .portal { grid-template-rows: clamp(13rem, 38svh, 27rem) 1fr; }
    .portal__cuerpo { align-items: start; column-gap: var(--e-6); }

    .portal__texto {
      /* OCHO columnas, no siete: a 1440 el letrero mide 740px y en 7 columnas
         (699) se salia de su caja. No producia scroll —nadie lo cantaba— pero
         invadia la canaleta que separa del antojo.
         Y el letrero pasa a medirse contra ESTA columna, no contra el
         viewport: con vw seguia creciendo aunque su caja fuese la mitad de la
         pagina, y entre 900 y 1120 volvia a salirse. */
      container-type: inline-size;
      grid-column: 1 / span 8;
      text-align: left;
      padding-top: var(--e-6);
    }
    .letrero__birria,
    .letrero__nombre { justify-content: flex-start; }
    .letrero__birria { font-size: clamp(1.9rem, 10.4cqw, 5.3rem); }
    .letrero__nombre { font-size: clamp(2.6rem, 15.6cqw, 8rem); }
    .portal__acciones { justify-content: flex-start; }
    .portal__lema { max-inline-size: var(--medida-corta); }

    .portal__antojo {
      grid-column: 9 / -1;
      justify-self: end;
      width: 100%;
      /* el cruce de frontera: sube dentro de la banda de la fachada */
      margin-top: clamp(-13rem, -18vh, -7rem);
      z-index: 2;
    }
    .portal__antojo img { aspect-ratio: 3 / 4; }

    .cinta__rejilla { grid-template-columns: repeat(4, 1fr); }

    /* ── EL PAN, COMPUESTO ─────────────────────────────────────────────
       La foto ocupa siete columnas y el texto cuatro, apoyado en su borde y
       corrido hacia abajo. La columna 8 queda vacia a proposito: es la
       canaleta que separa la lamina del texto, como en una revista. */
    .pan__spread { align-items: end; column-gap: var(--e-6); }
    .pan__foto { grid-column: 1 / span 7; }
    .pan__foto img { aspect-ratio: 5 / 4; }
    .pan__texto {
      grid-column: 9 / -1;
      padding-bottom: var(--e-8);
      border-left: var(--filete);
      padding-left: var(--e-5);
    }
    .pan h2 { font-size: var(--paso-3); }

    /* ── EL CAZO, COMPUESTO ────────────────────────────────────────────── */
    .cazo__intro { grid-column: 1 / span 6; }
    .cazo__parrafo { grid-column: 8 / -1; }
    .cazo__foto img { aspect-ratio: 21 / 9; }
    .cortes__uno { grid-column: span 4; }

    /* ── LA VITRINA, CON JERARQUIA ─────────────────────────────────────
       01 manda: ocupa siete columnas de foto y su texto se apoya al lado.
       02, 03 y 04 bajan a una linea de tres. Deja de ser un zigzag de cuatro
       piezas del mismo peso — que es lo que hacia que ninguna destacara. */
    .vitrina__lista { column-gap: var(--e-6); row-gap: var(--aire-corto); }

    .pieza--manda {
      grid-column: 1 / -1;
      grid-template-columns: 7fr 5fr;
      column-gap: var(--e-7);
      align-items: center;
    }
    .pieza--manda .pieza__foto .marco__ventana { aspect-ratio: 5 / 4; }
    .pieza--manda h3 { font-size: var(--paso-5); }
    .pieza--manda .parrafo { font-size: var(--paso-1); max-inline-size: var(--medida); }

    .pieza:not(.pieza--manda) { grid-column: span 4; }
    .pieza:not(.pieza--manda) h3 { font-size: var(--paso-2); }
    /* Las tres fotos conservan su proporción, pero su pie cae a la misma
       altura: los folios 02, 03 y 04 arrancan en una sola línea. */
    @supports (grid-template-rows: subgrid) {
      .pieza:not(.pieza--manda) {
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: var(--e-5);
      }
      .pieza:not(.pieza--manda) .pieza__foto { align-self: end; }
    }

    /* El indice se queda en UNA linea en todos los anchos. Con flex-wrap
       envolvia en dos filas entre 900 y 1120, y al cargar las tipografias los
       capitulos se recolocaban entre filas: 0.118 de CLS a 910px, todo el
       salto en ese reflow. En una sola linea no hay filas que recolocar.
       A 1440 cabe entero, asi que se ve igual; por debajo, se desliza como en
       telefono — que es el comportamiento que ya conocia el visitante. */
    .carta__indice ul { justify-content: center; }

    /* la carta abierta: dos hojas a la vista, como un menú desplegado */
    .carta__carril { grid-auto-columns: 50%; }
    .tramo__nombre { font-size: var(--paso-3); }
    .carta__flecha--izq { left: -1.4rem; }
    .carta__flecha--der { right: -1.4rem; }

    .barra__rejilla { grid-template-columns: .8fr 1.2fr; }
    .barra__foto { margin-inline: 0; }

    .llegar__panel { grid-template-columns: 1.25fr .75fr; }

    /* ── LAS VOCES, COMPUESTAS ─────────────────────────────────────────
       El titular y las palabras repetidas comparten fila; la cita que manda
       ocupa media pagina y las otras dos se reparten el resto. */
    /* ── EL MURO, CON RITMO ────────────────────────────────────────────── */
    .muro__piezas > .foto { grid-column: span 3; }
    .muro__piezas > .foto--alta { grid-column: span 2; }
    .muro__piezas > .foto--ancha { grid-column: 1 / -1; }
    /* cada tercer retrato manda: rompe la fila de tres iguales */
    .muro__piezas > .foto--alta:nth-of-type(3n) { grid-column: span 3; }

    .voces__intro { grid-column: 1 / span 5; }
    .repite { grid-column: 7 / -1; }
    .repite li { font-size: calc(1.05rem + var(--n) * .085rem); }

    .voces__lista { column-gap: var(--e-6); row-gap: var(--e-7); }
    .voz--manda { grid-column: 1 / span 6; }
    .voz--manda blockquote p { font-size: var(--paso-2); }
    .voz:not(.voz--manda) { grid-column: span 3; }

    .pie__bloque { grid-column: span 3; }

    .historia__lista li { grid-template-columns: 3rem minmax(0, 1fr); }
    .nota__pasos { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
    .nota__pie { justify-content: space-between; }

    /* `dense` rellena el hueco que deja una pieza ancha al no caber en la
       fila. Sin el, la galeria queda con agujeros en 3 columnas. */
    .vitrina-p__carril { grid-auto-columns: 22rem; }
    .galeria__muro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .galeria__pieza.foto--ancha { grid-column: span 1; }
    .galeria__pieza.doble-movil { grid-column: span 1; }
    .galeria__pieza.doble-escritorio { grid-column: span 2; }
    .galeria__pieza.foto--panoramica { grid-column: span 4; }
    .pase__panel { padding-top: 6.2rem; }
    /* ── EL INDICE, EN ESCRITORIO ──────────────────────────────────────
       El nombre sube a tamano de titular y la vista previa deja de ocupar
       sitio: se despega y solo aparece bajo el puntero, alineada al borde
       derecho. Es el unico momento en que la foto compite, y solo cuando el
       visitante ya senalo esa fila. */
    .indice__fila {
      grid-template-columns: 4rem minmax(0, 1fr) auto;
      column-gap: var(--e-6);
      padding-block: var(--e-6);
    }
    .indice__fila:hover { padding-left: var(--e-4); }
    .indice__nombre { font-size: var(--paso-5); }
    .indice__folio { font-size: var(--paso-0); padding-top: .55em; }
    .indice__pie { font-size: var(--paso-0); }

    .indice__vista {
      position: absolute;
      right: clamp(6rem, 16%, 12rem);
      top: 50%;
      translate: 0 -50%;
      width: 12rem;
      aspect-ratio: 4 / 3;
      margin-left: 0;
      opacity: 0;
      scale: .96;
      pointer-events: none;
      z-index: 3;
      transition: opacity var(--t-medio) ease, scale var(--t-medio) var(--e-suave);
    }
    .indice__fila:hover .indice__vista,
    .indice__fila:focus-visible .indice__vista { opacity: 1; scale: 1; }

    @media (prefers-reduced-motion: reduce) {
      .indice__vista { transition: none; }
    }
    .portal__acciones .boton,
    .cierre__acciones .boton { width: auto; }
  }
}