/* MÁSCARA CUADRADA DIFUMINADA (SIN EFECTO VIÑETA REDONDO) */
        .hero-image-container {
            /* Degradado transparente en los 4 bordes usando composición de máscaras */
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                                linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                        linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
            
            /* Esto hace que solo se muestre donde ambos degradados son negros (el centro) */
            -webkit-mask-composite: source-in;
            mask-composite: intersect;
        }

        .hero-image-container::after {
            content: '';
            position: absolute;
            left: -5%;
            right: -5%;
            bottom: 0;
            height: 55%;
            pointer-events: none;
            border-radius: 50% 50% 0 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 1) 100%);
            z-index: 2;
            filter: blur(8px);
        }

        @media (prefers-color-scheme: dark) {
            .hero-image-container::after {
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 65%, rgba(0, 0, 0, 1) 100%);
            }
        }
        
        :root {
            --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
            --dur-fast: 180ms;
            --dur-base: 280ms;
            --dur-slow: 520ms;
        }

        body, div, nav, button, h1, h2, h3, p, i, section, a {
            transition:
                color var(--dur-base) var(--ease-soft),
                background-color var(--dur-base) var(--ease-soft),
                border-color var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-soft),
                opacity var(--dur-base) var(--ease-soft),
                filter var(--dur-base) var(--ease-soft);
        }
        .no-scrollbar::-webkit-scrollbar { display: none; }

        /* Estilos para las tarjetas Pro */
        .pro-card {
            transition:
                transform var(--dur-slow) var(--ease-snappy),
                box-shadow var(--dur-slow) var(--ease-snappy),
                border-color var(--dur-base) var(--ease-soft);
            will-change: transform;
        }
        .pro-card:hover {
            transform: translateY(-10px) scale(1.02);
        }

        .liquid-glass {
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .liquid-glass:hover {
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.25);
        }

        .mask-fade-sides {
            mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        }
        
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(18px);
            transition:
                opacity 700ms var(--ease-soft),
                transform 700ms var(--ease-soft);
            will-change: transform, opacity;
        }
        .reveal-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .aurora {
            position: absolute;
            width: 680px;
            height: 680px;
            background: radial-gradient(circle at 30% 30%, rgba(74,109,167,0.20), transparent 45%),
                        radial-gradient(circle at 70% 60%, rgba(51,184,255,0.20), transparent 50%);
            filter: blur(80px);
            z-index: 0;
        }

        @media (max-width: 640px) {
            header {
                padding-top: 6rem;
            }
            .hero-image-container img {
                max-height: 360px;
                object-fit: contain;
            }
            .hero-image-container::after {
                height: 50%;
                filter: blur(12px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 1ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 1ms !important;
                scroll-behavior: auto !important;
            }
        }