/* ============================================================
   N2 · Hero
   Partículas en espiral (canvas) que convergen en el símbolo N2,
   con el titular revelándose por encima.
   Depende de los tokens de brand.css. La animación vive en hero.js.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(72px + clamp(40px, 9vh, 96px)) var(--gutter) clamp(48px, 9vh, 96px);
  overflow: hidden;
}

/* Lienzo de partículas: ocupa todo el hero, detrás del contenido */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Contenido por encima del lienzo */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 3vh, 28px);
}

.hero-eyebrow {
  margin: 0;
}

.hero-title {
  margin: 0;
  max-width: 16ch;
  /* hereda tamaño/peso de h1 en brand.css */
}

/* Cada palabra es un bloque para poder animarla por separado (lo envuelve hero.js).
   Sin JS, el <h1> se muestra como texto normal. */
.hero-title .hero-word {
  display: inline-block;
  white-space: nowrap;
}
.hero-title .hero-word > span {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.hero-sub {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--fg-dim);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(6px, 1.5vh, 14px);
}

@media (max-width: 560px) {
  .hero-actions {
    width: 100%;
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}