/**
 * hero.css — Estilos del hero (replica de hero-section.component.tsx).
 *
 * Depende de: tokens.css (colores, tipografías, radio).
 * Contiene: layout de la sección, titular con badges (clip-path reveal),
 * marquee infinito de 3 filas y CTA con entrada whileInView.
 */

/* ==========================================================================
   Sección hero
   (Se imprime vía hook astra_header_after, fuera del .ast-container de
   Astra, por lo que ocupa el ancho completo sin trucos de full-bleed.)
   ========================================================================== */
.lm-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 0 3rem; /* pt-24 pb-12 (también despeja el header fijo) */
}

/* ==========================================================================
   Contenido principal (subtítulo + titular)
   ========================================================================== */
.lm-hero__content {
  height: 100svh;
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.5rem; /* mt-2 */
  padding: 0 1rem; /* px-4 */
  text-align: center;
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto;
  margin-right: auto;
}

.lm-hero__subtitle {
  color: var(--on-surface-variant);
  margin-bottom: 0.5rem; /* mb-2 */
  letter-spacing: -0.025em; /* tracking-tight */
  animation: lm-fade-up 0.8s ease both;
  --fade-y: 15px;
}

/* Titular (headline-lg → Bubblegum Sans) */
.lm-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 400; /* Bubblegum Sans solo tiene un peso */
  margin: 0;
  animation: lm-fade-in 1s ease both;
}
.lm-hero__title > * + * {
  margin-top: 0.5rem; /* space-y-2 */
}

.lm-hero__line {
  display: block;
  font-size: 10vw;
  line-height: 0.85;
  letter-spacing: -0.025em; /* tracking-tight */
  color: var(--foreground);
  --fade-y: 30px;
}
.lm-hero__line--1 {
  animation: lm-fade-up 0.6s ease 0.2s both;
}
.lm-hero__line--2 {
  animation: lm-fade-up 0.6s ease 1.2s both;
}

/* --- Badges SANO / NATURAL (reveal con clip-path + rotación) --- */
.lm-hero__title .lm-hero__badge {
  display: block;
  position: relative;
  background: var(--secondary);
  color: var(--on-secondary);
  padding: 0.25rem; /* p-1 */
  border-radius: calc(var(--radius) - 4px); /* rounded-sm */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
  margin-top: -1rem; /* -mt-12 (solapa la línea anterior) */
}
.lm-hero__badge > span {
  display: block;
  font-size: 12vw;
  line-height: 0.8;
  padding: 0.25rem 0; /* py-1 */
  margin-top: 1rem; /* mt-4 (compensa el baseline de Bubblegum Sans) */
}
.lm-hero__badge--left {
  animation: lm-badge-left 0.8s ease-in-out 0.5s both;
}
.lm-hero__badge--right {
  animation: lm-badge-right 0.8s ease-in-out 1.3s both;
}

@keyframes lm-badge-left {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateX(-70px) rotate(0deg);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0) rotate(-3deg);
  }
}
@keyframes lm-badge-right {
  from {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
    transform: translateX(50px) rotate(0deg);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0) rotate(2deg);
  }
}

/* ==========================================================================
   Escenario: marquee de fondo + círculo central
   ========================================================================== */
.lm-hero__stage {
  position: relative;
  padding: 6rem 0; /* py-24 */
  margin: 0;
  overflow: visible;
}

/* --- Marquee infinito (3 filas, rotado 10°, detrás de todo) --- */
.lm-hero__marquee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(10deg);
  width: 200vw; /* cubre las esquinas al estar rotado */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  user-select: none;
  color: var(--tertiary);
}
.lm-hero__marquee-row {
  display: flex;
}
.lm-hero__marquee-row--last {
  padding-top: 0.5rem; /* pt-2 */
}
.lm-hero__marquee-track {
  display: flex;
  width: max-content;
  animation: lm-marquee 180s linear infinite;
}
.lm-hero__marquee-track--reverse {
  animation-direction: reverse;
}
.lm-hero__marquee-chunk {
  display: flex;
  flex-shrink: 0;
}
.lm-hero__marquee-text {
  font-family: var(--font-text);
  font-weight: 800; /* font-extrabold */
  font-size: 4vw;
  line-height: 1; /* leading-none */
  text-transform: uppercase;
  padding-right: 3rem; /* pr-12 */
  white-space: nowrap;
}
.lm-hero__marquee-text--outline {
  color: transparent;
  -webkit-text-stroke: 2px #d7a960; /* hardcodeado en el TSX original */
}

@keyframes lm-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* dos bloques idénticos → bucle perfecto */
  }
}

/* --- Círculo central + CTA --- */
.lm-hero__circle {
  position: relative;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Entrada whileInView del CTA (clase .is-inview puesta por inview.js) */
.lm-hero__cta-wrap {
  z-index: 70;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease 0.6s,
    transform 0.5s ease 0.6s;
}
.lm-hero__cta-wrap.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.lm-hero__cta {
  margin-top: 3.5rem; /* mt-14 */
  background: var(--primary);
  color: var(--on-primary-container);
  padding: 1rem 3.5rem; /* py-4 px-14 */
  border: none;
  border-radius: 9999px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.75rem; /* text-xs */
  letter-spacing: 0.3em; /* tracking-[0.3em] */
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
  cursor: pointer;
  transition: transform 0.2s ease;
}
.lm-hero__cta:hover {
  transform: scale(1.05);
}
.lm-hero__cta:active {
  transform: scale(0.95);
}

/* Keyframes compartidos del hero */
@keyframes lm-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--fade-y, 20px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes lm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Breakpoints (md 768 / lg 1024 / xl 1280)
   ========================================================================== */
@media (min-width: 768px) {
  .lm-hero__content {
    margin-top: 1rem; /* md:mt-4 */
  }
  .lm-hero__subtitle {
    font-size: 1.25rem; /* md:text-xl */
    margin-bottom: 2rem; /* md:mb-8 */
  }
  .lm-hero__title > * + * {
    margin-top: 1rem; /* md:space-y-4 */
  }
  .lm-hero__line {
    font-size: 5vw; /* md:text-[5cqw] */
  }
  .lm-hero__badge > span {
    font-size: 6vw;
  }
  .lm-hero__marquee-text {
    font-size: 6vw; /* md:text-[6cqw] */
  }
  .lm-hero__cta {
    font-size: 0.875rem; /* md:text-sm */
  }
}

@media (min-width: 1024px) {
  .lm-hero__subtitle {
    font-size: 1.5rem; /* lg:text-2xl */
  }
  .lm-hero__title > * + * {
    margin-top: 1.5rem; /* lg:space-y-6 */
  }
  .lm-hero__line {
    font-size: 6vw;
  }
  .lm-hero__badge > span {
    font-size: 8vw;
  }
}

@media (min-width: 1280px) {
  .lm-hero__line {
    font-size: 8vw;
  }
  .lm-hero__badge > span {
    font-size: 10vw;
  }
}

/* ==========================================================================
   Accesibilidad: usuarios con movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lm-hero__subtitle,
  .lm-hero__title,
  .lm-hero__line--1,
  .lm-hero__line--2,
  .lm-hero__badge--left,
  .lm-hero__badge--right {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
  .lm-hero__marquee-track {
    animation: none;
  }
  .lm-hero__cta-wrap {
    transition: none;
    opacity: 1;
    transform: none;
  }
}