/* ===================== ANIMACIONES (inicio / planes) ===================== */
.orb { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; }
.o1 { width: 420px; height: 420px; background: #7c3aed; top: -120px; left: -80px; animation: drift1 18s ease-in-out infinite alternate; }
.o2 { width: 360px; height: 360px; background: #a855f7; bottom: -100px; right: -60px; opacity: .3; animation: drift2 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(180px, 120px) scale(1.2); } }
@keyframes drift2 { to { transform: translate(-160px, -100px) scale(1.15); } }

.js .reveal { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

.nav { transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.nav .wrap { transition: height .3s var(--ease); }
.nav.scrolled { background: rgba(10, 12, 19, .9); box-shadow: 0 10px 30px -18px #000; }
.nav.scrolled .wrap { height: 58px; }

.grad { background-size: 220% 100%; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.pill i { animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }

.float-stage .window { animation: floaty 7s ease-in-out infinite; }
.float-stage .dc { animation: floaty 7s ease-in-out -3.5s infinite; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.dc-btn { animation: popin .5s var(--ease) both; }
.dc-btn:nth-child(2) { animation-delay: .15s; }
.dc-btn:nth-child(3) { animation-delay: .3s; }
@keyframes popin { from { opacity: 0; transform: scale(.7); } }

.card { position: relative; overflow: hidden; isolation: isolate; }
.card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, .22), transparent 60%);
}
.card:hover::after { opacity: 1; }
.card .ico { transition: transform .35s var(--ease); }
.card:hover .ico { transform: translateY(-3px) rotate(-6deg) scale(1.08); }

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg);
  animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 60% { left: -80%; } 100% { left: 160%; } }

.plan.best { animation: glow 3.5s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 40px 90px -30px rgba(168, 85, 247, .95), 0 0 0 1px rgba(168, 85, 247, .5); } }
.ribbon { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-3px); } }
.save { animation: popin .6s var(--ease) .4s both; }
tbody tr:hover td { background: rgba(124, 58, 237, .1); }
details summary:hover { color: #c4b5fd; }
details[open] p { animation: rise .4s var(--ease); }

.band { position: relative; overflow: hidden; }
.band::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(168, 85, 247, .25), transparent 30%); animation: spin 12s linear infinite; z-index: 0; }
.band > * { position: relative; z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* La cinta de los planes sobresale de la tarjeta: no recortarla */
.plan { overflow: visible; }
.card::after { border-radius: inherit; }
.ribbon { z-index: 3; }