/* =============================================================
   SUPREME LP — hero.css
   Sección hero: layout FlightPath adaptado a paleta blanco/crema
   Elementos: tagline · headline Bebas Neue · logo flotando ·
              iconos sociales · scroll indicator · descripción
   ============================================================= */

/* ── 1. CONTENEDOR PRINCIPAL DEL HERO ──────────────────────── */
/* Ocupa el 100% del viewport como en la referencia */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--bg);          /* blanco en lugar del negro de la referencia */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 2. ARCOS RADIALES DE FONDO ─────────────────────────────── */
/* Replica los círculos concéntricos sutiles del fondo FlightPath
   Aquí en gris muy claro sobre blanco (apenas perceptibles) */
.hero-bg-arcs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 60%, transparent 28%, rgba(0,0,0,0.025) 29%, transparent 30%),
    radial-gradient(circle at 50% 60%, transparent 44%, rgba(0,0,0,0.022) 45%, transparent 46%),
    radial-gradient(circle at 50% 60%, transparent 60%, rgba(0,0,0,0.018) 61%, transparent 62%),
    radial-gradient(circle at 50% 60%, transparent 76%, rgba(0,0,0,0.015) 77%, transparent 78%);
}

/* ── 3. CONTENIDO CENTRAL DEL HERO ─────────────────────────── */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 0 2rem;
}

/* ── 4. TAGLINE PEQUEÑO (fila superior) ─────────────────────── */
/* Replica: "Forged From Precious Metals And Stones | FLIGHTPATH" */
.hero-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

/* Separador vertical "|" en dorado como en la referencia */
.hero-tagline-sep {
  color: var(--accent-gold);
  font-weight: 300;
  opacity: 0.7;
}

/* ── 5. HEADLINE MASIVO (elemento visual principal) ─────────── */
/* Bebas Neue ultra-bold condensado — ocupa casi todo el ancho
   clamp() escala automáticamente según el viewport */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 14rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  position: relative;
  z-index: 1;              /* DEBAJO del logo (logo z-index: 3) */
  white-space: pre-line;   /* respeta los \n del i18n */
  margin-bottom: 0;
}


/* ── 7. ICONOS SOCIALES (sidebar izquierdo) ─────────────────── */
/* Réplica exacta de la posición en el frame de referencia */
.hero-social {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  z-index: 10;
}

.hero-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color var(--transition);
}

.hero-social a:hover {
  color: var(--accent-gold);
}

.hero-social svg {
  width: 18px;
  height: 18px;
}

/* ── 8. SCROLL INDICATOR (abajo izquierda) ───────────────────── */
/* "SCROLL TO EXPLORE ↓" — posición exacta de la referencia */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 10;
}

.hero-scroll-arrow {
  animation: bounceDown 1.6s ease-in-out infinite;
  display: inline-block;
}

/* ── 9. DESCRIPCIÓN (abajo derecha) ──────────────────────────── */
/* Bloque de texto pequeño en la esquina inferior derecha
   Réplica de las 2 líneas de copy en la referencia */
.hero-description {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.7;
  z-index: 10;
  max-width: 220px;
}

.hero-desc-dot {
  display: block;
  color: var(--accent-gold);
  font-size: 0.5rem;
  margin-bottom: 0.4rem;
  text-align: right;
}