/* ==========================================================================
   vx-enhance.css — Capa de mejora progresiva para /inicio (y servicios)
   Profundidad 3D, reveals con perspectiva, tilt de tarjetas, parallax y
   barra de progreso de scroll. TODO va scopeado bajo body.vx3d, que solo lo
   añade vx-enhance.js: si el JS no corre, la página base queda intacta.
   Respeta prefers-reduced-motion y solo activa tilt/parallax en punteros finos.
   No introduce colores nuevos: reutiliza --azul/--teal/--grad/--noche.
   ========================================================================== */

/* --- Barra de progreso de lectura (arriba del todo) --------------------- */
.vx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad, linear-gradient(100deg, #1B4DE4, #10C8A8));
  z-index: 2000; pointer-events: none;
  box-shadow: 0 0 12px rgba(27,77,228,.5);
}

/* --- Reveal con profundidad (mejora el .vx-rev existente) --------------- */
/* Mayor especificidad (body.vx3d ...) para ganarle al .vx-rev inline. */
body.vx3d .vx-rev {
  opacity: 0;
  transform: perspective(1200px) translateY(32px) rotateX(7deg);
  transform-origin: 50% 100%;
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--vx-d, 0ms);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
body.vx3d .vx-rev.vis {
  opacity: 1;
  transform: perspective(1200px) translateY(0) rotateX(0);
}

/* --- Tilt 3D de tarjetas (JS marca .vx-tilt y setea --rx/--ry) ---------- */
body.vx3d .vx-tilt {
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
body.vx3d .vx-tilt.vx-tilting {
  transition: transform .08s linear, box-shadow .3s ease;
  transform:
    perspective(900px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translate3d(0, -6px, 0);
  box-shadow: 0 2px 6px rgba(11,37,69,.08), 0 30px 60px -28px rgba(11,37,69,.55);
}
/* Brillo sutil que sigue al cursor, encima de la tarjeta */
body.vx3d .vx-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255,255,255,.35), transparent 42%);
  mix-blend-mode: soft-light;
}
body.vx3d .vx-tilt.vx-tilting::after { opacity: 1; }
/* El contenido interno se levanta un poco (parallax de profundidad) */
body.vx3d .vx-tilt > * { transform: translateZ(0); }

/* --- Hero: capa de profundidad (glow/mesh) + parallax ------------------ */
body.vx3d .vx-hero { position: relative; overflow: hidden; }
body.vx3d .vx-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(45% 55% at 18% 22%, rgba(27,77,228,.38), transparent 60%),
    radial-gradient(42% 50% at 82% 12%, rgba(16,200,168,.30), transparent 62%),
    radial-gradient(50% 60% at 60% 90%, rgba(27,77,228,.22), transparent 65%);
  transform: translate3d(0, var(--vx-py, 0px), 0);
  will-change: transform;
  filter: saturate(1.1);
}
body.vx3d .vx-hero > * { position: relative; z-index: 1; }
/* El panel "en vivo" del hero flota con leve parallax y perspectiva */
body.vx3d .vx-panel-live {
  transform: translate3d(0, var(--vx-panel, 0px), 0);
  transition: transform .1s linear;
}

/* --- Nav: vidrio esmerilado al hacer scroll ---------------------------- */
body.vx3d .vx-nav {
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
body.vx3d.vx-scrolled .vx-nav {
  background: rgba(6,14,31,.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.6);
}

/* --- Respeto total a quien pide menos movimiento ----------------------- */
@media (prefers-reduced-motion: reduce) {
  body.vx3d .vx-rev { opacity: 1; transform: none; transition: none; }
  body.vx3d .vx-tilt.vx-tilting {
    transform: none; box-shadow: var(--sombra);
  }
  body.vx3d .vx-tilt::after { display: none; }
  body.vx3d .vx-hero::before { transform: none; }
  body.vx3d .vx-panel-live { transform: none; }
  .vx-progress { display: none; }
}

/* En pantallas táctiles no hay tilt (JS tampoco lo activa): sin sorpresas. */
@media (hover: none) {
  body.vx3d .vx-tilt::after { display: none; }
}