/**
 * Checkout OS TigerLab — capa visual refinada
 * Tipografía clara, sombras reales, motion tokens del DS (sin “look IA”).
 * Capa de delight: aurora superior animada, glow accent en cards, stagger reveals.
 */

/* ---------- Layout / página ---------- */
.checkout-page {
    --checkout-accent-edge: var(--color-accent);
    --checkout-card-highlight: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-accent) 6%, transparent) 0%,
        transparent 42%
    );
    --checkout-aurora-1: color-mix(in srgb, var(--color-accent) 11%, transparent);
    --checkout-aurora-2: color-mix(in srgb, var(--color-accent-2, var(--color-accent)) 7%, transparent);
    --checkout-grid-line: var(--border-soft, rgba(255, 255, 255, 0.04));
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 70% 40% at 20% -10%, var(--checkout-aurora-1), transparent 60%),
        radial-gradient(ellipse 60% 35% at 80% -10%, var(--checkout-aurora-2), transparent 60%),
        radial-gradient(ellipse 90% 50% at 50% -20%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent),
        linear-gradient(var(--checkout-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--checkout-grid-line) 1px, transparent 1px);
    background-size:
        140% 100%,
        140% 100%,
        100% 100%,
        100% 72px,
        72px 100%;
    background-position:
        0% 0%,
        100% 0%,
        center top,
        0 0,
        0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    animation: checkout-aurora-drift 22s ease-in-out infinite alternate;
}

@keyframes checkout-aurora-drift {
    0%   { background-position: 0% 0%, 100% 0%, center top, 0 0, 0 0; }
    100% { background-position: 8% 2%, 92% 3%, center top, 0 0, 0 0; }
}

.checkout-page .checkout-container {
    max-width: min(1160px, 100%);
}

/* Layout dos columnas: --bp-md = 960px (DS); 1024 dejaba tablet 768–959 en layout un poco comprimido vs grid principal */
@media (min-width: 960px) {
    .checkout-page .checkout-layout {
        gap: clamp(0.875rem, 1.2vw, 1.125rem);
        align-items: start;
    }
}

html[data-theme='light'] body.checkout-page {
    --checkout-aurora-1: color-mix(in srgb, var(--color-accent) 6%, transparent);
    --checkout-aurora-2: color-mix(in srgb, var(--color-accent-2, var(--color-accent)) 4%, transparent);
    background-image:
        radial-gradient(ellipse 70% 40% at 20% -10%, var(--checkout-aurora-1), transparent 60%),
        radial-gradient(ellipse 60% 35% at 80% -10%, var(--checkout-aurora-2), transparent 60%),
        radial-gradient(ellipse 85% 45% at 50% -15%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent),
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
}

/* Entrada suave columnas (GPU: opacity + transform) */
@keyframes checkout-col-in {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

.checkout-layout > .checkout-form-column {
    animation: checkout-col-in var(--d-slow, 360ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
    animation-delay: 40ms;
}

.checkout-layout > .checkout-summary-column {
    animation: checkout-col-in var(--d-slow, 360ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
    animation-delay: 140ms;
}

/* Stagger interno dentro del form (jerarquía visual al cargar) */
@keyframes checkout-section-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.checkout-form-card .checkout-form-lead,
.checkout-form-card .checkout-section,
.checkout-form-card .checkout-contact-inline,
.checkout-form-card .payment-badges,
.checkout-form-card .checkout-submit,
.checkout-form-card .checkout-legales-wrap {
    animation: checkout-section-in var(--d-base, 240ms) var(--ease-out-cubic, cubic-bezier(0.33, 1, 0.68, 1)) backwards;
}

.checkout-form-card .checkout-form-lead       { animation-delay: 180ms; }
.checkout-form-card .checkout-section:nth-of-type(1) { animation-delay: 220ms; }
.checkout-form-card .checkout-section:nth-of-type(2) { animation-delay: 280ms; }
.checkout-form-card .checkout-section:nth-of-type(3) { animation-delay: 340ms; }
.checkout-form-card .checkout-section:nth-of-type(4) { animation-delay: 400ms; }
.checkout-form-card .checkout-contact-inline { animation-delay: 460ms; }
.checkout-form-card .payment-badges          { animation-delay: 500ms; }
.checkout-form-card .checkout-submit         { animation-delay: 540ms; }
.checkout-form-card .checkout-legales-wrap   { animation-delay: 600ms; }

/* ---------- Header ---------- */
.checkout-header {
    position: sticky;
    top: 0;
    /* por debajo de --z-mp-overlay (Mercado); por encima de contenido sticky local */
    z-index: var(--z-sticky, 100);
    margin-bottom: var(--space-6);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft, color-mix(in srgb, var(--border) 65%, transparent));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Accent line inferior — sutil señal de marca */
.checkout-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-accent) 28%, transparent) 25%,
        color-mix(in srgb, var(--color-accent) 48%, transparent) 50%,
        color-mix(in srgb, var(--color-accent) 28%, transparent) 75%,
        transparent 100%
    );
    opacity: 0.7;
    pointer-events: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .checkout-header {
        background: color-mix(in srgb, var(--bg) 98%, transparent);
    }
}

.checkout-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 6px 0;
    margin: -6px 0;
    transition: opacity var(--d-fast, 160ms) var(--ease-smooth, ease),
                transform var(--d-fast, 160ms) var(--ease-spring, ease),
                filter var(--d-base, 240ms) var(--ease-smooth, ease);
}

.checkout-logo-link:hover {
    opacity: 1;
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--color-accent) 28%, transparent));
}

.checkout-logo-link:active {
    transform: translateY(0);
    filter: none;
}

/* Logo del header del checkout — tamaño correcto y prioritario sobre .brand-logo */
.checkout-page .checkout-logo,
body.checkout-page .checkout-logo {
    display: block;
    height: clamp(34px, 4.6vw, 42px);
    max-height: 42px;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    opacity: 1;
}

@media (max-width: 640px) {
    .checkout-page .checkout-logo,
    body.checkout-page .checkout-logo {
        height: 32px;
        max-height: 36px;
    }
}

.checkout-back-link {
    position: relative;
    transition:
        color var(--d-fast, 160ms) var(--ease-smooth),
        transform var(--d-fast, 160ms) var(--ease-spring),
        background-color var(--d-fast, 160ms) var(--ease-smooth);
    border-radius: var(--r-sm, 8px);
}

.checkout-back-link:hover {
    transform: translateX(-2px);
    background: color-mix(in srgb, var(--color-accent-2-soft, transparent) 32%, transparent);
}

/* ---------- Tipografía cabecera formulario ---------- */
.checkout-form-header {
    margin-bottom: var(--space-6);
}

.checkout-title {
    margin-bottom: var(--space-3);
    letter-spacing: -0.03em;
    font-weight: 700;
    line-height: 1.15;
}

.checkout-subtitle {
    max-width: 48ch;
    line-height: 1.45;
    color: var(--text-muted);
    font-size: clamp(0.875rem, 2vw, 0.9375rem);
}

/* ---------- Cards principal ---------- */
.checkout-form-card,
.checkout-summary-card {
    position: relative;
    border-radius: var(--r-lg, 16px);
    border: 1px solid var(--border);
    background: var(--card-bg);
    background-image: var(--checkout-card-highlight);
    box-shadow:
        var(--shadow-2, 0 2px 8px rgba(0, 0, 0, 0.12)),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
    transition:
        box-shadow var(--d-base, 240ms) var(--ease-out-cubic),
        border-color var(--d-base, 240ms) var(--ease-smooth),
        transform var(--d-base, 240ms) var(--ease-spring);
    isolation: isolate;
}

/* Glow accent ambient — capa baja, no interfiere con contenido */
.checkout-form-card::before,
.checkout-summary-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent) 22%, transparent) 0%,
        transparent 30%,
        transparent 70%,
        color-mix(in srgb, var(--color-accent-2, var(--color-accent)) 18%, transparent) 100%
    );
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--d-base, 240ms) var(--ease-smooth);
    pointer-events: none;
    z-index: 1;
}

.checkout-form-card:hover::before,
.checkout-summary-card:hover::before,
.checkout-form-card:focus-within::before,
.checkout-summary-card:focus-within::before {
    opacity: 1;
}

.checkout-form-card:hover,
.checkout-summary-card:hover {
    box-shadow:
        var(--shadow-3, 0 8px 24px rgba(0, 0, 0, 0.16)),
        0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
        0 24px 48px -16px color-mix(in srgb, var(--color-accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    border-color: color-mix(in srgb, var(--border-strong, var(--border)) 60%, var(--color-accent));
}

.checkout-summary-card:hover {
    transform: translate3d(0, -2px, 0);
}

/* Indicador lateral del summary (línea accent vertical animada) */
.checkout-summary-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: var(--r-lg, 16px);
    bottom: var(--r-lg, 16px);
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(
        180deg,
        var(--checkout-accent-edge),
        color-mix(in srgb, var(--checkout-accent-edge) 45%, transparent)
    );
    opacity: 0.95;
    pointer-events: none;
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 35%, transparent);
    z-index: 1;
}

.checkout-summary-card:hover::after {
    animation: checkout-edge-pulse 2.4s ease-in-out infinite;
}

@keyframes checkout-edge-pulse {
    0%, 100% {
        box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 28%, transparent);
        opacity: 0.85;
    }
    50% {
        box-shadow: 0 0 26px color-mix(in srgb, var(--color-accent) 55%, transparent);
        opacity: 1;
    }
}

.checkout-summary-title {
    letter-spacing: 0.04em;
}

/* ---------- Lead (una línea, sin caja) ---------- */
.checkout-form-lead {
    margin: 0 0 var(--sp-5, 20px);
    padding: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1rem);
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 52ch;
}

html[data-theme='light'] body.checkout-page .checkout-form-lead {
    color: var(--text-muted);
}

/* ---------- Secciones ---------- */
.checkout-section-title {
    letter-spacing: 0.06em;
    opacity: 0.95;
}

.checkout-billing-heading {
    margin-bottom: var(--sp-3, 12px);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* ---------- Facturación colapsable + animación ---------- */
.checkout-billing-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3, 12px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    margin-bottom: 0;
    border-radius: var(--r-md, 12px);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-bg) 92%, var(--bg));
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset;
    cursor: pointer;
    transition:
        border-color var(--d-base, 240ms) var(--ease-smooth),
        box-shadow var(--d-base, 240ms) var(--ease-smooth),
        background var(--d-base, 240ms) var(--ease-smooth),
        transform var(--d-fast, 160ms) var(--ease-spring);
}

.checkout-billing-toggle:hover {
    border-color: color-mix(in srgb, var(--border-strong, var(--border)) 50%, var(--color-accent));
    background: color-mix(in srgb, var(--card-bg) 88%, var(--color-accent-soft, transparent));
    transform: translate3d(0, -1px, 0);
}

.checkout-billing-toggle:has(#necesito-factura:checked) {
    border-color: color-mix(in srgb, var(--color-accent) 38%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
        0 8px 24px -12px color-mix(in srgb, var(--color-accent) 28%, transparent);
    background: color-mix(in srgb, var(--card-bg) 90%, var(--color-accent-soft, transparent));
}

.checkout-billing-toggle .checkout-checkbox {
    margin-top: 3px;
}

/* Fix: padding interno + overflow:clip permite que focus-rings (4px shadow)
   no queden recortados durante/tras la transición. */
.checkout-billing-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--d-slow, 360ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
    margin-top: var(--space-6);
    margin-bottom: 0;
}

.checkout-billing-panel--open {
    grid-template-rows: 1fr;
}

.checkout-billing-panel-inner {
    overflow: hidden;
    overflow: clip;
    min-height: 0;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition:
        opacity var(--d-base, 240ms) var(--ease-out-cubic),
        transform var(--d-base, 240ms) var(--ease-out-cubic);
    transition-delay: 0ms;
    /* Buffer para focus rings sin desplazar contenido visualmente */
    margin-inline: calc(var(--space-1, 4px) * -1);
    padding-inline: var(--space-1, 4px);
    margin-top: calc(var(--space-1, 4px) * -1);
    padding-top: var(--space-1, 4px);
}

.checkout-billing-panel--open .checkout-billing-panel-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 80ms;
}

.checkout-billing-panel[aria-hidden='true'] .checkout-billing-panel-inner {
    pointer-events: none;
}

.checkout-billing-panel--open[aria-hidden='false'] .checkout-billing-panel-inner {
    pointer-events: auto;
}

/* ---------- Inputs ---------- */
body.checkout-page .checkout-field {
    gap: var(--space-4);
    position: relative;
}

body.checkout-page .checkout-label {
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    transition: color var(--d-fast, 160ms) var(--ease-smooth);
    will-change: color;
}

.checkout-field:focus-within .checkout-label {
    color: var(--color-accent, var(--text));
}

.checkout-input:not(:disabled),
.checkout-select:not(:disabled) {
    border-radius: var(--r-md, 12px);
    transition:
        border-color var(--d-fast, 160ms) var(--ease-smooth),
        box-shadow var(--d-base, 240ms) var(--ease-out-cubic),
        background-color var(--d-fast, 160ms) var(--ease-smooth),
        transform var(--d-fast, 160ms) var(--ease-spring);
}

.checkout-input:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--border-strong, var(--border)) 50%, var(--color-accent));
}

.checkout-input:not(:disabled):focus-visible {
    outline: none;
    border-color: var(--color-accent, var(--accent));
    box-shadow:
        var(--focus-ring-shadow),
        0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent),
        0 8px 24px -12px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

body.checkout-page .checkout-input:not(:disabled),
body.checkout-page .checkout-select:not(:disabled) {
    background: color-mix(in oklab, var(--card-bg) 92%, var(--color-bg-primary));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 2px 10px rgba(0, 0, 0, 0.07);
}

/* Si tiene error, animar shake sutil al input */
@keyframes checkout-input-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    50%      { transform: translateX(3px); }
    75%      { transform: translateX(-2px); }
}

body.checkout-page .checkout-input--error {
    animation: checkout-input-shake 320ms var(--ease-smooth);
}

/* Caret accent: punto de inserción usa color de marca */
body.checkout-page .checkout-input:not(:disabled),
body.checkout-page .checkout-select:not(:disabled) {
    caret-color: var(--color-accent);
}

/* ---------- WhatsApp (una línea, discreta) ---------- */
.checkout-contact-inline {
    margin: 0 0 var(--space-4);
    padding: 0;
    text-align: center;
}

@media (min-width: 640px) {
    .checkout-contact-inline {
        text-align: right;
    }
}

.checkout-contact-inline__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-sec);
    text-decoration: none;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border-radius: var(--r-md, 12px);
    min-height: 36px;
    transition:
        color var(--d-fast, 160ms) var(--ease-smooth),
        background var(--d-fast, 160ms) var(--ease-smooth);
}

.checkout-contact-inline__link:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--color-accent-2-soft, transparent) 40%, transparent);
}

.checkout-contact-inline__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Logos de pago (solo marcas, sin microcopy) ---------- */
.checkout-page .payment-badges--minimal {
    padding-top: var(--space-4);
    margin-top: 0;
    margin-bottom: var(--space-4);
    border-top: 1px solid var(--border);
}

.checkout-page .payment-badges--minimal .brand-row {
    justify-content: center;
    gap: var(--space-12);
    opacity: 0.88;
}

@media (min-width: 640px) {
    .checkout-page .payment-badges--minimal .brand-row {
        justify-content: flex-start;
    }
}

/* ---------- CTA ---------- */
.checkout-submit {
    position: relative;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition:
        transform var(--d-fast, 160ms) var(--ease-spring),
        box-shadow var(--d-base, 240ms) var(--ease-out-cubic),
        filter var(--d-fast, 160ms) var(--ease-smooth),
        opacity var(--d-fast, 160ms) var(--ease-smooth);
}

/* Glow ambiente sutil cuando el botón está activo (ya validado el form) */
.checkout-submit:not(:disabled) {
    box-shadow:
        0 4px 12px -2px color-mix(in srgb, var(--color-accent) 22%, transparent),
        0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent);
    animation: checkout-cta-breath 3.2s ease-in-out infinite;
}

@keyframes checkout-cta-breath {
    0%, 100% {
        box-shadow:
            0 4px 12px -2px color-mix(in srgb, var(--color-accent) 22%, transparent),
            0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent);
    }
    50% {
        box-shadow:
            0 8px 28px -4px color-mix(in srgb, var(--color-accent) 38%, transparent),
            0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
    }
}

/* Sweep luminoso al pasar el mouse */
.checkout-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, #fff 28%, transparent),
        transparent
    );
    transition: left var(--d-slower, 600ms) var(--ease-out-cubic);
    pointer-events: none;
    z-index: 1;
}

.checkout-submit:not(:disabled):hover::before {
    left: 130%;
}

.checkout-submit > * {
    position: relative;
    z-index: 2;
}

.checkout-submit:not(:disabled):hover {
    transform: translateY(-3px);
    animation: none;
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--color-accent) 32%, transparent),
        0 8px 22px rgba(0, 0, 0, 0.2),
        0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.checkout-submit:not(:disabled):active {
    transform: translateY(0) scale(0.985);
    transition-duration: var(--d-instant, 80ms);
    box-shadow: var(--shadow-2);
}

.checkout-submit--processing {
    cursor: wait;
    animation: checkout-cta-pulse 1.4s ease-in-out infinite;
}

@keyframes checkout-cta-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.82; }
}

/* Estado success: pop + check (entra con bounce sutil) */
@keyframes checkout-cta-success-pop {
    0%   { transform: scale(0.96); }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.checkout-submit--success {
    animation: checkout-cta-success-pop 360ms var(--ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55));
    background: color-mix(in srgb, var(--accent) 88%, #fff) !important;
    border-color: var(--accent) !important;
    color: var(--c-emerald-950, #022c22) !important;
}

html[data-theme='light'] body.checkout-page .checkout-submit--success {
    color: var(--c-emerald-950, #04281f) !important;
}

/* ---------- Spinner botón (keyframes en motion.css) ---------- */
.checkout-page .btn-loading-spinner {
    animation: ostl-spin 0.65s linear infinite;
}

/* ---------- Badge promo resumen ---------- */
.checkout-summary-card .checkout-discount-badge {
    position: relative;
    margin-bottom: var(--space-6);
    border-radius: var(--r-md, 12px);
    letter-spacing: 0.04em;
    overflow: hidden;
    animation: ostl-fade-up var(--d-base, 240ms) var(--ease-out-expo) 140ms backwards;
    background:
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
            color-mix(in srgb, var(--color-accent) 6%, transparent) 50%,
            color-mix(in srgb, var(--color-accent) 14%, transparent) 100%
        ),
        rgba(245, 245, 245, 0.04);
    background-size: 200% 100%;
    background-position: 0% 0%;
    border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* Shimmer continuo sobre el badge */
.checkout-summary-card .checkout-discount-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        color-mix(in srgb, var(--color-accent) 28%, transparent) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    animation: checkout-badge-shimmer 3.6s ease-in-out infinite;
    animation-delay: 1.2s;
    pointer-events: none;
}

@keyframes checkout-badge-shimmer {
    0%   { transform: translateX(-100%); }
    35%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

.checkout-price-cartel {
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--d-base, 240ms) var(--ease-smooth),
        box-shadow var(--d-base, 240ms) var(--ease-out-cubic),
        transform var(--d-base, 240ms) var(--ease-spring);
}

.checkout-summary-card:hover .checkout-price-cartel {
    border-color: color-mix(in srgb, var(--border) 35%, var(--color-accent));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-accent) 24%, transparent),
        0 12px 32px -12px color-mix(in srgb, var(--color-accent) 32%, transparent);
    transform: translate3d(0, -1px, 0);
}

/* Shimmer único sobre el precio al entrar hover */
.checkout-price-cartel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 35%,
        color-mix(in srgb, var(--color-accent) 22%, transparent) 50%,
        transparent 65%
    );
    transform: translateX(-100%);
    pointer-events: none;
    transition: none;
}

.checkout-summary-card:hover .checkout-price-cartel::before {
    transform: translateX(100%);
    transition: transform 900ms var(--ease-out-cubic);
}

/* Precio actual con leve glow accent */
.checkout-page .checkout-price-row--current .checkout-product-price {
    position: relative;
    text-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 32%, transparent);
    transition: text-shadow var(--d-base, 240ms) var(--ease-smooth);
}

.checkout-summary-card:hover .checkout-price-row--current .checkout-product-price {
    text-shadow: 0 0 30px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.checkout-summary-promo[hidden] {
    display: none !important;
}

.checkout-price-row--old[hidden] {
    display: none !important;
}

.checkout-product {
    flex-wrap: wrap;
}

.checkout-summary-promo {
    margin-bottom: var(--space-6);
}

.btn-state {
    gap: var(--space-6);
}

.checkout-submit:disabled:not(.checkout-submit--processing):not(.checkout-submit--success) {
    transform: none;
}

/* ---------- Nota compacta en resumen ---------- */
.checkout-summary-card .checkout-trust-note--compact {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.checkout-trust-note--compact p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---------- Beneficios: stagger animation + hover micro-interacción ---------- */
@keyframes checkout-benefit-in {
    from {
        opacity: 0;
        transform: translate3d(-8px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.checkout-page .checkout-benefits-list li {
    animation: checkout-benefit-in var(--d-base, 240ms) var(--ease-out-cubic, cubic-bezier(0.33, 1, 0.68, 1)) backwards;
    transition:
        color var(--d-fast, 160ms) var(--ease-smooth),
        transform var(--d-fast, 160ms) var(--ease-spring);
    border-radius: var(--r-sm, 8px);
}

.checkout-page .checkout-benefits-list li:nth-child(1) { animation-delay: 280ms; }
.checkout-page .checkout-benefits-list li:nth-child(2) { animation-delay: 340ms; }
.checkout-page .checkout-benefits-list li:nth-child(3) { animation-delay: 400ms; }
.checkout-page .checkout-benefits-list li:nth-child(4) { animation-delay: 460ms; }
.checkout-page .checkout-benefits-list li:nth-child(5) { animation-delay: 520ms; }
.checkout-page .checkout-benefits-list li:nth-child(6) { animation-delay: 580ms; }
.checkout-page .checkout-benefits-list li:nth-child(7) { animation-delay: 640ms; }
.checkout-page .checkout-benefits-list li:nth-child(8) { animation-delay: 700ms; }

.checkout-page .checkout-benefits-list li::before {
    transition:
        transform var(--d-fast, 160ms) var(--ease-spring),
        color var(--d-fast, 160ms) var(--ease-smooth),
        text-shadow var(--d-base, 240ms) var(--ease-smooth);
    will-change: transform;
}

.checkout-page .checkout-benefits-list li:hover {
    color: var(--text);
    transform: translateX(2px);
}

.checkout-page .checkout-benefits-list li:hover::before {
    transform: scale(1.18);
    text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/* ---------- Legal checkbox destacado ---------- */
.checkout-checkbox-group--primary {
    border-radius: var(--r-md, 12px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    transition:
        border-color var(--d-base, 240ms) var(--ease-smooth),
        box-shadow var(--d-base, 240ms) var(--ease-smooth),
        background-color var(--d-base, 240ms) var(--ease-smooth);
}

.checkout-page .checkout-checkbox-group.checkout-checkbox-group--primary {
    background: color-mix(in srgb, var(--card-bg) 94%, var(--color-accent-soft));
    border: 1px solid var(--border);
}

.checkout-checkbox-group--primary:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--border));
    background: color-mix(in srgb, var(--card-bg) 88%, var(--color-accent-soft, transparent));
}

/* Cuando el checkbox de declaración está marcado: glow accent + check pop */
.checkout-page .checkout-checkbox-group--primary:has(#declaracion:checked) {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--border));
    background: color-mix(in srgb, var(--card-bg) 86%, var(--color-accent-soft, transparent));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent),
        0 8px 24px -12px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

@keyframes checkout-checkbox-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.checkout-page .checkout-checkbox-group--primary:has(#declaracion:checked) .checkout-checkbox {
    animation: checkout-checkbox-pop 360ms var(--ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55));
}

/* ---------- Discount period: subrayado verde sutil ---------- */
.checkout-page .checkout-discount-period {
    transition: color var(--d-fast, 160ms) var(--ease-smooth);
}

.checkout-summary-card:hover .checkout-discount-period {
    color: color-mix(in srgb, var(--text) 70%, var(--color-accent));
}

/* ---------- Errores summary: entrada suave ---------- */
.checkout-page .checkout-errors-summary:not([hidden]) {
    animation: checkout-error-in var(--d-base, 240ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes checkout-error-in {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ---------- Title: gradient sutil accent en la última palabra (display) ---------- */
.checkout-page .checkout-title {
    background: linear-gradient(
        100deg,
        var(--text) 0%,
        var(--text) 60%,
        color-mix(in srgb, var(--text) 78%, var(--color-accent)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---------- Mobile / tablet ---------- */
@media (max-width: 1023px) {
    .checkout-summary-column {
        order: -1;
    }

    .checkout-layout {
        gap: var(--sp-4, 16px);
    }

    .checkout-header {
        margin-bottom: var(--sp-4, 16px);
    }

    /* En mobile la card es más compacta: el lift no debe ser tan agresivo */
    .checkout-summary-card:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .checkout-form-lead {
        margin-bottom: var(--space-6);
    }

    .checkout-contact-inline {
        text-align: center;
        margin-bottom: var(--space-4);
    }

    /* Mobile: entrada sin blur (filter es costoso en GPUs móviles) */
    .checkout-layout > .checkout-form-column,
    .checkout-layout > .checkout-summary-column {
        animation-name: ostl-fade-up;
        animation-duration: var(--d-base, 240ms);
    }

    /* Aurora drift menos agresivo en mobile */
    .checkout-page {
        animation-duration: 30s;
    }
}

/* Devices muy pequeños: simplificar más decoraciones */
@media (max-width: 360px) {
    .checkout-page {
        animation: none;
    }

    .checkout-summary-card .checkout-discount-badge::after {
        animation-duration: 5s;
    }
}

/* No tocar (touch): desactivar hover transforms agresivos */
@media (hover: none) {
    .checkout-form-card:hover,
    .checkout-summary-card:hover,
    .checkout-billing-toggle:hover,
    .checkout-summary-card:hover .checkout-price-cartel,
    .checkout-page .checkout-benefits-list li:hover {
        transform: none;
    }

    .checkout-summary-card:hover::after {
        animation: none;
    }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .checkout-page,
    .checkout-layout > .checkout-form-column,
    .checkout-layout > .checkout-summary-column,
    .checkout-form-card .checkout-form-lead,
    .checkout-form-card .checkout-section,
    .checkout-form-card .checkout-contact-inline,
    .checkout-form-card .payment-badges,
    .checkout-form-card .checkout-submit,
    .checkout-form-card .checkout-legales-wrap,
    .checkout-summary-card .checkout-discount-badge,
    .checkout-summary-card .checkout-discount-badge::after,
    .checkout-page .checkout-benefits-list li,
    .checkout-summary-card:hover::after,
    .checkout-submit:not(:disabled),
    .checkout-submit--processing,
    .checkout-submit--success,
    .checkout-page .checkout-input--error,
    .checkout-page .btn-loading-spinner,
    .checkout-page .checkout-errors-summary:not([hidden]),
    .checkout-checkbox-group--primary:has(#declaracion:checked) .checkout-checkbox {
        animation: none !important;
    }

    .checkout-form-card:hover,
    .checkout-summary-card:hover,
    .checkout-submit:not(:disabled):hover,
    .checkout-contact-inline__link:hover,
    .checkout-billing-panel,
    .checkout-billing-toggle:hover,
    .checkout-billing-toggle:has(#necesito-factura:checked),
    .checkout-page .checkout-benefits-list li:hover {
        transform: none !important;
        transition: none;
    }

    .checkout-billing-panel-inner {
        transition: none;
        transform: none;
    }

    .checkout-billing-panel--open .checkout-billing-panel-inner {
        transition-delay: 0ms;
    }

    .checkout-logo-link:hover {
        transform: none;
        filter: none;
    }

    .checkout-back-link:hover {
        transform: none;
    }

    .checkout-submit::before {
        display: none;
    }

    .checkout-price-cartel::before {
        display: none;
    }
}

/* ================================================================== */
/*  SPACING RESET — corrige bug de legacy --space-10 (= 80px)          */
/*  Usa tokens del DS v2 (--sp-*) que sí son consistentes (4px-base)   */
/*  Estos overrides cargan al final, ganan por cascada.                */
/* ================================================================== */

/* Inputs y selects: tamaño cómodo, no gigante */
body.checkout-page .checkout-input,
body.checkout-page .checkout-select {
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    min-height: 44px;
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* iOS: 16px evita zoom en focus en mobile */
@media (max-width: 640px) {
    body.checkout-page .checkout-input,
    body.checkout-page .checkout-select {
        font-size: 16px;
        min-height: 46px;
    }
}

/* Form card: padding interno proporcional */
body.checkout-page .checkout-form-card {
    padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px);
}

@media (max-width: 640px) {
    body.checkout-page .checkout-form-card {
        padding: var(--sp-5, 20px) var(--sp-5, 20px);
    }
}

/* Summary card: padding compacto */
body.checkout-page .checkout-summary-card {
    padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px);
}

@media (max-width: 640px) {
    body.checkout-page .checkout-summary-card {
        padding: var(--sp-5, 20px);
    }
}

/* Form: ritmo entre secciones */
body.checkout-page .checkout-form {
    gap: 0;
}

body.checkout-page .checkout-section {
    margin-bottom: var(--sp-6, 24px);
}

body.checkout-page .checkout-section:last-of-type {
    margin-bottom: var(--sp-4, 16px);
}

body.checkout-page .checkout-section--legal {
    margin-bottom: var(--sp-4, 16px);
}

/* Form header: jerarquía limpia */
body.checkout-page .checkout-form-header {
    margin-bottom: var(--sp-5, 20px);
}

body.checkout-page .checkout-title {
    margin-bottom: var(--sp-2, 8px);
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
}

body.checkout-page .checkout-subtitle {
    margin: 0;
}

body.checkout-page .checkout-form-lead {
    margin: 0 0 var(--sp-5, 20px);
}

/* Section title: spacing limpio */
body.checkout-page .checkout-section-title {
    margin-bottom: var(--sp-3, 12px);
}

/* Fields grid: gap razonable, 2 columnas en desktop */
body.checkout-page .checkout-fields-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4, 16px);
}

@media (max-width: 640px) {
    body.checkout-page .checkout-fields-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4, 16px);
    }
}

/* Field interno: label cerca del input */
body.checkout-page .checkout-field {
    gap: var(--sp-2, 8px);
}

body.checkout-page .checkout-label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

body.checkout-page .checkout-helper {
    font-size: 0.75rem;
    margin-top: var(--sp-1, 4px);
}

body.checkout-page .checkout-error {
    font-size: 0.75rem;
    margin-top: var(--sp-1, 4px);
}

/* Errors summary box */
body.checkout-page .checkout-errors-summary {
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    margin-bottom: var(--sp-5, 20px);
    font-size: 0.875rem;
}

/* Error message (después del submit) */
body.checkout-page .checkout-error-message {
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    margin-top: var(--sp-3, 12px);
    font-size: 0.875rem;
}

/* Price cartel: compacto */
body.checkout-page .checkout-price-cartel {
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    gap: var(--sp-1, 4px);
}

body.checkout-page .checkout-price-row {
    gap: var(--sp-3, 12px);
}

body.checkout-page .checkout-price-row--current .checkout-product-price {
    font-size: clamp(1.375rem, 2.4vw, 1.5rem);
}

/* Discount badge: padding razonable */
body.checkout-page .checkout-summary-card .checkout-discount-badge {
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    font-size: 0.8125rem;
}

/* Product summary */
body.checkout-page .checkout-product {
    margin-bottom: var(--sp-4, 16px);
    padding-bottom: var(--sp-4, 16px);
    gap: var(--sp-3, 12px);
}

body.checkout-page .checkout-product-name {
    font-size: 0.9375rem;
    line-height: 1.35;
}

body.checkout-page .checkout-product-meta {
    font-size: 0.8125rem;
    margin-top: var(--sp-1, 4px);
}

/* Summary title: spacing limpio */
body.checkout-page .checkout-summary-title {
    margin-bottom: var(--sp-4, 16px);
    padding-bottom: var(--sp-3, 12px);
    font-size: 0.75rem;
}

/* Benefits list */
body.checkout-page .checkout-benefits {
    margin-bottom: var(--sp-4, 16px);
    padding-bottom: var(--sp-4, 16px);
}

body.checkout-page .checkout-benefits-list {
    gap: var(--sp-2, 8px);
}

body.checkout-page .checkout-benefits-list li {
    gap: var(--sp-2, 8px);
    font-size: 0.8125rem;
    padding-block: 2px;
}

/* Payment info (3 cuotas, sin renovación) */
body.checkout-page .checkout-payment-info {
    margin-bottom: var(--sp-3, 12px);
    padding-bottom: 0;
}

body.checkout-page .checkout-payment-line {
    font-size: 0.8125rem;
    margin-bottom: var(--sp-1, 4px);
}

/* Submit button: tamaño profesional */
body.checkout-page .checkout-submit {
    padding: var(--sp-3, 12px) var(--sp-5, 20px);
    min-height: 50px;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-top: var(--sp-4, 16px);
    border-radius: var(--r-md, 12px);
    border-width: 1px;
}

@media (min-width: 641px) {
    body.checkout-page .checkout-submit {
        min-height: 52px;
        font-size: 1rem;
    }
}

/* Payment badges (logos de marcas): compactos arriba del CTA */
body.checkout-page .payment-badges--minimal {
    padding-top: var(--sp-3, 12px);
    margin-top: var(--sp-2, 8px);
    margin-bottom: var(--sp-2, 8px);
}

body.checkout-page .payment-badges--minimal .brand-row {
    gap: clamp(16px, 2.4vw, 24px);
}

/* Legales wrap */
body.checkout-page .checkout-legales-wrap {
    margin-top: var(--sp-5, 20px);
    padding-top: var(--sp-3, 12px);
}

body.checkout-page .checkout-legales-label {
    font-size: 0.6875rem;
    margin-bottom: var(--sp-2, 8px);
}

body.checkout-page .checkout-secondary-links {
    gap: var(--sp-2, 8px);
}

body.checkout-page .checkout-secondary-link {
    font-size: 0.75rem;
    min-height: auto;
    padding: var(--sp-1, 4px) 0;
}

/* Trust note compacto */
body.checkout-page .checkout-summary-card .checkout-trust-note--compact {
    margin-top: var(--sp-4, 16px);
    padding-top: var(--sp-3, 12px);
}

body.checkout-page .checkout-trust-note--compact p {
    font-size: 0.75rem;
}

/* Header: padding razonable + alineación vertical correcta */
body.checkout-page .checkout-header {
    padding-top: var(--sp-3, 12px);
    padding-bottom: var(--sp-3, 12px);
    margin-bottom: var(--sp-5, 20px);
}

body.checkout-page .checkout-header-inner {
    gap: var(--sp-4, 16px);
}

body.checkout-page .checkout-back-link {
    font-size: 0.8125rem;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    min-height: 36px;
}

/* Container: padding lateral más cómodo */
body.checkout-page .checkout-container {
    padding-left: clamp(16px, 3vw, 28px);
    padding-right: clamp(16px, 3vw, 28px);
}

@media (min-width: 960px) {
    body.checkout-page .checkout-layout {
        gap: clamp(20px, 2vw, 32px);
    }
}

/* Page padding */
body.checkout-page {
    padding: 0 0 var(--sp-8, 32px);
}

@media (min-width: 641px) {
    body.checkout-page {
        padding: 0 0 var(--sp-10, 40px);
    }
}

/* Billing panel: gap del grid interno */
body.checkout-page .checkout-billing-panel {
    margin-top: var(--sp-3, 12px);
}

body.checkout-page .checkout-billing-panel-inner > .checkout-fields-grid {
    margin-top: var(--sp-3, 12px);
}

body.checkout-page .checkout-billing-heading {
    margin-bottom: var(--sp-3, 12px);
}

/* Required asterisk: cerca del label */
body.checkout-page .checkout-required {
    margin-left: 2px;
    font-weight: 700;
}