/* ==========================================================================
   Workbook · Checkout (Fase 3 · base segura)
   Capa visual aislada. Reutiliza el sistema de tokens de la landing.
   Sin pagos reales: el botón final es placeholder controlado.
   ========================================================================== */

.wb-checkout {
    --wb-midnight: #0B0F1A;
    --wb-deep:     #111827;
    --wb-electric: #2563FF;
    --wb-violet:   #7C3AED;
    --wb-cyan:     #00C6FF;

    --wb-ink:      #EAF0FF;
    --wb-muted:    #9aa7c4;
    --wb-faint:    #6b7793;
    --wb-line:     rgba(148,170,255,.12);
    --wb-line-2:   rgba(148,170,255,.20);
    --wb-card:     rgba(17,23,42,.66);

    --wb-grad:     linear-gradient(110deg, #00C6FF 0%, #2563FF 52%, #7C3AED 100%);
    --wb-grad-soft:linear-gradient(135deg, rgba(0,198,255,.16), rgba(124,58,237,.16));

    --wb-rad:      18px;
    --wb-rad-lg:   26px;
    --wb-ease:     cubic-bezier(.22,.61,.36,1);

    --wb-font: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wb-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono",
               "Roboto Mono", Menlo, Consolas, monospace;

    position: relative;
    isolation: isolate;
    color: var(--wb-ink);
    background:
        radial-gradient(70% 90% at 15% 0%, rgba(37,99,255,.16), transparent 55%),
        radial-gradient(60% 80% at 100% 10%, rgba(124,58,237,.16), transparent 55%),
        var(--wb-midnight);
    font-family: var(--wb-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    border-radius: var(--wb-rad-lg);
    padding: clamp(20px, 4vw, 48px);
}

.wb-checkout *,
.wb-checkout *::before,
.wb-checkout *::after { box-sizing: border-box; }

.wb-checkout a { color: inherit; text-decoration: none; }
.wb-checkout [hidden] { display: none !important; }

/* ----------------------------------------------------------------- layout */
.wb-co-wrap { max-width: 1080px; margin: 0 auto; }

.wb-co-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.wb-co-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.wb-co-brand svg { width: 26px; height: 26px; }
.wb-co-back { font-size: .9rem; color: var(--wb-muted); display: inline-flex; align-items: center; gap: 7px; transition: color .25s; }
.wb-co-back:hover { color: var(--wb-ink); }

.wb-co-head { margin-bottom: 26px; }
.wb-co-head .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--wb-mono);
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #9dc0ff;
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--wb-line-2);
    background: var(--wb-grad-soft);
}
.wb-co-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; margin: 14px 0 6px; }
.wb-co-head p { color: var(--wb-muted); max-width: 60ch; }

.wb-co-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(20px, 3vw, 36px); align-items: start; }

/* --------------------------------------------------------------- stepper */
.wb-co-steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.wb-co-steps .s {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 12px;
    border: 1px solid var(--wb-line); background: rgba(8,11,20,.4); font-size: .82rem; color: var(--wb-faint);
    transition: all .3s var(--wb-ease);
}
.wb-co-steps .s .n {
    width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
    font-family: var(--wb-mono); font-size: .72rem; font-weight: 700;
    background: rgba(148,170,255,.08); color: var(--wb-muted);
}
.wb-co-steps .s.is-active { color: var(--wb-ink); border-color: var(--wb-line-2); background: var(--wb-grad-soft); }
.wb-co-steps .s.is-active .n { background: var(--wb-grad); color: #fff; }
.wb-co-steps .s.is-done { color: #6fe6ab; }
.wb-co-steps .s.is-done .n { background: rgba(40,200,120,.16); color: #6fe6ab; }

/* ----------------------------------------------------------------- panels */
.wb-co-card {
    border: 1px solid var(--wb-line); border-radius: var(--wb-rad-lg); background: var(--wb-card);
    padding: clamp(20px, 3vw, 32px); position: relative; overflow: hidden;
}
.wb-co-panel { display: none; }
.wb-co-panel.is-active { display: block; animation: wbCoIn .4s var(--wb-ease) both; }
@keyframes wbCoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wb-co-panel h2 { font-size: 1.18rem; font-weight: 750; margin-bottom: 4px; }
.wb-co-panel .sub { color: var(--wb-muted); font-size: .92rem; margin-bottom: 22px; }

/* ----- plan resumen dentro del paso 1 ----- */
.wb-co-plan {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 18px 20px; border-radius: 16px; border: 1px solid var(--wb-line-2);
    background: var(--wb-grad-soft); margin-bottom: 20px;
}
.wb-co-plan .pl b { display: block; font-size: 1.1rem; font-weight: 800; }
.wb-co-plan .pl span { color: var(--wb-muted); font-size: .85rem; }
.wb-co-plan .pr { text-align: right; }
.wb-co-plan .pr b { font-size: 1.4rem; font-family: var(--wb-mono); font-weight: 800; display: block; }
.wb-co-plan .pr span { color: var(--wb-faint); font-size: .76rem; }
.wb-co-plan-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.wb-co-plan-picker button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:78px;padding:13px 14px;border:1px solid var(--wb-line);border-radius:14px;background:rgba(8,11,20,.38);color:var(--wb-ink);font:inherit;text-align:left;cursor:pointer;transition:.2s ease}.wb-co-plan-picker button:hover{transform:translateY(-1px);border-color:var(--wb-line-2)}.wb-co-plan-picker button.is-on{border-color:rgba(0,198,255,.42);background:linear-gradient(135deg,rgba(0,198,255,.12),rgba(124,58,237,.16));box-shadow:0 0 0 2px rgba(37,99,255,.1)}.wb-co-plan-picker button>span{display:grid;gap:4px}.wb-co-plan-picker button b{font-size:.9rem}.wb-co-plan-picker button small{display:block;color:var(--wb-faint);font-size:.68rem}.wb-co-plan-picker button>strong{color:#fff;font-family:var(--wb-mono);font-size:.88rem;text-align:right;white-space:nowrap}.wb-co-plan{margin-top:14px!important}

.wb-co-invalid {
    margin-bottom: 20px; padding: 13px 16px; border-radius: 12px; font-size: .86rem;
    border: 1px solid rgba(254,188,46,.3); background: rgba(254,188,46,.08); color: #ffd478;
}

/* ----- controles ----- */
.wb-co-field { margin-bottom: 18px; }
.wb-co-field > label { display: block; font-size: .82rem; color: var(--wb-muted); margin-bottom: 8px; font-weight: 600; }
.wb-co-field input[type="text"],
.wb-co-field input[type="email"],
.wb-co-field input[type="tel"],
.wb-co-field select,
.wb-co-field textarea {
    width: 100%; padding: 13px 15px; border-radius: 12px; font: inherit; font-size: .94rem;
    color: var(--wb-ink); background: rgba(8,11,20,.5); border: 1px solid var(--wb-line);
    transition: border-color .25s, box-shadow .25s; outline: none;
}
.wb-co-field input::placeholder, .wb-co-field textarea::placeholder { color: var(--wb-faint); }
.wb-co-field input:focus, .wb-co-field select:focus, .wb-co-field textarea:focus {
    border-color: rgba(0,198,255,.45); box-shadow: 0 0 0 3px rgba(37,99,255,.16);
}
.wb-co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wb-co-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wb-co-months button {
    padding: 14px 8px; border-radius: 13px; border: 1px solid var(--wb-line); cursor: pointer;
    background: rgba(8,11,20,.4); color: var(--wb-muted); font: inherit; transition: all .25s var(--wb-ease);
    display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.wb-co-months button b { font-family: var(--wb-mono); font-size: 1.1rem; color: var(--wb-ink); }
.wb-co-months button small { font-size: .68rem; color: #6fe6ab; }
.wb-co-months button:hover { border-color: var(--wb-line-2); }
.wb-co-months button.is-on { border-color: transparent; background: var(--wb-grad-soft); box-shadow: inset 0 0 0 1px var(--wb-line-2); }
.wb-co-months button.is-on b { color: #fff; }

.wb-co-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 18px; border-radius: 14px; border: 1px solid var(--wb-line);
    background: rgba(8,11,20,.4); cursor: pointer; transition: border-color .25s;
}
.wb-co-toggle:hover { border-color: var(--wb-line-2); }
.wb-co-toggle.is-on { border-color: rgba(0,198,255,.35); background: var(--wb-grad-soft); }
.wb-co-toggle .tx b { display: block; font-weight: 650; }
.wb-co-toggle .tx span { color: var(--wb-faint); font-size: .82rem; }
.wb-co-toggle .sw { flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(148,170,255,.14); position: relative; transition: background .25s; }
.wb-co-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--wb-ease); }
.wb-co-toggle.is-on .sw { background: var(--wb-electric); }
.wb-co-toggle.is-on .sw::after { transform: translateX(20px); }

.wb-co-check { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--wb-muted); }
.wb-co-check input { margin-top: 3px; accent-color: var(--wb-electric); width: 17px; height: 17px; flex: none; }

/* ----- nav de pasos ----- */
.wb-co-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.wb-co-btn {
    appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 650; font-size: .95rem;
    padding: 13px 24px; border-radius: 13px; color: #fff; background: var(--wb-grad);
    transition: transform .2s var(--wb-ease), box-shadow .2s, opacity .2s;
    box-shadow: 0 18px 40px -18px rgba(37,99,255,.7);
}
.wb-co-btn:hover { transform: translateY(-2px); }
.wb-co-btn.ghost { background: transparent; border: 1px solid var(--wb-line-2); color: var(--wb-ink); box-shadow: none; }
.wb-co-btn.ghost:hover { background: rgba(148,170,255,.06); }
.wb-co-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.wb-co-pay-note {
    margin-top: 14px; font-size: .8rem; color: var(--wb-faint); display: flex; gap: 8px; align-items: flex-start;
    padding: 12px 14px; border-radius: 11px; border: 1px dashed var(--wb-line-2); background: rgba(8,11,20,.35);
}
.wb-co-pay-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #9dc0ff; }

/* ------------------------------------------------------------ resumen lat */
.wb-co-summary {
    position: sticky; top: 24px; border: 1px solid var(--wb-line-2); border-radius: var(--wb-rad-lg);
    background: linear-gradient(180deg, rgba(20,27,48,.85), rgba(11,15,28,.85));
    padding: clamp(20px, 3vw, 28px); overflow: hidden;
}
.wb-co-summary h3 { font-size: 1.02rem; font-weight: 750; margin-bottom: 16px; }
.wb-co-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: .9rem; color: var(--wb-muted); border-bottom: 1px solid var(--wb-line); }
.wb-co-line span:last-child { color: var(--wb-ink); font-family: var(--wb-mono); }
.wb-co-line.disc span:last-child { color: #6fe6ab; }
.wb-co-line.muted { color: var(--wb-faint); border-bottom: 0; }
.wb-co-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wb-line-2); }
.wb-co-total b { font-size: 1.5rem; font-family: var(--wb-mono); font-weight: 800; }
.wb-co-total .lbl { font-weight: 650; }
.wb-co-summary .foot { margin-top: 16px; font-size: .76rem; color: var(--wb-faint); line-height: 1.5; }
.wb-co-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: .76rem; color: #9dc0ff; }
.wb-co-badge svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 880px) {
    .wb-co-grid { grid-template-columns: 1fr; }
    .wb-co-summary { position: relative; top: 0; order: -1; }
}
@media (max-width: 560px) {
    .wb-co-row { grid-template-columns: 1fr; }
    .wb-co-months { grid-template-columns: repeat(2, 1fr); }
    .wb-co-actions { flex-direction: column-reverse; }
    .wb-co-btn { width: 100%; }
    .wb-co-plan-picker{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce) {
    .wb-checkout *, .wb-checkout *::before, .wb-checkout *::after {
        animation: none !important; transition: none !important;
    }
}

/* Workbook Commerce 2.0 */
body.workbook-commerce-page{margin:0!important;background:#070B14!important;color:#F8FAFC!important}.workbook-commerce-page #workbook-commerce-app{min-height:100vh!important}.wb-checkout{min-height:100vh!important;background:radial-gradient(circle at 8% 0%,rgba(37,99,255,.18),transparent 32%),radial-gradient(circle at 92% 12%,rgba(124,58,237,.18),transparent 30%),linear-gradient(180deg,#080D18,#0B1020)!important}
.wb-co-brand img{display:block;width:168px;height:auto}.wb-co-head{max-width:830px!important}.wb-co-head h1{font-size:clamp(2.4rem,6vw,5.2rem)!important;line-height:.94!important;letter-spacing:-.065em!important}.wb-co-head p{max-width:760px!important;font-size:clamp(1rem,1.7vw,1.18rem)!important;line-height:1.65!important}.wb-co-trustline{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.wb-co-trustline span{display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border:1px solid rgba(148,170,255,.17);border-radius:999px;background:rgba(15,23,42,.42);color:#C7D2E6;font-size:.75rem;font-weight:650}.wb-co-kicker{display:block;margin-bottom:8px;color:#8EAAFF;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.wb-co-grid{align-items:start}.wb-co-card{position:relative}.wb-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.wb-co-error{border-color:rgba(248,113,113,.35)!important;background:rgba(127,29,29,.2)!important;color:#FECACA!important}.wb-co-field label small{color:var(--wb-faint);font-weight:500}.wb-co-toggle{width:100%;font-family:inherit;color:inherit;text-align:left}.wb-co-info{padding:13px 14px;border:1px solid rgba(37,99,255,.2);border-radius:12px;background:rgba(37,99,255,.08);color:#AFC1E3;font-size:.8rem;line-height:1.55}.wb-co-slug{display:flex;align-items:center;border:1px solid var(--wb-line);border-radius:12px;background:rgba(8,11,20,.5);overflow:hidden}.wb-co-slug span{padding:0 0 0 14px;color:#77839A;font-size:.84rem}.wb-co-slug input{border:0!important;background:transparent!important;box-shadow:none!important;padding-left:3px!important}.wb-co-activation-flow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.wb-co-activation-flow span{display:flex;align-items:center;gap:10px;min-height:60px;padding:12px;border:1px solid var(--wb-line);border-radius:13px;background:rgba(8,11,20,.38);color:#C6D0E1;font-size:.8rem}.wb-co-activation-flow b{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#2563FF,#7C3AED);color:#fff}.wb-co-check a{color:#8FB1FF}.wb-co-form-error{margin-top:18px;padding:12px 14px;border:1px solid rgba(248,113,113,.35);border-radius:12px;background:rgba(127,29,29,.18);color:#FECACA;font-size:.82rem}.wb-co-form-error[hidden]{display:none!important}.wb-co-summary-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;color:#8FA5C7;font-size:.68rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.wb-co-summary-head svg{width:18px;height:18px;color:#84A9FF}.wb-co-security{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--wb-line)}.wb-co-security span{display:flex;align-items:center;gap:7px;color:#9EB0CB;font-size:.73rem}.wb-co-security svg{width:14px;height:14px;color:#6FE6AB}.wb-co-card.is-submitting:after,.wb-co-grid.is-submitting:after{content:"";position:absolute;inset:0;background:rgba(8,13,24,.55);backdrop-filter:blur(2px);z-index:5}.wb-co-btn:focus-visible,.wb-co-toggle:focus-visible{outline:3px solid rgba(0,198,255,.35);outline-offset:3px}
.wb-checkout-thanks{display:grid!important;place-items:center!important;padding:24px!important}.wb-thanks-wrap{width:min(920px,100%)!important}.wb-thanks-wrap>.wb-co-brand{display:inline-flex;margin-bottom:28px}.wb-thanks-card{padding:clamp(28px,5vw,56px);border:1px solid var(--wb-line-2);border-radius:30px;background:linear-gradient(180deg,rgba(19,27,48,.92),rgba(10,15,28,.92));box-shadow:0 38px 120px rgba(0,0,0,.38);text-align:center}.wb-thanks-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 20px;border-radius:20px;background:linear-gradient(135deg,rgba(0,198,255,.2),rgba(124,58,237,.25));border:1px solid rgba(143,177,255,.25);color:#8FE2FF;font-size:30px;font-weight:850}.wb-thanks-card h1{margin:8px 0 12px;font-size:clamp(2.2rem,5vw,4.5rem);line-height:.96;letter-spacing:-.06em}.wb-thanks-card>p{max-width:650px;margin:0 auto 26px;color:var(--wb-muted);font-size:1rem;line-height:1.65}.wb-thanks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.wb-thanks-grid article{display:grid;gap:7px;padding:18px;border:1px solid var(--wb-line);border-radius:15px;background:rgba(8,11,20,.38);text-align:left}.wb-thanks-grid span,.wb-thanks-grid small{color:var(--wb-faint);font-size:.72rem}.wb-thanks-grid strong{overflow-wrap:anywhere}.wb-thanks-grid a{color:#8FB1FF;text-decoration:none;font-size:.78rem;font-weight:750}.wb-thanks-next{max-width:640px;margin:30px auto 0;padding:22px;border:1px solid var(--wb-line);border-radius:17px;background:rgba(8,11,20,.32);text-align:left}.wb-thanks-next h2{margin:0 0 14px}.wb-thanks-next ol{display:grid;gap:9px;margin:0;padding-left:20px;color:#B8C5D9}.wb-thanks-actions{display:flex;justify-content:center;gap:10px;margin-top:26px}.wb-thanks-actions a{text-decoration:none}
@media(max-width:700px){.wb-co-trustline{display:grid;grid-template-columns:1fr 1fr}.wb-co-activation-flow,.wb-thanks-grid{grid-template-columns:1fr}.wb-thanks-actions{flex-direction:column}.wb-thanks-actions .wb-co-btn{width:100%}.wb-thanks-card{text-align:left}.wb-thanks-icon{margin-left:0}.wb-thanks-card>p{margin-left:0}.wb-co-head h1{font-size:2.75rem!important}}