/* ============================================================
   LEOSTUDIO — sections/hero.css  (remaster)
   HERO de base CLARA con 3 tarjetas tech OSCURAS "embebidas"
   (fiel a CONTEXT.md §2). Efectos sutiles: halo de cursor,
   speed lines, glow en palabras clave; aparición secuencial vía
   IntersectionObserver (js/hero.js).
   Mobile-first. Depende de: tokens.css, base.css, animations.css.
   Nota de color: los glows/bordes púrpura usan rgba del --purple de
   marca (rgb 123,63,228); no hay token con alpha intermedio.
   ============================================================ */

/* === HERO: LAYOUT === */

.ls-hero {
  position: relative;
  overflow: hidden; /* contiene el halo de cursor y las speed lines */
  padding-block: clamp(var(--space-xl), 10vw, var(--space-2xl));
}

.ls-hero__inner {
  position: relative;
  z-index: 1; /* contenido por encima de halo / speed lines */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 980px) {
  .ls-hero__inner {
    grid-template-columns: 6fr 4fr;
    gap: var(--space-2xl); /* más aire entre el texto y las tarjetas */
  }
}

/* === COLUMNA IZQUIERDA: CONTENIDO === */

.ls-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.ls-hero__headline {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
}

/* Palabra clave en morado con glow púrpura pulsante muy sutil */
.ls-hero__glow-word {
  color: var(--purple);
  animation: ls-glow-pulse 5s ease-in-out infinite;
}

.ls-hero__subhead {
  max-width: 520px;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--text-secondary);
}

/* Bullets de valor: columna en mobile, fila desde tablet */
.ls-hero__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .ls-hero__bullets {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
  }
}

.ls-hero__bullet {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.ls-hero__bullet::before {
  content: '\2713'; /* ✓ */
  color: var(--green);
  font-weight: 700;
}

/* CTAs: stack en mobile, fila desde tablet */
.ls-hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  width: 100%;
}

@media (min-width: 600px) {
  .ls-hero__ctas {
    flex-direction: row;
    align-items: center;
    width: auto;
  }
}

.ls-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-btn);
  font-weight: 600;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base);
}

.ls-hero__cta:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.ls-hero__cta--primary {
  background: var(--gradient-primary);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-card);
}

.ls-hero__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover), 0 0 30px rgba(123, 63, 228, 0.4);
}

.ls-hero__cta--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.ls-hero__cta--secondary:hover {
  border-color: var(--purple);
  background: rgba(123, 63, 228, 0.08);
}

/* === COLUMNA DERECHA: ¿QUÉ HACE UN SISTEMA LEOSTUDIO? === */

.ls-hero__features {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.ls-hero__features-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.ls-hero__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

/* Tablet: las 3 tarjetas en fila */
@media (min-width: 768px) and (max-width: 979px) {
  .ls-hero__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tarjeta tech OSCURA embebida sobre la base clara */
.ls-hero__card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) * 0.75);
  padding: var(--space-sm);
  background: var(--bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.ls-hero__card:hover {
  transform: translateY(-3px);
  border-color: rgba(123, 63, 228, 0.5);
  box-shadow: var(--shadow-card-hover), 0 0 28px rgba(123, 63, 228, 0.18);
}

.ls-hero__card-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 20px; /* tamaño del glyph Tabler */
  border-radius: var(--radius-btn);
  background: rgba(123, 63, 228, 0.15);
  color: var(--purple-soft);
}

.ls-hero__card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-on-dark);
}

.ls-hero__card-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) * 0.35);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ls-hero__card-list li {
  position: relative;
  padding-left: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--text-on-dark-soft);
}

.ls-hero__card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple-soft);
}

/* === MASCOTA — firma pequeña, esquina inferior derecha === */

.ls-hero__mascot {
  position: absolute;
  z-index: 2;
  top: calc(-1 * var(--space-md));
  right: calc(-1 * var(--space-xs));
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--purple-soft);
  overflow: hidden;
  background: var(--bg-dark);
  transform: scaleX(-1); /* el león mira hacia el contenido */
  transition: transform 1s var(--ease-out-expo); /* giro suave por proximidad */
}

.ls-hero__mascot-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Bounce único al cargar (sin loop); reduced-motion lo desactiva */
  animation: mascot-bounce 0.9s var(--ease-out-expo) both;
}

/* === EFECTO: HALO DE CURSOR (desktop) === */

.ls-hero__cursor-halo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px; /* centra el gradiente en (x, y) */
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(30, 43, 255, 0.12) 0%,
    rgba(123, 63, 228, 0.10) 40%,
    transparent 70%
  );
  transition: transform 200ms ease-out, opacity var(--transition-base);
  will-change: transform;
}

.ls-hero__cursor-halo.is-active {
  opacity: 1;
}

/* === EFECTO: SPEED LINES (desktop) === */

.ls-hero__speed-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.08;
}

.ls-hero__speed-line {
  position: absolute;
  height: 1px;
  width: 200px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  animation: ls-speed-line linear infinite;
}

.ls-hero__speed-line:nth-child(1) { top: 20%; animation-duration: 22s; animation-delay: 0s; }
.ls-hero__speed-line:nth-child(2) { top: 45%; animation-duration: 28s; animation-delay: 4s; }
.ls-hero__speed-line:nth-child(3) { top: 70%; animation-duration: 25s; animation-delay: 8s; }
.ls-hero__speed-line:nth-child(4) { top: 85%; animation-duration: 30s; animation-delay: 2s; }

/* === APARICIÓN SECUENCIAL (js/hero.js añade .is-visible) === */

.ls-hero__animate {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  transition-delay: var(--delay, 0ms);
}

.ls-hero__animate.is-visible {
  opacity: 1;
  transform: none;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
  .ls-hero__cursor-halo,
  .ls-hero__speed-lines {
    display: none;
  }

  /* Reserva espacio para que el león (arriba-derecha) no tape el título */
  .ls-hero__features-title {
    padding-right: 100px;
  }

  /* Reemplazo sutil del halo en mobile: tinte animado de fondo */
  .ls-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse at top right,
      rgba(123, 63, 228, 0.08),
      transparent 60%
    );
    animation: ls-bg-shift 8s ease-in-out infinite alternate;
  }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  .ls-hero__animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ls-hero__glow-word,
  .ls-hero__mascot-img {
    animation: none;
  }

  .ls-hero__cursor-halo,
  .ls-hero__speed-lines {
    display: none;
  }

  .ls-hero::before {
    animation: none;
  }
}