/* ═══════════════════════════════════════════════════════════
   HERO — .hero
   ═══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: auto; /* Cambiado a auto para eliminar el espacio vacío inferior */
  display: flex;
  align-items: flex-start;
  padding-top: var(--bb-space-12);
  padding-bottom: 0; /* Eliminado el relleno inferior */
  overflow: hidden;
  background-color: var(--bb-color-gray-10);
  text-align: left;
}

/* 1. Canvas e Interacción */
.hero__waves-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 2. Blobs Decorativos (Efecto Bloom) */
.hero__bg-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__blob {
  position: absolute;
  border-radius: var(--bb-radius-full);
  filter: blur(140px);
  opacity: 0.15;
}

.hero__blob--1 {
  width: 520px;
  height: 520px;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bb-color-blue-primary);
}

.hero__blob--2 {
  width: 360px;
  height: 360px;
  bottom: 0;
  right: 0;
  background-color: var(--bb-color-gray-40);
}

.hero__blob--3 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 20%;
  background-color: var(--bb-color-blue-light);
}

.hero__container {
  position: relative;
  z-index: var(--bb-z-raised);
  max-width: var(--bb-container-max);
  margin: 0 auto;
  padding: var(--bb-space-8) var(--bb-space-6) 0 var(--bb-space-6); /* Bottom 0 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bb-space-4);
  width: 100%;
}

/* 3. Badge (Sparkle) — Ahora minimalista azul a la izquierda */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  padding: 0;
  background-color: transparent;
  border: none;
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-weight-semibold);
  letter-spacing: var(--bb-tracking-widest);
  text-transform: uppercase;
  color: var(--bb-color-blue-primary); /* Azul solicitado */
  text-align: left;
}

.hero__badge-icon {
  color: var(--bb-color-blue-primary);
  font-size: 1.1em;
}

.hero__title {
  font-size: clamp(var(--bb-text-4xl), 7vw, var(--bb-text-6xl));
  max-width: 18ch;
  margin: 0; /* Removido centrado */
  text-align: left;
}

.hero__description {
  font-size: var(--bb-text-lg);
  font-weight: var(--bb-weight-medium);
  line-height: var(--bb-leading-relaxed);
  color: #212121;
  max-width: 60ch;
  margin: 0;
  text-align: left;
}

.hero__tagline {
  display: block;
  font-size: var(--bb-text-base);
  font-weight: var(--bb-weight-regular);
  color: var(--bb-text-secondary);
  margin-top: var(--bb-space-2);
}

/* 4. Pills (Características) — Alineadas izquierda */
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--bb-space-3);
  list-style: none;
  padding: 0;
}

.hero__pill {
  padding: var(--bb-space-2) var(--bb-space-5);
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--bb-color-surface-high);
  border-radius: var(--bb-radius-full);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-weight-medium);
  letter-spacing: var(--bb-tracking-wide);
  text-transform: uppercase;
  color: var(--bb-text-secondary);
  backdrop-filter: blur(4px);
}

/* 5. Stats v2 (Grid) */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bb-space-4);
  width: 100%;
  max-width: 720px; /* Ajustado para balancear la izquierda */
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--bb-radius-xl);
  padding: var(--bb-space-8);
  backdrop-filter: blur(12px);
  margin: 0; /* Asegurar alineación izquierda */
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-1);
}

.stat-item__label {
  font-size: var(--bb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--bb-tracking-widest);
  color: var(--bb-text-tertiary);
}

.stat-item__value {
  font-size: var(--bb-text-3xl);
  font-weight: var(--bb-weight-semibold);
  color: var(--bb-text-primary);
}

@media (max-width: 768px) {
  .hero__stats {
    grid-template-columns: 1fr;
    padding: var(--bb-space-6);
  }
}


/* Eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-weight-semibold);
  letter-spacing: var(--bb-tracking-widest);
  text-transform: uppercase;
  color: var(--bb-color-blue-primary);
  max-width: none;
}

.hero__eyebrow-dot {
  font-size: 0.5em;
  color: var(--bb-color-blue-primary);
}

/* Título H1 */
.hero__title {
  font-size: clamp(var(--bb-text-4xl), 6.5vw, var(--bb-text-6xl));
  font-weight: var(--bb-weight-semibold);   /* 600 — arriba desde light  */
  line-height: var(--bb-leading-tight);
  letter-spacing: var(--bb-tracking-tight);
  color: #4D4D4D;                            /* Gris 80% solicitado */
  max-width: 16ch;
}

.hero__title-base {
  color: #4D4D4D; /* Gris 80% */
}

/* Acento en itálica */
.hero__accent {
  font-family: 'Montserrat', sans-serif; 
  font-style: italic;
  font-weight: var(--bb-weight-bold);
  font-size: 0.9em; /* Reducción del 10% solicitada */
  color: var(--bb-color-blue-primary);
  display: block; /* Asegurar que el tamaño reducido no rompa la composición inline extraña */
  margin-top: 0.2em;
}

/* Acciones */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0; /* Espacio eliminado por solicitud del usuario */
  margin-top: var(--bb-space-2);
}

/* Métricas */
.hero__metrics {
  display: flex;
  align-items: center;
  gap: var(--bb-space-8);
  margin-top: var(--bb-space-8);
  padding-top: var(--bb-space-6);
  border-top: 1px solid var(--bb-color-surface-high);
  flex-wrap: wrap;
}

.hero__metric {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-1);
}

.hero__metric-value {
  font-size: var(--bb-text-3xl);
  font-weight: var(--bb-weight-light);
  color: var(--bb-text-primary);
  letter-spacing: var(--bb-tracking-tight);
  line-height: 1;
}

.hero__metric-label {
  font-size: var(--bb-text-xs);
  letter-spacing: var(--bb-tracking-widest);
  text-transform: uppercase;
  color: var(--bb-text-tertiary);
}

.hero__metric-divider {
  width: 1px;
  height: 2.5rem;
  background-color: var(--bb-color-surface-high);
  flex-shrink: 0;
}

/* Grid de fondo decorativo — Removido por solicitud de minimalismo */
.hero__bg-grid {
  display: none;
}

/* ─── Background Paths (port Vanilla JS de BackgroundPaths) ──── */
.hero__bg-paths {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;          /* debajo del grid y del contenido */
}

.hero__paths-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .hero__title {
    max-width: 100%;
  }
  .hero__metrics {
    gap: var(--bb-space-5);
  }
  .hero__metric-divider {
    display: none;
  }
}