:root {
            --rojo: #FF3B5C;
            --rojo-light: #FF6B8B; 
            --rojo-dark: #D32F4A;
            --negro: #0A0E17; 
            --gris-oscuro: #1A1E28;
            --gris-texto: #8A8F9D; 
            --gris-claro: #F5F8FA;
            --blanco: #FFFFFF; 
            --glass-bg: rgba(35, 40, 55, 0.92);
            --glass-border: rgba(255, 255, 255, 0.12);
            --azul-profesional: #4A86E8;
            --verde-tech: #36D4A0;
            --azul-tech: #4DA6FF;
            --purple-tech: #A86BCC;
            --dorado: #E1C050;
            --sombra: 0 12px 32px rgba(0, 0, 0, 0.2);
            --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
       
        body { 
            font-family: 'Inter', sans-serif; 
            background: var(--negro); 
            color: var(--gris-claro); 
            line-height: 1.8; 
            -webkit-font-smoothing: antialiased; 
            font-weight: 400;
            overflow-x: hidden;
            background-image: radial-gradient(circle at 15% 50%, rgba(29, 40, 60, 0.25) 0%, transparent 25%),
                              radial-gradient(circle at 85% 30%, rgba(29, 40, 60, 0.15) 0%, transparent 25%);
        }
        body.overflow-hidden { overflow: hidden; }
       
        /* --- Custom Scrollbar --- */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--gris-oscuro); }
        ::-webkit-scrollbar-thumb { background: var(--rojo); border-radius: 5px; border: 2px solid var(--gris-oscuro); }
        ::-webkit-scrollbar-thumb:hover { background: var(--rojo-light); }

        /* --- Typography --- */
        h1, h2, h3, h4, h5, h6 { 
            font-family: 'Orbitron', sans-serif; 
            letter-spacing: -0.03em; 
            line-height: 1.15; 
            font-weight: 600;
            color: var(--blanco);
        }
        h1 { font-size: 3.8rem; line-height: 1.05; letter-spacing: -0.05em; }
        h2 { font-size: 2.8rem; letter-spacing: -0.04em; }
        h3 { font-size: 1.8rem; letter-spacing: -0.03em; }
        p { font-weight: 400; color: var(--gris-texto); }
       
        @media (max-width: 900px) { 
            h1{font-size:2.8rem!important} 
            h2{font-size:2.2rem!important} 
            h3{font-size:1.5rem!important} 
        }
        @media (max-width: 600px) { 
            h1{font-size:2rem!important} 
            h2{font-size:1.8rem!important} 
            h3{font-size:1.3rem!important} 
        }

        /* --- Effects and Buttons --- */
        .btn-rojo { 
            background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-dark) 100%); 
            color: var(--blanco); 
            font-weight: 600; 
            border: none; 
            border-radius: 9999px; 
            padding: 1.1rem 2.6rem; 
            box-shadow: 0 10px 25px rgba(255, 59, 92, 0.4); 
            transition: var(--transition); 
            letter-spacing: 1px; 
            text-transform: uppercase; 
            font-size: 1.05rem; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            gap: 0.8rem; 
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
            will-change: transform; 
        }
        .btn-rojo:hover { 
            background: linear-gradient(135deg, var(--rojo-dark) 0%, var(--rojo) 100%); 
            transform: translateY(-5px); 
            box-shadow: 0 15px 35px rgba(255, 59, 92, 0.5); 
        }
        .btn-outline { 
            background: transparent; 
            border: 2px solid var(--rojo); 
            color: var(--blanco); 
            transition: var(--transition); 
        }
        .btn-outline:hover { background: var(--rojo); }
       
        /* --- Backgrounds and Sections --- */
        .glass { 
            background: var(--glass-bg); 
            backdrop-filter: blur(20px); 
            -webkit-backdrop-filter: blur(20px); 
            border-bottom: 1px solid var(--glass-border); 
            box-shadow: var(--sombra); 
        }
        .section-bg-black { 
            background: var(--negro); 
            color: var(--blanco); 
            position: relative; 
            overflow: hidden; 
            padding: 120px 0;
        }
        .section-bg-white { 
            background-color: var(--blanco); 
            color: var(--negro); 
            padding: 120px 0;
        }
        .section-bg-light { 
            background-color: var(--gris-claro); 
            color: var(--negro); 
            padding: 120px 0;
        }

        /* --- 3D Service Cards --- */
        .service-card { 
            perspective: 1000px; 
            cursor: pointer; 
            height: 100%;
        }
        .service-card-inner { 
            transition: var(--transition); 
            transform-style: preserve-3d; 
            background: rgba(255, 255, 255, 0.05); 
            border-radius: 20px; 
            box-shadow: var(--sombra); 
            border: 1px solid rgba(255, 255, 255, 0.08); 
            overflow: hidden; 
            padding: 2.5rem 2rem; 
            height: 100%;
            backdrop-filter: blur(10px);
        }
        .service-card:hover .service-card-inner { 
            box-shadow: 0 20px 50px -10px rgba(255, 59, 92, 0.2); 
            transform: translateY(-10px); 
            border-color: rgba(255, 59, 92, 0.3);
        }
        .service-card-content { 
            transform: translateZ(40px); 
        }
        .service-card h3 { 
            font-family: 'Montserrat', sans-serif; 
            font-weight: 700; 
            color: var(--blanco); 
            font-size: 1.4rem; 
            margin-bottom: 1.2rem;
        }
        .service-card p { 
            color: var(--gris-texto); 
            font-size: 1.05rem; 
            line-height: 1.7; 
            margin-bottom: 1.5rem;
        }
       
        /* --- Project Filter --- */
        .filter-btn { 
            padding: 0.7rem 1.5rem; 
            border-radius: 9999px; 
            font-weight: 600; 
            transition: var(--transition); 
            background-color: rgba(255,255,255,0.08); 
            color: var(--gris-claro); 
            border: 1px solid rgba(255,255,255,0.15);
            font-size: 0.9rem;
        }
        .filter-btn.active, .filter-btn:hover { 
            background-color: var(--rojo); 
            color: var(--blanco); 
            border-color: var(--rojo);
            transform: translateY(-3px);
        }
       
        /* --- Testimonials --- */
        .testimonial-card { 
            position: relative; 
            overflow: hidden; 
            background: var(--gris-oscuro); 
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }
        .testimonial-card .quote-icon { 
            position: absolute; 
            top: -1.5rem; 
            left: 1.5rem; 
            font-size: 8rem; 
            color: var(--rojo); 
            opacity: 0.08; 
            z-index: 1; 
            line-height: 1; 
            font-family: 'Times New Roman', serif; 
        }
        .testimonial-card .testimonial-content { 
            position: relative; 
            z-index: 2; 
            padding: 2.5rem;
        }
        .swiper-button-next, .swiper-button-prev { 
            color: var(--rojo) !important; 
            background: rgba(0,0,0,0.3);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        .swiper-button-next:hover, .swiper-button-prev:hover { 
            background: var(--rojo); 
            color: white !important;
        }
        .swiper-pagination-bullet { 
            background: rgba(255,255,255,0.3); 
            opacity: 1; 
            width: 12px;
            height: 12px;
        }
        .swiper-pagination-bullet-active { 
            background: var(--rojo) !important; 
            width: 30px;
            border-radius: 8px;
        }
       
        /* --- Mobile Menu --- */
        #mobile-menu-overlay { 
            position: fixed; 
            inset: 0; 
            background-color: rgba(0, 0, 0, 0.95); 
            z-index: 1000; 
            opacity: 0; 
            transition: opacity 0.4s ease; 
            pointer-events: none; 
        }
        #mobile-menu-overlay.active { 
            opacity: 1; 
            pointer-events: auto; 
        }
        #mobile-menu { 
            position: fixed; 
            top: 0; 
            right: 0; 
            bottom: 0; 
            width: 85%; 
            max-width: 380px; 
            background-color: var(--gris-oscuro); 
            z-index: 1001; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            padding: 2rem; 
            box-shadow: -10px 0 50px rgba(0,0,0,0.7); 
            transform: translateX(100%); 
            visibility: hidden; 
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s; 
        }
        #mobile-menu.active { 
            transform: translateX(0); 
            visibility: visible; 
        }
        .mobile-menu-link { 
            color: #e5e7eb; 
            padding: 1.2rem 0; 
            display: block; 
            width: 100%; 
            text-align: center; 
            font-size: 1.5rem; 
            font-weight: 600; 
            transition: var(--transition); 
            border-bottom: 1px solid rgba(255,255,255,0.08); 
            letter-spacing: 1px;
        }
        .mobile-menu-link:hover { 
            color: var(--rojo); 
            background-color: rgba(255,255,255,0.05); 
        }
        .burger-icon .burger-line { 
            transition: var(--transition); 
        }
        .burger-icon.active .line-1 { 
            transform: translateY(11px) rotate(45deg); 
        }
        .burger-icon.active .line-2 { 
            opacity: 0; 
        }
        .burger-icon.active .line-3 { 
            transform: translateY(-11px) rotate(-45deg); 
        }
       
        /* --- Advanced Contact Form --- */
        .form-group { 
            position: relative; 
            margin-bottom: 1.8rem;
        }
        .form-input { 
            color: #1f2937; 
            background-color: #f0f4f8; 
            border: 2px solid transparent; 
            transition: var(--transition); 
            border-radius: 14px;
            padding: 1.2rem 1.5rem;
            width: 100%;
            font-size: 1.05rem;
        }
        .form-label { 
            position: absolute; 
            top: 50%; 
            left: 1.5rem; 
            transform: translateY(-50%); 
            color: var(--gris-texto); 
            transition: var(--transition); 
            pointer-events: none; 
            background: transparent;
            padding: 0 0.5rem;
        }
        .form-input:focus + .form-label, 
        .form-input:not(:placeholder-shown) + .form-label { 
            top: -0.6rem; 
            left: 1rem; 
            transform: translateY(0) scale(0.85); 
            background-color: var(--blanco); 
            color: var(--rojo); 
            font-weight: 600; 
        }
        .form-input:focus { 
            border-color: var(--rojo); 
            outline: none; 
            box-shadow: 0 0 0 3px rgba(255, 59, 92, 0.2);
        }
        .btn-rojo:disabled { 
            background: #9ca3af; 
            cursor: not-allowed; 
            transform: none; 
            box-shadow: none;
        }
       
        /* PROFESSIONAL MODALS FOR PROJECTS */
        .modal-overlay { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0, 0, 0, 0.95); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            z-index: 9999; 
            opacity: 0; 
            visibility: hidden; 
            transition: all 0.4s ease; 
            backdrop-filter: blur(12px); 
        }
        .modal-overlay.active { 
            opacity: 1; 
            visibility: visible; 
        }
        .modal-content { 
            background: rgba(15, 20, 30, 0.95); 
            width: 90%; 
            max-width: 900px; 
            border-radius: 20px; 
            padding: 3.5rem; 
            position: relative; 
            transform: translateY(50px); 
            transition: transform 0.4s ease; 
            border: 1px solid rgba(255, 59, 92, 0.4); 
            box-shadow: 0 25px 60px rgba(0,0,0,0.6); 
            max-height: 90vh; 
            overflow-y: auto; 
        }
        .modal-overlay.active .modal-content { 
            transform: translateY(0); 
        }
        .close-modal { 
            position: absolute; 
            top: 25px; 
            right: 25px; 
            width: 45px; 
            height: 45px; 
            border-radius: 50%; 
            background: rgba(255, 255, 255, 0.12); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: var(--blanco); 
            font-size: 1.5rem; 
            cursor: pointer; 
            transition: var(--transition); 
        }
        .close-modal:hover { 
            background: var(--rojo); 
            transform: rotate(90deg); 
        }
        .modal-header { 
            margin-bottom: 2.5rem; 
            padding-right: 3rem;
        }
        .modal-header h2 { 
            font-size: 2.2rem; 
            margin-bottom: 1.2rem; 
            color: var(--blanco); 
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .modal-header p { 
            color: var(--gris-texto); 
            font-size: 1.1rem; 
            line-height: 1.7;
        }
        .modal-body { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 2.5rem; 
        }
        @media (max-width: 768px) { 
            .modal-body { 
                grid-template-columns: 1fr; 
            } 
        }
        .modal-description { 
            color: var(--gris-claro); 
            line-height: 1.8; 
            font-size: 1.05rem;
        }
        .modal-description p { 
            margin-bottom: 1.5rem; 
            color: #d1d5db;
        }
        .modal-description ul { 
            padding-left: 1.5rem; 
            margin-bottom: 1.5rem; 
        }
        .modal-description li { 
            margin-bottom: 0.8rem; 
            position: relative;
            padding-left: 1.5rem;
        }
        .modal-description li:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.7rem;
            width: 8px;
            height: 8px;
            background: var(--rojo);
            border-radius: 50%;
        }
        .modal-tech { 
            background: rgba(255, 59, 92, 0.08); 
            border-radius: 16px; 
            padding: 2rem; 
            border: 1px solid rgba(255,255,255,0.08);
        }
        .modal-tech h3 { 
            font-size: 1.5rem; 
            margin-bottom: 1.5rem; 
            color: var(--blanco); 
            position: relative; 
            padding-bottom: 0.8rem; 
        }
        .modal-tech h3::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 60px; 
            height: 3px; 
            background: var(--rojo); 
        }
        .tech-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
            gap: 1.2rem; 
        }
        .tech-item { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            gap: 0.8rem; 
            padding: 1.2rem; 
            background: rgba(15, 20, 30, 0.6); 
            border-radius: 8px; 
            transition: var(--transition); 
            border: 1px solid rgba(255,255,255,0.08);
        }
        .tech-item:hover { 
            background: rgba(255, 59, 92, 0.15); 
            transform: translateY(-5px); 
        }
        .tech-icon { 
            width: 50px; 
            height: 50px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 2rem; 
            color: var(--rojo); 
        }
        .tech-name { 
            color: var(--gris-claro); 
            font-weight: 500; 
            text-align: center; 
            font-size: 0.9rem; 
        }
        .project-link { 
            display: inline-flex; 
            align-items: center; 
            gap: 0.8rem; 
            color: var(--rojo); 
            text-decoration: none; 
            font-weight: 600; 
            transition: var(--transition); 
            font-size: 1.1rem; 
        }
        .project-link i { 
            transition: transform 0.3s ease; 
        }
        .project-link:hover { 
            color: var(--rojo-light); 
        }
        .project-link:hover i { 
            transform: translateX(8px); 
        }

        /* ADDITIONAL PROFESSIONAL EFFECTS */
        .gradient-border { 
            border: 1px solid; 
            border-image: linear-gradient(45deg, var(--rojo), var(--rojo-light)) 1; 
        }
        .hover-grow { 
            transition: transform 0.3s ease; 
        }
        .hover-grow:hover { 
            transform: scale(1.05); 
        }
        .project-image { 
            border-radius: 16px; 
            overflow: hidden; 
            transition: transform 0.4s ease; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
        }
        .project-card:hover .project-image { 
            transform: scale(1.05); 
            box-shadow: 0 15px 30px rgba(0,0,0,0.2); 
        }
        .tech-tag { 
            background: rgba(255, 59, 92, 0.15); 
            color: var(--blanco); 
            padding: 0.5rem 1.2rem; 
            border-radius: 30px; 
            font-size: 0.9rem; 
            font-weight: 500; 
            border: 1px solid rgba(255, 59, 92, 0.3); 
            transition: var(--transition); 
        }
        .project-card:hover .tech-tag { 
            background: rgba(255, 59, 92, 0.25); 
        }

        /* IMPROVED HERO SECTION */
        .hero-video { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            opacity: 0.5; 
            filter: brightness(0.6) contrast(1.2); 
            z-index: -20; 
        }
        .hero-gradient { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(135deg, rgba(10, 15, 30, 0.95) 0%, rgba(30, 10, 20, 0.92) 100%); 
            opacity: 0.9; 
            z-index: -10; 
        }
        .hero-content { 
            position: relative; 
            z-index: 10; 
            padding: 100px 0;
        }

        /* MODALS FOR SERVICES */
        .service-modal .modal-body { 
            grid-template-columns: 1fr; 
        }
        .service-feature { 
            display: flex; 
            gap: 1.5rem; 
            margin-bottom: 2rem; 
        }
        .feature-icon { 
            flex-shrink: 0; 
            width: 60px; 
            height: 60px; 
            background: rgba(255, 59, 92, 0.12); 
            border-radius: 16px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: var(--rojo); 
            font-size: 1.8rem; 
        }
        .feature-content { 
            flex-grow: 1; 
        }
        .feature-content h4 { 
            font-weight: 700; 
            margin-bottom: 0.8rem; 
            font-size: 1.3rem; 
            color: var(--blanco);
        }
        .feature-content p {
            color: #cbd5e1;
            line-height: 1.7;
        }
       
        /* CARD GLOW EFFECT */
        .card-glow { 
            position: relative; 
            overflow: hidden; 
        }
        .card-glow::before { 
            content: ''; 
            position: absolute; 
            top: -50%; 
            left: -50%; 
            width: 200%; 
            height: 200%; 
            background: radial-gradient(circle, rgba(255, 59, 92, 0.2) 0%, transparent 70%); 
            z-index: 0; 
            pointer-events: none; 
            opacity: 0; 
            transition: opacity 0.5s ease; 
        }
        .card-glow:hover::before { 
            opacity: 0.8; 
        }
       
        /* NEON EFFECT FOR TITLES */
        .neon-text {
            text-shadow: 
                0 0 5px rgba(255, 59, 92, 0.3),
                0 0 10px rgba(255, 59, 92, 0.2),
                0 0 20px rgba(255, 59, 92, 0.15);
        }
       
        /* GTA-STYLE PROFESSIONAL DESIGN */
        .section-title {
            position: relative;
            display: inline-block;
            padding-bottom: 1.2rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
            letter-spacing: 1px;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--rojo);
            border-radius: 2px;
        }
        .gta-style-btn {
            background: rgba(0,0,0,0.7);
            border: 2px solid var(--rojo);
            color: var(--blanco);
            padding: 1.1rem 2.6rem;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;
            transition: var(--transition);
            border-radius: 50px;
            font-size: 1.05rem;
        }
        .gta-style-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 59, 92, 0.3), transparent);
            transition: all 0.6s ease;
        }
        .gta-style-btn:hover::before {
            left: 100%;
        }
        .gta-style-btn:hover {
            background: rgba(255, 59, 92, 0.15);
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255, 59, 92, 0.3);
        }
       
        /* IMPROVEMENTS FOR PROJECTS SECTION */
        .projects-section {
            background: linear-gradient(135deg, #0c0f1a 0%, #121828 100%);
            position: relative;
            overflow: hidden;
            padding: 120px 0;
        }
        .projects-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(255, 59, 92, 0.08) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(77, 166, 255, 0.08) 0%, transparent 20%);
            z-index: 0;
        }
        .project-video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.5);
            margin-bottom: 2.5rem;
        }
        .project-video-container iframe, .project-video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .video-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--rojo);
            color: white;
            padding: 8px 15px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 10;
            box-shadow: 0 5px 15px rgba(255, 59, 92, 0.4);
        }
        .project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 35px;
        }
        .project-card-enhanced {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 20px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--sombra);
            border: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
            backdrop-filter: blur(5px);
        }
        .project-card-enhanced:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.35);
            border-color: rgba(255, 59, 92, 0.4);
        }
        .project-card-enhanced::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--rojo), var(--rojo-light));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }
        .project-card-enhanced:hover::after {
            transform: scaleX(1);
        }
        .project-image-enhanced {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        .project-image-enhanced img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .project-card-enhanced:hover .project-image-enhanced img {
            transform: scale(1.1);
        }
        .project-content-enhanced {
            padding: 28px;
        }
        .project-title-enhanced {
            font-size: 1.6rem;
            margin-bottom: 15px;
            color: white;
            position: relative;
            display: inline-block;
            font-weight: 700;
        }
        .project-title-enhanced::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--rojo);
        }
        .project-description-enhanced {
            color: #cbd5e1;
            margin-bottom: 25px;
            line-height: 1.7;
            font-size: 1.05rem;
        }
        .tech-tags-enhanced {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 25px;
        }
        .tech-tag-enhanced {
            background: rgba(255, 59, 92, 0.12);
            color: #f8fafc;
            padding: 8px 18px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid rgba(255, 59, 92, 0.25);
            transition: var(--transition);
        }
        .tech-tag-enhanced:hover {
            background: rgba(255, 59, 92, 0.25);
            transform: translateY(-3px);
        }
        .project-link-enhanced {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--rojo-light);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            font-size: 1.05rem;
        }
        .project-link-enhanced i {
            transition: transform 0.3s ease;
        }
        .project-link-enhanced:hover {
            color: var(--azul-tech);
        }
        .project-link-enhanced:hover i {
            transform: translateX(6px);
        }

        /* NEW SECTION: WORK PROCESS */
        .process-section {
            background: linear-gradient(135deg, #121828 0%, #0c0f1a 100%);
            position: relative;
            overflow: hidden;
            padding: 120px 0;
        }
        .process-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 59, 92, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(77, 166, 255, 0.1) 0%, transparent 20%);
            z-index: 0;
            opacity: 0.4;
        }
        .process-container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .process-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 45px;
            margin-top: 70px;
        }
        .process-step {
            background: rgba(30, 30, 40, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 35px 30px;
            position: relative;
            transition: var(--transition);
            text-align: center;
            z-index: 1;
        }
        .process-step:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
            border-color: rgba(255, 59, 92, 0.4);
        }
        .step-number {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 45px;
            height: 45px;
            background: var(--rojo);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.3rem;
            color: white;
            box-shadow: 0 5px 20px rgba(255, 59, 92, 0.5);
        }
        .step-icon {
            font-size: 3.2rem;
            margin-bottom: 25px;
            color: var(--rojo);
            transition: var(--transition);
        }
        .process-step:hover .step-icon {
            transform: scale(1.15);
        }
        .step-title {
            font-size: 1.5rem;
            margin-bottom: 18px;
            color: white;
            font-weight: 600;
        }
        .step-description {
            color: #cbd5e1;
            line-height: 1.7;
            font-size: 1.05rem;
        }

        /* TECHNOLOGIES SECTION */
        .tech-section {
            background: linear-gradient(135deg, #0c0f1a 0%, #121828 100%);
            padding: 120px 0;
            position: relative;
            overflow: hidden;
        }
        .tech-grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 35px;
            max-width: 1200px;
            margin: 70px auto 0;
            padding: 0 20px;
        }
        .tech-item-container {
            background: rgba(30, 30, 40, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            transition: var(--transition);
            text-align: center;
        }
        .tech-item-container:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 59, 92, 0.4);
        }
        .tech-logo {
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.8rem;
            color: var(--rojo);
        }
        .tech-name-container {
            color: white;
            font-weight: 600;
            font-size: 1.15rem;
        }

        /* ANIMATED GRADIENT EFFECT */
        .gradient-animation {
            background: linear-gradient(270deg, #c52942, #2a6bac, #9b59b6, #2ecc71);
            background-size: 800% 800%;
            -webkit-animation: GradientBackground 15s ease infinite;
            -moz-animation: GradientBackground 15s ease infinite;
            animation: GradientBackground 15s ease infinite;
        }
       
        @keyframes GradientBackground {
            0%{background-position:0% 50%}
            50%{background-position:100% 50%}
            100%{background-position:0% 50%}
        }
       
        /* NEW ELEGANT STYLES */
        .logo-text {
            font-weight: 800;
            letter-spacing: 3px;
            position: relative;
            padding-left: 12px;
        }
        .logo-text::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 70%;
            background: var(--rojo);
            border-radius: 2px;
        }
       
        .section-padding {
            padding: 140px 0;
        }
       
        .section-intro {
            max-width: 700px;
            margin: 0 auto 70px;
            text-align: center;
        }
       
        .section-intro p {
            font-size: 1.15rem;
            line-height: 1.8;
        }
       
        .icon-box {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 59, 92, 0.1);
            border-radius: 20px;
            margin: 0 auto 25px;
            font-size: 2.5rem;
            color: var(--rojo);
            transition: var(--transition);
        }
       
        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            margin: 80px 0;
        }
       
        .contact-info-item {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
        }
       
        .contact-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 59, 92, 0.1);
            border-radius: 16px;
            font-size: 1.8rem;
            color: var(--rojo);
        }
       
        .footer-logo {
            font-weight: 800;
            letter-spacing: 3px;
        }
       
        /* NEW HERO SECTION DESIGN */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 0 20px;
        }
       
        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            width: 100%;
        }
       
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
       
        @media (max-width: 992px) {
            .hero-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }
       
        .hero-text h1 {
            font-size: 3.8rem;
            line-height: 1.1;
            margin-bottom: 25px;
            background: linear-gradient(90deg, #ffffff, #FF6B8B);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(255, 59, 92, 0.3);
        }
       
        .hero-text p {
            font-size: 1.4rem;
            line-height: 1.7;
            margin-bottom: 40px;
            color: #e5e7eb;
            max-width: 600px;
        }
       
        .hero-cta {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }
       
        .hero-visual {
            position: relative;
            perspective: 1000px;
        }
       
        .hero-visual-inner {
            position: relative;
            transform-style: preserve-3d;
            animation: float 8s ease-in-out infinite;
        }
       
        @keyframes float {
            0% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
            50% { transform: translateY(-20px) rotateX(5deg) rotateY(5deg); }
            100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
        }
       
        .hero-main-image {
            width: 100%;
            max-width: 500px;
            border-radius: 20px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }
       
        .floating-element {
            position: absolute;
            border-radius: 16px;
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            background: rgba(30, 30, 40, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 2;
        }
       
        .floating-element:nth-child(1) {
            top: -30px;
            left: -30px;
            width: 120px;
            height: 120px;
            animation: floatElement1 8s ease-in-out infinite;
        }
       
        .floating-element:nth-child(2) {
            bottom: 40px;
            right: -40px;
            width: 150px;
            height: 150px;
            animation: floatElement2 9s ease-in-out infinite;
        }
       
        .floating-element:nth-child(3) {
            top: 50%;
            left: -60px;
            width: 100px;
            height: 100px;
            animation: floatElement3 10s ease-in-out infinite;
        }
       
        @keyframes floatElement1 {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }
       
        @keyframes floatElement2 {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(25px) rotate(-5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }
       
        @keyframes floatElement3 {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(7deg); }
            100% { transform: translateY(0) rotate(360deg); }
        }
       
        .element-icon {
            font-size: 2.5rem;
            color: var(--rojo);
        }
       
        .element-text {
            font-size: 0.9rem;
            font-weight: 600;
            text-align: center;
            margin-top: 10px;
        }
       
        .particle {
            position: absolute;
            background: var(--rojo);
            border-radius: 50%;
            opacity: 0.7;
            z-index: 1;
        }
       
        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
       
        .hero-gradient-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(10, 15, 30, 0.8) 0%, rgba(10, 5, 20, 0.9) 100%);
        }
       
        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.1;
            background-image: 
                radial-gradient(circle at 10% 20%, var(--rojo) 0%, transparent 15%),
                radial-gradient(circle at 90% 80%, var(--azul-tech) 0%, transparent 15%);
            background-size: 300px 300px;
        }

        /* IMPROVED LOGO */
        .logo-container {
            position: relative;
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }
       
        .logo-image {
            height: 60px;
            width: auto;
            object-fit: contain;
            transition: none;
            box-shadow: none;
            border-radius: 0;
        }
       
        /* ADDITIONAL DECORATION */
        .decorative-wave {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
            z-index: 5;
        }
       
        .decorative-wave svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 80px;
        }
       
        .decorative-wave .shape-fill {
            fill: #0f1117;
        }
       
        /* GENERAL AESTHETIC IMPROVEMENTS */
        .transition-smooth {
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
       
        .text-gradient {
            background: linear-gradient(90deg, var(--rojo), var(--rojo-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
       
        .bg-gradient-radial {
            background: radial-gradient(ellipse at center, rgba(255, 59, 92, 0.1) 0%, rgba(15,17,23,0) 70%);
        }

        /* ADDITIONAL IMPROVEMENTS */
        .service-card {
            height: 100%;
            display: flex;
        }
        .service-card-inner {
            display: flex;
            flex-direction: column;
        }
        .service-card-content {
            flex-grow: 1;
        }
        .project-grid {
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        }
        .testimonial-card .testimonial-content p {
            font-size: 1.1rem;
        }
        .contact-form .form-group {
            margin-bottom: 1.8rem;
        }
        footer {
            background: linear-gradient(135deg, #0a0c16 0%, #080a12 100%);
        }
       
        /* NEW STYLIZED LOGO */
        .spiral-logo {
            height: 70px;
            width: auto;
            transition: var(--transition);
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
        }
        .spiral-logo:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 0 15px rgba(255, 59, 92, 0.5));
        }
        .logo-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 59, 92, 0.2) 0%, transparent 70%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .logo-container:hover::after {
            opacity: 1;
        }
       
        /* Custom SVG logo */
        .logo-svg {
            width: 70px;
            height: 70px;
        }
        .logo-spiral {
            fill: none;
            stroke: url(#logo-gradient);
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 150;
            stroke-dashoffset: 150;
            animation: draw 1.5s ease-in-out forwards;
        }
        .logo-text-part {
            fill: white;
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            font-size: 24px;
            text-transform: uppercase;
        }
        @keyframes draw {
            to {
                stroke-dashoffset: 0;
            }
        }

        /* ELEGANCE AND PROFESSIONALISM IMPROVEMENTS */
        body {
            font-family: 'Inter', sans-serif;
            color: #e5e7eb;
        }
       
        .hero-section {
            background: linear-gradient(135deg, #0c0f1a 0%, #121828 100%);
        }
       
        .section-intro h2 {
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
       
        .section-intro p {
            font-size: 1.1rem;
            color: #cbd5e1;
        }
       
        .service-card-inner {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
       
        .service-card h3 {
            color: white;
            font-size: 1.4rem;
        }
       
        .service-card p {
            color: #cbd5e1;
        }
       
        .project-card-enhanced {
            box-shadow: var(--sombra);
        }
       
        .testimonial-card {
            background: rgba(25, 25, 35, 0.8);
        }
       
        .btn-rojo {
            letter-spacing: 1.5px;
        }
       
        .contact-form {
            background: rgba(15, 20, 30, 0.8);
            padding: 30px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* IMPROVED TEAM SECTION */
        .team-section {
            position: relative;
            padding: 120px 0;
            overflow: hidden;
            background: radial-gradient(ellipse at center, rgba(15, 17, 23, 0.9) 0%, rgba(10, 12, 18, 1) 100%);
        }
       
        .team-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 59, 92, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(77, 166, 255, 0.1) 0%, transparent 20%),
                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FF3B5C' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            z-index: 0;
            opacity: 0.4;
        }
       
        .team-spiral-container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
       
        .team-spiral {
            position: absolute;
            width: 800px;
            height: 800px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            opacity: 0.15;
        }
       
        .team-spiral-path {
            fill: none;
            stroke: var(--rojo);
            stroke-width: 2;
            stroke-dasharray: 2000;
            stroke-dashoffset: 2000;
            animation: drawSpiral 20s linear forwards infinite;
        }
       
        @keyframes drawSpiral {
            to {
                stroke-dashoffset: 0;
            }
        }
       
        .team-members {
            position: relative;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 60px;
            margin-top: 80px;
        }
       
        .team-member {
            width: 320px;
            perspective: 1200px;
            position: relative;
        }
       
        .team-card {
            position: relative;
            width: 100%;
            height: 420px;
            transform-style: preserve-3d;
            transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
       
        .team-member:hover .team-card {
            transform: rotateY(180deg);
        }
       
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.4);
        }
       
        .card-front {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 30px;
            text-align: center;
        }
       
        .card-back {
            background: linear-gradient(135deg, #0c0f1a 0%, #121828 100%);
            transform: rotateY(180deg);
            padding: 30px;
            border: 1px solid rgba(255, 59, 92, 0.3);
        }
       
        .member-photo {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 4px solid var(--rojo);
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(255, 59, 92, 0.4);
        }
       
        .member-photo::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 59, 92, 0.2), transparent);
            z-index: 1;
        }
       
        .member-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }
       
        .team-member:hover .member-photo img {
            transform: scale(1.1);
        }
       
        .member-name {
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: white;
            position: relative;
            display: inline-block;
            font-weight: 700;
        }
       
        .member-name::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: var(--rojo);
        }
       
        .member-position {
            color: var(--rojo-light);
            font-size: 1.1rem;
            margin-bottom: 20px;
            font-weight: 600;
        }
       
        .member-description {
            color: #cbd5e1;
            margin-bottom: 25px;
            line-height: 1.7;
            font-size: 1.05rem;
            text-align: center;
        }
       
        .team-social-icons {
            display: flex;
            gap: 15px;
        }
       
        .team-social-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: rgba(255, 59, 92, 0.15);
            border-radius: 50%;
            color: white;
            font-size: 1.4rem;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
       
        .team-social-icons a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
        }
       
        .team-social-icons a:hover::before {
            left: 100%;
        }
       
        .team-social-icons a:hover {
            background: var(--rojo);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(255, 59, 92, 0.4);
        }
       
        .floating-cube {
            position: absolute;
            width: 100px;
            height: 100px;
            background: rgba(255, 59, 92, 0.1);
            border: 1px solid rgba(255, 59, 92, 0.3);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            z-index: 1;
            animation: floatCube 12s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: var(--rojo);
        }
       
        .floating-cube:nth-child(1) {
            top: 15%;
            left: 10%;
            animation-delay: 0s;
        }
       
        .floating-cube:nth-child(2) {
            top: 25%;
            right: 12%;
            animation-delay: 2s;
        }
       
        .floating-cube:nth-child(3) {
            bottom: 20%;
            left: 15%;
            animation-delay: 4s;
        }
       
        .floating-cube:nth-child(4) {
            bottom: 30%;
            right: 10%;
            animation-delay: 6s;
        }
       
        @keyframes floatCube {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(10px, -20px) rotate(5deg); }
            50% { transform: translate(-15px, 15px) rotate(-5deg); }
            75% { transform: translate(-10px, -15px) rotate(3deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
       
        .team-section-title {
            position: relative;
            display: inline-block;
            padding-bottom: 1.2rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
            letter-spacing: 1px;
            z-index: 10;
        }
       
        .team-section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--rojo);
            border-radius: 2px;
        }
       
        .team-section-subtitle {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
            color: #cbd5e1;
            z-index: 10;
            position: relative;
        }

        /* --- GOOGLE TRANSLATE WIDGET --- */
        #google_translate_element .goog-te-gadget-simple {
            background-color: transparent !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 50px !important;
            padding: 0.5rem 1rem !important;
            cursor: pointer;
            transition: var(--transition);
        }
        #google_translate_element .goog-te-gadget-simple:hover {
             border-color: var(--rojo) !important;
        }
        #google_translate_element .goog-te-gadget-simple span {
            color: var(--blanco) !important;
            font-weight: 600;
        }
        .goog-te-gadget-icon {
            display: none !important;
        }
        /* Fix for the top bar that Google adds */
        body {
            top: 0px !important;
        }
        .skiptranslate {
            display: none !important;
        }
        
        /* ===== MOBILE OPTIMIZATIONS ===== */
        @media (max-width: 768px) {
            .section-padding {
                padding: 100px 0;
            }
            
            .hero-grid {
                gap: 40px;
            }
            
            .hero-text h1 {
                font-size: 2.5rem;
                margin-bottom: 20px;
            }
            
            .hero-text p {
                font-size: 1.2rem;
                margin-bottom: 30px;
            }
            
            .hero-cta {
                flex-direction: column;
                gap: 15px;
            }
            
            .hero-visual {
                margin: 0 auto;
                max-width: 90%;
            }
            
            .floating-element {
                display: none;
            }
            
            .section-intro {
                margin-bottom: 50px;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .section-title::after {
                width: 60px;
            }
            
            .icon-box {
                width: 70px;
                height: 70px;
                font-size: 2rem;
            }
            
            .service-card-inner {
                padding: 1.8rem;
            }
            
            .service-card h3 {
                font-size: 1.2rem;
            }
            
            .project-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .process-steps {
                grid-template-columns: 1fr;
                gap: 35px;
            }
            
            .tech-grid-container {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: 20px;
            }
            
            .team-members {
                gap: 40px;
            }
            
            .team-member {
                width: 100%;
                max-width: 320px;
            }
            
            .contact-form {
                padding: 20px;
            }
            
            .modal-content {
                padding: 2rem;
            }
            
            .modal-header h2 {
                font-size: 1.8rem;
            }
            
            .mobile-menu-link {
                font-size: 1.3rem;
            }
            
            .logo-svg {
                width: 50px;
                height: 50px;
            }
            
            .gta-style-btn {
                padding: 1rem 1.8rem;
                font-size: 0.95rem;
            }
            
            .filter-btn {
                padding: 0.6rem 1.2rem;
                margin-bottom: 8px;
            }
        }
        
        @media (max-width: 480px) {
            .hero-text h1 {
                font-size: 2rem;
            }
            
            .hero-text p {
                font-size: 1rem;
            }
            
            .btn-rojo {
                padding: 1rem 1.8rem;
                font-size: 0.95rem;
                width: 100%;
            }
            
            .section-title {
                font-size: 1.6rem;
            }
            
            .section-intro p {
                font-size: 1rem;
            }
            
            .tech-item-container {
                padding: 20px 15px;
            }
            
            .tech-logo {
                width: 50px;
                height: 50px;
                font-size: 2rem;
            }
            
            .tech-name-container {
                font-size: 1rem;
            }
            
            .contact-info-item {
                flex-direction: column;
                text-align: center;
            }
            
            .contact-icon {
                margin: 0 auto;
            }
            
            .footer-logo {
                font-size: 1.2rem;
            }
        }