:root {
            color-scheme: light dark;
        }

        @media (prefers-color-scheme: dark) {
            html:not(.light) {
                color-scheme: dark;
            }
        }

        /* Helpers reveal */
        .will-reveal {
            opacity: 0;
            transform: translateY(14px) scale(.98)
        }

        .is-visible {
            opacity: 1;
            transform: none;
            transition: opacity .7s ease, transform .7s cubic-bezier(.2, .6, .2, 1)
        }

        /* Shine en cards */
        .card {
            position: relative;
            overflow: hidden
        }

        .card::before {
            content: "";
            position: absolute;
            inset: -120% -40%;
            background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
            transform: rotate(8deg);
            opacity: 0
        }

        .card:hover::before {
            animation: shine 1.1s ease forwards
        }

        @keyframes shine {
            to {
                transform: translateX(130%) rotate(8deg);
                opacity: 1
            }
        }

        /* Patrón decorativo suave */
        .pattern {
            background-image: radial-gradient(rgba(34, 211, 238, .12) 1px, transparent 1px);
            background-size: 16px 16px
        }

        /* Tilt */
        .tilt {
            transform-style: preserve-3d;
            perspective: 1000px
        }

        .tilt>* {
            transform: translateZ(35px)
        }

        /* Scroll bar */
        #scrollbar {
            position: fixed;
            inset: 0 auto auto 0;
            height: 3px;
            background: linear-gradient(90deg, #22d3ee, #06b6d4);
            box-shadow: 0 0 12px rgba(34, 211, 238, .7);
            transform-origin: left top;
            z-index: 60
        }

        /* Cursor glow */
        #cursorGlow {
            position: fixed;
            inset: auto auto 0 0;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 40;
            mix-blend: screen;
            opacity: .25;
            background: radial-gradient(circle at center, rgba(34, 211, 238, .28), rgba(34, 211, 238, .08) 40%, transparent 60%);
            transform: translate(-50%, -50%)
        }

        /* Marquee */
        .marquee-track {
            width: 200%;
            animation: marqueeX 26s linear infinite;
        }

        @keyframes marqueeX {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(-50%)
            }
        }

        /* Tiping caret como elemento independiente para permitir wrapping */
        .caret {
            display: inline-block;
            width: 1px;
            height: 1em;
            margin-left: 2px;
            background: rgb(34, 211, 238);
            animation: blink 1s step-end infinite;
            vertical-align: -0.1em;
        }

        /* Parallax thumbs */
        .parallax-tiles {
            position: relative
        }

        .parallax-tiles .tile {
            will-change: transform;
            transition: transform .15s ease-out
        }