body {
            font-family: 'Inter', sans-serif;
        }

        /* ============================================================
           Clearance del navbar fijo para /carrito y /checkout.
           El header en esos contextos es SOLO el top bar (h-16 md:h-20
           = 4rem / 5rem). El padding-top deja el navbar + un aire que
           sigue el ritmo vertical de las tarjetas (~2rem mobile / 3rem
           desktop), evitando el hueco enorme del viejo pt-44 (11rem).
           CSS crudo a propósito: las clases md:pt-24/32 no están en el
           Tailwind compilado (purgadas) y no se hace build en esta rama.
           ============================================================ */
        .page-nav-clear {
            padding-top: 6rem;                 /* navbar 4rem + 2rem de aire */
        }
        @media (min-width: 768px) {
            .page-nav-clear {
                padding-top: 8rem;             /* navbar 5rem + 3rem de aire */
            }
        }

        /* ============================================================
           Banner de suscripciones (cart-ui-page.js) — distancia inferior.
           En mobile el `mb-5` (1.25rem) deja demasiado aire sobre la lista
           de compras; lo apretamos a 0.75rem. Desktop conserva `mb-5`.
           CSS crudo: `md:mb-5` no esta en tw-compiled (purgada), no se hace
           build. Carga despues de tw-compiled, asi gana por orden.
           ============================================================ */
        @media (max-width: 767px) {
            .cart-sub-banner { margin-bottom: 0.75rem; }
        }

        .hero-gradient {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Stepper line gradient */
        .step-line {
            background: linear-gradient(90deg, #3b82f6 var(--progress), #e2e8f0 var(--progress));
        }

        .dark .step-line {
            background: linear-gradient(90deg, #3b82f6 var(--progress), #334155 var(--progress));
        }

        @keyframes pulseGlow {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
            }

            50% {
                box-shadow: 0 0 20px 4px rgba(59, 130, 246, 0.2);
            }
        }

        /* ── Cart add-to-cart animations ─────────────────────────────── */

        /* Ripple ring that emanates from the cart icon (circular, organic) */
        .cart-btn-ripple {
            position: relative;
        }

        .cart-btn-ripple::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2.5px solid #3b82f6;
            animation: ripplePulse 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            pointer-events: none;
        }

        @keyframes ripplePulse {
            0%   { transform: scale(0.85); opacity: 1; }
            60%  { transform: scale(1.35); opacity: 0.4; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        /* Cart SVG icon color flash on add */
        .cart-icon-flash svg {
            animation: iconColorFlash 0.6s ease-out;
        }

        @keyframes iconColorFlash {
            0%   { color: #3b82f6; transform: scale(1.2); }
            100% { color: inherit; transform: scale(1); }
        }

        /* Badge count bounces when incremented */
        .cart-badge-pop {
            animation: badgePop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        @keyframes badgePop {
            0%   { transform: scale(1); }
            35%  { transform: scale(1.55); }
            100% { transform: scale(1); }
        }

        /* Badge shake for emphasis */
        .cart-badge-shake {
            animation: badgeShake 0.5s ease-out;
        }

        @keyframes badgeShake {
            0%, 100% { transform: translateX(0); }
            15% { transform: translateX(-4px); }
            30% { transform: translateX(4px); }
            45% { transform: translateX(-3px); }
            60% { transform: translateX(3px); }
            75% { transform: translateX(-1px); }
        }

        /* ── Mobile Floating Toast Notification ──────────────────────── */
        .cart-add-toast {
            position: fixed;
            /* Debajo del overlay (z-90) y el drawer (z-100) del carrito: al abrir
               el drawer, el aviso "Producto agregado" queda tapado bajo el backdrop
               en vez de flotar por encima. En uso normal sigue arriba del contenido
               de pagina (nada usa z>=80 salvo las capas del carrito). */
            z-index: 80;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            white-space: normal;
            text-align: center;
            width: max-content;
            max-width: calc(100vw - 2rem);
            border-radius: 1rem;
            padding: 0.75rem 1.25rem;
            font-size: 0.8125rem;
            font-weight: 500;
            line-height: 1.4;
            color: #1e293b;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
            pointer-events: none;
            opacity: 0;
            /* Default bottom positioning above standard nav (4.5rem) */
            bottom: calc(4.5rem + 0.75rem + env(safe-area-inset-bottom));
        }

        /* When the mobile purchase bar is present (taller bar) */
        .cart-add-toast.cart-toast-purchase-bar {
            bottom: calc(9rem + 0.75rem + env(safe-area-inset-bottom));
        }

        /* Dark mode overrides */
        .dark .cart-add-toast {
            color: #e2e8f0;
            background: #1e293b;
            border-color: #334155;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.20);
        }

        /* Enter animation: slide UP + fade in */
        .cart-add-toast-enter {
            animation: toastSlideUpMobile 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        }

        /* Leave animation: fade out + slide down */
        .cart-add-toast-leave {
            animation: toastFadeOutMobile 0.25s ease-in forwards;
        }

        @keyframes toastSlideUpMobile {
            from { opacity: 0; transform: translateX(-50%) translateY(20px); }
            to   { opacity: 1; transform: translateX(-50%) translateY(0); }
        }

        @keyframes toastFadeOutMobile {
            from { opacity: 1; transform: translateX(-50%) translateY(0); }
            to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
        }

        /* ── Desktop: posición calculada por JS (anclada en centro de #cart-btn).
              El toast se despliega hacia abajo desde el icono del carrito. ── */
        @media (min-width: 768px) {
            .cart-add-toast {
                left: auto;
                bottom: auto;
                transform-origin: top center;
                transform: scaleY(0) translateY(0);
                text-align: left;
                max-width: 22rem;
            }
            .cart-add-toast.cart-toast-purchase-bar {
                bottom: auto;
            }
            .cart-add-toast-enter {
                animation: toastUnfoldDesktop 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
            }
            .cart-add-toast-leave {
                animation: toastFadeOutDesktop 0.22s ease-in forwards;
            }
            @keyframes toastUnfoldDesktop {
                from { opacity: 0; transform: scaleY(0) translateY(0px); }
                to   { opacity: 1; transform: scaleY(1) translateY(var(--toast-drop, 20px)); }
            }
            @keyframes toastFadeOutDesktop {
                from { opacity: 1; }
                to   { opacity: 0; }
            }
        }


        /* Animacion de entrada para tarjetas del carrito */
        #full-cart-items > .space-y-3 > div {
            animation: cartItemIn 0.35s ease-out both;
        }

        #full-cart-items > .space-y-3 > div:nth-child(1) { animation-delay: 0.05s; }
        #full-cart-items > .space-y-3 > div:nth-child(2) { animation-delay: 0.1s; }
        #full-cart-items > .space-y-3 > div:nth-child(3) { animation-delay: 0.15s; }
        #full-cart-items > .space-y-3 > div:nth-child(4) { animation-delay: 0.2s; }
        #full-cart-items > .space-y-3 > div:nth-child(5) { animation-delay: 0.25s; }

        @keyframes cartItemIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Focus mejorado para inputs de email */
        .activation-email-input:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
        }

        .dark .activation-email-input:focus {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
        }

        /* ============================================================
           Highlight de redireccion desde el drawer (?completar=...).
           Pulso ambar luminoso que ilumina el campo/tarjeta pendiente
           para que el usuario entienda POR QUE volvio al carrito.
           ============================================================ */
        .cart-attn-pulse {
            /* deja aire bajo el navbar fijo al hacer scrollIntoView */
            scroll-margin-top: 7rem;
            border-radius: 0.85rem;
            animation: cartAttnPulse 1.3s ease-out 2;
        }

        @keyframes cartAttnPulse {
            0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
            18%  { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.45); }
            100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
        }

        .dark .cart-attn-pulse {
            animation-name: cartAttnPulseDark;
        }

        @keyframes cartAttnPulseDark {
            0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
            18%  { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.55); }
            100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
        }

        /* Pulso POSITIVO al agregar/sumar un item. Feedback inline para
           /carrito, donde el navbar es funnel y no hay icono de carrito al que
           volar (el fly-to-cart no aplica). Azul de marca, NO ambar (que es
           aviso de algo pendiente). */
        .cart-card-added {
            border-radius: 0.85rem;
            animation: cartCardAdded 1.1s ease-out 1;
        }

        @keyframes cartCardAdded {
            0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.0); }
            20%  { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.40); }
            100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.0); }
        }

        .dark .cart-card-added {
            animation-name: cartCardAddedDark;
        }

        @keyframes cartCardAddedDark {
            0%   { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.0); }
            20%  { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.50); }
            100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.0); }
        }

        /* Entrada suave del banner de redireccion */
        .cart-completar-banner {
            animation: completarBannerIn 0.32s ease-out both;
        }

        @keyframes completarBannerIn {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: reduce) {
            .cart-attn-pulse,
            .cart-card-added,
            .cart-completar-banner {
                animation: none;
            }
        }