/* ============================================================
   MACAT — Málaga Cinematographic Audiovisual Team
   Landing Page — CSS
   ============================================================ */

/* ── 1. Custom Properties ─────────────────────────────────── */
:root {
  --white:    #FFFFFF;
  --black:    #0A0A0A;
  --gray-50:  #F7F7F5;
  --gray-100: #EFEEEC;
  --gray-200: #E0DFDB;
  --gray-400: #9E9C98;
  --gray-600: #5C5A57;
  --gray-800: #2E2C29;
  --accent:   #E9251F;
  --accent-dk:#BE1E19;

  --font:        'DM Sans', sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;
  --nav-h:    72px;
  --max-w:    1200px;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);

  /* grano de película — turbulencia SVG tileable, usada como overlay sutil */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button, input, textarea, select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}
ul, ol { list-style: none; }

/* ── 3. Typography helpers ────────────────────────────────── */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.display-1 {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.display-2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.display-3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.body-lg { font-size: 1.125rem; line-height: 1.7; color: var(--gray-600); }
.body-sm { font-size: 0.875rem; line-height: 1.6; color: var(--gray-600); }

/* ── 4. Layout ────────────────────────────────────────────── */
.container {
  width: min(var(--max-w), 100% - 3rem);
  margin-inline: auto;
}

.section {
  padding-block: clamp(80px, 12vw, 140px);
}

.section--dark {
  background: var(--black);
  color: var(--white);
}
.section--dark .eyebrow { color: var(--gray-400); }

.section--gray {
  background: var(--gray-50);
}

.section--accent {
  background: var(--accent);
  color: var(--white);
}
.section--accent .eyebrow { color: rgba(255, 255, 255, 0.7); }

/* ── 5. Scroll-reveal ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
[data-reveal="left"] {
  transform: translateX(-40px);
}
[data-reveal="right"] {
  transform: translateX(40px);
}
[data-reveal="scale"] {
  transform: scale(0.96) translateY(20px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }

/* ── 6. Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--accent-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230, 51, 41, 0.3);
}

.btn--outline {
  border: 1.5px solid var(--white);
  color: var(--white);
}
.btn--outline:hover {
  background: var(--white);
  color: var(--black);
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1.5px solid var(--black);
  color: var(--black);
}
.btn--ghost:hover {
  background: var(--black);
  color: var(--white);
}

.btn--ghost-dark {
  border: 1.5px solid var(--white);
  color: var(--white);
}
.btn--ghost-dark:hover {
  background: var(--white);
  color: var(--black);
}

/* REC button micro-detail */
.btn--rec {
  background: var(--accent);
  color: var(--white);
  gap: 0.6rem;
}
.btn--rec::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.btn--rec:hover {
  background: var(--accent-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230, 51, 41, 0.35);
}

/* ── 7. Navbar ────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.85rem 1.25rem 0;
  pointer-events: none;
}

.nav__inner {
  pointer-events: auto;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.nav.scrolled .nav__inner {
  background: rgba(10, 10, 10, 0.72);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
}

.nav__logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--white);
}
.nav__logo span { color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
  padding-bottom: 3px;
  transition: color 0.2s;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { width: 100%; }

.nav__cta {
  background: var(--accent);
  color: var(--white);
  padding: 0.55rem 1.25rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: all 0.25s var(--ease);
}
.nav__cta:hover {
  background: var(--accent-dk);
  transform: translateY(-1px);
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s;
}

.nav__burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav panel */
.nav__mobile {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0;
  background: var(--white);
  flex-direction: column;
  padding: 2rem 1.5rem;
  gap: 1.25rem;
  z-index: 99;
  overflow-y: auto;
}
.nav__mobile.open { display: flex; }
.nav__mobile .nav__link {
  font-size: 1.25rem;
  color: var(--black);
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--gray-100);
}

/* ── 8. Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
.hero__bg.loaded { transform: scale(1); }

/* Fotografía de fondo — sala de cine vacía, vista hacia la pantalla.
   Ken Burns continuo y muy sutil, independiente del transform que main.js
   aplica al contenedor .hero__bg en el scroll (así no compiten por la misma propiedad). */
.hero__bg-image {
  position: absolute;
  inset: 0;
  background-image: url('../imagenes/fondo-hero.jpeg');
  background-size: cover;
  background-position: center 30%;
  animation: hero-kenburns 26s ease-in-out infinite alternate;
}
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Resplandor de pantalla — pulso muy suave, como si proyectara luz cambiante */
.hero__bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 44% 30% at 50% 35%, rgba(205, 222, 255, 0.55), transparent 70%);
  animation: hero-screen-glow 5s ease-in-out infinite alternate;
}
@keyframes hero-screen-glow {
  from { opacity: 0.15; }
  to   { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg-image { animation: none; }
  .hero__bg-glow { animation: none; opacity: 0.2; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10, 10, 10, 0.7) 0%,
    rgba(10, 10, 10, 0.55) 50%,
    rgba(10, 10, 10, 0.8) 100%
  );
}

/* Grano de película — capa de emulsión sutil, bajo el texto (z-index 2) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.06;
  mix-blend-mode: overlay;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: var(--nav-h);
  padding-block: clamp(80px, 12vw, 120px);
}

/* Fase 1a — reveal del wordmark al cargar (una sola vez) */
.hero__logo-stage {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.hero__logo {
  font-size: clamp(4rem, 15vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
  transform-origin: center center;
  will-change: transform;
  animation: hero-logo-reveal 0.6s var(--ease) forwards;
}
.hero__logo span { color: var(--accent); }

@keyframes hero-logo-reveal {
  from { transform: scale(4.5); }
  to   { transform: scale(1); }
}

/* Fase 1b — fade-in escalonado de los subtítulos, tras el logo */
.hero__content-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.hero.is-loaded .hero__content-item {
  opacity: 1;
  transform: translateY(0);
}
.hero__subtitles {
  text-align: center;
}

.hero__headline {
  color: var(--white);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.hero__line { display: block; font-weight: 700; }

.hero__headline em {
  display: block;
  font-style: normal;
  color: var(--white);
  font-size: 0.55em;
  margin-top: 0.4em;
  font-weight: 700;
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}


/* ── 9. Qué es MACAT ──────────────────────────────────────── */
.que-es {
  padding-block: clamp(100px, 15vw, 180px);
}

/* Fondo único de todo el bloque: foto con zona oscura a la izquierda,
   donde se apoya la página de texto (color de fuente en blanco para
   contrastar con esa mitad oscura de la imagen). */
.que-es__spread {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 42vw, 620px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.09);
  border-radius: 6px;
  overflow: hidden;
  background-image: url('../imagenes/fondo-sobre-nostros.JPG');
  background-size: cover;
  background-position: left center;
}

.que-es__page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4rem);
}
.que-es__page--text {
  width: 100%;
  max-width: 560px;
}

.que-es .eyebrow,
.que-es .stat__label {
  color: rgba(255, 255, 255, 0.6);
}

.que-es__text {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--white);
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.que-es__text strong {
  font-weight: 600;
  color: var(--white);
}

.que-es__stats {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

.stat__number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--white);
  line-height: 1;
}
.stat__number span { color: var(--accent); }

.stat__label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-top: 0.35rem;
  font-weight: 400;
}

.quote-line {
  display: block;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: var(--gray-200);
  text-align: center;
  letter-spacing: -0.01em;
  padding: 3rem 0;
  border-top: none;
  border-bottom: none;
  background-image:
    repeating-linear-gradient(to right, var(--gray-200) 0 5px, transparent 5px 13px),
    repeating-linear-gradient(to right, var(--gray-200) 0 5px, transparent 5px 13px);
  background-size: 13px 1px, 13px 1px;
  background-position: top left, bottom left;
  background-repeat: repeat-x;
  margin-top: clamp(60px, 8vw, 100px);
  font-style: italic;
}
.quote-line em {
  font-style: italic;
  font-weight: 500;
  color: var(--black);
  font-family: var(--font-accent);
}

/* ── 11. Málaga Cinéfila ──────────────────────────────────── */
.cinefila {
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  position: relative;
}

.cinefila::before {
  content: 'MÁLAGA\ACINÉFILA';
  white-space: pre;
  position: absolute;
  top: 50%;
  right: -2rem;
  transform: translateY(-50%);
  font-size: clamp(8rem, 18vw, 22rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Grano de película — mismo tratamiento que el hero, bajo el contenido */
.cinefila::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.cinefila__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: center;
}

.cinefila__eyebrow {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.cinefila__title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  color: var(--white);
}

.cinefila__desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem;
}

/* Claqueta — motivo ilustrado línea fina, se abre levemente al hover */
.clapperboard {
  display: inline-flex;
  color: var(--accent);
  margin-bottom: 0.5rem;
  padding-top: 10px;
  overflow: visible;
}
.clapperboard svg {
  overflow: visible;
}
.clapperboard__top {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transition: transform 0.35s var(--ease);
}
.cinefila__left:hover .clapperboard__top {
  transform: rotate(-13deg);
}

.cinefila__quote {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 500;
  font-style: italic;
  color: rgba(255,255,255,.65);
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2rem 0;
  line-height: 1.55;
}
.cinefila__quote-attr {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.cinefila__features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.cinefila__feat {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.cinefila__feat-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
  margin-top: 2px;
}

.cinefila__feat-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.15rem;
}
.cinefila__feat-text span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}

.cinefila__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 3px;
  filter: grayscale(20%);
}

/* ── 12. Departamentos ────────────────────────────────────── */
.departamentos {}

.departamentos__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.departamentos__header p {
  margin-top: 1.25rem;
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.7;
}

.departamentos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.dept-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 1.75rem 1.5rem;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  position: relative;
}
.dept-card:hover {
  background: rgba(233, 37, 31, 0.04);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.07);
  z-index: 1;
}

.dept-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}
.dept-card__name::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.6rem;
  background: var(--accent);
  border-radius: 1.5px;
  vertical-align: middle;
}

.dept-card__coord {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray-600);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.dept-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.dept-card:hover::after { width: 100%; }

/* Bloque de color: áreas de producción en oscuro */
.dept-card--dark {
  background: var(--black);
  border-color: rgba(255,255,255,0.12);
}
.dept-card--dark:hover {
  background: #161616;
  border-color: var(--accent);
}
.dept-card--dark .dept-card__name { color: var(--white); }
.dept-card--dark .dept-card__coord { color: rgba(255,255,255,0.6); }

/* ── 13. Equipo ───────────────────────────────────────────── */
.equipo {}

.equipo__section-title {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.equipo__section-title::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--accent);
}

.equipo__header {
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.equipo__title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  color: var(--gray-400);
}

/* Mentores / estudiantes — mismo peso visual, misma tarjeta */
.equipo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.25rem;
  margin-bottom: 4rem;
}

.equipo-card {
  text-align: center;
  transition: transform 0.3s var(--ease);
}
.equipo-card:hover {
  transform: translateY(-4px);
}

.equipo-card__img-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

.equipo-card__img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  filter: grayscale(20%);
  transition: filter 0.4s;
}
.equipo-card:hover .equipo-card__img { filter: grayscale(0); }

.equipo-card__dept {
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(233, 37, 31, 0.3);
}

/* Créditos de apertura — nombre / leader punteado / rol en serif itálica */
.equipo-card__credit {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.35rem;
  text-align: left;
}

.equipo-card__name {
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--black);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.equipo-card__leader {
  flex: 1 1 auto;
  min-width: 10px;
  height: 0;
  align-self: center;
  border-bottom: 1px dotted var(--gray-200);
  transform: translateY(-2px);
}

.equipo-card__role {
  flex: 0 0 auto;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--gray-600);
  white-space: nowrap;
}

/* ── 14. Colaboradores y Patrocinadores ───────────────────── */
.colaboradores {
  background: var(--white);
}

.colabs__header {
  text-align: center;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.colabs__block {
  margin-bottom: 3.5rem;
}
.colabs__block:last-child { margin-bottom: 0; }

.colabs__block-title {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-400);
  text-align: center;
  margin-bottom: 2rem;
}

.colabs__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.colab-logo {
  background: var(--white);
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 160px;
  transition: background 0.2s;
}
.colab-logo:hover { background: var(--gray-50); }

.colab-logo__abbr {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gray-400);
}

.colab-logo__name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-600);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── 15. Marcas de registro (decorativo) ──────────────────── */
/* Detalle de dirección de arte tipo pliego impreso: punto + cruz fina en
   las esquinas de los bloques visuales grandes. Puramente decorativo. */
.cinefila__right { position: relative; }

.reg-mark {
  position: absolute;
  width: 9px;
  height: 9px;
  color: var(--black);
  opacity: 0.32;
  pointer-events: none;
  z-index: 5;
}
.reg-mark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5px;
  height: 2.5px;
  background: currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.reg-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 0.75px no-repeat,
    linear-gradient(currentColor, currentColor) center / 0.75px 100% no-repeat;
}

.reg-mark--light { color: var(--white); }
.reg-mark--accent { color: var(--accent); }

.reg-mark--tl { top: 18px;    left: 18px; }
.reg-mark--tr { top: 18px;    right: 18px; }
.reg-mark--bl { bottom: 18px; left: 18px; }
.reg-mark--br { bottom: 18px; right: 18px; }

@media (max-width: 640px) {
  .reg-mark { display: none; }
}

/* ── 16. Noticias ─────────────────────────────────────────── */
.noticias {
  background: var(--gray-50);
}

.noticias__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  flex-wrap: wrap;
}

.noticias__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.noticia-card {
  background: var(--white);
  border-radius: 3px;
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  cursor: pointer;
}
.noticia-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.noticia-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.noticia-card:hover .noticia-card__img { transform: scale(1.04); }

.noticia-card__img-wrap { overflow: hidden; }

.noticia-card__body { padding: 1.5rem; }

.noticia-card__cat {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.noticia-card__title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--black);
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

.noticia-card__excerpt {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.noticia-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.noticia-card__date {
  font-size: 0.72rem;
  color: var(--gray-400);
  letter-spacing: 0.04em;
}
.noticia-card__arrow {
  font-size: 0.85rem;
  color: var(--black);
  transition: transform 0.2s;
}
.noticia-card:hover .noticia-card__arrow { transform: translateX(4px); }

/* ── 17. Galería ──────────────────────────────────────────── */
.galeria__header {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.galeria__hint {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-top: 0.75rem;
}

/* Marco decorativo — borde de TODA la sección (edge-to-edge), no solo
   del contenedor. PNG sin alpha sobre fondo negro; screen hace
   transparente el negro y deja solo el trazo blanco sobre la sección. */
.galeria {
  position: relative;
  padding-block: clamp(140px, 16vw, 220px);
}
.galeria__frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.galeria .container {
  position: relative;
  z-index: 1;
}

.galeria__carousel {
  position: relative;
}

/* Edge fade — invita a seguir deslizando */
.galeria__carousel::before,
.galeria__carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1.25rem;
  width: clamp(24px, 6vw, 72px);
  z-index: 1;
  pointer-events: none;
}
.galeria__carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--black), transparent);
}
.galeria__carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--black), transparent);
}

.galeria__mosaic {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.galeria__mosaic::-webkit-scrollbar { height: 6px; }
.galeria__mosaic::-webkit-scrollbar-track { background: transparent; }
.galeria__mosaic::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }

.gal-item {
  position: relative;
  flex: 0 0 auto;
  width: min(82vw, 680px);
  aspect-ratio: 16/10;
  scroll-snap-align: center;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  opacity: 0.5;
  transform: scale(0.94);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.gal-item.is-active {
  opacity: 1;
  transform: scale(1);
}

.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gal-item:hover img { transform: scale(1.06); }

.galeria__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--black);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.galeria__nav:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.galeria__nav--prev { left: -4px; }
.galeria__nav--next { right: -4px; }

/* Motivo de carrete de película — anillo tras la flecha, gira al cambiar de slide.
   La rotación se acumula en JS (transform inline) en vez de usar una keyframe que
   siempre vuelve a 0deg, para que clics seguidos no produzcan un salto/atasco visual. */
.galeria__nav-reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: currentColor;
  opacity: 0.55;
  transition: opacity 0.2s var(--ease), transform 0.5s var(--ease);
  transform: rotate(0deg);
}
.galeria__nav:hover .galeria__nav-reel { opacity: 0.9; }
.galeria__nav-arrow { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .galeria__nav-reel { transition: opacity 0.2s var(--ease); }
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 200;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 2px;
  cursor: default;
}
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.lightbox__close:hover { color: var(--white); }

/* ── 18. Únete ────────────────────────────────────────────── */
.unete {
  position: relative;
  background: var(--accent);
  color: var(--white);
}
.unete .container {
  position: relative;
  z-index: 1;
}

.unete__intro {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 480px;
  max-height: 900px;
  padding-inline: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: clamp(5rem, 8vw, 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../imagenes/todos.jpg');
  background-size: cover;
  background-position: center;
}

.unete__hero {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  background: rgba(10, 10, 10, 0.82);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.unete__hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
  margin-top: 1.5rem;
}

/* Únete — transición pin: por defecto (y siempre que el usuario prefiera
   menos movimiento) el collage/texto y el formulario se apilan en flujo
   normal. Con motion permitido, la media query de abajo activa el
   desplazamiento horizontal ligado 1:1 al scroll (mismo criterio que el
   resto de scroll-linked transforms de la web, ver main.js). */
.unete__transition-track {
  display: block;
}

.unete__transition-panel {
  width: 100%;
}

.unete__form-panel {
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2rem);
}

@media (prefers-reduced-motion: no-preference) {
  .unete__transition {
    position: relative;
    height: 200vh;
  }
  .unete__transition-track {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 200%;
    display: flex;
    overflow: hidden;
    will-change: transform;
  }
  .unete__transition-panel {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--nav-h);
    box-sizing: border-box;
  }
  .unete__transition .unete__intro {
    height: 100%;
    margin-bottom: 0;
  }
  .unete__form-panel {
    max-height: calc(100% - 2rem);
    overflow-y: auto;
    padding: 0 clamp(1.5rem, 4vw, 2rem);
    margin: 0;
  }
  @media (max-width: 640px) {
    .unete__transition { height: 180vh; }
  }
}

.unete__proceso {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4rem;
}

.paso {
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
  transition: background 0.25s;
}
.paso:last-child { border-right: none; }
.paso:hover { background: rgba(255,255,255,0.04); }

.paso__num {
  font-size: 2.5rem;
  font-weight: 300;
  color: rgba(255,255,255,0.12);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 1rem;
}

.paso__title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.paso__desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

.unete__grid {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
  gap: clamp(3rem, 6vw, 8rem);
  margin-bottom: 4rem;
}

.unete__closing-quote {
  text-align: center;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  line-height: 1.25;
  color: rgba(255,255,255,.18);
  margin-top: clamp(3rem, 6vw, 6rem);
  letter-spacing: -0.01em;
}

.faq__item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}
.faq__question:hover { color: var(--white); }
.faq__question .faq__icon {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.55);
  transition: transform 0.3s var(--ease), color 0.2s;
  flex-shrink: 0;
}
.faq__item.open .faq__icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq__answer {
  display: none;
  padding-bottom: 1.25rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
}
.faq__item.open .faq__answer { display: block; }

/* Form */
.form__group {
  margin-bottom: 1.25rem;
}
/* Honeypot anti-spam: oculto visualmente pero presente en el DOM. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;
}
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--white);
  font-size: 0.9rem;
  transition: border-color 0.25s;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: rgba(255,255,255,0.4);
}
.form__input::placeholder,
.form__textarea::placeholder { color: rgba(255,255,255,0.2); }
.form__select option { background: var(--black); }
.form__textarea { resize: vertical; min-height: 120px; }
.form__note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
  margin-top: 0.75rem;
  line-height: 1.6;
}
.form__status {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 0.85rem;
}
.form__status:empty { display: none; }
.form__status--success { color: #CFFFD6; }
.form__status--error   { color: #FFE8A3; }

/* Únete — el fondo pasó de negro a rojo de marca: refuerza el contraste
   de los campos del formulario, que ahí siguen leyéndose sobre rojo directo. */
.unete .form__input,
.unete .form__select,
.unete .form__textarea {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
}
.unete .form__label { color: rgba(255, 255, 255, 0.65); }
.unete .form__note  { color: rgba(255, 255, 255, 0.55); }

/* El botón .btn--rec es rojo sobre rojo aquí (se camufla con el fondo
   de la sección) — invertido a blanco sólido para máximo contraste. */
.unete .btn--rec {
  background: var(--white);
  color: var(--black);
}
.unete .btn--rec::before { background: var(--accent); }
.unete .btn--rec:hover {
  background: var(--gray-100);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

@media (max-width: 640px) {
  .unete__intro { padding-inline: 1.5rem; }
}

/* Separador entre Únete y Contacto — tira de fotograma 35mm con
   perforaciones redondeadas arriba y abajo. Puramente decorativo.
   Ambas secciones usan el mismo rojo de marca, así que el degradado
   interno de la franja crea un ligero "pliegue" de sombra en el centro
   en vez de un corte plano entre los dos bloques. */
.unete-divider {
  position: relative;
  height: clamp(22px, 3vw, 34px);
  background: linear-gradient(to bottom, var(--accent) 0%, var(--accent-dk) 50%, var(--accent) 100%);
  overflow: hidden;
}
.unete-divider::before,
.unete-divider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='0' width='7' height='10' rx='2' fill='white' fill-opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 18px 100%;
  background-position: 9px center;
}
.unete-divider::before { top: 12%; }
.unete-divider::after  { bottom: 12%; }

@media (max-width: 640px) {
  .unete-divider { height: 20px; }
  .unete-divider::before,
  .unete-divider::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Crect x='3' y='0' width='5' height='8' rx='1.5' fill='white' fill-opacity='0.8'/%3E%3C/svg%3E");
    background-size: 14px 100%;
    background-position: 7px center;
  }
}

/* Separador reutilizable de textura de fotograma 35mm — mismo componente
   que .unete-divider (perforaciones redondeadas arriba y abajo sobre una
   franja con degradado), generalizado para el resto de transiciones entre
   secciones. Cada modificador solo cambia el degradado de fondo y el color
   de las perforaciones (oscuras sobre tramos claros, claras sobre tramos
   oscuros, para que sigan viéndose en ambos lados del degradado). */
.section-divider {
  position: relative;
  height: clamp(22px, 3vw, 34px);
  overflow: hidden;
}
.section-divider::before,
.section-divider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  background-repeat: repeat-x;
  background-size: 18px 100%;
  background-position: 9px center;
}
.section-divider::before { top: 12%;    background-image: var(--perf-top); }
.section-divider::after  { bottom: 12%; background-image: var(--perf-bottom); }

@media (max-width: 640px) {
  .section-divider { height: 20px; }
  .section-divider::before,
  .section-divider::after {
    background-size: 13px 100%;
    background-position: 6.5px center;
  }
}

/* Ambos extremos claros (blanco → gris muy claro): perforaciones oscuras. */
.section-divider--light {
  background: linear-gradient(to bottom, var(--white) 0%, var(--gray-50) 100%);
  --perf-top:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='0' width='7' height='10' rx='2' fill='black' fill-opacity='0.3'/%3E%3C/svg%3E");
  --perf-bottom: var(--perf-top);
}

/* Claro → oscuro (gris muy claro → negro): perforación oscura arriba,
   clara abajo, cada una sobre el tramo del degradado donde se lee bien. */
.section-divider--to-dark {
  background: linear-gradient(to bottom, var(--gray-50) 0%, var(--black) 100%);
  --perf-top:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='0' width='7' height='10' rx='2' fill='black' fill-opacity='0.3'/%3E%3C/svg%3E");
  --perf-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='0' width='7' height='10' rx='2' fill='white' fill-opacity='0.8'/%3E%3C/svg%3E");
}

/* Oscuro → claro (negro → blanco): al revés que el anterior. */
.section-divider--to-light {
  background: linear-gradient(to bottom, var(--black) 0%, var(--white) 100%);
  --perf-top:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='0' width='7' height='10' rx='2' fill='white' fill-opacity='0.8'/%3E%3C/svg%3E");
  --perf-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='0' width='7' height='10' rx='2' fill='black' fill-opacity='0.3'/%3E%3C/svg%3E");
}

/* Negro → rojo de marca: ambos extremos oscuros/saturados, perforaciones
   claras en toda la franja (igual que en .unete-divider). */
.section-divider--dark-accent {
  background: linear-gradient(to bottom, var(--black) 0%, var(--accent) 100%);
  --perf-top:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect x='4' y='0' width='7' height='10' rx='2' fill='white' fill-opacity='0.8'/%3E%3C/svg%3E");
  --perf-bottom: var(--perf-top);
}

/* ── 19. Contacto ─────────────────────────────────────────── */
.contacto {}

.contacto__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: start;
}

.contacto__info { }

.contacto__info-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.contacto__info p {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.contacto__data {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.contacto__data-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--gray-600);
}
.contacto__data-item strong { color: var(--black); font-weight: 500; }
.contacto__data-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
  min-width: 52px;
}

.contacto__social {
  display: flex;
  gap: 0.75rem;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0.04em;
  transition: all 0.2s;
}
.social-btn:hover {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.contacto__map {
  margin-top: 2rem;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  border: 1.5px solid var(--gray-200);
}
.contacto__map iframe {
  display: block;
  width: 100%;
  height: 100%;
}
.contacto.section--accent .contacto__map {
  border-color: rgba(255,255,255,0.25);
}

.contacto__form { }
.contacto__form .form__input,
.contacto__form .form__select,
.contacto__form .form__textarea {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--black);
  width: 100%;
}
.contacto__form .form__input:focus,
.contacto__form .form__select:focus,
.contacto__form .form__textarea:focus {
  border-color: var(--black);
}
.contacto__form .form__input::placeholder,
.contacto__form .form__textarea::placeholder { color: var(--gray-400); }
.contacto__form .form__label { color: var(--gray-400); }
.contacto__form .form__select option { background: var(--white); color: var(--black); }

/* Contacto — bloque de marca en rojo: recolorear el texto que llevaba gris/negro fijo */
.contacto.section--accent .contacto__info p { color: rgba(255,255,255,0.85); }
.contacto.section--accent .contacto__data-item { color: rgba(255,255,255,0.8); }
.contacto.section--accent .contacto__data-item strong { color: var(--white); }
.contacto.section--accent .contacto__data-label { color: rgba(255,255,255,0.6); }
.contacto.section--accent .social-btn {
  border-color: rgba(255,255,255,0.45);
  color: var(--white);
}
.contacto.section--accent .social-btn:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--accent);
}

/* ── 20. Footer ───────────────────────────────────────────── */
.footer {
  background: var(--black);
  color: rgba(255,255,255,0.5);
  padding-block: 4rem 2rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2rem;
}

.footer__logo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.footer__logo span { color: var(--accent); }

.footer__tagline {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.5rem;
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}
.footer__social-link {
  height: 36px;
  padding: 0 0.9rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  transition: all 0.2s;
}
.footer__social-link:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
}

.footer__nav-title {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 1.25rem;
}

.footer__nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer__nav-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer__nav-links a:hover { color: rgba(255,255,255,0.85); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__copy {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.25);
}

.footer__uma {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.2);
  text-align: right;
  max-width: 420px;
  line-height: 1.5;
}

.footer__legal {
  display: flex;
  gap: 1.5rem;
}
.footer__legal a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.2);
  transition: color 0.2s;
}
.footer__legal a:hover { color: rgba(255,255,255,0.5); }

/* ── 20bis. Filmstrip — separador de sección tipo tira 35mm ── */
.filmstrip {
  position: relative;
  height: 22px;
  background: var(--black);
  overflow: hidden;
}
.filmstrip::before,
.filmstrip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.85) 0 7px, transparent 7px 18px);
  background-position: 9px 0;
}
.filmstrip::before { top: 4px; }
.filmstrip::after   { bottom: 4px; }

/* ── 21bis. Palomitas — flotan muy suavemente en reposo y reaccionan al cursor ── */
.popcorn-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.popcorn-piece {
  position: absolute;
}

/* Flotado ambiental — leve vaivén, independiente de la reacción al cursor
   (se anima en un elemento distinto para no pisar el transform que pone el JS) */
.popcorn-idle {
  animation-name: popcorn-idle-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes popcorn-idle-float {
  from { transform: translate(-4px, -5px); }
  to   { transform: translate(4px, 5px); }
}

.popcorn-react {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .popcorn-idle { animation: none; }
  .popcorn-react { transition: none; }
}

/* ── 21. Misc helpers ─────────────────────────────────────── */
.text-accent { color: var(--accent); }

.divider {
  height: 1px;
  background: var(--gray-200);
  margin-block: clamp(3rem, 5vw, 5rem);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0.02em;
  transition: gap 0.25s;
}
.link-arrow::after { content: '→'; }
.link-arrow:hover { gap: 0.65rem; }

.link-arrow--white { color: rgba(255,255,255,0.6); }
.link-arrow--white:hover { color: var(--white); }

/* ── 22. Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { padding: 0.5rem 1.1rem; }

  .cinefila__inner  { grid-template-columns: 1fr; }
  .cinefila__img    { aspect-ratio: 16/9; }
  .equipo__grid     { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .unete__grid      { grid-template-columns: 1fr; }
  .contacto__inner  { grid-template-columns: 1fr; }
  .noticias__grid   { grid-template-columns: 1fr 1fr; }

  /* Únete: en móvil desactivamos el pin/sticky de scroll — layout
     normal apilado (foto arriba, formulario debajo), sin desplazamiento
     horizontal ligado al scroll. */
  .unete__transition {
    height: auto;
    position: static;
  }
  .unete__transition-track {
    position: static;
    top: auto;
    height: auto;
    width: 100%;
    display: block;
    overflow: visible;
    transform: none !important;
  }
  .unete__transition-panel {
    flex: none;
    width: 100%;
    height: auto;
    padding-top: 0;
    display: block;
  }
  .unete__transition .unete__intro {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    padding-block: clamp(2.5rem, 10vw, 4rem);
    margin-bottom: clamp(3rem, 8vw, 5rem);
  }
  .unete__form-panel {
    max-height: none;
    overflow-y: visible;
    padding: 0 clamp(1.5rem, 4vw, 2rem);
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  :root { --nav-h: 60px; }

  .noticias__grid   { grid-template-columns: 1fr; }
  .unete__proceso   { grid-template-columns: 1fr 1fr; }

  .gal-item { width: 86vw; }
  .galeria__nav { display: none; }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__uma { text-align: left; }

  .colabs__strip { flex-direction: column; }
  .colab-logo { flex-direction: row; }

  .contacto__social { flex-wrap: wrap; }

  .equipo-card__credit {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
  .equipo-card__name,
  .equipo-card__role {
    white-space: normal;
  }
  .equipo-card__leader {
    flex-basis: 100%;
  }
}

@media (max-width: 400px) {
  .unete__proceso { grid-template-columns: 1fr; }
  .hero__ctas     { flex-direction: column; }
}