/* ==========================================================================
   sections/hero.css
   Hero: canvas de código, monograma IO 3D, titular rotativo, CTAs,
   indicador de scroll y cinta infinita de servicios.
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
  padding-top: 70px;
}
/* Viñeta para que el centro respire */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.5) 60%, var(--negro) 100%);
}
.hero__grid {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem); text-align: center;
  padding-block: 1rem 2rem;
}
.hero__title { font-size: var(--fs-xl); font-weight: 900; }
/* Palabras rotativas: todas apiladas en la misma celda → sin saltos de layout */
.rotator { display: inline-grid; vertical-align: top; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.rotator__item { grid-area: 1 / 1; color: var(--naranja); }
.rotator__item:not(.is-active) { visibility: hidden; }
html.js.motion .rotator__item { visibility: visible; }
.hero__lead { color: var(--gris); font-size: var(--fs-md); max-width: 30ch; }
.hero__lead strong { color: var(--blanco); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Monograma IO (SVG inline animable) */
.mono-wrap { perspective: 900px; width: clamp(150px, 40vw, 220px); }
.mono { width: 100%; height: auto; overflow: visible; will-change: transform; }
.mono__arrow { animation: arrowFloat 2.6s ease-in-out infinite, glowPulse 2.6s ease-in-out infinite; }

/* Indicador de scroll */
.scroll-ind {
  position: relative; z-index: 1; display: none;
  margin: 0 auto 1.25rem; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-code); font-size: var(--fs-xs); color: var(--gris);
}
.scroll-ind__mouse { width: 22px; height: 34px; border: 1.5px solid var(--linea-2); border-radius: 12px; display: grid; justify-items: center; padding-top: 6px; }
.scroll-ind__mouse span { width: 3px; height: 7px; border-radius: 3px; background: var(--naranja); animation: scrollDot 1.6s var(--ease-out) infinite; }

/* Marquee de servicios (el contenido está duplicado para el loop infinito) */
.marquee {
  position: relative; z-index: 1; overflow: hidden;
  border-block: 1px solid var(--linea); background: rgba(14, 14, 16, 0.8);
  padding-block: 0.75rem;
}
.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem;
  font-family: var(--font-titulo); font-weight: 800; font-size: var(--fs-lg); white-space: nowrap;
}
/* Flechita naranja entre servicios */
.marquee__item::after {
  content: ""; width: 12px; height: 15px; background: var(--naranja);
  clip-path: polygon(50% 0, 100% 55%, 68% 55%, 68% 100%, 32% 100%, 32% 55%, 0 55%);
}

/* ---- Desktop: título izquierda · IO centro · texto derecha ---- */
@media (min-width: 960px) {
  .hero__grid {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: clamp(2rem, 4vw, 4rem); text-align: left;
  }
  .hero__left { order: 1; }
  .mono-wrap { order: 2; width: clamp(220px, 19vw, 300px); }
  .hero__right { order: 3; display: grid; gap: 1.75rem; justify-items: start; }
  .hero__ctas { justify-content: flex-start; }
  .scroll-ind { display: flex; }
}
@media (max-width: 959px) {
  .hero__right { display: grid; gap: 1.5rem; justify-items: center; }
}