body { background-color: #050505; color: #a1a1aa; overflow-x: hidden; }

.plan-row { background-color: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; transition: all 0.3s ease; }
@media (min-width: 768px) {
    .plan-row:hover { background-color: #111111; border-color: rgba(255, 255, 255, 0.2); transform: translateX(5px); }
    .plan-row.premium-cyan:hover { border-color: #00f0ff; box-shadow: -5px 0 30px rgba(0, 240, 255, 0.1); }
    .plan-row.premium-pink:hover { border-color: #bc1888; box-shadow: -5px 0 30px rgba(188, 24, 136, 0.1); }
}

.bg-grid { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.tab-btn { color: #a1a1aa; font-weight: 600; transition: all 0.3s ease; }
.tab-btn.active { background-color: #ffffff; color: #000000; border-radius: 0.5rem; }
.view-content { display: none; animation: fadeIn 0.4s ease; }
.view-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

#cart-sidebar { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.cart-open { transform: translateX(0) !important; }

/* FIX HERO: WebP nativo */
.hero-bg-dynamic { background-image: url('../video/captura.webp'); }
@media (min-width: 768px) { .hero-bg-dynamic { background-image: url('../video/background-devs.webp'); } }

#main-nav { transition: all 0.4s ease; border-color: transparent; background-color: transparent; }
.nav-scrolled { background-color: rgba(5, 5, 5, 0.85) !important; backdrop-blur: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important; }

.wp-float { position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 60; }
@media (min-width: 768px) { .wp-float { bottom: 2rem; right: 2rem; } }
.wp-aura { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from 0deg, #00f0ff, #bc1888, #00f0ff); filter: blur(12px); animation: spinAura 3s linear infinite; opacity: 0.8; z-index: -1; transition: opacity 0.3s; }
.wp-float:hover .wp-aura { opacity: 1; filter: blur(16px); }
@keyframes spinAura { 100% { transform: rotate(360deg); } }
@keyframes cartBump { 0% { transform: scale(1); } 50% { transform: scale(1.4) rotate(-10deg); color: #00f0ff; border-color: #00f0ff; } 100% { transform: scale(1); } }
.animar-carrito { animation: cartBump 0.4s ease-out; }
details > summary { list-style: none; outline: none; }
details > summary::-webkit-details-marker { display: none; }
.faq-text-anim { animation: fadeInDown 0.4s ease-out forwards; }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }