:root { --progress-gradient: linear-gradient(90deg,#1E3A8A,#3B82F6,#1E3A8A); }

    @keyframes slide-down {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slide-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes fade-in-right {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-20px);
        }
    }
    
    @keyframes bounce-subtle {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }
    
    @keyframes gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    @keyframes pulse-slow {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    
    @keyframes gradient-text {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* New Modern Tech Animations */
    @keyframes rotate-3d {
        0% { transform: rotateX(0deg) rotateY(0deg); }
        100% { transform: rotateX(360deg) rotateY(360deg); }
    }

    @keyframes pulse-ring {
        0% {
            transform: scale(0.8);
            opacity: 1;
        }
        50% {
            transform: scale(1.2);
            opacity: 0.5;
        }
        100% {
            transform: scale(0.8);
            opacity: 1;
        }
    }

    @keyframes data-flow {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    @keyframes code-type {
        0%, 100% { width: 0; }
        50% { width: 100%; }
    }

    @keyframes binary-fall {
        0% {
            transform: translateY(-100%);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(100vh);
            opacity: 0;
        }
    }

    @keyframes circuit-glow {
        0%, 100% {
            opacity: 0.3;
            filter: drop-shadow(0 0 2px currentColor);
        }
        50% {
            opacity: 1;
            filter: drop-shadow(0 0 8px currentColor);
        }
    }

    @keyframes tech-particle {
        0% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translate(var(--tx), var(--ty)) rotate(360deg);
            opacity: 0;
        }
    }

    @keyframes badge-slide {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }

    @keyframes hologram-flicker {
        0%, 100% { opacity: 0.9; }
        50% { opacity: 0.4; }
    }

    @keyframes scan-line {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(100%); }
    }
    
    .animate-slide-down {
        animation: slide-down 0.6s ease-out;
    }
    
    .animate-slide-up {
        animation: slide-up 0.8s ease-out;
    }
    
    .animate-slide-up-delayed {
        animation: slide-up 1s ease-out 0.2s both;
    }
    
    .animate-slide-up-more-delayed {
        animation: slide-up 1s ease-out 0.4s both;
    }
    
    .animate-fade-in {
        animation: fade-in 1s ease-out;
    }
    
    .animate-fade-in-delayed {
        animation: fade-in 1.2s ease-out 0.3s both;
    }
    
    .animate-fade-in-very-delayed {
        animation: fade-in 1s ease-out 0.6s both;
    }
    
    .animate-fade-in-right {
        animation: fade-in-right 1s ease-out 0.4s both;
    }
    
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    
    .animate-float-delayed {
        animation: float 3s ease-in-out 1s infinite;
    }
    
    .animate-bounce-subtle {
        animation: bounce-subtle 2s ease-in-out infinite;
    }
    
    .animate-gradient {
        animation: gradient 15s ease infinite;
        background-size: 200% 200%;
    }
    
    .animate-pulse-slow {
        animation: pulse-slow 4s ease-in-out infinite;
    }
    
    .animate-gradient-text {
        animation: gradient-text 3s ease infinite;
        background-size: 200% 200%;
    }
    
    .animate-count-up {
        animation: fade-in 1s ease-out 0.8s both;
    }

    /* New animation classes */
    .animate-rotate-3d {
        animation: rotate-3d 20s linear infinite;
        transform-style: preserve-3d;
    }

    .animate-pulse-ring {
        animation: pulse-ring 2s ease-in-out infinite;
    }

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

    .animate-code-type {
        animation: code-type 8s ease-in-out infinite;
        overflow: hidden;
        white-space: nowrap;
    }

    /* Desktop/mobile code text swap */
    .code-desktop { display: inline; }
    .code-mobile  { display: none; }

    .animate-binary-fall {
        animation: binary-fall 14s linear infinite;
    }

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

    .animate-tech-particle {
        animation: tech-particle 6s ease-in-out infinite;
    }

    .animate-badge-slide {
        animation: badge-slide 30s linear infinite;
    }

    .animate-hologram {
        animation: hologram-flicker 4s ease-in-out infinite;
    }

    .animate-scan-line {
        animation: scan-line 3s linear infinite;
    }
    
    /* Modern Sector Cards */
    .sector-card-modern {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid rgba(148, 163, 184, 0.15);
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .sector-card-modern::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sector-card-modern:hover {
        transform: translateY(-4px);
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .sector-card-modern:hover::before {
        opacity: 1;
    }

    .sector-icon-modern {
        width: 2rem;
        height: 2rem;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }

    .sector-card-modern:hover .sector-icon-modern {
        transform: scale(1.1) rotate(-5deg);
    }

    .sector-card-modern p {
        position: relative;
        z-index: 1;
        line-height: 1.3;
    }

    /* Hover animations */
    .card-interactive {
        transition: all 0.3s ease;
    }

    .card-interactive:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    .btn-primary:hover {
        animation: pulse-subtle 0.5s ease-in-out;
    }
    
    @keyframes pulse-subtle {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    /* Tech particle container */
    .tech-particles {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .tech-particle {
        position: absolute;
        font-family: monospace;
        font-size: 12px;
        color: rgba(30, 58, 138, 0.1);
        font-weight: bold;
        filter: blur(0.8px);
    }

    /* Code terminal effect */
    .code-terminal {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-radius: 8px;
        padding: 1rem;
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        color: #10b981;
        position: relative;
        overflow: hidden;
    }

    .code-terminal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #10b981, transparent);
        animation: scan-line 3s linear infinite;
    }

    /* Logo carousel */
    .logo-carousel {
        overflow: hidden;
        position: relative;
        padding: 0.5rem 0;
    }
    .logo-carousel::before,
    .logo-carousel::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none;
    }
    .logo-carousel::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
    .logo-carousel::after  { right: 0; background: linear-gradient(to left, #fff, transparent); }

    .logo-track {
        display: flex;
        align-items: center;
        gap: 3rem;
        animation: badge-slide 28s linear infinite;
        will-change: transform;
    }
    .logo-track:hover {
        animation-play-state: paused;
    }
    .logo-track img {
        height: 36px;
        width: auto;
        max-width: 140px;
        object-fit: contain;
        filter: grayscale(100%) brightness(0.35);
        opacity: 0.85;
        transition: filter 0.3s ease, opacity 0.3s ease;
        flex-shrink: 0;
    }
    .logo-track img:hover {
        filter: grayscale(0%) brightness(1);
        opacity: 1;
    }

    /* Progress bars with glow effect */

    .hero-slider {
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }
    .hero-slider:active {
        cursor: grabbing;
    }

    .hero-slider-track {
        display: flex;
        height: 100%;
        transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .hero-slide {
        position: relative;
        min-width: 100%;
        height: 100%;
    }

    .hero-slide-caption {
        position: absolute;
        left: 1.5rem;
        bottom: 1.5rem;
        background: rgba(255, 255, 255, 0.92);
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
        max-width: 70%;
    }

    .hero-slider-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }

    .hero-slider-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        background: rgba(15, 23, 42, 0.25);
        border: none;
        cursor: pointer;
        transition: all 300ms ease;
    }

    .hero-slider-dot.active {
        width: 1.5rem;
        background: #1E3A8A;
    }

    @media (max-width: 640px) {
        .hero-slide-caption {
            max-width: 90%;
            left: 1rem;
            bottom: 1rem;
        }

        /* ── Hero mobile ── */
        .hero-headline-mobile {
            font-size: 2.25rem !important; /* 36px */
            line-height: 1.2 !important;
        }
        .hero-subtitle-mobile {
            font-size: 1rem !important; /* 16px */
            line-height: 1.5 !important;
        }
        .hero-buttons-mobile a {
            font-size: 1rem !important;
            padding: 0.75rem 1.5rem !important;
        }

        /* ── Code terminal mobile ── */
        .code-terminal {
            font-size: 0.75rem !important;
            padding: 0.75rem !important;
        }
        .code-terminal .animate-code-type {
            animation-name: code-type-clip !important;
            animation-duration: 8s !important;
            animation-timing-function: ease-in-out !important;
            animation-iteration-count: infinite !important;
            /* animation-delay se mantiene del inline style: 0s / 1s / 2s */
            white-space: nowrap !important;
            width: 100% !important;
            overflow: hidden !important;
        }
        @keyframes code-type-clip {
            0%, 100% { clip-path: inset(0 100% 0 0); }
            50%      { clip-path: inset(0 0% 0 0); }
        }
        /* Texto del terminal: versiones mobile/desktop */
        .code-desktop { display: none; }
        .code-mobile  { display: inline; }

        /* ── Floating card: hide on mobile ── */
        .hero-floating-card {
            display: none !important;
        }

        /* ── Hero slider: constrain height on mobile ── */
        .hero-slider {
            aspect-ratio: auto !important;
            height: 260px !important;
        }

        /* ── Badge carousel: smaller badges ── */
        .badge-track .badge {
            font-size: 0.7rem !important;
            padding: 0.3rem 0.6rem !important;
        }

        /* ── Sector cards: tighter grid ── */
        .sectors-grid-mobile {
            gap: 0.75rem !important;
        }

        /* ── Section headings ── */
        .section-title-mobile {
            font-size: 1.75rem !important;
        }

        /* ── Methodology: image aspect + floating card ── */
        .metodologia-image-mobile {
            aspect-ratio: 4 / 3 !important;
        }
        .metodologia-phase-card {
            padding: 0.75rem !important;
        }
        .metodologia-phase-card .font-headline.text-2xl {
            font-size: 1.1rem !important;
        }
        .metodologia-phase-card .text-xs {
            font-size: 0.7rem !important;
        }
        .metodologia-h3 {
            font-size: 1.5rem !important;
        }

        /* ── Why Us: 2 cols on mobile ── */
        .whyus-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 1.25rem !important;
        }
        .whyus-grid .w-20 {
            width: 3rem !important;
            height: 3rem !important;
        }
        .whyus-grid .w-10 {
            width: 2rem !important;
            height: 2rem !important;
        }

        /* ── CTA section ── */
        .cta-title-mobile {
            font-size: 2rem !important;
        }
        .cta-subtitle-mobile {
            font-size: 1rem !important;
        }
        .cta-buttons-mobile a {
            font-size: 1rem !important;
            padding: 0.75rem 1.5rem !important;
        }
        .cta-trust-pills {
            gap: 1rem !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
        }

        /* ── Contact section heading ── */
        .contacto-title-mobile {
            font-size: 1.75rem !important;
        }

        /* ── General: section padding on mobile ── */
        .section, .section-alt {
            padding-top: 3rem !important;
            padding-bottom: 3rem !important;
        }

        /* ── CTA dark section: reduce vertical padding ── */
        .cta-section-mobile {
            padding-top: 3.5rem !important;
            padding-bottom: 3.5rem !important;
        }

        /* ── Footer: tighter on mobile ── */
        .footer-mobile {
            padding-top: 2.5rem !important;
            padding-bottom: 1.5rem !important;
        }
        .footer-mobile .grid {
            gap: 2rem !important;
        }

        /* ── Methodology: reduce mb-16 header gap ── */
        .section-header-mb-mobile {
            margin-bottom: 2rem !important;
        }

        /* ── Hero: reduce space-y-8 gaps ── */
        .hero-content-mobile > * + * {
            margin-top: 1rem !important;
        }
    }

    /* === SERVICE CARDS V2 - PREMIUM ANIMATIONS === */
    @keyframes bar-grow {
        from { height: 0; }
        to { height: var(--bar-height); }
    }

    @keyframes node-connect {
        0% { opacity: 0; transform: scale(0); }
        60% { transform: scale(1.2); }
        100% { opacity: 1; transform: scale(1); }
    }

    @keyframes typewriter {
        from { width: 0; }
        to { width: 100%; }
    }

    @keyframes cursor-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    @keyframes flow-particle {
        0% { left: -30%; opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { left: 100%; opacity: 0; }
    }

    @keyframes glow-pulse {
        0%, 100% {
            box-shadow: 0 0 10px rgba(var(--card-rgb), 0.2);
        }
        50% {
            box-shadow: 0 0 25px rgba(var(--card-rgb), 0.5);
        }
    }

    @keyframes icon-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }

    /* === DROPDOWN MENU STYLES === */
    .dropdown:hover
    .dropdown:hover

    
    .contact-section{background:#f8fafc;position:relative;overflow:hidden}
    .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}
    @media(max-width:767px){.contact-grid{grid-template-columns:1fr;gap:2.5rem}}
    .contact-info{display:flex;flex-direction:column;gap:1.75rem;padding-top:.5rem}
    .contact-info-item{display:flex;align-items:flex-start;gap:1rem}
    .contact-info-icon{width:48px;height:48px;border-radius:12px;background:#eff6ff;border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .contact-info-icon svg{width:22px;height:22px;color:#1E3A8A}
    .contact-info-item h4{color:#1e293b;font-size:1rem;margin-bottom:2px}
    .contact-info-item p,.contact-info-item a{color:#64748b;font-size:.9rem}
    .contact-info-item a:hover{color:#1E3A8A}
    .contact-form{background:#fff;border-radius:20px;padding:2.5rem;border:1px solid #e2e8f0;box-shadow:0 4px 24px rgba(0,0,0,.05)}
    .contact-form label{display:block;font-size:.8rem;font-weight:600;color:#475569;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}
    .contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:.75rem 1rem;border:1.5px solid #e2e8f0;border-radius:10px;font-size:.95rem;font-family:'Manrope',sans-serif;transition:all .2s;background:#fff;color:#1e293b;outline:none;box-sizing:border-box}
    .contact-form input::placeholder,.contact-form textarea::placeholder{color:#94a3b8}
    .contact-form select{color:#64748b;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-color:#fff}
    .contact-form select option{background:#fff;color:#1e293b}
    .contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,.1);background:#fff}
    .contact-form textarea{resize:vertical;min-height:110px}
    .contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    @media(max-width:480px){.contact-form-row{grid-template-columns:1fr}}
    .contact-form-group{margin-bottom:1.1rem}
    .contact-submit{width:100%;padding:1rem;border:none;border-radius:10px;background:#1E3A8A;color:#fff;font-size:1.05rem;font-weight:700;font-family:'Manrope',sans-serif;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:.5rem}
    .contact-submit:hover{background:#2563EB;transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.35)}
    .contact-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
    .contact-success{display:none;text-align:center;padding:2.5rem;animation:contactFadeIn .4s ease}
    .contact-success.show{display:block}
    .contact-success svg{width:56px;height:56px;color:#10b981;margin:0 auto 1rem}
    .contact-success h3{color:#1e293b}
    .contact-success p{color:#64748b}
    @keyframes contactFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    .contact-form .just-validate-error-label{display:flex;align-items:center;gap:5px;font-size:.8rem;color:#dc2626;margin-top:.4rem;font-weight:500;animation:cfShakeIn .3s ease}
    .contact-form .just-validate-error-label::before{content:'';display:inline-block;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center/contain;flex-shrink:0}
    .contact-form input.just-validate-error-field,.contact-form textarea.just-validate-error-field,.contact-form select.just-validate-error-field{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.08);animation:cfShake .4s ease}
    .contact-form input.just-validate-success-field,.contact-form textarea.just-validate-success-field,.contact-form select.just-validate-success-field{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.08)}
    @keyframes cfShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
    @keyframes cfShakeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

    /* ══════════════ SCROLL PROGRESS BAR ══════════════ */
.cta-bg-animated{position:absolute;inset:0;background:linear-gradient(135deg,#1E3A8A 0%,#0F766E 35%,#1E3A8A 65%,#0F766E 100%);background-size:300% 300%;animation:cta-shift 10s ease infinite}
        @keyframes cta-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        .cta-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;will-change:transform;pointer-events:none}
        .cta-orb-1{width:420px;height:420px;background:rgba(59,130,246,.5);top:-15%;right:-5%;animation:cta-orb-float 8s ease-in-out infinite}
        .cta-orb-2{width:350px;height:350px;background:rgba(20,184,166,.45);bottom:-20%;left:-8%;animation:cta-orb-float 11s ease-in-out infinite 3s}
        .cta-orb-3{width:200px;height:200px;background:rgba(245,158,11,.3);top:50%;left:50%;animation:cta-orb-float 7s ease-in-out infinite 5s}
        @keyframes cta-orb-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.1)}}
        .cta-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}