/* ============================================================
   ESPACIO ROJO — Capa de animación (GSAP)
   Todo cuelga de html.fx. Esa clase la pone un script mínimo en
   <head> solo si el visitante NO pidió "reducir movimiento".
   Sin la clase, el sitio se ve exactamente como antes.
   No cambia colores, textos ni imágenes: solo movimiento.
   ============================================================ */

/* ---------- Anclas: el scroll suave lo hace GSAP, no el navegador ---------- */
html.fx { scroll-behavior: auto; }

/* ---------- Cortina de transición entre páginas ----------
   El ::before cubre la primera pintura (evita el parpadeo del
   contenido antes de que GSAP arranque). fx.js lo reemplaza por
   la cortina real y le añade .fx-ready. Si el JS falla, la
   animación de seguridad lo retira a los 4 s. */
html.fx:not(.fx-ready) body::before {
  content: ""; position: fixed; inset: 0; z-index: 100000;
  background: var(--ink, #0d0d0d);
  animation: fx-failsafe 0.01s 4s forwards;
}
@keyframes fx-failsafe { to { opacity: 0; visibility: hidden; } }

.fx-curtain {
  position: fixed; inset: 0; z-index: 100000; display: flex; pointer-events: none;
}
.fx-curtain.is-active { pointer-events: all; }
.fx-curtain-col {
  flex: 1; background: var(--ink, #0d0d0d); transform-origin: top; will-change: transform;
  margin-right: -1px; /* evita rendijas por subpíxeles */
}
.fx-curtain-col:nth-child(odd) { background: var(--ink-soft, #1a1a1a); }
.fx-curtain-brand {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.1rem; color: #fff; pointer-events: none;
}
.fx-curtain-logo {
  font-family: 'Syne', sans-serif; font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2rem, 6vw, 3.6rem); overflow: hidden; line-height: 1.15; padding-bottom: 0.08em;
}
.fx-curtain-logo span { display: inline-block; }
.fx-curtain-logo .r { color: var(--red, #e63946); }
.fx-curtain-bar {
  width: min(220px, 50vw); height: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; border-radius: 2px;
}
.fx-curtain-bar i { display: block; height: 100%; background: var(--red, #e63946); transform: scaleX(0); transform-origin: left; }
.fx-curtain-count {
  font-family: 'Syne', sans-serif; font-size: 0.8rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}

/* ---------- Barra de progreso de scroll ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 950; background: var(--red, #e63946);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  box-shadow: 0 0 12px rgba(230, 57, 70, 0.6);
}

/* ---------- Cursor ---------- */
.fx-cursor-dot, .fx-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 100001; pointer-events: none; border-radius: 50%;
  opacity: 0; will-change: transform;
}
.fx-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--red, #e63946); }
.fx-cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(230, 57, 70, 0.7); transition: background-color 0.25s, border-color 0.25s;
}
.fx-cursor-ring.is-hover { background: rgba(230, 57, 70, 0.1); border-color: rgba(230, 57, 70, 0.9); }
.fx-cursor-ring.is-text { border-radius: 4px; }

/* ---------- Elementos animados: GSAP maneja transform y opacidad ----------
   Las hojas del sitio ponen `transition: transform/opacity` en tarjetas y
   .reveal; con GSAP moviendo lo mismo, las dos curvas pelean y se siente
   pastoso. Se quitan solo esas dos propiedades; color, sombra y fondo
   siguen animándose con CSS como antes. */
html.fx .reveal,
html.fx .reveal.visible { opacity: 1; transform: none; transition: none; }
html.fx .fx-card {
  transition-property: background-color, border-color, box-shadow, color !important;
  transition-delay: 0s !important;
}
html.fx .fx-card.fx-tilting { will-change: transform; }
/* El :hover de las hojas movía la tarjeta con CSS; ahora lo hace GSAP */
html.fx .fx-card:hover { transform: none; }
html.fx .fx-btn {
  transition-property: background-color, border-color, box-shadow, color, opacity !important;
}
html.fx .footer-badge i, html.fx .fx-btn i { display: inline-block; }

/* Línea de la línea de tiempo: se dibuja con el scroll */
html.fx .timeline::before { transform-origin: top; transform: scaleY(var(--fx-line, 1)); }

/* Modal: lo anima GSAP */
html.fx .modal-box { transition: none; }

/* Máscara de SplitText: deja respirar los descendentes (g, y, p) */
.fx-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.fx-split-line, .fx-split-word { will-change: transform; }

/* ---------- Navegación ---------- */
html.fx .nav-link { position: relative; }
html.fx .nav-link::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.28rem; height: 2px;
  background: var(--red, #e63946); border-radius: 2px; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
html.fx .nav-link:hover::after, html.fx .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Botones: brillo que cruza + base para magnético ---------- */
html.fx .fx-btn { position: relative; overflow: hidden; isolation: isolate; will-change: transform; }
html.fx .fx-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg) translateX(0); pointer-events: none;
}
html.fx .fx-btn:hover::after { animation: fx-shine 0.9s cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes fx-shine { to { transform: skewX(-18deg) translateX(520%); } }

/* ---------- Tarjetas: halo que sigue al cursor ---------- */
html.fx .fx-glow { position: relative; }
html.fx .fx-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(230, 57, 70, 0.10), transparent 60%);
  transition: opacity 0.35s;
}
html.fx .fx-glow:hover::after { opacity: 1; }

/* ---------- Texto que se revela palabra a palabra con el scroll ---------- */
.fx-scrub-word { display: inline-block; }

/* ---------- Móvil: sin cursor ni tilt (lo controla fx.js) ---------- */
@media (hover: none), (pointer: coarse) {
  .fx-cursor-dot, .fx-cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-curtain, .fx-progress, .fx-cursor-dot, .fx-cursor-ring { display: none !important; }
}