*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f3f4f6;color:#111827}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px max(18px,calc((100% - 1180px)/2));background:rgba(17,24,39,.96);color:#fff;backdrop-filter:blur(10px)}.brand{display:flex;gap:12px;align-items:center}.brand span{display:block;color:#cbd5e1;font-size:12px}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#facc15,#f97316);color:#111827;font-size:25px}.support-link{color:#fff;text-decoration:none;border:1px solid #374151;border-radius:10px;padding:10px 14px;font-size:14px}.container{max-width:1180px;margin:auto;padding:26px 18px 50px}.hero{display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:center;background:radial-gradient(circle at top right,#374151,#111827 60%);color:#fff;border-radius:24px;padding:36px;margin-bottom:20px;box-shadow:0 22px 60px rgba(17,24,39,.18)}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.02;margin:10px 0}.hero p{max-width:650px;color:#d1d5db;font-size:18px}.badge{display:inline-block;background:#facc15;color:#111827;font-weight:800;font-size:12px;padding:7px 10px;border-radius:999px}.hero-card{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px}.hero-card small{color:#cbd5e1}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.steps article{display:flex;align-items:center;gap:10px;background:#fff;padding:16px;border-radius:14px;border:1px solid #e5e7eb}.steps b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#111827;color:#fff}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:#fff;border-radius:20px;padding:22px;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(15,23,42,.05)}.section-title span{font-size:12px;font-weight:900;color:#f97316}.section-title h2{margin:4px 0 18px}.packages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.package{position:relative;border:2px solid #e5e7eb;border-radius:16px;padding:16px;cursor:pointer;transition:.2s;background:#fff}.package:hover{transform:translateY(-2px);border-color:#9ca3af}.package.selected{border-color:#f97316;background:#fff7ed}.package input{position:absolute;opacity:0}.package .diamonds{font-weight:900;font-size:20px}.package .bonus{color:#16a34a;font-size:12px;font-weight:800}.package .price{display:block;margin-top:10px;font-size:18px;font-weight:900}.popular{position:absolute;right:8px;top:8px;background:#111827;color:#fff;font-size:10px;padding:5px 7px;border-radius:999px}form{display:grid;gap:15px}label{display:grid;gap:7px;font-weight:700;font-size:14px}input,select,textarea{width:100%;font:inherit;padding:13px 14px;border:1px solid #d1d5db;border-radius:11px;background:#fff;outline:none}input:focus,select:focus,textarea:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.12)}small{font-weight:400;color:#6b7280}.lookup-row{display:flex;align-items:center;gap:12px;margin-top:-7px}.status{font-size:13px;color:#6b7280}.payment-info{background:#f9fafb;border:1px dashed #d1d5db;border-radius:12px;padding:13px;font-size:14px;white-space:pre-line}.receipt-preview{border:1px solid #e5e7eb;border-radius:12px;padding:10px}.receipt-preview img{max-width:100%;max-height:250px;display:block;margin:auto;border-radius:8px}.hidden{display:none}.check{display:flex;grid-template-columns:auto 1fr;align-items:flex-start}.check input{width:auto;margin-top:3px}.optional{font-weight:400;color:#6b7280}.primary,.secondary,.ghost{border:0;border-radius:11px;padding:13px 16px;font:inherit;font-weight:800;cursor:pointer}.primary{background:#22c55e;color:#052e16}.secondary{background:#111827;color:#fff;padding:10px 13px}.ghost{background:#f3f4f6;color:#111827}.notice{margin-top:20px;background:#fffbeb;border:1px solid #fde68a;border-radius:16px;padding:18px}.notice h3{margin:0 0 6px}.floating-wa{position:fixed;right:20px;bottom:20px;display:grid;place-items:center;width:58px;height:58px;background:#22c55e;color:#052e16;border-radius:50%;font-weight:900;text-decoration:none;box-shadow:0 12px 30px rgba(34,197,94,.35)}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;background:#111827;color:#fff;padding:12px 16px;border-radius:10px;transition:.25s;pointer-events:none;z-index:30}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:800px){.hero,.panel-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.hero{padding:25px}.packages{grid-template-columns:1fr 1fr}.support-link{display:none}}@media(max-width:430px){.packages{grid-template-columns:1fr}.container{padding-left:12px;padding-right:12px}.card{padding:16px}}
:root{
  --bg1:#090b1a;
  --bg2:#18133b;
  --purple:#7c3aed;
  --pink:#ec4899;
  --cyan:#22d3ee;
  --yellow:#facc15;
  --green:#22c55e;
}
body{
  background:
    radial-gradient(circle at 10% 10%,rgba(124,58,237,.20),transparent 30%),
    radial-gradient(circle at 90% 20%,rgba(34,211,238,.15),transparent 28%),
    linear-gradient(180deg,#0b1024 0,#12172f 42%,#f5f7fb 42%);
}
.topbar{
  background:linear-gradient(90deg,rgba(9,11,26,.98),rgba(45,23,88,.98));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.logo{
  background:linear-gradient(135deg,var(--yellow),#fb7185 50%,var(--purple));
  box-shadow:0 0 24px rgba(236,72,153,.35);
}
.support-link{
  background:linear-gradient(135deg,var(--green),#16a34a);
  border:0;
  color:#052e16;
  font-weight:900;
}
.hero{
  background:
    linear-gradient(135deg,rgba(124,58,237,.90),rgba(236,72,153,.85)),
    radial-gradient(circle at top right,#22d3ee,#111827 60%);
  box-shadow:0 25px 70px rgba(79,70,229,.30);
  overflow:hidden;
  position:relative;
}
.hero::after{
  content:"◆";
  position:absolute;
  right:-30px;
  bottom:-70px;
  font-size:220px;
  color:rgba(255,255,255,.08);
  transform:rotate(18deg);
}
.badge{
  background:linear-gradient(90deg,var(--yellow),#fb923c);
  box-shadow:0 8px 22px rgba(250,204,21,.28);
}
.steps article{
  border:1px solid rgba(124,58,237,.16);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.steps b{
  background:linear-gradient(135deg,var(--purple),var(--pink));
}
.card{
  border:1px solid rgba(124,58,237,.12);
  box-shadow:0 18px 45px rgba(15,23,42,.10);
}
.section-title span{color:var(--purple)}
.package{
  background:linear-gradient(180deg,#fff,#faf8ff);
}
.package:hover{
  border-color:var(--purple);
  box-shadow:0 12px 25px rgba(124,58,237,.12);
}
.package.selected{
  border-color:var(--pink);
  background:linear-gradient(135deg,#fff1f7,#f5f3ff);
  box-shadow:0 12px 28px rgba(236,72,153,.16);
}
.popular{
  background:linear-gradient(90deg,var(--purple),var(--pink));
}
.primary{
  color:white;
  background:linear-gradient(90deg,var(--green),#16a34a);
  box-shadow:0 12px 24px rgba(34,197,94,.22);
}
.secondary{
  background:linear-gradient(90deg,var(--purple),var(--pink));
}
.ghost{
  background:linear-gradient(90deg,#eef2ff,#fdf2f8);
  border:1px solid #ddd6fe;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(124,58,237,.13);
}
.floating-wa{
  color:white;
  background:linear-gradient(135deg,#25d366,#16a34a);
  border:3px solid white;
}


/* Selector de paquetes estilo aplicación */
.package-selector-button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border:0;
  border-radius:18px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  background:
    linear-gradient(135deg,rgba(34,211,238,.22),rgba(124,58,237,.25)),
    #171a22;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 16px 30px rgba(15,23,42,.18);
}
.package-selector-button small{
  display:block;
  margin-bottom:6px;
  color:#67e8f9;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
.package-selector-button strong{
  font-size:20px;
}
.selector-arrow{
  font-size:42px;
  line-height:1;
  color:#67e8f9;
}
.package-summary{
  margin-top:14px;
  padding:16px;
  border-radius:15px;
  background:linear-gradient(135deg,#ecfeff,#f5f3ff);
  border:1px solid #c4b5fd;
}
.package-summary .summary-main{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
}
.package-summary .summary-diamonds{
  font-size:21px;
  font-weight:900;
}
.package-summary .summary-price{
  font-size:21px;
  font-weight:900;
  color:#7c3aed;
}
.package-summary small{
  display:block;
  margin-top:5px;
  color:#0f766e;
  font-weight:700;
}

.package-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.package-modal.hidden{display:none}
.package-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,7,18,.76);
  backdrop-filter:blur(5px);
}
.package-modal-sheet{
  position:relative;
  width:min(100%,620px);
  max-height:88vh;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  background:#20242b;
  color:#fff;
  box-shadow:0 -24px 70px rgba(0,0,0,.45);
  animation:sheetUp .22s ease-out;
}
@keyframes sheetUp{
  from{transform:translateY(30px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.package-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:22px 22px 14px;
  border-bottom:1px solid #3b4048;
}
.package-modal-header small{
  color:#67e8f9;
  font-weight:900;
  letter-spacing:.08em;
}
.package-modal-header h2{
  margin:4px 0 0;
  font-size:28px;
}
.modal-close{
  border:0;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#30353d;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.bonus-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:14px 18px;
  background:#181b21;
}
.bonus-tab{
  border:1px solid #3f4651;
  background:#272b33;
  color:#cbd5e1;
  border-radius:13px;
  padding:12px;
  font-weight:900;
  cursor:pointer;
}
.bonus-tab.active{
  color:#06121a;
  border-color:#67e8f9;
  background:linear-gradient(90deg,#67e8f9,#a78bfa);
}
.package-list{
  max-height:62vh;
  overflow:auto;
}
.package-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  align-items:center;
  width:100%;
  padding:19px 22px;
  color:#fff;
  background:#23272e;
  border:0;
  border-bottom:1px solid #3a4048;
  text-align:left;
  cursor:pointer;
}
.package-row:hover,
.package-row.selected{
  background:linear-gradient(90deg,rgba(34,211,238,.13),rgba(124,58,237,.14));
}
.package-row .row-diamonds{
  font-size:23px;
  font-weight:800;
}
.package-row .diamond-icon{
  margin-left:5px;
  font-size:21px;
}
.package-row .row-price{
  font-size:22px;
  font-weight:800;
}
.package-row .row-radio{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:3px solid #cbd5e1;
  border-radius:50%;
}
.package-row.selected .row-radio{
  border-color:#67e8f9;
  box-shadow:0 0 0 4px rgba(103,232,249,.12);
}
.package-row.selected .row-radio::after{
  content:"";
  width:13px;
  height:13px;
  border-radius:50%;
  background:#67e8f9;
}
.package-row .row-bonus{
  grid-column:1/-1;
  margin-top:-8px;
  color:#86efac;
  font-size:12px;
  font-weight:800;
}
body.modal-open{overflow:hidden}

@media(min-width:700px){
  .package-modal{align-items:center;padding:24px}
  .package-modal-sheet{border-radius:28px}
}


/* Tema profesional azul brillante */
:root{
  --blue-900:#06152f;
  --blue-800:#0a2452;
  --blue-700:#0f3d8c;
  --blue-600:#1463ff;
  --blue-500:#2f80ff;
  --blue-400:#55a3ff;
  --blue-300:#8fc7ff;
  --cyan-400:#25d9ff;
  --surface:#ffffff;
  --surface-soft:#f4f8ff;
  --text:#0a1730;
}

body{
  color:var(--text);
  background:
    radial-gradient(circle at 12% 8%,rgba(37,217,255,.18),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(47,128,255,.24),transparent 31%),
    linear-gradient(180deg,#06152f 0,#0a2452 39%,#edf5ff 39%,#f8fbff 100%);
}

.topbar{
  background:linear-gradient(90deg,rgba(4,18,45,.98),rgba(10,36,82,.98),rgba(15,61,140,.98));
  border-bottom:1px solid rgba(143,199,255,.24);
  box-shadow:0 8px 30px rgba(0,31,86,.28);
}

.logo{
  background:linear-gradient(135deg,#25d9ff,#2f80ff 55%,#8fc7ff);
  box-shadow:0 0 28px rgba(37,217,255,.45);
  color:white;
}

.support-link{
  background:linear-gradient(135deg,#25d9ff,#2f80ff);
  color:#04142d;
  box-shadow:0 10px 24px rgba(37,217,255,.23);
}

.hero{
  background:
    radial-gradient(circle at 82% 22%,rgba(37,217,255,.22),transparent 28%),
    linear-gradient(135deg,#071a3d,#0f3d8c 58%,#1463ff);
  box-shadow:0 28px 75px rgba(4,32,96,.42);
  border:1px solid rgba(143,199,255,.18);
}

.badge{
  background:linear-gradient(90deg,#25d9ff,#8fc7ff);
  color:#04142d;
  box-shadow:0 10px 25px rgba(37,217,255,.25);
}

.steps article,
.card{
  border:1px solid rgba(47,128,255,.14);
  box-shadow:0 18px 45px rgba(9,46,113,.10);
}

.steps b{
  background:linear-gradient(135deg,#25d9ff,#1463ff);
  color:white;
}

.section-title span{
  color:#1463ff;
}

.package-selector-button{
  background:
    radial-gradient(circle at top right,rgba(37,217,255,.20),transparent 35%),
    linear-gradient(135deg,#06152f,#0a2452 60%,#0f3d8c);
  border:1px solid rgba(143,199,255,.20);
  box-shadow:0 18px 38px rgba(6,21,47,.24),inset 0 0 0 1px rgba(255,255,255,.04);
}

.package-selector-button small,
.selector-arrow{
  color:#55e5ff;
}

.package-summary{
  background:linear-gradient(135deg,#eff8ff,#eef4ff);
  border:1px solid #9fc8ff;
}

.package-summary .summary-price{
  color:#1463ff;
}

.package-summary small{
  color:#0f3d8c;
}

.package-modal-sheet{
  background:linear-gradient(180deg,#071a3d,#0a2452);
  border:1px solid rgba(143,199,255,.15);
}

.package-modal-header,
.package-row{
  border-color:rgba(143,199,255,.16);
}

.package-modal-header small{
  color:#55e5ff;
}

.bonus-tab{
  border-color:rgba(143,199,255,.18);
  background:#0d2a5f;
}

.bonus-tab.active{
  background:linear-gradient(90deg,#25d9ff,#55a3ff);
  border-color:#8fc7ff;
}

.package-row{
  background:#0b2451;
}

.package-row:hover,
.package-row.selected{
  background:linear-gradient(90deg,rgba(37,217,255,.17),rgba(47,128,255,.20));
}

.package-row.selected .row-radio{
  border-color:#55e5ff;
}

.package-row.selected .row-radio::after{
  background:#55e5ff;
}

input,select,textarea{
  border-color:#c9dcf7;
  background:#fbfdff;
}

input:focus,select:focus,textarea:focus{
  border-color:#2f80ff;
  box-shadow:0 0 0 4px rgba(47,128,255,.12);
}

.payment-info{
  background:linear-gradient(135deg,#f4f8ff,#eef6ff);
  border-color:#9fc8ff;
  color:#0a2452;
}

.order-help{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  margin-bottom:10px;
  border:1px solid #d6e6fb;
  border-radius:14px;
  background:linear-gradient(135deg,#f8fbff,#edf5ff);
}

.help-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:10px;
  color:white;
  font-weight:900;
  background:linear-gradient(135deg,#25d9ff,#1463ff);
  box-shadow:0 8px 18px rgba(20,99,255,.18);
}

.order-help strong{
  display:block;
  margin-bottom:3px;
}

.order-help span{
  color:#55708f;
  font-size:13px;
  line-height:1.45;
}

.send-box{
  margin-top:4px;
  padding:16px;
  border-radius:18px;
  background:
    radial-gradient(circle at top right,rgba(37,217,255,.16),transparent 30%),
    linear-gradient(135deg,#071a3d,#0a2452);
  box-shadow:0 18px 40px rgba(6,21,47,.20);
}

.send-box-header{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-bottom:14px;
  color:white;
}

.send-box-header small{
  display:block;
  margin-top:4px;
  color:#bfd8f7;
  line-height:1.45;
}

.send-shield{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#04142d;
  font-weight:900;
  background:linear-gradient(135deg,#55e5ff,#8fc7ff);
}

.professional-submit{
  width:100%;
  display:grid;
  gap:2px;
  padding:15px 18px;
  color:white;
  background:linear-gradient(90deg,#1463ff,#2f80ff 55%,#25d9ff);
  box-shadow:0 14px 28px rgba(20,99,255,.28);
}

.professional-submit small{
  color:#eaf6ff;
}

.send-box .ghost{
  width:100%;
  margin-top:10px;
  background:rgba(255,255,255,.08);
  color:white;
  border:1px solid rgba(143,199,255,.20);
}

.notice{
  background:linear-gradient(135deg,#eff8ff,#e8f3ff);
  border-color:#9fc8ff;
}

.floating-wa{
  background:linear-gradient(135deg,#25d9ff,#1463ff);
  box-shadow:0 14px 32px rgba(20,99,255,.30);
}