/* =========================================================
   HERO
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ========================================================= */
.hero {
  /* El hero es la única sección sin etiqueta y la única que arranca en
     scroll 0 (su borde superior coincide con el borde de la pantalla, no
     con el pie del header). Por eso mide un viewport completo, reserva el
     alto del header como padding y su parada de snap es el scroll 0. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  scroll-margin-top: 0;
}

/* El degradado del fondo es el componente .mesh (css/base/mesh.css), que
   se sacó de acá para poder reutilizarlo en otras secciones. La velocidad
   se regula con --mesh-speed. */


.hero__photo {
  /* DESKTOP: ocupa el lado derecho del fondo (alto completo, pegada al
     borde derecho). Usa personas-crop.png. object-fit: contain para no
     recortar gente; el 44% de ancho está elegido para que la multitud
     llegue casi hasta el título sin taparlo, igual que en el Figma.
     En tablet/mobile pasa a pantalla completa (más abajo). */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  z-index: 1;
  pointer-events: none;
  /* Deriva vertical lenta en loop. El keyframe de inicio y fin son
     iguales para que el ciclo no tenga salto. El recorrido es chico
     (3% del alto) porque la foto llega casi al borde: si se mueve más,
     el overflow:hidden del hero le recorta gente. */
  animation: heroPhotoDrift 20s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroPhotoDrift {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo { animation: none; }
}

.hero__content {
  position: relative;
  z-index: 2;
  /* Sin padding vertical propio: el aire lo da el centrado del .hero,
     así queda exactamente el mismo arriba del título que abajo del botón. */
  /* El ancho de columna cambia por breakpoint (más ancho en mobile, más
     angosto en desktop) para que el título de al lado pueda ser más
     grande/legible en pantallas chicas sin dejar de entrar en 1 línea. */
  max-width: 90vw;
}
@media (min-width: 641px) {
  .hero__content { max-width: 74vw; }
}
@media (min-width: 1025px) {
  .hero__content { max-width: 58vw; }
}

/* Título: 4 líneas fijas. Cada .hero__line es un bloque con nowrap, así
   ninguna línea se parte por su cuenta. El tamaño es fluido en vw
   (sin clamp) y calibrado por breakpoint contra el ancho de la columna,
   para que la línea más larga entre siempre justo. */
.hero__line {
  display: block;
  white-space: nowrap;
}

/* En mobile la última línea SÍ puede cortarse, pero únicamente en el
   guión blando (­) del HTML: queda "SIN AUTO-" / "CONOCIMIENTO.".
   Eso libera espacio y permite un título bastante más grande que si
   tuviera que entrar entero en una línea. */
@media (max-width: 1024px) {
  .hero__line--breakable {
    white-space: normal;
    hyphens: manual;
  }
}

/* Tamaños calibrados por binary search contra la línea más larga que NO
   puede cortarse en cada breakpoint (mobile/tablet: "NO HAY LIDERAZGO";
   desktop: "SIN AUTOCONOCIMIENTO." completa). Verificado sin desborde
   entre 320px y 2560px. */
.hero__title {
  font-size: 8.38vw;
}
@media (min-width: 641px) {
  .hero__title { font-size: 7vw; }
}
@media (min-width: 1025px) {
  .hero__title { font-size: 4.1vw; }
}
.hero__title .is-dark { color: var(--color-text-dark); }
.hero__title .is-light { color: var(--color-text-light); }

/* =========================================================
   ANIMACIÓN DE ENTRADA DEL TÍTULO
   ---------------------------------------------------------
   Cada línea sube y aparece, escalonada, y detrás siguen la bajada y el
   botón para que la entrada se lea como un solo movimiento.
   Es CSS puro, sin JS: el hero está arriba del fold, así que arranca al
   cargar la página.
   fill-mode "backwards" (y NO "both"): backwards ya evita el parpadeo,
   porque durante el delay el elemento usa el keyframe inicial. Con "both"
   se suma "forwards", y los valores de una animación con forwards siguen
   aplicándose al terminar y en la cascada le ganan a las reglas normales,
   :hover incluido. Eso dejaba el transform del último keyframe pegado y
   el hover del botón (scale) no hacía nada. Al terminar la animación,
   opacity y transform vuelven a su valor natural, que es exactamente el
   del keyframe final, así que no cambia nada visualmente.
   ========================================================= */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__line,
.hero__subtitle,
.hero .btn {
  animation: heroIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.hero__line:nth-child(1) { animation-delay: 0.10s; }
.hero__line:nth-child(2) { animation-delay: 0.22s; }
.hero__line:nth-child(3) { animation-delay: 0.34s; }
.hero__line:nth-child(4) { animation-delay: 0.46s; }
.hero__subtitle          { animation-delay: 0.60s; }
.hero .btn               { animation-delay: 0.72s; }

/* Sin animación de entrada si el sistema pide menos movimiento: se
   muestran directamente en su posición final. */
@media (prefers-reduced-motion: reduce) {
  .hero__line,
  .hero__subtitle,
  .hero .btn { animation: none; }
}

.hero__subtitle {
  color: var(--color-text-light);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 24px;
  margin-top: var(--space-4);
  max-width: 32ch;
}

.hero .btn {
  margin-top: var(--space-5);
}

/* En tablet/mobile la foto pasa a PANTALLA COMPLETA (a sangre). Es un PNG
   recortado, así que cubrir todo no tapa el degradado: se lee como una
   multitud dispersa sobre el color. Baja la opacidad y pasa detrás del
   texto para no competir con la lectura. */
@media (max-width: 1024px) {
  .hero__photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.38;
    z-index: 0;
  }
}