@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Poppins:wght@300;400;600;700&display=swap'); /* ========================================= THEME: RED NEON (rojo/escarlata/carmesí) Aplica con ========================================= */ :root{ /* fallback si no pones la clase en body */ --bg1:#0e0a0c; --bg2:#0a0809; --glass: rgba(22, 8, 12, 0.55); --glass-strong: rgba(26, 10, 14, 0.8); /* PRIMARIOS ROJOS */ --prime-1:#FF1749; /* rojo neón */ --prime-2:#FF3B3B; /* rojo vivo */ --prime-3:#FF6A6A; /* coral/soft */ --prime-4:#FF005C; /* magenta rojizo */ /* alias “gold” usados por tu CSS base, ahora mapeados a rojo */ --gold:#FF1749; --gold-2:#FF3B3B; --gold-3:#FF6A6A; --gold-4:#FF1749; --gold-5:#7a1324; --text:#FFEFF2; --text-dim:#FFC9D2; --accent:#FF3B7F; --success:#2EE6A6; --error:#FF557A; --shadow: 0 8px 40px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.25); } /* Estilo de fondo con halos rojos */ body{ background: radial-gradient(1200px 800px at 10% -10%, rgba(255,23,73,.18) 0%, transparent 60%), radial-gradient(900px 700px at 110% 10%, rgba(255,0,92,.12) 0%, transparent 60%), linear-gradient(120deg, var(--bg1) 0%, var(--bg2) 100%); min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center; font-family:'Poppins','Segoe UI',system-ui,Arial,sans-serif; color:var(--text); overflow-x:hidden; } /* Utilidad: fondo con imagen a pantalla completa (sin mosaico) */ body.has-hero{ background-repeat:no-repeat; background-size:cover; background-position:center; } .container-main{ width:100vw; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; } /* ================== CARD PRINCIPAL ================== */ .neon-glass{ width:min(100%, 560px); background: linear-gradient(180deg, rgba(28, 8, 12, .86), rgba(18, 6, 10, .74)); backdrop-filter: blur(16px) saturate(120%); border-radius:28px; border:1px solid rgba(255, 27, 75, .45); box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.04) inset; padding:2.2rem 1.8rem; position:relative; overflow:hidden; isolation:isolate; /* evita que pseudo-elems bloqueen clics */ } /* Borde “scanner” animado rojo – no intercepta clics */ .neon-glass::before{ content:""; position:absolute; inset:-2px; border-radius:30px; padding:1px; background: conic-gradient(from 0deg, transparent 0 42%, rgba(255,27,75,.9), transparent 60% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 6.5s linear infinite; pointer-events:none; z-index:-1; } @keyframes spinBorder{ to{ transform: rotate(360deg); } } /* Brillo diagonal rojo suave */ .neon-glass::after{ content:""; position:absolute; top:-30%; left:-30%; width:60%; height:160%; background: linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.06) 50%, transparent 62% 100%); transform: rotate(12deg); pointer-events:none; z-index:-1; animation: floatShine 8s ease-in-out infinite; } @keyframes floatShine{ 0%,100%{ transform: translateY(0) rotate(12deg); } 50%{ transform: translateY(8px) rotate(12deg); } } /* ================== LOGO / TÍTULO ================== */ .logo-futurista{ display:block; margin:0 auto 1.2rem; max-width:80px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,27,75,.35) inset; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .35s, filter .3s; will-change: transform; } .logo-futurista:hover{ transform: perspective(700px) rotateX(7deg) rotateY(-6deg) scale(1.05); filter: drop-shadow(0 0 12px rgba(255,0,92,.35)); } .titulo-principal{ text-align:center; font-size:2.15rem; margin:.2rem 0 1.2rem; font-family:'Orbitron',sans-serif; letter-spacing:1.4px; background: linear-gradient(90deg, var(--prime-1) 0%, var(--prime-2) 45%, var(--prime-4) 85%, #fff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow: 0 2px 20px rgba(255,0,92,.22); } /* ================== FORM / INPUTS ================== */ .label-futurista{ color: var(--prime-3); letter-spacing:.6px; font-weight:700; font-size:1.02rem; text-shadow: 0 1px 6px rgba(255,106,106,.22); } .input-futurista{ background: var(--glass); border:1px solid rgba(255,27,75,.38); color:var(--text); font-size:1.05rem; border-radius:12px; box-shadow: inset 0 2px 10px rgba(0,0,0,.38); transition: .22s, box-shadow .25s; } .input-futurista::placeholder{ color:#ffb3c1; } .input-futurista:focus{ border-color: var(--prime-2); background: var(--glass-strong); outline:none; box-shadow: 0 0 0 3px rgba(255,27,75,.25), 0 10px 30px rgba(255,0,92,.14); color:#fff; } .nickname-futurista{ color:var(--prime-3); font-size:1.12rem; text-align:center; font-weight:700; letter-spacing:.4px; text-shadow: 0 2px 10px rgba(255,106,106,.35); } /* ================== BOTÓN PRINCIPAL (nuevo estilo ripple) ================== */ .btn-futurista{ --g1:#3a0d18; --g2:#FF3B3B; --g3:#FF1749; background: linear-gradient(92deg, var(--g1) 0%, var(--g2) 48%, var(--g3) 100%); color:#ffeef1 !important; font-weight:800; font-size:1.12rem; border-radius:14px; border:none; padding:.95rem 1.2rem; letter-spacing:.8px; cursor:pointer; box-shadow: 0 10px 30px rgba(255,0,92,.28), 0 1px 0 rgba(255,255,255,.05) inset; position:relative; overflow:hidden; transition: transform .16s, box-shadow .25s, filter .25s; will-change: transform; } /* Ondas ripple al hacer hover */ .btn-futurista::before, .btn-futurista::after{ content:""; position:absolute; border-radius:50%; width:0; height:0; opacity:.25; pointer-events:none; background: radial-gradient(circle, rgba(255,255,255,.45) 0%, transparent 60%); transform: translate(-50%,-50%); transition: width .6s ease, height .6s ease, opacity .6s ease; } .btn-futurista::before{ top: 20%; left: 15%; } .btn-futurista::after{ top: 65%; left: 80%; } .btn-futurista:hover::before, .btn-futurista:hover::after{ width:240px; height:240px; opacity:.18; } .btn-futurista:hover{ transform: translateY(-1px) scale(1.02); box-shadow: 0 16px 36px rgba(255,0,92,.35); } .btn-futurista:active{ transform: translateY(0) scale(.995); filter:brightness(.97); } /* ================== PAQUETES (con “edge glow”) ================== */ .paquetes-box{ background: linear-gradient(180deg, rgba(28,8,12,.65), rgba(28,8,12,.45)); border-radius:18px; padding:1rem .9rem .9rem; box-shadow: inset 0 0 0 1px rgba(255,27,75,.28), 0 8px 24px rgba(0,0,0,.28); margin-bottom:.6rem; position:relative; z-index:1; } .btn-paquete-futurista{ display:block; width:100%; font-size:1.02rem; font-weight:800; font-family:inherit; padding:.95rem .9rem; background: linear-gradient(180deg, rgba(36,10,16,.9), rgba(24,8,12,.9)); border:1.6px solid rgba(255,27,75,.38); border-radius:14px; margin-bottom:.55rem; color:var(--text); letter-spacing:.3px; box-shadow: inset 0 0 10px rgba(0,0,0,.45); cursor:pointer; position:relative; overflow:hidden; transition: transform .16s ease, box-shadow .22s, border-color .22s, background .22s, filter .25s; will-change: transform; } .btn-paquete-futurista::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 0 rgba(255,0,92,.35); border-radius:14px; transition: box-shadow .25s ease; pointer-events:none; } .btn-paquete-futurista:hover{ border-color: var(--prime-1); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,0,92,.22); } .btn-paquete-futurista:hover::after{ box-shadow: inset 0 0 0 2px rgba(255,0,92,.35), inset 0 0 22px rgba(255,0,92,.25); } .btn-paquete-futurista.activo, .btn-paquete-futurista:focus-visible{ border:2px solid var(--prime-3); background: linear-gradient(180deg, rgba(40,12,18,.98), rgba(30,10,14,.98)); color:#fff; box-shadow: 0 0 0 4px rgba(255,0,92,.18), 0 0 28px rgba(255,0,92,.22); animation: pkgPulseRed 1.35s ease-in-out infinite alternate; } @keyframes pkgPulseRed{ 0% { box-shadow: 0 0 0 4px rgba(255,0,92,.18), 0 0 16px rgba(255,0,92,.18); } 100% { box-shadow: 0 0 0 6px rgba(255,0,92,.22), 0 0 36px rgba(255,0,92,.28); } } /* ================== MÉTODOS DE PAGO (hover magnético distinto) ================== */ .metodo-pago-box{ margin:1.1rem 0 1.2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; } .btn-metodo-futurista{ background: linear-gradient(92deg, #2a0e16 0%, #5a1422 55%, #FF1749 100%); color:#ffeef1; font-weight:800; border-radius:12px; border:1px solid rgba(255,27,75,.4); padding:.65rem .9rem; font-size:1rem; margin:.12rem 0; box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05); transition: transform .16s, box-shadow .22s, border-color .22s, background .25s, letter-spacing .2s, filter .25s; cursor:pointer; position:relative; z-index:1; will-change: transform; } .btn-metodo-futurista:hover{ transform: translateY(-2px) scale(1.03) rotate(-.3deg); border-color: var(--prime-4); background: linear-gradient(92deg, #3a1220 0%, #8e1e35 55%, #FF3B3B 100%); box-shadow: 0 14px 28px rgba(255,27,75,.25); letter-spacing:.5px; filter: drop-shadow(0 0 14px rgba(255,0,92,.18)); } .btn-metodo-futurista:active{ transform: translateY(0) scale(.995); } /* ================== DETALLES / COPIAR ================== */ .detalle-pago-futurista{ background: linear-gradient(180deg, rgba(24,8,12,.92), rgba(18,6,10,.86)); border-radius:16px; color:var(--text); border:1px solid rgba(255,27,75,.32); box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04); padding:1.5rem 1rem 1rem; animation: scaleIn .45s ease; } @keyframes scaleIn{ from{ transform: scale(.92); opacity:0; } to{ transform: scale(1); opacity:1; } } .btn-copiar-futurista{ background: linear-gradient(92deg, #5a1422 0%, #FF3B3B 55%, #FF1749 100%); color:#ffeef1; font-weight:800; border-radius:10px; border:none; padding:.5rem 1.1rem; font-size:1rem; margin:.12rem .2rem; box-shadow: 0 8px 20px rgba(255,0,92,.24); transition: transform .16s, box-shadow .2s, filter .2s; cursor:pointer; } .btn-copiar-futurista:hover{ transform: translateY(-1px); filter:saturate(112%); box-shadow: 0 12px 28px rgba(255,0,92,.28); } .btn-copiar-futurista:active{ transform: translateY(0) scale(.995); } /* ================== MENSAJES ================== */ #mensaje{ margin-top:1rem; font-size:1rem; padding:.9rem; border-radius:12px; text-align:center; display:none; font-weight:700; background: rgba(26,10,14,.85); color:#FFEFF2; letter-spacing:.6px; box-shadow: inset 0 0 0 1px rgba(255,27,75,.28), 0 8px 20px rgba(0,0,0,.25); } #mensaje.green{ background: rgba(46,230,166,.18); color:#c9ffe9; border:1px solid rgba(46,230,166,.35); } #mensaje.red{ background: rgba(255,85,122,.22); color:#ffd6de; border:1px solid rgba(255,85,122,.4); } #mensaje.yellow{ background: rgba(255,180,80,.2); color:#ffe2c2; border:1px solid rgba(255,180,80,.35); } .alerta-centrada{ position:fixed; inset:0; background: rgba(10,8,10,.7); display:flex; align-items:center; justify-content:center; z-index:9999; } .contenido-alerta{ background: linear-gradient(180deg, rgba(24,8,12,.96), rgba(14,6,10,.96)); color:var(--text); padding:2rem 1.4rem 1.4rem; border-radius:16px; min-width:300px; text-align:center; border:1px solid rgba(255,27,75,.35); box-shadow: var(--shadow); animation: scaleIn .35s ease; } /* ================== MODAL COPIA ================== */ .modal-copia-formato{ position: fixed; top:55%; left:50%; transform:translate(-50%, -50%); background: linear-gradient(180deg, rgba(24,8,12,.96), rgba(14,6,10,.96)); border:1px solid rgba(255,27,75,.35); border-radius:14px; padding:1.6rem 1.2rem; z-index:99999; min-width:240px; box-shadow: 0 12px 30px rgba(0,0,0,.38); text-align:center; color:var(--text); opacity:0; transition: opacity .45s ease; } .modal-copia-formato.visible{ opacity:1; } .oculto-temporalmente{ display:none !important; } /* ================== SCROLLBAR ================== */ ::-webkit-scrollbar{ width:8px; background:#1a0e12; } ::-webkit-scrollbar-thumb{ background: linear-gradient(var(--prime-2), var(--prime-4)); border-radius:4px; } /* ================== SWEETALERT SKIN ================== */ .swal2-comprobante-premium{ border-radius:24px !important; background: linear-gradient(180deg, rgba(24,8,12,.96), rgba(14,6,10,.96)) !important; border:1px solid rgba(255,27,75,.35) !important; box-shadow: 0 12px 36px rgba(0,0,0,.38), 0 0 20px rgba(255,27,75,.22) !important; padding:0 !important; } /* ================== TEXTO CON GLOW ================== */ .text-glow{ text-shadow: 0 1px 8px rgba(255,0,92,.35), 0 2px 16px rgba(255,27,75,.22); } /* ================== WHATSAPP BUTTON ================== */ .whatsapp-button{ position:fixed; bottom:12px; right:12px; width:56px; height:56px; border-radius:50%; background: radial-gradient(80% 80% at 30% 20%, #46e47f, #25d366); display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(37,211,102,.4); animation: floatBtn 2.2s ease-in-out infinite; z-index:9999; transition: transform .16s, box-shadow .2s; } .whatsapp-button:hover{ transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 32px rgba(37,211,102,.45); } .whatsapp-button img{ width:28px; height:36px; } @keyframes floatBtn{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } } /* Accesibilidad: reducir animaciones */ @media (prefers-reduced-motion: reduce){ .btn-metodo-futurista, .btn-paquete-futurista, .btn-futurista, .neon-glass::before, .neon-glass::after{ animation:none !important; transition:none !important; } } /* ================== MEDIA QUERIES ================== */ @media (max-width: 600px){ .neon-glass{ width: 96vw; padding: 1rem .6rem 1.3rem; border-radius:18px; } .logo-futurista{ max-width:80px; margin-bottom: .9rem; } .titulo-principal{ font-size:1.36rem; margin-bottom:1rem; letter-spacing:.6px; } .paquetes-box{ padding:.7rem .5rem .6rem; border-radius:12px; } .btn-paquete-futurista{ font-size:.98rem; padding:.62rem .6rem; border-radius:10px; margin-bottom:.45rem; } .metodo-pago-box{ gap:.5rem; flex-direction:column; align-items:stretch; margin-bottom:1rem; } .btn-metodo-futurista{ font-size:1rem; padding:.6rem .7rem; border-radius:10px; } .detalle-pago-futurista{ padding:1rem .6rem .8rem; border-radius:12px; font-size:.98rem; } .input-futurista{ font-size:1rem; padding:.5rem .7rem; border-radius:10px; } .label-futurista{ font-size:1rem; } .btn-futurista, .btn-copiar-futurista{ font-size:1.02rem; padding:.6rem .9rem; border-radius:10px; } .modal-copia-formato, .contenido-alerta{ min-width:180px; padding:1rem .7rem; border-radius:12px; font-size:.98rem; } .nickname-futurista{ font-size:1.02rem; } }