/* GestionYa - capa HERO + PRELOADER (complementa site.css seccion 17)
   Solo transform / opacity / clip-path. Todo lo que se crea aqui lo inserta
   motion-hero.js por JS; sin JS estas reglas no afectan nada. */

/* ---------- Preloader: anillo de progreso y cortina de salida ---------- */
.loader__mark { position: relative; }
.loader__ring {
  /* .loader__mark es grid: fijamos tamano y alineacion para que el hijo absoluto no se centre a medias */
  position: absolute; left: -9px; top: -9px;
  width: 74px; height: 74px; max-width: none; place-self: start;
  pointer-events: none; overflow: visible;
}
.loader__ring-track { fill: none; stroke: var(--border); stroke-width: 2; }
.loader__ring-bar {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
}
.loader__wipe {
  position: absolute; inset: 0; z-index: 2;
  background: var(--accent);
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}
.loader__wipe-mark {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 16px; background: var(--accent-ink); color: var(--accent);
  display: grid; place-items: center; font-size: 1.7rem;
}

/* ---------- Hero: capas de profundidad ---------- */
.hero__depth {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  will-change: transform;
}
.hero__lines {
  position: absolute; inset: -10% 0 0 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 20%, transparent 75%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero__copy { will-change: transform; }

/* Escenario del mockup: sombra y reflejo que reaccionan al tilt */
.hero__stage { position: relative; transform-style: preserve-3d; }
.hero__stage > .frame { position: relative; z-index: 1; }
.hero__shadow {
  position: absolute; inset: 12% 8% -4% 8%; z-index: 0;
  border-radius: 32px;
  background: color-mix(in srgb, var(--accent) 45%, var(--text) 25%);
  filter: blur(44px);
  opacity: .3;
  transform: translateZ(-60px);
  pointer-events: none;
  will-change: transform, opacity;
}
:root:not([data-theme="light"]) .hero__shadow { opacity: .42; }
.hero__gloss {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- Titular: palabra clave subrayada ---------- */
.w--mark > span { position: relative; }
.hero__ink {
  position: absolute; left: .02em; right: .02em; bottom: -.05em; height: .09em;
  border-radius: .1em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- Botones: brillo de "listo" una sola vez ---------- */
.btn--primary.is-shine::before { transform: translateX(120%); }
.btn--primary.is-shine-reset::before { transition: none; transform: translateX(-120%); }

/* ---------- Sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__lines, .hero__shadow, .hero__gloss, .loader__wipe { display: none; }
  .hero__ink { transform: none; }
}