/* =====================================================================
   TENANCY - AI SCHOOL · Checkout
   Ubicación: public_html/assets/css/checkout.css  (con app.css + home.css)
   ===================================================================== */
.checkout-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: start; }

.co-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; }
.co-card + .co-card { margin-top: 1.2rem; }
.co-card h3 { font-size: var(--fs-lg); margin-bottom: 1.2rem; }

/* Resumen del curso */
.co-course { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.co-thumb {
    width: 92px; height: 66px; border-radius: var(--r); flex-shrink: 0;
    background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(135deg, var(--navy), var(--navy-soft));
    background-size: 18px 18px, 18px 18px, cover;
    display: grid; place-items: center;
}
.co-thumb .code { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .12em; color: var(--teal); }
.co-course h4 { font-size: var(--fs-md); color: var(--navy); font-family: var(--font-display); margin-bottom: 0.2rem; }
.co-course p { font-size: var(--fs-sm); }

.order-line { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; font-size: var(--fs-base); color: var(--slate); }
.order-line.total { border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 1rem; font-size: var(--fs-lg); color: var(--navy); font-weight: 700; }
.order-line .amt-usd { font-family: var(--font-display); font-weight: 800; }
.order-line .ars-note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }

/* Panel de pago */
.pay-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
.pay-user { font-size: var(--fs-sm); color: var(--slate); background: var(--line-soft); border-radius: var(--r); padding: 0.8rem 1rem; margin-bottom: 1.2rem; }
.pay-user b { color: var(--navy); }
.mp-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .05em; color: var(--slate);
    margin-top: 1.1rem; justify-content: center; width: 100%;
}
.secure-list { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: 0.6rem; }
.secure-list li { display: flex; gap: 0.55rem; align-items: center; font-size: var(--fs-sm); color: var(--slate); }
.secure-list li::before { content: "🔒"; font-size: 0.85rem; }
.pay-warn { background: #FDF3E4; border: 1px solid #F5DDB4; color: #97671A; border-radius: var(--r); padding: 0.9rem 1.1rem; font-size: var(--fs-sm); margin-bottom: 1.2rem; }

/* Página de gracias */
.thanks { max-width: 620px; margin: 0 auto; text-align: center; padding-block: 2rem; }
.thanks-check {
    width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.6rem;
    background: rgba(18,183,106,.12); color: var(--success);
    display: grid; place-items: center; font-size: 2.4rem; font-weight: 800;
    animation: rise var(--t-slow) both;
}
.thanks h1 { margin-bottom: 0.6rem; }
.thanks .order-code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); letter-spacing: .06em; margin-bottom: 1.6rem; }
.thanks-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

@media (max-width: 900px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .pay-card { position: static; }
}

/* --- Cupón --- */
.discount-line { color: #0A8A7E; }
.coupon-box { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.coupon-form { display: flex; gap: .5rem; }
.coupon-error { color: var(--danger); font-size: var(--fs-sm); margin-top: .45rem; }
.coupon-applied { display: flex; justify-content: space-between; align-items: center; background: #E7F8F0; color: #0A6B41; padding: .6rem .9rem; border-radius: var(--r); font-size: var(--fs-sm); }

/* --- Order bump / upsell --- */
.upsell-bump { display: flex; gap: .7rem; align-items: flex-start; background: #FFF8EC; border: 1px dashed #E8A13A; border-radius: var(--r); padding: .9rem 1rem; margin-bottom: 1rem; cursor: pointer; }
.upsell-bump input { margin-top: 3px; width: 18px; height: 18px; accent-color: #E8A13A; flex-shrink: 0; }
.upsell-bump div { display: flex; flex-direction: column; gap: 2px; }
.upsell-bump strong { color: #97671A; font-size: var(--fs-sm); }
.upsell-title { color: var(--navy); font-weight: 600; font-size: var(--fs-sm); }
.upsell-price { font-family: var(--font-mono); font-size: var(--fs-xs); color: #0A8A7E; }
.upsell-price s { color: var(--muted); margin-left: .3rem; }

/* --- Planes de membresía --- */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.2rem 1.8rem; text-align: center; transition: transform var(--t), box-shadow var(--t); }
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14,26,51,.08); }
.plan-card h3 { font-size: var(--fs-lg); margin-bottom: .8rem; }
.plan-price { margin-bottom: .4rem; }
.plan-price .amt { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--navy); }
.plan-price .per { color: var(--muted); font-size: var(--fs-sm); }
.plan-card form { margin-top: 1.2rem; }

/* --- Comparación: comprar suelto vs membresía --- */
.mem-calc {
    display: flex; align-items: stretch; gap: 1.2rem; margin: 2.2rem 0 3rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 1.8rem; box-shadow: 0 8px 24px rgba(14,26,51,.05);
}
.mem-calc-side { flex: 1; display: flex; flex-direction: column; gap: .4rem; padding: .6rem 1rem; }
.mem-calc-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mem-calc-amt { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--navy); }
.mem-calc-amt.is-old { color: var(--muted); text-decoration: line-through; font-size: 1.6rem; }
.mem-calc-per { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); margin-left: .2rem; }
.mem-calc-side.is-highlight { background: linear-gradient(135deg, rgba(58,90,240,.06), rgba(15,181,166,.06)); border-radius: var(--r-lg); }
.mem-calc-side.is-highlight .mem-calc-amt { color: var(--indigo); }
.mem-calc-arrow { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--muted); flex-shrink: 0; }
@media (max-width: 640px) { .mem-calc { flex-direction: column; } .mem-calc-arrow { transform: rotate(90deg); } }

/* --- Beneficios de la membresía --- */
.mem-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2.8rem; }
.mem-benefit {
    display: flex; align-items: flex-start; gap: .9rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 1.1rem 1.2rem;
}
.mem-benefit-ico {
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px;
    border-radius: 50%; background: linear-gradient(135deg, var(--indigo), var(--teal));
    color: #fff; font-size: 1.1rem;
}
.mem-benefit strong { font-size: var(--fs-base); color: var(--navy); display: block; margin-bottom: .15rem; }
.mem-check { color: #12B76A; font-weight: 700; flex-shrink: 0; }

/* --- Checklist mini dentro de cada plan --- */
.plan-mini-checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; text-align: left; display: grid; gap: .55rem; }
.plan-mini-checklist li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--slate); }
.plan-mini-checklist li::before { content: "✓"; color: #12B76A; font-weight: 700; flex-shrink: 0; }

/* --- Tarjeta destacada (plan anual) --- */
.plan-card { position: relative; }
.plan-card.is-best { border: 2px solid var(--indigo); box-shadow: 0 14px 34px rgba(58,90,240,.14); }
.plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--teal); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: .35rem .9rem; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 4px 10px rgba(15,181,166,.35); }