/* ==========================================================
   Micrositios V2T: componentes adaptados de 21st.dev (spotlight,
   glowing effect, scroll velocity, floating navbar, shimmer button).
   Toma el acento de cada sitio: --acento en visión, --yellow en el resto.
   ========================================================== */
:root { --fx: var(--acento, var(--yellow)); }

/* Foco de luz que entra en diagonal en la primera pantalla */
.fx-foco { position: absolute; left: -12%; top: -40%; width: 138%; height: 169%; pointer-events: none; color: var(--fx); opacity: 0; animation: fx-foco 2s var(--ease, ease-out) .5s forwards; }
@keyframes fx-foco { from { opacity: 0; transform: translate(-72%, -62%) scale(.5); } to { opacity: 1; transform: translate(-50%, -40%) scale(1); } }

/* Borde luminoso que se enciende cuando el puntero se acerca */
.fx-brilla { position: relative; }
.fx-brilla::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--fx), color-mix(in srgb, var(--fx) 35%, transparent) 35%, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.fx-brilla.fx-cerca::after { opacity: 1; }

/* Cinta de palabras que avanza con el scroll */
.fx-cinta { position: relative; display: grid; gap: 8px; padding-block: clamp(24px, 3.4vw, 40px); overflow: hidden; background: var(--bg-2, #101724); border-top: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-cinta__fila { overflow: hidden; }
.fx-cinta__pista { display: flex; width: max-content; will-change: transform; }
.fx-cinta__pista > div { display: flex; align-items: center; flex: none; }
.fx-cinta span { padding-inline: clamp(14px, 2vw, 26px); font: 700 clamp(1.8rem, 4.6vw, 3.8rem)/1.1 var(--font-head); letter-spacing: -.03em; white-space: nowrap; color: var(--text); }
.fx-cinta span.fx-hueca { color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .45); }
.fx-cinta__fila + .fx-cinta__fila span { font-size: clamp(1.2rem, 2.8vw, 2.2rem); color: var(--fx); }
.fx-cinta__fila + .fx-cinta__fila span.fx-hueca { color: transparent; -webkit-text-stroke-color: color-mix(in srgb, var(--fx) 65%, transparent); }
.fx-cinta i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--fx); box-shadow: 0 0 12px var(--fx); }

/* Navegación que se vuelve isla flotante al bajar */
.nav { left: 50%; right: auto; width: 100%; translate: -50% 0; transition: top 360ms var(--ease), width 360ms var(--ease), border-radius 360ms var(--ease), background-color .3s, box-shadow .3s; }
.nav__inner { transition: height 360ms var(--ease); }
.nav__logo img { transition: height 360ms var(--ease); }
.nav.is-scrolled { top: 12px; width: min(1240px, calc(100% - 24px)); border-radius: 999px; background: rgba(10, 14, 22, .8); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.nav.is-scrolled .nav__inner { height: 60px; }
.nav.is-scrolled .nav__logo img { height: 36px; }

/* Destello que cruza el botón principal al pasar el puntero */
.btn--primary::after { background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) 160% 0 / 250% 100% no-repeat, var(--fx); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover::after { background-position: -60% 0, 0 0; transition: background-position 800ms var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-foco { animation: none !important; opacity: 1; transform: translate(-50%, -40%); }
  .fx-brilla::after { display: none; }
  .fx-cinta__pista > div + div { display: none; }
  .fx-cinta__pista { flex-wrap: wrap; width: auto; }
  .nav, .nav__inner, .nav__logo img { transition: none; }
}