/* ==========================================================================
   A) FLUJO NATIVO DE WOOCOMMERCE (order-pay / pedido recibido)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A.1 VARIABLES — mismas que el checkout personalizado, para mantener identidad

   PASE DE CONTRASTE (esta revisión, alineado al mismo criterio del
   checkout custom v4):
     - --muted ya no es un gris "leído sobre negro sólido": sube a blanco casi
       puro (rgba(255,255,255,.92)).
     - Se añaden reglas nuevas para texto genérico (label, p, li de contenido,
       celdas de tabla que no son el total) que antes heredaban el gris por
       defecto del tema/WooCommerce y no tenían color explícito acá.
     - Los elementos que llevan color (cyan, naranja) suben de peso de fuente
       donde antes quedaban en weight normal, para que el color no sea la
       única fuente de contraste.
     - CAMBIO PRINCIPAL: los contenedores grandes (tabla de resumen, caja de
       pago) dejan de usar el morado vivo (--purple-panel) como fondo — igual
       que en el checkout v4, ese morado brillante se reserva para acentos
       chicos, no para paneles grandes de texto, porque compite con el color
       del contenido y baja el contraste real. Ahora usan --panel-dark
       (oscuro con tinte morado), igual que .border-\[#1e1e1e\] / .border-gold
       del checkout v4, así el texto blanco/cyan/naranja resalta con nitidez.
   -------------------------------------------------------------------------- */
:root {
    --purple: #7927CD;
    --cyan: #02C2FF;
    --orange-start: #FF7700;
    --orange-end: #F6A965;
    --black: #000000;
    --border-light: rgba(255, 255, 255, 0.35);

    /* Texto secundario casi blanco: antes era un gris pensado para fondo
       negro sólido; sobre las tarjetas necesitaba más contraste. */
    --muted: rgba(255, 255, 255, 0.92);

    --success: #3fc070;
    --warning: #f59e0b;
    --error: #c03f3f;

    /* Degradado morado "vivo": queda reservado para acentos chicos (por
       ejemplo un badge o un detalle puntual), NO para los paneles grandes
       de contenido — igual criterio que el checkout v4. */
    --purple-panel: linear-gradient(160deg, #9B4FE8 0%, #7927CD 55%, #8A2BE8 100%);

    /* Panel oscuro con tinte morado para las tarjetas grandes (tabla de
        resumen, caja de pago): mismo valor que --panel-dark del checkout v4,
        para que inputs, botones de pago y filas de texto tengan buen
        contraste encima en vez de fundirse con un morado sólido brillante. */
    --panel-dark: linear-gradient(145deg, rgba(29, 20, 38, 0.86) 0%, rgba(10, 7, 14, 0.94) 58%, rgba(31, 14, 44, 0.86) 100%);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* Compatibilidad con nombres antiguos usados en el HTML de WooCommerce */
    --gold: #02C2FF;
    --gold-light: #7927CD;
    --bg-dark: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.35);
}

/* La familia "Museum" se carga globalmente desde Elementor (fuente
   personalizada subida ahí), por eso ya no se declara @font-face acá. */

html { font-size: 18px; }

/* --------------------------------------------------------------------------
   A.2 FONDO GENERAL — se mantiene igual: negro con nebulosas moradas
   -------------------------------------------------------------------------- */
body {
    background-color: var(--black) !important;
    background-image:
        radial-gradient(45% 55% at 92% 68%, rgba(121, 39, 205, 0.55) 0%, rgba(121, 39, 205, 0.18) 45%, transparent 75%),
        radial-gradient(35% 40% at 80% 75%, rgba(2, 194, 255, 0.12) 0%, transparent 70%),
        radial-gradient(55% 45% at 98% 70%, rgba(121, 39, 205, 0.3) 0%, transparent 70%),
        linear-gradient(180deg, #000000 0%, #050208 40%, #000000 100%) !important;
    background-attachment: scroll, scroll, scroll, scroll !important;
    background-repeat: no-repeat !important;
    background-size: 100% 1600px, 100% 1600px, 100% 1600px, 100% 100% !important;
    background-position: top, top, top, top !important;
    color: #fff;
    font-family: 'Museum', 'Syne', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   A.3 CONTENEDOR ENVOLVENTE
   -------------------------------------------------------------------------- */
.paradox-wc-flow {
    background: transparent;
    color: #fff;
    padding: 40px 16px 80px;
    min-height: 60vh;
    font-family: inherit;
}
.paradox-wc-flow .paradox-wc-flow-inner {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Texto genérico (párrafos, etiquetas, listas de contenido no interactivas):
   antes heredaba el gris por defecto de WooCommerce/tema; ahora blanco casi
   puro + peso medio para que se lea bien sobre el fondo negro y sobre las
   tarjetas moradas. Se excluyen explícitamente los <li> de métodos de pago,
   que ya tienen su propio tratamiento en A.5. */
.paradox-wc-flow p,
.paradox-wc-flow label,
.paradox-wc-flow span:not(.wc_payment_methods span),
.paradox-wc-flow li:not(.wc_payment_methods li) {
    color: var(--muted);
    font-weight: 500;
}

/* Tipografía de títulos — familia Museum + naranja del checkout, con más
   peso y un resplandor sutil para que destaquen sobre el fondo. */
.paradox-wc-flow h1 {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 900;
    color: var(--orange-start) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 0 16px rgba(255, 119, 0, 0.35);
}
.paradox-wc-flow h2, .paradox-wc-flow h3 {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 900;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 1.15rem;
    font-style: italic;
    margin-bottom: 12px;
    text-shadow: 0 3px 18px rgba(2, 194, 255, 0.22);
}

/* --------------------------------------------------------------------------
   A.4 TABLA DE RESUMEN NATIVA DE WOOCOMMERCE — estilo "tarjeta"
   Fondo de contenedor: panel oscuro con tinte morado (--panel-dark), igual
   que las tarjetas grandes del checkout v4, para que el texto tenga
contraste real en vez de competir con un morado brillante.
    -------------------------------------------------------------------------- */
.paradox-wc-flow table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 24px;
    font-size: .9rem;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    overflow: hidden;
    background: var(--panel-dark);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    box-shadow: var(--glass-shadow);
}
.paradox-wc-flow table.shop_table th,
.paradox-wc-flow table.shop_table td {
    border: none;
    border-bottom: 1px solid var(--border-light);
    padding: 14px 18px;
    word-break: break-word;
    color: #fff;
    font-weight: 500;
}
.paradox-wc-flow table.shop_table tr:last-child td { border-bottom: none; }
.paradox-wc-flow table.shop_table th {
    color: var(--muted);
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .05em;
    font-weight: 700;
}
.paradox-wc-flow table.shop_table .order-total td { font-weight: 900; color: var(--cyan); font-size: 1rem; }

/* --------------------------------------------------------------------------
   A.5 CAJA DE PAGO — donde carga Mercado Pago / Niubiz
   Fondo de contenedor: panel oscuro con tinte morado (--panel-dark), igual
   que .border-\[#1e1e1e\] / .border-gold del checkout v4.
   -------------------------------------------------------------------------- */
.paradox-wc-flow #payment {
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 24px;
    margin-top: 24px;
    background: var(--panel-dark);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    box-shadow: var(--glass-shadow);
}
.paradox-wc-flow #payment:hover {
    border-color: rgba(226, 209, 255, 0.34);
    box-shadow: var(--glass-shadow);
}

/* Lista de métodos de pago — tarjetas clickeables completas, no solo el radio */
.paradox-wc-flow .wc_payment_methods {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.paradox-wc-flow .wc_payment_methods li {
    position: relative;
    border: none;
    border-radius: 0;
    padding: 10px 0 10px 30px;
    margin-bottom: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s ease;
}
.paradox-wc-flow .wc_payment_methods li:hover {
    border-color: transparent;
    background: transparent;
}
.paradox-wc-flow .wc_payment_methods li input[type="radio"] {
    position: absolute;
    left: 0;
    top: 11px;
    width: 18px;
    height: 18px;
    accent-color: var(--orange-start);
    cursor: pointer;
    margin: 0;
}
.paradox-wc-flow .wc_payment_methods li label {
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .05em;
}
.paradox-wc-flow .wc_payment_methods li:has(input:checked) {
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    background: transparent;
    box-shadow: none;
}
.paradox-wc-flow .wc_payment_methods li:has(input:checked) label {
    color: #ffffff;
}
.paradox-wc-flow .payment_box {
    margin-top: 14px;
    padding: 12px 0;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: .85rem;
    color: var(--muted);
    font-weight: 500;
}
/* Iframe / widget embebido de Mercado Pago: que ocupe todo el ancho disponible */
.paradox-wc-flow .payment_box iframe,
.paradox-wc-flow .payment_box .mp-checkout-wallet-button-container,
.paradox-wc-flow #mp-wallet-button-container,
.paradox-wc-flow [id*="mercadopago"],
.paradox-wc-flow [class*="mercadopago"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Inputs de texto nativos (datos de facturación si aplica) */
.paradox-wc-flow input[type=text],
.paradox-wc-flow input[type=email],
.paradox-wc-flow input[type=tel],
.paradox-wc-flow input[type=password],
.paradox-wc-flow select,
.paradox-wc-flow textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-light) !important;
    color: #fff !important;
    font-weight: 500;
    padding: 14px 16px !important;
    font-size: .9rem;
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
}
.paradox-wc-flow input[type=text]::placeholder,
.paradox-wc-flow input[type=email]::placeholder,
.paradox-wc-flow input[type=tel]::placeholder {
    color: var(--muted);
}
.paradox-wc-flow input[type=text]:focus,
.paradox-wc-flow input[type=email]:focus,
.paradox-wc-flow input[type=tel]:focus,
.paradox-wc-flow textarea:focus {
    border-color: var(--orange-start) !important;
    box-shadow: 0 0 15px rgba(255, 119, 0, 0.25);
    background: rgba(255, 119, 0, 0.06) !important;
}
.paradox-wc-flow input[type=text]:not(:placeholder-shown),
.paradox-wc-flow input[type=email]:not(:placeholder-shown),
.paradox-wc-flow input[type=tel]:not(:placeholder-shown) {
    border-color: rgba(255, 119, 0, 0.4) !important;
    background: rgba(255, 119, 0, 0.04) !important;
}

/* ==========================================================================
   FIX AUTOFILL (iPhone Safari + Chrome): los navegadores aplican su
   propio background al autorrellenar (Safari suele forzar texto negro y
   fondo casi negro, dejando el input ilegible). Sobrescribimos con el
   mismo color del tema para que el campo se vea identico a cuando el
   cliente lo llena a mano.
   ========================================================================== */
.paradox-wc-flow input[type=text]:-webkit-autofill,
.paradox-wc-flow input[type=email]:-webkit-autofill,
.paradox-wc-flow input[type=tel]:-webkit-autofill,
.paradox-wc-flow input[type=password]:-webkit-autofill,
.paradox-wc-flow select:-webkit-autofill,
.paradox-wc-flow textarea:-webkit-autofill,
.paradox-wc-flow input[type=text]:-webkit-autofill:hover,
.paradox-wc-flow input[type=email]:-webkit-autofill:hover,
.paradox-wc-flow input[type=tel]:-webkit-autofill:hover,
.paradox-wc-flow input[type=password]:-webkit-autofill:hover,
.paradox-wc-flow input[type=text]:-webkit-autofill:focus,
.paradox-wc-flow input[type=email]:-webkit-autofill:focus,
.paradox-wc-flow input[type=tel]:-webkit-autofill:focus,
.paradox-wc-flow input[type=password]:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset !important;
    caret-color: #ffffff !important;
    border-color: var(--border-light) !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/* --------------------------------------------------------------------------
   A.6 BOTÓN FINAL DE PAGAR — el degradado naranja del checkout
   -------------------------------------------------------------------------- */
.paradox-wc-flow #place_order,
.paradox-wc-flow button[type=submit] {
    background: linear-gradient(90deg, var(--orange-start), var(--orange-end)) !important;
    color: #000 !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
    padding: 18px;
    border: none;
    border-radius: 20px;
    width: 100%;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
    transition: all 0.3s ease;
}
.paradox-wc-flow #place_order:hover,
.paradox-wc-flow button[type=submit]:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 20px rgba(255, 119, 0, 0.4);
}

/* Enlaces y Alertas */
.paradox-wc-flow a { color: var(--cyan); font-weight: 700; }
.paradox-wc-flow a:hover { color: var(--purple); }

.paradox-wc-flow .woocommerce-message,
.paradox-wc-flow .woocommerce-info {
    border: 1px solid var(--cyan);
    border-radius: 12px;
    background: rgba(2, 194, 255, 0.08);
    color: #fff;
    font-weight: 500;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.paradox-wc-flow .woocommerce-error {
    border: 1px solid var(--error);
    border-radius: 12px;
    background: rgba(192, 63, 63, 0.1);
    color: #fff;
    font-weight: 500;
    padding: 14px 18px;
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   A.7 RESPONSIVE (sin cambios de comportamiento)
   -------------------------------------------------------------------------- */
@media (min-width: 1281px) {
    .paradox-wc-flow .paradox-wc-flow-inner { max-width: 800px; width: 100%; }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .paradox-wc-flow .paradox-wc-flow-inner { max-width: 90%; width: 90%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .paradox-wc-flow .paradox-wc-flow-inner { max-width: 95%; width: 95%; }
}

@media (max-width: 1024px) {
    .paradox-wc-flow { padding: 30px 12px 60px; }
    .paradox-wc-flow h1 { font-size: 32px; }
    .paradox-wc-flow table.shop_table { font-size: .85rem; }
    .paradox-wc-flow table.shop_table th, .paradox-wc-flow table.shop_table td { padding: 12px 14px; }
    .paradox-wc-flow #payment { padding: 18px; }
}

@media (max-width: 767px) {
    body.woocommerce-order-pay .paradox-wc-flow #payment {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    body.woocommerce-order-pay .paradox-wc-flow #payment .wc_payment_methods,
    body.woocommerce-order-pay .paradox-wc-flow #payment .wc_payment_methods > li,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box > form,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box fieldset,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box .form-row,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box ul,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box ol {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box {
        padding: 8px 0 !important;
    }
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box::before,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box::after {
        display: none !important;
        content: none !important;
    }
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box iframe,
    body.woocommerce-order-pay .paradox-wc-flow #payment .mp-checkout-wallet-button-container,
    body.woocommerce-order-pay .paradox-wc-flow #payment #mp-wallet-button-container,
    body.woocommerce-order-pay .paradox-wc-flow #payment [id*="mercadopago"],
    body.woocommerce-order-pay .paradox-wc-flow #payment [class*="mercadopago"] {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box select,
    body.woocommerce-order-pay .paradox-wc-flow #payment .payment_box textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Fondo: mismo degradado morado-negro suave que cubre toda la página */
    body {
        background-image:
            url('/wp-content/uploads/2026/07/Group-1000004773-2-scaled.png') !important;
        background-repeat: repeat-y !important;
        background-size: 100% auto !important;
        background-attachment: scroll !important;
        min-height: 100%;
    }
    html { background: #000000; min-height: 100%; }

    .paradox-wc-flow { padding: 18px 4px 44px; }
    .paradox-wc-flow .paradox-wc-flow-inner { max-width: 100%; width: 100%; }

    .paradox-wc-flow h1 { font-size: 24px; letter-spacing: .02em; }
    .paradox-wc-flow h2, .paradox-wc-flow h3 { font-size: .86rem; }

    .paradox-wc-flow table.shop_table { font-size: .72rem; border-radius: 12px; }
    .paradox-wc-flow table.shop_table th, .paradox-wc-flow table.shop_table td { padding: 8px 9px; }

    .paradox-wc-flow #payment { padding: 12px; border-radius: 12px; }
    .paradox-wc-flow .wc_payment_methods li { padding: 10px 8px 10px 34px; font-size: .76rem; }

    /* Aseguramos que el widget de Mercado Pago aproveche TODO el ancho en teléfono */
    .paradox-wc-flow .payment_box {
        padding: 12px;
        width: 100%;
    }
    .paradox-wc-flow .payment_box iframe,
    .paradox-wc-flow [id*="mercadopago"],
    .paradox-wc-flow [class*="mercadopago"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .paradox-wc-flow #place_order,
    .paradox-wc-flow button[type=submit] {
        font-size: .82rem;
        padding: 13px;
        margin-top: 14px;
    }

    .paradox-wc-flow input[type=text],
    .paradox-wc-flow input[type=email],
    .paradox-wc-flow input[type=tel] {
        font-size: .88rem;
        padding: 10px 12px !important;
    }

    /* --- Página de "gracias por tu compra": elementos más compactos,
           siguiendo la misma escala tipográfica que el widget de booking --- */
    body.woocommerce-order-received .paradox-wc-flow { padding: 14px 8px 30px; }
    body.woocommerce-order-received .paradox-wc-flow h1 { font-size: 20px; }
    body.woocommerce-order-received .paradox-wc-flow h2,
    body.woocommerce-order-received .paradox-wc-flow h3 { font-size: 0.76rem; }
    body.woocommerce-order-received .paradox-wc-flow p,
    body.woocommerce-order-received .paradox-wc-flow li,
    body.woocommerce-order-received .paradox-wc-flow span { font-size: 0.74rem; }
    body.woocommerce-order-received .paradox-wc-flow table.shop_table { font-size: 0.65rem; }
    body.woocommerce-order-received .paradox-wc-flow table.shop_table th,
    body.woocommerce-order-received .paradox-wc-flow table.shop_table td { padding: 5px 7px; }
    body.woocommerce-order-received .paradox-wc-flow .woocommerce-table__product-name,
    body.woocommerce-order-received .paradox-wc-flow .woocommerce-order-overview__total strong,
    body.woocommerce-order-received .paradox-wc-flow .order-total .amount { font-size: 0.8rem; }
}

/* --------------------------------------------------------------------------
   A.8 BANNER DE TÍTULO — el header (con la imagen Rectangle-25) que el
   WC flow comparte con el v4 checkout. Necesita vivir aquí para que
   en order-pay / pedido recibido se renderice con el MISMO diseño.

   Layout: títulos a la izquierda (donde estaban), imagen a la derecha
   PERO más pegada al centro (no al borde derecho). Para eso la imagen
   usa un ancho controlado + margin-right para "tirarla" hacia adentro
   y object-position:right center para que el motivo visible quede
   alineado al lado que mira al título. La imagen cubre TODA la altura
   del banner en desktop, tablet y móvil (height: 100% en todos los
   breakpoints) para que se vea "igual de alta" que la cabecera.
   -------------------------------------------------------------------------- */
.paradox-checkout-titlewrap {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    background: radial-gradient(50% 77.27% at 50% 50%, #02C2FF 0.48%, #3E75E6 44.23%, #7927CD 89.9%);
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
}
.paradox-checkout-titlewrap-inner {
    width: 100%;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    position: relative;
    box-sizing: border-box;
}
/* Imagen a la IZQUIERDA en escritorio/tablet (a la DERECHA en móvil,
   ver media query ≤767px más abajo). Pegada al borde inferior y con la
   misma altura que la cabecera. order: 1 fuerza que la imagen SIEMPRE
   quede a la izquierda del texto en escritorio/tablet sin importar
   el orden en el DOM (en WC flow viene antes que el texto, en v4 viene
   después). En móvil el order se sobreescribe a 2. */
.paradox-checkout-titlewrap-art {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-height: 220px;
    object-fit: contain;
    object-position: left bottom;
    align-self: flex-end;
    order: 1;
    display: block;
    pointer-events: none;
    user-select: none;
}
/* Texto a la derecha del combo en escritorio/tablet (a la izquierda en
   móvil): centrado vertical, contenido en su ancho natural. */
.paradox-checkout-titlewrap-text {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;            /* texto pegado a la izquierda dentro de su espacio */
    order: 2;
    position: relative;
    z-index: 2;
}
.paradox-checkout-subtitle {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 300;
    font-style: italic;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0 0 4px;
    text-transform: none;
    text-align: left;
}
.paradox-checkout-title {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 700;
    font-style: italic;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    text-align: left;
}
/* Idénticas media queries en las 3 cabeceras (thank-you, checkout, pago):
   misma altura y mismas escalas tipográficas para que se vean igual.
   En tablet se mantiene la altura de escritorio (220px) con tipografías
   ligeramente más pequeñas. */
@media (max-width: 1024px) {
    .paradox-checkout-titlewrap-inner {
        flex-wrap: nowrap;
        align-items: center;
    }
    .paradox-checkout-titlewrap {
        height: 220px;
        margin-bottom: 0;
    }
    .paradox-checkout-title { font-size: 38px; line-height: 44px; }
    .paradox-checkout-subtitle { font-size: 20px; line-height: 30px; margin-bottom: 4px; }
    .paradox-checkout-titlewrap-art {
        height: 220px !important;
        max-width: 280px !important;
        max-height: 220px !important;
        object-fit: contain;
        object-position: left bottom;  /* en tablet la imagen sigue a la IZQUIERDA */
        pointer-events: none;
        user-select: none;
        margin: 0;
    }
    .paradox-checkout-titlewrap-text {
        flex: 0 1 auto;
        align-self: center;
        justify-content: center;
        transform: none;
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 767px) {
    /* Móvil: cabecera 260px. La imagen se vuelve POSICIÓN ABSOLUTA en
       el borde inferior derecho para que los textos no se vean
       aplastados por culpa del poco espacio. La imagen conserva su
       altura de escritorio (220px) y se aplica un espejo horizontal
       para que mire hacia el otro lado. Texto: 20px margen izquierdo,
       title 30/36 y subtitle 18/24, ambos pegados a la izquierda. */
    .paradox-checkout-titlewrap-inner {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }
    .paradox-checkout-titlewrap {
        height: 170px;
        margin-bottom: 0;
        position: relative;                  /* necesario para el absolute del arte */
    }
    .paradox-checkout-title { font-size: 30px; line-height: 36px; text-align: left; }
    .paradox-checkout-subtitle { font-size: 18px; line-height: 24px; margin-bottom: 4px; text-align: left; }
    .paradox-checkout-titlewrap-art {
        position: absolute;                  /* se sale del flujo flex: el texto respira */
        right: 0;
        bottom: 0;
        height: 140px !important;              /* MISMA altura que en escritorio/tablet */
        max-width: 220px !important;          /* ancho tope = espacio reservado para la imagen */
        max-height: 140px !important;
        object-fit: contain;
        object-position: right bottom;
        transform: scaleX(-1);                /* espejo horizontal */
        pointer-events: none;
        user-select: none;
        margin: 0;
        z-index: 1;
    }
    .paradox-checkout-titlewrap-text {
        flex: 0 1 auto;
        min-width: 0;
        align-self: center;
        justify-content: center;
        transform: none;
        padding: 0 0 0 20px !important;       /* pegado a la izquierda con 20px de margen */
        text-align: left;
        position: relative;
        z-index: 2;
    }
}

/* --------------------------------------------------------------------------
   A.9 AVANCE POR PASOS (Datos → Pago → Confirmación)
   Adaptado al diseño Paradox: morado (#7927CD) para pasos completados y
   naranja (#FF7700) con halo para el paso activo. Va debajo de la cabecera
   con margen inferior amplio para separarlo del contenido.
   -------------------------------------------------------------------------- */
.paradox-progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 720px;             /* ancho limitado en escritorio para acercar los círculos */
    margin: 40px auto 56px;       /* MISMA posición que thank-you (40 arriba, 56 abajo) */
    position: relative;
    font-family: 'Inter', sans-serif;
}

/* La línea de fondo que conecta los círculos. Empieza y termina en el
   CENTRO del primer y último círculo (no de borde a borde del
   contenedor). Como los círculos miden 56px y están centrados en cada
   paso, el offset lateral es 28px (mitad del círculo). */
.paradox-progress-container::before {
    content: '';
    position: absolute;
    top: 28px;                    /* centro vertical del círculo (56/2 = 28) */
    left: 28px;                   /* centro del primer círculo */
    right: 28px;                  /* centro del último círculo */
    height: 4px;
    background-color: rgba(121, 39, 205, 0.28);  /* morado apagado (color de "hover") */
    z-index: 1;
    border-radius: 2px;
}

/* El contenedor de cada paso individual */
.paradox-progress-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

/* El círculo con el número — más grande (56px escritorio, 44px móvil) */
.paradox-progress-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* Color morado claro apagado (mismo tono del hover del checkout)
       para los círculos no completados ni activos */
    background-color: rgba(121, 39, 205, 0.22);
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    transition: all 0.3s ease;
    border: 3px solid rgba(121, 39, 205, 0.55);
}

/* El texto debajo del círculo */
.paradox-progress-label {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(200, 178, 255, 0.85);
}

/* Estado Completado — morado FUERTE (#7927CD sólido) */
.paradox-progress-step.completed .paradox-progress-circle {
    background-color: #7927CD;
    color: #ffffff;
    border-color: #7927CD;
    box-shadow: 0 0 0 4px rgba(121, 39, 205, 0.30);
}
.paradox-progress-step.completed .paradox-progress-label {
    color: #c8a8ff;
}

/* Línea morada fuerte que conecta un paso completado con el siguiente.
   Va desde el centro del círculo completado hasta el centro del
   siguiente círculo (100% del ancho entre ambos centros). */
.paradox-progress-step.completed::after {
    content: '';
    position: absolute;
    top: 28px;                    /* centro vertical del círculo */
    left: 50%;                    /* centro del círculo actual */
    width: 100%;                  /* hasta el centro del siguiente */
    height: 4px;
    background-color: #7927CD;
    z-index: -1;
    border-radius: 2px;
}

/* Estado Activo — naranja #FF7700 con halo (se mantiene) */
.paradox-progress-step.active .paradox-progress-circle {
    background-color: #FF7700;
    color: #ffffff;
    border-color: #FF7700;
    box-shadow: 0 0 0 6px rgba(255, 119, 0, 0.30);
}
.paradox-progress-step.active .paradox-progress-label {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   A.10 RESPONSIVE DEL AVANCE DE PASOS (móvil)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .paradox-progress-container { margin: 28px 0 36px; max-width: 100%; }
    .paradox-progress-circle { width: 44px; height: 44px; font-size: 16px; border-width: 2px; }
    .paradox-progress-container::before,
    .paradox-progress-step.completed::after { top: 22px; }     /* 44/2 = 22 */
    .paradox-progress-step.completed::after { left: calc(50% + 22px); width: calc(100% - 44px); }
    .paradox-progress-label { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   A.11 HEADER DE LA PÁGINA DE PAGO (order-pay): centrar título e imagen.

   A diferencia del checkout v4 (donde el texto está anclado a la izquierda
   y la imagen va hacia el centro), en order-pay el conjunto título+imagen
   se centra respecto al banner completo: el texto se corre hacia el
   derecha y la imagen mantiene su posición a la derecha del banner.
   Usamos padding-left alto (%) en el texto y margin-right controlado en
   la imagen para que el balance visual sea simétrico.

Mismas media queries que A.8 (el checkout) para mantener consistencia
    en tablet (≤1024) y móvil (≤767): la imagen siempre ocupa el 100% de
    la altura del banner y los títulos se reducen en proporción.
    -------------------------------------------------------------------------- */
/* En order-pay la imagen va a la DERECHA y el texto a la IZQUIERDA
   (igual que en el checkout y thank-you). El diseño responsive unificado
   que vive en los media queries generales más abajo ya cubre order-pay,
   así que no hace falta ningún override específico. */



/* ==========================================================================
   B) CHECKOUT CUSTOM "v4" (cupones, titular, asistentes, upsells, pago)

   CAMBIOS DE ESTA REVISIÓN:
     1) Título del banner: blanco, 76px (vista de escritorio), cursiva,
        peso 700 (antes: naranja, 70px, normal, peso 900).
     2) Subtítulo del banner: cursiva, peso 300, 26px.
     3) Métodos de pago: separación entre tarjetas (antes pegadas entre sí)
        y separación respecto al botón de pagar (antes pegado).
     4) Resumen de compra en responsive (sidebar sticky inferior): tamaños
        de letra y paddings reducidos aún más, y se agrega un tope de altura
         con scroll interno para que quepa en una sola vista sin apretar el
        resto del checkout.
     5) SIDEBAR "RESUMEN DEL PEDIDO": más padding lateral en las cajitas
        (texto más al medio, no pegado al borde), menos alto de cada fila
        para que la sidebar no se vea densa, y nueva sección para mostrar
        el nombre real de cada upsell agregado.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   B.1 VARIABLES Y FONDO PRINCIPAL
   -------------------------------------------------------------------------- */
:root {
    --purple: #7927CD;
    --cyan: #02C2FF;
    --orange-start: #FF7700;
    --orange-end: #F6A965;
    --black: #000000;
    --border-light: rgba(226, 209, 255, 0.26);

    --muted: #c5becd;

    --success: #3fc070;
    --warning: #f59e0b;
    --error: #c03f3f;
    --accent: #02C2FF;

    /* Degradado morado "vivo" — reservado para acentos chicos; las
       tarjetas grandes usan --panel-dark. */
    --purple-panel: linear-gradient(160deg, #9B4FE8 0%, #7927CD 55%, #8A2BE8 100%);

    /* Panel oscuro con leve tinte morado para tarjetas grandes (01–06),
       para que inputs, botones y filas de contenido tengan contraste
       encima de él en vez de fundirse con un morado sólido. */
    --panel-dark: linear-gradient(145deg, rgba(29, 20, 38, 0.86) 0%, rgba(10, 7, 14, 0.94) 58%, rgba(31, 14, 44, 0.86) 100%);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    --gold: #02C2FF;
    --gold-light: #7927CD;
    --bg-dark: rgba(255, 255, 255, 0.03);
}

/* La familia "Museum" se carga globalmente desde Elementor (fuente
   personalizada subida ahí), por eso ya no se declara @font-face acá. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; }

/* Fondo general: imagen de la marca del checkout cubriendo todo el alto
   de la página. Si la página crece más que la imagen, esta se repite en
   vertical (background-repeat: repeat-y) para que ningún hueco quede
   sin fondo. */
body {
    background-color: #020104 !important;
    background-image:
        url('/wp-content/uploads/2026/07/Group-1000004773-2-scaled.png') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    background-attachment: scroll !important;
    color: #fff;
    font-family: 'Museum', 'Syne', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 1rem;
}

/* Título del banner — blanco, cursiva, peso 700, 76px en escritorio.
   El estilo vive en .paradox-checkout-title (regla de B.1.1); esta
   regla de respaldo se queda solo para títulos h1 genéricos que aún
   usen las clases text-3xl / text-4xl legacy. */
h1.text-3xl, h1.text-4xl {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 700;
    font-style: italic;
    color: #fff !important;
    font-size: 76px;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

h2, h3,
.accordion-header span:first-child {
    font-family: 'Museum', 'Syne', sans-serif !important;
}

/* --------------------------------------------------------------------------
   B.1.1 BANNER DE TÍTULO — unificado con thank-you y página de pago
   220px de alto, título 40/46, subtítulo 24/38, imagen a la derecha pegada
   abajo, textos centrados, combo imagen+texto centrado en el header.
   -------------------------------------------------------------------------- */
.paradox-checkout-titlewrap {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    background: radial-gradient(50% 77.27% at 50% 50%, #02C2FF 0.48%, #3E75E6 44.23%, #7927CD 89.9%);
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
}
.paradox-checkout-titlewrap-inner {
    width: 100%;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    position: relative;
    box-sizing: border-box;
}

/* Imagen a la IZQUIERDA en escritorio/tablet (a la DERECHA en móvil,
   ver media query ≤767px más abajo). order: 1 fuerza que la imagen
   SIEMPRE quede a la izquierda del texto. */
.paradox-checkout-titlewrap-art {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-height: 220px;
    object-fit: contain;
    object-position: left bottom;
    align-self: flex-end;
    order: 1;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Texto a la derecha del combo en escritorio/tablet (a la izquierda
   en móvil): centrado vertical, contenido en su ancho natural. */
.paradox-checkout-titlewrap-text {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    order: 2;
    position: relative;
    z-index: 2;
}

/* Subtítulo ARRIBA — LT Museum, Light Italic, 24px / line-height 38px */
.paradox-checkout-subtitle {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 300;
    font-style: italic;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0 0 4px;
    text-transform: none;
    text-align: left;
}

/* Título ABAJO — LT Museum, Bold Italic, 40px / line-height 46px */
.paradox-checkout-title {
    font-family: 'Museum', 'Syne', sans-serif !important;
    font-weight: 700;
    font-style: italic;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    text-align: left;
}

/* ==========================================================================
   B.2 CAJAS, CONTENEDORES Y EFECTOS HOVER
   Fondo: panel oscuro con tinte morado (--panel-dark), NO el morado vivo,
   para que inputs/botones/filas resalten encima con buen contraste.
   ========================================================================== */
.border-\[\#1e1e1e\], .border-gold {
    border: 1px solid var(--border-light) !important;
    border-radius: 24px;
    background: var(--panel-dark) !important;
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    box-shadow: var(--glass-shadow);
    transition: border-color 0.3s ease, background 0.3s ease;
    overflow: hidden;
}

.border-\[\#1e1e1e\]:hover {
    border-color: rgba(226, 209, 255, 0.34) !important;
    box-shadow: var(--glass-shadow);
}

.border-gold {
    border-color: var(--cyan) !important;
}

/* Campos de Texto (Input) — más contraste, borde y placeholder visibles */
.input-box {
    width: 100%;
    height: 52px;
    background: rgba(8, 5, 12, 0.72) !important;
    border: 1px solid rgba(226, 209, 255, 0.22) !important;
    color: #fff !important;
    padding: 0 16px !important;
    font-size: 0.92rem !important;
    line-height: 1.2;
    border-radius: 14px;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease !important;
    min-width: 0;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.34);
}
.input-box::placeholder {
    color: rgba(221, 213, 229, 0.52);
    line-height: normal;
}

.input-box:focus {
    border-color: rgba(212, 184, 242, 0.62) !important;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.34) !important;
    background: rgba(17, 10, 24, 0.84) !important;
}

.input-box:not(:placeholder-shown) {
    border-color: rgba(226, 209, 255, 0.3) !important;
    background: rgba(12, 8, 17, 0.8) !important;
}

/* Checkbox "Yo también asistiré" — llamativo, con acento cyan al estar
   marcado. Hover unificado con el resto de tarjetas (morado tenue). */
label:has(#buyer-attends) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px !important;
    margin-bottom: 14px !important;
    padding: 12px 16px;
    border: 1px solid rgba(226, 209, 255, 0.22);
    border-radius: 12px;
    background: rgba(8, 5, 12, 0.58);
    font-size: 0.85rem !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
label:has(#buyer-attends):hover {
    background: rgba(121, 39, 205, 0.14);
    border-color: var(--purple);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
label:has(#buyer-attends:checked) {
    border-color: transparent;
    background: linear-gradient(90deg, var(--cyan) 0%, #AEE9FF 100%);
    color: #031b24 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,45,62,.18);
}
label:has(#buyer-attends:checked):hover {
    filter: brightness(1.06);
}
#buyer-attends {
    width: 20px;
    height: 20px;
    accent-color: var(--orange-start);
    cursor: pointer;
    flex-shrink: 0;
}

/* Acordeones de Asistentes */
.accordion-section {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.3s ease;
}
.accordion-section:hover {
    border-color: rgba(226, 209, 255, 0.34);
    box-shadow: none;
}
.accordion-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; cursor: pointer; font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: transparent; transition: all 0.3s ease;
    gap: 8px;
}
.accordion-header span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.accordion-header:hover {
    background: rgba(121, 39, 205, 0.15);
}
.accordion-body {
    padding: 18px 20px; background: rgba(0,0,0,0.25);
    border-top: 1px solid var(--border-light); display: none;
}
.accordion-body.open { display: block; }
.accordion-icon { color: var(--cyan); font-size: 1.2rem; transition: transform .2s; flex-shrink: 0; }

/* Grid interno de datos de asistente: por defecto 2 columnas (desktop) */
.accordion-body .grid.grid-cols-1.sm\:grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.accordion-body .grid.grid-cols-1.sm\:grid-cols-2 .sm\:col-span-2 {
    grid-column: span 2;
}

/* --------------------------------------------------------------------------
   UPSELLS (Medias Antideslizantes)
   Tarjeta compacta con FOTO arriba y contenido abajo. Hover: morado tenue.
   Seleccionado: morado pero con un poco de transparencia para que el fondo
   oscuro siga asomando a través y el morado no queme tanto la vista.
   Los BOTONES sí conservan el morado sólido (skip, continuar, pagar).
   -------------------------------------------------------------------------- */
.upsell-card {
    position: relative;
    border: 2px solid var(--border-light);
    border-radius: 16px;
    background: rgba(8, 5, 12, 0.72);
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: center;
    gap: 6px;
    overflow: hidden;
}
.upsell-card:hover:not(.no-stock) {
    border-color: var(--purple);
    background: rgba(121, 39, 205, 0.14);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.upsell-card.selected {
    border-color: var(--purple) !important;
    /* Morado con intensidad reducida: 45% de opacidad para no quemar la vista */
    background: rgba(121, 39, 205, 0.45) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(121, 39, 205, 0.3), 0 10px 26px rgba(121, 39, 205, 0.12);
}
.upsell-card.selected .upsell-name,
.upsell-card.selected .upsell-price { color: #ffffff !important; }
.upsell-card.selected .upsell-qty-btn {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}
.upsell-foto-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    margin-bottom: 4px;
    min-height: 80px;
}
.upsell-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}
.upsell-foto--placeholder {
    background: linear-gradient(135deg, rgba(121,39,205,0.25), rgba(2,194,255,0.15));
}
.upsell-stock-msg {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(192, 63, 63, 0.9);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.upsell-name {
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0;
    width: 100%;
    overflow-wrap: break-word;
}
.upsell-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--cyan);
    font-family: monospace;
    font-variant-numeric: tabular-nums;
    margin: 0;
    white-space: nowrap;
}
.upsell-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.upsell-qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.upsell-qty-btn:hover:not(:disabled) {
    border-color: var(--cyan) !important;
    color: var(--cyan);
    background: rgba(2, 194, 255, 0.1);
}
.upsell-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.upsell-qty {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.upsell-card.no-stock {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(192, 63, 63, 0.14);
    border-color: rgba(192, 63, 63, 0.45);
}
.upsell-card.no-stock:hover {
    background: rgba(192, 63, 63, 0.14);
    border-color: rgba(192, 63, 63, 0.45);
}
.upsell-card.no-stock .upsell-name,
.upsell-card.no-stock .upsell-price { color: rgba(255, 200, 200, 0.85); }

/* Botón "Continuar sin producto" — debajo del grid de upsells.
   Estado inactivo: caja oscura con texto BLANCO, claramente un botón.
   Estado confirmado: morado SÓLIDO (estilo botón de Gmail en tarjetas).
   Márgenes arriba y abajo para que respire. */
.skip-upsell-btn {
    width: 100%;
    margin-top: 22px;
    margin-bottom: 18px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Museum', 'Syne', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.skip-upsell-btn::before {
    content: "○";
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}
.skip-upsell-btn:hover {
    background: rgba(121, 39, 205, 0.18);
    border-color: var(--purple);
    color: #fff;
}
.skip-upsell-btn:hover::before {
    color: var(--purple);
}
.skip-upsell-btn.confirmed {
    background: var(--purple) !important;
    border-color: var(--purple) !important;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(121, 39, 205, 0.7), 0 0 18px rgba(121, 39, 205, 0.35);
}
.skip-upsell-btn.confirmed::before {
    content: "✓";
    color: #ffffff;
    font-weight: 900;
}

/* --------------------------------------------------------------------------
   LIGHTBOX: "Continuar sin producto"
   Tarjeta oscura, pequeña, centrada — con imagen arriba, mensaje y checkbox,
   y dos botones al pie (Atrás a la izquierda opaco, Continuar a la derecha
   en naranja).
   -------------------------------------------------------------------------- */
.pp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pp-lightbox[hidden] { display: none; }
.pp-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pp-lightbox-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: linear-gradient(160deg, #1a1322 0%, #0a0610 60%, #15091f 100%);
    border: 1px solid rgba(226, 209, 255, 0.25);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pp-lightbox-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid rgba(226, 209, 255, 0.15);
}
.pp-lightbox-body {
    padding: 18px 20px 4px;
    color: #fff;
}
.pp-lightbox-title {
    font-family: 'Museum', 'Syne', sans-serif;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    color: var(--cyan);
    margin: 0 0 10px;
    text-align: center;
}
.pp-lightbox-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    margin: 0 0 10px;
    text-align: center;
}
.pp-lightbox-text--small {
    font-size: 0.7rem;
    color: var(--muted);
    margin-bottom: 14px;
}
.pp-lightbox-link {
    color: var(--cyan);
    text-decoration: underline;
    font-weight: 700;
}
.pp-lightbox-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(226, 209, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.78rem;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 6px;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.pp-lightbox-checkbox:hover {
    border-color: var(--cyan);
    background: rgba(2, 194, 255, 0.08);
}
.pp-lightbox-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--orange-start);
    cursor: pointer;
    margin-top: 1px;
}
.pp-lightbox-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px 18px;
}
.pp-lightbox-btn {
    flex: 1 1 0;
    height: 44px;
    border-radius: 10px;
    border: none;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Museum', 'Syne', sans-serif;
}
.pp-lightbox-btn--back {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.pp-lightbox-btn--back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.pp-lightbox-btn--continue {
    background: linear-gradient(90deg, var(--orange-start), var(--orange-end));
    color: #000;
    box-shadow: 0 0 0 0 rgba(255, 119, 0, 0);
}
.pp-lightbox-btn--continue:hover:not(:disabled) {
    filter: brightness(1.12);
    box-shadow: 0 0 18px rgba(255, 119, 0, 0.4);
}
.pp-lightbox-btn--continue:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* ==========================================================================
   B.3 BOTONES DE ACCIÓN (CTA)
   ========================================================================== */
.btn-cta {
    background: rgba(2, 194, 255, 0.10) !important;
    border: 1px solid var(--cyan) !important;
    color: var(--cyan) !important;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    transition: all 0.3s ease; cursor: pointer; border-radius: 10px;
    white-space: nowrap;
    padding: 12px 20px;
}
.btn-cta:hover {
    background: rgba(121, 39, 205, 0.2) !important;
    border-color: var(--purple) !important;
    box-shadow: 0 0 12px rgba(121, 39, 205, 0.4);
    color: #fff !important;
}

/* Botones de cupones rápidos (generados por JS: TEST 1, TEST 2, etc.) */
#coupon-quick-buttons button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    transition: all 0.2s ease;
}
#coupon-quick-buttons button:hover {
    background: rgba(2, 194, 255, 0.12);
    border-color: var(--cyan) !important;
    color: var(--cyan);
}

.btn-copy-data {
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-light);
    color: var(--muted); font-size: 0.7rem; padding: 8px 14px;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer; border-radius: 8px; transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-copy-data:hover {
    border-color: var(--purple); color: var(--purple);
    box-shadow: 0 0 8px rgba(121, 39, 205, 0.3);
}

.btn-cta-solid {
    background: linear-gradient(90deg, var(--orange-start), var(--orange-end)) !important;
    color: #000 !important; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.15em; transition: all 0.3s ease; cursor: pointer;
    border: none; border-radius: 20px; padding: 1.25rem; width: 100%;
    display: block; text-align: center; font-size: 1.05rem; opacity: 0.5;
    pointer-events: none;
    margin-top: 24px;
}
/* Sin selección: opaco, sin animación */
.btn-cta-solid:not(.active) {
    animation: none !important;
    box-shadow: none !important;
}
/* Estado activo: el botón cobra vida con el pulso aurora naranja */
.btn-cta-solid.active {
    opacity: 1; pointer-events: auto;
    -webkit-animation: pulsoAuroraNaranja 2s ease-out infinite !important;
    animation: pulsoAuroraNaranja 2s ease-out infinite !important;
}
.btn-cta-solid.active:hover {
    filter: brightness(1.15) !important;
}

@-webkit-keyframes pulsoAuroraNaranja {
    0% { box-shadow: 0 0 0 0 rgba(255, 119, 0, 0.9); }
    100% { box-shadow: 0 0 15px 30px rgba(255, 119, 0, 0); }
}
@keyframes pulsoAuroraNaranja {
    0% { box-shadow: 0 0 0 0 rgba(255, 119, 0, 0.9); }
    100% { box-shadow: 0 0 15px 30px rgba(255, 119, 0, 0); }
}

/* Spinner pequeño para el estado "Procesando..." del botón PAGAR */
.btn-loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2.5px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   MÉTODOS DE PAGO — click en toda la tarjeta, no solo en el círculo.
   Mismo lenguaje visual que las cards de upsells: morado al pasar el
   cursor y morado al estar seleccionado, con el radio custom integrado.
   ========================================================================== */
#payment-methods-list {
    margin-bottom: 8px;
}
#payment-methods-list > div {
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 12px;
    border: 2px solid var(--border-light);
    background: rgba(8, 5, 12, 0.72);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#payment-methods-list > div:last-child {
    margin-bottom: 0;
}
#payment-methods-list > div.border-\[\#1e1e1e\] {
    background: rgba(8, 5, 12, 0.72) !important;
    border-radius: 12px !important;
}
#payment-methods-list > div input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
#payment-methods-list > div:hover {
    border-color: var(--purple);
    background: rgba(121, 39, 205, 0.14) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#payment-methods-list > div:has(input:checked) {
    border-color: var(--purple) !important;
    background: var(--purple) !important;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(121, 39, 205, 0.7), 0 10px 26px rgba(121, 39, 205, 0.4);
}
#payment-methods-list > div:has(input:checked) span { color: #ffffff !important; }
#payment-methods-list > div span {
    position: relative;
    padding-left: 28px;
}
#payment-methods-list > div span::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: transparent;
    transition: all 0.2s ease;
}
#payment-methods-list > div:has(input:checked) span::before {
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: inset 0 0 0 3px var(--purple);
}

/* ==========================================================================
   B.4 CLASES UTILITARIAS
   ========================================================================== */
.max-w-\[1600px\]{max-width:1600px;margin:0 auto} .mx-auto{margin-left:auto;margin-right:auto}
.px-3{padding-left:12px;padding-right:12px} .px-5{padding-left:20px;padding-right:20px}
.py-6{padding-top:24px;padding-bottom:24px} .py-8{padding-top:32px;padding-bottom:32px}
.grid{display:grid} .gap-2{gap:8px} .gap-3{gap:12px} .gap-8{gap:32px}
.grid-cols-1{grid-template-columns:repeat(1,1fr)} .grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-12{grid-template-columns:repeat(12,1fr)} .space-y-1>*+*{margin-top:6px}
.space-y-2>*+*{margin-top:10px} .space-y-4>*+*{margin-top:18px} .space-y-6>*+*{margin-top:26px}
.mb-1{margin-bottom:6px} .mb-2{margin-bottom:10px} .mb-3{margin-bottom:14px}
.mb-4{margin-bottom:18px} .mb-6{margin-bottom:26px} .mt-2{margin-top:10px}
.mt-3{margin-top:14px} .mt-4{margin-top:18px} .flex{display:flex} .flex-1{flex:1; min-width:0;}
.items-center{align-items:center} .justify-between{justify-content:space-between; flex-wrap: wrap; gap: 6px;}
.justify-center{justify-content:center} .text-center{text-align:center}
.uppercase{text-transform:uppercase} .tracking-wider{letter-spacing:0.05em}
.tracking-\[0\.08em\]{letter-spacing:0.08em} .tracking-\[0\.1em\]{letter-spacing:0.1em}
.tracking-\[0\.12em\]{letter-spacing:0.12em} .tracking-\[0\.15em\]{letter-spacing:0.15em}
.font-black{font-weight:900} .font-bold{font-weight:700} .font-mono{font-family:monospace}
.text-3xl{font-size:1.875rem} .text-4xl{font-size:2.25rem} .text-sm{font-size:1rem}
.text-xs{font-size:0.9rem} .text-\[0\.55rem\]{font-size:0.75rem} .text-\[0\.6rem\]{font-size:0.8rem}
.text-gold{color:var(--gold)} .text-muted{color:var(--muted)} .text-green-500{color:var(--success)}
.border-t{border-top:1px solid rgba(255, 255, 255, 0.4)} .pt-2{padding-top:10px} .pt-3{padding-top:14px}
.p-3{padding:16px} .p-4{padding:20px} .p-5{padding:24px} .p-8{padding:36px}
.sticky{position:sticky} .top-24{top:96px} .hidden{display:none} .inline-block{display:inline-block}
.w-4{width:18px} .h-4{height:18px} .w-6{width:28px} .h-6{height:28px}
.min-h-\[60px\]{min-height:60px} .max-h-\[200px\]{max-height:200px} .overflow-y-auto{overflow-y:auto}
.bg-\[#0a0a0a\]{background:transparent} .animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,0.6,1)infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .rounded-full{border-radius:9999px}
.cursor-pointer{cursor:pointer} .opacity-50{opacity:0.5} .pointer-events-none{pointer-events:none}
.col-span-3{grid-column:span 3} .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
.sm\:col-span-2{grid-column:span 2} .lg\:grid-cols-12{grid-template-columns:repeat(12,1fr)}
.badge-explosive{position:absolute;top:-3px;right:-3px;background:var(--purple);color:#fff;padding:5px 14px;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transform:rotate(var(--angle,4deg));font-style:italic;box-shadow:0 4px 12px rgba(121,39,205,0.4)}
.progress-bar-wrap{
    height:10px;
    background:rgba(8,5,12,.78);
    border:1px solid rgba(226,209,255,.22);
    border-radius:999px;
    overflow:hidden;
    padding:2px;
    box-shadow:inset 0 1px 5px rgba(0,0,0,.55),0 10px 24px rgba(0,0,0,.22)
}
.progress-bar-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#02C2FF 0%,#AEE9FF 100%);
    transition:width .4s ease;
    box-shadow:none
}
#toast{
    z-index:9999;
    position:fixed;
    bottom:24px;
    left:24px;
    background:var(--purple);
    color:#fff;
    padding:14px 26px;
    border-radius:12px;
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    transition:all .5s;
    box-shadow: 0 0 20px rgba(121, 39, 205, 0.4);
    max-width: calc(100vw - 48px);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}
h1, h2, h3, p, div, button, input { overflow-wrap: break-word; }
#progress-pct,
#summary-subtotal, #summary-upsells, #summary-coupons,
#summary-total, #summary-igv, #summary-btn-total,
#coupons-total-discount,
#upsells-grid .font-mono { white-space: nowrap; word-break: normal; font-variant-numeric: tabular-nums; }
.text-3xl, .text-4xl { line-height: 1.2; }
.text-base { font-size: 1.1rem; }
.price-breakdown { font-size: 0.85rem; color: var(--muted); }

h2.text-gold {
    font-style: italic;
    text-shadow: 0 3px 18px rgba(2, 194, 255, 0.22);
    letter-spacing: 0.12em;
}
.checkout-progress {
    margin-bottom: 56px;
    padding: 0 6px;
}
.checkout-progress > .flex {
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   RESUMEN DEL PEDIDO (sidebar desktop / barra fija en responsive)

   PASE DE PULIDO v2:
     - ESTRUCTURA FLEX ROBUSTA: cada fila ahora es un flex con dos hijos
       (etiqueta a la izquierda, valor a la derecha). La etiqueta tiene
       flex:1 1 auto + min-width:0 para poder encogerse y envolver; el
       valor tiene flex:0 0 auto + white-space:nowrap para NO romperse ni
       desbordar la caja aunque el sidebar sea estrecho. Esto soluciona
       que "S/ 100.00" se saliera del borde derecho de su caja.
     - Padding interno de cada caja subido: 6px 14px → 9px 16px (más
       respiro lateral, un poco más de alto para que la etiqueta no
       quede pegada al borde superior/inferior).
     - Padding del contenedor sticky (sidebar) subido: 10px 14px →
       12px 18px en tablet y 8px 12px → 10px 16px en móvil, para que
       el texto no toque el borde de la pantalla.
     - Items de upsells y subtotal/cupones comparten la misma estructura,
       así todos se ven consistentes.
     - En responsive se aplana todo a una lista limpia sin cajitas
       (background transparent), pero con padding horizontal 5px 14px
       en tablet y 4px 12px en móvil — antes era 0 y el texto quedaba
       pegado al borde de la pantalla.
   -------------------------------------------------------------------------- */
#checkout-review-items,
#summary-upsells-items,
.sticky.top-24 > .border-t.pt-3.space-y-1,
.sticky.top-24 > .border-t.pt-3.flex.justify-between {
    padding-left: 0;
    padding-right: 0;
    border-top: 0 !important;
}
/* Cada fila del resumen es un flex con dos hijos: la etiqueta (izquierda)
   y el valor (derecha). La etiqueta puede crecer y envolver si el sidebar
   es estrecho; el valor mantiene su ancho y NO se rompe en dos líneas
   (white-space: nowrap). min-width:0 en los hijos es crítico para que
   flexbox les permita encogerse en vez de desbordar el contenedor. */
/* Items del resumen (tickets, upsells, líneas de subtotal/cupones):
   SIN background propio — se "funden" con el panel oscuro del sidebar.
   El efecto anterior de "rectángulo suave dentro de la caja" venía del
   rgba(255,255,255,0.05) y se veía mal, como si cada item fuera una
   sub-caja. La separación visual ahora viene solo del padding y del
   gap entre items. El TOTAL mantiene su fondo cyan (es el ancla
   visual del resumen) y se define en su propia regla más abajo. */
#checkout-review-items > div,
#summary-upsells-items > div,
.border-t.pt-3.space-y-1 > div,
#applied-coupons-items > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: nowrap;
    padding: 6px 0;
}
/* EXCEPCION: pp-summary-line-wrap es solo un CONTENEDOR (envuelve la
   fila label/precio + las sub-filas de cupones aplicados). NO es una
   fila del resumen en sí — la fila real es su inner div (que tiene
   'flex justify-between text-xs'). Si el wrap tomara este flex row,
   la sub-fila del cupón se iria al extremo derecho con space-between
   y desplazaría los precios hacia adentro (no quedarían pegados al
   borde derecho del sidebar). Por eso lo forzamos a block: el inner
   div ocupa todo el ancho y los precios se pegan al borde derecho
   como en las filas de medias. La sub-fila del cupón sigue debajo,
   dentro del wrap, sin participar del flex. */
#checkout-review-items > .pp-summary-line-wrap {
    display: block;
    padding: 0;
    gap: 0;
}
#checkout-review-items > div > *,
#summary-upsells-items > div > *,
.border-t.pt-3.space-y-1 > div > *,
.border-t.pt-3.flex.justify-between > *,
#applied-coupons-items > div > * {
    min-width: 0;
}
#checkout-review-items > div > *:first-child,
#summary-upsells-items > div > *:first-child,
.border-t.pt-3.space-y-1 > div > *:first-child,
.border-t.pt-3.flex.justify-between > *:first-child,
#applied-coupons-items > div > *:first-child {
    flex: 1 1 auto;
    word-break: normal;
    overflow-wrap: break-word;
}
#checkout-review-items > div > *:last-child,
#summary-upsells-items > div > *:last-child,
.border-t.pt-3.space-y-1 > div > *:last-child,
.border-t.pt-3.flex.justify-between > *:last-child,
#applied-coupons-items > div > *:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}
/* TOTAL: mantiene su fondo cyan destacado (es el ancla visual del
   resumen) y tiene padding-top generoso (24px) para que no se vea
   pegado al bloque de Subtotal/Upsells/Cupones. */
.border-t.pt-3.flex.justify-between {
    padding: 14px 0 0;
    background: transparent;
    border-radius: 0;
    margin-top: 10px;
    border-top: 0 !important;
}
/* Más aire entre el TOTAL y la línea del IGV — antes se veían muy pegados */
.sticky.top-24 > div.price-breakdown {
    padding-top: 14px !important;
    margin-top: 4px;
}
#checkout-review-items span,
#summary-upsells-items span,
#summary-subtotal, #summary-upsells, #summary-coupons,
#summary-total, #summary-igv, #summary-btn-total,
#summary-evento, #summary-fecha, #summary-turno {
    word-break: normal;
    overflow-wrap: break-word;
    min-width: 0;
}
#summary-subtotal, #summary-upsells, #summary-coupons,
#summary-total, #summary-igv, #summary-btn-total {
    white-space: nowrap;
    overflow-wrap: normal;
}
.sticky.top-24.border.p-5 {
    padding: 26px 22px !important;
}
.sticky.top-24.border.p-5 h3 {
    font-style: italic;
}
.sticky.top-24.border.p-5 > .text-xs p {
    line-height: 1.45;
    margin: 0;
}
.sticky.top-24.border.p-5 #summary-evento {
    color: var(--cyan);
    font-weight: 800;
    font-style: italic;
}
.sticky.top-24.border.p-5 #summary-fecha {
    color: #ffffff;
    font-weight: 700;
}
.sticky.top-24.border.p-5 #summary-turno {
    color: var(--muted);
}
.sticky.top-24.border.p-5 #checkout-review-items,
.sticky.top-24.border.p-5 #summary-upsells-items {
    border-top: 0 !important;
}
.sticky.top-24.border.p-5 > .border-t.pt-3 {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}
.sticky.top-24.border.p-5 > .border-t.pt-3:hover {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.sticky.top-24.border.p-5 > .border-t.pt-3 > div,
.sticky.top-24.border.p-5 > .border-t.pt-3 > div + div,
.sticky.top-24.border.p-5 #checkout-review-items > div,
.sticky.top-24.border.p-5 #summary-upsells-items > div {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.sticky.top-24.border.p-5 #summary-upsells-items::before {
    content: 'Extras';
    display: block;
    margin: 10px 0 4px;
    color: var(--cyan);
    font-family: 'Museum', 'Syne', sans-serif;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#applied-coupons-list {
    padding: 10px 18px 4px 18px;
}
    #applied-coupons-items > div {
    padding: 8px 0;
    flex-wrap: wrap;
    gap: 6px 12px;
}
#applied-coupons-items > div:hover {
    background: rgba(121, 39, 205, 0.15);
}

/* ==========================================================================
   B.5 RESPONSIVE (misma estructura y breakpoints — solo se ajustan tamaños)
   ========================================================================== */
@media (min-width: 1281px) {
    .max-w-\[1600px\] { width: 100%; max-width: 1600px; }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .max-w-\[1600px\] { width: 90%; max-width: 90%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .max-w-\[1600px\] { width: 95%; max-width: 95%; }
}

@media (min-width: 1024px) {
    .lg\:col-span-8{grid-column:span 8}
    .lg\:col-span-4{grid-column:span 4}
    .lg\:px-5{padding-left:20px;padding-right:20px}
    .lg\:py-8{padding-top:32px;padding-bottom:32px}
    /* Margen inferior extra en escritorio para que el checkout no quede
       pegado al pie de página. En responsive esto queda como está. */
    .max-w-\[1600px\].py-6 { padding-bottom: 100px; }
    .max-w-\[1600px\].lg\:py-8 { padding-bottom: 120px; }
}

@media (max-width: 1024px) {
    .paradox-checkout-titlewrap-inner {
        flex-wrap: nowrap;
        align-items: center;
    }
    .paradox-checkout-titlewrap {
        height: 220px;
        margin-bottom: 0;
    }
    .paradox-checkout-title { font-size: 38px; line-height: 44px; }
    .paradox-checkout-subtitle { font-size: 20px; line-height: 30px; margin-bottom: 4px; }
    .paradox-checkout-titlewrap-art {
        height: 220px !important;
        max-width: 280px !important;
        max-height: 220px !important;
        object-fit: contain;
        object-position: left bottom;  /* en tablet la imagen sigue a la IZQUIERDA */
        pointer-events: none;
        user-select: none;
        margin: 0;
    }
    .paradox-checkout-titlewrap-text {
        flex: 0 1 auto;
        align-self: center;
        justify-content: center;
        transform: none;
        padding-left: 0;
        padding-right: 0;
        position: relative;
        z-index: 2;
    }

    .max-w-\[1600px\] { width: 95%; max-width: 95%; margin: 0 auto; }

    body {
        background-image:
            url('/wp-content/uploads/2026/07/Group-1000004773-2-scaled.png') !important;
        background-repeat: repeat-y !important;
        background-size: 100% auto !important;
    }

    h1.text-3xl, h1.text-4xl { font-size: 40px; }
    .paradox-checkout-titlewrap-inner p { font-size: 18px; }

    .border-\[\#1e1e1e\], .border-gold { padding: 14px !important; border-radius: 15px; }
    .checkout-progress { margin-bottom: 42px; padding: 0 2px; }
    .input-box { height: 46px; padding: 0 13px !important; font-size: .84rem !important; border-radius: 11px; }
    .btn-cta { padding: 10px 15px; font-size: .7rem; border-radius: 9px; }
    label:has(#buyer-attends) { padding: 9px 12px; font-size: .72rem !important; }
    #buyer-attends { width: 17px; height: 17px; }
    .accordion-header { padding: 12px 14px; font-size: .76rem; }
    .accordion-body { padding: 14px; }
    .accordion-icon { font-size: 1rem; }
    .grid.sm\:grid-cols-2 { grid-template-columns: 1fr 1fr; gap: 9px; }
    #upsells-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    #upsells-grid > div { padding: 13px !important; gap: 6px; border-radius: 13px; }
    #upsells-grid > div > p:first-child { font-size: .78rem !important; }
    #upsells-grid > div > p:nth-child(2) { font-size: .68rem !important; }
    #upsells-grid .text-sm { font-size: .82rem; }
    button.w-6.h-6 { width: 24px; height: 24px; font-size: .72rem; }
    #payment-methods-list > div { margin-bottom: 8px; }
    #payment-methods-list > div.border-\[\#1e1e1e\] { padding: 11px 13px !important; }
    #payment-methods-list > div span { font-size: .76rem; padding-left: 24px; }
    #payment-methods-list > div span::before { width: 15px; height: 15px; left: -27px; }
    .btn-cta-solid { padding: 15px; font-size: .86rem; border-radius: 14px; margin-top: 16px; }

    /* Upsell cards (medias antideslizantes) en tablet */
    .upsell-card { padding: 8px 8px 10px; gap: 4px; border-radius: 12px; }
    .upsell-foto-wrap { border-radius: 8px; }
    .upsell-name { font-size: 10px; }
    .upsell-price { font-size: 11px; }
    .upsell-qty-btn { width: 22px; height: 22px; font-size: 12px; }
    .upsell-qty { font-size: 12px; min-width: 16px; }
    .skip-upsell-btn { padding: 10px 14px; font-size: 0.72rem; }

    /* Lightbox en tablet */
    .pp-lightbox-card { max-width: 340px; }
    .pp-lightbox-image { height: 120px; }
    .pp-lightbox-body { padding: 14px 16px 4px; }
    .pp-lightbox-title { font-size: 0.85rem; }
    .pp-lightbox-text { font-size: 0.76rem; }
    .pp-lightbox-actions { padding: 12px 16px 16px; }
    .pp-lightbox-btn { height: 40px; font-size: 0.76rem; }

    .grid.lg\:grid-cols-12 { display: block; }
    .lg\:col-span-8 {
        width: 100%;
        padding-bottom: 160px;
    }

    .lg\:col-span-4 {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        width: 100% !important;
        padding: 0 !important;
    }
    .lg\:col-span-4 .sticky.top-24 {
        border-radius: 16px 16px 0 0 !important;
        border-bottom: none !important;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.6);
        background: rgba(10,5,15,0.95) !important;
        width: 100%;
        margin: 0;
        padding: 12px 18px !important;  /* más padding lateral para que el texto no toque el borde de la pantalla */
    }

    /* Cuando el resumen está VISIBLE (no oculto): se limita la altura a un
       tope del viewport para que el contenedor NUNCA quede cortado arriba
       (antes max-height:none dejaba la parte superior fuera de pantalla
       cuando había muchos ítems). El contenido sobrante se desplaza con
       scroll interno, con padding inferior extra para que el FAB del
       handle no tape la última fila (Total / IGV). */
    .lg\:col-span-4:not(.is-summary-hidden) .sticky.top-24 {
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 64px !important;
    }

    .lg\:col-span-4 h3.text-sm { font-size: 0.62rem !important; margin-bottom: 1px; }
    .lg\:col-span-4 .space-y-4 > * + * { margin-top: 3px !important; }
    .lg\:col-span-4 .space-y-1 > * + * { margin-top: 1px !important; }
    .lg\:col-span-4 .text-xs { font-size: 0.58rem !important; }
    .lg\:col-span-4 #summary-evento,
    .lg\:col-span-4 #summary-fecha,
    .lg\:col-span-4 #summary-turno { display: none; }
    .lg\:col-span-4 .text-base { font-size: 0.85rem !important; }
    .lg\:col-span-4 .price-breakdown { font-size: 0.55rem !important; }

    /* Consolidación del resumen: una sola caja grande que contiene todo,
       sin recuadros pequeños internos ni líneas separadoras intermedias.
       En desktop cada fila tiene su propio fondo, pero en responsive eso
       se ve desajustado y amontonado — aquí todo se renderiza como una
       lista limpia dentro del contenedor único. */
    .lg\:col-span-4 #checkout-review-items,
    .lg\:col-span-4 #summary-upsells-items,
    .lg\:col-span-4 .border-t.pt-3,
    .lg\:col-span-4 #applied-coupons-list {
        background: transparent !important;
        border-top: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
    }
    .lg\:col-span-4 #checkout-review-items > div,
    .lg\:col-span-4 #summary-upsells-items > div,
    .lg\:col-span-4 .border-t.pt-3.space-y-1 > div,
    .lg\:col-span-4 .border-t.pt-3.flex.justify-between,
    .lg\:col-span-4 #applied-coupons-items > div {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 5px 14px !important;  /* padding horizontal agregado — antes era 0 */
        margin: 0 !important;
        box-shadow: none !important;
        gap: 10px;
    }
    .lg\:col-span-4 #checkout-review-items { font-size: 0.6rem; }
    /* Subrayado muy sutil entre filas (no es un recuadro, solo una línea
       tenue) para que el ojo pueda separar subtotal/upsells/cupones sin
       que parezca otra caja. */
    .lg\:col-span-4 .border-t.pt-3.space-y-1 > div + div,
    .lg\:col-span-4 #checkout-review-items > div + div,
    .lg\:col-span-4 #summary-upsells-items > div + div {
        border-top: 1px dashed rgba(255,255,255,0.10);
        margin-top: 2px !important;
        padding-top: 4px !important;
    }
}

@media (max-width: 767px) {
    /* Móvil: cabecera 260px. La imagen se vuelve POSICIÓN ABSOLUTA en
       el borde inferior derecho para que los textos no se vean
       aplastados por culpa del poco espacio. La imagen conserva su
       altura de escritorio (220px) y se aplica un espejo horizontal
       para que mire hacia el otro lado. Texto: 20px margen izquierdo,
       title 30/36 y subtitle 18/24, ambos pegados a la izquierda. */
    .paradox-checkout-titlewrap-inner {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }
    .paradox-checkout-titlewrap {
        height: 170px;
        margin-bottom: 0;
        position: relative;                  /* necesario para el absolute del arte */
    }
    .paradox-checkout-title { font-size: 30px; line-height: 36px; text-align: left; }
    .paradox-checkout-subtitle { font-size: 18px; line-height: 24px; margin-bottom: 4px; text-align: left; }
    .paradox-checkout-titlewrap-art {
        position: absolute;                  /* se sale del flujo flex: el texto respira */
        right: 0;
        bottom: 0;
        height: 140px !important;              /* MISMA altura que en escritorio/tablet */
        max-width: 220px !important;          /* ancho tope = espacio reservado para la imagen */
        max-height: 140px !important;
        object-fit: contain;
        object-position: right bottom;
        transform: scaleX(-1);                /* espejo horizontal */
        pointer-events: none;
        user-select: none;
        margin: 0;
        z-index: 1;
    }
    .paradox-checkout-titlewrap-text {
        flex: 0 1 auto;
        min-width: 0;
        align-self: center;
        justify-content: center;
        transform: none;
        padding: 0 0 0 20px !important;       /* pegado a la izquierda con 20px de margen */
        text-align: left;
        position: relative;
        z-index: 2;
    }

    h1.text-3xl, h1.text-4xl { font-size: 27px; }
    .paradox-checkout-titlewrap-inner p { font-size: 14px; }
    .grid.sm\:grid-cols-2 { grid-template-columns: 1fr; gap: 8px; }
    .checkout-progress { margin-bottom: 28px; }
    #upsells-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
    #upsells-grid > div { padding: 6px !important; border-radius: 10px; gap: 3px; }
    #upsells-grid > div > p:first-child { font-size: 9px !important; line-height: 1.15; }
    #upsells-grid > div > p:nth-child(2) { font-size: 10px !important; }
    .upsell-card { padding: 6px 6px 8px; }
    .upsell-foto-wrap { border-radius: 6px; margin-bottom: 2px; }
    .upsell-name { font-size: 9px; letter-spacing: 0.02em; }
    .upsell-price { font-size: 10px; }
    .upsell-qty-btn { width: 18px; height: 18px; font-size: 10px; }
    .upsell-qty { font-size: 11px; min-width: 14px; }
    .skip-upsell-btn { padding: 8px 10px; font-size: 0.66rem; margin-top: 10px; }

    /* Lightbox en móvil */
    .pp-lightbox { padding: 10px; }
    .pp-lightbox-card { max-width: 320px; border-radius: 14px; }
    .pp-lightbox-image { height: 100px; }
    .pp-lightbox-body { padding: 12px 14px 2px; }
    .pp-lightbox-title { font-size: 0.78rem; margin-bottom: 6px; }
    .pp-lightbox-text { font-size: 0.7rem; margin-bottom: 8px; }
    .pp-lightbox-text--small { font-size: 0.62rem; margin-bottom: 10px; }
    .pp-lightbox-checkbox { padding: 8px 10px; font-size: 0.7rem; gap: 8px; }
    .pp-lightbox-checkbox input[type="checkbox"] { width: 16px; height: 16px; }
    .pp-lightbox-actions { padding: 10px 14px 14px; gap: 8px; }
    .pp-lightbox-btn { height: 38px; font-size: 0.7rem; }
    .btn-cta-solid { font-size: 0.76rem; padding: 12px; border-radius: 12px; }

    .grid.sm\:grid-cols-2,
    .accordion-body .grid.grid-cols-1.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    .sm\:col-span-2 { grid-column: span 1 !important; }
    .input-box { height: 40px; font-size: 0.78rem !important; padding: 0 10px !important; border-radius: 9px; }
    .border-\[\#1e1e1e\], .border-gold { padding: 11px !important; border-radius: 13px; }
    .space-y-6 > * + * { margin-top: 14px; }
    .accordion-header { padding: 10px 11px; font-size: .68rem; }
    .accordion-body { padding: 11px; }
    .accordion-body .grid.grid-cols-1.sm\:grid-cols-2 { gap: 8px; }
    .text-xs { font-size: .72rem; }
    .btn-cta { padding: 9px 12px; font-size: .64rem; }
    button.w-6.h-6 { width: 22px; height: 22px; font-size: .66rem; }
    #payment-methods-list > div { margin-bottom: 7px; }
    #payment-methods-list > div.border-\[\#1e1e1e\] { padding: 9px 11px !important; }
    #payment-methods-list > div span { font-size: .68rem; padding-left: 22px; letter-spacing: .06em; }
    #payment-methods-list > div span::before { width: 14px; height: 14px; left: -24px; border-width: 1px; }

    body {
        background-image:
            linear-gradient(160deg,
                rgba(121, 39, 205, 0.35) 0%,
                rgba(80, 26, 140, 0.18) 30%,
                rgba(40, 15, 70, 0.25) 60%,
                rgba(20, 8, 35, 0.35) 85%,
                #000000 100%
            ) !important;
        background-size: 100% 100% !important;
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        min-height: 100%;
    }
    html {
        background: #000000;
        min-height: 100%;
    }

    .border-\[\#1e1e1e\] h2.text-sm,
    .border-gold h2.text-sm { font-size: 0.8rem !important; }

    .border-\[\#1e1e1e\] p.text-\[0\.6rem\],
    .border-gold p.text-\[0\.6rem\] { font-size: 0.68rem !important; }

    #summary-btn-total, .btn-cta-solid { white-space: nowrap; }

    label:has(#buyer-attends) {
        font-size: 0.68rem !important;
        padding: 9px 12px;
    }

    #btn-place-order {
        margin-top: 16px;
    }
    .border-gold #payment-methods-list {
        margin-bottom: 16px !important;
    }

    /* Resumen de compra en móvil: mismo tope de altura que tablet pero más
       ajustado, y tamaños de letra un poco más chicos aún para que quepa
       todo sin apretar el resto del checkout. La consolidación a una sola
       caja grande (sin recuadros internos) se hereda del bloque de tablet;
       aquí solo afinamos tipografía y padding. */
    .lg\:col-span-4 .sticky.top-24 {
        max-height: 32vh;
        padding: 9px 14px !important;
    }
    .lg\:col-span-4 h3.text-sm { font-size: 0.58rem !important; }
    .lg\:col-span-4 .text-xs { font-size: 0.52rem !important; }
    .lg\:col-span-4 .text-base { font-size: 0.74rem !important; }
    .lg\:col-span-4 .price-breakdown { font-size: 0.48rem !important; }
    .lg\:col-span-4 #checkout-review-items,
    .lg\:col-span-4 #summary-upsells-items { font-size: 0.52rem; }
    .lg\:col-span-4 #checkout-review-items > div,
    .lg\:col-span-4 #summary-upsells-items > div,
    .lg\:col-span-4 .border-t.pt-3.space-y-1 > div,
    .lg\:col-span-4 .border-t.pt-3.flex.justify-between,
    .lg\:col-span-4 #applied-coupons-items > div {
        padding: 4px 12px !important;  /* padding horizontal agregado para que el texto no se pegue al borde de la pantalla */
        gap: 8px;
    }
}

/* ==========================================================================
   B.8.1 HANDLE FLOTANTE DEL RESUMEN (ocultar/mostrar resumen)
   --------------------------------------------------------------------------
   El sidebar del resumen mantiene su layout, dimensiones y posición
   exactos. NO se modifica su max-height, padding ni border-radius.

   El handle es un botón flotante compacto (FAB) anclado a la esquina
   inferior izquierda del viewport, ENCIMA del sidebar. Al tocarlo:

   - Estado expandido (default): el sidebar se desliza fuera de vista
     (transform: translateY(100%)); el handle queda visible solo.
   - Estado colapsado: el sidebar vuelve a su posición original
     (transform: translateY(0)).

   El sidebar NUNCA cambia de tamaño ni de posición cuando está
   expandido — solo se desliza como una unidad completa.
   ========================================================================== */
@media (max-width: 1024px) {
    /* El sidebar en estado oculto: se desliza fuera de vista sin perder
       sus dimensiones ni posición original. */
    .lg\:col-span-4 {
        transition: transform 0.32s cubic-bezier(.4,0,.2,1);
        will-change: transform;
    }
    .lg\:col-span-4.is-summary-hidden {
        transform: translateY(100%);
    }
    /* El espacio del lg:col-span-8 (la columna izquierda) no debe tener
       padding-bottom cuando el sidebar está oculto. */
    body.summary-hidden .lg\:col-span-8 {
        padding-bottom: 0 !important;
    }

    /* El handle: FAB compacto en la esquina inferior izquierda. */
    .pp-summary-handle {
        position: fixed;
        bottom: 16px;
        left: 16px;
        z-index: 60;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 14px;
        background: linear-gradient(135deg, #7927CD 0%, #3D1467 100%);
        border: 1px solid rgba(226, 209, 255, 0.30);
        border-radius: 24px;
        color: #ffffff;
        font-family: 'Inter', Arial, sans-serif;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.32s cubic-bezier(.4,0,.2,1);
    }
    .pp-summary-handle:active { transform: scale(0.96); }
    .pp-summary-handle-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255,255,255,0.16);
        transition: transform 0.32s cubic-bezier(.4,0,.2,1);
    }
    .pp-summary-handle-arrow svg { width: 11px; height: 11px; }
    .pp-summary-handle-arrow svg path { stroke: #ffffff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    /* El SVG base apunta hacia ABAJO (chevron-down).
       - Sidebar visible (no hidden): flecha hacia ABAJO → "ocultar resumen".
       - Sidebar oculto (is-summary-hidden): flecha hacia ARRIBA → "mostrar". */
    .pp-summary-handle.is-summary-hidden .pp-summary-handle-arrow { transform: rotate(180deg); }
    /* Cambia el label según el estado */
    .pp-summary-handle-label-collapsed { display: none; }
    .pp-summary-handle.is-summary-hidden .pp-summary-handle-label-expanded { display: none; }
    .pp-summary-handle.is-summary-hidden .pp-summary-handle-label-collapsed { display: inline; }
}

@media (max-width: 767px) {
    .pp-summary-handle {
        bottom: 12px;
        left: 12px;
        height: 36px;
        padding: 0 12px;
        font-size: 10px;
        gap: 6px;
    }
    .pp-summary-handle-arrow { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   B.9 AVANCE POR PASOS (Datos → Pago → Confirmación)
   Adaptado al diseño Paradox: morado (#7927CD) para pasos completados y
   naranja (#FF7700) con halo para el paso activo. Va debajo de la cabecera
   con margen inferior amplio para separarlo del contenido.
   -------------------------------------------------------------------------- */
.paradox-progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 720px;             /* ancho limitado en escritorio para acercar los círculos */
    margin: 40px auto 56px;       /* MISMA posición que thank-you (40 arriba, 56 abajo) */
    position: relative;
    font-family: 'Inter', sans-serif;
}

/* La línea de fondo. Empieza y termina en el CENTRO del primer y último
   círculo (no de borde a borde del contenedor). Offset = mitad del
   círculo (56/2 = 28 en escritorio). */
.paradox-progress-container::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    height: 4px;
    background-color: rgba(121, 39, 205, 0.28);
    z-index: 1;
    border-radius: 2px;
}

/* El contenedor de cada paso individual */
.paradox-progress-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

/* El círculo con el número — más grande (56px escritorio, 44px móvil) */
.paradox-progress-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(121, 39, 205, 0.22);
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    transition: all 0.3s ease;
    border: 3px solid rgba(121, 39, 205, 0.55);
}

/* El texto debajo del círculo */
.paradox-progress-label {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(200, 178, 255, 0.85);
}

/* Estado Completado — morado FUERTE */
.paradox-progress-step.completed .paradox-progress-circle {
    background-color: #7927CD;
    color: #ffffff;
    border-color: #7927CD;
    box-shadow: 0 0 0 4px rgba(121, 39, 205, 0.30);
}
.paradox-progress-step.completed .paradox-progress-label {
    color: #c8a8ff;
}

/* Línea morada que conecta un paso completado con el siguiente */
.paradox-progress-step.completed::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 50%;
    width: 100%;
    height: 4px;
    background-color: #7927CD;
    z-index: -1;
    border-radius: 2px;
}

/* Estado Activo — naranja con halo */
.paradox-progress-step.active .paradox-progress-circle {
    background-color: #FF7700;
    color: #ffffff;
    border-color: #FF7700;
    box-shadow: 0 0 0 6px rgba(255, 119, 0, 0.30);
}
.paradox-progress-step.active .paradox-progress-label {
    color: #ffffff;
}

/* Responsive del avance de pasos (móvil) */
@media (max-width: 767px) {
    .paradox-progress-container { margin: 28px 0 36px; max-width: 100%; }
    .paradox-progress-circle { width: 44px; height: 44px; font-size: 16px; border-width: 2px; }
    .paradox-progress-container::before,
    .paradox-progress-step.completed::after { top: 22px; }
    .paradox-progress-step.completed::after { left: calc(50% + 22px); width: calc(100% - 44px); }
    .paradox-progress-label { font-size: 12px; }
}


/* Consola de webhook (checkout) */
#webhook-terminal-console .log-dim { color: rgba(110,231,183,.55); }
#webhook-terminal-console .log-success { color: #34d399; font-weight: 700; }
#webhook-terminal-console .log-error { color: #f87171; font-weight: 700; }
/* ==========================================================================
   BLOCKS CHECKOUT DE WOOCOMMERCE (pantalla de pago del booking)
   El checkout por bloques de WC se renderiza dentro de .paradox-wc-flow:
   se le da el look oscuro de marca aprobado (fondo transparente sobre el
   tema, inputs oscuros, bordes sutiles).
   ========================================================================== */
.paradox-wc-flow .wc-block-checkout,
.paradox-wc-flow .wc-block-checkout__main,
.paradox-wc-flow .wc-block-checkout__sidebar {
    background: transparent !important;
    color: #fff !important;
}

.paradox-wc-flow .wc-block-checkout__main {
    padding: 0 !important;
}

.paradox-wc-flow .wc-block-components-text-input input,
.paradox-wc-flow .wc-block-components-text-input input:focus,
.paradox-wc-flow .wc-block-components-text-input input[type="email"],
.paradox-wc-flow .wc-block-components-text-input input[type="tel"],
.paradox-wc-flow .wc-block-components-text-input input[type="text"],
.paradox-wc-flow .wc-block-components-text-input select,
.paradox-wc-flow .wc-block-components-combobox input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-light, #2a2a2a) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

.paradox-wc-flow .wc-block-components-text-input label,
.paradox-wc-flow .wc-block-checkout__terms,
.paradox-wc-flow .wc-block-components-form .wc-block-components-checkbox__label,
.paradox-wc-flow .wc-block-components-totals-wrapper,
.paradox-wc-flow .wc-block-components-order-summary,
.paradox-wc-flow .wc-block-components-order-summary .wc-block-components-totals-item {
    color: #fff !important;
}

.paradox-wc-flow .wc-block-components-order-summary-item__description {
    color: #999 !important;
}

.paradox-wc-flow .wc-block-checkout__sidebar {
    border-left: 1px solid #1e1e1e !important;
}

.paradox-wc-flow .wc-block-components-totals-item__label,
.paradox-wc-flow .wc-block-components-order-summary__button-text {
    color: #bbb !important;
}

/* Avisos y estados del checkout blocks */
.paradox-wc-flow .wc-block-components-notice-banner {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}

/* ==========================================================================
   PASO DE PAGO (booking): los datos del titular y asistentes ya se
   capturaron en el checkout v4. Aquí solo se muestran el resumen del
   pedido y los métodos de pago (diseño aprobado).
   ========================================================================== */
/* ==========================================================================
   PASO 2: CHECKOUT FULL WIDTH Y 2 COLUMNAS AMPLIAS (RESPONSIVE)
   ========================================================================== */
.paradox-wc-flow {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 24px 60px !important;
    box-sizing: border-box !important;
}

.paradox-wc-flow .paradox-wc-flow-inner {
    max-width: 1440px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.paradox-wc-flow form.checkout {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* FIX MP H2 (inputs de billing invisibles para MP Custom Checkout):
   antes display:none !important — los inputs seguían en el DOM pero MP
   8.x no podía leerlos en setupFormConfiguration y emitía el error
   genérico "No checkout form found". Ahora los movemos fuera de
   pantalla: siguen siendo leíbles/escribibles por JS (WC y MP), pero
   son invisibles e inertes para el usuario. */
.paradox-wc-flow form.checkout #customer_details,
.paradox-wc-flow form.checkout .woocommerce-billing-fields,
.paradox-wc-flow form.checkout .woocommerce-shipping-fields,
.paradox-wc-flow form.checkout .woocommerce-account-fields,
.paradox-wc-flow form.checkout .woocommerce-additional-fields {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.paradox-wc-flow #order_review_heading {
    display: none !important;
}

/* Distribución en Grid: Pago a la Izquierda (1.4fr), TU PEDIDO a la Derecha (420px) */
.paradox-wc-flow #order_review,
.paradox-wc-flow .woocommerce-checkout-review-order {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 440px) !important;
    gap: 36px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Columna Izquierda: Formulario de Pago */
.paradox-wc-flow .woocommerce-checkout-payment,
.paradox-wc-flow #payment {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   PASO 1 — RESUMEN DEL PEDIDO (sidebar sticky, mismo approach que paso 2)
   ========================================================================== */
.paradox-summary-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    z-index: 20 !important;
}

/* Columna Derecha: TU PEDIDO (Sticky / Fijo al hacer scroll en desktop) */
.paradox-wc-flow .woocommerce-checkout-review-order-table {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    z-index: 20 !important;
}

/* ==========================================================================
   PASO 2 — CUPON FIJO: el descuento del booking NO se puede quitar
   manualmente. Solo el plugin BIN lo quita/regresa programaticamente.
   ========================================================================== */
.paradox-wc-flow .woocommerce-form-coupon,
.paradox-wc-flow .checkout_coupon,
.paradox-wc-flow form.checkout_coupon,
.paradox-wc-flow .woocommerce-form-coupon-toggle,
.paradox-wc-flow .checkout-coupon,
.paradox-wc-flow .woocommerce-remove-coupon,
.paradox-wc-flow .coupon,
.paradox-wc-flow .woocommerce-checkout-review-order-table .woocommerce-remove-coupon {
    display: none !important;
}

/* El total del order review del paso 2 SIEMPRE refleja el cupon del
   booking (se aplica como fee server-side en apply_coupon_fee). */
.paradox-wc-flow .woocommerce-checkout-review-order-table tfoot tr.fee th,
.paradox-wc-flow .woocommerce-checkout-review-order-table tfoot tr.fee td {
    color: #3fc070 !important;
    font-weight: 700 !important;
}

/* Resumen limpio (estilo Gabriel, sin bordes nativos de WC) — Paso 2 */
.paradox-wc-flow .woocommerce-checkout-review-order-table,
.paradox-wc-flow .woocommerce-checkout-review-order-table th,
.paradox-wc-flow .woocommerce-checkout-review-order-table td {
    border: 0 !important;
    background: transparent !important;
    padding: 12px 8px !important;
}
.paradox-wc-flow .woocommerce-checkout-review-order-table thead th {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    font-weight: 700 !important;
    color: var(--accent, #c8a84e) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.78rem !important;
}
.paradox-wc-flow .woocommerce-checkout-review-order-table tfoot tr:last-child th,
.paradox-wc-flow .woocommerce-checkout-review-order-table tfoot tr:last-child td {
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}
.paradox-wc-flow .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.paradox-wc-flow .woocommerce-checkout-review-order-table tfoot tr.order-total th {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}
.paradox-wc-flow .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    color: var(--accent, #c8a84e) !important;
    font-weight: 900 !important;
}

/* Responsive: Móviles y Tablets */
@media (max-width: 1080px) {
    .paradox-wc-flow {
        padding: 16px 12px 40px !important;
    }
    .paradox-wc-flow #order_review,
    .paradox-wc-flow .woocommerce-checkout-review-order {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .paradox-wc-flow .woocommerce-checkout-review-order-table {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
        top: auto !important;
    }
    .paradox-wc-flow .woocommerce-checkout-payment,
    .paradox-wc-flow #payment {
        grid-column: 1 !important;
        grid-row: 2 !important;
        padding: 16px !important;
    }
}



/* ==========================================================================
   NOTICES EN LA PANTALLA DE PAGO
   Los notices de WC (éxito "¡Listo, aceptamos tu pago!" y errores
   "Por favor, elige las opciones del producto...") NO deben aparecer
   en el paso 2:
   - El paso 1 (Datos) ya validó todo (titular, asistentes, fecha, opciones)
   - El notice de éxito es residual del plugin Mercado Pago
   - El notice de error es residual de validaciones que ya no aplican
   Se ocultan TODOS los notices del checkout clásico.
   ========================================================================== */
.paradox-wc-flow .paradox-wc-flow-inner > .woocommerce-message,
.paradox-wc-flow .paradox-wc-flow-inner > .woocommerce-error,
.paradox-wc-flow .paradox-wc-flow-inner > .woocommerce-info,
.paradox-wc-flow .paradox-wc-flow-inner > .woocommerce-notice,
.paradox-wc-flow .paradox-wc-flow-inner > .wc-block-components-notice-banner {
    display: none !important;
}

/* ERROR DE PAGO REAL (20-ago-2026): checkout.js inyecta el motivo del
   rechazo DENTRO de form.checkout .woocommerce-notices-wrapper cuando el
   pago falla (mecanismo nativo de WC). Ese mensaje SÍ debe verse para que
   el cliente sepa por qué no pudo pagar (reporte de Gabo/Adolfo).
   Los residuales server-side quedan ocultos con el bloque de arriba. */
.paradox-wc-flow form.checkout .woocommerce-notices-wrapper .woocommerce-error,
.paradox-wc-flow form.checkout .woocommerce-error {
    display: block !important;
}

.power-coupons-drawer-trigger-wrapper,
#power-coupons-view-coupons-btn {
    display: none !important;
}

/* ==========================================================================
   A.15 QUITAR ICONOS DE NOTICES WC (20-ago-2026, reporte Gabo)
   Elementor/el theme padre superponen un icono (svg o ::before) sobre el
   texto de los notices de WooCommerce ("No se han encontrado productos...",
   "Lo siento, tu sesión ha caducado..."). El HTML de WC no trae iconos:
   vienen del CSS. Se ocultan en TODAS las páginas.
   ========================================================================== */
.woocommerce-error > li::before,
.woocommerce-error > li::after,
.woocommerce-error > li > svg,
.woocommerce-error > li > i,
.woocommerce-error > li > img,
.woocommerce-error::before,
.woocommerce-notice::before,
.woocommerce-notice > svg,
.woocommerce-notice > i,
.woocommerce-notice > img,
.woocommerce-info::before,
.woocommerce-info > svg,
.woocommerce-info > i,
.woocommerce-info > img,
.woocommerce-message::before,
.woocommerce-message > svg,
.woocommerce-message > i,
.woocommerce-message > img,
.woocommerce-notices-wrapper::before,
.woocommerce-notices-wrapper > svg,
.woocommerce-notices-wrapper > i {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   A.16 CAMPO DE CUPONES DEL CHECKOUT NATIVO (20-ago-2026)
   El cupón del booking se aplica en el paso 1 (v4) y viaja aplicado en el
   carrito. El campo de cupón del checkout nativo se oculta para no invitar
   a un segundo cupón (el sistema queda habilitado para el apply del theme).
   ========================================================================== */
.paradox-wc-flow form.checkout .woocommerce-form-coupon-toggle,
.paradox-wc-flow form.checkout .coupon,
.paradox-wc-flow .woocommerce-form-coupon {
    display: none !important;
}

/* ==========================================================================
   A.17 RESPONSIVE — ORDER REVIEW DEL PASO 2 (21-ago-2026)
   La tabla del resumen nativo de WC se desbordaba lateralmente en móvil.
   ========================================================================== */
@media (max-width: 782px) {
    .paradox-wc-flow #order_review,
    .paradox-wc-flow .woocommerce-checkout-review-order,
    .paradox-wc-flow .woocommerce-checkout-review-order-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .paradox-wc-flow table.woocommerce-checkout-review-order-table {
        table-layout: fixed !important;
        width: 100% !important;
        word-break: break-word !important;
    }
    .paradox-wc-flow table.woocommerce-checkout-review-order-table th,
    .paradox-wc-flow table.woocommerce-checkout-review-order-table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    .paradox-wc-flow table.woocommerce-checkout-review-order-table .product-total,
    .paradox-wc-flow table.woocommerce-checkout-review-order-table .product-total .woocommerce-Price-amount,
    .paradox-wc-flow table.woocommerce-checkout-review-order-table td {
        white-space: normal !important;
    }
    .paradox-wc-flow table.woocommerce-checkout-review-order-table .product-total {
        text-align: right !important;
    }
}

        font-size: 0.68rem;
        padding: 10px 6px 6px;
    }
    table.shop_table.woocommerce-checkout-review-order-table .pp-line-detail {
        font-size: 0.65rem;
    }
}
/* ==========================================================================
   CUPÓN APLICADO (sección 01) — responsive mobile-first
   Mobile (default): apilado vertical (código/tipo arriba, monto abajo,
   × a la derecha). Desktop (≥sm): una sola línea con todo en row.
   ========================================================================== */
.pp-coupon-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(226, 209, 255, 0.26);
    border-left: 3px solid #02C2FF;
    border-radius: 10px;
    padding: 10px 12px;
}
.pp-coupon-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.pp-coupon-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.pp-coupon-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-coupon-code {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #02C2FF;
    font-size: 0.85rem;
    word-break: break-word;
}
.pp-coupon-type {
    font-size: 0.7rem;
    color: #8a8491;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pp-coupon-value {
    color: #3fc070;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    align-self: flex-end;
    white-space: nowrap;
}
.pp-coupon-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .pp-coupon-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .pp-coupon-value {
        align-self: center;
    }
}

/* ==========================================================================
   RESUMEN LATERAL (Paso 1) — fila Cupón limpia
   Solo "Cupón [CODE] -S/X" en la línea principal, y el tipo en sub-row.
   ========================================================================== */
.pp-coupon-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--muted);
    opacity: 0.85;
    padding-top: 2px;
    flex-wrap: wrap;
    gap: 4px;
}
.pp-coupon-detail-type {
    font-weight: 600;
}
.pp-coupon-detail-code {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   MÚLTIPLES CUPONES — lista de cupones en el resumen
   Cada cupón tiene su propia línea principal (código + monto) + sub-row
   (tipo + valor) con la clase .pp-coupon-detail (ya definida arriba).
   ========================================================================== */
#summary-coupons-list .flex.justify-between {
    align-items: baseline;
}
#summary-coupons-list .text-green-500 {
    font-weight: 600;
}
#summary-coupons-list .font-mono {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Crédito a favor del cliente (store_credit > total) */
#summary-coupon-credit {
    padding: 4px 0;
    border-top: 1px dashed rgba(2, 194, 255, 0.3);
    margin-top: 4px;
}