/* 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;
            background-color: #F8FAFB;
            min-height: 100vh;
        }

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

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

        .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); }
        }

        .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); }

        .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); }
        }

        .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;
        }

        .landing-card {
            transition: transform 0.3s ease;
        }
        .landing-card:hover {
            transform: translateY(-5px);
        }