/* ==========================================================================
   SOMOS PEQUEÑAS (WE ARE SMALL) — Landing page
   Paleta y tipografías extraídas del press kit oficial.

   Índice
   1.  Tokens de diseño
   2.  Reset y base
   3.  Utilidades de layout
   4.  Tipografía de sección
   5.  Botones y enlaces
   6.  Cabecera y navegación
   7.  Hero
   8.  Sinopsis
   9.  Trailer
   10. Galería
   11. Directora y filmografía
   12. Palabras de la directora
   13. Créditos
   14. Festivales
   15. Aliados
   16. Contacto y formulario
   17. Pie de página
   18. Modales (trailer y lightbox)
   19. Animaciones de entrada
   20. Media queries (tablet / escritorio)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS DE DISEÑO
   ========================================================================== */
:root {
  /* Colores de marca — muestreados del PDF original */
  --cream:        #e0d9d1;   /* texto y logotipo sobre fondos oscuros */
  --cream-soft:   #f2eee9;
  --navy:         #243045;   /* azul profundo de los paneles del press kit */
  --navy-deep:    #1a2331;
  --navy-ink:     #10151f;
  /* El teal del press kit (#008587) alcanza 4.28:1 sobre papel: suficiente
     para titulares grandes, insuficiente para texto pequeño. De ahí las dos
     variantes, medidas contra sus fondos reales (WCAG AA, 4.5:1). */
  --teal:         #008587;   /* acento principal: titulares y CTA         */
  --teal-ink:     #006e70;   /* texto pequeño sobre papel      → 5.81:1   */
  --teal-bright:  #16b3b5;   /* texto pequeño sobre azul/negro → 5.15:1   */
  --wine:         #6b2e2b;   /* acento secundario: bloques en inglés */
  --wine-deep:    #52211f;
  --black:        #0c0e13;

  /* Colores funcionales */
  --paper:        #fbfaf8;
  --paper-alt:    #f3efe9;
  --text:         #2b3140;
  --text-muted:   #5f6878;
  --line:         rgba(36, 48, 69, .14);
  --line-light:   rgba(224, 217, 209, .22);
  --danger:       #b03a35;

  /* Tipografías */
  --font-display: "Archivo", "Fira Sans", system-ui, sans-serif;  /* sustituto de "Morn Bold" */
  --font-body:    "Fira Sans", system-ui, -apple-system, sans-serif;

  /* Escala tipográfica fluida */
  --fs-xs:   .78rem;
  --fs-sm:   .9rem;
  --fs-base: clamp(1rem, .96rem + .2vw, 1.075rem);
  --fs-lead: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  --fs-h3:   clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-h2:   clamp(1.7rem, 1.35rem + 1.7vw, 2.85rem);
  --fs-h1:   clamp(2.2rem, 1.5rem + 3.5vw, 4.5rem);

  /* Ritmo espacial */
  --space-section: clamp(4rem, 3rem + 6vw, 8.5rem);
  --wrap:          1180px;
  --gutter:        clamp(1.25rem, .75rem + 2.5vw, 3rem);

  /* Otros */
  --radius:   4px;
  --radius-lg: 8px;
  --shadow:   0 18px 50px -20px rgba(12, 14, 19, .55);

  /* Curvas de animación.
     Las de CSS por defecto son demasiado suaves; estas dan el impulso
     necesario para que el movimiento se sienta intencional.
     --ease-out    → entradas y salidas (arranca rápido = respuesta inmediata)
     --ease-in-out → elementos que se desplazan en pantalla
     --ease-drawer → curva tipo iOS para el menú desplegable */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}


/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;   /* compensa la cabecera fija al saltar de sección */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }   /* al abrir un modal */

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

/* Los <picture> sólo envuelven al <img> para ofrecer WebP; no deben
   intervenir en el layout, así que el <img> sigue siendo hijo directo
   del contenedor a efectos de flex y grid.
   El <source> necesita display:none explícito: con `contents` en el padre
   pasaría a contar como hijo del contenedor y ocuparía una celda vacía. */
picture { display: contents; }
picture > source { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; cursor: pointer; }

/* Elimina el retardo de ~300ms del doble toque en móvil sin desactivar el zoom */
a, button, label, input, textarea, summary { touch-action: manipulation; }

::selection { background: var(--teal); color: var(--cream-soft); }

/* Foco visible y consistente en toda la página */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Se desplaza con transform (no con `top`) para no tocar el layout */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--teal);
  color: var(--cream-soft);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 180ms var(--ease-out);
}
.skip-link:focus { transform: translateY(1rem); }


/* ==========================================================================
   3. UTILIDADES DE LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); position: relative; }
.section--flush { padding-block: 0; }        /* secciones con fondo a sangre */

.section--cream { background: var(--paper); }
.section--navy  { background: var(--navy);  color: var(--cream); }
.section--wine  { background: var(--wine);  color: var(--cream); }
.section--dark  { background: var(--black); color: var(--cream); }

.grid-2 {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head--center { text-align: center; }


/* ==========================================================================
   4. TIPOGRAFÍA DE SECCIÓN
   ========================================================================== */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: .9rem;
}
.eyebrow--light { color: var(--cream); opacity: .72; }

/* Encabezados en los tres colores de marca del press kit */
.h-teal  { font-size: var(--fs-h2); color: var(--teal); text-transform: uppercase; }
.h-wine  { font-size: var(--fs-h3); color: var(--wine); text-transform: uppercase; margin-top: 2.2rem; }
.h-cream { font-size: var(--fs-h2); color: var(--cream); text-transform: uppercase; }
.h-cream--sm { font-size: var(--fs-h3); margin-top: 2rem; }
.h-cream span[lang="en"] { opacity: .55; font-weight: 600; }

.lead { font-size: var(--fs-lead); line-height: 1.62; max-width: 56ch; }
[lang="en"].lead { color: var(--text-muted); }


/* ==========================================================================
   5. BOTONES Y ENLACES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out),
              border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}

/* La pulsación necesita respuesta inmediata: el botón cede bajo el dedo */
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--teal); color: var(--cream-soft); }
.btn--primary:hover { background: var(--teal-bright); }

.btn--ghost { border-color: var(--line-light); color: var(--cream); background: rgba(224, 217, 209, .06); }
.btn--ghost:hover { background: rgba(224, 217, 209, .16); border-color: var(--cream); }

.btn--block { width: 100%; }

/* Triángulo de "play" dibujado en CSS */
.btn__play {
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .45rem;
  color: var(--teal-bright);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 163, 165, .4);
  transition: color 200ms ease, border-color 200ms ease;
}
.link-arrow::after { content: "→"; transition: transform 200ms var(--ease-out); }
.link-arrow:hover { color: var(--cream); border-color: var(--cream); }

/* Los desplazamientos por hover sólo tienen sentido con puntero fino:
   en pantallas táctiles se disparan al tocar y estorban. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(.97); }
  .link-arrow:hover::after { transform: translateX(4px); }
}


/* ==========================================================================
   6. CABECERA Y NAVEGACIÓN
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background-color 250ms ease, box-shadow 250ms ease;
}
.site-header.is-stuck {
  background: rgba(26, 35, 49, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(224, 217, 209, .1);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.nav-logo { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.nav-logo img { width: clamp(140px, 26vw, 190px); height: auto; }

/* Botón hamburguesa (solo móvil) */
.nav-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: var(--cream);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform 220ms var(--ease-out), opacity 160ms var(--ease-out);
}
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* Menú desplegable en móvil */
.nav {
  position: absolute;
  inset: 100% 0 auto 0;
  background: rgba(16, 21, 31, .98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 200ms var(--ease-out);   /* cierre: rápido */
  pointer-events: none;
}
.nav.is-open {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
  transition: clip-path 320ms var(--ease-drawer);   /* apertura: con peso */
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 1rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.nav__list a {
  display: flex;
  align-items: center;
  min-height: 48px;   /* objetivo táctil mínimo */
  padding: .5rem 0;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .82;
  transition: opacity 180ms ease, color 180ms ease;
}
.nav__list a:hover,
.nav__list a.is-active { opacity: 1; color: var(--teal-bright); }

.nav__cta { color: var(--teal-bright) !important; opacity: 1 !important; }


/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: heroZoom 24s linear forwards;   /* deriva constante, sin acelerones */
}
@keyframes heroZoom {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 21, 31, .78) 0%, rgba(16, 21, 31, .3) 38%, rgba(16, 21, 31, .88) 100%),
    linear-gradient(90deg, rgba(36, 48, 69, .55) 0%, rgba(36, 48, 69, 0) 65%);
}

.hero__inner {
  position: relative;
  padding-block: 8rem 6rem;
  text-align: center;
}

.hero__title { margin: 0 0 1.6rem; }
.hero__title img {
  width: min(620px, 88vw);
  margin-inline: auto;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .55));
}

.hero__credit {
  font-family: var(--font-display);
  font-size: clamp(.7rem, .62rem + .3vw, .85rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.8rem;
}
.hero__credit span {
  display: block;
  margin-top: .4rem;
  font-size: .82em;
  letter-spacing: .16em;
  opacity: .6;
}

.hero__meta {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
}
.hero__meta li {
  padding: .35rem .85rem;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--cream);
  background: rgba(224, 217, 209, .05);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  width: 26px; height: 42px;
  border: 1px solid var(--line-light);
  border-radius: 100px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
}
/* La píldora mide 26×42; este pseudo-elemento invisible extiende el área
   pulsable hasta 44×60 sin alterar el dibujo. */
.hero__scroll::after {
  content: "";
  position: absolute;
  inset: -9px;
}
.hero__scroll span {
  width: 3px; height: 8px;
  border-radius: 3px;
  background: var(--cream);
  animation: scrollHint 1.9s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
  0%, 100% { opacity: 0; transform: translateY(0); }
  40%      { opacity: 1; transform: translateY(6px); }
  70%      { opacity: 0; transform: translateY(13px); }
}


/* ==========================================================================
   8. SINOPSIS
   ========================================================================== */
.figure { margin: 0; }
.figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.figure figcaption {
  margin-top: .85rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
}
.figure--framed figcaption { color: rgba(224, 217, 209, .62); }

.factsheet {
  margin: 2.6rem 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem 1.5rem;
}
.factsheet dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: .3rem;
}
.factsheet dd { margin: 0; font-size: var(--fs-sm); color: var(--text); }


/* ==========================================================================
   9. TRAILER
   ========================================================================== */
.trailer {
  position: relative;
  padding-block: clamp(5rem, 4rem + 6vw, 9rem);
  overflow: hidden;
  background: var(--black);
}
.trailer__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* El fotograma ya es oscuro: su píxel más claro bajo el texto es (152,133,132),
   así que un velo del 46% en el centro deja 5.6:1 contra el crema — muy por
   encima de AA. Los extremos van más densos para fundir con las secciones
   color papel que hay encima y debajo. */
.trailer__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(12, 14, 19, .86) 0%,
              rgba(12, 14, 19, .46) 30%,
              rgba(12, 14, 19, .46) 70%,
              rgba(12, 14, 19, .88) 100%);
}
.trailer__inner { position: relative; text-align: center; }
.trailer__copy {
  color: var(--cream);
  opacity: .72;
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2.6rem;
}

/* Botón de reproducción circular, como en el press kit */
.play-button {
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--cream);
}
.play-button__ring {
  position: relative;
  width: clamp(72px, 16vw, 96px);
  aspect-ratio: 1;
  border: 2px solid var(--cream);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 220ms var(--ease-out),
              transform 160ms var(--ease-out),
              border-color 220ms var(--ease-out);
}
.play-button__ring::before {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent currentColor;
}
/* Onda que pulsa alrededor del botón */
.play-button__ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  animation: pulseRing 2.6s var(--ease-out) infinite;
}
@keyframes pulseRing {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.45); }
  100% { opacity: 0;   transform: scale(1.45); }
}
.play-button:active .play-button__ring { transform: scale(.95); }

@media (hover: hover) and (pointer: fine) {
  .play-button:hover .play-button__ring {
    background: var(--teal);
    border-color: var(--teal);
    transform: scale(1.06);
  }
  .play-button:active .play-button__ring { transform: scale(.95); }
}
.play-button__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.trailer__fallback {
  margin-top: 2.4rem;
  font-size: var(--fs-sm);
  color: rgba(224, 217, 209, .70);
}
.trailer__fallback a { color: var(--teal-bright); }


/* ==========================================================================
   10. GALERÍA
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.gallery__item { margin: 0; }
.gallery__item button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--navy-deep);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}
.gallery__item button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 133, 135, .45));
  opacity: 0;
  transition: opacity 250ms ease;
}
.gallery__item button {
  transition: transform 160ms var(--ease-out);
}
.gallery__item button:active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .gallery__item button:hover img { transform: scale(1.05); }
  .gallery__item button:hover::after { opacity: 1; }
}

/* Entrada escalonada: los fotogramas aparecen uno tras otro,
   no todos de golpe. El contenedor sólo hace de disparador. */
.gallery.reveal { opacity: 1; transform: none; transition: none; }
.gallery__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.gallery.is-visible .gallery__item { opacity: 1; transform: none; }
.gallery.is-visible .gallery__item:nth-child(2) { transition-delay: 60ms; }
.gallery.is-visible .gallery__item:nth-child(3) { transition-delay: 120ms; }
.gallery.is-visible .gallery__item:nth-child(4) { transition-delay: 180ms; }
.gallery.is-visible .gallery__item:nth-child(5) { transition-delay: 240ms; }
.gallery.is-visible .gallery__item:nth-child(6) { transition-delay: 300ms; }


/* ==========================================================================
   11. DIRECTORA Y FILMOGRAFÍA
   ========================================================================== */
.section--navy p { color: rgba(224, 217, 209, .84); }
.section--navy em { color: var(--cream); font-style: italic; }

.filmography {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: clamp(2rem, 1rem + 3vw, 3rem);
  border-top: 1px solid var(--line-light);
}
.filmography .h-cream--sm { margin-top: 0; }

.filmo { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.filmo li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(224, 217, 209, .1);
}
.filmo b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -.01em;
}
/* Año de estreno (hijo directo del <li>).
   Cifras tabulares: los años quedan alineados en columna. */
.filmo > li > span {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: rgba(224, 217, 209, .62);
  align-self: center;
}
.filmo em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: var(--fs-sm);
  color: rgba(224, 217, 209, .62);
}
.filmo em span[lang="en"] { opacity: .72; }
.filmo .is-current b { color: var(--teal-bright); }
.filmo .is-current > span { color: var(--teal-bright); }


/* ==========================================================================
   12. PALABRAS DE LA DIRECTORA
   ========================================================================== */
.section--wine { background: linear-gradient(150deg, var(--wine) 0%, var(--wine-deep) 100%); }

.statement {
  margin: 0;
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  background: rgba(12, 14, 19, .16);
  border-left: 3px solid var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.statement .h-cream { font-size: var(--fs-h3); margin-bottom: 1.1rem; }
.statement p { color: rgba(224, 217, 209, .9); font-size: var(--fs-lead); line-height: 1.62; }
.statement em { color: var(--cream); font-style: italic; }
.statement footer {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(224, 217, 209, .78);
}
.statement--alt { background: rgba(12, 14, 19, .3); border-left-color: rgba(224, 217, 209, .4); }


/* ==========================================================================
   13. CRÉDITOS
   ========================================================================== */
.creditos {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
  background: var(--black);
}
.creditos__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
}
.creditos__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 14, 19, .92), rgba(82, 33, 31, .8));
}
.creditos__inner { position: relative; }

.credits { margin: 0; display: grid; gap: .1rem; }
.credits > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(224, 217, 209, .08);
}
.credits dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(224, 217, 209, .70);
}
.credits dd { margin: 0; color: var(--cream); font-size: var(--fs-sm); }

.cast {
  margin-top: 2.2rem;
  padding: 1.4rem 1.6rem;
  background: rgba(224, 217, 209, .07);
  border-radius: var(--radius);
}
.cast .h-cream--sm { margin-top: 0; margin-bottom: .5rem; }
.cast p { color: var(--cream); font-size: var(--fs-sm); letter-spacing: .03em; }


/* ==========================================================================
   14. FESTIVALES
   ========================================================================== */
.festivales {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
  background: var(--black);
}
.festivales__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.festivales__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 21, 31, .88) 0%, rgba(16, 21, 31, .45) 60%, rgba(12, 14, 19, .9) 100%);
}
.festivales__inner { position: relative; }

.festival-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.festival-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  background: rgba(12, 14, 19, .62);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 620px;
}
.festival-card__logo {
  width: 108px;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.festival-card__body h3 {
  font-size: var(--fs-h3);
  color: var(--cream);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.festival-card__date {
  font-size: var(--fs-sm);
  color: rgba(224, 217, 209, .78);
  margin-bottom: .7rem;
}


/* ==========================================================================
   15. ALIADOS
   ========================================================================== */
/* El fondo coincide con el de los archivos de logotipos (#1d1d1b),
   así los recuadros de las imágenes se funden con la sección. */
.aliados {
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  background: #1d1d1b;
}

.aliados__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(224, 217, 209, .62);
  text-align: center;
  margin-bottom: 2rem;
}
.aliados__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
.aliados__imcine {
  width: 130px;
  opacity: .9;
  transition: opacity 250ms ease;
}
.aliados__pleca {
  width: 100%;
  max-width: 860px;
  opacity: .88;
  transition: opacity 250ms ease;
}
.aliados__imcine:hover, .aliados__pleca:hover { opacity: 1; }


/* ==========================================================================
   16. CONTACTO Y FORMULARIO
   ========================================================================== */
.contacto {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
  background: var(--black);
}
.contacto__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.contacto__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 14, 19, .9), rgba(36, 48, 69, .93));
}
.contacto__inner { position: relative; align-items: start; }

.contacto__intro { color: rgba(224, 217, 209, .78); max-width: 46ch; }

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.15rem; }
.contact-list li { display: grid; gap: .2rem; }
.contact-list__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
.contact-list__value { color: var(--cream); font-size: var(--fs-sm); text-decoration: none; }
a.contact-list__value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(224, 217, 209, .3);
  justify-self: start;
}
a.contact-list__value:hover { border-color: var(--teal-bright); color: var(--teal-bright); }

.poster-download {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  padding: .7rem;
  background: rgba(224, 217, 209, .07);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.poster-download img { width: 74px; border-radius: 2px; }
.poster-download span {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
}
.poster-download:hover { background: rgba(224, 217, 209, .13); border-color: var(--cream); }
.poster-download:active { transform: scale(.98); }

/* --- Tarjeta del formulario --- */
.form-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  box-shadow: var(--shadow);
}

.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}
.field label span { color: var(--teal-ink); }

/* 16px es obligatorio: por debajo de ese tamaño Safari en iOS hace zoom
   automático al enfocar el campo y descuadra toda la página. */
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { resize: vertical; min-height: 120px; }
/* El texto de ayuda también es texto: 4.78:1 sobre blanco */
.field input::placeholder,
.field textarea::placeholder { color: #6a7383; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 133, 135, .16);
}
.field.has-error input,
.field.has-error textarea { border-color: var(--danger); }
.field.has-error input:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(176, 58, 53, .16); }

.field__error {
  margin: .45rem 0 0;
  font-size: var(--fs-xs);
  color: var(--danger);
}

/* Campo trampa: oculto sin usar display:none para que los bots lo rellenen */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-ok    { background: rgba(0, 133, 135, .12); color: #056b6c; border: 1px solid rgba(0, 133, 135, .3); }
.form-status.is-error { background: rgba(176, 58, 53, .1);  color: var(--danger); border: 1px solid rgba(176, 58, 53, .3); }

.form-note { margin: 1.1rem 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.form-note a { color: var(--teal-ink); }

#submitBtn[disabled] { opacity: .6; cursor: progress; transform: none; }


/* ==========================================================================
   17. PIE DE PÁGINA
   ========================================================================== */
.site-footer { background: var(--navy-ink); color: var(--cream); padding-block: 3.5rem 2.5rem; }

.site-footer__inner {
  display: grid;
  gap: 2rem;
  text-align: center;
  justify-items: center;
}
.site-footer__logo { width: min(280px, 70vw); opacity: .9; }
.site-footer__meta p { margin: 0 0 .35rem; font-size: var(--fs-xs); color: rgba(224, 217, 209, .62); }

.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; }
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* el texto es pequeño; el área táctil no */
  padding-inline: .25rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(224, 217, 209, .65);
  text-decoration: none;
  transition: color 180ms ease;
}
.site-footer__nav a:hover { color: var(--teal-bright); }


/* ==========================================================================
   18. MODALES (trailer y lightbox)
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1rem, .5rem + 3vw, 3rem);
  background: rgba(8, 10, 14, .95);
  opacity: 0;
  transition: opacity 140ms var(--ease-out);   /* salida: más rápida que la entrada */
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; transition-duration: 200ms; }

/* El contenido escala ligeramente al entrar: nunca desde scale(0),
   nada en el mundo real aparece de la nada. Los modales escalan desde
   su centro (a diferencia de un popover, que lo hace desde su disparador). */
.modal__body,
.modal__figure {
  opacity: 0;
  transform: scale(.97);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.modal.is-open .modal__body,
.modal.is-open .modal__figure {
  opacity: 1;
  transform: none;
  transition-duration: 220ms;
}

.modal__body { width: min(1100px, 100%); }

.modal__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.modal__video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.modal__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.75rem);
  right: clamp(.75rem, 2vw, 1.75rem);
  width: 46px; height: 46px;
  background: rgba(224, 217, 209, .1);
  border: 1px solid var(--line-light);
  border-radius: 50%;
  transition: background-color 200ms ease, transform 200ms var(--ease-out);
}
.modal__close:active { transform: scale(.94); }
.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  inset: 50% 12px auto 12px;
  height: 1.5px;
  background: var(--cream);
}
.modal__close::before { transform: rotate(45deg); }
.modal__close::after  { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .modal__close:hover { background: var(--teal); transform: rotate(90deg); }
  .modal__close:active { transform: rotate(90deg) scale(.94); }
}

.modal__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px; height: 48px;
  background: rgba(224, 217, 209, .08);
  border: 1px solid var(--line-light);
  border-radius: 50%;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
/* El centrado usa la propiedad `translate`, así que `transform` queda libre */
.modal__nav:active { transform: scale(.94); }
.modal__nav::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 11px; height: 11px;
  border-top: 1.5px solid var(--cream);
  border-right: 1.5px solid var(--cream);
}
.modal__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.modal__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
.modal__nav--prev::before { translate: -30% -50%; rotate: -135deg; }
.modal__nav--next::before { translate: -70% -50%; rotate: 45deg; }
.modal__nav:hover { background: var(--teal); }

.modal__figure { margin: 0; max-width: min(1150px, 100%); text-align: center; }
.modal__figure img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.modal__figure figcaption {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: rgba(224, 217, 209, .65);
}


/* ==========================================================================
   19. ANIMACIONES DE ENTRADA
   ========================================================================== */
/* Recorrido corto y salida rápida: la entrada debe acompañar al scroll,
   no hacer esperar a quien ya está leyendo. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Respeta la preferencia del sistema de reducir movimiento:
   se conservan los cambios de color, se elimina todo desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal,
  .gallery__item { opacity: 1; transform: none; }
  .hero__bg { animation: none; }
}


/* ==========================================================================
   20. MEDIA QUERIES
   ========================================================================== */

/* --- Tablet (≥ 600px) --- */
@media (min-width: 600px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .credits > div {
    grid-template-columns: 44% 1fr;
    gap: 1rem;
    align-items: baseline;
  }

  .festival-card { flex-direction: row; align-items: center; gap: 1.75rem; }
  .festival-card__logo { width: 130px; }

  .filmo li { grid-template-columns: 1fr auto; }
  .filmo em { grid-column: 1; }

  .site-footer__inner {
    grid-template-columns: auto 1fr;
    text-align: left;
    justify-items: start;
    align-items: center;
    gap: 1.5rem 2.5rem;
  }
  .site-footer__nav { grid-column: 1 / -1; justify-content: flex-start; }

  .aliados__row { flex-direction: row; justify-content: center; gap: 3rem; }
  .aliados__imcine { width: 110px; }
  .aliados__pleca { max-width: 620px; }
}

/* --- Escritorio (≥ 900px) --- */
@media (min-width: 900px) {
  html { scroll-padding-top: 84px; }

  .nav-bar { min-height: 84px; }

  /* El menú deja de ser desplegable y se muestra en línea */
  .nav-toggle { display: none; }
  .nav {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    clip-path: none;
    pointer-events: auto;
  }
  .nav__list { flex-direction: row; align-items: center; gap: 1.9rem; padding: 0; }
  .nav__list a { padding: .35rem 0; font-size: .74rem; letter-spacing: .15em; }
  .nav__cta {
    padding: .6rem 1.15rem !important;
    border: 1px solid var(--teal-bright);
    border-radius: var(--radius);
  }
  .nav__cta:hover { background: var(--teal); color: var(--cream) !important; }

  .hero__inner { text-align: left; padding-block: 9rem 7rem; }
  .hero__title img { margin-inline: 0; }
  .hero__meta { justify-content: flex-start; }
  .hero__actions { justify-content: flex-start; }

  /* Igual que en el press kit: el texto ocupa la mitad izquierda y deja
     libre la derecha, donde está la figura del fotograma. */
  .trailer__inner { text-align: left; }
  .trailer__copy { margin-inline: 0; }

  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2--wide-left { grid-template-columns: 1.05fr .95fr; }
  .grid-2--tight { align-items: start; }

  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

  .factsheet { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .site-footer__inner { grid-template-columns: auto 1fr auto; }
  .site-footer__nav { grid-column: auto; justify-content: flex-end; }
}

/* --- Pantallas grandes (≥ 1200px) --- */
@media (min-width: 1200px) {
  .contacto__inner { grid-template-columns: 1fr 1.05fr; gap: 5rem; }
}