* {
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(180deg,#ffffff 0%,#F4F4F2 100%);
            color: #0A0A0A;
            overflow-x: hidden;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
        }

        /* --- Smooth Fluid Animations --- */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes glow {
            0%, 100% { 
                box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
            }
            50% { 
                box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
            }
        }

        @keyframes blob-morph {
            0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
            50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
        }

        /* --- Utility Classes --- */
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .animate-glow {
            animation: glow 3s ease-in-out infinite;
        }

        .animate-blob {
            animation: blob-morph 6s ease-in-out infinite;
        }

        /* --- Custom Cursor --- */
        #cursor-dot {
            width: 8px;
            height: 8px;
            background-color: #0A0A0A;
            position: fixed;
            top: 0;
            left: 0;
            border-radius: 50%;
            pointer-events: none;
            z-index: 10000;
            transform: translate(-50%, -50%);
            transition: width 0.2s, height 0.2s, background-color 0.2s;
        }

        #cursor-outline {
            width: 40px;
            height: 40px;
            border: 1px solid rgba(10, 10, 10, 0.3);
            position: fixed;
            top: 0;
            left: 0;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: transform 0.1s ease-out, width 0.2s, height 0.2s, border-color 0.2s;
        }

        /* Ocultar cursor default en desktop */
        @media (min-width: 1024px) {
            html, body, a, button {
                cursor: none !important;
            }
        }

        @media (max-width: 1023px) {
            #cursor-dot, #cursor-outline {
                display: none;
            }
        }

        /* --- Progress Bar --- */
        #progress-bar {
            height: 3px;
            background: linear-gradient(to right, #10B981, #FF5F1F);
        }

        /* --- Smooth Hover Effects --- */
        button, a {
            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        /* --- CTA Button --- */
        .btn-cta {
            background: linear-gradient(135deg, #06B6D4 0%, #FF6B35 100%);
            box-shadow: 0 12px 30px rgba(6, 182, 212, 0.14);
            position: relative;
            overflow: hidden;
        }

        .btn-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            transition: left 0.5s ease;
        }

        .btn-cta:hover::before {
            left: 100%;
        }

        .btn-cta:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 50px rgba(6, 182, 212, 0.16);
        }

        .btn-secondary {
            border: 2px solid rgba(10,10,10,0.06);
            background: transparent;
            color: #0A0A0A;
            padding: 0.7rem 1.2rem;
            border-radius: 9999px;
            font-weight:800;
            letter-spacing:0.12em;
            transition: all 0.28s ease;
        }

        .btn-secondary:hover{
            transform: translateY(-4px);
            border-color: rgba(6,182,212,0.35);
            color: #06B6D4;
            box-shadow: 0 12px 26px rgba(6,182,212,0.06);
        }

        /* --- Card Hover Effects --- */
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }

        /* --- Outline Text --- */
        .outline-text {
            color: transparent;
            -webkit-text-stroke: 1px #0A0A0A;
            opacity: 0.4;
            animation: float 4s ease-in-out infinite;
        }

        /* --- Responsive Typography --- */
        @media (max-width: 640px) {
            h1 { font-size: 2.25rem !important; line-height: 1.1 !important; }
            h2 { font-size: 1.875rem !important; }
            .text-5xl { font-size: 2.25rem; }
        }

        /* --- Card inner hover (subtle, no tilt) --- */
        .card-inner {
            transition: transform 420ms cubic-bezier(0.2,0.9,0.2,1), box-shadow 420ms cubic-bezier(0.2,0.9,0.2,1);
            transform-origin: center;
            will-change: transform;
        }

        #proyectos article:hover .card-inner {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(10,10,10,0.06);
        }

        /* --- Mobile menu styles --- */
        .mobile-menu-overlay {
            background: rgba(6,6,6,0.45);
            backdrop-filter: blur(6px);
            transition: opacity 260ms ease;
            opacity: 0;
            pointer-events: none;
        }

        .mobile-menu-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .mobile-menu-panel {
            transform: translateX(100%);
            transition: transform 320ms cubic-bezier(.2,.9,.2,1);
        }

        .mobile-menu-panel.open {
            transform: translateX(0%);
        }

        /* --- Mobile hero adjustments --- */
        .hero-mockup-wrap { }

        @media (max-width: 767px) {
            .hero-mockup-wrap { justify-content: center; }
            .hero-mockup-scene { width: 90%; max-width: 420px; margin: 0 auto; transform: none !important; }
            .hero-mockup { width: 100%; height: auto; display:block; }
        }

        .mobile-menu-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }

        /* --- Scroll Indicator --- */
        .scroll-indicator {
            width: 24px;
            height: 40px;
            border: 2px solid rgba(10, 10, 10, 0.4);
            border-radius: 12px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .scroll-indicator .dot {
            width: 4px;
            height: 4px;
            background: #0A0A0A;
            border-radius: 50%;
            animation: scroll-bounce 1.5s infinite;
        }

        @keyframes scroll-bounce {
            0%, 100% {
                transform: translateY(-8px);
                opacity: 1;
            }
            50% {
                transform: translateY(4px);
                opacity: 0.5;
            }
        }

        /* --- Services Section Background --- */
        .services-bg-blob {
            position: absolute;
            top: 10%;
            right: 5%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(60px);
            animation: blob-morph 8s ease-in-out infinite;
        }

        .services-bg-blob.secondary {
            top: 70%;
            left: 5%;
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
            animation-delay: 3s;
        }