/* GENERADO por sellar.mjs — no editar. La fuente es css/marena.css */
/* ═══════════════════════════════════════════════════════════
   MARENA · Del Mar a la Brasa
   Tres familias, con oficios que no se cruzan:
     Italianno  — solo acentos grandes. Nunca para leer.
     Gambetta   — títulos; su itálica, todo lo que acompaña.
     Switzer    — cuerpo largo e interfaz.
   Paleta medida sobre el trazo de su logotipo.
   Un solo corte de maquetación: 56.25rem (900px).
   ═══════════════════════════════════════════════════════════ */

@layer base, componentes, utilidades;

@layer base {

  :root {
    --tinta:      #103A62;
    --noche:      #0B2038;
    --noche-alto: #142F4C;
    --papel:      #F6F1E8;
    --papel-alto: #EDE5D7;
    --brasa:      #E0A63F;
    --brasa-medida:#BA8931;
    --brasa-honda:#8A6220;
    --brasa-pie:  #7A5617;
    --piedra:     #5C584F;
    --sobre-oscuro:      #DCD8D0;
    --sobre-oscuro-tenue:#A9B2BD;

    --script:  'Italianno', 'Apple Chancery', cursive;
    --display: 'Gambetta', 'Iowan Old Style', Georgia, serif;
    --texto:   'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --t-xs:  0.75rem;
    --t-s:   0.875rem;
    --t-b:   1.0625rem;
    --t-m:   clamp(1.1875rem, 0.95rem + 0.9vw, 1.5rem);
    --t-l:   clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
    --t-xl:  clamp(2.375rem, 1.5rem + 3.6vw, 4.25rem);
    --t-2xl: clamp(2.75rem, 1.5rem + 5vw, 5.25rem);

    --paso:   clamp(3.5rem, 2rem + 6vw, 8rem);
    --margen: clamp(1.25rem, 0.6rem + 3vw, 5rem);
    --ancho:  76rem;

    --curva: cubic-bezier(.22,.61,.36,1);
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: var(--t-b);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.018em;
    text-wrap: balance;
    margin: 0;
  }
  h1 { font-size: var(--t-2xl); }
  h2 { font-size: var(--t-xl); }
  h3 { font-size: var(--t-m); letter-spacing: -0.01em; }
  h1 em, h2 em, h3 em { font-style: italic; color: var(--brasa-honda); }

  p { margin: 0 0 1em; text-wrap: pretty; hyphens: manual; }
  p:last-child { margin-bottom: 0; }

  a { color: inherit; }
  img, video, svg, iframe { display: block; max-width: 100%; }
  img, video { height: auto; }
  ul, ol, dl, dd { margin: 0; padding: 0; }
  li { list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  :focus-visible {
    outline: 2px solid var(--brasa);
    outline-offset: 3px;
    border-radius: 2px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brasa) 28%, transparent);
  }
  @media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }
}

@layer componentes {

  /* ── los tres oficios tipográficos ──────────────────────── */

  /* Italianno es finísima y de trazo largo: por debajo de 2rem deja
     de leerse. Vive solo en acentos, nunca dentro de un párrafo. */
  .caligrafia {
    font-family: var(--script);
    font-weight: 400;
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
    line-height: .84;
    letter-spacing: .012em;
    color: var(--brasa-honda);
  }
  .caligrafia--claro { color: var(--brasa); }

  .vo {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .toca { display: inline-block; padding-block: .62rem; min-height: 2.75rem; }

  .saltar {
    position: fixed; top: .5rem; left: .5rem; z-index: 100;
    padding: .7rem 1.1rem; background: var(--tinta); color: var(--papel);
    font-size: var(--t-s); text-decoration: none; border-radius: 3px;
    transform: translateY(-160%);
  }
  .saltar:focus-visible { transform: none; }

  .antetitulo {
    font-size: var(--t-xs);
    letter-spacing: 0.24em; text-transform: uppercase;
    font-weight: 500; color: var(--piedra); margin-bottom: 1rem;
  }

  .bajada {
    display: block; font-size: 0.6875rem; white-space: nowrap;
    letter-spacing: 0.34em; text-transform: uppercase;
    font-weight: 500; color: var(--brasa); margin-top: .34rem;
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.875rem; padding: 0 1.6rem;
    font-size: var(--t-s); font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    text-decoration: none; border-radius: 999px;
    transition: background-color .25s var(--curva), color .25s var(--curva),
                border-color .25s var(--curva);
  }
  .btn--brasa { background: var(--brasa); color: var(--noche); }
  .btn--brasa:hover { background: var(--tinta); color: var(--papel); }
  .btn--linea { border: 1px solid currentColor; color: var(--papel); }
  .btn--linea:hover { background: var(--papel); color: var(--tinta); }
  .btn--linea-claro { border: 1px solid color-mix(in srgb, var(--papel) 45%, transparent); color: var(--papel); }
  .btn--linea-claro:hover { background: var(--papel); color: var(--noche); }

  /* ═══════════════════════════════════════════════════════════
     EL CARDUMEN · nada por todas las zonas azules

     Tres capas anidadas, cada una con su periodo, todos primos entre sí:
       .pez        travesía horizontal, lineal
       .pez__onda  deriva vertical, ease-in-out alternate
       .pez__giro  cabeceo, ease-in-out alternate

     Tres ciclos con periodos primos no vuelven a coincidir en fase en toda
     la vida de la página: el recorrido no se repite y no hay bucle que
     reconocer. Con una sola capa el nado se lee como un vaivén de metrónomo.

     Reglas que no se pueden romper:
     · va SIEMPRE detrás del contenido (z-index 0 contra 1)
     · `pointer-events: none`: no intercepta un solo clic
     · el dibujo NO se recorta — el viewBox lleva 90 u. de aire por lado para
       que el pez rotado quepa en su caja. Un `overflow: clip` aquí es
       justo lo que lo cortaba a media agua.
     · el recorte lo hace el cardumen, y solo en los laterales
     ═══════════════════════════════════════════════════════════ */
  .cardumen {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: clip;
  }
  .pez {
    position: absolute; top: 0; left: 0;
    width: var(--w, 4rem);
    color: var(--brasa); opacity: var(--op, .26);
    translate: -20vw var(--y, 40%);
    animation: travesia var(--t, 29s) linear var(--d, 0s) infinite;
    will-change: transform;
  }
  .pez__onda {
    display: block;
    animation: ondear var(--o, 6.7s) ease-in-out var(--d2, 0s) infinite alternate;
  }
  /* El cabeceo va DENTRO del SVG, sobre el <use>, no sobre el elemento.
     Rotar el <svg> agranda su caja envolvente, el span se queda del tamaño
     original y el resultado son decenas de falsos desbordes en la medición.
     Rotando dentro del viewBox —que lleva 90 u. de aire por lado— el dibujo
     gira entero y la caja no se mueve ni un píxel. */
  .pez__giro { display: block; }
  .pez__giro use {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: cabecear var(--g, 4.3s) ease-in-out var(--d3, 0s) infinite alternate;
  }
  .pez--vuelve { scale: -1 1; }

  @keyframes travesia {
    from { translate: -20vw var(--y, 40%); }
    to   { translate: 120vw var(--y, 40%); }
  }
  @keyframes ondear {
    from { translate: 0 calc(var(--amp, 2rem) * -1); }
    to   { translate: 0 var(--amp, 2rem); }
  }
  @keyframes cabecear {
    from { rotate: calc(var(--gir, 8deg) * -1); }
    to   { rotate: var(--gir, 8deg); }
  }

  /* un pez quieto es un adorno muerto: mejor que no exista */
  @media (prefers-reduced-motion: reduce) { .cardumen { display: none; } }

  /* ═══ BARRA ═══ */
  .barra {
    position: sticky; top: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 1rem;
    padding: .7rem var(--margen);
    background: color-mix(in srgb, var(--noche) 93%, transparent);
    backdrop-filter: blur(14px);
    color: var(--papel);
  }
  .barra__nav { display: none; gap: clamp(1rem, 2vw, 2rem); }
  .barra__nav a {
    font-family: var(--display); font-style: italic;
    font-size: 1.0625rem; letter-spacing: .01em;
    text-decoration: none; position: relative;
    padding-block: .78rem; display: inline-block;
  }
  .barra__nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px;
    background: var(--brasa);
    transform: scaleX(0); transform-origin: right;
    transition: transform .38s var(--curva);
  }
  .barra__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

  .barra__marca { grid-column: 2; justify-self: center; text-decoration: none; text-align: center; }
  .barra__marca img { width: clamp(7.5rem, 15vw, 10rem); color: var(--papel); }
  .barra__cta { grid-column: 3; justify-self: end; display: none; }

  .barra__menu {
    grid-column: 3; justify-self: end;
    width: 2.75rem; height: 2.75rem;
    display: grid; align-content: center; justify-items: end; gap: 5px;
  }
  .barra__menu span { display: block; height: 1px; background: var(--papel); transition: width .3s var(--curva); }
  .barra__menu span:nth-child(1) { width: 22px; }
  .barra__menu span:nth-child(2) { width: 14px; }
  .barra__menu[aria-expanded="true"] span:nth-child(2) { width: 22px; }

  .menu-movil {
    position: sticky; top: 0; z-index: 55;
    display: grid; gap: .25rem;
    padding: 1rem var(--margen) 1.6rem;
    background: var(--noche); color: var(--papel);
  }
  .menu-movil a {
    text-decoration: none; padding: .85rem 0; min-height: 2.75rem;
    display: flex; align-items: center;
    font-family: var(--display); font-style: italic; font-size: var(--t-m);
    border-bottom: 1px solid color-mix(in srgb, var(--papel) 14%, transparent);
  }
  .menu-movil a:last-child { border-bottom: 0; }
  .menu-movil[hidden] { display: none; }

  /* ═══ 1 · HÉROE ═══ */
  .heroe {
    position: relative; overflow: clip;
    background: var(--noche); color: var(--papel);
    display: grid;
  }
  .heroe__foto { margin: 0; position: relative; z-index: 1; }
  .heroe__foto img {
    width: 100%; height: 100%; object-fit: cover; object-position: 52% 46%;
    aspect-ratio: 1 / 1;
  }
  .heroe__foto::after {
    content: ''; position: absolute; inset: auto 0 -1px 0; height: 30%;
    background: linear-gradient(to top, var(--noche) 4%, rgb(11 32 56 / 0) 100%);
  }
  .heroe__texto {
    position: relative; z-index: 2;
    padding: clamp(2rem, 6vw, 3.5rem) var(--margen) calc(var(--paso) * .8);
    align-self: center;
  }
  .heroe__texto .antetitulo { color: var(--brasa); }
  .heroe h1 { max-width: 14ch; }
  .heroe h1 em { color: var(--brasa); }
  .heroe__pie {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-m); line-height: 1.5;
    margin-top: 1.5rem; max-width: 34ch; color: var(--sobre-oscuro);
  }
  .heroe__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }

  .ola { width: 100%; }
  .ola path { fill: none; stroke: var(--brasa); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .ola--heroe { width: clamp(10rem, 22vw, 16rem); height: 1.2rem; margin: 0 0 1.6rem; }
  .ola--heroe path {
    stroke-dasharray: 460; stroke-dashoffset: 460;
    animation: trazar 1.9s var(--curva) .3s forwards;
  }
  @keyframes trazar { to { stroke-dashoffset: 0; } }

  /* ═══ 2 · MANIFIESTO ═══ */
  .manifiesto {
    max-width: 50rem; margin-inline: auto;
    padding: var(--paso) var(--margen); text-align: center;
  }
  .manifiesto .caligrafia { display: block; margin-bottom: .3rem; }
  .manifiesto__frase {
    font-family: var(--display); font-size: var(--t-l);
    line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 1.6rem;
  }
  .manifiesto__frase em { font-style: italic; color: var(--brasa-honda); }
  .manifiesto__cuerpo {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-m); line-height: 1.55;
    color: var(--piedra); max-width: 46ch; margin-inline: auto;
  }

  /* ═══ 3 · ORIGEN ═══ */
  .origen {
    position: relative; overflow: clip;
    background: var(--noche); color: var(--papel);
    padding: var(--paso) var(--margen);
  }
  .origen__caja {
    position: relative; z-index: 1;
    display: grid; gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center; max-width: var(--ancho); margin-inline: auto;
  }
  /* Los dos vídeos comparten proporción y fila: nada de un alto distinto cada
     uno, que es lo que hacía que el bloque se viera mal montado. */
  .origen__media { display: grid; gap: clamp(.6rem, 1.4vw, 1rem); align-items: stretch; align-self: center; }
  .origen__media video {
    width: 100%; height: 100%;
    aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 2px; background: var(--noche-alto);
  }
  .origen__texto h2 em { color: var(--brasa); }
  .origen__texto > p {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-m); line-height: 1.55;
    color: var(--sobre-oscuro); margin-top: 1.4rem;
  }

  .pilares { display: grid; gap: 1px; margin-top: 2.6rem; background: color-mix(in srgb, var(--papel) 16%, transparent); }
  .pilares li { display: grid; gap: .3rem; padding: 1.15rem 0; background: var(--noche); }
  .pilares li:first-child { padding-top: 0; }
  .pilares strong {
    font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
    font-weight: 600; color: var(--brasa);
  }
  .pilares span { font-size: var(--t-s); color: var(--sobre-oscuro-tenue); }

  /* ═══ cabecera de sección, centrada ═══ */
  .cabecera { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.4rem, 4vw, 3.6rem); }
  .cabecera .caligrafia { display: block; margin-bottom: .1rem; }
  .cabecera__filete { display: block; width: clamp(11rem, 22vw, 15rem); height: 1.25rem; margin: 1.5rem auto 0; }
  .cabecera__filete path { fill: none; stroke: var(--brasa-medida); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
  .cabecera__filete .rombo { fill: var(--brasa-medida); stroke: none; }
  .cabecera--claro { color: var(--papel); }
  .cabecera--claro h2 em { color: var(--brasa); }
  .cabecera--claro .cabecera__filete path { stroke: var(--brasa); }
  .cabecera--claro .cabecera__filete .rombo { fill: var(--brasa); }
  .cabecera__nota {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-m); color: var(--piedra); margin-top: 1.1rem;
  }
  .cabecera--claro .cabecera__nota { color: var(--sobre-oscuro-tenue); }

  /* ═══ 4 · LA CARTA ═══ */
  .carta {
    max-width: var(--ancho); margin-inline: auto;
    padding: var(--paso) var(--margen) calc(var(--paso) * .62);
  }
  .pestanas__tira {
    display: flex; justify-content: center; gap: clamp(1rem, 3vw, 2.6rem);
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
    min-width: 0;
  }
  .pestanas__tira::-webkit-scrollbar { display: none; }
  .pestanas__tira button {
    flex: 0 0 auto; padding: .9rem .15rem 1rem;
    font-family: var(--display); font-style: italic; font-size: var(--t-m);
    color: color-mix(in srgb, var(--tinta) 46%, var(--papel));
    position: relative; transition: color .3s var(--curva);
  }
  .pestanas__tira button::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--brasa-medida); transform: scaleX(0); transform-origin: left;
    transition: transform .38s var(--curva);
  }
  .pestanas__tira button[aria-selected="true"] { color: var(--tinta); font-style: normal; }
  .pestanas__tira button[aria-selected="true"]::after { transform: scaleX(1); }
  .pestanas__tira button:hover { color: var(--tinta); }

  .panel { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .panel[hidden] { display: none; }

  .platos { display: grid; counter-reset: plato; }
  .platos li {
    counter-increment: plato;
    display: grid; grid-template-columns: 1.9rem 1fr; column-gap: .9rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  }
  .platos li:first-child { padding-top: 0; }
  .platos li::before {
    content: counter(plato, upper-roman);
    grid-row: 1 / 3;
    font-family: var(--display); font-size: var(--t-s);
    color: var(--brasa-medida); padding-top: .42rem;
  }
  .platos b {
    font-family: var(--display); font-size: var(--t-m); font-weight: 500;
    letter-spacing: -0.01em;
  }
  .platos span {
    font-family: var(--display); font-style: italic;
    font-size: 1rem; line-height: 1.45; color: var(--piedra);
  }
  .platos .marca {
    display: inline-block; margin-left: .5rem; vertical-align: .16em;
    font-family: var(--texto); font-style: normal;
    font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 600; color: var(--brasa-honda);
    border: 1px solid color-mix(in srgb, var(--brasa-honda) 45%, transparent);
    border-radius: 999px; padding: .12rem .5rem;
  }

  .panel__foto { margin: 0; overflow: clip; border-radius: 2px; }
  .panel__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
  .panel__foto figcaption {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-s); color: var(--piedra); margin-top: .8rem; text-align: center;
  }

  .carta__nota {
    display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
    align-items: baseline; justify-content: space-between;
    margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem;
    border-top: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
    font-size: var(--t-s); color: var(--piedra);
  }
  .carta__nota b { color: var(--tinta); font-weight: 600; }
  .carta__nota a { color: var(--tinta); font-weight: 600; text-decoration-color: var(--brasa-medida); text-underline-offset: .3em; }

  /* ═══ 5 · DE TEMPORADA ═══ */
  .temporada { background: var(--papel-alto); padding: calc(var(--paso) * .8) var(--margen); }
  .temporada__caja {
    max-width: var(--ancho); margin-inline: auto;
    display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
  }
  .temporada img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
  .temporada .caligrafia { display: block; }
  .temporada p {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-m); line-height: 1.55; color: var(--piedra); margin-top: 1rem;
  }

  /* ═══ 6 · COCTELERÍA ═══ */
  .barra-autor {
    position: relative; overflow: clip;
    background: var(--tinta); color: var(--papel);
    padding: var(--paso) 0 calc(var(--paso) * .7);
  }
  .barra-autor > .cabecera, .barra-autor > .tragos { position: relative; z-index: 1; }
  .barra-autor > .cabecera { padding-inline: var(--margen); }

  .tragos {
    display: grid; gap: clamp(1rem, 2.2vw, 1.8rem);
    padding-inline: var(--margen);
    max-width: var(--ancho); margin-inline: auto;
  }
  .trago {
    position: relative; overflow: clip; border-radius: 2px;
    background: var(--noche); display: grid;
  }
  .trago video, .trago img {
    grid-area: 1 / 1;
    width: 100%; aspect-ratio: 36 / 79; object-fit: cover;
  }
  .trago__texto {
    grid-area: 1 / 1; align-self: end; z-index: 1;
    padding: clamp(1.4rem, 2.6vw, 2rem);
    background: linear-gradient(to top, rgb(11 32 56 / .94) 26%, rgb(11 32 56 / 0));
  }
  .trago__n { font-family: var(--display); font-size: var(--t-s); color: var(--brasa); display: block; margin-bottom: .5rem; }
  .trago h3 { color: var(--papel); }
  .trago__receta {
    font-family: var(--display); font-style: italic;
    font-size: 1rem; line-height: 1.45; color: var(--sobre-oscuro); margin-top: .5rem;
  }

  /* ═══ 7 · EL LUGAR ═══ */
  .lugar { padding: var(--paso) 0 calc(var(--paso) * .7); }
  .lugar > .cabecera { padding-inline: var(--margen); }

  .carril {
    display: flex; gap: clamp(.75rem, 1.6vw, 1.2rem);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .25rem var(--margen) 1.4rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--tinta) 30%, transparent) transparent;
    min-width: 0;
  }
  .carril > figure { margin: 0; scroll-snap-align: center; flex: 0 0 min(34rem, 86vw); }
  .carril img { width: 100%; aspect-ratio: 27 / 20; object-fit: cover; border-radius: 2px; }
  .carril figcaption {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-s); color: var(--piedra); margin-top: .7rem;
  }
  .pista {
    display: flex; align-items: center; gap: .7rem; justify-content: center;
    font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
    color: var(--piedra);
  }
  .pista svg { width: 1.4rem; color: var(--brasa-medida); }

  .letrero {
    display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
    max-width: var(--ancho); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding-inline: var(--margen);
  }
  .letrero__marco { position: relative; overflow: clip; border-radius: 2px; }

  .letrero img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    display: block;
  }
  /* un filete de brasa que recorre el borde del marco */
  .letrero__marco::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
    background: linear-gradient(to right, var(--brasa), transparent 72%);
  }
  .letrero .caligrafia { display: block; }
  .letrero p {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-m); line-height: 1.55; color: var(--piedra);
    margin-top: 1rem; max-width: 40ch;
  }
  .signos { display: grid; gap: 1px; margin-top: 2.4rem; background: color-mix(in srgb, var(--tinta) 14%, transparent); }
  .signos li {
    display: grid; grid-template-columns: 2.6rem 1fr; align-items: center;
    gap: 1rem; padding: 1.1rem 0; background: var(--papel);
  }
  /* Los tres signos tienen viewBox de proporciones muy distintas (16:1 la ola,
     1.6:1 el pez). Con una caja común y `meet` cada uno se centra dentro sin
     deformarse; sin ella la ola se queda en una rayita de 3 px. */
  .signos svg {
    width: 2.6rem; height: 1.7rem;
    color: var(--brasa-honda);
  }
  .signos svg use { transform-box: fill-box; }
  .signos b {
    font-family: var(--display); font-size: 1.0625rem; font-weight: 500;
    display: block;
  }
  .signos span { font-size: var(--t-s); color: var(--piedra); }

  /* ═══ 8 · OPINIONES ═══ */
  .opiniones {
    position: relative; overflow: clip;
    background: var(--noche); color: var(--papel);
    padding: var(--paso) 0;
  }
  .opiniones > * { position: relative; z-index: 1; }
  /* el cardumen conserva su posicionamiento: con `relative` se quedaba en
     altura 0 y los peces se apilaban en el borde superior */
  .opiniones > .cardumen { position: absolute; z-index: 0; }
  .opiniones > .cabecera, .opiniones > .marcador, .opiniones > .temas { padding-inline: var(--margen); }

  .marcador {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: center; gap: .4rem 1.3rem;
    max-width: var(--ancho); margin: 0 auto clamp(2rem, 3.5vw, 3rem);
  }
  .marcador__nota { font-family: var(--display); font-size: clamp(3rem, 7vw, 4.5rem); line-height: .85; color: var(--brasa); }
  .marcador__estrellas { color: var(--brasa); letter-spacing: .18em; font-size: var(--t-m); }
  .marcador__de { font-family: var(--display); font-style: italic; font-size: var(--t-m); color: var(--sobre-oscuro); }

  .resenas {
    display: flex; gap: clamp(.9rem, 2vw, 1.5rem);
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* con snap-align:start el navegador pega la primera tarjeta al borde del
       scrollport y se come el padding; scroll-padding se lo devuelve */
    scroll-padding-inline: var(--margen);
    padding: .25rem var(--margen) 1.4rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--papel) 30%, transparent) transparent;
    min-width: 0;
  }
  .resena {
    margin: 0; scroll-snap-align: start; flex: 0 0 min(23rem, 82vw);
    display: grid; align-content: start; gap: .9rem;
    padding: clamp(1.6rem, 3vw, 2.2rem);
    border: 1px solid color-mix(in srgb, var(--papel) 20%, transparent);
    border-radius: 2px;
  }
  .resena__estrellas { color: var(--brasa); letter-spacing: .16em; font-size: .9rem; }
  .resena blockquote {
    margin: 0; font-family: var(--display); font-style: italic;
    font-size: 1.0625rem; line-height: 1.55; color: var(--papel);
    hanging-punctuation: first;
  }
  .resena figcaption {
    font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
    font-weight: 600; color: var(--brasa);
  }
  .resena figcaption span {
    display: block; letter-spacing: .1em; font-weight: 400; text-transform: none;
    color: var(--sobre-oscuro-tenue); margin-top: .3rem;
  }

  .temas { max-width: var(--ancho); margin: clamp(1.4rem, 3vw, 2.4rem) auto 0; text-align: center; }
  .temas__titulo {
    font-family: var(--display); font-style: italic;
    font-size: var(--t-m); color: var(--sobre-oscuro); margin-bottom: 1.1rem;
  }
  .temas ul { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
  .temas li {
    display: inline-flex; align-items: baseline; gap: .45rem;
    padding: .42rem .95rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--papel) 22%, transparent);
    font-size: var(--t-s); color: var(--sobre-oscuro);
  }
  .temas li b { color: var(--brasa); font-weight: 600; font-size: var(--t-xs); }

  /* ═══ 9 · CÓMO LLEGAR ═══ */
  .llegar { background: var(--papel-alto); padding: var(--paso) var(--margen); }
  .llegar__caja {
    max-width: var(--ancho); margin-inline: auto;
    display: grid; gap: clamp(2.4rem, 5vw, 4rem); align-items: center;
  }
  .ficha { display: grid; gap: 1px; background: color-mix(in srgb, var(--tinta) 15%, transparent); margin-bottom: 2.4rem; }
  .ficha > div { display: grid; gap: .25rem; padding: 1.05rem 0; background: var(--papel-alto); }
  .ficha > div:first-child { padding-top: 0; }
  .ficha dt {
    font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
    font-weight: 600; color: var(--brasa-pie);
  }
  .ficha dd { font-family: var(--display); font-style: italic; font-size: var(--t-m); color: var(--tinta); }
  .ficha dd a { text-decoration-color: var(--brasa-medida); text-underline-offset: .3em; }
  .muestra {
    display: inline-block; margin-left: .5rem; vertical-align: .12em;
    font-family: var(--texto); font-style: normal;
    font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
    color: var(--noche); background: var(--brasa);
    padding: .12rem .5rem; border-radius: 2px; font-weight: 600;
  }
  .llegar__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
  .llegar__acciones .btn--linea-claro { border-color: color-mix(in srgb, var(--tinta) 35%, transparent); color: var(--tinta); }
  .llegar__acciones .btn--linea-claro:hover { background: var(--tinta); color: var(--papel); }

  /* el mapa deja de ser un widget prestado: marco, viñeta y chapa propia */
  .mapa {
    position: relative; border-radius: 2px; overflow: clip;
    background: var(--noche-alto);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent);
  }
  .mapa iframe {
    width: 100%; height: clamp(20rem, 46vw, 30rem); border: 0;
    filter: saturate(.45) contrast(1.05) sepia(.15) hue-rotate(-6deg) brightness(1.02);
  }
  .mapa::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 5rem rgb(16 58 98 / .24);
  }
  .mapa__chapa {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.15rem .75rem .9rem;
    background: var(--noche); color: var(--papel);
    border-radius: 2px; text-decoration: none;
    box-shadow: 0 .5rem 1.5rem rgb(11 32 56 / .32);
    transition: background-color .25s var(--curva);
  }
  .mapa__chapa:hover { background: var(--tinta); }
  .mapa__chapa svg { width: 1.7rem; color: var(--brasa); flex: none; }
  .mapa__chapa b { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; display: block; }
  .mapa__chapa span { font-size: var(--t-xs); color: var(--sobre-oscuro-tenue); }

  /* ═══ redes ═══ */
  .redes { display: flex; flex-wrap: wrap; gap: .6rem; }
  .redes a {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 2.75rem; padding: 0 1.1rem 0 .9rem;
    border-radius: 999px; text-decoration: none;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    font-size: var(--t-s); font-weight: 500; letter-spacing: .02em;
    transition: background-color .25s var(--curva), color .25s var(--curva),
                border-color .25s var(--curva);
  }
  .redes a svg { width: 1.15rem; height: 1.15rem; flex: none; }
  .redes a:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

  /* ═══ PIE ═══ */
  .pie {
    background: var(--papel-alto); color: var(--tinta);
    display: grid; gap: clamp(2.2rem, 4vw, 3rem);
    padding: var(--paso) var(--margen) clamp(2rem, 4vw, 3rem);
  }
  .pie__logo { width: clamp(11rem, 26vw, 15rem); color: var(--tinta); }
  .bajada--pie { margin-top: .6rem; font-size: .75rem; letter-spacing: .28em; color: var(--brasa-pie); }
  .pie__lema { margin-top: 1.2rem; }
  .pie h3 {
    font-family: var(--texto); font-size: var(--t-xs);
    letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
    color: var(--piedra); margin-bottom: 1rem;
  }
  .pie__nav { display: grid; gap: .1rem; align-content: start; }
  .pie__nav a {
    text-decoration: none; font-family: var(--display); font-style: italic;
    font-size: 1.0625rem; width: fit-content; min-width: 2.75rem;
    padding-block: .56rem;              /* la zona táctil llega a 44px */
    display: inline-block;
  }
  .pie__nav a:hover { text-decoration: underline; text-decoration-color: var(--brasa-medida); text-underline-offset: .3em; }
  .pie__contacto p { font-size: var(--t-s); margin-bottom: .8rem; }
  .pie__contacto .redes { margin-top: 1.1rem; }
  .pie__legal {
    font-size: var(--t-xs); color: var(--piedra);
    padding-top: 1.6rem;
    border-top: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  }

  /* ═══════════ ESCRITORIO · un solo corte ═══════════ */
  @media (min-width: 56.25rem) {
    .barra { padding-block: .9rem; }
    .barra__nav { display: flex; }
    .barra__cta { display: inline-flex; }
    .barra__menu { display: none; }
    .menu-movil { display: none !important; }

    .heroe { grid-template-columns: 6fr 5fr; align-items: stretch; min-height: min(86svh, 48rem); }
    .heroe__texto { order: -1; padding-right: clamp(2rem, 4vw, 5rem); }
    .heroe__foto img { aspect-ratio: auto; height: 100%; }
    .heroe__foto::after {
      inset: 0 auto 0 -1px; width: 22%; height: auto;
      background: linear-gradient(to right, var(--noche) 4%, rgb(11 32 56 / 0) 100%);
    }

    .origen__caja { grid-template-columns: 5fr 6fr; }
    .origen__media { grid-template-columns: 1fr 1fr; }

    .panel { grid-template-columns: 7fr 5fr; }
    .temporada__caja { grid-template-columns: 5fr 6fr; }
    .tragos { grid-template-columns: repeat(3, 1fr); }
    .letrero { grid-template-columns: 5fr 6fr; align-items: center; }
    .llegar__caja { grid-template-columns: 5fr 6fr; }
    .pie { grid-template-columns: 5fr 3fr 4fr; align-items: start; }
    .pie__legal { grid-column: 1 / -1; }
  }

  /* ═══ revelados ligados al scroll ═══
     El rango va SIEMPRE de `entry` a `entry`: es monótono y está
     definido para cualquier alto de bloque. La guarda de alto evita
     que en una ventana anormalmente alta —impresión, captura de
     página completa— nada llegue a «entrar» y el texto se quede en
     su fotograma inicial, o sea invisible. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-height: 26rem) and (max-height: 84rem) {

      /* 1 · lo que emerge desde abajo */
      .manifiesto__frase, .cabecera, .resena, .temas li, .marcador, .carta__nota {
        animation: emerger linear both;
        animation-timeline: view();
        animation-range: entry 6% entry 68%;
      }
      @keyframes emerger {
        from { opacity: 0; translate: 0 1.4rem; }
        to   { opacity: 1; translate: 0 0; }
      }

      /* 2 · las listas entran por el lado, una a una.
         Cada <li> tiene su propio view(): el escalonado sale del propio
         desplazamiento, sin delays que se descoordinen. */
      .platos li, .pilares li, .ficha > div {
        animation: entrar-lado linear both;
        animation-timeline: view();
        animation-range: entry 2% entry 58%;
      }
      @keyframes entrar-lado {
        from { opacity: 0; translate: -1.5rem 0; }
        to   { opacity: 1; translate: 0 0; }
      }

      /* 3 · las fotos se descubren en vez de aparecer */
      .panel__foto img, .letrero img, .temporada img, .trago {
        animation: descubrir linear both;
        animation-timeline: view();
        animation-range: entry 4% entry 74%;
      }
      @keyframes descubrir {
        from { opacity: 0; clip-path: inset(14% 0 0 0); scale: 1.05; }
        to   { opacity: 1; clip-path: inset(0 0 0 0);   scale: 1; }
      }

      /* 4 · deriva: las fotos del carril se mueven durante TODO el recorrido,
         no solo al entrar. Aquí `cover` sí es el rango correcto —solo desplaza,
         nunca oculta— así que un bloque alto no puede dejar nada invisible. */
      .carril figure, .llegar__caja .mapa {
        animation: deriva linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      @keyframes deriva {
        from { translate: 0 1.1rem; }
        to   { translate: 0 -1.1rem; }
      }

      /* 5 · los titulares se destapan por una máscara que sube */
      .cabecera h2, .heroe h1, .origen__texto h2, .letrero h2, .temporada h2 {
        animation: destapar linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 62%;
      }
      @keyframes destapar {
        from { clip-path: inset(0 0 105% 0); translate: 0 .5rem; }
        to   { clip-path: inset(0 0 -12% 0); translate: 0 0; }
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ola--heroe path { animation: none; stroke-dashoffset: 0; }
    * { transition-duration: .01ms !important; }
  }
}