/* ============================================================
   BARRA FINNI · NEWSITE
   Octubre de 2026. El esqueleto es el de Norte (cuatro destinos,
   barra con tinta que se invierte, carrete, entradas, menú móvil);
   la piel sale de las láminas del brand book que trajo Zamer:

   1. Papel offwhite de fondo y losas menta de respiro. El oscuro
      no es fondo de página: sólo la obra y el pie.
   2. Títulos en Pulpo, versalitas, y cuando son una sola palabra
      se parten como en la lámina ("ORIG / EN"). Los subtítulos en
      Pulpo itálica, con la diagonal punteada que los acompaña.
   3. Cuerpo en ABC ROM.
   4. Las fotos van con su marco de película: un filete negro
      grueso, como el borde del negativo escaneado. A veces
      montadas sobre su propio eco, ampliado y desenfocado.
   Los hexes salen de ../../tokens.md y sólo viven en :root.
   ============================================================ */

@font-face {
  font-family: "ABC ROM";
  src: url("../fonts/ABCROM-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pulpo";
  src: url("../fonts/Pulpo-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pulpo";
  src: url("../fonts/Pulpo-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Print Script Slab";
  src: url("../fonts/PrintScriptSlab-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* los cinco institucionales */
  --offwhite: #f4f2e7;
  --black: #323232;
  --plaza: #6a9171;
  --menta: #d0dacb;
  --alma: #e36d6d;

  /* derivados de tokens.md */
  --paper: #faf9f1;
  --night: #262626;
  --plaza-ink: #506e56;
  --menta-line: #b9c6b2;
  --alma-ink: #b84a4a;
  --ink-soft: #5c5c54;
  /* el verde de la barra: el swatch que mandó Zamer el 9/10/2026,
     #4d936b tal cual. Con offwhite encima da 3.28:1: la navegación en
     versalitas chicas no llega a AA (pide 4.5). Se dejó así por la
     tarjeta de presentación del brand book (p. 32), que usa justo eso:
     versalitas chicas offwhite sobre verde. Ver README. */
  --plaza-bar: #4d936b;
  /* el borde del negativo en las láminas: negro con un punto de oliva */
  --film: #23241f;

  /* LAS VOCES
       Título     → Pulpo Light, versalitas.
       Subtítulo  → Pulpo Light Italic, versalitas, a veces subrayado.
       Cuerpo     → ABC ROM.
       Firma      → Print Script Slab: sólo el botón de llamada,
                    que es su papel en la papelería. */
  --font-title: "Pulpo", Georgia, serif;
  --font-body: "ABC ROM", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Print Script Slab", "Snell Roundhand", cursive;

  /* LA ESCALERA, medida en el brand book v1 (láminas de 1920pt):
     cuerpo 18, títulos 43, subtítulos 29, titular de la p. 4 48.
     Título contra cuerpo da 2.4 a 1, y esa proporción es lo que se
     respeta aquí. El cuerpo sube a 15px porque 13.5 (lo que daría la
     lámina a 1440) no se lee en pantalla. */
  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-md: 0.875rem;
  --t-base: 0.9375rem;
  --t-lg: 1.125rem;

  --title-xl: clamp(1.9rem, 2.6vw, 2.5rem);
  --title-lg: clamp(1.7rem, 2.6vw, 2.5rem);
  --title-md: clamp(1.1rem, 1.5vw, 1.4rem);

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  /* el filete del negativo en las láminas mide 2 a 3px */
  --frame: 3px;
  --bar-h: clamp(58px, 4.6vw, 66px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--black);
  background: var(--offwhite);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--menta); color: var(--night); }
button { font-family: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.9rem 1.4rem;
  background: var(--night);
  color: var(--offwhite);
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: var(--gutter); top: var(--gutter); }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   LAS VOCES
   ============================================================ */

/* El título de página. Una sola palabra, partida a mano en el
   HTML como en la lámina; el lector de pantalla oye la palabra
   entera por el .oculto que va al lado. */
.title {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: var(--title-xl);
  line-height: 1.24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plaza);
}
.title--md { font-size: var(--title-lg); }

/* El titular que es oración: sin partir palabras */
.headline {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: var(--title-lg);
  line-height: 1.26;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* El subtítulo en itálica: lo que en la lámina acompaña a la
   diagonal y lo que va subrayado arriba de cada pilar */
.sub {
  font-family: var(--font-title);
  font-weight: 300;
  font-style: italic;
  font-size: var(--title-md);
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sub--rule {
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  letter-spacing: 0.07em;
}

/* rótulo chico: lugar, crédito, utilería */
.label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.copy p + p { margin-top: 1.05em; }
.copy { max-width: 31em; }

/* ============================================================
   EL MARCO DE PELÍCULA
   La foto vive dentro de su negativo. El filete es el mismo en
   toda la página y escala con la pantalla para no volverse
   grueso en el teléfono.
   ============================================================ */
.film {
  background: var(--film);
  padding: var(--frame);
  line-height: 0;
}
.film img { width: 100%; height: 100%; object-fit: cover; }

/* La foto montada sobre su eco: la misma toma, ampliada, lavada y
   desenfocada, sangrando hacia la orilla. En la lámina del origen
   es así como una foto chica gana el peso de una grande. */
.echo { position: relative; isolation: isolate; }
.echo-bg {
  position: absolute;
  z-index: -1;
  inset: 6% calc(-1 * var(--gutter)) -6% 22%;
  overflow: hidden;
}
.echo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(0.7) brightness(1.08);
  transform: scale(1.15);
  opacity: 0.72;
}

/* ============================================================
   LA DIAGONAL PUNTEADA
   Puntos redondos, uno cada 28px, a 40 grados. Es SVG en línea
   con sus propios puntos: un border dotted da cuadritos.
   ============================================================ */
.dots {
  display: block;
  width: clamp(130px, 17vw, 260px);
  height: auto;
  color: var(--black);
  overflow: visible;
}

/* ============================================================
   BARRA
   El wordmark abre por la izquierda y todo lo tocable cierra por
   la derecha. Desde el 9/10 la barra es verde fijo (--plaza-bar)
   con tinta offwhite en todas las páginas: ya no se invierte con
   la losa de abajo. Al hacer scroll sólo se encoge.
   ============================================================ */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  min-height: var(--bar-h);
  padding: 0 var(--gutter);
  color: var(--offwhite);
  background: var(--plaza-bar);
  border-bottom: 1px solid color-mix(in srgb, var(--night) 18%, transparent);
  transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease, min-height 320ms ease;
}
.bar.is-stuck { min-height: calc(var(--bar-h) * 0.88); }
/* En el home la barra espera: el wordmark del hero hace de cabecera y la
   barra baja hasta que hay scroll (js/site.js pone .is-hidden; sin JS se
   ve siempre). */
.bar[data-late] { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), min-height 320ms ease; }
.bar[data-late].is-hidden { transform: translateY(-101%); }
/* sin barra arriba, la primera losa del home no le reserva lugar */
.bar[data-late] ~ main .slab--first { padding-top: clamp(2.5rem, 6vw, 5rem); }

/* El wordmark entregado ya trae su sombra oscura bajo letra
   crema: funciona igual sobre papel que sobre noche, así que no
   hay segundo archivo ni filtro. */
.bar .logo { flex: 0 0 auto; line-height: 0; }
.bar .logo img {
  width: clamp(118px, 9.5vw, 148px);
  transition: width 320ms ease;
}
.bar.is-stuck .logo img { width: clamp(110px, 8.5vw, 132px); }

.bar nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  /* la voz de "RESTAURANTE y BAR" en la tarjeta: sans en versalitas
     chicas con mucho tracking */
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bar nav a {
  white-space: nowrap;
  text-decoration: none;
  padding: 0.5rem 0 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.bar nav a:hover,
.bar nav a[aria-current="page"] { border-bottom-color: currentColor; }
.bar nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* Reservar: el único botón de la barra. Relleno offwhite con tinta
   noche (13.48:1), para que se lea como acción y no como destino. */
.bar nav .nav-cta {
  padding: 0.55rem 1rem 0.5rem;
  background: var(--offwhite);
  color: var(--night);
  border: 0;
  transition: background-color 200ms ease;
}
.bar nav .nav-cta:hover { background: var(--menta); }
.bar nav .nav-ext .ext { font-size: 0.9em; }

/* ---------- hamburguesa (sólo móvil) ---------- */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 70;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: currentColor;
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: background-color 220ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms ease;
}
.nav-toggle .bars { top: 50%; margin-left: -12px; }
.nav-toggle .bars::before,
.nav-toggle .bars::after { content: ""; left: 0; }
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }
.nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bar.is-open .nav-toggle { color: var(--black); }
.bar.is-open .nav-toggle .bars { background: transparent; }
.bar.is-open .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
.bar.is-open .nav-toggle .bars::after { top: 0; transform: rotate(-45deg); }

/* con Ubicación y Reservar, la fila pide ~1050px: abajo de 1100 entra
   el menú de hoja completa */
@media (max-width: 1100px) {
  .bar[data-nav] .nav-toggle { display: block; }

  /* El panel es una hoja menta a pantalla completa: los destinos
     en Pulpo grande, como el índice de una carta. */
  .bar[data-nav] nav {
    position: fixed;
    inset: 0;
    z-index: 65;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.6rem, 2.4vh, 1.2rem);
    padding: max(6rem, 14vh) var(--gutter) 3rem;
    background: var(--menta);
    color: var(--black);
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    letter-spacing: 0.06em;
    line-height: 1.2;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 380ms ease, visibility 380ms;
  }
  .bar[data-nav].is-open nav { opacity: 1; visibility: visible; }
  .bar[data-nav] nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    white-space: normal;
  }
  .bar[data-nav] nav a[aria-current="page"] { color: var(--plaza-ink); border-bottom-color: transparent; }
  .bar[data-nav] nav .nav-ext { font-size: 0.75em; }
  .bar[data-nav] nav .nav-cta {
    margin-top: 1rem;
    padding: 0.7rem 1.4rem 0.6rem;
    background: var(--alma);
    color: var(--night);
    font-family: var(--font-script);
    font-size: 0.9em;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 3px 3px 0 var(--black);
  }
  .bar.is-open .logo { position: relative; z-index: 70; }
}

/* ============================================================
   LOSAS
   ============================================================ */
.slab {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter);
}
.slab--menta { background: var(--menta); }
.slab--paper { background: var(--offwhite); }
.slab--night { background: var(--black); color: var(--offwhite); }
/* coral de marca con tinta noche: 4.81:1, la única tinta que tokens.md
   permite sobre alma. La usan las puertas del home. */
.slab--alma { background: var(--alma); color: var(--night); }
.slab--alma .door .label,
.slab--alma .door-dots { color: var(--night); }
.slab--alma .doors { margin-top: 0; }
.slab-inner { max-width: 1240px; margin: 0 auto; }

/* la primera losa de cada página deja libre la altura de la barra */
.slab--first { padding-top: calc(var(--bar-h) + clamp(2.5rem, 6vw, 5rem)); }
/* la losa que sigue a la portada en el mismo papel: sin el aire
   completo arriba, que dos paddings juntos abrían un hueco */
.slab--follow { padding-top: clamp(1rem, 3vw, 2.5rem); }

/* ============================================================
   INICIO
   ============================================================ */

/* 01 · Portada. La lámina 4 del brand book: el titular en itálica
   verde arriba a la izquierda, la diagonal punteada que baja de él
   hacia la foto, y la foto montada sobre su eco. */
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--gutter);
  min-height: min(calc(100svh - var(--bar-h) - 10rem), 560px);
}
.hero-text { grid-column: 1 / span 5; position: relative; z-index: 2; }
/* el wordmark encabeza el home mientras la barra está escondida */
.hero-logo { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); line-height: 0; }
.hero-logo img { width: clamp(220px, 26vw, 360px); }
.hero-text .headline { color: var(--plaza-ink); font-style: italic; }
.hero-text .label { margin-top: 1.4rem; color: var(--ink-soft); }
.hero-dots { color: var(--plaza); width: clamp(110px, 13vw, 200px); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0 46%; }
.hero-dots .dots { width: 100%; color: inherit; }
.hero-photo { grid-column: 6 / -1; }
.hero-photo .film { width: min(100%, 720px); margin-left: auto; margin-right: clamp(0px, 4vw, 4rem); }
.hero-photo .echo-bg { inset: -10% calc(-1 * var(--gutter)) -10% 34%; }

/* 02 · La cocina en una línea. Dos tomas a los lados y la frase
   al centro, como la lámina de la propuesta. */
.trio {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
}
.trio .film { aspect-ratio: 4 / 5; }
.trio-line {
  text-align: center;
  font-family: var(--font-title);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.5;
  text-wrap: balance;
}
.trio-line .label { font-family: var(--font-body); font-style: normal; color: var(--plaza-ink); margin-bottom: 1.4rem; }
.trio .film:last-child { margin-top: clamp(3rem, 8vw, 6rem); }
.trio .film:first-child { margin-bottom: clamp(3rem, 8vw, 6rem); }

/* Las tres puertas del sitio desde la portada. Cada una repite en
   chico la lámina 4: el nombre en itálica, la diagonal punteada que
   baja y la foto enmarcada al final de la diagonal. Las tres bajan un
   escalón cada una, así que el bloque entero también se lee en
   diagonal. Al pasar el cursor los puntos se encienden en orden,
   del nombre hacia la foto. */
.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(4rem, 8vw, 7rem);
}
.door {
  display: block;
  color: inherit;
  text-decoration: none;
}
.door:nth-child(2) { margin-top: clamp(3rem, 7vw, 6rem); }
.door:nth-child(3) { margin-top: clamp(6rem, 14vw, 12rem); }
.door .sub { display: block; font-size: var(--title-md); }
.door .label { margin-top: 0.5rem; color: var(--plaza-ink); }
.door .label::after { content: " →"; letter-spacing: 0; transition: margin 220ms ease; }
.door-dots {
  display: block;
  width: 52%;
  height: auto;
  margin: 1.1rem 0 0 6%;
  color: var(--plaza);
  overflow: visible;
}
.door-dots circle {
  opacity: 0.45;
  transition: opacity 260ms ease;
  transition-delay: calc(var(--i) * 28ms);
}
.door .film {
  display: block;
  width: 62%;
  margin: -0.4rem 0 0 auto;
  aspect-ratio: 4 / 5;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.door:hover .sub { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.door:hover .label::after { margin-left: 0.4em; }
.door:hover .door-dots circle { opacity: 1; }
.door:hover .film { transform: translate(5px, -5px); }
.door:focus-visible { outline: 2px solid var(--plaza-ink); outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) {
  .door-dots circle, .door .film { transition: none; }
}

/* ============================================================
   NOSOTROS
   ============================================================ */

/* 01 · Origen: título partido arriba, dos columnas de texto que
   bajan escalonadas y la foto a la derecha sobre su eco */
.origin {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2.5rem, 5vw, 4.5rem);
}
.origin .title { grid-column: 1 / span 6; }
.origin-copy {
  grid-column: 1 / span 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.origin-copy p:last-child { margin-top: clamp(2.5rem, 6vw, 5rem); }
.origin-photo { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; }
.origin-photo .film { width: 76%; }
.origin-photo .echo-bg { inset: 8% calc(-1 * var(--gutter)) -8% 30%; }

/* 02 · La casa: la frase larga del producto, centrada entre la
   foto y su pie */
.house {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.house .film { grid-column: 2 / span 4; aspect-ratio: 4 / 5; }
.house-copy {
  grid-column: 7 / span 5;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: var(--t-lg);
  line-height: 1.55;
  max-width: 26em;
}
.house-copy .label { font-family: var(--font-body); color: var(--plaza-ink); margin-bottom: 1.6rem; }

/* 03 · Las personas: la diagonal punteada arriba a la izquierda,
   la foto de la cocina a la derecha y abajo los dos oficios con
   su encabezado subrayado, como los pilares de la lámina */
.people {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(3rem, 6vw, 5rem);
}
.people-mark { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 1.6rem; }
.people-mark .dots { margin-left: clamp(0.5rem, 3vw, 2.5rem); }
.people-photo { grid-column: 6 / -1; }
.people-photo .film { aspect-ratio: 3 / 2; }
.trade { grid-column: span 5; }
.trade:first-of-type { grid-column: 2 / span 5; }
.trade + .trade { grid-column: 8 / span 5; }
.trade .sub { margin-bottom: 1.1rem; }
/* retratos de estudio 2:3 (3/11/2026) */
.trade .film { width: min(80%, 320px); aspect-ratio: 2 / 3; margin-bottom: 1.6rem; }

/* ============================================================
   BOLSA DE TRABAJO
   ============================================================ */
.jobs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 3rem;
  align-items: start;
}
.jobs-photo { grid-column: 1 / span 4; position: sticky; top: calc(var(--bar-h) + 1rem); }
.jobs-photo .film { aspect-ratio: 4 / 5; }
.jobs-copy { grid-column: 6 / span 6; }
.jobs-copy .label { color: var(--plaza-ink); margin-bottom: 1.4rem; }
.jobs-copy .headline { color: var(--plaza-ink); margin-bottom: 1.6rem; }
.jobs-copy .lede {
  font-family: var(--font-title);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.45;
  margin-bottom: 1.4rem;
  max-width: 26em;
}
.jobs-actions { margin-top: clamp(2.2rem, 4vw, 3rem); }
.jobs-tail {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--menta-line);
  font-size: var(--t-md);
  color: var(--ink-soft);
  max-width: 34em;
}

/* El botón de llamada. Alma de fondo con tinta noche (4.81:1,
   la única combinación que tokens.md permite sobre alma) y la
   firma en manuscrita, que es su papel en la papelería. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  min-height: 44px;
  padding: 0.5rem 1.3rem 0.6rem;
  background: var(--alma);
  color: var(--night);
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--black); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }
.btn:focus-visible { outline: 2px solid var(--black); outline-offset: 5px; }

/* Lo que todavía no existe se ve como pendiente, no como dato */
.pending {
  background: color-mix(in srgb, var(--alma) 22%, transparent);
  color: var(--alma-ink);
  padding: 0 0.3em;
  font-style: italic;
}

/* ============================================================
   DETRÁS DE LA BARRA
   Losa menta desde el 3/11/2026 (antes noche, ajuste de Alex Flores).
   Sobre menta: título en plaza-ink (3.93:1, sólo en tamaño grande),
   texto en negro (8.9:1) y créditos en ink-soft (4.68:1).
   ============================================================ */
.bts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2.5rem, 5vw, 4.5rem);
}
.bts .title { grid-column: 1 / -1; color: var(--plaza-ink); }
.bts-copy { grid-column: 1 / span 5; }
.bts-copy + .bts-copy { grid-column: 7 / span 5; }
.bts-copy p { color: var(--black); }

.bts-stage { grid-column: 1 / -1; }
.bts-stage .film { background: var(--film); }
.reel {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--film);
}
.reel .shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}
.reel .shot.is-active { opacity: 1; }
.reel .shot img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .reel .shot { transition: none; } }

.reel-ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}
.reel-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel-nav { display: flex; align-items: center; gap: 0.6rem; }
.nav-btn {
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--black) 45%, transparent);
  background: none;
  color: var(--black);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.nav-btn:hover { background: var(--black); color: var(--menta); }
.nav-btn:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.ticks { display: flex; gap: 6px; }
.tick {
  width: 22px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--black) 30%, transparent);
  transition: background-color 200ms ease, transform 200ms ease;
}
.tick.is-active::before { background: var(--black); transform: scale(1.35); }
.tick:focus-visible { outline: 2px solid var(--black); outline-offset: -8px; }

.bts-credit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--black) 25%, transparent);
}
.bts-credit-work {
  grid-column: 1 / span 7;
  font-family: var(--font-title);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-lg);
  max-width: 24em;
  line-height: 1.25;
  color: var(--black);
}
.bts-credit-meta { grid-column: 9 / span 4; font-size: var(--t-md); color: var(--ink-soft); }
.bts-credit-meta p + p { margin-top: 0.8em; }

/* ============================================================
   LA MESA
   Cierre de todas las páginas. Cuatro fotos sueltas sobre menta,
   de tamaños distintos y encimadas como en la mesa: la ancha sobre
   su eco desenfocado (la lámina del origen), la diagonal punteada
   cruzando entre ellas (la de los pilares). Todo va en porcentajes
   de un lienzo con proporción fija, así que la composición escala
   entera. Al hacer scroll cada foto se mueve a su propia velocidad
   (js/site.js, data-speed): es lo que la vuelve mesa y no retícula.
   ============================================================ */
.mesa-wrap {
  background: var(--menta);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  overflow: hidden;
}
/* en Detrás de la barra la losa de arriba ya es menta: la mesa va en
   papel para que no se junten dos mentas */
.mesa-wrap--paper { background: var(--offwhite); }
.mesa {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  aspect-ratio: 2.15 / 1;
}
.mesa > * { position: absolute; margin: 0; will-change: transform; }

.mesa-alta    { left: 0;   top: 6%;  width: 20%; aspect-ratio: 4 / 5;  z-index: 3; }
.mesa-ancha   { left: 19%; top: 20%; width: 44%; aspect-ratio: 3 / 2;  z-index: 2; }
.mesa-angosta { left: 67%; top: 0;   width: 12%; aspect-ratio: 9 / 16; z-index: 2; }
.mesa-media   { left: 75%; top: 30%; width: 24%; aspect-ratio: 4 / 5;  z-index: 3; }

.mesa-echo {
  left: 28%; top: 4%; width: 44%; height: 90%;
  z-index: 1;
  overflow: hidden;
}
.mesa-echo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) saturate(0.7) brightness(1.08);
  transform: scale(1.18);
  opacity: 0.6;
}
/* la diagonal sale de abajo del rótulo y apunta a la esquina de la
   foto ancha; encima del eco desenfocado se perdía */
.mesa-dots { left: 3%; top: 74%; width: 14%; z-index: 4; color: var(--plaza-ink); }
.mesa-dots svg { display: block; width: 100%; height: auto; overflow: visible; }
.mesa-label { left: 0; top: 64%; width: 16%; color: var(--plaza-ink); z-index: 3; }

@media (max-width: 860px) {
  .mesa { aspect-ratio: 5 / 7; }
  .mesa-angosta { left: 4%;  top: 1%;  width: 24%; }
  .mesa-alta    { left: 52%; top: 0;   width: 44%; }
  .mesa-ancha   { left: 0;   top: 30%; width: 80%; }
  .mesa-echo    { left: 28%; top: 24%; width: 72%; height: 40%; }
  .mesa-media   { left: 50%; top: 59%; width: 46%; }
  .mesa-dots    { left: 6%;  top: 70%; width: 34%; }
  .mesa-label   { left: 4%;  top: 93%; width: 44%; }
}

/* ============================================================
   RESERVA
   El bloque antes del pie, en todas las páginas (3/11/2026). En el
   home también es el bloque de ubicación y lleva el mapa: texto a la
   izquierda, mapa enmarcado a la derecha. El mapa va un poco lavado
   para que no le gane a las fotos.
   ============================================================ */
.reserva {
  background: var(--offwhite);
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  border-top: 1px solid var(--menta-line);
}
.reserva-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 2.5rem;
  align-items: center;
}
.reserva-copy { grid-column: 1 / -1; text-align: center; }
.reserva--mapa .reserva-copy { grid-column: 1 / span 5; text-align: left; }
.reserva .sub { color: var(--plaza-ink); }
.reserva .label { margin-top: 0.7rem; color: var(--ink-soft); }
.reserva-address { margin-top: 0.5rem; font-size: var(--t-md); color: var(--black); }
.reserva-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.8rem;
  margin-top: 1.8rem;
}
.reserva--mapa .reserva-actions { justify-content: flex-start; }
.reserva-map {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--plaza-ink);
  border-bottom: 1px solid currentColor;
  padding: 0.5rem 0 0.25rem;
}
.reserva-map:hover { color: var(--black); }
.reserva-map:focus-visible { outline: 2px solid var(--plaza-ink); outline-offset: 4px; }
.reserva-frame { grid-column: 7 / -1; aspect-ratio: 4 / 3; margin: 0; }
.reserva-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.55) sepia(0.12);
}

/* ============================================================
   PIE
   Noche, con el sello completo de la papelería: el triángulo del
   wordmark con su leyenda. Es la única vez que aparece.
   ============================================================ */
.site-foot {
  background: var(--night);
  color: var(--offwhite);
  padding: clamp(3.5rem, 6vw, 5.5rem) var(--gutter) 2rem;
}
.foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 3rem;
}
.foot-seal { grid-column: 1 / span 5; }
.foot-seal img { width: min(100%, 340px); }
.foot-cols {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-content: end;
}
.foot-col .label { color: var(--menta); margin-bottom: 0.8rem; }
.foot-col p { font-size: var(--t-md); }
.foot-col a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--offwhite) 35%, transparent); }
.foot-col a:hover { border-bottom-color: currentColor; }
.foot-col a:focus-visible { outline: 2px solid var(--menta); outline-offset: 4px; }
.foot-legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--offwhite) 22%, transparent);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--offwhite) 72%, transparent);
}
.ext { font-size: 0.85em; }

/* ============================================================
   ENTRADAS
   Un solo gesto: lo que entra sube un dedo y se enciende. La
   portada además entra escalonada al cargar.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-step="2"] { transition-delay: 120ms; }
.reveal[data-step="3"] { transition-delay: 240ms; }
.reveal[data-step="4"] { transition-delay: 360ms; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px) {
  .origin .title,
  .origin-copy { grid-column: 1 / span 7; }
  .origin-copy { grid-template-columns: 1fr; }
  .origin-copy p:last-child { margin-top: 0; }
  .origin-photo { grid-column: 9 / -1; }
  .origin-photo .film { width: 100%; }
}

@media (max-width: 860px) {
  .origin,
  .house,
  .people,
  .jobs,
  .bts,
  .bts-credit,
  .foot-inner { grid-template-columns: minmax(0, 1fr); }

  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 2.6rem; }
  .hero-text,
  .hero-photo { grid-column: 1 / -1; grid-row: auto; }
  .hero-photo .film { margin-right: 0; }
  .hero-photo .echo-bg { inset: -8% calc(-1 * var(--gutter)) -8% 30%; }
  .origin .title,
  .origin-copy,
  .origin-photo,
  .house .film,
  .house-copy,
  .people-mark,
  .people-photo,
  .trade,
  .trade:first-of-type,
  .trade + .trade,
  .jobs-photo,
  .jobs-copy,
  .bts-copy,
  .bts-copy + .bts-copy,
  .bts-credit-work,
  .bts-credit-meta,
  .foot-seal,
  .foot-cols { grid-column: 1 / -1; grid-row: auto; }


  .trio { grid-template-columns: 1fr 1fr; }
  .trio-line { grid-column: 1 / -1; grid-row: 1; padding: 0 0.5rem 1rem; }
  .trio .film:first-child,
  .trio .film:last-child { margin: 0; }
  .trio .film:last-child { margin-top: 2.5rem; }

  /* en el teléfono la escalera se vuelve vertical: cada puerta
     baja a la derecha y la siguiente vuelve a empezar a la izquierda */
  .doors { grid-template-columns: 1fr; row-gap: 3.5rem; }
  .door:nth-child(n) { margin-top: 0; }
  .door .film { width: 58%; }
  .door-dots { width: 46%; }

  .origin-photo .film { width: 86%; }
  .house { row-gap: 2.4rem; }
  .house .film { width: 86%; }
  .people-photo .film { aspect-ratio: auto; }

  .jobs-photo { position: static; width: 86%; }

  .bts-credit { row-gap: 1.6rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .reserva--mapa .reserva-copy,
  .reserva-frame { grid-column: 1 / -1; }
  .foot-seal img { width: min(80%, 300px); }
}

@media (max-width: 520px) {
  .foot-cols { grid-template-columns: 1fr; }
  .btn { font-size: 1.3rem; }
  /* nueve puntos más dos flechas no caben en 358px: en el teléfono
     manda el contador, que ya dice dónde vas */
  .ticks { display: none; }
}