/* ============================================================
   Rumbo al Top — Capa Premium (mejora progresiva)
   Se aplica encima del diseño base. Si no carga, la web
   sigue funcionando perfectamente. No modifica ningún texto.
   ============================================================ */

html{color-scheme:only light}
:root{
  --rt-azul:#007FFF;
  --rt-azul2:#0a5bcc;
  --rt-amar:#ffc61e;
  --rt-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Barra de progreso de lectura ---------- */
.premium-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,#007FFF,#0a5bcc 55%,#ffc61e);
  z-index:120; pointer-events:none;
  box-shadow:0 1px 10px rgba(0,127,255,.45);
}

/* ---------- Foco accesible elegante ---------- */
:focus-visible{ outline:2px solid #007FFF; outline-offset:3px; border-radius:6px; }

/* ---------- Destello animado en palabras acento de los títulos ---------- */
h1 .text-accent, h2 .text-accent{
  background:linear-gradient(100deg,#0a5bcc,#007FFF 28%,#48a6ff 50%,#007FFF 72%,#0a5bcc);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:rt-shine 7s linear infinite;
}
@keyframes rt-shine{ to{ background-position:-220% 0; } }

/* ---------- Tarjetas con inclinación 3D ---------- */
.rt-tilt{
  transform-style:preserve-3d;
  will-change:transform;
}

/* ---------- Brillo deslizante en botones ---------- */
.btn-cta, .btn-blue, .nav-cta, .btn{ position:relative; overflow:hidden; }
.btn-cta::after, .btn-blue::after, .nav-cta::after, .btn::after{
  content:""; position:absolute; top:0; left:-160%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .65s var(--rt-ease);
  pointer-events:none; z-index:1;
}
.btn-cta:hover::after, .btn-blue:hover::after, .nav-cta:hover::after, .btn:hover::after{ left:160%; }

/* ---------- Botones magnéticos (suavizado del retorno) ---------- */
.rt-magnetic{ transition:transform .35s var(--rt-ease); }

/* ---------- Reveal: misma lógica, mejor curva y un punto de escala ---------- */
.reveal{ transition:opacity .9s var(--rt-ease), transform .9s var(--rt-ease) !important; }
.js-ready .reveal{ transform:translateY(22px) scale(.985); }
.js-ready .reveal.in{ transform:none; }

/* ---------- Respeto a quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .premium-progress{ display:none; }
  h1 .text-accent, h2 .text-accent{ animation:none; }
  .btn-cta::after, .btn-blue::after, .nav-cta::after, .btn::after{ display:none; }
  .reveal{ transition:none !important; }
}