@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Poppins:wght@300;400;600;700&display=swap');

/* ===================== */
/*    PALETA Y TOKENS    */
/* ===================== */
:root{
  --bg1:#0f1220;
  --bg2:#0b0e19;
  --glass: rgba(22, 18, 10, 0.55);
  --glass-strong: rgba(22, 18, 10, 0.75);
  --gold:#F5C66E;
  --gold-2:#FFD479;
  --gold-3:#E6B35C;
  --gold-4:#C7953A;
  --gold-5:#8F6A22;
  --text:#e9e5da;
  --text-dim:#cfc7b3;
  --accent:#8ecbff;
  --success:#36d673;
  --error:#ff4d6d;
  --shadow: 0 8px 40px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}

/* ===================== */
/*      LAYOUT BASE      */
/* ===================== */
body{
  background: radial-gradient(1200px 800px at 10% -10%, rgba(255,215,128,.18) 0%, transparent 60%),
              radial-gradient(900px 700px at 110% 10%, rgba(255,215,128,.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;
}

.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(22,18,10,.75), rgba(22,18,10,.55));
  backdrop-filter: blur(16px) saturate(120%);
  border-radius:28px;
  border:1px solid rgba(245, 198, 110, .18);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03) inset;
  padding:2.2rem 1.8rem;
  position:relative;
  overflow:hidden;
  isolation:isolate; /* evita que pseudo-elems se mezclen con hijos */
}

/* Borde dorado animado (NO intercepta clics) */
.neon-glass::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:30px;
  padding:1px;
  background: conic-gradient(from 0deg, transparent 0 40%, rgba(245,198,110,.8), 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 6s linear infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes spinBorder{ to{ transform: rotate(360deg); } }

/* Brillo diagonal suave (NO intercepta clics) */
.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;
  animation: floatShine 7s ease-in-out infinite;
  z-index:-1;
}
@keyframes floatShine{
  0%,100%{ transform: translateY(0) rotate(12deg); }
  50%{ transform: translateY(8px) rotate(12deg); }
}

/* ===================== */
/*         LOGO          */
/* ===================== */
.logo-futurista{
  display:block;
  margin: 0 auto 1.3rem;
  max-width:130px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(245,198,110,.25) inset;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.logo-futurista:hover{
  transform: scale(1.05) rotate(-1.5deg);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(245,198,110,.45) inset, 0 0 30px rgba(245,198,110,.25);
}

/* ===================== */
/*        TÍTULO         */
/* ===================== */
.titulo-principal{
  text-align:center;
  font-size:2.2rem;
  margin: .2rem 0 1.4rem;
  font-family:'Orbitron',sans-serif;
  letter-spacing:1.5px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 45%, var(--gold-3) 70%, #fff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow: 0 2px 20px rgba(245,198,110,.25);
}

/* ===================== */
/*        LABELS         */
/* ===================== */
.label-futurista{
  color: var(--gold-2) !important;
  letter-spacing:.6px;
  font-weight:700;
  font-size:1.02rem;
  text-shadow: 0 1px 6px rgba(245,198,110,.25);
}

/* ===================== */
/*        INPUTS         */
/* ===================== */
.input-futurista{
  background: var(--glass);
  border:1px solid rgba(245,198,110,.28);
  color:var(--text);
  font-size:1.05rem;
  border-radius:12px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.35);
  transition: .22s;
}
.input-futurista::placeholder{ color: #bdaf99; }
.input-futurista:focus{
  border-color: var(--gold-2);
  background: var(--glass-strong);
  outline:none;
  box-shadow: 0 0 0 3px rgba(245,198,110,.18), inset 0 2px 12px rgba(0,0,0,.45);
  color:#fff;
}

/* ===================== */
/*     NICKNAME TAG      */
/* ===================== */
.nickname-futurista{
  color:var(--gold-2);
  font-size:1.12rem;
  text-align:center;
  font-weight:700;
  letter-spacing:.4px;
  text-shadow: 0 2px 10px rgba(245,198,110,.35);
}

/* ===================== */
/*     BOTÓN ACCIÓN      */
/* ===================== */
.btn-futurista{
  --g1: #B28938; --g2:#F5C66E; --g3:#8F6A22;
  background: linear-gradient(92deg, var(--g3) 0%, var(--g1) 22%, var(--g2) 100%);
  color:#201a0e !important;
  font-weight:800;
  font-size:1.12rem;
  border-radius:14px;
  border:none;
  padding:.85rem 1.1rem;
  box-shadow: 0 10px 30px rgba(242,194,97,.25), 0 1px 0 rgba(255,255,255,.08) inset;
  letter-spacing:.8px;
  transition:.22s ease;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  will-change: transform;
}
.btn-futurista::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0 30%, rgba(255,255,255,.25) 50%, transparent 70% 100%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events:none;
}
.btn-futurista:hover,
.btn-futurista:focus{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 16px 36px rgba(242,194,97,.32);
}
.btn-futurista:hover::after{ transform: translateX(120%); }

/* ===================== */
/*   BOTONES PAQUETES    */
/* ===================== */
.paquetes-box{
  background: linear-gradient(180deg, rgba(26,21,12,.65), rgba(26,21,12,.45));
  border-radius:18px;
  padding:1rem .9rem .9rem;
  box-shadow: inset 0 0 0 1px rgba(245,198,110,.18), 0 8px 24px rgba(0,0,0,.25);
  margin-bottom:.6rem;
  position:relative;
  z-index:1;
}

.btn-paquete-futurista{
  display:block; width:100%;
  font-size:1.02rem; font-family:inherit; font-weight:800;
  padding:.9rem .8rem;
  background: linear-gradient(180deg, rgba(30,25,16,.85), rgba(25,20,12,.85));
  border:1.6px solid rgba(245,198,110,.32);
  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;
  will-change: transform;
  z-index:1;
}
.btn-paquete-futurista::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(300px 60px at -10% 50%, rgba(255,255,255,.1), transparent 60%),
              radial-gradient(300px 60px at 110% 50%, rgba(255,255,255,.1), transparent 60%);
  opacity:0; transition: opacity .25s;
  pointer-events:none;
}
.btn-paquete-futurista:hover{
  border-color: var(--gold-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(242,194,97,.15);
  background: linear-gradient(180deg, rgba(34,27,14,.9), rgba(28,22,12,.9));
}
.btn-paquete-futurista:hover::after{ opacity:1; }

.btn-paquete-futurista.activo,
.btn-paquete-futurista:focus-visible{
  border:2px solid var(--gold-2);
  background: linear-gradient(180deg, rgba(34,27,14,.95), rgba(28,22,12,.95));
  color:#fff;
  box-shadow: 0 0 0 4px rgba(245,198,110,.18);
  animation: pkgGlow 1.4s ease-in-out infinite alternate;
}
@keyframes pkgGlow{
  0% { box-shadow: 0 0 0 4px rgba(245,198,110,.18), 0 0 12px rgba(245,198,110,.15); }
  100% { box-shadow: 0 0 0 6px rgba(245,198,110,.22), 0 0 28px rgba(245,198,110,.25); }
}

/* ===================== */
/*    MÉTODOS DE PAGO    */
/* ===================== */
.metodo-pago-box{
  margin:1.1rem 0 1.2rem;
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
  position:relative; z-index:1; /* por delante del brillo */
}

.btn-metodo-futurista{
  background: linear-gradient(92deg, #2a2212 0%, #3a2d16 55%, #6b4a16 100%);
  color:#f6e8c9;
  font-weight:700;
  border-radius:12px; border:1px solid rgba(245,198,110,.35);
  padding:.6rem .8rem; font-size:1rem; margin:.12rem 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .16s, box-shadow .2s, border-color .2s, background .25s;
  cursor:pointer;
  position:relative; z-index:1;
  will-change: transform;
}
.btn-metodo-futurista:hover,
.btn-metodo-futurista:focus{
  transform: translateY(-2px);
  border-color: var(--gold-2);
  background: linear-gradient(92deg, #4a3818 0%, #7b571a 55%, #b6822a 100%);
  box-shadow: 0 12px 26px rgba(242,194,97,.18);
  color:#fff;
}

/* ===================== */
/*   DETALLE DE PAGO     */
/* ===================== */
.detalle-pago-futurista{
  background: linear-gradient(180deg, rgba(22,18,10,.88), rgba(18,14,8,.82));
  border-radius:16px;
  color:var(--text);
  border:1px solid rgba(245,198,110,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
  padding:1.5rem 1rem 1rem;
  animation: scaleIn .5s ease;
}

/* ===================== */
/*   BOTÓN COPIAR/CTA    */
/* ===================== */
.btn-copiar-futurista{
  background: linear-gradient(92deg, #9c7a2d 0%, #F5C66E 100%);
  color:#1a1408; font-weight:800;
  border-radius:10px; border:none;
  padding:.5rem 1.1rem; font-size:1rem; margin:.12rem .2rem;
  box-shadow: 0 8px 20px rgba(242,194,97,.22);
  transition: transform .16s, box-shadow .2s, filter .2s;
  cursor:pointer;
}
.btn-copiar-futurista:hover,
.btn-copiar-futurista:focus{
  transform: translateY(-1px);
  filter: saturate(110%);
  box-shadow: 0 12px 28px rgba(242,194,97,.28);
}

/* ===================== */
/*     MENSAJES/ALERT    */
/* ===================== */
#mensaje{
  margin-top:1rem; font-size:1rem; padding:.9rem;
  border-radius:12px; text-align:center; display:none; font-weight:700;
  background: rgba(32,26,16,.75); color:var(--gold-2);
  letter-spacing:.6px;
  box-shadow: inset 0 0 0 1px rgba(245,198,110,.18), 0 8px 20px rgba(0,0,0,.25);
}
#mensaje.green{ background: rgba(40,167,69,.75); color:#fff; }
#mensaje.red{ background: rgba(220,53,69,.85); color:#fff; }
#mensaje.yellow{ background: rgba(255,193,7,.9); color:#1c1306; }

.alerta-centrada{
  position:fixed; inset:0;
  background: rgba(8,8,12,.65);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
.contenido-alerta{
  background: linear-gradient(180deg, rgba(26,21,12,.95), rgba(20,16,9,.95));
  color:var(--text);
  padding:2rem 1.4rem 1.4rem;
  border-radius:16px;
  min-width:300px; text-align:center;
  border:1px solid rgba(245,198,110,.3);
  box-shadow: var(--shadow);
  animation: scaleIn .35s ease;
}
@keyframes scaleIn{
  from{ transform: scale(.85); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}

/* ===================== */
/*      MODAL COPIA      */
/* ===================== */
.modal-copia-formato{
  position: fixed;
  top:55%; left:50%; transform:translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(26,21,12,.96), rgba(18,14,8,.96));
  border:1px solid rgba(245,198,110,.35);
  border-radius:14px;
  padding:1.6rem 1.2rem;
  z-index:99999; min-width:240px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  text-align:center; color:var(--text);
  opacity:0; transition: opacity .45s ease;
}
.modal-copia-formato.visible{ opacity:1; }
.oculto-temporalmente{ display:none !important; }

/* ===================== */
/*    SCROLL PERSONAL    */
/* ===================== */
::-webkit-scrollbar{ width:8px; background:#1a1a24; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--gold-4), var(--gold-2));
  border-radius:4px;
}

/* ===================== */
/*  SWEETALERT PREMIUM   */
/* ===================== */
.swal2-comprobante-premium{
  border-radius:26px !important;
  background: linear-gradient(180deg, rgba(26,21,12,.96), rgba(18,14,8,.96)) !important;
  border:1px solid rgba(245,198,110,.35) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.35) !important;
  padding:0 !important;
}

/* ===================== */
/*   TEXTO CON GLOW      */
/* ===================== */
.text-glow{
  text-shadow: 0 1px 8px rgba(245,198,110,.35), 0 2px 16px rgba(245,198,110,.2);
}

/* ===================== */
/*  BOTÓN WHATSAPP FIX   */
/* ===================== */
.whatsapp-button{
  position:fixed;
  bottom:12px; right:12px;
  width:56px; height:56px;
  background: radial-gradient(80% 80% at 30% 20%, #46e47f, #25d366);
  border-radius:50%;
  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 / PERF */
/* ===================== */
@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:140px; 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; }
}