/* ═══════════════════════════════════════════════════════════
   CREA — WEB · CAPA CINE
   intro de bienvenida · rail de producciones scroll-driven ·
   scrub tipográfico del manifiesto · captura de email
   Regla de marca: Clash Display SIEMPRE en mayúscula.
═══════════════════════════════════════════════════════════ */

/* ── INTRO DE BIENVENIDA ─────────────────────────────────── */
.intro {
  position: fixed; inset: 0; z-index: 30000;
  background: var(--navy, #1B2F6E);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.intro::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12vh;
  background: linear-gradient(to bottom, rgba(27,47,110,0) 0%, rgba(15,26,64,0.55) 100%);
  pointer-events: none;
}
.intro.lift { transform: translateY(-101%); }
.intro.gone { display: none; }
.intro__inner { text-align: center; padding: 0 24px; }
.intro__word {
  display: flex; justify-content: center; gap: 0.04em;
  overflow: hidden; padding-bottom: 0.06em;
  font-family: 'Clash Display', sans-serif; font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(72px, 16vw, 200px); line-height: 1; color: #F6F4F0;
  letter-spacing: 0.01em;
}
.intro__word span {
  display: inline-block; transform: translateY(112%); opacity: 0;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.intro.play .intro__word span { transform: translateY(0); opacity: 1; }
.intro.play .intro__word span:nth-child(1) { transition-delay: 0.10s; }
.intro.play .intro__word span:nth-child(2) { transition-delay: 0.18s; }
.intro.play .intro__word span:nth-child(3) { transition-delay: 0.26s; }
.intro.play .intro__word span:nth-child(4) { transition-delay: 0.34s; }
.intro__line {
  width: 0; height: 3px; margin: 26px auto 18px;
  background: var(--red, #CC2233);
  transition: width 0.7s cubic-bezier(0.76, 0, 0.24, 1) 0.55s;
}
.intro.play .intro__line { width: min(180px, 30vw); }
.intro__tag {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.32em; text-transform: uppercase; color: rgba(246,244,240,0.72);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s;
}
.intro.play .intro__tag { opacity: 1; transform: translateY(0); }
.intro__skip {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(246,244,240,0.4);
  background: none; border: 0; cursor: pointer; padding: 10px 14px;
  opacity: 0; transition: opacity 0.5s ease 1.1s;
}
.intro.play .intro__skip { opacity: 1; }
.intro__skip:hover { color: rgba(246,244,240,0.85); }
body.intro-lock { overflow: hidden; }

/* hero respira al levantarse el telón (estilo Apple) */
.hero__bg video { transform: scale(1.08); transition: transform 2.6s cubic-bezier(0.22, 1, 0.36, 1); }
body.intro-done .hero__bg video { transform: scale(1); }

/* ── MANIFIESTO · SCRUB DE PALABRAS ──────────────────────── */
.manifesto__title .mw {
  display: inline-block;
  opacity: var(--wo, 1);
  transition: opacity 0.25s linear;
}

/* ── RAIL DE PRODUCCIONES (scroll-driven) ────────────────── */
.reel {
  position: relative;
  background: #0E1633;
  color: #F6F4F0;
}
.reel__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(26px, 4.5vh, 48px);
  overflow: hidden;
}
.reel__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; width: 100%;
}
.reel__title {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 64px); line-height: 1.02; letter-spacing: 0.005em;
  color: #F6F4F0; margin-top: 16px;
}
.reel__title .ac { color: var(--red, #CC2233); }
.reel__hint {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(246,244,240,0.55);
  white-space: nowrap; padding-bottom: 10px;
  transition: opacity 0.4s ease;
}
.reel__hint .reel__hint-arrow { display: inline-block; margin-left: 10px; animation: reelNudge 1.6s ease-in-out infinite; }
@keyframes reelNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
.reel.scrubbing .reel__hint { opacity: 0; }

.reel__viewport { width: 100%; }
.reel__rail {
  display: flex; align-items: stretch; gap: clamp(14px, 2vw, 26px);
  padding-left: max(24px, calc((100vw - 1200px) / 2));
  padding-right: 24px;
  will-change: transform;
  width: max-content;
}
.reel__card {
  position: relative; margin: 0; overflow: hidden;
  height: min(58vh, 540px);
  border-radius: 26px;
  background: #16204a;
  flex: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.reel__card img, .reel__card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.reel__card { aspect-ratio: 3 / 4; }
.reel__card--video { aspect-ratio: 16 / 10; }
.reel__card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 22px 18px;
  background: linear-gradient(to top, rgba(7, 12, 32, 0.82), rgba(7, 12, 32, 0));
  display: flex; flex-direction: column; gap: 4px;
}
.reel__cat {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246,244,240,0.66);
}
.reel__name {
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 19px;
  text-transform: uppercase; letter-spacing: 0.02em; color: #F6F4F0;
}
.reel__card--cta {
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(204, 34, 51, 0.32), rgba(204, 34, 51, 0) 55%),
    linear-gradient(160deg, #1B2F6E 0%, #101c45 100%);
  padding: 26px 24px 28px;
  border: 1px solid rgba(246, 244, 240, 0.12);
}
.reel__card--cta .reel__cta-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(246,244,240,0.6); margin-bottom: 12px;
}
.reel__card--cta .reel__cta-title {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.08; color: #F6F4F0;
  margin-bottom: 18px;
}
.reel__card--cta .reel__cta-title em { font-style: normal; color: var(--red, #CC2233); }
.reel__card--cta .btn { align-self: flex-start; }

/* mobile / pointer grueso: scroll horizontal nativo con snap */
@media (max-width: 859px), (pointer: coarse) {
  .reel { height: auto !important; }
  .reel__sticky { position: static; height: auto; padding: 84px 0 64px; overflow: visible; }
  .reel__head { padding-right: 24px; flex-wrap: wrap; }
  .reel__viewport {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .reel__viewport::-webkit-scrollbar { display: none; }
  .reel__rail { transform: none !important; }
  .reel__card { scroll-snap-align: center; height: min(52vh, 440px); }
}

/* ── CAPTURA DE EMAIL ────────────────────────────────────── */
.leadcap {
  position: fixed; inset: 0; z-index: 26000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  visibility: hidden; pointer-events: none;
}
.leadcap.open { visibility: visible; pointer-events: auto; }
.leadcap__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 16, 40, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.45s ease;
}
.leadcap.open .leadcap__overlay { opacity: 1; }
.leadcap__card {
  position: relative; width: min(480px, 100%);
  background: var(--paper, #F6F4F0); color: var(--navy, #1B2F6E);
  border-radius: 24px; padding: 38px 34px 30px;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(26px) scale(0.96);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.leadcap.open .leadcap__card { opacity: 1; transform: translateY(0) scale(1); }
.leadcap__card::before {
  content: ""; position: absolute; top: 0; left: 34px; width: 64px; height: 4px;
  background: var(--red, #CC2233); border-radius: 0 0 4px 4px;
}
.leadcap__x {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(27, 47, 110, 0.18); background: none;
  color: var(--navy, #1B2F6E); font-size: 20px; line-height: 1; cursor: pointer;
  transition: background 0.2s ease;
}
.leadcap__x:hover { background: rgba(27, 47, 110, 0.08); }
.leadcap__eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--red, #CC2233);
}
.leadcap__title {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.05; letter-spacing: 0.005em;
  margin: 12px 0 10px;
}
.leadcap__sub { font-size: 14.5px; line-height: 1.55; color: rgba(27, 47, 110, 0.78); margin-bottom: 22px; }
.leadcap__form { display: flex; flex-direction: column; gap: 10px; }
.leadcap__form input {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1px solid rgba(27, 47, 110, 0.22); background: #fff;
  font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--navy, #1B2F6E);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.leadcap__form input:focus {
  outline: none; border-color: var(--navy, #1B2F6E);
  box-shadow: 0 0 0 3px rgba(27, 47, 110, 0.12);
}
.leadcap__form button { justify-content: center; margin-top: 4px; }
.leadcap__fine {
  font-size: 11.5px; color: rgba(27, 47, 110, 0.5); margin-top: 14px; text-align: center;
}
.leadcap__ok { text-align: center; padding: 16px 0 6px; }
.leadcap__ok-ic {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(27, 47, 110, 0.08); color: var(--navy, #1B2F6E);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}
.leadcap__ok h3 {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  text-transform: uppercase; font-size: 24px; margin-bottom: 8px;
}
.leadcap__ok p { font-size: 14px; color: rgba(27, 47, 110, 0.75); margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro__word span, .intro__line, .intro__tag, .hero__bg video,
  .leadcap__card, .leadcap__overlay { transition: none !important; animation: none !important; }
  .reel__hint .reel__hint-arrow { animation: none; }
}