/* MAGNUM · Landing interstitial "Redirigiendo a WhatsApp" */
:root { --wa:#25D366; --wa2:#128C7E; --bg:#0b141a; --card:#1f2c34; --txt:#e9edef; --mut:#8696a0; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt);
  display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden;
}
.bg {
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(37,211,102,.18), transparent 70%),
    radial-gradient(700px 500px at 50% 120%, rgba(18,140,126,.15), transparent 70%);
}
.card {
  position:relative; z-index:1; width:100%; max-width:400px; text-align:center;
  background:linear-gradient(180deg,#243640,var(--card));
  border:1px solid #2a3942; border-radius:22px; padding:38px 26px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:pop .4s ease;
}
@keyframes pop { from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }

.wa {
  width:84px; height:84px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--wa),var(--wa2));
  box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:pulse 1.8s infinite;
}
@keyframes pulse {
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 0 0 22px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
h1 { font-size:23px; font-weight:800; margin-bottom:8px; }
.sub { color:var(--mut); font-size:15px; margin-bottom:22px; }
.sub b { color:var(--wa); }

.bar { width:100%; height:6px; background:#0e191f; border-radius:6px; overflow:hidden; margin-bottom:18px; }
.bar-fill { width:6%; height:100%; background:linear-gradient(90deg,var(--wa2),var(--wa)); border-radius:6px; }

.spinner {
  width:30px; height:30px; margin:0 auto 16px; border-radius:50%;
  border:3px solid #2a3942; border-top-color:var(--wa); animation:spin .9s linear infinite;
}
@keyframes spin { to{ transform:rotate(360deg) } }

.micro { color:var(--mut); font-size:13px; line-height:1.4; }
.manual {
  display:inline-block; margin-top:16px; padding:13px 20px; border-radius:12px;
  background:linear-gradient(135deg,var(--wa),var(--wa2)); color:#06231a; font-weight:800;
  text-decoration:none; font-size:15px;
}
.brand { margin-top:24px; color:#56676f; font-size:12px; letter-spacing:1px; text-transform:uppercase; }