/* ==========================================================================
   Jhony Ramirez Tattoo — estilos del sitio
   Portado 1:1 desde el bosquejo de Claude Design (layout() del DCLogic).
   Cada clase lleva el valor MÓVIL como base y el valor ESCRITORIO dentro de
   @media (min-width:1024px). Los números NO se tocan: son los del diseño.
   ========================================================================== */

:root {
  --ink:      #0a0a0a;   /* fondo */
  --gold:     #F0D050;   /* dorado de marca */
  --bone:     #E0D0C0;   /* texto */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --hero-ms:  3600ms;
}

/* ---------- base (del <style> original) ----------
   OJO: el bosquejo NO usa `box-sizing: border-box` global — ese reset venía del
   envoltorio del bundler y desaparece al desempacar. Mantenerlo aquí encogía
   2px cada icono con borde (44+1+1 → 44). Se deja content-box, igual que el
   diseño, y se declara border-box solo donde el original lo declaraba. */
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: "Montserrat", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--bone); }
button, input, textarea, select { font-family: inherit; }
img { max-width: 100%; }
/* <picture> no debe crear caja: la imagen conserva su posición en el layout */
picture { display: contents; }
::selection { background: var(--gold); color: var(--ink); }

[data-jr-scroll] { scrollbar-width: none; -ms-overflow-style: none; }
[data-jr-scroll]::-webkit-scrollbar { display: none; width: 0; height: 0; }

@keyframes jrPulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes jrSweep { 0% { transform: translateX(0) } 55%, 100% { transform: translateX(460%) } }
@keyframes jrMqA  { from { transform: translate3d(0,0,0) }    to { transform: translate3d(-50%,0,0) } }
@keyframes jrMqB  { from { transform: translate3d(-50%,0,0) } to { transform: translate3d(0,0,0) } }
@keyframes jrMqZoom { from { transform: scale(1) } to { transform: scale(1.14) } }
/* Deriva lenta y continua para las fotos grandes: da vida permanente a la web sin
   depender del scroll. Pedido de Richard 05/08 — "está toda tiesa". */
@keyframes jrDrift  { from { transform: scale(1.04) translate3d(0,0,0) } to { transform: scale(1.13) translate3d(-1.2%,-1%,0) } }
@keyframes jrDriftB { from { transform: scale(1.12) translate3d(1%,0,0) }  to { transform: scale(1.03) translate3d(0,-1%,0) } }
@keyframes jrBlink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ---- política de movimiento reducido (revisada 05/08/2026) ----
   La regla original mataba TODA animación con `*{animation-duration:.001ms!important}`.
   Efecto real: quien tuviera "reducir movimiento" activado en su sistema veía el hero
   clavado en la foto 1 de 4 y la galería como una tira muerta. Eso no es accesibilidad,
   es contenido perdido.
   Ahora se apaga lo que de verdad causa mareo — parallax, ken burns, barridos, scroll
   suave y los desplazamientos grandes de entrada — y se conserva lo que ES contenido:
   la rotación del hero y el desfile de la galería, ambos a ritmo lento y constante. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  /* fuera: solo lo acoplado al scroll (parallax), que es lo que de verdad marea */
  #heroBg, [data-px] { transform: none !important; }
  .hero-sweep { animation-duration: 22s !important; }
  .loc-dot { animation: none !important; }

  /* las derivas lentas y continuas se conservan, al doble de duración:
     no van atadas al scroll y son la vida de la web */
  .mq-box img { animation-duration: 14s !important; }
  .cat-box[data-rv-done="1"] img { animation-duration: 44s !important; }
  .about-img[data-rv-done="1"] .about-img-ratio img { animation-duration: 52s !important; }
  .video-frame[data-rv-done="1"] .video-ratio img,
  .film-frame[data-rv-done="1"] .video-ratio img { animation-duration: 58s !important; }
  .feat-bg img { animation-duration: 48s !important; }
  .splash-img { animation-duration: 16s !important; }

  /* entradas: el JS ya las degrada a fundido sin desplazamiento (ver initReveal /
     applyReveal en site.js). El barrido circular sobre las imágenes SÍ se conserva:
     no desplaza contenido, así que no marea, y es donde vive la fuerza visual. */
  .step::before { transition-duration: .3s !important; }

  /* se conserva: el hero rota (con fundido, sin zoom) y la galería desfila */
  .hero-slide { transform: none !important; }
  .mq-track-a { animation: jrMqA 60s linear infinite !important; }
  .mq-track-b { animation: jrMqB 74s linear infinite !important; }
}

/* Textura de film que en la maqueta iba sobre el "dispositivo".
   Aquí es fija sobre el viewport — misma opacidad y mezcla. */
.jr-grain {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(0deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ==========================================================================
   RENDIMIENTO DE ANIMACIÓN (06/08/2026)
   Medido: 40 animaciones corriendo, LAS 40 fuera de pantalla. El CSS no pausa
   solo lo que no se ve, así que el móvil componía 32 tiles + derivas + grano
   de forma permanente. Richard reportaba tirones justo en la galería.
   Nada de esto cambia cómo se ve: solo deja de trabajar en lo invisible.
   ========================================================================== */

/* Pausa lo que no está a la vista. Lo pone y lo quita el IntersectionObserver
   de site.js. Al volver a entrar la animación continúa donde iba. */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after { animation-play-state: paused !important; }

/* Deja que el navegador se salte por completo el render de lo que está lejos.
   `contain-intrinsic-size` evita que la barra de scroll dé saltos. */
#booking, #about, #film, #awards, #faq, #contact, footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

@media (max-width: 1023px) {
  /* El grano con `mix-blend-mode: overlay` a pantalla completa obliga a
     recomponer TODO el viewport en cada frame — de lo más caro que hay en un
     móvil. Mismo aspecto, sin la mezcla. */
  .jr-grain { mix-blend-mode: normal; opacity: .16; }
}

/* ========================= HEADER ========================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 60px 20px 18px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding 350ms ease-out, background-color 350ms ease-out, border-color 350ms ease-out;
}
.site-header.is-scrolled {
  padding: 56px 20px 12px;
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid rgba(240,208,80,.14);
  backdrop-filter: blur(10px);
}
.jr-logo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 23px; letter-spacing: .16em;
  color: var(--gold); line-height: 1;
  white-space: nowrap; flex: 0 0 auto;
}
.nav-desktop { display: none; }
.header-side  { display: none; }
.nav-link {
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  font-size: 10.5px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(224,208,192,.75);
  transition: color 300ms ease-out, border-color 300ms ease-out;
}
.nav-link:hover { color: var(--gold); border-color: var(--gold); }
.loc-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(224,208,192,.45);
}
.loc-dot {
  width: 5px; height: 5px; border-radius: 99px;
  background: var(--gold); animation: jrBlink 2.6s ease-in-out infinite;
}
.btn-book {
  border: 1px solid var(--gold); background: var(--gold); color: #101010;
  padding: 13px 26px;
  font-family: Montserrat, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}
.btn-book:hover { background: transparent; color: var(--gold); box-shadow: 0 0 30px rgba(240,208,80,.22); }
.btn-burger {
  background: none; border: none; color: var(--gold);
  padding: 8px; min-width: 44px; min-height: 44px; box-sizing: border-box;
  cursor: pointer; display: grid; place-items: center;
}

/* ========================= HERO ========================= */
.hero {
  position: relative; overflow: hidden;
  height: 720px; display: flex; background: var(--ink);
}
/* isolation crea contexto de apilado propio: sin esto, la diapositiva activa
   (z-index 2) se montaba por encima del desenfoque. */
.hero-bg { position: absolute; inset: -2% -2% -6%; overflow: hidden; z-index: 0; isolation: isolate; }

/* CORTINA detrás del bloque de texto — NO desenfoque.
   Corregido el 05/08: primero se probó con `backdrop-filter: blur()` y Richard lo rechazó
   con razón: es la portada, las fotos tienen que verse en alta calidad. Ahora es una
   cortina oscura degradada. La foto queda NÍTIDA, solo baja de luz donde va el texto. */
.hero-curtain {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(6,6,6,.95) 0%, rgba(6,6,6,.9) 30%, rgba(8,8,8,.66) 58%, rgba(10,10,10,.22) 82%, transparent 100%);
}
.hero-slide { position: absolute; inset: 0; overflow: hidden; opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-grad-a {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,.55) 34%, rgba(10,10,10,.12) 62%, rgba(10,10,10,.72) 100%);
}
.hero-grad-b {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 88% at 50% 45%, transparent 26%, rgba(0,0,0,.78) 100%);
}
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* valores originales del diseño: la legibilidad ahora la resuelve .hero-curtain,
     así la foto conserva su luz y su detalle donde no hay texto. */
  background: linear-gradient(175deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.3) 32%, rgba(10,10,10,.86) 74%, rgba(10,10,10,.96) 100%);
}
.hero-sweep {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240,208,80,.1), transparent);
  animation: jrSweep 11s ease-in-out infinite;
}
.hero-rail { display: none; }
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; padding: 0 20px 34px;
}
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero-eyebrow .rule { height: 1px; width: 44px; background: var(--gold); }
.hero-eyebrow .txt {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5em;
  text-transform: uppercase; color: var(--gold);
}
.hero-h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 66px; line-height: .84; letter-spacing: 0;
  text-transform: uppercase; color: var(--bone); margin: 0;
}
.hero-h1 .clip { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.hero-h1-outline { display: block; color: transparent; -webkit-text-stroke: 1.4px var(--gold); }
.hero-h1-sub {
  display: block; font-size: 30px; letter-spacing: .16em;
  color: rgba(224,208,192,.82); padding-top: 10px;
}

/* ---- legibilidad del hero (ajuste pedido 05/08/2026) ----
   El bosquejo dejaba el subtítulo y el párrafo al ~60% de opacidad sobre una foto
   muy saturada: sobre el astronauta el texto se perdía. Se sube la opacidad y se
   añade una sombra de texto que no se ve como sombra pero despega las letras del
   fondo. Cero cambios de color de marca, tipografía ni composición. */
.hero-h1 { text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.hero-h1-outline { text-shadow: none; }
.hero-h1-sub { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 20px rgba(0,0,0,.75); }
.hero-p {
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 16px rgba(0,0,0,.6);
}
.hero-eyebrow .txt { text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.hero-counter, .hero-label { text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.hero-serif {
  font-family: "Instrument Serif", serif; font-style: italic;
  text-transform: none; color: var(--gold);
}
.hero-lead { position: relative; margin-top: 24px; padding-left: 16px; max-width: 320px; }
.hero-lead-rule {
  position: absolute; left: 0; top: 3px; bottom: 5px; width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(240,208,80,.3) 55%, rgba(240,208,80,0) 100%);
}
.hero-p {
  margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.9;
  letter-spacing: .012em; color: rgba(224,208,192,.86); text-wrap: pretty;
}
.hero-cta {
  margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; max-width: 330px;
}
.hero-cta > * {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 58px; padding: 0 12px; box-sizing: border-box;
  font-family: Montserrat, sans-serif; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.hero-cta .primary {
  background: var(--gold); color: #101010; border: 1px solid var(--gold);
  font-weight: 700; cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out;
}
.hero-cta .primary:hover { background: transparent; color: var(--gold); box-shadow: 0 0 34px rgba(240,208,80,.3); }
.hero-cta .primary:active { transform: scale(.985); }
.hero-cta .ghost {
  border: 1px solid rgba(240,208,80,.3); background: rgba(10,10,10,.3);
  font-weight: 600; color: rgba(224,208,192,.85);
  transition: border-color 300ms ease-out, color 300ms ease-out, background-color 300ms ease-out;
}
.hero-cta .ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(240,208,80,.06); }
.hero-foot {
  margin-top: 30px; padding-top: 16px;
  border-top: 1px solid rgba(240,208,80,.16);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hero-track {
  position: relative; box-sizing: content-box; height: 2px;
  padding: 21px 0; margin: -21px 0; flex: 1 1 0; min-width: 0;
  border: none; cursor: pointer;
  background-color: rgba(224,208,192,.16); background-clip: content-box;
  transition: background-color 450ms ease-out;
}
.hero-track.is-active { background-color: rgba(240,208,80,.22); }
.hero-fill {
  position: absolute; left: 0; top: 21px; height: 2px; width: 0%;
  background: var(--gold); pointer-events: none;
}
.hero-nav-btn {
  display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box;
  border: 1px solid rgba(240,208,80,.35); background: rgba(10,10,10,.4);
  backdrop-filter: blur(3px); color: var(--gold); cursor: pointer;
  transition: border-color 300ms ease-out, background-color 300ms ease-out;
}
.hero-nav-btn:hover { border-color: var(--gold); background: rgba(240,208,80,.1); }
.hero-counter {
  font-family: "Bebas Neue", sans-serif; font-size: 17px;
  letter-spacing: .14em; color: var(--gold); flex: 0 0 auto;
}
.hero-label {
  font-family: "Instrument Serif", serif; font-style: italic; font-size: 16px;
  color: rgba(224,208,192,.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ========================= MARQUEE =========================
   Reforzado el 05/08/2026 a pedido de Richard: la banda original se movía tan
   lento (34s/42s) y con tiles tan chicos que parecía un contact sheet estático.
   Ahora: máscara real en los bordes (las fotos se disuelven en negro al entrar
   y salir, no un degradado encima), tiles más grandes, movimiento visible y un
   zoom escalonado que le da vida constante. */
.mq {
  position: relative; overflow: hidden; background: var(--ink);
  padding: 22px 0 24px; display: flex; flex-direction: column; gap: 10px;
  /* la máscara va en el contenedor, no en la pista: si va en la pista viaja
     con ella y el efecto de aparecer/desaparecer se pierde. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.mq::before, .mq::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240,208,80,.35), transparent);
}
.mq::before { top: 0; }
.mq::after  { bottom: 0; }
.mq-track-a { display: flex; gap: 10px; width: max-content; animation: jrMqA 20s linear infinite; }
.mq-track-b { display: flex; gap: 10px; width: max-content; animation: jrMqB 26s linear infinite; }
/* las fotos abren el visor a pantalla completa; al pasar el cursor la banda se
   detiene para poder apuntar sin perseguir el objetivo */
.mq:hover .mq-track-a, .mq:hover .mq-track-b { animation-play-state: paused; }
.mq-box {
  flex: 0 0 auto; width: 178px; height: 130px; overflow: hidden; background: #111;
  border: 1px solid rgba(240,208,80,.14);
  padding: 0; cursor: pointer; position: relative;
  transition: border-color 350ms ease-out, box-shadow 350ms ease-out;
}
.mq-box:hover, .mq-box:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(240,208,80,.35), 0 14px 40px rgba(0,0,0,.6);
  outline: none; z-index: 2;
}
.mq-box::after {
  content: '↗'; position: absolute; right: 8px; bottom: 6px;
  font-size: 15px; color: var(--gold); opacity: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  transition: opacity 300ms ease-out;
}
.mq-box:hover::after, .mq-box:focus-visible::after { opacity: 1; }
.mq-box img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: jrMqZoom 7s ease-in-out infinite alternate;
}
/* desfase por posición: las fotos no respiran todas a la vez */
.mq-box:nth-child(4n+1) img { animation-delay: 0s;    }
.mq-box:nth-child(4n+2) img { animation-delay: -1.8s; }
.mq-box:nth-child(4n+3) img { animation-delay: -3.5s; }
.mq-box:nth-child(4n)   img { animation-delay: -5.2s; }

/* ========================= SECCIONES ========================= */
.sec         { position: relative; padding: 76px 20px; }
.sec-narrow  { position: relative; padding: 76px 20px; }
.sec-dark    { position: relative; padding: 76px 20px; background: rgba(0,0,0,.42); }
.sec-booking { position: relative; overflow: hidden; background: #000; padding: 76px 20px; }

.eyebrow {
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
  font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
.eyebrow .rule { height: 1px; width: 30px; background: rgba(240,208,80,.6); }
/* la sección de premios usa una variante propia en el diseño */
.eyebrow.is-awards { margin-bottom: 14px; font-size: 10px; letter-spacing: .3em; }

.head-row   { }
.head-block { }
.head-p {
  margin: 18px 0 0; font-size: 13.5px; line-height: 1.85;
  color: rgba(224,208,192,.8); text-wrap: pretty;
}
.h2 {
  font-family: "Bebas Neue", sans-serif; font-size: 50px; line-height: .9;
  text-transform: uppercase; color: var(--bone); margin: 0;
}
.h2-big {
  font-family: "Bebas Neue", sans-serif; font-size: 56px; line-height: .86;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--bone); margin: 0;
}
.serif-accent {
  font-family: "Instrument Serif", serif; font-style: italic;
  text-transform: none; letter-spacing: 0; color: var(--gold);
}

/* ========================= PORTFOLIO / RAIL ========================= */
.rail-shell { position: relative; margin-top: 30px; }
.rail {
  display: flex; align-items: flex-start; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  margin: 0 -20px; padding: 0 20px;
}
.rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.cat-card {
  position: relative; flex: 0 0 auto;
  width: calc(86% + 34px); scroll-snap-align: center;
  padding: 0; overflow: hidden; background: #0d0d0d; cursor: pointer;
  border: 1px solid rgba(240,208,80,.1);
  opacity: .55; transform: scale(.94);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease), border-color 450ms ease-out;
}
.cat-card.is-active { border-color: rgba(240,208,80,.45); opacity: 1; transform: scale(1); }
.cat-box { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.cat-box[data-aspect="square"] { aspect-ratio: 1 / 1; }
.cat-box[data-aspect="tall"]   { aspect-ratio: 2 / 3; }
.cat-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La deriva arranca DESPUÉS del barrido de entrada (data-rv-done + retardo), si no
   la animación pisaría el transform en línea que deja el reveal. */
.cat-box[data-rv-done="1"] img { animation: jrDrift 24s ease-in-out 2.4s infinite alternate; }
.cat-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 45%, transparent 100%);
}
.cat-foot {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
/* La etiqueta de categoría era un chip pequeño que se perdía sobre la foto.
   Ahora manda el nombre en Bebas grande y el conteo va debajo, en fino.
   La tarjeta activa la enciende en dorado sólido. */
.cat-pill {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid rgba(240,208,80,.5); background: rgba(12,12,12,.82);
  backdrop-filter: blur(6px); padding: 10px 14px 11px;
  text-align: left; min-width: 0;
  transition: background-color 450ms ease-out, border-color 450ms ease-out, color 450ms ease-out;
}
.cat-name {
  font-family: "Bebas Neue", sans-serif; font-size: 21px; line-height: 1;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold);
  transition: color 450ms ease-out;
}
.cat-count {
  font-family: Montserrat, sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(232,222,210,.72);
  transition: color 450ms ease-out;
}
.cat-card.is-active .cat-pill { background: var(--gold); border-color: var(--gold); }
.cat-card.is-active .cat-name  { color: #101010; }
.cat-card.is-active .cat-count { color: rgba(16,16,16,.72); }
.cat-open {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(240,208,80,.25); background: rgba(10,10,10,.5);
  backdrop-filter: blur(3px); font-size: 15px; color: var(--gold);
  transition: border-color 450ms ease-out;
}
.cat-card.is-active .cat-open { border-color: rgba(240,208,80,.6); }
.rail-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(240,208,80,.4); background: rgba(16,16,16,.7);
  backdrop-filter: blur(4px); color: var(--gold); cursor: pointer; opacity: 1;
  transition: opacity 300ms ease-out, border-color 300ms ease-out, background-color 300ms ease-out;
  position: relative;
}
.rail-btn.is-disabled { opacity: .3; pointer-events: none; }
.rail-btn-side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: none; }
.rail-btn-side.left  { left: 8px; }
.rail-btn-side.right { right: 8px; }
.rail-foot {
  margin-top: 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
/* los botones del pie del rail son solo móvil (en desktop van a los lados) */
.rail-foot-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.rail-index { font-family: "Bebas Neue", sans-serif; font-size: 20px; letter-spacing: .1em; color: var(--gold); }
.rail-label {
  font-size: 9px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(224,208,192,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ========================= PIEZA DESTACADA ========================= */
.feat { position: relative; overflow: hidden; height: 560px; background: #000; display: flex; }
.feat-bg { position: absolute; inset: -12% 0; overflow: hidden; }
.feat-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: jrDrift 26s ease-in-out infinite alternate;
}
.feat-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.42) 42%, rgba(10,10,10,.62) 100%);
}
.feat-ghost {
  position: absolute; right: 16px; top: 86px; font-size: 76px;
  font-family: "Bebas Neue", sans-serif; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px rgba(240,208,80,.35);
  pointer-events: none; z-index: 2;
}
.feat-inner { position: relative; z-index: 2; margin-top: auto; width: 100%; padding: 0 20px 46px; }
.feat-kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .4em;
  text-transform: uppercase; color: var(--gold);
}
.feat-kicker .rule { height: 1px; width: 30px; background: var(--gold); }
.feat-title {
  margin: 18px 0 0; font-family: "Bebas Neue", sans-serif; font-size: 52px;
  line-height: .88; text-transform: uppercase; color: var(--bone);
}
.feat-p {
  margin: 20px 0 0; max-width: 320px; font-size: 13.5px; font-weight: 300;
  line-height: 1.9; color: rgba(232,222,210,.88); text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* ========================= BOOKING ========================= */
.booking-glow {
  position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 620px; height: 380px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(240,208,80,.08), transparent 70%);
}
.booking-head { position: relative; border-left: 1px solid var(--gold); padding-left: 20px; }
.booking-head .eyebrow-solo {
  display: block; margin-bottom: 14px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
.booking-lead {
  margin: 20px 0 0; max-width: 520px; font-size: 15px; font-weight: 300;
  line-height: 1.75; color: rgba(224,208,192,.84); text-wrap: pretty;
}
.grid-steps {
  position: relative; margin-top: 36px; display: grid;
  grid-template-columns: repeat(1, 1fr); gap: 6px;
}
/* Los pasos eran cuatro bloques planos con el cuerpo casi ilegible (opacidad .6).
   Ahora: filete dorado que se enciende, número grande de fondo y texto legible. */
.step {
  position: relative; border-top: 1px solid rgba(240,208,80,.28);
  background: transparent; padding: 22px 0 26px; overflow: hidden;
  transition: background-color 400ms ease-out;
}
.step::before {
  content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 700ms var(--ease);
}
.step.is-in::before { width: 100%; }
.step::after {
  content: attr(data-n); position: absolute; right: -4px; top: 8px;
  font-family: "Bebas Neue", sans-serif; font-size: 74px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(240,208,80,.13);
  pointer-events: none; z-index: 0;
}
.step-head, .step-body { position: relative; z-index: 1; }
.step-head { display: flex; align-items: baseline; gap: 14px; }
.step-n { font-family: "Bebas Neue", sans-serif; font-size: 15px; letter-spacing: .2em; color: var(--gold); }
.step-title { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: 27px; letter-spacing: .05em; color: var(--bone); }
.step-body {
  margin: 14px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.85;
  color: rgba(232,222,210,.9); text-wrap: pretty;
}
.cta-row { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.cta-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--gold); background: var(--gold); color: #101010;
  padding: 16px 30px; font-family: Montserrat, sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out;
}
.cta-solid:hover { background: transparent; color: var(--gold); }
.cta-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(240,208,80,.3); color: var(--gold);
  padding: 16px 30px; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  transition: border-color 300ms ease-out;
}
.cta-ghost:hover { border-color: var(--gold); }

/* ========================= ABOUT ========================= */
.video-frame {
  position: relative; overflow: hidden;
  border: 1px solid rgba(240,208,80,.18); background: #000;
}
.video-ratio { position: relative; aspect-ratio: 16 / 9; }
.video-ratio img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.78) saturate(.9);
}
.video-ratio > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-play {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  width: 100%; border: 0; cursor: pointer; padding: 0;
  background: linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,.25) 55%, rgba(10,10,10,.4) 100%);
}
.video-play .ring {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(240,208,80,.5); background: rgba(16,16,16,.55);
  backdrop-filter: blur(4px); transition: background-color 300ms ease-out;
}
.video-play:hover .ring { background: var(--gold); }
.video-play .cap {
  font-family: Montserrat, sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--bone);
}
.about-row  { }
.about-img  { margin-top: 30px; position: relative; overflow: hidden; border: 1px solid rgba(240,208,80,.18); }
.about-img-ratio { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #141414; }
.about-img-ratio img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img[data-rv-done="1"] .about-img-ratio img { animation: jrDriftB 30s ease-in-out 2.4s infinite alternate; }
.video-frame[data-rv-done="1"] .video-ratio img,
.film-frame[data-rv-done="1"] .video-ratio img { animation: jrDrift 34s ease-in-out 2.4s infinite alternate; }
.about-img-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.4) 30%, transparent 62%);
}
.about-img-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.about-img-cap .yr { font-size: 9px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.about-img-cap .ttl { margin-top: 8px; font-family: "Bebas Neue", sans-serif; font-size: 23px; letter-spacing: .07em; color: var(--bone); }
.about-text { position: relative; margin-top: 34px; }
.about-body {
  position: relative; margin-top: 24px; display: flex; flex-direction: column; gap: 16px;
  font-size: 14px; line-height: 1.85; color: rgba(232,222,210,.88); text-wrap: pretty;
}
.about-body p { margin: 0; }
.dropcap {
  font-family: "Instrument Serif", serif; font-size: 30px; line-height: 1;
  float: left; margin: 4px 10px 0 0; color: var(--gold);
}
.stats {
  margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  border-top: 1px solid rgba(240,208,80,.16); padding-top: 22px;
}
.stat-n { font-family: "Bebas Neue", sans-serif; font-size: 38px; line-height: 1; color: var(--gold); }
.stat-l { margin-top: 6px; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(224,208,192,.55); }

/* ========================= FILM ========================= */
.film-frame {
  margin-top: 26px; position: relative; overflow: hidden;
  border: 1px solid rgba(240,208,80,.2); background: #000;
  box-shadow: 0 30px 90px -30px rgba(0,0,0,.9);
}
.film-frame .ring { width: 72px; height: 72px; }
/* Selector de videos destacados del canal (05/08/2026). Antes había un único
   embed con la lista completa; ahora se eligen las piezas y se pueden saltar. */
.film-picker {
  margin-top: 14px; display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
.film-picker::-webkit-scrollbar { display: none; }
.film-chip {
  flex: 0 0 auto; width: 150px; padding: 0; cursor: pointer;
  background: none; border: none; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.film-chip-img {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: #111; border: 1px solid rgba(240,208,80,.16);
  transition: border-color 320ms ease-out, box-shadow 320ms ease-out;
}
.film-chip-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.5) brightness(.72);
  transition: filter 420ms ease-out, transform 700ms var(--ease);
}
.film-chip-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gold); opacity: .85; transition: opacity 320ms ease-out;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.9));
}
.film-chip:hover .film-chip-img,
.film-chip:focus-visible .film-chip-img { border-color: rgba(240,208,80,.55); outline: none; }
.film-chip:hover .film-chip-img img { filter: grayscale(0) brightness(.92); transform: scale(1.05); }
.film-chip.is-active .film-chip-img {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(240,208,80,.4), 0 12px 30px rgba(0,0,0,.55);
}
.film-chip.is-active .film-chip-img img { filter: grayscale(0) brightness(1); }
.film-chip.is-active .film-chip-play { opacity: 0; }
.film-chip-t {
  font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.45;
  color: rgba(232,222,210,.62); transition: color 320ms ease-out;
}
.film-chip.is-active .film-chip-t { color: var(--gold); }
.film-chip:hover .film-chip-t { color: rgba(232,222,210,.9); }

.film-foot {
  margin-top: 22px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 18px;
}
.film-note { font-family: "Instrument Serif", serif; font-style: italic; font-size: 17px; color: rgba(224,208,192,.6); }
.film-cta {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid rgba(240,208,80,.3); padding: 15px 24px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
  transition: border-color 300ms ease-out, background-color 300ms ease-out;
}
.film-cta:hover { border-color: var(--gold); background: rgba(240,208,80,.07); }

/* ========================= AWARDS ========================= */
.awards-btn {
  position: relative; display: block; width: 100%; margin-top: 28px; padding: 0;
  overflow: hidden; border-radius: 12px; border: 1px solid rgba(240,208,80,.1);
  background: #0d0d0d; cursor: pointer; transition: transform 140ms ease-out;
}
.awards-btn:active { transform: scale(.98); }
.award-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.award-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.award-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.35) contrast(1.06);
  transition: transform 900ms var(--ease), filter 700ms ease-out;
}
.awards-btn:hover .award-thumb img { transform: scale(1.07); filter: grayscale(0) contrast(1.02); }
/* cada miniatura entra con un retardo distinto: lee como bloque, no como parpadeo */
.awards-btn:hover .award-thumb:nth-child(2) img { transition-delay: 70ms; }
.awards-btn:hover .award-thumb:nth-child(3) img { transition-delay: 140ms; }
.awards-btn:hover .award-thumb:nth-child(4) img { transition-delay: 210ms; }
.awards-btn { transition: transform 140ms ease-out, border-color 400ms ease-out; }
.awards-btn:hover { border-color: rgba(240,208,80,.4); }
.awards-badge { transition: background-color 350ms ease-out, color 350ms ease-out; }
.awards-btn:hover .awards-badge { background: var(--gold); color: #101010; border-color: var(--gold); }
.awards-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background: linear-gradient(to top, #101010 0%, rgba(16,16,16,.82) 34%, transparent 100%);
}
.awards-badge-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.awards-badge {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  border: 1px solid rgba(240,208,80,.7); background: rgba(16,16,16,.75);
  padding: 9px 16px; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.awards-lead { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: rgba(232,222,210,.84); text-wrap: pretty; }
.awards-list { margin-top: 28px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 0 32px; }
/* Filas de premios: antes eran una lista plana y apagada. Ahora la copa se enciende,
   el año destaca en dorado y la fila responde al pasar el cursor. */
.award-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(240,208,80,.15); padding: 16px 10px 16px 0;
  transition: background-color 350ms ease-out, padding-left 350ms var(--ease);
}
.award-row:hover { background: rgba(240,208,80,.05); padding-left: 10px; }
.award-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid rgba(224,208,192,.18); color: rgba(224,208,192,.45);
  transition: border-color 350ms ease-out, color 350ms ease-out, background-color 350ms ease-out;
}
.award-icon.is-top {
  border-color: var(--gold); color: var(--gold);
  background: rgba(240,208,80,.08);
  box-shadow: 0 0 20px rgba(240,208,80,.12);
}
.award-row:hover .award-icon { border-color: var(--gold); color: var(--gold); }
.award-name {
  font-family: Montserrat, sans-serif; font-size: 12.5px; font-weight: 600;
  line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--bone);
}
.award-meta {
  margin-top: 5px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(232,222,210,.72);
}
.award-year {
  font-family: "Bebas Neue", sans-serif; font-size: 14px; letter-spacing: .12em;
  color: var(--gold); margin-left: 8px;
}

/* ========================= TESTIMONIOS ========================= */
.grid-tests { margin-top: 32px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 28px; }
.test {
  margin: 0; display: flex; flex-direction: column;
  border-top: 1px solid rgba(240,208,80,.28); padding-top: 22px;
}
.test-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.test-stars { display: flex; gap: 3px; color: var(--gold); }
.test-num { font-family: "Bebas Neue", sans-serif; font-size: 15px; letter-spacing: .16em; color: rgba(224,208,192,.35); }
.test-quote {
  margin: 18px 0 0; flex: 1; font-size: 13.5px; line-height: 1.85;
  color: rgba(232,222,210,.88); text-wrap: pretty;
}
.test-foot { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; }
.test-name { font-family: "Instrument Serif", serif; font-style: italic; font-size: 19px; color: var(--bone); }
.test-src { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(240,208,80,.75); }

/* ========================= FAQ ========================= */
.faq-list { margin-top: 30px; border-top: 1px solid rgba(240,208,80,.16); }
.faq-item { border-bottom: 1px solid rgba(240,208,80,.16); }
.faq-btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0; background: none; border: none; text-align: left; cursor: pointer;
}
.faq-q {
  font-family: Montserrat, sans-serif; font-size: 14.5px; font-weight: 500;
  line-height: 1.45; color: var(--bone); transition: color 250ms ease-out;
}
.faq-item.is-open .faq-q { color: var(--gold); }
.faq-icon {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid rgba(240,208,80,.4); color: var(--gold);
  transition: transform 300ms ease-out; transform: rotate(0deg);
}
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-panel {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 340ms var(--ease), opacity 340ms var(--ease);
}
.faq-item.is-open .faq-panel { max-height: 280px; opacity: 1; }
.faq-panel p {
  margin: 0; padding: 0 40px 22px 0; font-size: 13.5px; line-height: 1.85;
  color: rgba(232,222,210,.86); text-wrap: pretty;
}

/* ========================= CONTACTO ========================= */
.contact-row  { }
.contact-lead { margin: 18px 0 0; font-size: 14px; line-height: 1.8; color: rgba(232,222,210,.86); text-wrap: pretty; }
.contact-links { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.clink {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(240,208,80,.3); color: var(--gold); padding: 15px 22px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  transition: border-color 300ms ease-out;
}
.clink:hover { border-color: var(--gold); }
.clink .arrow { margin-left: auto; }
.clink.is-primary {
  border: 1px solid var(--gold); background: var(--gold); color: #101010; font-weight: 700;
  transition: background-color 300ms ease-out, color 300ms ease-out;
}
.clink.is-primary:hover { background: transparent; color: var(--gold); }
.studio-block { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(224,208,192,.65); }
.studio-block .lbl { font-size: 9px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.studio-block p { margin: 0; }
.contact-card { margin-top: 34px; border-top: 1px solid rgba(240,208,80,.28); padding-top: 24px; }
.jr-form { display: grid; grid-template-columns: 1fr; gap: 16px; }
.jr-label { display: block; margin-bottom: 8px; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.jr-input {
  width: 100%; box-sizing: border-box; border: none;
  border-bottom: 1px solid rgba(240,208,80,.3); background: transparent;
  padding: 10px 0; font-family: Montserrat, sans-serif; font-size: 14px; color: var(--bone);
}
.jr-input:focus { outline: none; border-bottom-color: var(--gold); }
textarea.jr-input { resize: vertical; }
.jr-submit {
  justify-self: start; border: 1px solid var(--gold); background: transparent; color: var(--gold);
  padding: 15px 26px; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out;
}
.jr-submit:hover { background: var(--gold); color: #101010; }
.sent-block { padding: 24px 0; text-align: center; }
.sent-block .ttl { font-family: "Bebas Neue", sans-serif; font-size: 30px; text-transform: uppercase; color: var(--bone); }
.sent-block p { margin: 10px 0 0; font-family: "Instrument Serif", serif; font-style: italic; font-size: 16px; color: rgba(224,208,192,.7); }
[hidden] { display: none !important; }

/* ========================= FOOTER ========================= */
.footer {
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(240,208,80,.14); background: #000; padding: 44px 20px 60px;
}
.footer-row { display: flex; flex-direction: column; gap: 30px; }
.footer-about { margin: 0; max-width: 340px; font-size: 13px; line-height: 1.8; color: rgba(224,208,192,.55); text-wrap: pretty; }
.footer-social { margin-top: 18px; display: flex; gap: 18px; font-size: 9px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.footer-navttl { font-size: 9px; letter-spacing: .32em; text-transform: uppercase; color: rgba(224,208,192,.4); }
.footer-nav { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.footer-nav a { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(224,208,192,.7); }
.footer-word {
  margin-top: 34px; font-family: "Bebas Neue", sans-serif; font-size: 44px;
  line-height: .9; letter-spacing: .02em; color: transparent;
  -webkit-text-stroke: 1px rgba(240,208,80,.28); white-space: nowrap;
}
.footer-legal {
  margin-top: 8px; border-top: 1px solid rgba(240,208,80,.14); padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 10px; color: rgba(224,208,192,.45);
}
.footer-legal .tag { letter-spacing: .3em; text-transform: uppercase; color: rgba(240,208,80,.6); }

/* Crédito de autoría — deliberadamente discreto: no debe competir con el
   trabajo de Jhony, que es lo único que tiene que destacar en esta página. */
.footer-by {
  margin-top: 16px; text-align: center;
  font-size: 9px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(224,208,192,.3);
}
.footer-by a {
  color: rgba(224,208,192,.42);
  border-bottom: 1px solid rgba(240,208,80,.18);
  padding-bottom: 1px;
  transition: color 320ms ease-out, border-color 320ms ease-out;
}
.footer-by a:hover { color: var(--gold); border-color: rgba(240,208,80,.55); }

/* ========================= MENÚ MÓVIL ========================= */
.menu-overlay {
  position: fixed; inset: 0; z-index: 90; background: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
}
.menu-bg { position: absolute; inset: 0; opacity: .16; }
.menu-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.menu-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 58px 20px 22px;
}
.menu-logo { position: relative; font-family: "Bebas Neue", sans-serif; font-size: 22px; letter-spacing: .14em; color: var(--gold); }
.menu-close { position: relative; background: none; border: none; color: var(--gold); padding: 8px; cursor: pointer; display: flex; }
.menu-nav { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 36px 24px 0; }
.menu-link {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid rgba(240,208,80,.14); padding: 14px 0;
  font-family: "Bebas Neue", sans-serif; font-size: 36px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bone);
}
.menu-link .num { font-family: Montserrat, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .28em; color: rgba(240,208,80,.7); }
.menu-book {
  margin-top: 26px; border: 1px solid var(--gold); background: var(--gold); color: #101010;
  padding: 16px 28px; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}

/* ========================= LIGHTBOX ========================= */
.lb {
  position: fixed; inset: 0; z-index: 100; background: #060606;
  display: flex; flex-direction: column; will-change: transform, opacity;
}
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 58px 16px 14px; }
.lb-index { font-family: "Bebas Neue", sans-serif; font-size: 26px; letter-spacing: .1em; color: var(--gold); }
.lb-label {
  font-size: 9px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(224,208,192,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-close {
  border: 1px solid rgba(240,208,80,.35); background: none; color: var(--gold);
  padding: 9px; min-width: 44px; min-height: 44px; box-sizing: border-box;
  cursor: pointer; display: grid; place-items: center; transition: border-color 250ms ease-out;
}
.lb-close:hover { border-color: var(--gold); }
.lb-stage {
  position: relative; flex: 1; margin: 0 16px; overflow: hidden;
  background: #060606; touch-action: pan-y;
}
.lb-corners { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.lb-corners span { position: absolute; width: 22px; height: 22px; }
.lb-corners .tl { left: 0; top: 0;    border-left:  1px solid rgba(240,208,80,.45); border-top:    1px solid rgba(240,208,80,.45); }
.lb-corners .tr { right: 0; top: 0;   border-right: 1px solid rgba(240,208,80,.45); border-top:    1px solid rgba(240,208,80,.45); }
.lb-corners .bl { left: 0; bottom: 0; border-left:  1px solid rgba(240,208,80,.45); border-bottom: 1px solid rgba(240,208,80,.45); }
.lb-corners .br { right: 0; bottom: 0;border-right: 1px solid rgba(240,208,80,.45); border-bottom: 1px solid rgba(240,208,80,.45); }
.lb-img-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.lb-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 480ms var(--ease);
}
.lb-img.is-loaded { opacity: 1; }
.lb-pulse {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(240,208,80,.1), transparent 70%);
  opacity: 0; transition: opacity 200ms ease-out; animation: jrPulse 1.2s ease-in-out infinite;
}
.lb-pulse.is-on { opacity: 1; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 1px solid rgba(240,208,80,.3); background: rgba(6,6,6,.6); color: var(--gold);
  padding: 14px; cursor: pointer; display: flex;
  transition: border-color 250ms ease-out, background-color 250ms ease-out;
}
.lb-nav:hover { border-color: var(--gold); background: rgba(240,208,80,.1); }
.lb-nav.prev { left: 0; }
.lb-nav.next { right: 0; }
.lb-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 16px; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
  position: relative; height: 46px; width: 62px; flex: 0 0 auto; overflow: hidden;
  padding: 0; cursor: pointer; border: 1px solid rgba(240,208,80,.16); opacity: .55;
  transition: opacity 250ms ease-out, border-color 250ms ease-out;
}
.lb-thumb.is-active { border-color: var(--gold); opacity: 1; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ========================= BOOKING MODAL ========================= */
.booking-overlay {
  position: fixed; inset: 0; z-index: 110; background: rgba(6,6,6,.94);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.booking-card {
  position: relative; width: 100%; max-width: 460px; max-height: 100%; overflow-y: auto;
  border: 1px solid rgba(240,208,80,.22); background: var(--ink); padding: 24px;
}
.booking-close {
  position: absolute; right: 16px; top: 16px;
  border: 1px solid rgba(240,208,80,.35); background: none; color: var(--gold);
  padding: 8px; cursor: pointer; display: flex;
}
.booking-kicker { font-size: 9px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.booking-title {
  margin: 12px 0 0; font-family: "Bebas Neue", sans-serif; font-size: 34px;
  line-height: .95; text-transform: uppercase; color: var(--bone);
}
.booking-sub { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: rgba(224,208,192,.68); text-wrap: pretty; }
.booking-fields { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.booking-note { margin: 0; font-family: "Instrument Serif", serif; font-style: italic; font-size: 15px; color: rgba(224,208,192,.6); }
.booking-submit {
  justify-self: start; border: 1px solid var(--gold); background: var(--gold); color: #101010;
  padding: 15px 26px; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}

/* ==========================================================================
   VISTA MÓVIL — TEMPORAL, SOLO PARA REVISIÓN
   Botón en la nav que abre la web dentro de un marco de teléfono (iframe real,
   para que las media queries respondan de verdad). Se quita en producción:
   poner PREVIEW_TOGGLE = false en src/build.mjs y borrar este bloque.
   ========================================================================== */
/* Chip flotante, NO va en la nav: metido en el header empujaba el botón BOOK
   fuera del borde a 1280px y partía "Orlando, FL" en dos líneas. */
.btn-vp {
  display: none;
  position: fixed; right: 20px; bottom: 20px; z-index: 85;
  align-items: center; gap: 9px;
  border: 1px solid rgba(240,208,80,.45); border-radius: 999px;
  background: rgba(16,16,16,.86); backdrop-filter: blur(8px);
  color: var(--gold); padding: 11px 18px;
  font-family: Montserrat, sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  box-shadow: 0 12px 34px rgba(0,0,0,.6);
  transition: border-color 250ms ease-out, background-color 250ms ease-out, transform 250ms ease-out;
}
.btn-vp:hover { border-color: var(--gold); background: rgba(240,208,80,.14); transform: translateY(-2px); }
.btn-vp svg { flex: 0 0 auto; }
.vp-overlay {
  position: fixed; inset: 0; z-index: 140; background: rgba(6,6,6,.965);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.vp-head {
  display: flex; align-items: center; gap: 14px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(224,208,192,.55);
}
.vp-head .gold { color: var(--gold); }
.vp-frame {
  position: relative; width: 410px; height: 864px; padding: 10px; flex: 0 0 auto;
  border-radius: 52px; background: #151515;
  box-shadow: 0 40px 110px rgba(0,0,0,.75), 0 0 0 1px rgba(240,208,80,.1);
}
.vp-frame iframe {
  width: 390px; height: 844px; border: 0; border-radius: 44px;
  background: var(--ink); display: block;
}
.vp-notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 32px; border-radius: 20px; background: #000;
  z-index: 2; pointer-events: none;
}
.vp-bar {
  position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%);
  width: 132px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.55);
  z-index: 2; pointer-events: none;
}
.vp-close {
  border: 1px solid rgba(240,208,80,.35); background: none; color: var(--gold);
  padding: 11px 20px; font-family: Montserrat, sans-serif; font-size: 9.5px;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  transition: border-color 250ms ease-out, background-color 250ms ease-out;
}
.vp-close:hover { border-color: var(--gold); background: rgba(240,208,80,.08); }
/* ventanas bajas: encoge el teléfono para que quepa entero */
@media (max-height: 980px) { .vp-frame { zoom: .86; } }
@media (max-height: 840px) { .vp-frame { zoom: .74; } }
@media (max-height: 720px) { .vp-frame { zoom: .62; } }

/* ========================= SPLASH ========================= */
.splash {
  position: fixed; inset: 0; z-index: 130; background: #000;
  overflow: hidden; cursor: pointer; transition: opacity 600ms ease-out;
}
.splash-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
  opacity: 0; transition: opacity 1100ms ease-in-out;
  animation: jrSplashZoom 9s ease-out infinite alternate;
}
.splash-img.is-on { opacity: 1; }
@keyframes jrSplashZoom { from { transform: scale(1.02) } to { transform: scale(1.12) } }
.splash-grad-a { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 40%, transparent 20%, rgba(0,0,0,.8) 100%); }
.splash-grad-b { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88), transparent 55%, rgba(0,0,0,.5)); }
.splash-inner {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 26px; text-align: center;
}
.splash-kicker { margin-bottom: 26px; display: flex; align-items: center; gap: 12px; }
.splash-kicker .rule { height: 1px; width: 26px; background: var(--gold); }
.splash-kicker .txt { font-size: 8.5px; font-weight: 700; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); }
.splash-l1 { font-family: "Bebas Neue", sans-serif; font-size: 66px; line-height: .88; text-transform: uppercase; color: var(--bone); }
.splash-l2 { font-family: "Bebas Neue", sans-serif; font-size: 66px; line-height: .88; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.4px var(--gold); }
.splash-sub { margin-top: 18px; font-family: "Instrument Serif", serif; font-style: italic; font-size: 18px; color: rgba(224,208,192,.7); }
.splash-enter { margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.splash-enter .lbl { font-size: 8.5px; font-weight: 700; letter-spacing: .5em; text-transform: uppercase; color: rgba(224,208,192,.6); }
.splash-enter .arrow { color: var(--gold); font-size: 20px; }
.splash-corners { position: absolute; inset: 22px; pointer-events: none; }
.splash-corners span { position: absolute; width: 20px; height: 20px; }
.splash-corners .tl { left: 0; top: 0;     border-left:  1px solid rgba(240,208,80,.55); border-top:    1px solid rgba(240,208,80,.55); }
.splash-corners .tr { right: 0; top: 0;    border-right: 1px solid rgba(240,208,80,.55); border-top:    1px solid rgba(240,208,80,.55); }
.splash-corners .bl { left: 0; bottom: 0;  border-left:  1px solid rgba(240,208,80,.55); border-bottom: 1px solid rgba(240,208,80,.55); }
.splash-corners .br { right: 0; bottom: 0; border-right: 1px solid rgba(240,208,80,.55); border-bottom: 1px solid rgba(240,208,80,.55); }

/* ==========================================================================
   RESPONSIVE — correcciones de la auditoría del 05/08/2026
   Medido en 320 · 360 · 390 · 430 · 540 · 640 · 768 · 834 · 900 · 1024 · 1120 ·
   1280 · 1440 · 1680 · 1920 · 2560. El diseño original solo definía dos estados
   (390 y 1280); todo lo intermedio y lo muy ancho estaba sin resolver.
   ========================================================================== */

/* --- 1. Longitud de línea. Sin tope, el texto llegaba a 199 caracteres a 2560px.
       La norma tipográfica es 65-75. Se acota en `ch` para que escale con la fuente. --- */
.head-p, .step-body, .test-quote, .faq-panel p, .about-body,
.contact-lead, .booking-lead, .feat-p, .footer-about, .awards-lead {
  /* 58ch en Montserrat ≈ 72 caracteres reales de renglón: dentro de la norma */
  max-width: 58ch;
}

/* --- 2. Tablet (640-1023px): el layout móvil se estiraba de borde a borde con
       solo 20px de aire. Se le da respiración y se centra el contenido. --- */
@media (min-width: 640px) and (max-width: 1023px) {
  .sec, .sec-narrow, .sec-dark, .sec-booking { padding: 84px 40px; }
  .hero-inner  { padding: 0 40px 38px; }
  .feat-inner  { padding: 0 40px 50px; }
  .footer      { padding: 52px 40px 64px; }
  .site-header { padding: 34px 40px 18px; }
  .site-header.is-scrolled { padding: 30px 40px 12px; }
  .rail        { margin: 0 -40px; padding: 0 40px; }
  .cat-card    { width: calc(62% + 20px); }
  .grid-steps  { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
  .grid-tests  { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .awards-list { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .award-thumbs{ grid-template-columns: repeat(4, 1fr); }
  .contact-links, .studio-block { max-width: 100%; }
  .hero-cta    { max-width: 420px; }
}

/* --- 3. Franja 1024-1199px: aquí entraba la nav completa de escritorio y NO cabía
       (header-side llegaba a 1164px en un viewport de 1024) → scroll horizontal.
       Se compacta la barra en ese rango en vez de romper el layout. --- */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header            { padding: 20px 32px; gap: 14px; }
  .site-header.is-scrolled{ padding: 12px 32px; }
  .nav-desktop            { gap: 15px; }
  .nav-link               { font-size: 9px; letter-spacing: .14em; }
  .loc-badge              { display: none; }
  .header-side            { gap: 12px; }
  .btn-book               { padding: 11px 16px; font-size: 9.5px; letter-spacing: .14em; }
  .jr-logo                { font-size: 21px; letter-spacing: .12em; }
  .sec, .sec-narrow, .sec-dark, .sec-booking { padding: 92px 40px; }
  .hero-inner { padding: 0 40px 40px; }
  .feat-inner { padding: 0 40px 54px; }
  .footer     { padding: 54px 40px 40px; }
  .rail-shell, .rail-foot { padding: 0 56px; }
}

/* --- 4. Pantallas muy anchas: sin tope, las secciones se estiraban a 2560px y la
       composición perdía el centro. Se acota el lienzo, no el fondo. --- */
@media (min-width: 1600px) {
  .sec > *, .sec-dark > *, .sec-booking > *, .footer > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
  .hero-inner, .feat-inner { max-width: 1440px; margin: 0 auto; }
  .hero-inner { justify-content: flex-end; }
}

/* --- 5. Áreas táctiles: los enlaces del footer medían 11px de alto y los de la nav 17px.
       Se les da altura real sin mover la composición (padding, no margin). --- */
.footer-social a { display: inline-block; padding: 17px 0; margin: -17px 0; }
.footer-nav a    { display: inline-block; padding: 14px 0; margin: -14px 0; }
.jr-logo, .menu-logo { display: inline-block; padding: 11px 0; margin: -11px 0; }
.nav-link        { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin: -12px 0 -12px; }
.nav-link        { border-bottom: none; position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ==========================================================================
   ESCRITORIO — valores exactos de layout() cuando d === true
   ========================================================================== */
@media (min-width: 1024px) {

  .site-header            { padding: 24px 56px; }
  .site-header.is-scrolled{ padding: 14px 56px; }
  .jr-logo                { font-size: 25px; }
  .nav-desktop            { display: flex; align-items: center; gap: 28px; }
  .header-side            { display: flex; align-items: center; gap: 20px; }
  .btn-burger             { display: none; }
  .btn-vp                 { display: inline-flex; }  /* temporal — ver bloque VISTA MÓVIL */

  .hero        { height: 780px; }
  .hero-inner  { padding: 0 56px 44px; }
  /* valores originales: la cortina hace el trabajo de contraste sin apagar la foto */
  .hero-scrim  { background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.6) 34%, rgba(10,10,10,.14) 66%, transparent 92%); }
  /* en escritorio el texto va a la izquierda: la cortina cubre esa columna */
  .hero-curtain {
    top: 0; bottom: 0; height: auto; left: 0; right: auto; width: 66%;
    background: linear-gradient(to right,
      rgba(6,6,6,.94) 0%, rgba(6,6,6,.86) 32%, rgba(8,8,8,.58) 62%, rgba(10,10,10,.2) 84%, transparent 100%);
  }
  .hero-rail {
    display: block; position: absolute; right: 26px; top: 50%;
    transform: translateY(-50%) rotate(90deg); transform-origin: center;
    z-index: 3; pointer-events: none;
  }
  .hero-rail .txt { font-size: 9px; font-weight: 700; letter-spacing: .55em; text-transform: uppercase; color: rgba(240,208,80,.7); }
  .hero-h1         { font-size: 122px; letter-spacing: -.005em; }
  .hero-h1-outline { -webkit-text-stroke: 2px var(--gold); }
  /* 54px hacía que el subtítulo cruzara el ancho completo por encima del tatuaje;
     a 48px se recoge y respira sin perder jerarquía frente al h1 de 122px. */
  .hero-h1-sub     { font-size: 48px; padding-top: 14px; }
  .hero-lead       { margin-top: 30px; padding-left: 20px; max-width: 470px; }
  .hero-p          { font-size: 15px; }
  .hero-cta        { margin-top: 34px; max-width: 470px; }
  .hero-foot       { margin-top: 40px; }

  .mq         { padding: 26px 0 30px; gap: 12px; }
  .mq-track-a { gap: 12px; animation-duration: 30s; }
  .mq-track-b { gap: 12px; animation-duration: 38s; }
  .mq-box     { width: 250px; height: 178px; }

  .sec         { padding: 104px 56px; }
  .sec-narrow  { padding: 104px 56px; max-width: 920px; margin: 0 auto; }
  .sec-dark    { padding: 104px 56px; }
  .sec-booking { padding: 104px 56px; }

  .head-row   { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; }
  .head-block { max-width: 640px; }
  .head-p     { margin: 0; max-width: 320px; padding-bottom: 8px; }
  .h2         { font-size: 76px; }
  .h2-big     { font-size: 108px; }

  .rail-shell { margin-top: 52px; padding: 0 72px; }
  .rail       { margin: 0; padding: 0; align-items: stretch; }
  .cat-card   { width: calc((100% - 32px) / 3); scroll-snap-align: start; }
  /* Con 3 tarjetas a la vista, mezclar proporciones (1/1 y 4/5) y encoger las
     inactivas con scale(.94) dejaba alturas y pastillas desalineadas.
     En escritorio: misma proporción para todas y sin escala — quedan a ras.
     La activa se sigue distinguiendo por opacidad y borde dorado. */
  .cat-box,
  .cat-box[data-aspect="square"],
  .cat-box[data-aspect="tall"] { aspect-ratio: 4 / 5; }
  .cat-card   { transform: none; }
  .cat-card.is-active { transform: none; }
  .rail-btn-side  { display: grid; }
  .rail-foot      { padding: 0 72px; }
  .rail-foot-btns { display: none; }

  .feat       { height: 660px; }
  .feat-inner { padding: 0 56px 60px; }
  .feat-title { font-size: 92px; }
  .feat-p     { max-width: 480px; }
  .feat-ghost { right: 40px; top: 96px; font-size: 150px; }

  .grid-steps { margin-top: 60px; grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .cta-row    { margin-top: 52px; flex-direction: row; }

  .about-row  { margin-top: 56px; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .about-img  { margin-top: 0; }

  .film-frame  { margin-top: 44px; }
  .film-picker { margin-top: 18px; gap: 14px; }
  .film-chip   { width: 200px; }
  .film-chip-t { font-size: 10.5px; }
  .film-foot   { flex-direction: row; align-items: center; justify-content: space-between; }

  .award-thumbs { grid-template-columns: repeat(4, 1fr); }
  .awards-list  { margin-top: 44px; grid-template-columns: repeat(3, 1fr); }

  .grid-tests { margin-top: 52px; grid-template-columns: repeat(3, 1fr); gap: 32px; }

  /* En escritorio ancho esta sección quedaba desbalanceada: los campos se estiraban
     ~860px y bajo la columna izquierda quedaba un hueco muerto. Ahora el formulario
     es un panel de ancho acotado y la columna izquierda respira con el mismo ritmo. */
  .contact-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .contact-card {
    margin-top: 0; max-width: 540px;
    border: 1px solid rgba(240,208,80,.16);
    border-top: 1px solid rgba(240,208,80,.45);
    background: linear-gradient(180deg, rgba(240,208,80,.035), rgba(255,255,255,0) 55%);
    padding: 30px 32px 34px;
  }
  .contact-links { max-width: 400px; }
  .studio-block  { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(240,208,80,.16); max-width: 400px; }

  .footer      { padding: 60px 56px 44px; }
  .footer-row  { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
  .footer-word { margin-top: 44px; font-size: 116px; }

  .menu-bar    { padding: 22px 40px; }
  .lb-bar      { padding: 22px 26px 16px; }
  .booking-card{ max-width: 520px; padding: 34px; }
  .faq-q       { font-size: 16px; }
  .splash-l1, .splash-l2 { font-size: 104px; }
}

/* ==========================================================================
   ÚLTIMA PALABRA — anulaciones de rendimiento
   Van al FINAL a propósito: con la misma especificidad gana la regla que
   aparece después. Puestas antes, la definición base del marquee las pisaba
   (medido el 06/08: seguían corriendo 32 animaciones jrMqZoom en móvil).
   ========================================================================== */
@media (max-width: 1023px) {
  /* 32 tiles animándose = 32 capas compuestas a la vez, y en pantalla solo se
     ven 2 o 3. La banda sigue desfilando —que es el movimiento que importa—;
     lo único que se quita es el zoom individual de cada foto. */
  .mq-box img { animation: none !important; }
}