/* =========================================================================
   GALOPANTE MEDIA — Intro interactiva + Hero
   FASE 1: sólo estilos necesarios para el pin + scrub del Video 1.
   Las clases de las secuencias (seq1, seq2, seq3, seq4, hero) se agregan
   en las fases siguientes; acá sólo dejamos la paleta y el reset listos
   para que no haya que reescribir nada después.
   ========================================================================= */

:root {
  /* Paleta corporativa Galopante — única fuente de verdad en CSS.
     No introducir colores nuevos sin necesidad (sección 5 del brief). */
  --petro-galopante: #09121C;
  --aquamarina: #B3ECE6;
  --coral: #EB455D;
  --hueso: #F1F0F0;
  --cuarzo-ahumado: #89837A;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--petro-galopante);
  color: var(--hueso);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

/* Preparado para GOAT vía @font-face en cuanto estén los archivos web.
   No sustituir automáticamente por otra tipografía (sección 6). */
@font-face {
  font-family: 'GOAT';
  src: url('../assets/fonts/GOAT.woff2') format('woff2'),
       url('../assets/fonts/GOAT.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------
   VIDEO 1 — sección pinneada, controlada por scroll

   OJO: #intro-scrub NO define su propia altura acá. La distancia de
   scroll (cuántos vh dura el recorrido completo) es una única fuente
   de verdad: GALOPANTE_CONFIG.SCROLL.distanceVh en config.js. GSAP
   (ScrollTrigger pin + pinSpacing) es quien reserva ese espacio en el
   documento automáticamente. Si esta sección tuviera además una
   altura fija en CSS, el espacio de scroll quedaría duplicado.
   ------------------------------------------------------------------- */
#intro-scrub {
  position: relative;
  width: 100%;
}

#intro-scrub .pin-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Mismo color que el primer frame del Video 1: evita cualquier
     flash negro mientras el video todavía está cargando metadata. */
  background: var(--coral);
}

#video1 {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  /* El video nunca se reproduce por sí mismo: sólo currentTime. */
  pointer-events: none;
}

/* -------------------------------------------------------------------
   SECUENCIA 1 — "scrolleá hacia el origen de las buenas ideas"

   Capa HTML por encima del video (mismo sistema de coordenadas
   fullscreen). pointer-events: none porque es puramente decorativa —
   nunca debe interceptar el scroll ni clicks futuros.
   ------------------------------------------------------------------- */
.seq {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.seq1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.seq1-copy {
  color: var(--hueso);
  will-change: transform, opacity;
}

.seq1-line {
  margin: 0;
}

.seq1-line--lead {
  font-weight: 300;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 1.25rem;
}

.seq1-line--sub {
  font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.seq1-arrow {
  margin-top: 3rem;
  color: var(--hueso);
  will-change: transform, opacity;
}

.seq1-arrow-glyph {
  display: block;
  will-change: transform;
}

/* -------------------------------------------------------------------
   SECUENCIA 2 — "GALOPAMOS / MARCAS"

   Sin fondo sólido detrás (se descartó): el texto queda directamente
   sobre el Video 1.

   .seq2-copy: GALOPAMOS arriba, MARCAS abajo, sin gap entre ambos —
   el borde compartido es el "eje horizontal invisible" del brief.
   Cada palabra se revela con clip-path (ver sequence2.js), nunca con
   opacity, y vuelve a cerrarse (salida) antes de que termine el
   capítulo "galopamos".
   ------------------------------------------------------------------- */
.seq2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.seq2-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.seq2-word {
  margin: 0;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--hueso);
}

.seq2-word--galopamos {
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
}

.seq2-word--marcas {
  font-weight: 800;
  font-size: clamp(3rem, 7.5vw, 5.5rem);
}

/* -------------------------------------------------------------------
   SECUENCIA 3 — "HACEMOS" + disciplinas

   .seq3-exit-mask: máscara exterior (clip-path animado sólo en la
   salida). .seq3-block: HACEMOS + disciplinas como bloque único, es lo
   que se desplaza hacia arriba en la salida. .seq3-hacemos-wrap: su
   propia máscara de revelación (independiente de la de salida).
   .seq3-discipline-wrap: overflow:hidden individual por disciplina.
   ------------------------------------------------------------------- */
.seq3 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.seq3-exit-mask {
  display: flex;
}

.seq3-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* HACEMOS pegado casi contra el bloque tipográfico (pedido del
     cliente: "más grande y más cerca de este bloque"). */
  gap: clamp(0.3rem, 1vw, 0.75rem);
}

.seq3-hacemos-wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
}

.seq3-hacemos {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  /* Vuelto a achicar (pedido del cliente, según referencia): HACEMOS
     acompaña al bloque tipográfico pero no compite en peso visual con
     él — es una etiqueta lateral, no un título más. */
  font-size: clamp(0.85rem, 1.3vw, 1.1rem);
  color: var(--hueso);
  white-space: nowrap;
}

/* Línea delgada entre HACEMOS y el bloque ESTRATEGIA/BRANDING/CONTENIDO/
   GROWTH (pedido del cliente, según referencia). Se estira a la altura
   del wrap de HACEMOS (align-self: stretch dentro de .seq3-block, que
   es flex row align-items: center) para leerse como un separador, no
   como un adorno suelto. */
.seq3-divider {
  align-self: stretch;
  width: 1px;
  background: var(--hueso);
  opacity: 0.35;
}

/* -------------------------------------------------------------------
   Bloque tipográfico ESTRATEGIA/BRANDING/CONTENIDO/GROWTH

   Igual que en la referencia del cliente: cada palabra tiene su propio
   tamaño de fuente (no un tamaño único para las 4), calculado para que
   las 4 líneas ocupen un ancho similar entre sí y el conjunto se lea
   como un bloque prolijo — no como una lista con tamaños parejos.
   align-items: flex-start alinea los 4 renglones por su borde
   IZQUIERDO (igual que la referencia — todas las palabras arrancan
   pegadas a la línea divisoria/HACEMOS), dejando el borde derecho
   escalonado según el largo de cada palabra.
   ------------------------------------------------------------------- */
.seq3-disciplines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.15rem, 0.6vw, 0.4rem);
}

.seq3-discipline-wrap {
  overflow: hidden;
}

.seq3-discipline {
  display: block;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.seq3-discipline--estrategia {
  color: var(--hueso);
  font-size: clamp(2rem, 5.5vw, 3.75rem);
}

.seq3-discipline--branding {
  color: var(--aquamarina);
  font-size: clamp(2.3rem, 6.4vw, 4.4rem);
}

.seq3-discipline--contenido {
  color: var(--coral);
  font-size: clamp(2.1rem, 5.75vw, 4rem);
}

.seq3-discipline--growth {
  color: var(--cuarzo-ahumado);
  font-size: clamp(2.75rem, 7.5vw, 5.25rem);
}

/* -------------------------------------------------------------------
   Placeholder temporal para verificar, en FASE 1, que el pin libera
   correctamente y el scroll continúa con normalidad después del
   Video 1. Se reemplaza en FASE 8/9 por la transición real a Video 2
   + hero. No es parte del diseño final.
   ------------------------------------------------------------------- */
#dev-placeholder-next {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cuarzo-ahumado);
  color: var(--petro-galopante);
  font-size: 1.5rem;
  text-align: center;
  padding: 2rem;
}