/* ============================================================
   hero.css — Sección Hero (centrado, fondo de partículas)
   Descentralizados
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: var(--nav-height);
}

/* ── Canvas de partículas — fondo absoluto ──────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* el mouse pasa al section para la interacción */
}

/* ── Contenido centrado ─────────────────────────────────────── */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-20) var(--container-pad);
  max-width: 780px;
  width: 100%;
}

/* Tag superior */
.hero-tag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero-tag .tag {
  color: var(--color-accent);
  opacity: 0.85;
}

/* Headline */
.hero-headline {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-white);
}

.hero-headline em {
  font-style: normal;
  color: var(--color-accent);
}

/* Subtítulo */
.hero-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--color-white-60);
  max-width: 46ch;
}

/* CTA — un único botón */
.hero-cta {
  margin-top: var(--space-4);
}

/* ── Indicador de scroll ─────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.4;
  transition: opacity var(--duration-base);
}

.scroll-indicator:hover { opacity: 0.8; }

.scroll-indicator span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-white);
}

.scroll-arrow {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--color-white));
  animation: scrollPulse 2s var(--ease-inout) infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}