/* Importación de Titillium Web desde Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');
        
        :root {
            --brand-color: #00a8a8; /* Cian corporativo */
            --brand-hover: #008f8f;
            --brand-light: #e6f6f6;
        }

        body {
            font-family: 'Titillium Web', sans-serif;
            /* Aplicación del degradado solicitado a toda la experiencia */
            background: linear-gradient(135deg, #0f172a 0%, #00a8a8 100%);
            background-attachment: fixed;
            min-height: 100vh;
        }

        .step-transition {
            transition: all 0.4s ease-in-out;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #0f172a 0%, #00a8a8 100%);
        }

        .card-shadow {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
        }

        .pulse-animation {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }

        .loader {
            border-top-color: var(--brand-color);
            animation: spinner 1.5s linear infinite;
        }

        @keyframes spinner {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Utilidades de color */
        .bg-brand { background-color: var(--brand-color); }
        .text-brand { color: var(--brand-color); }
        .border-brand { border-color: var(--brand-color); }
        .hover-bg-brand:hover { background-color: var(--brand-hover); }
        .bg-brand-light { background-color: var(--brand-light); }

        .payment-option:hover {
            border-color: var(--brand-color);
            background-color: var(--brand-light);
        }

        .error-shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }

        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        /* Checkbox personalizado */
        .custom-checkbox:checked + .checkbox-box {
            background-color: var(--brand-color);
            border-color: var(--brand-color);
        }
        .custom-checkbox:checked + .checkbox-box i {
            opacity: 1 !important;
            transform: scale(1) !important;
        }