/* ==========================================================================
   hero.css — sección hero con 3 columnas verticales de "capturas" que se
   desplazan hacia arriba en loop, cada una a su velocidad.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  padding: clamp(120px, 18vh, 200px) 0 clamp(70px, 10vh, 130px);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero .container { position: relative; z-index: 2; }

/* Halo detrás del texto: capa que sigue el ancho del container y difumina lo
   que pasa por detrás. El radial-gradient hace que el efecto se disipe hacia
   los bordes en vez de cortar en seco. */
.hero .container::before {
  content: "";
  position: absolute;
  /* Se extiende más allá del container para que el difuminado no tenga borde */
  inset: -80px clamp(-40px, -4vw, -20px);
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(15, 18, 23, 0.85) 0%,
    rgba(15, 18, 23, 0.70) 40%,
    rgba(15, 18, 23, 0.35) 70%,
    transparent 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Solo el párrafo descriptivo, no el kicker */
.hero p:not(.kicker) {
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--grey);
  max-width: 58ch;
  margin-bottom: 40px;
}
.hero p strong { color: var(--white); font-weight: 500; }

/* Kicker del hero: etiqueta de sistema, pixel, pequeña, en gris */
.kicker--hero {
  display: inline-block;
  color: var(--grey);
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* ---------- Mosaico de 3 columnas ---------- */

.hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 60px);
  padding: 0 clamp(20px, 4vw, 64px);
  /* Fade suave en top y bottom para que los tiles entren y salgan sin cortar */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.col {
  position: relative;
  overflow: hidden;
  /* --dur se define inline en cada columna */
}

/* La columna central va detrás del titular: la atenuamos para que no compita */
.col--center { opacity: 0.35; }

.col-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  /* La animación mueve la mitad de la altura del track (el track contiene
     los tiles duplicados), así que al llegar a -50% el estado visual es
     idéntico al inicio y el loop es seamless. */
  animation: col-scroll var(--dur, 60s) linear infinite;
  will-change: transform;
}
/* Los divs generados por include.js son bloques flex ellos mismos, así que
   se centran gracias a align-items: center de arriba. Fijamos que ocupen
   todo el ancho para que la variación de anchos por nth-child se aplique
   sobre el .float-tile interno, no sobre el wrapper. */
.col-track > * {
  width: 100%;
  display: flex;
  justify-content: center;
}

@keyframes col-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Los tiles dentro de las columnas. Cada uno con leve variación de tamaño
   y rotación para que el mosaico no parezca una rejilla perfecta. */
.float-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 220 / 155;
  border-radius: 10px;
  overflow: hidden;
  background: var(--black-soft);
  border: 1px solid var(--lines);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  transition: transform .4s ease;
}
.float-tile svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Variaciones sutiles de tamaño por posición dentro de la columna.
   Usamos módulos coprimos (3 y 4) para que la combinación no se
   sincronice y cada tile se sienta un poco distinto. */
.col-track > *:nth-child(3n+1) .float-tile { aspect-ratio: 220 / 165; }
.col-track > *:nth-child(3n+2) .float-tile { aspect-ratio: 240 / 150; }
.col-track > *:nth-child(3n+3) .float-tile { aspect-ratio: 210 / 175; }

.col-track > *:nth-child(4n+1) .float-tile { width: 74%; }
.col-track > *:nth-child(4n+2) .float-tile { width: 82%; }
.col-track > *:nth-child(4n+3) .float-tile { width: 70%; }
.col-track > *:nth-child(4n+4) .float-tile { width: 78%; }

/* Estamos en un hero decorativo: el movimiento es la personalidad de la
   sección. Solo apagamos el fade-in y la marquesina cuando el usuario
   pide reducir movimiento, no las columnas. */