/* ============================================================
   main.css — Revire · dirección SALA OSCURA
   Requiere tokens.css cargado antes.
   ============================================================ */

/* ── utilidades ───────────────────────────────────────── */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--acento); color: var(--negro);
  padding: 0.75rem 1.25rem; font-family: var(--f-ui); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.saltar:focus { left: 0; }

/* Botones — hairline, nunca sombra.
   El relleno entra desde abajo en hover; el rótulo se desplaza apenas. */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 2rem;
  font-family: var(--f-ui); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  text-decoration: none; border-radius: var(--radio);
  border: 1px solid transparent;
  transition: color var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%);
  transition: transform var(--dur-media) var(--ease-suave);
}
.btn > * { position: relative; }

.btn--acento { background: var(--acento); color: var(--negro); border-color: var(--acento); }
.btn--acento::before { background: var(--texto); }
.btn--acento:hover { color: var(--negro); }
.btn--acento:hover::before { transform: translateY(0); }

.btn--linea { border-color: var(--linea-fuerte); color: var(--texto); }
.btn--linea::before { background: var(--acento); }
.btn--linea:hover { color: var(--negro); border-color: var(--acento); }
.btn--linea:hover::before { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn--acento:hover { background: var(--acento-claro); }
  .btn--linea:hover { color: var(--acento); }
}

.enlace {
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--acento); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity var(--dur-rapida) var(--ease-suave);
}
.enlace:hover { opacity: 0.65; }

/* ── SIGNATURE MOVE · revelado con máscara vertical ──────
   La imagen se descubre de abajo hacia arriba en 900ms y
   además se desescala apenas: el gesto de "levantar el telón". */
.mask { overflow: hidden; }
.mask > img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.12);
  transition: clip-path var(--dur-lenta) var(--ease-suave),
              transform 1400ms var(--ease-suave);
  width: 100%; height: 100%; object-fit: cover;
}
.mask.visible > img { clip-path: inset(0 0 0 0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .mask > img { clip-path: none; transform: none; }
}

/* ══ NAV ══════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--s-borde);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-media) var(--ease-suave),
              padding var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave);
}
.nav.compacta {
  background: oklch(16% 0.006 17 / 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
  padding-block: 0.85rem;
}
.nav__marca img {
  width: clamp(112px, 11vw, 150px); height: auto;
  transition: width var(--dur-media) var(--ease-suave);
}
.nav.compacta .nav__marca img { width: clamp(96px, 9vw, 120px); }

.nav__links { display: flex; gap: 2.2rem; }
.nav__links a {
  font-family: var(--f-ui); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  text-decoration: none; color: var(--texto-suave);
  position: relative; padding-block: 0.4rem;
  transition: color var(--dur-rapida) var(--ease-suave);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-media) var(--ease-suave);
}
.nav__links a:hover { color: var(--texto); }
.nav__links a:hover::after,
.nav__links a.activo::after { transform: scaleX(1); }
.nav__links a.activo { color: var(--acento); }

.nav__acciones { display: flex; align-items: center; gap: 1.25rem; }

.idiomas { display: flex; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.idiomas button {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--texto-tenue);
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400;
  letter-spacing: 0.08em; padding: 0.45rem 0.7rem;
  transition: color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave);
}
.idiomas button:hover { color: var(--texto); }
.idiomas button.activo { color: var(--acento); background: oklch(93% 0.012 62 / 0.07); }

/* Área táctil de los idiomas en mobile: el sitio es para turistas y el
   switch ES/EN/PT es un control primario. 26px → 40px sin agrandar el texto. */
@media (max-width: 1080px) {
  .idiomas button { min-height: 40px; display: inline-flex; align-items: center; padding-block: 0; }
}

/* El color va fuera de la media query: si no, arriba de 1080px
   el botón hereda el negro del user-agent. */
.nav__burger { display: none; color: var(--texto); background: transparent; }
.nav__burger span { background: var(--texto); }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__reservar { display: none; }
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 40px; padding: 0;
    appearance: none; background: transparent; border: 1px solid var(--linea);
    color: var(--texto); cursor: pointer;
  }
  .nav__burger span {
    display: block; width: 20px; height: 1px; margin-inline: auto;
    background: var(--texto);
    transition: transform var(--dur-media) var(--ease-suave),
                opacity var(--dur-rapida) var(--ease-suave);
  }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

  .nav__links.abierto {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset: 0; z-index: -1;
    padding: 7rem var(--s-borde) 3rem;
    background: oklch(16% 0.006 17 / 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .nav__links.abierto a {
    font-family: var(--f-display); font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 400; letter-spacing: var(--tr-titulo); text-transform: uppercase;
    color: var(--texto); padding-block: 1.1rem;
    border-bottom: 1px solid var(--linea);
  }
  .nav__links.abierto a::after { display: none; }
}

/* ══ HERO ═════════════════════════════════════════════ */
.hero {
  position: relative;
  isolation: isolate;          /* el hero es su propio contexto de apilado */
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 var(--s-borde) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Doble velo: uno vertical que asienta el pie, otro horizontal que oscurece
   la columna del texto. Así la parrilla sigue siendo visible a la derecha. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      oklch(16% 0.006 17 / 0.88) 0%,
      oklch(16% 0.006 17 / 0.52) 26%,
      oklch(16% 0.006 17 / 0.14) 55%,
      oklch(16% 0.006 17 / 0.42) 100%),
    linear-gradient(to right,
      oklch(16% 0.006 17 / 0.74) 0%,
      oklch(16% 0.006 17 / 0.44) 42%,
      oklch(16% 0.006 17 / 0) 78%);
}
.hero__contenido { max-width: 62rem; position: relative; z-index: 2; }
.hero__titulo { margin: 1.4rem 0 1.6rem; max-width: 15ch; }
.hero__bajada { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--texto-suave); max-width: 48ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }

/* ── Sello diferenciador: "la primera parrilla digital" ──
   Chip con un punto de fuego (el naranja que ata la web con la app): el
   diferencial es que Revire es digital — reservás y pedís take away desde la
   app. Rectángulo con hairline (sin sombras, coherente con Sala Oscura). */
.sello {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(100%, 30rem);
  margin-bottom: 1.6rem;
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border: 1px solid var(--linea-fuerte);
  background: color-mix(in oklab, var(--negro) 52%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-decoration: none;
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave);
}
.sello:hover { border-color: var(--fuego); background: color-mix(in oklab, var(--negro) 66%, transparent); }
.sello__punto {
  width: 9px; height: 9px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--fuego);
  animation: selloLatido 2.6s var(--ease-suave) infinite;
}
@keyframes selloLatido {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--fuego) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--fuego) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--fuego) 0%, transparent); }
}
.sello__txt { display: flex; flex-direction: column; gap: 0.12rem; line-height: 1.12; min-width: 0; }
.sello__claim {
  font-family: var(--f-ui);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texto);
}
.sello__sub {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--texto-suave);
}
@media (prefers-reduced-motion: reduce) { .sello__punto { animation: none; } }

.hero__scroll {
  position: absolute; z-index: 2;
  right: var(--s-borde); bottom: clamp(3.5rem, 7vw, 6rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-decoration: none;
}
.hero__scroll .etiqueta { writing-mode: vertical-rl; letter-spacing: var(--tr-label); }
.hero__scroll-linea {
  width: 1px; height: 4.5rem; background: var(--linea-fuerte); position: relative; overflow: hidden;
}
.hero__scroll-linea::after {
  content: ""; position: absolute; inset: 0; background: var(--acento);
  animation: bajar 2.4s var(--ease-suave) infinite;
}
@keyframes bajar {
  0%   { transform: translateY(-100%); }
  60%,
  100% { transform: translateY(100%); }
}
@media (max-width: 720px) { .hero__scroll { display: none; } }

/* ══ 01 · LA CASA — asimetría 7/5 + superposición ═════ */
.casa__grid { align-items: start; row-gap: 4rem; }
.casa__texto  { grid-column: 1 / span 6; }
.casa__figura { grid-column: 8 / span 5; margin: 0; position: relative; }

.casa__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; }
.casa__texto p:not(.etiqueta) { color: var(--texto-suave); }

/* Efecto "pixel-image": las 2 fotos de La casa se materializan en bloques
   (reveal por celdas, no el clip vertical del resto del sitio). El .pixel es
   el marco; las celdas las genera main.js y respetan object-fit: cover. */
.pixel { overflow: hidden; }
.pixel > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casa__figura > .pixel:not(.casa__placa) { aspect-ratio: 4 / 5; position: relative; }
.pixel__capa { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pixel__cel {
  position: absolute; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.06);
  transition: opacity var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave);
  will-change: opacity, transform;
}
.pixel__capa.revelar .pixel__cel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pixel__cel { opacity: 1; transform: none; } }

/* superposición deliberada: la placa se sale del bloque y monta sobre el texto */
.casa__placa {
  position: absolute;
  left: -38%; bottom: -3.5rem;
  width: 62%; aspect-ratio: 3 / 2;
  border: 1px solid var(--linea);
}

.casa__rep { margin-top: clamp(6rem, 11vw, 10rem); }
.rep {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; border-top: 1px solid var(--linea);
}
.rep > div {
  padding: 2.2rem 1.5rem 2.2rem 0;
  border-bottom: 1px solid var(--linea);
}
.rep > div + div { border-left: 1px solid var(--linea); padding-left: 1.5rem; }
.rep dt {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.5rem, 4.5vw, 3.75rem); line-height: 1;
  letter-spacing: var(--tr-display); color: var(--acento);
}
.rep dd {
  margin: 0.9rem 0 0;
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-tenue); line-height: 1.5;
}
.casa__reppie { margin-top: 1.5rem; display: block; }

@media (max-width: 900px) {
  .casa__texto, .casa__figura { grid-column: 1 / -1; }
  .casa__figura { margin-top: 1rem; }
  .casa__placa { left: auto; right: -1rem; bottom: -2rem; width: 48%; }
  .rep { grid-template-columns: repeat(2, 1fr); }
  .rep > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rep > div:nth-child(even) { border-left: 1px solid var(--linea); padding-left: 1.5rem; }
}

/* ══ 02 · LA CARNE — full bleed + pasos ═══════════════ */
.carne { background: var(--fondo-alt); }

.carne__mural { margin: 0; position: relative; }
.carne__mural .pixel { aspect-ratio: 16 / 7; position: relative; }
.carne__mural::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    oklch(16% 0.006 17 / 0.55) 0%,
    oklch(16% 0.006 17 / 0.10) 40%,
    oklch(16% 0.006 17 / 0.85) 100%);
}
.carne__mural figcaption {
  position: absolute; left: var(--s-borde); bottom: 1.5rem; z-index: 1;
}
@media (max-width: 720px) { .carne__mural .pixel { aspect-ratio: 3 / 2; } }

.carne__intro { max-width: 46rem; margin-bottom: clamp(4rem, 8vw, 7rem); }
/* asimetría: el título se corre del margen del grid */
.carne__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; margin-left: -0.04em; }
.carne__bajada { color: var(--texto-suave); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.paso {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--s-borde);
  align-items: center;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--linea);
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso__num {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem); line-height: 0.8;
  letter-spacing: var(--tr-display);
  color: var(--acento); opacity: 0.72;
}
.paso__cuerpo h3 { font-size: var(--t-h3); margin-bottom: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--f-mono); font-weight: 500; color: var(--acento); }
.paso__cuerpo p { color: var(--texto-suave); margin: 0; }
.paso__img { aspect-ratio: 3 / 2; }

@media (max-width: 860px) {
  .paso { grid-template-columns: 4rem 1fr; gap: 1.5rem 1.75rem; }
  .paso__img { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* ══ 03 · LA CARTA ════════════════════════════════════
   La carta ya no vive en el sitio (los precios cambian seguido):
   deriva a la app, que es el menú digital siempre actualizado. */
.carta__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: clamp(2.5rem, 7vw, 6rem); align-items: center;
}
.carta__titulo { font-size: var(--t-h1); margin: 1.2rem 0 1.8rem; }
.carta__bajada { color: var(--texto-suave); max-width: 46ch; }
.carta__ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.1rem 1.75rem; margin-top: clamp(2rem, 4vw, 3rem);
}
.carta__nota { color: var(--texto-tenue); }
.carta__figura { position: relative; margin: 0; }
.carta__figura .mask { aspect-ratio: 4 / 5; }
.carta__figura img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
@media (max-width: 860px) {
  .carta__grid { grid-template-columns: 1fr; }
  .carta__figura .mask { aspect-ratio: 3 / 2; }
}

/* ══ 04 · PRE-TEATRO ══════════════════════════════════ */
.teatro { position: relative; isolation: isolate; overflow: hidden; }
.teatro__fondo { position: absolute; inset: 0; z-index: 0; }
.teatro__fondo img { width: 100%; height: 100%; object-fit: cover; }
.teatro::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,
    oklch(16% 0.006 17 / 0.97) 0%,
    oklch(16% 0.006 17 / 0.92) 45%,
    oklch(16% 0.006 17 / 0.78) 100%);
}
.teatro__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(3rem, 7vw, 6rem); align-items: start;
}
.teatro__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; }
.teatro__texto p:not(.etiqueta) { color: var(--texto-suave); }
.teatro__texto .btn { margin-top: 1.2rem; }

.teatro__lista ul { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--linea); }
.teatro__lista li {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: 1.05rem; border-bottom: 1px solid var(--linea);
}
.teatro__nombre { font-family: var(--f-display); font-size: 1.1875rem; letter-spacing: -0.01em; }
.teatro__dir { display: block; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--texto-tenue); margin-top: 0.25rem; text-transform: uppercase; }
.teatro__dist {
  margin-left: auto; white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.06em; color: var(--acento);
}
@media (max-width: 900px) { .teatro__grid { grid-template-columns: 1fr; } }

/* ══ 05 · LA SALA ═════════════════════════════════════ */
.sala { background: var(--fondo-alt); }
.sala__intro { padding-bottom: clamp(3rem, 6vw, 5rem); }
.sala__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; }
.sala__intro p:not(.etiqueta) { color: var(--texto-suave); }

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea);
  border-block: 1px solid var(--linea);
}
.galeria figure { margin: 0; position: relative; background: var(--fondo); overflow: hidden; }
.galeria .mask { width: 100%; height: 100%; }
.galeria .alto { grid-row: span 2; aspect-ratio: 3 / 4; }
.galeria .bajo { aspect-ratio: 3 / 2; }
.galeria figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top,
    oklch(16% 0.006 17 / 0.94) 0%,
    oklch(16% 0.006 17 / 0.90) 52%,
    oklch(16% 0.006 17 / 0) 100%);
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave);
}
.galeria figure:hover figcaption,
.galeria figure:focus-within figcaption { opacity: 1; transform: none; }
.galeria figure:hover .mask > img { transform: scale(1.04); }

@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .galeria { grid-template-columns: 1fr; }
  .galeria .alto { grid-row: auto; aspect-ratio: 4 / 3; }
  .galeria figcaption { opacity: 1; transform: none; }
}

/* ══ 06 · RESERVAR — la paleta se da vuelta ═══════════ */
.reservar { background: var(--fondo); color: var(--texto); }
.reservar__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(3rem, 6vw, 5rem); align-items: start;
}
.reservar__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; }
.reservar__texto p:not(.etiqueta) { color: var(--texto-suave); }
.reservar__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2.4rem 0 clamp(3rem, 6vw, 4.5rem); }

.datos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem var(--s-borde);
  border-top: 1px solid var(--linea); padding-top: 2.2rem;
}
.dato .etiqueta { display: block; margin-bottom: 0.9rem; }
.dato__valor { margin: 0 0 0.9rem; font-size: var(--t-small); line-height: 1.75; }
.dato__sec { color: var(--texto-tenue); }
.dato a.enlace { display: inline-block; }
.dato a.enlace + br { line-height: 2.4; }

.estado { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.estado__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-tenue); }
.estado.abierto .estado__punto { background: oklch(62% 0.16 145); }
.estado.abierto { color: var(--texto); }

.reservar__mapa { border: 1px solid var(--linea-fuerte); aspect-ratio: 3 / 4; }
.reservar__mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(0.92); }

@media (max-width: 900px) {
  .reservar__grid { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .reservar__mapa { aspect-ratio: 4 / 3; }
}

/* ══ PIE ══════════════════════════════════════════════ */
.pie { padding: clamp(4rem, 8vw, 6rem) var(--s-borde) 2rem; border-top: 1px solid var(--linea); }
.pie__grid {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 3rem var(--s-borde);
}
.pie__marca img { width: clamp(150px, 15vw, 190px); margin-bottom: 1.4rem; }
.pie__marca .etiqueta { text-transform: none; letter-spacing: 0.06em; }
.pie__col { display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }
.pie__col .etiqueta { margin-bottom: 0.4rem; }
.pie__col a {
  font-size: var(--t-small); text-decoration: none; color: var(--texto-suave);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.pie__col a:hover { color: var(--acento); }

.pie__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.75rem;
}
.pie__base a { text-decoration: none; transition: color var(--dur-rapida) var(--ease-suave); }
.pie__base a:hover { color: var(--acento); }

@media (max-width: 860px) { .pie__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pie__grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   BLOQUES NUEVOS — marquee, video, app, chatbot, redes
   ══════════════════════════════════════════════════════════ */

/* ── animación por palabras en titulares ─────────────── */
[data-anim-palabras] .pal { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-anim-palabras] .pal__i {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 780ms var(--ease-suave) calc(var(--p, 0) * 55ms);
}
[data-anim-palabras].visible .pal__i { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-anim-palabras] .pal__i { transform: none; }
}

/* ── marquee con las frases del manual ───────────────── */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--linea);
  background: var(--fondo-alt);
  padding-block: 1.1rem;
}
.marquee__pista {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: correr 46s linear infinite;
}
.marquee__pista span {
  font-family: var(--f-display); font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--texto-suave); white-space: nowrap;
}
.marquee__pista i { color: var(--acento); font-style: normal; font-size: 0.7em; }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__pista { animation: none; }
}

/* ── el hero acepta video encima de la foto ──────────── */
.hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  opacity: 0;
  transition: opacity 1200ms var(--ease-suave);
}
body.hero-video .hero__media video { opacity: 1; }
.hero__script { margin: 0.2rem 0 1.4rem; }

/* ── videos dentro de .mask ──────────────────────────── */
.mask > video {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.12);
  transition: clip-path var(--dur-lenta) var(--ease-suave),
              transform 1400ms var(--ease-suave);
  width: 100%; height: 100%; object-fit: cover;
}
.mask.visible > video { clip-path: inset(0 0 0 0); transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .mask > video { clip-path: none; transform: none; }
}

/* el paso de "La carne" ahora lleva video */
.paso__media { aspect-ratio: 3 / 2; }
@media (max-width: 860px) {
  .paso__media { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* ── el toro del manual, en La casa ──────────────────── */
.casa__toro {
  width: clamp(120px, 16vw, 190px); height: auto;
  margin-top: 2.5rem;
  opacity: 0.5;
}

/* ── galería: soporta video y marca cuáles lo son ────── */
.galeria .mask > video { width: 100%; height: 100%; object-fit: cover; }
.galeria figure:hover .mask > video { transform: scale(1.04); }
.gal__play {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento);
}
.gal__play::after {
  content: ""; position: absolute; inset: -6px;
  border: 1px solid var(--acento); border-radius: 50%;
  animation: latir 2.4s var(--ease-suave) infinite;
}
@keyframes latir {
  0%   { transform: scale(0.4); opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gal__play { animation: none; } }

/* ══ 06 · LA APP ══════════════════════════════════════ */
.app { background: var(--fondo-alt); overflow: hidden; }
.app__llama {
  position: absolute; top: 4%; right: 4%;
  width: clamp(90px, 12vw, 160px); height: auto;
  opacity: 0.16; pointer-events: none;
}
.app__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(3rem, 7vw, 6rem); align-items: center;
}
.app__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; }
.app__texto p:not(.etiqueta) { color: var(--texto-suave); }

.app__usos { display: grid; gap: 0; margin: 2.5rem 0; border-top: 1px solid var(--linea); }
.uso {
  display: grid; grid-template-columns: 3rem 1fr 2rem;
  gap: 1.25rem; align-items: center;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  transition: padding-inline var(--dur-media) var(--ease-suave);
}
.uso:hover { padding-inline: 0.75rem 0; }
.uso__num { font-size: 1.5rem; color: var(--acento); opacity: 0.65; line-height: 1; }
.uso__cuerpo { display: flex; flex-direction: column; gap: 0.3rem; }
.uso__t {
  font-family: var(--f-ui); font-weight: 400; font-size: 0.9375rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.uso__d { font-size: var(--t-small); color: var(--texto-tenue); line-height: 1.55; }
.uso__flecha {
  font-family: var(--f-mono); font-size: 1.25rem; color: var(--acento);
  justify-self: end;
  transition: transform var(--dur-media) var(--ease-suave);
}
.uso:hover .uso__flecha { transform: translateX(6px); }

.app__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.app__nota { text-transform: none; letter-spacing: 0.04em; }

/* teléfono con el video vertical */
.telefono {
  width: min(100%, 17rem); margin-inline: auto;
  aspect-ratio: 9 / 19;
  border: 1px solid var(--linea-fuerte);
  border-radius: 2rem;
  padding: 0.5rem;
  background: var(--fondo);
  position: relative;
}
.telefono::before {
  content: ""; position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%);
  width: 28%; height: 4px; border-radius: 4px; background: var(--linea-fuerte);
}
.telefono__pantalla {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 1.6rem; display: block;
}
@media (max-width: 900px) {
  .app__grid { grid-template-columns: 1fr; }
  .app__visual { order: -1; }
  .telefono { width: min(72%, 14rem); }
}

/* ══ REDES ════════════════════════════════════════════ */
.redes { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.red {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--linea);
  color: var(--texto-suave);
  transition: color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.red:hover { color: var(--acento); border-color: var(--acento); transform: translateY(-2px); }

/* ══ CHATBOT ══════════════════════════════════════════ */
.bot-abrir {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 120;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  appearance: none; cursor: pointer;
  background: var(--acento); color: var(--negro);
  border: 1px solid var(--acento);
  transition: transform var(--dur-media) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave);
}
.bot-abrir:hover { transform: translateY(-3px); }
.bot-abrir.activo { background: var(--texto); border-color: var(--texto); }
.bot-abrir svg { width: 24px; height: 24px; }

.bot {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + 68px);
  z-index: 120;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(30rem, calc(100vh - 8rem));
  display: flex; flex-direction: column;
  background: var(--fondo-alt);
  border: 1px solid var(--linea-fuerte);
  animation: botEntra var(--dur-media) var(--ease-suave);
}
@keyframes botEntra { from { opacity: 0; transform: translateY(12px); } }
.bot[hidden] { display: none; }

.bot__cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--linea);
}
.bot__titulo {
  font-family: var(--f-display); font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.02em; margin: 0;
}
.bot__sub { display: block; margin: 0.25rem 0 0; }
.bot__cerrar {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--texto-suave); padding: 0.25rem;
  transition: color var(--dur-rapida) var(--ease-suave);
}
.bot__cerrar:hover { color: var(--acento); }

.bot__hilo {
  flex: 1; overflow-y: auto;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.burbuja {
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  font-size: var(--t-small); line-height: 1.55;
  animation: burbujaEntra 320ms var(--ease-suave);
}
@keyframes burbujaEntra { from { opacity: 0; transform: translateY(6px); } }
.burbuja--bot { align-self: flex-start; background: var(--fondo); border: 1px solid var(--linea); }
.burbuja--yo  { align-self: flex-end; background: var(--acento); color: var(--negro); }
.burbuja-accion {
  align-self: flex-start;
  font-family: var(--f-ui); font-weight: 400; font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--acento); text-decoration: none;
  border: 1px solid var(--acento); padding: 0.6rem 1rem;
  transition: background var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}
.burbuja-accion:hover { background: var(--acento); color: var(--negro); }

.bot__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.25rem 0.9rem; }
.chip {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--linea);
  font-family: var(--f-mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  transition: color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave);
}
.chip:hover { color: var(--acento); border-color: var(--acento); }

.bot__form { display: flex; border-top: 1px solid var(--linea); }
.bot__form input {
  flex: 1; appearance: none; background: transparent; border: 0;
  color: var(--texto); font-family: var(--f-texto); font-size: var(--t-small);
  padding: 0.95rem 1.25rem;
}
.bot__form input::placeholder { color: var(--texto-tenue); }
.bot__form input:focus { outline: none; }
.bot__enviar {
  appearance: none; cursor: pointer; background: transparent; border: 0;
  color: var(--acento); padding: 0 1.1rem;
  transition: transform var(--dur-rapida) var(--ease-suave);
}
.bot__enviar:hover { transform: translateX(3px); }

@media (max-width: 560px) {
  .bot { right: 0.75rem; left: 0.75rem; width: auto; }
}

/* ══════════════════════════════════════════════════════════
   CORRECCIONES — van al final para ganar por orden de cascada
   ══════════════════════════════════════════════════════════ */

/* La versión libre de Hotel de Paris reemplaza los DÍGITOS por la
   leyenda "ONLY IN COMMERCIAL VERSION". Cualquier elemento .cifra
   tiene que quedarse con Saa Series D aunque una regla posterior
   le haya puesto la tipografía display. Va con !important a
   propósito: es una salvaguarda, no un ajuste de estilo. */
.cifra,
.cifra * { font-family: var(--f-mono) !important; }

/* El hero tiene que arrancar por debajo de la barra fija */
.hero { padding-top: clamp(7rem, 12vh, 10rem); }
.hero__titulo { max-width: 18ch; }

/* Ilustraciones del manual: son máscaras blancas, así que se
   pintan con el cobre de marca en vez de mostrarse en blanco. */
.casa__toro,
.app__llama {
  display: block;
  background: var(--acento);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.casa__toro {
  width: clamp(120px, 16vw, 190px); aspect-ratio: 1120 / 720;
  margin-top: 2.5rem; opacity: 0.75;
  -webkit-mask-image: url('../marca/toro.webp');
  mask-image: url('../marca/toro.webp');
}
.app__llama {
  position: absolute; top: 4%; right: 4%;
  width: clamp(90px, 12vw, 160px); aspect-ratio: 520 / 480;
  height: auto; opacity: 0.28; pointer-events: none;
  -webkit-mask-image: url('../marca/llama.webp');
  mask-image: url('../marca/llama.webp');
}

/* Saa Series D es angosta: las métricas necesitan más cuerpo */
.rep dt { font-size: clamp(2.75rem, 5vw, 4.25rem); letter-spacing: 0.01em; }

/* El punto medio no existe en Hotel de Paris; el marquee lo evita,
   pero por las dudas el separador usa la tipografía de texto. */
.marquee__pista i { font-family: var(--f-texto); }

/* ── Legibilidad sobre foto y video ────────────────────
   Medido con el comparador de glifos: el nav, el selector de
   idioma y la frase manuscrita caían por debajo de AA cuando
   atrás pasaba una zona clara del video. */

/* velo propio de la barra, siempre presente aunque no esté compacta */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    oklch(16% 0.006 17 / 0.82) 0%,
    oklch(16% 0.006 17 / 0.45) 60%,
    oklch(16% 0.006 17 / 0) 100%);
  transition: opacity var(--dur-media) var(--ease-suave);
}
.nav { isolation: isolate; }
.nav.compacta::before { opacity: 0; }

/* el hero se oscurece más donde va el texto */
.hero::before {
  background:
    linear-gradient(to top,
      oklch(16% 0.006 17 / 0.92) 0%,
      oklch(16% 0.006 17 / 0.72) 30%,
      oklch(16% 0.006 17 / 0.30) 62%,
      oklch(16% 0.006 17 / 0.55) 100%),
    linear-gradient(to right,
      oklch(16% 0.006 17 / 0.86) 0%,
      oklch(16% 0.006 17 / 0.62) 46%,
      oklch(16% 0.006 17 / 0.10) 82%);
}

/* la manuscrita en cobre necesita piso propio */
.hero__script { color: var(--acento-claro); }

/* epígrafes de galería: los videos son más claros que las fotos */
.galeria figcaption {
  background: linear-gradient(to top,
    oklch(16% 0.006 17 / 0.97) 0%,
    oklch(16% 0.006 17 / 0.93) 58%,
    oklch(16% 0.006 17 / 0) 100%);
}

/* El cobre de marca (#B07E56) rinde ~5.5:1 sobre el negro pleno,
   pero baja de 4.5:1 en textos chicos que caen sobre un velo más
   claro. En esos dos casos se usa la variante aclarada. */
.teatro__dist { color: var(--acento-claro); }
/* El idioma activo va en texto claro (14:1) y el cobre queda como
   subrayado: en cobre sobre el velo del hero quedaba en 4.45:1. */
.idiomas button.activo {
  color: var(--texto);
  background:
    linear-gradient(var(--acento), var(--acento)) bottom / 100% 2px no-repeat,
    linear-gradient(oklch(94% 0.008 59 / 0.10), oklch(94% 0.008 59 / 0.10));
}

/* El fondo del hero es video: el contraste cambia frame a frame.
   En vez de tapar con más velo (que anularía el video), se baja el
   brillo del propio medio, así CUALQUIER frame queda por encima
   del umbral. Medido con el comparador de glifos en 6 momentos. */
.hero__media img,
.hero__media video { filter: brightness(0.58) saturate(1.05); }

/* ══════════════════════════════════════════════════════════
   RITMO VERTICAL Y BORDÓ
   ══════════════════════════════════════════════════════════ */

/* Cada sección tenía 166px arriba Y abajo: al apilarse quedaban
   332px de vacío. Se baja a 128px (= 8rem, el piso de diseno.md)
   y los bloques que van pegados a un full-bleed pierden el
   padding de arriba, que ahí no hace falta. */
:root { --s-seccion: clamp(4rem, 10vw, 8rem); }

/* el cuerpo de "La carne" viene justo debajo del mural full-bleed */
.carne__cuerpo { padding-top: clamp(2.75rem, 5vw, 4.5rem); }
.carne__intro  { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* la fila de métricas no necesita tanto aire por encima */
.casa__rep { margin-top: clamp(3.5rem, 7vw, 6rem); }

/* la galería arranca apenas termina la bajada */
.sala__intro { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* el marquee separa lo suficiente: la sección siguiente no repite aire */
.marquee + .seccion { padding-top: clamp(3.5rem, 8vw, 6.5rem); }


/* ══════════════════════════════════════════════════════════
   NARANJA FUEGO — sólo detalles
   Es el acento de la app de reservas (`--flame: #F26419`).
   Se usa para ATAR la web con la app, nunca como superficie:
   aparece en puntos, filetes y flechas, no en fondos ni en
   textos largos. Superficie total en pantalla: menos del 1%.
   ══════════════════════════════════════════════════════════ */
:root {
  --fuego: #F26419;
  --fuego-claro: #ff8a3d;   /* --flame-2 de la app */
}

/* 1 · el separador del marquee */
.marquee__pista i { color: var(--fuego); }

/* 2 · la barra que baja en el indicador de scroll del hero */
.hero__scroll-linea::after { background: var(--fuego); }

/* 3 · el punto que marca cuáles piezas de la galería son video */
.gal__play { background: var(--fuego); }
.gal__play::after { border-color: var(--fuego); }

/* 4 · la flecha de los dos usos de la app, al pasar por encima */
.uso:hover .uso__flecha { color: var(--fuego); }

/* 5 · el filete superior de la sección de la carne */
.carne { border-top: 3px solid var(--fuego); }

/* 6 · el botón flotante del chat, con el degradé de fuego de la app */
.bot-abrir {
  background: linear-gradient(135deg, var(--fuego-claro) 0%, var(--fuego) 55%, var(--acento) 100%);
  border-color: transparent;
}
.bot-abrir.activo { background: var(--texto); border-color: var(--texto); }

/* 7 · el punto de "abierto ahora" */
.estado.abierto .estado__punto { background: var(--fuego); }

/* ══════════════════════════════════════════════════════════
   SECCIONES TRAÍDAS DEL SITIO ACTUAL
   Premio · Manifiesto · La barra · Club Revire
   ══════════════════════════════════════════════════════════ */

/* ── El premio Travelers' Choice, dentro de La casa ────── */
.premio {
  display: grid; grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea);
}
.premio__medalla { aspect-ratio: 4 / 3; }
.premio__titulo {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  margin: 0.6rem 0 0.9rem;
}
.premio__texto p:not(.etiqueta) { color: var(--texto-suave); font-size: var(--t-small); margin: 0; }
@media (max-width: 720px) {
  .premio { grid-template-columns: 1fr; }
  .premio__medalla { aspect-ratio: 16 / 9; }
}

/* ── Manifiesto — el poema del sitio actual ─────────────
   Es la sección más silenciosa del scroll: sin foto, sin
   botón, sólo la voz de la marca. */
.manifiesto {
  padding: clamp(4.5rem, 11vw, 9rem) var(--s-borde);
  /* muro de cemento oscuro: base + un toque de color (vino y cobre del manual) */
  background:
    radial-gradient(120% 90% at 8% -12%, oklch(38% 0.03 50 / 0.10), transparent 55%),
    radial-gradient(125% 115% at 104% 112%, oklch(26% 0.05 8 / 0.14), transparent 55%),
    var(--fondo-alt);
  border-block: 1px solid var(--linea);
  text-align: center;
  position: relative; overflow: hidden;
}
/* Textura de pared gastada. El gris del SVG está acotado y la opacidad es
   baja: el punto más claro del fondo nunca sube lo suficiente para comerse
   el contraste de la frase (verificado: peor caso >= 5:1, incluida la
   última línea en cobre). El muro se ve parejo, arriba, abajo y detrás. */
.manifiesto::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: url("../img/textura-pared.svg") repeat;
  background-size: 720px 720px;
  opacity: 0.12;
}
.manifiesto__caja {
  position: relative; z-index: 1;
  /* margen para que la tercera línea no parta y deje "moderno." sola */
  max-width: 54rem;
}
.manifiesto__cita {
  margin: 0 0 2.5rem;
  /* Boska: serif de alto contraste, legible — la voz de la marca, no un titular */
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(1.35rem, 3.1vw, 2.55rem);
  line-height: 1.42;          /* aire entre versos: es un poema */
  letter-spacing: -0.01em;
  text-transform: none;       /* vive en caja mixta */
  color: var(--texto);
}
.manifiesto__cita span { display: block; }
/* la última línea, la que cierra, va en cobre */
.manifiesto__cita span:last-child { color: var(--acento-claro); }
.manifiesto .etiqueta { display: block; }

/* ── 04 · LA BARRA ─────────────────────────────────────── */
.barra { background: var(--fondo); overflow: hidden; }
.barra__copa {
  position: absolute; top: 8%; right: 3%;
  width: clamp(80px, 10vw, 140px); aspect-ratio: 940 / 900;
  background: var(--acento); opacity: 0.14; pointer-events: none;
  -webkit-mask: url('../marca/copa.webp') center/contain no-repeat;
  mask: url('../marca/copa.webp') center/contain no-repeat;
}
.barra__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
.barra__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; }
.barra__texto p:not(.etiqueta) { color: var(--texto-suave); }
.barra__texto .btn { margin-top: 1.5rem; }

.momentos { list-style: none; margin: 2.25rem 0 0; padding: 0; border-top: 1px solid var(--linea); }
.momentos li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem;
  padding-block: 1.05rem; border-bottom: 1px solid var(--linea);
}
.momentos__t {
  flex: 0 0 auto; min-width: 11rem;
  font-family: var(--f-ui); font-weight: 400; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acento);
}
.momentos__d { flex: 1; font-size: var(--t-small); color: var(--texto-tenue); }

.barra__medios { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); }
.barra__foto { margin: 0; aspect-ratio: 3 / 4; grid-column: span 2; background: var(--fondo); }
.barra__foto--chica { aspect-ratio: 1 / 1; grid-column: span 1; }
.barra__foto video, .barra__foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .barra__grid { grid-template-columns: 1fr; }
  .barra__foto { aspect-ratio: 16 / 10; }
}

/* ── 08 · CLUB REVIRE ──────────────────────────────────── */
.club { background: var(--fondo-alt); overflow: hidden; }
.club__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(3rem, 7vw, 6rem); align-items: center;
}
.club__titulo { font-size: var(--t-h1); margin: 1.2rem 0 2rem; }
.club__texto p:not(.etiqueta) { color: var(--texto-suave); }
.club__texto .btn { margin-top: 1rem; }

/* la black card: negro sobre negro, con un filo de cobre */
.tarjeta {
  aspect-ratio: 1.586;                 /* proporción de una tarjeta real */
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    linear-gradient(135deg,
      oklch(24% 0.010 17) 0%,
      oklch(17% 0.006 17) 55%,
      oklch(21% 0.030 8) 100%);
  border: 1px solid var(--acento);
  position: relative; overflow: hidden;
  transform: rotate(-3deg);
  transition: transform var(--dur-lenta) var(--ease-suave);
}
.club__visual:hover .tarjeta { transform: rotate(0deg); }
/* el brillo que cruza la tarjeta */
.tarjeta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    oklch(94% 0.008 59 / 0.10) 48%,
    transparent 62%);
}
.tarjeta__marca { width: clamp(88px, 11vw, 118px); height: auto; position: relative; z-index: 1; }
.tarjeta__tipo {
  margin: 0; position: relative; z-index: 1;
  font-family: var(--f-display); font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--acento);
}
.tarjeta__pie { position: relative; z-index: 1; margin: 0; }

@media (max-width: 900px) {
  .club__grid { grid-template-columns: 1fr; }
  .club__visual { max-width: 22rem; }
  .tarjeta { transform: none; }
}

/* ── el tercer uso de la app no es un enlace ───────────── */
.uso--pasivo { cursor: default; }
.uso--pasivo:hover { padding-inline: 0; }

/* Chip "Próximamente": el take away todavía no se lanzó, así que la tarjeta
   queda pasiva y el chip lo dice sin bajarle la jerarquía a la sección. */
.uso__pronto {
  /* align-self, no justify-self: .uso__cuerpo es un flex column y con justify-self
     el chip se estiraba a todo el ancho de la tarjeta. */
  align-self: flex-start;
  font-family: var(--f-mono); font-size: 0.6875rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  margin-block: 0.1rem 0.15rem;
}

/* ══ MODAL · formulario del Club (Black Card) ══════════ */
.modal {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  padding: var(--s-borde);
  color-scheme: dark;   /* que el date-picker nativo salga oscuro */
}
.modal__fondo {
  position: absolute; inset: 0;
  background: oklch(8% 0.006 var(--h) / 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: modalFade var(--dur-media) var(--ease-suave);
}
.modal__caja {
  position: relative; z-index: 1;
  width: min(32rem, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--fondo-alt);
  border: 1px solid var(--linea-fuerte);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: left;
  animation: modalSube var(--dur-media) var(--ease-entrada);
}
.modal__caja .etiqueta { display: block; color: var(--acento); }
.modal__tit { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0.5rem 0 0.5rem; }
.modal__bajada { color: var(--texto-suave); font-size: var(--t-small); margin: 0 0 1.6rem; max-width: 40ch; }
.modal__x {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 2.25rem; height: 2.25rem; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.75rem; color: var(--texto-suave);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.modal__x:hover { color: var(--acento); }

.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 460px) { .campo-fila { grid-template-columns: 1fr; } }
.campo { display: block; margin-bottom: 0.9rem; }
.campo > span {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--texto-tenue);
}
.campo input {
  width: 100%; padding: 0.75rem 0.9rem;
  background: oklch(22% 0.006 var(--h));
  border: 1px solid var(--linea);
  color: var(--texto); font-family: var(--f-texto); font-size: var(--t-body);
  transition: border-color var(--dur-rapida) var(--ease-suave);
}
.campo input::placeholder { color: var(--texto-tenue); }
.campo input:focus { outline: none; border-color: var(--acento); }
.modal__error { color: var(--acento-claro); font-size: var(--t-small); margin: 0 0 1rem; }
.modal__enviar { width: 100%; justify-content: center; margin-top: 0.4rem; }
.modal__nota { display: block; margin-top: 1rem; color: var(--texto-tenue); text-transform: none; letter-spacing: 0.02em; line-height: 1.5; }
.modal__ok {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem;
  border: 1px solid var(--acento); border-radius: 50%;
  color: var(--acento); font-size: 1.6rem;
}

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSube { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal__fondo, .modal__caja { animation: none; }
}