/* WoW · Banner de la Academia (precio, contenido y referidos) */
.acad { position: relative; overflow: hidden; }
.acad::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60%; height: 80%; background: radial-gradient(closest-side, rgba(47,125,250,.22), transparent); pointer-events: none; }
.acad__in { position: relative; display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
@media (max-width: 900px) { .acad__in { grid-template-columns: 1fr; } }
.acad h2 .hl { color: var(--blue-500); }
.acad__parts { list-style: none; display: grid; gap: var(--space-3); margin: var(--space-6) 0; counter-reset: p; }
.acad__parts li { counter-increment: p; display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: 12px; background: rgba(19,28,48,.6); transition: border-color .25s, transform .25s var(--ease-out); }
.acad__parts li:hover { border-color: var(--blue-500); transform: translateX(4px); }
.acad__parts li::before { content: counter(p, decimal-leading-zero); font: 500 var(--text-xs) var(--font-mono); color: var(--blue-300); }
.acad__parts b { font-weight: 600; }
.acad__parts span { display: block; color: var(--fg-muted); font-size: var(--text-sm); }
.acad__bonus { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.acad__note { margin-top: var(--space-5); color: var(--fg-muted); font-size: var(--text-xs); max-width: 60ch; }

.buy { position: sticky; top: 84px; display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 80px rgba(47,125,250,.18); text-align: center; justify-items: center; }
.buy .wowito-slot { min-height: 120px; display: grid; place-items: center; }
.buy__price b { font: 800 4rem / 1 var(--font-main); letter-spacing: -.04em; }
.buy__price span { display: block; color: var(--fg-muted); font-size: var(--text-sm); margin-top: .3rem; }
.buy ul { list-style: none; display: grid; gap: .5rem; text-align: left; font-size: var(--text-sm); width: 100%; }
.buy li { position: relative; padding-left: 1.5rem; }
.buy li::before { content: ""; position: absolute; left: 0; top: .35em; width: .85rem; height: .85rem; border-radius: 50%; background: var(--blue-500) center/60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.buy .btn { width: 100%; justify-content: center; }
.buy__ref { width: 100%; padding: var(--space-3) var(--space-4); border: 1px dashed var(--blue-500); border-radius: 12px; color: var(--blue-300); font-size: var(--text-sm); }
.buy__ref b { color: var(--white); }

/* ---------- Ventana de pago ---------- */
.pay { width: min(560px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 1px solid var(--navy-600); border-radius: 20px; background: var(--navy-800); color: var(--white); box-shadow: 0 40px 120px rgba(0,0,0,.6); overflow: auto; }
.pay::backdrop { background: rgba(5,8,16,.72); backdrop-filter: blur(4px); }
.pay[open] { animation: pay-in .35s var(--ease-out); }
@keyframes pay-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.pay__in { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
.pay__top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
.pay__top h3 { font: 700 var(--text-xl, 1.5rem) / 1.2 var(--font-main); }
.pay__x { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--navy-600); background: var(--navy-700); color: var(--white); font-size: 1.25rem; cursor: pointer; }
.pay__x:hover { border-color: var(--blue-500); }
.pay__sum { color: var(--mist-300); font-size: var(--text-sm); }
.pay__sum b { color: var(--white); }
.pay__list { display: grid; gap: var(--space-3); }
.pm { display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--navy-600); border-radius: 14px; background: var(--navy-700); }
.pm b { font-weight: 600; font-size: var(--text-sm); }
.pm code { grid-column: 1; font: 500 var(--text-base) var(--font-mono); color: var(--blue-300); word-break: break-all; }
.pm small { grid-column: 1; color: var(--mist-300); font-size: var(--text-xs); }
.pm button { grid-column: 2; grid-row: 1 / span 3; padding: .5rem .9rem; border-radius: 10px; border: 1px solid var(--navy-600); background: transparent; color: var(--white); font: 600 var(--text-xs) var(--font-main); cursor: pointer; }
.pm button:hover { border-color: var(--blue-500); }
.pm button.ok { background: #2fbf71; border-color: #2fbf71; color: #04210f; }
.pay__steps { margin: 0; padding-left: 1.4rem; list-style: decimal; color: var(--mist-300); font-size: var(--text-sm); display: grid; gap: .3rem; }
.pay .btn { justify-content: center; }

/* Pasos, pestañas y formulario de la compra */
.pay__stepper { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; font: 500 var(--text-xs) var(--font-mono); color: var(--mist-300); }
.pay__stepper li { flex: 1; padding: .45rem .3rem; text-align: center; border-bottom: 2px solid var(--navy-600); }
.pay__stepper li.on { color: var(--white); border-color: var(--blue-500); }
.pay__stepper li.done { color: var(--blue-300); border-color: var(--blue-300); }
.pay__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: 4px; border-radius: 12px; background: var(--navy-700); border: 1px solid var(--navy-600); }
.pay__tabs button { padding: .6rem; border: 0; border-radius: 9px; background: transparent; color: var(--mist-300); font: 600 var(--text-sm) var(--font-main); cursor: pointer; }
.pay__tabs button.on { background: var(--blue-action, #2868e0); color: #fff; }
.pay__form { display: grid; gap: var(--space-4); }
.pay__form .field label { color: var(--white); }
.pay__form .input { background: var(--navy-700); color: var(--white); border-color: var(--navy-600); }
.pay__form select.input { appearance: auto; }
.pay__form input[type=file].input { padding: .6rem; }
.pay .muted { color: var(--mist-300); font-weight: 400; }
.pay .hint { color: var(--mist-300); font-size: var(--text-xs); }
.pay .hint.ok { color: #2fbf71; } .pay .hint.bad { color: #f5a524; }
.pay .msg { padding: .7rem 1rem; border-radius: 10px; font-size: var(--text-sm); }
.pay .msg[hidden] { display: none; }
.pay .msg--err { background: rgba(239,91,91,.12); border: 1px solid rgba(239,91,91,.5); color: #ffb4b4; }
.pay .msg--ok { background: rgba(47,191,113,.12); border: 1px solid rgba(47,191,113,.5); color: #a6f0c6; }
.pay__hint { color: var(--mist-300); font-size: var(--text-sm); }
.pay__ok { display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding: var(--space-4) 0; }
.pay__ok h4 { font: 700 var(--text-lg) var(--font-main); }
.pay__ok p { color: var(--mist-300); font-size: var(--text-sm); max-width: 38ch; }
.pay__check { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #2fbf71; color: #04210f; font-size: 2rem; font-weight: 800; animation: pay-pop .6s var(--ease-out); }
@keyframes pay-pop { from { transform: scale(.4); opacity: 0; } }
.pay .btn:disabled { opacity: .6; cursor: progress; }
.pay__body { display: grid; gap: var(--space-4); }

/* Oferta por recomendación y enlaces secundarios */
.buy__offer { width: 100%; padding: .5rem .8rem; border-radius: 10px; background: rgba(47,191,113,.14); border: 1px solid rgba(47,191,113,.5); color: #a6f0c6; font-size: var(--text-sm); }
.buy__old { font-size: .45em; font-weight: 600; color: var(--mist-300); margin-right: .3rem; }
.pay__off { color: #a6f0c6; font-weight: 600; }
.pay__link { background: none; border: 0; color: var(--blue-300); font: 600 var(--text-sm) var(--font-main); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: .5rem; justify-self: center; }
.buy__alt { background: none; border: 0; color: var(--blue-300); font: 600 var(--text-sm) var(--font-main); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }