/* ═══════════════════════════════════════════════════════════════════════════
   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);
    color: var(--papel-3);
    margin-top: 1.6rem;
  }

  /* ── BOTONES · sin text-box-trim, que recorta el area tactil ───────────── */
  .boton {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.875rem;
    padding: .78rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--papel) 30%, transparent);
    border-radius: 999px;
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--papel);
    background: color-mix(in srgb, var(--papel) 5%, transparent);
    transition: background .25s ease, border-color .25s ease, translate .25s ease;
  }
  .boton:hover {
    background: color-mix(in srgb, var(--papel) 12%, transparent);
    border-color: var(--papel-2);
    translate: 0 -2px;
  }
  .boton--fuerte {
    background: var(--rojo); border-color: var(--rojo); color: #fff;
    box-shadow: 0 .6rem 1.6rem -.6rem color-mix(in srgb, var(--rojo) 75%, transparent);
  }
  .boton--fuerte:hover { background: #F04444; border-color: #F04444; color: #fff; }
  .boton--grande { min-height: 3.4rem; padding: 1rem 2.2rem; font-size: var(--paso-0); }

  .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 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);
  }

  .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, 7.6vw, 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, 11.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);
  }
  .portal__donde {
    font-size: var(--paso--1);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--papel-3);
    margin-top: 1rem;
  }
  .portal__donde b { color: var(--guajillo); font-weight: 600; }
  .portal__donde .en-linea { white-space: nowrap; }

  .portal__acciones {
    display: flex; flex-wrap: wrap; gap: .8rem;
    justify-content: center;
    margin-top: clamp(1.8rem, 4vw, 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 ────────────────────────────────────────────────────────────── */
  .pan { padding-block: clamp(4.5rem, 12vw, 9rem); }
  .pan__rejilla { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
  .pan h2 { font-size: var(--paso-4); margin-bottom: 1.6rem; }
  .pan__foto { max-width: 34rem; margin-inline: auto; }
  .pan__foto .marco__ventana { aspect-ratio: 4 / 3; }

  /* ── EL CAZO ───────────────────────────────────────────────────────────── */
  .cazo {
    position: relative; isolation: isolate;
    background: var(--noche-2);
    border-block: var(--filete);
    padding-block: clamp(4.5rem, 12vw, 9rem);
    text-align: center;
    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__titulo { font-size: var(--paso-5); margin-bottom: 1.4rem; }
  .cazo__foto {
    width: min(100%, 24rem);
    margin: clamp(2.4rem, 6vw, 3.6rem) auto 0;
    border-radius: 50%;
    overflow: clip;
    border: 1px solid color-mix(in srgb, var(--guajillo) 30%, transparent);
    box-shadow: var(--sombra-honda), 0 0 5rem -1rem color-mix(in srgb, var(--brasa) 60%, transparent);
    aspect-ratio: 1;
  }
  .cazo__foto img { width: 100%; height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: no-preference) {
    .cazo__foto img {
      animation: gira-cazo 60s linear infinite;
      will-change: rotate;
    }
    @keyframes gira-cazo { to { rotate: 360deg; } }
  }

  .cazo__notas {
    display: grid; gap: 1.2rem;
    margin: clamp(2.4rem, 6vw, 3.4rem) auto 0;
    max-width: 44rem;
  }
  .cazo__notas li {
    display: flex; flex-direction: column; gap: .2rem;
    padding-block: 1rem;
    border-top: var(--filete);
  }
  .cazo__notas b {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: var(--paso-1);
  }
  .cazo__notas span { font-size: var(--paso--1); color: var(--papel-3); }

  /* ── LA VITRINA ────────────────────────────────────────────────────────── */
  .vitrina { padding-block: clamp(4.5rem, 12vw, 9rem); }
  .vitrina__titulo { font-size: var(--paso-4); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
  .vitrina__lista {
    display: grid; gap: clamp(3rem, 8vw, 5.5rem);
    width: min(100% - var(--canal) * 2, var(--ancho));
    margin-inline: auto; list-style: none;
  }
  .pieza { display: grid; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
  .pieza__foto .marco__ventana { aspect-ratio: 5 / 4; }
  .pieza__num {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--paso-1); color: var(--guajillo); margin-bottom: .5rem;
  }
  .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; }
  .carta__indice a {
    display: inline-flex; align-items: center;
    min-height: 2.75rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
    font-size: var(--paso--2);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--papel-2);
    border: 1px solid color-mix(in srgb, var(--papel) 16%, transparent);
    background: color-mix(in srgb, var(--papel) 3%, transparent);
    transition: background .22s ease, color .22s ease, border-color .22s ease;
  }
  .carta__indice a:hover,
  .carta__indice a:focus-visible,
  .carta__indice a[aria-current='true'] {
    background: var(--guajillo);
    border-color: var(--guajillo);
    color: var(--noche);
  }

  /* ── 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: flex; align-items: baseline; gap: .5rem; margin: 0; }
  .plato__nombre {
    font-weight: 600;
    font-size: var(--paso-0);
    color: var(--papel);
    letter-spacing: .005em;
  }
  .plato__puntos {
    flex: 1 1 auto;
    min-width: 1.2rem;
    align-self: center;
    border-bottom: 1px dotted color-mix(in srgb, var(--papel) 24%, transparent);
    translate: 0 -.1em;
  }
  .plato__precio {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: var(--paso-0);
    color: var(--guajillo);
    white-space: nowrap;
  }
  .plato__precio em {
    font-style: normal; font-weight: 400;
    font-size: var(--paso--2);
    color: var(--papel-3);
  }
  .plato__precio em::before { content: ' · '; color: color-mix(in srgb, var(--papel) 26%, transparent); }
  @media (max-width: 22.5rem) {
    .plato__precio em { display: block; text-align: right; }
    .plato__precio em::before { content: none; }
  }
  .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;
  }

  /* ── 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;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.3rem;
  }
  /* El botón mide 44px de alto y 1,6rem de ancho: el área táctil es el propio
     rectángulo, comprobable. El punto se dibuja dentro con ::before. */
  .carta__punto {
    display: grid;
    place-items: center;
    width: 1.6rem;
    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-selected='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;
  }

  /* ── 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; } }

  .llegar__datos dl { display: grid; gap: 1.4rem; }
  .llegar__datos dt {
    font-size: var(--paso--2);
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--guajillo); margin-bottom: .3rem;
  }
  .llegar__datos dd { color: var(--papel-2); }
  .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: clamp(4.5rem, 12vw, 9rem); }
  .voces__titulo { font-size: var(--paso-4); margin-bottom: clamp(2rem, 5vw, 3rem); }

  .nube {
    display: flex; flex-wrap: wrap; gap: .6rem .9rem;
    justify-content: center;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
  }
  .nube li {
    display: inline-flex; align-items: baseline; gap: .45rem;
    padding: .45rem 1rem;
    border: var(--filete); border-radius: 999px;
    color: var(--papel-2);
    /* el tamaño lleva la cuenta: cuanto más se repite, más grande */
    font-size: calc(var(--paso--1) + var(--n) * .028rem);
  }
  .nube b { color: var(--guajillo); font-weight: 600; }

  .voces__lista { display: grid; gap: 1.2rem; }
  .voz {
    padding: clamp(1.4rem, 3.5vw, 2rem);
    background: var(--noche-2);
    border: var(--filete); border-radius: .4rem;
  }
  .voz blockquote p {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--paso-1); line-height: 1.4;
    color: var(--papel);
    hanging-punctuation: first;
  }
  .voz blockquote p::before { content: '\201C'; }
  .voz blockquote p::after { content: '\201D'; }
  .voz footer {
    margin-top: 1rem; font-size: var(--paso--1);
    font-weight: 600; color: var(--papel-2);
  }
  .voz footer span {
    display: block; font-weight: 400;
    color: var(--papel-3); font-size: var(--paso--2); margin-top: .15rem;
  }
  .voces__nota {
    text-align: center; margin-top: 2rem;
    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, 9vw, 5.4rem);
    line-height: .92; letter-spacing: .01em;
    color: var(--papel);
    margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
  }
  .cierre__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
  .cierre__pie {
    margin-top: 1.8rem; font-size: var(--paso--1);
    letter-spacing: .12em; text-transform: uppercase; color: var(--papel-3);
  }

  /* ── 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);
  }
  .pie__rejilla { display: grid; gap: 2.2rem; }
  .pie__marca img { width: 4.6rem; height: auto; margin-bottom: .9rem; }
  .pie__nombre { font-size: var(--paso-1); letter-spacing: .06em; color: var(--papel); }
  .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:hover { color: var(--guajillo); }
  .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);
  }
}

/* ═══════════════ EL CORTE ÚNICO · 56.25rem = 900px ═══════════════════════ */
@media (min-width: 56.25rem) {
  @layer secciones {
    .cinta__rejilla { grid-template-columns: repeat(4, 1fr); }

    .pan__rejilla { grid-template-columns: 1.05fr .95fr; }
    .pan__foto { margin-inline: 0; max-width: none; }

    .pieza { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
    .pieza:nth-child(even) .pieza__foto { order: 2; }

    /* con sitio de sobra, el índice cabe centrado en una o dos filas */
    .carta__indice ul {
      flex-wrap: wrap;
      justify-content: center;
      overflow-x: visible;
      mask-image: none;
    }

    /* la carta abierta: dos hojas a la vista, como un menú desplegado */
    .carta__carril { grid-auto-columns: 50%; }
    .tramo__nombre { font-size: var(--paso-2); }
    .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; }

    .voces__lista { grid-template-columns: repeat(3, 1fr); }

    .pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 2.5rem; }

    .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; }
  }
}