/* Benny Corral — hoja compartida del sitio (español en la raíz, inglés en en/)
   Diseño heredado del Wix: papel gris de fondo, títulos en barras negras,
   bloque rojo con polaroids y el carrete de cine de la portada. */

/* ---------------------------------------------------------------------------
   1. Variables
   --------------------------------------------------------------------------- */
:root {
  /* Colores del Wix */
  --rojo: #BC3427;          /* acento; con texto blanco da 5.7:1 */
  --rojo-oscuro: #7E1F16;   /* el mismo rojo, más oscuro, para texto sobre papel o beige (6.1:1) */
  --negro: #12110F;         /* negro de tinta, cálido como el papel; el #000 queda solo para la película */
  --tinta: #0E0D0B;         /* franjas oscuras: premios, laureles, pie */
  --gris: #DCDAD3;          /* marcos de las polaroids, texto del pie */
  --beige: #F0EFE8;         /* fondo de tarjetas */
  --gris-hover: #959595;    /* hover del menú en el Wix; aquí solo sobre negro */
  --dorado: #C7B299;        /* icono de cámara del Wix; laureles */
  --papel: #CBCBC4;         /* tono medio de la textura, de respaldo */
  --texto: var(--negro);
  --texto-suave: #2A2824;
  --texto-tenue: #57534A;   /* frases de entrada y notas (4.7:1 sobre el papel) */
  --sombra: 24, 18, 10;     /* las sombras llevan el tono del papel, no negro puro */

  /* Tipografías (equivalentes libres de Impact y Arial Black) */
  --font-display: 'Anton', Impact, 'Arial Narrow', 'Avenir Next Condensed', 'Roboto Condensed', sans-serif-condensed, sans-serif;
  --font-menu: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  --font-body: 'Open Sans', Arial, Helvetica, sans-serif;

  /* Medidas */
  --gutter: 16px;
  --container: 1100px;
  --section-gap: clamp(56px, 8vw, 108px);
  --brand-h: clamp(118px, 10.4vw, 150px);   /* renglón del nombre (escritorio) */
  --brand-size: clamp(46px, 4.9vw, 70px);   /* letra del nombre; el oficio se mide contra ella */
  --nav-h: 48px;                         /* renglón del menú (escritorio) */
  --header-mobile-h: 64px;
  --header-offset: var(--nav-h);         /* lo que tapa el header fijo */

  /* Alto de las cabeceras de foto de las páginas interiores. El carrete de la
     portada mide lo mismo con sus perforaciones (fotos + 2 × 12 %). */
  --hero-h: clamp(250px, min(calc(36vw + 60px), 72vh), 540px);
  --reel-h: calc(var(--hero-h) / 1.24);
  --perf-band: calc(var(--reel-h) * 0.12);
  --reel-gap: 16px;

  /* Grano de película para los bloques de color plano (rojo, negro), que junto
     al papel con textura se veían lisos. Oscuro sobre rojo, claro sobre negro. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grano-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .04 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --salida: cubic-bezier(0.2, 0.7, 0.2, 1);   /* curva de las entradas: rápida al inicio, frena suave */

  /* Color del anillo de foco; se cambia a blanco sobre fondos oscuros */
  --foco: #000;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }
@media (max-width: 900px) { :root { --header-offset: var(--header-mobile-h); } }

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Lo que tapa el header fijo, para anclas y foco. Va solo aquí: sumado a un
     scroll-margin-top en las secciones, el margen se duplicaba. */
  scroll-padding-top: calc(var(--header-offset) + 8px);
  /* Nada debe salirse a los lados; si algo se sale, no aparece la barra horizontal */
  overflow-x: clip;
}
/* Desplazamiento suave solo después de aterrizar en el #ancla (ver initLanding) */
html:not(.js), html.is-landed { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--papel);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Textura de papel del Wix: fija detrás de todo, a pantalla completa (tiene
   viñeta, así que no se puede repetir), con la capa #DBDBDB al 17 %.
   En un ::before fijo porque iOS no respeta background-attachment: fixed. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(219, 219, 219, 0.17), rgba(219, 219, 219, 0.17)),
    url("../assets/texturas/214ec6_3b86be8b75c276fe06abfb9c8f473244.avif") center / cover no-repeat,
    var(--papel);
  pointer-events: none;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
img, svg { display: block; }

a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}
.on-dark { --foco: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: 8px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--negro);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; --foco: #fff; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

main:focus { outline: none; }

/* Título de sección en barra negra (Anton blanco), como en el Wix */
.bar-title {
  display: block;
  margin: 0 0 clamp(20px, 3vw, 32px);
  padding: 0.28em 0.6em 0.32em;
  background: var(--negro);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.bar-title--rojo { background: var(--grano), var(--rojo); }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid var(--negro);
  background: var(--negro);
  color: #fff;
  font-family: var(--font-menu);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}
.btn:hover { background: var(--rojo); border-color: var(--rojo); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--claro { background: transparent; color: var(--negro); }
.btn--claro:hover { background: var(--negro); border-color: var(--negro); color: #fff; }
.btn--blanco { background: #fff; border-color: #fff; color: var(--negro); }
.btn--blanco:hover { background: var(--negro); border-color: var(--negro); color: #fff; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* Enlace de texto rojo oscuro con icono («Ver carpeta de producción») */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  color: var(--rojo-oscuro);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.text-link:hover { color: var(--negro); text-decoration: underline; text-underline-offset: 3px; }
.text-link svg { width: 18px; height: 18px; flex: none; transition: transform 0.2s var(--salida); }
.text-link:hover svg:last-child { transform: translate(2px, -2px); }
.text-link small { font-weight: 400; color: var(--texto-suave); font-size: 12px; white-space: nowrap; }

.section { padding-block: var(--section-gap) 0; }
#secciones { padding-top: clamp(28px, 4vw, 44px); }
/* Como en el Wix: sin evento próximo, el bloque rojo se monta sobre el borde
   inferior del carrete (las perforaciones y un poco de las fotos) */
.next-event[hidden] + #secciones { padding-top: 0; }
.next-event[hidden] + #secciones .featured-box {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--perf-band) - clamp(14px, 3vw, 44px));
}
.reel:has(~ .next-event[hidden]) .dashed-rule { display: none; }

/* ---------------------------------------------------------------------------
   3. Header y menú
   --------------------------------------------------------------------------- */
/* En escritorio el header no es fijo, como en el Wix: al bajar, el renglón del
   nombre se va con la página y el del menú se queda arriba (sticky con top
   negativo, sin JS y sin saltos). El fondo es la misma textura fija de la
   página, así que no se nota el borde mientras no está pegado. */
.site-header {
  position: sticky;
  top: calc(-1 * var(--brand-h));
  z-index: 50;
  background:
    linear-gradient(rgba(219, 219, 219, 0.17), rgba(219, 219, 219, 0.17)) fixed,
    url("../assets/texturas/214ec6_3b86be8b75c276fe06abfb9c8f473244.avif") center / cover no-repeat fixed,
    var(--papel);
  transition: box-shadow 0.25s;
}
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--rojo);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: avance linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
  @keyframes avance { to { transform: scaleX(1); } }
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(var(--sombra), 0.25), 0 6px 16px rgba(var(--sombra), 0.12); }

.header-brand {
  position: relative;
  z-index: 3;   /* por encima del fondo oscuro del menú móvil: tocar el nombre lleva a Inicio */
  /* Una sola columna del ancho del nombre, centrada: el oficio se ajusta a ella */
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  align-content: center;
  height: var(--brand-h);
  padding-inline: var(--gutter);
}
/* Debajo del nombre y a su mismo margen: empieza y termina exactamente donde
   «BENNY CORRAL». No ensancha la columna (width: 0 + min-width: 100 %), mide algo
   menos que el nombre y la justificación reparte lo que falta entre las letras,
   así que los dos bordes coinciden con cualquier pantalla y aunque el navegador
   redondee distinto el ancho de las letras. Sin text-justify, el espacio va entre
   las palabras. El 0.06em de más compensa el que el letter-spacing deja tras la
   última letra. */
.brand-tagline {
  width: 0;
  min-width: calc(100% + 0.06em);
  margin: calc(var(--brand-size) * 0.13) 0 0;
  color: var(--texto-suave);
  font-family: 'Montserrat', var(--font-body);
  font-weight: 600;
  font-size: calc(var(--brand-size) * 0.186);
  letter-spacing: 0.06em;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-wrap { margin: 0; font-size: inherit; line-height: 1; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  color: var(--negro);
  font-family: var(--font-display);
  font-size: var(--brand-size);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-name { letter-spacing: 0.005em; }
.brand-slash { margin-inline: 0.04em 0.08em; }
.brand-logo {
  flex: none;
  width: auto;
  height: 0.92em;
}

/* El header pegado ya está a la vista: sin esto, el scroll-padding-top de html
   hacía que el navegador subiera la página al enfocar el menú o el botón ☰. */
.site-header a, .site-header button { scroll-margin-top: calc(-1 * (var(--header-offset) + 8px)); }
/* Con la página abajo el renglón del nombre queda fuera (top negativo): si recibe
   el foco del teclado, el header baja completo para que se vea. */
.site-header:has(.brand:focus-visible) { top: 0; }

/* Botón de menú (solo en móvil) */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--negro);
  color: #fff;
  cursor: pointer;
}
.nav-toggle:active, .nav-close:active { transform: scale(0.94); }
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }

.nav-backdrop { display: none; }
.nav-panel-head, .nav-panel-foot { display: none; }

/* Menú de escritorio */
.site-nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
}
.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.9vw, 32px);   /* ocho enlaces: caben en un renglón desde el corte al menú móvil */
  list-style: none;
}
.nav-list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--negro);
  font-family: var(--font-menu);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* El gris #959595 del Wix casi no se lee sobre el papel: el hover subraya en rojo */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 3px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); background: var(--negro); }

/* Selector de idioma: lo arma el JS solo si la página tiene traducción */
.lang-slot:empty { display: none; }
.header-tools {
  position: absolute;
  top: 8px;
  right: var(--gutter);
  z-index: 4;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  font-family: var(--font-menu);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.lang-switch a, .lang-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  color: var(--negro);
  text-decoration: none;
}
.lang-switch span[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--rojo); text-underline-offset: 5px; }
.lang-switch a:hover { color: var(--rojo-oscuro); }
.lang-switch li + li::before { content: "/"; margin-right: 2px; color: rgba(0, 0, 0, 0.45); }

/* Corte al menú móvil: antes de que los 7 enlaces dejen de caber en un renglón */
@media (max-width: 900px) {
  .site-header {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--header-mobile-h);
    padding-inline: var(--gutter);
  }
  .header-brand { display: flex; flex-direction: column; height: auto; padding: 0; align-items: flex-start; justify-content: flex-start; min-width: 0; }
  /* El oficio también en el celular, pequeño y bajo el nombre */
  .brand-tagline {
    /* Aquí va a la izquierda, al mismo margen que el nombre; a su ancho no cabría legible */
    width: auto;
    min-width: 0;
    text-align: left;
    text-align-last: auto;
    margin-top: -6px;   /* el enlace del nombre mide 44 px para el dedo; el texto queda centrado */
    /* Más cuerpo y menos espaciado: mide casi lo mismo de ancho y se lee mejor que a 9 px */
    font-size: clamp(9.5px, 2.75vw, 11px);
    letter-spacing: 0.05em;
    line-height: 1.2;
  }
  .brand { font-size: clamp(25px, 7.2vw, 36px); }   /* con el oficio debajo, más de 36 px no cabe en los 64 px del header */
  .header-tools { display: none; }
  .nav-toggle { display: block; }
  html:not(.js) .nav-toggle { display: none; }
  .brand { min-height: 44px; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  /* Panel lateral derecho, como en el Wix móvil */
  .site-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 5;
    width: min(330px, 86vw);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: var(--beige);
    box-shadow: -8px 0 30px rgba(var(--sombra), 0.25);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;   /* cerrado: el Tab no entra */
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform 0.3s ease, visibility 0s; }

  .nav-panel-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: var(--header-mobile-h);
    padding: 0 var(--gutter);
  }
  .nav-close {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--negro);
    color: #fff;
    cursor: pointer;
  }
  .nav-close span {
    position: absolute;
    left: 11px; top: 21px;
    width: 22px; height: 2px;
    background: currentColor;
  }
  .nav-close span:first-child { transform: rotate(45deg); }
  .nav-close span:last-child { transform: rotate(-45deg); }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 16px;
  }
  .nav-list li + li { border-top: 1px solid rgba(0, 0, 0, 0.12); }
  .nav-list a {
    justify-content: flex-end;
    min-height: 52px;
    font-size: 15px;
    letter-spacing: 0.12em;
  }
  .nav-list a::after { display: none; }
  .nav-list a:hover { color: var(--rojo); }
  .nav-list a[aria-current="page"] { color: var(--rojo); }   /* 5:1 sobre el beige */

  .nav-panel-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding: 16px var(--gutter) 24px;
  }
}

/* Pantallas de 320 px: las últimas letras del oficio quedaban bajo el botón del menú */
@media (max-width: 340px) {
  .brand-tagline { font-size: 8px; letter-spacing: 0.06em; }
}

/* ---------------------------------------------------------------------------
   4. Carrete de cine (portada)
   --------------------------------------------------------------------------- */
.reel { --foco: #fff; }
.reel-strip {
  position: relative;
  background: #000;
  overflow: hidden;
}

/* Perforaciones: un SVG dentro del CSS, vectorial (nítido en cualquier
   pantalla). Cada tira es más ancha que la pantalla para que el JS pueda
   correrla junto con las fotos sin que se vea el borde. */
.reel-perf {
  height: var(--perf-band);
  overflow: hidden;
}
.reel-perf-inner {
  height: 100%;
  width: calc(100% + 4 * var(--perf-band));
  margin-left: calc(-2 * var(--perf-band));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 48'%3E%3Crect x='8' y='16.5' width='30' height='15' rx='3.5' fill='%23fff'/%3E%3C/svg%3E") 0 50% / calc(var(--perf-band) * 46 / 48) 100% repeat-x;
}

/* Sin JS (o con «reducir movimiento») el carrete es una fila que se recorre a mano */
.reel-viewport {
  height: var(--reel-h);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #5a5a5a #000;
  user-select: none;
  -webkit-user-select: none;
}
.reel-track {
  display: flex;
  height: 100%;
  width: max-content;
  list-style: none;
}
.reel-item {
  flex: none;
  height: 100%;
  margin-right: var(--reel-gap);   /* margen y no gap: así el ciclo empata exacto */
}
.reel-link {
  position: relative;
  display: block;
  height: 100%;
  cursor: zoom-in;
}
.reel-link img {
  width: auto;
  height: 100%;
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
}
.reel-link:focus-visible { outline: 4px solid #fff; outline-offset: -4px; }
.reel-link:focus-visible img { opacity: 0.85; }

/* Con JS el orden se sortea antes de mostrar la tira; si el JS fallara, a los
   2 s aparece igual (la animación de respaldo la deja visible). */
html.js .reel-track { opacity: 0; transition: opacity 0.5s; animation: reel-respaldo 0s 2s forwards; }
html.js .reel-track.is-ready { opacity: 1; animation: none; }
@keyframes reel-respaldo { to { opacity: 1; } }

/* Con JS y movimiento: avanza solo, se arrastra con el mouse o el dedo */
.reel-viewport.is-live {
  overflow: hidden;
  touch-action: pan-y;   /* lo vertical sigue moviendo la página */
  cursor: grab;
}
.reel-strip.is-live .reel-track,
.reel-strip.is-live .reel-perf-inner { will-change: transform; }
.reel-viewport.is-dragging,
.reel-viewport.is-dragging .reel-link { cursor: grabbing; }

/* Línea punteada debajo del carrete (FiveGridLine del Wix) */
.dashed-rule {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: clamp(20px, 3vw, 32px) auto 0;
  border: 0;
  border-top: 2px dashed rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
   5. Próximo evento
   --------------------------------------------------------------------------- */
.next-event { padding-top: clamp(24px, 4vw, 40px); }
.event-ticket {
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--beige);
  box-shadow: 0 10px 30px rgba(var(--sombra), 0.18);
}
.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: clamp(96px, 16vw, 168px);
  padding: 20px 28px 20px 20px;   /* más aire del lado de la muesca */
  background: var(--rojo);
  color: #fff;
  text-align: center;
  /* borde de boleto: muescas semicirculares a la derecha */
  -webkit-mask: radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px);
  mask: radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px);
}
.event-day { white-space: nowrap; font-family: var(--font-display); font-size: clamp(44px, 7vw, 72px); line-height: 1; }
.event-month { font-family: var(--font-menu); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }
.event-info { padding: clamp(18px, 3vw, 32px); }
.event-kicker {
  margin: 0 0 6px;
  color: var(--rojo-oscuro);
  font-family: var(--font-menu);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.event-title { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 12px; }
.event-meta { list-style: none; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.event-meta li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.event-meta svg { width: 20px; height: 20px; flex: none; color: var(--rojo-oscuro); }
.event-info .btn { margin: 0; }

@media (max-width: 520px) {
  .event-ticket { grid-template-columns: 1fr; }
  .event-date {
    flex-direction: row;
    gap: 12px;
    padding: 12px 16px;
    -webkit-mask: none;
    mask: none;
  }
  .event-day { font-size: 40px; }
}

/* ---------------------------------------------------------------------------
   6. Secciones destacadas (bloque rojo con polaroids)
   --------------------------------------------------------------------------- */
.featured-box {
  --foco: #fff;
  width: min(100% - 2 * var(--gutter), 1090px);
  margin-inline: auto;
  padding: clamp(16px, 2.8vw, 30px);
  background: var(--grano), var(--rojo);
  box-shadow: 0 10px 28px rgba(var(--sombra), 0.25);
}
/* En el Wix el título era negro sobre negro: aquí va blanco */
.featured-box .bar-title {
  margin-bottom: clamp(14px, 2vw, 20px);
  font-size: clamp(26px, 4.6vw, 56px);
  text-align: center;
}
.featured-list {
  display: grid;
  grid-auto-flow: column;   /* un renglón con las que haya: 5 hoy, 4 o 6 mañana */
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  list-style: none;
}
.feature-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #fff;
  text-decoration: none;
}
.feature-photo {
  display: block;
  padding: 10px 10px 34px;
  background: var(--gris);
  box-shadow: 0 4px 12px rgba(var(--sombra), 0.25);
  transform: rotate(-1.1deg);
  transition: transform 0.35s var(--salida), box-shadow 0.25s ease;
}
.featured-list li:nth-child(even) .feature-photo { transform: rotate(0.9deg); }
.featured-list li:nth-child(3n) .feature-photo { transform: rotate(-0.4deg); }
.feature-photo img {
  width: 100%;
  aspect-ratio: 165 / 250;
  object-fit: cover;
}
.feature-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;   /* todas las barras del mismo alto aunque un rótulo ocupe dos renglones */
  margin-top: 10px;
  padding: 7px 6px;
  background: var(--negro);
  color: #fff;
  font-weight: 700;
  font-size: clamp(12px, 1.25vw, 15px);
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Al pasar el mouse la foto se endereza y se levanta */
.featured-list li .feature-link:hover .feature-photo,
.featured-list li .feature-link:focus-visible .feature-photo { transform: translateY(-6px) rotate(0deg) scale(1.02); box-shadow: 0 14px 26px rgba(var(--sombra), 0.38); }
.featured-list li .feature-link:active .feature-photo { transform: translateY(-1px) rotate(0deg) scale(0.985); }
.feature-link:hover .feature-label { background: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; }

/* Tablet: las 5 siguen en un renglón, con marco y etiqueta más compactos
   (en 3 + 2 cada polaroid medía 400 px de alto y el bloque rojo, 900) */
@media (max-width: 899px) {
  .featured-list { gap: 10px; }
  .feature-photo { padding: 7px 7px 20px; }
  .feature-label { margin-top: 8px; padding-inline: 2px; font-size: 12px; letter-spacing: 0; }
}
/* Celular: carrusel que se desliza con el dedo (en el Wix no se veía). Cada
   polaroid mide un poco menos de media pantalla para que asome la tercera y
   se entienda que hay más. */
@media (max-width: 699px) {
  .featured-box { padding-inline: 0; }
  .featured-box .bar-title { margin-inline: 16px; }
  .featured-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.6) transparent;
  }
  .featured-list li { flex: none; width: min(38vw, 190px); scroll-snap-align: start; }
}
.featured-mobile-link { display: none; }
@media (max-width: 699px) {
  .featured-mobile-link { display: block; margin: 10px 16px 0; }
  .featured-mobile-link a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; text-underline-offset: 3px; }
}
/* Teléfono en horizontal: todas en un renglón, con marco y rótulo compactos */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .featured-list { gap: 10px; }
  .feature-photo { padding: 6px 6px 18px; }
  .feature-label { font-size: 11px; letter-spacing: 0; padding-inline: 2px; }
}
/* …y en los angostos (carrusel) se reparten el ancho en vez de deslizarse. Va
   solo aquí: de 700 px en adelante la lista es una cuadrícula y un ancho en
   porcentaje se medía contra su columna (cada polaroid quedaba de 24 px). */
@media (max-width: 699px) and (max-height: 500px) and (orientation: landscape) {
  .featured-list li { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---------------------------------------------------------------------------
   7. Videoclips destacados
   --------------------------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px) clamp(16px, 2.2vw, 28px);
  list-style: none;
}
.video-card {
  display: block;
  color: var(--negro);
  text-decoration: none;
}
.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 6px solid #000;   /* marco negro, como el carrete */
  box-shadow: 0 6px 18px rgba(var(--sombra), 0.22);
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* hqdefault es 4:3 con franjas negras: se recortan */
  transition: transform 0.4s ease;
}
.play-icon {
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--sombra), 0.45);
  transition: transform 0.2s ease, background-color 0.2s;
}
.play-icon svg { width: 26px; height: 26px; margin-left: 3px; }
.video-card:hover .play-icon,
.video-card:focus-visible .play-icon { transform: scale(1.1); background: #000; }
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-card:active .play-icon { transform: scale(0.96); }
.video-title {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
}
.video-title strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.12; letter-spacing: 0.01em; }
.video-artist { display: block; margin-top: 3px; color: var(--texto-suave); }
.video-card:hover .video-title strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.section-cta { margin: clamp(28px, 4vw, 40px) 0 0; text-align: center; }

/* Escritorio: el primer videoclip ocupa dos columnas y dos renglones; los otros
   cinco lo rodean (dos a la derecha, tres abajo) */
@media (min-width: 900px) {
  .video-grid--destacado > li:first-child { grid-column: span 2; grid-row: span 2; }
  .video-grid--destacado > li:first-child .video-card { display: flex; flex-direction: column; height: 100%; }
  /* Crece hasta el alto de los dos renglones vecinos; solo o con un vecino, se queda en 16:9 */
  .video-grid--destacado > li:first-child .video-thumb { flex: 1 0 auto; }
  /* La portada grande es 4:3 con franjas negras delgadas: se agranda un poco para que no asomen */
  .video-grid--destacado > li:first-child .video-thumb img { position: absolute; inset: 0; transform: scale(1.08); }
  .video-grid--destacado > li:first-child .video-card:hover .video-thumb img { transform: scale(1.12); }
  .video-grid--destacado > li:first-child .play-icon { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .video-grid--destacado > li:first-child .play-icon svg { width: 36px; height: 36px; margin-left: 4px; }
  .video-grid--destacado > li:first-child .video-title strong { font-size: clamp(30px, 3.2vw, 40px); }
  .video-grid--destacado > li:first-child .video-artist { font-size: 16px; }
}
@media (max-width: 899px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Celular: lista compacta, portada a la izquierda */
@media (max-width: 519px) {
  .video-grid { grid-template-columns: 1fr; gap: 14px; }
  .video-grid .video-card { display: grid; grid-template-columns: 46% 1fr; gap: 12px; align-items: center; }
  .video-grid .video-thumb { border-width: 4px; }
  .video-grid .video-title { margin-top: 0; font-size: 14px; }
  .video-grid .play-icon { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .video-grid .play-icon svg { width: 18px; height: 18px; margin-left: 2px; }
}

/* ---------------------------------------------------------------------------
   8. Premios (franja negra con laureles)
   --------------------------------------------------------------------------- */
.awards {
  margin-top: var(--section-gap);
  padding-block: clamp(40px, 6vw, 72px);
  background: var(--grano-claro), var(--tinta);
  color: #fff;
}
.awards-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 40px);
  list-style: none;
}
.award {
  flex: 0 1 calc((100% - 2 * clamp(16px, 3vw, 40px)) / 3);
  text-align: center;
}
.award-badge {
  position: relative;
  width: min(100%, 210px);
  margin: 0 auto 10px;
  aspect-ratio: 120 / 100;
  display: grid;
  place-items: center;
}
.laurel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--dorado);
}
.award-name {
  position: relative;
  max-width: 56%;
  padding-top: 4%;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.award-year {
  display: block;
  margin-top: 6px;
  color: var(--dorado);
  font-family: var(--font-menu);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.award-category { margin: 0 0 2px; color: #fff; font-weight: 700; font-size: 15px; }
.award-work { margin: 0; color: var(--gris); font-size: 14px; }
.award-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--dorado);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.award-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.award-link svg { width: 14px; height: 14px; }

/* Pantalla ancha: cinco y cuatro; en 3 × 3 la franja medía más que la pantalla */
@media (min-width: 1100px) {
  .awards-list { column-gap: 24px; }
  .award { flex-basis: calc((100% - 4 * 24px) / 5); }
  .award-name { font-size: 21px; }
}
@media (max-width: 599px) {
  .award { flex-basis: calc((100% - clamp(16px, 3vw, 40px)) / 2); }
  /* Laureles más chicos: con nueve premios la franja medía 1 600 px */
  .awards-list { row-gap: 22px; }
  .award-badge { width: min(100%, 150px); margin-bottom: 6px; }
  .award-name { font-size: 16px; }
  .award-year { margin-top: 4px; font-size: 12px; }
  .award-category { font-size: 13px; }
  .award-work { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   9. Proyectos en desarrollo
   --------------------------------------------------------------------------- */
.projects-group {
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
  list-style: none;
}
.projects-group + .projects-group { margin-top: clamp(20px, 2.6vw, 28px); }
.projects-group--movies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projects-group--series { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--beige);
  box-shadow: 0 6px 20px rgba(var(--sombra), 0.16);
}
.project-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  min-height: 38px;
  padding: 0 14px;
  background: var(--negro);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.project-bar svg { width: 22px; height: 22px; color: var(--dorado); }
.project-body {
  flex: 1;
  display: grid;
  gap: 16px 20px;
  padding: clamp(16px, 2.2vw, 24px);
  align-content: start;
}
.project--movie .project-body {
  grid-template-columns: minmax(120px, 0.8fr) 1.2fr;
  grid-template-areas: "title title" "media facts" "actions actions";
}
.project-title { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 32px); }
.project--movie .project-title { grid-area: title; }
.project--movie .project-media { grid-area: media; }
.project--movie .project-facts { grid-area: facts; }
.project--movie .project-actions { grid-area: actions; }
.project-title img { height: 44px; width: auto; max-width: 100%; }   /* a la par del título en Anton de la otra película */
.project--movie .project-title { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; }   /* mismo alto con logo o con texto: los pósters quedan a la par */
.project--movie .project-title img { margin-inline: auto; }
.project-media { margin: 0; }
.project-poster {
  width: 100%;
  aspect-ratio: 164 / 220;
  object-fit: cover;
  border: 6px solid #fff;
  box-shadow: 0 8px 18px rgba(var(--sombra), 0.3);
}
.project-facts { margin: 0; display: grid; gap: 10px; align-content: start; }
.project-facts div { min-width: 0; }
.project-facts dt { font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.project-facts dd { margin: 0; font-size: 14px; line-height: 1.4; }
.project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin: 0;
  align-self: end;   /* con la última fila elástica (abajo), los enlaces quedan alineados entre tarjetas vecinas */
}
@media (min-width: 900px) { .project--movie .project-body { grid-template-rows: auto auto 1fr; } }
@media (min-width: 1024px) { .project--series .project-body { grid-template-rows: auto auto auto 1fr; } }

/* Series: logo, video y ficha en dos columnas */
.project--series .project-body { grid-template-columns: 1fr; }
/* Los logos, centrados como los de las películas */
.project-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;   /* el de I'm Available, con su fondo oscuro */
  /* Sin logo todavía, el nombre va escrito: mismo título que el de las películas */
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 32px);
  text-align: center;
}
.project-logo img { height: 56px; width: auto; max-width: 100%; }
/* I'm Available viene en blanco: una placa oscura del tamaño del logo, no una barra a todo lo ancho */
.project-logo--oscuro { justify-self: center; width: fit-content; max-width: 100%; padding: 10px 18px; background: #111; }
.project--series .project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.project .video-thumb { border-width: 4px; }
.project .play-icon { width: 52px; height: 52px; margin: -26px 0 0 -26px; }

@media (max-width: 1023px) {
  .projects-group--series { grid-template-columns: 1fr; }
  .project--series .project-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "logo logo" "video facts" "actions actions";
  }
  .project--series .project-logo { grid-area: logo; }
  .project--series .project-video { grid-area: video; }
  .project--series .project-facts { grid-area: facts; }
  .project--series .project-actions { grid-area: actions; }
}
@media (max-width: 899px) {
  .projects-group--movies { grid-template-columns: 1fr; }
  .project--movie .project-body { grid-template-columns: minmax(140px, 220px) 1fr; }
}
@media (max-width: 599px) {
  .project--series .project-body {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .project--series .project-body > * { grid-area: auto; }
  /* Películas: el póster chico junto a la ficha, como en escritorio (solo, a
     240 px, la tarjeta medía casi dos pantallas y la ficha se partía) */
  .project--movie .project-body { grid-template-columns: minmax(96px, 34%) 1fr; gap: 14px; }
  .project-poster { border-width: 4px; }
  .project-facts dt { font-size: 16px; }
  .project-facts dd { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   10. Últimas noticias
   --------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 28px);
  list-style: none;
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--beige);
  box-shadow: 0 6px 20px rgba(var(--sombra), 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-card:active { transform: translateY(-1px); }
.news-card:hover:not(:active) { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(var(--sombra), 0.2); }
.news-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.news-media img { width: 100%; height: 100%; object-fit: cover; }
/* Foto o miniatura que no cargó: se esconde el icono roto y queda el fondo de su caja */
img.is-missing { visibility: hidden; }
.news-media:has(img.is-missing) { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 12px), var(--grano), var(--rojo); }
.news-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 20px; }
.news-date { font-variant-numeric: tabular-nums; margin: 0 0 6px; color: var(--texto-suave); font-size: 13px; }
.news-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.15; }
.news-title a { text-decoration: none; }
/* Toda la tarjeta responde al clic; el enlace sigue siendo solo el título */
.news-title a::after { content: ""; position: absolute; inset: 0; }
.news-card:hover .news-title a { text-decoration: underline; text-underline-offset: 3px; }
.news-card:focus-within { outline: 3px solid var(--foco); outline-offset: 3px; }
.news-title a:focus-visible { outline: none; }
.news-excerpt { margin: 0 0 12px; font-size: 14px; }
.news-more { margin: auto 0 0; color: var(--rojo-oscuro); font-weight: 700; font-size: 14px; }
.news-more::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform 0.25s var(--salida); }
.news-card:hover .news-more::after { transform: translateX(5px); }

@media (max-width: 759px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-card { display: grid; grid-template-columns: 40% 1fr; }
  .news-media { aspect-ratio: auto; min-height: 0; }
  /* La miniatura de YouTube es 4:3 con franjas negras arriba y abajo (1/8 de
     su alto cada una): se agranda y se sube para que solo se vea el 16:9 */
  .news-media img { position: absolute; top: 0; left: 0; }
  .news-media img[src*="ytimg"] { top: -16.67%; height: 133.34%; }
  .news-body { padding: 12px 14px 14px; }
  .news-title { font-size: 19px; }
  .news-excerpt { display: none; }
}

/* ---------------------------------------------------------------------------
   11. Pie: el final del rollo (una tira de película con fotos cierra la página)
   --------------------------------------------------------------------------- */
.site-footer { margin-top: var(--section-gap); background: var(--grano-claro), var(--tinta); color: #f2efe8; }
.footer-reel { padding: 6px 0; background: #000; overflow: hidden; }
.footer-perf { height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 18'%3E%3Crect x='7' y='3.5' width='24' height='11' rx='2.8' fill='%23f2efe8'/%3E%3C/svg%3E") 0 50% / 38px 18px repeat-x; }
.footer-frames { display: flex; gap: 10px; margin: 0; padding: 10px 0; list-style: none; }
.footer-frames li { flex: none; }
.footer-frames img { display: block; width: auto; height: clamp(72px, 9vw, 120px); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 32px 40px;
  align-items: start;
  padding-top: clamp(32px, 4vw, 44px);
}
.footer-name { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 44px); line-height: 1; text-transform: uppercase; }
.site-footer a { color: #f2efe8; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.footer-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.footer-nav a, .footer-social a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; }
.footer-social { display: grid; justify-items: end; margin: 0; padding: 0; list-style: none; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 24px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-block: 8px;
  border-top: 1px solid #2a2a2a;
  color: #a9a59c;
  font-size: 13px;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: #a9a59c; }
/* Sin gap: en un flex cada pedazo de texto («©», el año, «BC Advertainment») es
   un elemento aparte y quedaban separados como palabras sueltas */
.footer-signature { display: inline-flex; align-items: center; white-space: pre; }
.footer-bottom .back-to-top { gap: 6px; font-weight: 700; }
.footer-bottom .back-to-top svg { width: 16px; height: 16px; transition: transform 0.25s var(--salida); }
.footer-bottom .back-to-top:hover svg { transform: translateY(-3px); }

@media (max-width: 899px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  /* Las redes en un renglón: en columna eran cuatro filas más que bajar */
  .footer-social { display: flex; flex-wrap: wrap; align-content: start; gap: 0 22px; }
}
@media (max-width: 519px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   12. Visor (fotos y YouTube) — <dialog> que crea js/main.js
   --------------------------------------------------------------------------- */
.viewer {
  --foco: #fff;
  --pad-x: 72px;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(6, 6, 6, 0.96);
  color: #fff;
  overflow: hidden;
  overscroll-behavior: contain;
}
.viewer::backdrop { background: rgba(0, 0, 0, 0.5); }
.viewer[open] { display: block; }
.viewer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px max(var(--pad-x), env(safe-area-inset-right)) 28px max(var(--pad-x), env(safe-area-inset-left));
}
.viewer-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}
.viewer-figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  background: #111;
  box-shadow: 0 10px 40px rgba(var(--sombra), 0.6);
}
.viewer-figure iframe {
  display: block;
  width: min(calc(100vw - 2 * var(--pad-x)), calc((100vh - 150px) * 16 / 9));
  width: min(calc(100vw - 2 * var(--pad-x)), calc((100dvh - 150px) * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: #000;
}
.viewer-figure figcaption {
  margin-top: 12px;
  max-width: 60ch;
  color: var(--gris);
  font-size: 14px;
  text-align: center;
}
.viewer-count {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  margin: 0;
  color: #bdbdbd;
  font-family: var(--font-menu);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.viewer-btn {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.viewer-btn:hover { background: var(--rojo); border-color: var(--rojo); }
.viewer-btn svg { width: 22px; height: 22px; }
/* La × siempre dentro de la pantalla, también con el teléfono en horizontal */
.viewer-close {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
}
.viewer-prev, .viewer-next { top: 50%; transform: translateY(-50%); }
.viewer-prev { left: max(12px, env(safe-area-inset-left)); }
.viewer-next { right: max(12px, env(safe-area-inset-right)); }

@media (max-width: 599px) { .viewer { --pad-x: 12px; } }
/* En táctil no hay flechas: se desliza a los lados */
@media (hover: none) and (pointer: coarse) {
  .viewer { --pad-x: 12px; }
  .viewer-prev, .viewer-next { display: none; }
}
@media (max-height: 500px) {
  .viewer-stage { padding-top: 12px; padding-bottom: 12px; }
  .viewer-figure img { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); }
  .viewer-figure iframe { width: min(calc(100vw - 2 * var(--pad-x) - 96px), calc((100dvh - 24px) * 16 / 9)); }
  .viewer-figure figcaption { display: none; }
}

/* ---------------------------------------------------------------------------
   13. Página 404: tira de película cortada y quemada
   --------------------------------------------------------------------------- */
.notfound { padding-block: clamp(40px, 8vw, 96px); }
.notfound-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}
.film-cut {
  --perf-band: clamp(20px, 3vw, 30px);
  position: relative;
  background: #000;
  box-shadow: 0 14px 34px rgba(var(--sombra), 0.35);
  transform: rotate(-3deg);
  /* el corte irregular del extremo derecho */
  clip-path: polygon(0 0, 88% 0, 91% 9%, 87% 22%, 93% 35%, 89% 48%, 95% 61%, 90% 74%, 94% 87%, 89% 100%, 0 100%);
}
.film-cut .reel-perf-inner { width: 100%; margin: 0; }
.film-frames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 10px;
}
.film-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #3a3a3a, #161616);
  color: #f2f2f2;
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, 132px);
  line-height: 1;
}
/* El último fotograma, quemado: el centro se aclara y las orillas se ennegrecen */
.film-frame--quemado {
  position: relative;
  background:
    radial-gradient(ellipse at 45% 55%, rgba(255, 236, 190, 0.95) 0 14%, rgba(240, 150, 60, 0.85) 24%, rgba(150, 50, 10, 0.9) 38%, rgba(30, 8, 0, 0.98) 56%, #000 70%);
  color: rgba(40, 14, 0, 0.75);
  animation: parpadeo 2.6s infinite steps(1);
}
@keyframes parpadeo {
  0%, 100% { filter: brightness(1); }
  47% { filter: brightness(1.18); }
  49% { filter: brightness(0.9); }
  73% { filter: brightness(1.08); }
}
.notfound-copy h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--rojo-oscuro);
  font-family: var(--font-menu);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.notfound-copy p { max-width: 46ch; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 759px) {
  .notfound-layout { grid-template-columns: 1fr; }
  .film-cut { max-width: 460px; }
}

/* ---------------------------------------------------------------------------
   13b. Páginas interiores
   --------------------------------------------------------------------------- */
/* Cabecera de foto con título grande y espaciado (la de Galería y Making of del Wix) */
.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  min-height: var(--hero-h);
  padding: 48px var(--gutter) clamp(24px, 3.5vw, 44px);
  overflow: hidden;
  background: var(--tinta);
  color: #fff;
  text-align: center;
  --foco: #fff;
}
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Solo se oscurece la franja de abajo, donde va el texto; la foto se ve completa */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
  pointer-events: none;
}
.page-hero-text { position: relative; z-index: 1; }
.page-hero h1 {
  margin: 0;
  font-family: 'Montserrat', var(--font-body);
  font-weight: 800;
  font-size: clamp(32px, 6.4vw, 88px);
  line-height: 1.05;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.page-hero p {
  margin: 14px 0 0;
  color: var(--gris);
  font-family: 'Montserrat', var(--font-body);
  font-weight: 700;
  font-size: clamp(13px, 1.9vw, 26px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

html.js .page-hero:not(.hero-slides) > img { animation: foto-entra 1.8s var(--salida) both; }
html.js .page-hero:not(.hero-slides) h1 { animation: titulo-entra 1s 0.1s var(--salida) both; }
html.js .page-hero:not(.hero-slides) .page-hero-text p { animation: sube 0.9s 0.3s var(--salida) both; }
@keyframes foto-entra { from { transform: scale(1.07); } }
@keyframes titulo-entra { from { opacity: 0; letter-spacing: 0.3em; transform: translateY(10px); } }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } }

/* El espacio antes del pie lo pone .site-footer, igual en todas las páginas */

/* Trayectoria: cabecera con 6 fotos que se relevan (como el slideshow del Wix) */
.hero-slides { padding: 0; min-height: var(--hero-h); }
.hero-slides::after { z-index: 1; }
.hero-slides ul { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hero-slide { position: absolute; inset: 0; display: grid; align-items: end; justify-items: center; padding: 48px var(--gutter) clamp(44px, 5vw, 64px); opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { transform: scale(1.06); transition: transform 7s linear; }
.hero-slide.is-active img { transform: scale(1); }
.hero-slide .page-hero-text { z-index: 2; }
/* El título entra después de la foto: raya roja, palabra y subtítulo */
/* La raya roja separa la palabra del subtítulo (solo donde hay subtítulo) */
.hero-slide .page-hero-text p:not(.hero-word)::before { content: ""; display: block; width: 64px; height: 4px; margin: 0 auto 16px; background: var(--rojo); transform: scaleX(0); transition: transform 0.6s 0.9s ease; }
.hero-slide .hero-word, .hero-slide .page-hero-text p { opacity: 0; transform: translateY(18px); transition: opacity 0.7s 0.6s ease, transform 0.7s 0.6s ease; }
.hero-slide .page-hero-text p { transition-delay: 0.85s; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.hero-slide.is-active .page-hero-text p:not(.hero-word)::before { transform: none; }
.hero-slide.is-active .hero-word, .hero-slide.is-active .page-hero-text p { opacity: 1; transform: none; }
.page-hero .hero-word {
  margin: 0;
  color: #fff;
  font-family: 'Montserrat', var(--font-body);
  font-weight: 900;
  font-size: clamp(28px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.hero-slide .page-hero-text p:not(.hero-word) { font-size: clamp(11px, 1.35vw, 18px); letter-spacing: 0.3em; font-weight: 600; }
@media (max-width: 599px) { .hero-slide .page-hero-text p:not(.hero-word) { letter-spacing: 0.14em; } }
.hero-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 4px; }
.hero-dots button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-dots button::before { content: ""; display: block; width: 10px; height: 10px; margin: auto; border: 2px solid #fff; border-radius: 50%; transition: background-color 0.2s, transform 0.2s; }
.hero-dots button:hover::before { background: rgba(255, 255, 255, 0.55); transform: scale(1.2); }
.hero-dots button[aria-current="true"]::before { background: #fff; }

/* Trayectoria: índice de la página, numerado como una lista de tomas */
.page-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px clamp(16px, 3vw, 32px); padding-top: clamp(28px, 4vw, 44px); }
.page-index .kicker-serif { margin: 0; font-size: clamp(19px, 2vw, 24px); white-space: nowrap; }
.page-index ol { counter-reset: toma; display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.page-index li { counter-increment: toma; }
.page-index a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-family: var(--font-menu); font-size: 13px; letter-spacing: 0.03em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.page-index a::before { content: counter(toma, decimal-leading-zero); color: var(--rojo-oscuro); font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; }
.page-index a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 3px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--salida); }
.page-index a:hover::after { transform: scaleX(1); }
.page-index + .section { padding-top: clamp(24px, 3.5vw, 40px); }
.section-jump { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 32px; padding-top: 16px; border-top: 1px solid currentColor; }
.section-jump a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-family: var(--font-menu); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.awards .section-jump { color: #fff; }
/* Celular: un solo renglón que se desliza (en cinco renglones empujaba la biografía una pantalla abajo) */
@media (max-width: 699px) {
  .page-index { display: block; }
  .page-index ol { flex-wrap: nowrap; gap: 0 20px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .page-index ol::-webkit-scrollbar { display: none; }
}

/* Franjas de foto a todo lo ancho entre bloques, con los efectos de Wix:
   «revelar» (la foto queda fija a pantalla completa y la franja es una ventana
   que pasa sobre ella; clip-path recorta la imagen fija) y, con --zoom, además
   se acerca y se desliza despacio (initPhotoBands). Con «reducir movimiento»,
   quieta dentro de la franja. */
.photo-band { position: relative; height: clamp(220px, 34vw, 489px); margin-top: var(--section-gap); overflow: hidden; clip-path: inset(0); background: var(--tinta); }
.photo-band img { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; object-fit: cover; pointer-events: none; }
.photo-band--zoom img { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .photo-band img { position: absolute; height: 100%; }
}

/* Trayectoria: línea de tiempo por etapas (fotos alternadas en escritorio) */
.tl-heading { margin: 0 0 clamp(32px, 5vw, 56px); font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.05; }
.timeline { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(40px, 6vw, 72px); }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: var(--negro); }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 80px; align-items: center; }
.tl-item::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 4px solid var(--papel); border-radius: 50%; background: var(--rojo); }
.tl-photo { margin: 0; }
.tl-photo img { display: block; width: 100%; height: clamp(220px, 24vw, 330px); object-fit: cover; box-shadow: 0 8px 22px rgba(var(--sombra), 0.22); }
.tl-item:nth-child(1) .tl-photo img { object-position: 50% 20%; filter: grayscale(1); }
.tl-item:nth-child(even) .tl-photo { order: 2; }
.tl-item:nth-child(even) .tl-text { text-align: right; }
.tl-year { margin: 0; color: var(--rojo); font-family: var(--font-display); font-size: clamp(56px, 6vw, 84px); line-height: 0.9; }
.tl-text h3 { margin: 8px 0 10px; font-family: var(--font-menu); font-weight: 400; font-size: 19px; text-transform: uppercase; }
.tl-text ul { margin: 0; padding: 0; list-style: none; line-height: 1.7; }
.tl-more { margin: clamp(36px, 5vw, 56px) 0 0; text-align: center; }
@media (max-width: 759px) {
  .timeline::before { left: 11px; }
  .tl-item { grid-template-columns: 1fr; gap: 16px; padding-left: 40px; }
  .tl-item::after { left: 11px; top: 6px; margin-top: 0; }
  .tl-item:nth-child(even) .tl-photo { order: 0; }
  .tl-item:nth-child(even) .tl-text { text-align: left; }
}

/* Frase de entrada en cursiva antes de un título (tono de revista) */
.kicker-serif { margin: 0 0 6px; color: var(--texto-tenue); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; text-transform: none; letter-spacing: 0; }
.kicker-serif--claro, .on-dark .kicker-serif { color: #cdc9bf; }
.footer-kicker { margin: 14px 0 0; font-size: 22px; }

/* Texto corrido */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1em; line-height: 1.7; }
.prose h2, .prose h3 { margin: 1.6em 0 0.5em; font-family: var(--font-display); font-weight: 400; line-height: 1.15; }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); }
.prose h3 { font-size: 21px; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; line-height: 1.6; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.two-col .prose { max-width: none; }
.two-col .prose:first-child > p:first-child { font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; line-height: 1.5; }
@media (max-width: 759px) { .two-col { grid-template-columns: 1fr; } }

/* Cita de Tarkovsky: frase en Fraunces cursiva, con la raya roja de las cabeceras */
.quote {
  margin: var(--section-gap) auto 0;
  max-width: 860px;
  text-align: center;
}
.quote::before { content: ""; display: block; width: 64px; height: 4px; margin: 0 auto 26px; background: var(--rojo); }
.quote blockquote { margin: 0; }
.quote p {
  margin: 0;
  color: var(--rojo-oscuro);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.3;
}
.quote figcaption { margin-top: 18px; font-family: var(--font-menu); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }

/* Listas del currículum: año a la izquierda (Anton, rojo oscuro), texto a la derecha */
.cv { margin: 0; padding: 0; list-style: none; }
.cv li { display: grid; grid-template-columns: 8.5em 1fr; align-items: baseline; gap: 4px 24px; padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, 0.18); line-height: 1.55; }
.cv li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.18); }
.cv .cv-year { font-variant-numeric: tabular-nums; color: var(--rojo-oscuro); font-family: var(--font-display); font-size: 22px; line-height: 1.1; letter-spacing: 0.01em; }
.cv .cv-year--texto { font-family: var(--font-menu); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 519px) { .cv li { grid-template-columns: 1fr; } .cv .cv-year { font-size: 20px; } .cv .cv-year--texto { font-size: 12px; } }
/* Videoclips: un renglón por artista en una cuadrícula (el nombre manda, las canciones abajo) */
.artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.artists li { padding: 14px 0 16px; border-top: 1px solid rgba(0, 0, 0, 0.18); font-size: 15px; line-height: 1.5; }
.artists br { display: none; }
.artists strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; letter-spacing: 0.01em; }
.artists-more { margin-top: clamp(20px, 3vw, 32px); padding: clamp(20px, 3vw, 28px); background: var(--beige); box-shadow: 0 6px 18px rgba(var(--sombra), 0.1); }
.artists-more p { margin: 0; line-height: 1.7; }
/* Subtítulo pequeño en mayúsculas (listas de Comerciales, «Y otros más») */
.list-heading, .artists-more h3 { margin: 0 0 14px; color: var(--rojo-oscuro); font-family: var(--font-menu); font-size: 13px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; }
.section-more { margin: clamp(24px, 3vw, 32px) 0 0; }
.section-lead { max-width: 62ch; margin: 0 0 clamp(20px, 3vw, 28px); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-list li { padding: 6px 12px; background: var(--beige); font-size: 14px; }
@media (max-width: 759px) { .two-col > div + div > .list-heading { margin-top: 8px; } }
/* Coreógrafo: cuatro tarjetas en vez de una lista con viñetas */
.credit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; margin: 0; }
.credit-grid > div { padding: 20px 22px 22px; background: var(--beige); border-top: 4px solid var(--rojo); box-shadow: 0 6px 18px rgba(var(--sombra), 0.1); }
.credit-grid dt { margin-bottom: 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.credit-grid dd { margin: 0; font-size: 15px; line-height: 1.6; }
/* Estudios: disciplina arriba (pequeña, en rojo) y maestro abajo, en cuadrícula */
.studies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 28px; margin: 0; }
.studies > div { padding: 14px 0 16px; border-top: 1px solid rgba(0, 0, 0, 0.18); }
.studies dt { color: var(--rojo-oscuro); font-family: var(--font-menu); font-size: 12px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.studies dd { margin: 6px 0 0; font-size: 16px; line-height: 1.45; }
.subsection { margin-top: var(--section-gap); }

/* Tarjeta beige reutilizable */
.panel { padding: clamp(20px, 3vw, 32px); background: var(--beige); box-shadow: 0 6px 18px rgba(var(--sombra), 0.12); }

/* Conferencias */
.event-placeholder { border: 3px dashed var(--rojo); }
.event-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 18px 0 22px; }
.event-fields dt { font-family: var(--font-menu); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rojo-oscuro); }
.event-fields dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
/* Formatos: tres renglones con el nombre grande a la izquierda, como las listas del currículum */
.formats { margin: 0; padding: 0; list-style: none; }
.formats li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 6px clamp(20px, 4vw, 56px); align-items: baseline; padding: clamp(18px, 2.4vw, 26px) 0; border-top: 1px solid rgba(var(--sombra), 0.22); }
.formats li:last-child { border-bottom: 1px solid rgba(var(--sombra), 0.22); }
.formats h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.8vw, 48px); line-height: 1; }
.formats p { margin: 0; max-width: 58ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; }
@media (max-width: 759px) { .formats li { grid-template-columns: 1fr; } }
/* Sin evento a la vista: el mismo boleto, con la fecha por anunciar. Se quita solo
   cuando el boleto de arriba tiene datos y su fecha no ha pasado. */
[data-next-event]:not([hidden]) + .event-ticket--vacio { display: none; }
.event-ticket--vacio .event-date { background: var(--negro); }
.event-ticket--vacio .event-month { max-width: 12ch; line-height: 1.5; }
.event-ticket--vacio .event-title { margin-bottom: 10px; }
.event-ticket--vacio .event-info p { max-width: 58ch; }
@media (max-width: 520px) { .event-ticket--vacio .event-month { max-width: none; } }
.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 18px 0 0; }
.event-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; }
@media (max-width: 519px) { .event-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.placeholder-text { margin: 0; }
.talk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.talk + .talk { margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(0, 0, 0, 0.18); }
.talk h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; }
.talk-meta { margin: 0 0 12px; color: var(--rojo-oscuro); font-weight: 700; font-size: 14px; }
.talk img { box-shadow: 0 8px 22px rgba(var(--sombra), 0.22); }
/* Master Class: texto y cartel arriba; el temario, a todo lo ancho debajo */
.talk--featured { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.talk-syllabus { grid-column: 1 / -1; margin-top: clamp(4px, 1vw, 12px); }
.talk-subtitle { margin: 0 0 6px; color: var(--rojo-oscuro); font-family: var(--font-menu); font-weight: 400; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
/* Nicaragua: no hay texto, solo fotos; van a todo lo ancho, la primera grande */
.talk--stacked { grid-template-columns: 1fr; gap: 16px; }
/* Fotos de la Master Class: a todo lo ancho, debajo del temario */
.talk-photos { grid-column: 1 / -1; margin-top: clamp(12px, 2vw, 24px); }
.talk--stacked .photo-grid, .talk-photos .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
.talk--stacked .photo-grid li:first-child, .talk-photos .photo-grid li:first-child { grid-column: span 2; grid-row: span 2; }
/* Una foto vertical ocupa dos renglones en vez de recortarse a 3:2 */
.photo-grid li.is-vertical { grid-row: span 2; }
.talk--stacked .photo-grid li:first-child a, .talk-photos .photo-grid li:first-child a, .photo-grid li.is-vertical a { height: 100%; aspect-ratio: auto; }
@media (max-width: 759px) { .talk, .talk--featured { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .talk--stacked .photo-grid, .talk-photos .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.photo-grid a { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #111; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; box-shadow: none; }
.photo-grid a:hover img { transform: scale(1.04); }
/* Temario: módulos numerados en cuadrícula, número en Anton rojo */
.syllabus { counter-reset: modulo; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.syllabus li { counter-increment: modulo; display: grid; grid-template-columns: 2em 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, 0.18); line-height: 1.45; }
.syllabus li::before { content: counter(modulo, decimal-leading-zero); color: var(--rojo-oscuro); font-family: var(--font-display); font-size: 22px; line-height: 1; }
.cta-band { margin-top: var(--section-gap); padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 44px); background: var(--grano), var(--rojo); color: #fff; text-align: center; --foco: #fff; }
.cta-band h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); }
.cta-band p { margin: 0 auto 20px; max-width: 56ch; }

/* Galería: mosaico de fotos y videos en orden aleatorio, como en The Associates.
   Sin JS: celdas iguales y los videos al doble. Con JS (initGalleryMosaic) cada
   pieza se coloca en la cuadrícula: video 2×2 en 16:9, vertical 1×3, algunas
   fotos 2×2, y las chicas rellenan los huecos (sin el final disparejo de las
   columnas de CSS). */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gallery li { min-width: 0; aspect-ratio: 16 / 9; }
.gallery li:has([data-viewer="youtube"]) { grid-column: span 2; grid-row: span 2; }
.gallery.js-mosaic li { aspect-ratio: auto; }
.gallery a { position: relative; display: block; height: 100%; overflow: hidden; background: #111; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.3s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery .play-icon { position: absolute; top: 50%; left: 50%; }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
@media (max-width: 899px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gallery .play-icon { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .gallery-caption { padding: 24px 10px 8px; font-size: 13px; }
}

/* Galería: la carrera de Benny por álbumes (una obra, un grupo, un artista).
   A la izquierda el nombre y la ficha, que acompañan mientras pasan las fotos;
   a la derecha las fotos en columnas, cada una con su proporción (sin recortar
   retratos ni escenas de teatro). */
.album { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.album + .album { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(var(--sombra), 0.22); }
.album-text h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.album-meta { margin: 0 0 12px; color: var(--rojo-oscuro); font-family: var(--font-menu); font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; }
.album-text p:not(.album-meta) { margin: 0 0 8px; max-width: 46ch; font-size: 15px; line-height: 1.6; }
.album-photos { columns: 3; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
.album-photos--2 { columns: 2; }
.album-photos li { break-inside: avoid; margin: 0 0 10px; }
.album-photos a { display: block; overflow: hidden; background: #111; cursor: zoom-in; }
.album-photos img { display: block; width: 100%; height: auto; transition: transform 0.4s var(--salida); }
.album-photos a:hover img { transform: scale(1.04); }
@media (min-width: 900px) { .album-text { position: sticky; top: calc(var(--header-offset) + 24px); } }
@media (max-width: 899px) { .album { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 599px) {
  .album-photos, .album-photos--2 { columns: 2; column-gap: 8px; }
  .album-photos li { margin-bottom: 8px; }
}

/* Noticias: la más reciente, destacada a todo lo ancho */
@media (min-width: 760px) {
  .news-grid--page > li:first-child { grid-column: 1 / -1; }
  .news-grid--page > li:first-child .news-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .news-grid--page > li:first-child .news-body { justify-content: center; padding: clamp(24px, 3vw, 44px); }
  .news-grid--page > li:first-child .news-title { font-size: clamp(30px, 3.2vw, 42px); }
  .news-grid--page > li:first-child .news-excerpt { font-size: 16px; }
  .news-grid--page > li:first-child .news-more { margin-top: 8px; }
}

/* Entradas de noticias y textos legales: una columna de lectura centrada */
.container--article { --container: 760px; }
.article.prose { max-width: none; }
.article > .article-title:first-child { margin-bottom: 24px; }
.article-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; }
.article-meta { margin: 0 0 24px; color: var(--texto-suave); font-size: 14px; }
.article-meta::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; background: var(--rojo); }
.article-video { margin: 0 0 28px; }
.article-video .video-card { display: block; }
.article-video img { box-shadow: 0 8px 22px rgba(var(--sombra), 0.22); }
.article > p:not(.eyebrow):not(.article-meta):not(.back-link) { font-size: 17px; }
.article h2 { margin-top: 1.8em; }
.back-link { margin-top: 36px; }
/* Ficha (duración, fechas, sede) */
.article-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 28px 0 0; padding: clamp(20px, 3vw, 28px); background: var(--beige); box-shadow: 0 6px 18px rgba(var(--sombra), 0.1); }
.article-facts dt { color: var(--rojo-oscuro); font-family: var(--font-menu); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.article-facts dd { margin: 4px 0 0; font-weight: 700; line-height: 1.4; }
@media (max-width: 519px) { .article-facts { grid-template-columns: 1fr; } }
/* Temario de la Master Class: un recuadro por módulo, en dos columnas */
.modules, .prose .modules { columns: 2 300px; column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.prose .modules > li > ul { list-style: disc; }
.modules > li { break-inside: avoid; margin: 0 0 16px; padding: 18px 20px 20px; background: var(--beige); border-top: 4px solid var(--rojo); box-shadow: 0 6px 18px rgba(var(--sombra), 0.1); }
.prose .modules h3 { margin: 0; font-size: 22px; }
.modules h3 span { margin-right: 4px; color: var(--rojo-oscuro); }
.prose .modules ul { margin: 10px 0 0; padding-left: 1.1em; font-size: 15px; line-height: 1.5; }
.prose .modules ul ul { margin: 2px 0 4px; list-style: circle; }

/* Contacto */
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 859px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 519px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid var(--negro);
  border-radius: 0;
  background: #fff;
  color: var(--texto);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* Campo mal llenado: se marca al salir de él, no mientras se escribe */
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--rojo); box-shadow: inset 4px 0 0 var(--rojo); }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--rojo); outline-offset: 1px; }
.form-note { margin: 12px 0 0; font-size: 13px; color: var(--texto-suave); }
.form-error { margin: 14px 0 0; padding: 10px 14px; border-left: 4px solid var(--rojo); background: var(--beige); font-size: 14px; font-weight: 600; }
.form-error.is-ok { border-left-color: var(--negro); }
/* Trampa para bots del formulario: fuera de la vista y de la navegación con teclado */
.form-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }
.contact-card p { margin: 0 0 12px; }
/* Los logos van tal cual vienen del archivo: sin filtros ni cambios de color por CSS */
.contact-card .contact-logo { width: 170px; height: auto; margin: 0 0 14px; }
@media (min-width: 860px) { .contact-card { position: sticky; top: calc(var(--header-offset) + 24px); } }
.contact-list { display: grid; gap: 20px; margin: 0; }
.contact-list > div + div { padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, 0.14); }
.contact-list dt { color: var(--rojo-oscuro); font-family: var(--font-menu); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-list dd { margin: 6px 0 0; line-height: 1.55; }
.contact-list dd > a { font-weight: 700; overflow-wrap: anywhere; }
.contact-form .form-grid + p { margin: 20px 0 0; }
.contact-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.contact-social a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--negro); font-family: var(--font-menu); font-size: 12px; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s, color 0.2s; }
.contact-social a:hover { background: var(--negro); color: #fff; }
.contact-social a:active { transform: translateY(1px); }

/* ---------------------------------------------------------------------------
   13c. Filmografía: la hoja de contactos sobre una mesa de luz
   --------------------------------------------------------------------------- */
.light-table {
  --grasa: #D7261E;   /* lápiz graso rojo */
  --ambar: #d9a441;   /* impresión del borde de la película */
  padding: clamp(40px, 6vw, 72px) 0 0;
  background: radial-gradient(ellipse at 50% 20%, #ffffff 0%, #f4f3ee 55%, #e6e4dc 100%);
}
.light-table .container { width: min(100% - 2 * var(--gutter), 1240px); }

/* Lupa: el cuadro elegido, en grande */
.loupe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.loupe-frame { position: relative; padding: clamp(10px, 1.4vw, 18px); background: var(--negro); box-shadow: 0 20px 50px rgba(var(--sombra), 0.3); }
.loupe-play { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; }
.loupe-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.loupe-play:hover img { transform: scale(1.03); }
.loupe-btn { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(64px, 7vw, 90px); height: clamp(64px, 7vw, 90px); margin: calc(clamp(64px, 7vw, 90px) / -2) 0 0 calc(clamp(64px, 7vw, 90px) / -2); border-radius: 50%; background: var(--grasa); }
.loupe-btn svg { width: 40%; height: 40%; margin-left: 6%; }
.loupe-ring { position: absolute; left: -22px; top: -22px; width: clamp(80px, 8vw, 120px); height: clamp(80px, 8vw, 120px); border: 6px solid var(--negro); border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; }
.loupe-num, .sheet-hint, .mv-note, .frame-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.loupe-num { margin: 0 0 6px; color: var(--rojo-oscuro); font-size: 13px; }
.loupe-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 5.4vw, 76px); line-height: 0.95; }
.loupe-artist { margin: 8px 0 14px; font-size: clamp(16px, 1.5vw, 19px); }
.loupe-award { margin: 0 0 16px; color: var(--grasa); font-family: 'Permanent Marker', cursive; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.25; transform: rotate(-1.5deg); }
.loupe-award:empty { display: none; }
.loupe-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.2); }
.loupe-meta dt { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-tenue); }
.loupe-meta dd { margin: 2px 0 0; font-weight: 700; }

/* Latas de película (categorías) */
.sheet { padding-top: clamp(48px, 6vw, 72px); }
.sheet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cans { display: flex; flex-wrap: wrap; gap: 10px; }
.can { min-height: 44px; padding: 0 18px; border: 2px solid var(--negro); border-radius: 22px; background: #fff; color: var(--negro); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.1s; }
.can:hover { background: #f0efe8; }
.can:active { transform: scale(0.97); }
.can[aria-pressed="true"] { background: var(--negro); color: #fff; }
.sheet-hint { margin: 0; font-size: 12px; color: var(--texto-tenue); }

/* Tiras de negativo de 6 cuadros */
.roll { display: grid; gap: clamp(22px, 3vw, 34px); margin-top: clamp(22px, 3vw, 34px); }
.strip { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 18px 14px; list-style: none; background: #1a1612; box-shadow: 0 6px 18px rgba(var(--sombra), 0.18); }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background-image: repeating-linear-gradient(90deg, #e8e2d0 0 10px, transparent 10px 20px); }
.strip::before { top: 4px; }
.strip::after { bottom: 4px; }
.strip:nth-child(4n+1) { transform: rotate(-0.5deg); }
.strip:nth-child(4n+2) { transform: rotate(0.35deg); }
.strip:nth-child(4n+3) { transform: rotate(-0.25deg); }
.strip:nth-child(4n) { transform: rotate(0.45deg); }
.frame-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: #e8e2d0; text-align: left; cursor: pointer; }
.frame-btn img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.85); transition: filter 0.25s, outline-color 0.25s; outline: 3px solid transparent; outline-offset: 2px; }
.frame-btn:hover img { filter: none; }
.frame-btn[aria-current="true"] img { filter: none; outline-color: var(--ambar); }
.frame-btn:focus-visible { outline: none; }
.frame-btn:focus-visible img { outline-color: #fff; }
.frame-num { display: block; margin-top: 5px; overflow: hidden; color: var(--ambar); font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; text-overflow: ellipsis; }
.frame-circle { position: absolute; inset: -6px -8px 10px; border: 3px solid var(--grasa); border-radius: 50% / 45%; transform: rotate(-3deg); pointer-events: none; }
.frame-note { position: absolute; right: -6px; bottom: calc(100% - 4px); max-width: calc(100% + 6px); line-height: 1; text-align: right; text-wrap: balance; color: var(--grasa); font-family: 'Permanent Marker', cursive; font-size: 15px; transform: rotate(-6deg); text-shadow: 0 0 6px #fff, 0 0 2px #fff; pointer-events: none; }

/* Moviola: línea de tiempo con los años confirmados */
.moviola { padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 64px); }
.moviola-title { margin: 0 0 30px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }
.mv-line { position: relative; height: 64px; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--negro); }
.mv-line li { position: absolute; top: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.mv-end span { position: absolute; top: 12px; white-space: nowrap; }
.mv-end--start { left: 0; }
.mv-end--end { right: 0; }
.mv-end--end span { right: 0; }
.mv-mark { left: var(--x); }
.mv-mark::before { content: ""; position: absolute; left: -7px; top: -9px; width: 14px; height: 14px; border-radius: 50%; background: var(--negro); }
.mv-mark span { position: absolute; top: 14px; transform: translateX(-50%); }
.mv-mark:nth-child(odd) span { top: 34px; }
.mv-mark--premio { color: var(--grasa); }
.mv-mark--premio::before { background: var(--grasa); }
.mv-note { margin: 18px 0 0; font-size: 12px; color: var(--texto-tenue); max-width: 70ch; }

/* Angosto: los años seguidos (2017, 2018, 2019) se encimaban; quedan los puntos y solo se
   rotulan los años con premio y los extremos. El lector de pantalla los lee todos. */
@media (max-width: 759px) {
  .mv-mark:not(.mv-mark--premio) span { width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 859px) {
  .loupe { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  /* En el celular el pie del cuadro es lo que dice qué video es: piso de 12 px */
  .frame-num, .loupe-meta dt { font-size: 12px; }
}
@media (max-width: 519px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loupe-ring { display: none; }
  .mv-mark span { font-size: 10px; }
}

/* ---------------------------------------------------------------------------
   13d. Entradas al bajar la página. La clase .reveal la pone el JS solo a lo que
   todavía no está en pantalla; .is-in, cuando entra. Los títulos en barra se
   descubren de izquierda a derecha, como un rótulo; lo demás sube y aparece.
   --------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.8s var(--salida); }
.reveal.is-in { opacity: 1; transform: none; }
.bar-title.reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.2, 1); }
.bar-title.reveal.is-in { clip-path: inset(0 0 0 0); }
@media print { .reveal, .bar-title.reveal { opacity: 1; transform: none; clip-path: none; } }

/* ---------------------------------------------------------------------------
   14. Reducir movimiento: nada se anima; el carrete queda quieto (lo decide el JS)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.js), html.is-landed { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html.js .reel-track { animation-delay: 2s !important; }
  .site-header::after { display: none; }
  .feature-link:hover .feature-photo,
  .feature-link:focus-visible .feature-photo,
  .featured-list li:nth-child(even) .feature-link:hover .feature-photo,
  .news-card:hover,
  .video-card:hover .video-thumb img,
  .video-card:hover .play-icon { transform: none !important; }
  .film-frame--quemado { animation: none; }
  .strip, .loupe-play:hover img { transform: none !important; }
  .hero-slide img, .hero-slide.is-active img, .hero-slide .hero-word, .hero-slide .page-hero-text p, .hero-slide .page-hero-text p::before { transform: none !important; }
}