/* ==== Base y layout ==== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:#eaf3ff;
  background:#0b1620;
  overflow-x:hidden;
  /* Asegurar que siempre se vea el fondo a toda altura */
  min-height:100vh;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}
#diamondsCanvas{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85;}

/* Header / brand */
.top{position:relative; z-index:2; display:flex; justify-content:center; padding:22px 10px 10px;}
.logo-wrap{display:flex; align-items:center; gap:14px; transform-origin:20% 10%;}
.logo-wrap .logo{width:56px; height:56px; border-radius:16px; background:#0e2030; box-shadow:0 0 0 2px #0f2736, 0 10px 25px rgba(0,0,0,.35);}
.brand{font-size:24px; font-weight:800; letter-spacing:.5px; color:#25ffb7; text-shadow:0 0 22px #0ff;}

/* Spin-drop intro */
.logo-wrap.enter{animation:spinDrop .9s cubic-bezier(.2,.9,.2,1) both}
@keyframes spinDrop{
  0%{ transform: translate(-40px,-60px) rotate(-320deg) scale(.6); opacity:0; }
  60%{ transform: translate(6px,10px) rotate(10deg) scale(1.05); opacity:1; }
  100%{ transform: translate(0,0) rotate(0) scale(1); }
}



/* Card */
main{position:relative; z-index:1; display:flex; justify-content:center; padding:10px 12px 80px;}
.card{
  width:min(920px,calc(100% - 16px));
  background: rgba(7,18,28,.84);
  border:1px solid rgba(130,255,255,.12);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Campos */
.field-row{margin:12px 0}
.field-row label{display:block; color:#9ad8ff; font-weight:700; margin-bottom:6px}
.input-with-btn{display:flex; gap:8px; align-items:center}
.input-with-btn input{
  flex:1; height:42px; padding:10px 12px; border-radius:12px; border:1px solid #1e3444;
  background:#0f2030; color:#dff7ff; outline:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.btn.icon{width:42px; height:42px; display:grid; place-items:center; border-radius:12px}
.muted{opacity:.7}

/* Nickname centrado bonito */
.nickname-badge{
  display:block;
  margin:10px auto 0;
  text-align:center;
  max-width:420px;
  padding:8px 12px;
  border-radius:14px;
  border:1px dashed rgba(75, 248, 219, .45);
  background:rgba(12, 36, 46, .45);
  color:#b6ffe6;
  font-weight:800;
  letter-spacing:.3px;
  text-shadow:0 0 18px rgba(0,255,200,.25);
}

/* Grids */
.grid{display:grid; gap:10px}
.grid.chips{grid-template-columns:repeat(6,1fr)}
.grid.plans{grid-template-columns:repeat(3,1fr); margin-top:10px}

/* Botones de paquete */
.btn-paquete-futurista{
  display:block; width:100%; height:42px; border-radius:12px; border:1px solid #1c3342;
  background:#0e1e2d; color:#dff7ff; font-weight:800; cursor:pointer;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.25);
}
.btn-paquete-futurista.activo{
  background:linear-gradient(180deg,#1b455b,#0f2f44);
  border-color:#25ffb7; outline:1px solid rgba(37,255,183,.35);
  text-shadow:0 0 16px rgba(37,255,183,.75);
}

/* Métodos */
.methods{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.method{
  height:46px; border-radius:14px; border:1px solid #1f3746; background: linear-gradient(180deg, #0f2332, #0b1a27);
  color:#aee7ff; font-weight:800; box-shadow:inset 0 -10px 16px rgba(0,0,0,.25);
  cursor:pointer;
}
.method.active{
  background: radial-gradient(400px 60px at 50% -30px, rgba(37,255,183,.32), transparent 60%), linear-gradient(180deg,#103449,#0a2231);
  border-color:#25ffb7; color:#eaffff; box-shadow:0 0 18px rgba(37,255,183,.35);
}

/* Panel info */
.kv{display:flex; gap:10px; align-items:center; padding:6px 2px}
.kv span{width:94px; color:#9ad8ff; opacity:.8}
.kv b{color:#eaf8ff}

/* Totales y acciones */
.total-row{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:8px 10px; border:1px solid #21465e; border-radius:12px; background:#0b1e2c}
.total-left{font-weight:800; color:#9ad8ff}
.total-amount{font-weight:800; font-size:22px; letter-spacing:.4px; text-shadow:0 0 18px rgba(0,255,200,.25)}

.actions{margin-top:12px}
.actions.center{display:flex; justify-content:center}

.btn{
  background:linear-gradient(180deg,#1a6ea1,#144c73);
  border:0; color:#e6fdff; font-weight:800; padding:10px 14px; border-radius:12px;
  box-shadow: 0 10px 18px rgba(0,150,255,.2), inset 0 -10px 20px rgba(0,0,0,.25);
  cursor:pointer;
}
.btn.small{padding:8px 10px; font-weight:700}
.btn.primary{background:linear-gradient(180deg,#2fd1a1,#13936f)}
.btn.copied{background:linear-gradient(180deg,#33c46a,#0f8c47)}

.wa-float{ position:fixed; right:16px; bottom:16px; width:50px; height:50px; display:grid; place-items:center;
  color:#fff; background:#25d366; border-radius:50%; box-shadow: 0 10px 24px rgba(0,0,0,.3); z-index:4; }

/* Responsive */
@media (max-width: 920px){
  .grid.chips{grid-template-columns:repeat(3,1fr)}
}