/* ==========================================================================
   Interacciones — cursor custom (parallette) + estela neón + tilt/glow cards.
   Se activa por JS (body.cursor-custom) solo en desktop con puntero fino y sin
   prefers-reduced-motion. Si el JS no corre, el cursor del sistema queda intacto.
   ========================================================================== */

/* ---------- Cursor parallette + estela ---------- */
.pcursor, .ptrail { display: none; }

@media (pointer: fine) {
  body.cursor-custom { cursor: none; }
  body.cursor-custom a,
  body.cursor-custom button,
  body.cursor-custom .btn,
  body.cursor-custom [data-tilt],
  body.cursor-custom [role="button"],
  body.cursor-custom [data-href] { cursor: none; }
  /* En campos de texto mantenemos el cursor nativo (escribir se siente natural) */
  body.cursor-custom input,
  body.cursor-custom textarea,
  body.cursor-custom select { cursor: text; }
  /* Links chicos de texto (Instagram, etc.): cursor de mano nativo (mejor legibilidad) */
  body.cursor-custom a.coach-ig,
  body.cursor-custom [data-cursor="native"] { cursor: pointer; }

  body.cursor-custom .pcursor,
  body.cursor-custom .ptrail { display: block; }
}

.ptrail {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
}

.pcursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 54px;
  height: 30px;
  margin-left: -27px;   /* hotspot al centro */
  margin-top: -15px;
  z-index: 9998;
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0);
  color: #FF2A2A;                       /* el SVG usa currentColor; el JS lo adapta al fondo hovereado */
  --pc-glow: rgba(255, 55, 55, 0.85);
  filter: drop-shadow(0 0 5px var(--pc-glow)) drop-shadow(0 0 13px var(--pc-glow));
  transition: opacity 0.2s ease, filter 0.2s ease, color 0.2s ease;
  will-change: transform;
}
.pcursor svg { width: 100%; height: 100%; display: block;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
/* Sobre algo clickeable: la parallette SE AGRANDA (no aparece el cursor nativo) */
.pcursor.is-hover {
  filter: drop-shadow(0 0 7px var(--pc-glow)) drop-shadow(0 0 20px var(--pc-glow));
}
.pcursor.is-hover svg { transform: scale(1.55); }
.pcursor.is-hidden { opacity: 0; }

/* ---------- Tilt 3D + glow que sigue al cursor (cards) ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
  will-change: transform;
}

[data-glow] { position: relative; }
[data-glow]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--glow-red-soft), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
[data-glow]:hover::before { opacity: 1; }
[data-glow] > * { position: relative; z-index: 1; }

/* Sin tilt en touch o reduced-motion (neutraliza el transform inline del JS) */
@media (hover: none), (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
}

/* ---------- Reveal al entrar al viewport (reemplaza AOS, sin scroll-x) ----------
   data-reveal           → fade-up con máscara de movimiento vertical (no horizontal)
   data-reveal="clip"    → wipe con clip-path (ideal para imágenes)
   data-reveal-delay="…" → stagger (lo setea js/reveal.js en --reveal-delay)        */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}
/* El clip-path SOLO le corresponde al wipe. Aplicado a todo [data-reveal] recortaba
   cada elemento revelado a un rectángulo duro: mataba el radio de las esquinas y
   cortaba las sombras/glows que tienen que salir por fuera de la caja. */
[data-reveal="clip"].in {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}