:root {
            --bg:         #1a1a1a;
            --bg-2:       #1f1f1f;
            --bg-card:    #262626;
            --bg-card-h:  #2d2d2d;
            --red:        #8B1515;
            --red-b:      #B91C1C;
            --red-dim:    rgba(139,21,21,.18);
            --red-glow:   rgba(139,21,21,.38);
            --white:      #FFFFFF;
            --text:       #FFFFFF;
            --g1:         #E8E8E8;
            --g2:         #9CA3AF;
            --g3:         #4B5563;
            --border:     rgba(255,255,255,.07);
            --border-r:   rgba(139,21,21,.45);
            --nav-bg:     rgba(26,26,26,.82);
            --nav-bg-s:   rgba(26,26,26,.97);
            --mob-bg:     rgba(26,26,26,.98);
            --logo-bg:    #ffffff;
            --logo-br:    5px;
            --logo-pad:   3px 9px;
            --logo-brd:   none;
            --fh:         'Space Grotesk', sans-serif;
            --fb:         'Inter', sans-serif;
            --fm:         'Space Mono', monospace;
            --ease:       cubic-bezier(.4,0,.2,1);
            --pad-section: clamp(56px, 7vw, 96px);
            --pad-hero:    clamp(80px, 10vh, 120px);
            --container-max: 1180px;
            --radius-card: 14px;
            --c-wa:  #35b86b;  --c-wa-h:  #2a9456;
            --c-ig:  #d6317a;  --c-ig-h:  #b02663;
            --c-fb:  #3071d6;  --c-fb-h:  #255aae;
            --c-em:  #d44535;  --c-em-h:  #ae382b;
        }
        [data-theme="light"] {
            --bg:         #DDD9D3;
            --bg-2:       #D4CFC8;
            --bg-card:    #E5E0D9;
            --bg-card-h:  #DDD8D1;
            --red-dim:    rgba(139,21,21,.09);
            --red-glow:   rgba(139,21,21,.22);
            --text:       #0F0F0F;
            --g1:         #111111;
            --g2:         #374151;
            --g3:         #6B7280;
            --border:     rgba(0,0,0,.09);
            --border-r:   rgba(139,21,21,.32);
            --nav-bg:     rgba(221,217,211,.88);
            --nav-bg-s:   rgba(221,217,211,.98);
            --mob-bg:     rgba(221,217,211,.99);
            --logo-bg:    transparent;
            --logo-br:    0px;
            --logo-pad:   0px;
            --logo-brd:   none;
        }
        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; overscroll-behavior: none; }
        body {
            background: var(--bg);
            color: var(--g1);
            font-family: var(--fb);
            line-height: 1.6;
            overflow-x: hidden;
            overscroll-behavior: none;
            transition: background .35s, color .35s;
        }
        img { max-width:100%; display:block; }
        a { text-decoration:none; color:inherit; }
        ul { list-style:none; }

        
        h1,h2,h3,h4 {
            font-family: var(--fh);
            line-height: 1.13;
            letter-spacing: -.025em;
        }
        h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); font-weight: 700; }
        h2 { font-size: clamp(1.9rem, 4vw, 3rem);   font-weight: 700; }
        h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
        h4 { font-size: .98rem; font-weight: 600; }

        
        .container { max-width:var(--container-max); margin:0 auto; padding:0 clamp(16px, 2.5vw, 32px); }

        .nav-ctrls { display:flex; align-items:center; gap:10px; flex-shrink:0; }
        .chip-center { margin:0 auto 18px; }

        
        .prob-card, .serv-card, .caso-card, .nosotros-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            transition: border-color .3s, background .3s;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--fm);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--red-b);
            padding: 6px 14px;
            border: 1px solid var(--border-r);
            border-radius: 100px;
            margin-bottom: 18px;
        }
        .chip::before {
            content:'';
            width:6px; height:6px;
            border-radius:50%;
            background: var(--red-b);
            animation: radar-ping 2s ease-out infinite;
            box-shadow: 0 0 0 0 rgba(185,28,28,.6);
        }
        @keyframes radar-ping {
            0%   { transform:scale(1);    box-shadow: 0 0 0 0   rgba(185,28,28,.6); }
            60%  { transform:scale(1.15); box-shadow: 0 0 0 7px rgba(185,28,28,0);  }
            100% { transform:scale(1);    box-shadow: 0 0 0 0   rgba(185,28,28,0);  }
        }
        .has-grid {
            position: relative;
            overflow: hidden;
        }
        .has-grid::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(139,21,21,.13) 1px, transparent 1px),
                linear-gradient(90deg, rgba(139,21,21,.13) 1px, transparent 1px);
            background-size: 58px 58px;
            mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 10%, black 80%);
            -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 10%, black 80%);
            pointer-events: none;
            z-index: 0;
        }
        .has-grid > .container { position: relative; z-index: 1; }
        .sec-glow {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-image:
                linear-gradient(var(--red-b) 1px, transparent 1px),
                linear-gradient(90deg, var(--red-b) 1px, transparent 1px);
            background-size: 58px 58px;
            opacity: 0.7;
        }
        #sol-glow, #cf-glow, #nos-glow {
            mask-image: radial-gradient(ellipse 160px 520px at var(--gx,-999px) var(--gy,-999px), black 0%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 160px 520px at var(--gx,-999px) var(--gy,-999px), black 0%, transparent 100%);
        }

        .sec-hd { text-align:center; margin-bottom:56px; }
        .sec-hd p { color:var(--g2); font-size:1.05rem; max-width:520px; margin:14px auto 0; line-height:1.7; }
        
        .txt-green { color: #78d46b; }
        .txt-red  { color:var(--red-b); }
        .txt-white { color: #ffffff}
        .txt-dim  { color:var(--g2); }

        .divider {
            width:100%; height:1px;
            background: linear-gradient(90deg, transparent, var(--border-r), transparent);
        }
        .rv {
            opacity:0;
            transform:translateY(28px);
            transition: opacity .65s var(--ease), transform .65s var(--ease);
        }
        .rv.on { opacity:1; transform:translateY(0); }
        .d1{ transition-delay:.1s; }
        .d2{ transition-delay:.2s; }
        .d3{ transition-delay:.3s; }
        .d4{ transition-delay:.4s; }

        
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 13px 28px;
            border-radius: 8px;
            font-family: var(--fh);
            font-weight: 600;
            font-size: .93rem;
            letter-spacing: .02em;
            cursor: pointer;
            transition: all .28s var(--ease);
            border: none;
        }
        .btn-lg { padding:17px 38px; font-size:1rem; }

        .btn-primary {
            background: var(--red);
            color: var(--white);
            box-shadow: 0 0 28px var(--red-glow);
        }
        .btn-primary:hover {
            background: var(--red-b);
            box-shadow: 0 0 50px var(--red-glow), 0 0 80px rgba(185,28,28,.18);
            transform: translateY(-2px);
        }

        .btn-ghost {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
        }
        .btn-hero-ghost {
            background: rgba(255,255,255,.12);
            color: #ffffff;
            border: 1px solid rgba(255,255,255,.35);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        .btn-hero-ghost:hover {
            background: rgba(255,255,255,.22);
            border-color: rgba(255,255,255,.6);
            color: #ffffff;
            transform: translateY(-2px);
        }

        .btn-ghost:hover {
            border-color: var(--border-r);
            color: var(--red-b);
            background: var(--red-dim);
        }
        .theme-toggle {
            width: 38px; height: 38px;
            border-radius: 9px;
            background: transparent;
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            color: var(--g2);
            transition: all .25s var(--ease);
            flex-shrink: 0;
        }
        .theme-toggle:hover {
            border-color: var(--border-r);
            color: var(--red-b);
            background: var(--red-dim);
        }
        .theme-toggle svg { transition: transform .4s var(--ease); }
        .theme-toggle:hover svg { transform: rotate(20deg); }
        .icon-sun  { display:none; }
        .icon-moon { display:block; }
        [data-theme="light"] .icon-sun  { display:block; }
        [data-theme="light"] .icon-moon { display:none; }

        
        nav {
            position: fixed;
            inset: 0 0 auto;
            z-index: 100;
            height: 70px;
            padding: 0 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--nav-bg);
            backdrop-filter: blur(22px);
            border-bottom: 1px solid var(--border);
            transition: background .3s, border-color .35s, transform .35s cubic-bezier(.4,0,.2,1);
        }
        nav.scrolled { background: var(--nav-bg-s); }
        nav.nav-hidden { transform: translateY(-100%); }

        .nav-logo {
            flex-shrink: 0;
        }

        .nav-logo img {
            height: 36px;
            background: var(--logo-bg);
            border-radius: var(--logo-br);
            padding: var(--logo-pad);
            border: var(--logo-brd);
            transition: background .35s, border-radius .35s, padding .35s;
        }
        .logo-dark { display: inline; }
        .logo-light { display: none; }
        [data-theme="light"] .logo-dark { display: none; }
        [data-theme="light"] .logo-light { display: inline; }
        .nav-logo img.logo-dark,
        .ft-logo img.logo-dark { background: none; border-radius: 0; padding: 0; border: none; }

        .nav-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-grow: 1;
        }
        .nav-links a {
            font-family: var(--fh);
            font-size: .88rem;
            font-weight: 500;
            color: var(--g2);
            padding: 8px 18px;
            border-radius: 7px;
            transition: all .22s;
            white-space: nowrap;
        }
        .nav-links a:hover { color:var(--text); background:rgba(128,128,128,.1); }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 6px;
        }
        .hamburger span {
            display: block;
            width: 21px; height: 2px;
            background: var(--g1);
            border-radius: 2px;
            transition: all .25s;
        }

        .mob-menu {
            display: none;
            position: fixed;
            top: 70px; left:0; right:0;
            background: var(--mob-bg);
            backdrop-filter: blur(22px);
            border-bottom: 1px solid var(--border);
            padding: 16px 24px 24px;
            z-index: 99;
            flex-direction: column;
            gap: 6px;
        }
        .mob-menu.open { display:flex; }
        .mob-menu a {
            font-family: var(--fh);
            font-size: .95rem;
            font-weight: 500;
            color: var(--g2);
            padding: 13px 16px;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all .22s;
        }
        .mob-menu a:hover { color:var(--text); border-color:var(--border); }
        .mob-menu .mob-cta { color:var(--red-b); border-color:var(--border-r); margin-top:8px; }

        
        #hero {
            position: relative;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            padding-top: 50px;
            overflow: hidden;
        }
        .typing-cursor {
            display: inline-block;
            width: 2px; height: .9em;
            background: var(--red-b);
            margin-left: 2px;
            vertical-align: text-bottom;
            animation: cursor-blink .7s step-end infinite;
            transition: opacity .5s;
        }
        @keyframes cursor-blink {
            0%,100% { opacity:1; }
            50%     { opacity:0; }
        }
        .hero-vw-floor {
            position: absolute;
            left: 0; right: 0;
            bottom: 0;
            height: 35%;
            perspective: 280px;
            perspective-origin: 50% 0%;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
            mask-image: linear-gradient(to bottom, transparent 0%, black 28%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%);
        }
        .hero-vw-floor-inner {
            position: absolute;
            inset: 0;
            transform: rotateX(60deg);
            transform-origin: top center;
            will-change: background-position;
            background-image:
                linear-gradient(rgba(214,38,40,.75) 1px, transparent 1px),
                linear-gradient(90deg, rgba(214,38,40,.45) 1px, transparent 1px);
            background-size: 80px 60px;
            animation: vw-grid-scroll 1.4s linear infinite;
        }
        @keyframes vw-grid-scroll {
            from { background-position: 0 0; }
            to   { background-position: 0 60px; }
        }
        .hero-vw-ceiling {
            position: absolute;
            left: 0; right: 0;
            top: 70px;
            height: 35%;
            perspective: 280px;
            perspective-origin: 50% 100%;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
            mask-image: linear-gradient(to top, transparent 0%, black 28%);
            -webkit-mask-image: linear-gradient(to top, transparent 0%, black 28%);
        }
        .hero-vw-ceiling-inner {
            position: absolute;
            inset: 0;
            transform: rotateX(-60deg);
            transform-origin: bottom center;
            will-change: background-position;
            background-image:
                linear-gradient(rgba(214,38,40,.75) 1px, transparent 1px),
                linear-gradient(90deg, rgba(214,38,40,.45) 1px, transparent 1px);
            background-size: 80px 60px;
            animation: vw-grid-scroll-up 1.4s linear infinite;
        }
        @keyframes vw-grid-scroll-up {
            from { background-position: 0 0; }
            to   { background-position: 0 -60px; }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 860px;
            margin: 0 auto;
            text-align: center;
            padding: var(--pad-hero) 24px clamp(64px, 9vh, 100px);
        }

        .hero-h1 {
            margin-bottom: 22px;
            display: flex;
            align-items: baseline;
            justify-content: center;
            flex-wrap: nowrap;
            gap: .25em;
            white-space: nowrap;
        }
        .word-rotate-wrap {
            display: inline-block;
            position: relative;
            overflow: hidden;
            transition: width .4s cubic-bezier(.4,0,.2,1);
            flex-shrink: 0;
            padding-right: 0.06em;
        }
        .word-rotate-word {
            display: none;
            white-space: nowrap;
        }
        .word-rotate-word.wr-active  { display: block; }
        .word-rotate-word.wr-exit    { display: block; position: absolute; top: 0; left: 0; }
        .wr-letter {
            display: inline-block;
            transform-origin: bottom center;
            background: linear-gradient(135deg, var(--red) 0%, var(--red-b) 55%, #EF4444 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .wr-letter.l-in {
            animation: l-in .3s cubic-bezier(.4,0,.2,1) both;
        }
        .wr-letter.l-out {
            animation: l-out .22s ease both;
        }
        @keyframes l-in {
            from { opacity: 0; transform: translateY(60%); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes l-out {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(-50%); }
        }

        .hero-h1 .grad {
            background: linear-gradient(135deg, var(--red) 0%, var(--red-b) 55%, #EF4444 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-sub {
            font-size: clamp(.98rem, 2vw, 1.2rem);
            color: var(--g2);
            max-width: 580px;
            margin: 0 auto 46px;
            line-height: 1.75;
        }

        .hero-btns {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .hero-stats {
            display: flex;
            gap: 32px;
            justify-content: center;
            margin-top: 72px;
            flex-wrap: nowrap;
            align-items: center;
        }
        .stat-n {
            font-family: var(--fh);
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1;
            white-space: nowrap;
        }
        .stat-l {
            font-size: .72rem;
            color: var(--g3);
            margin-top: 5px;
            letter-spacing: .06em;
            white-space: nowrap;
        }
        .stat-sep { width:1px; height:38px; background:var(--border); align-self:center; }

        .scroll-hint {
            position: absolute;
            bottom: 28px; left:50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
            color: var(--g3);
            font-family: var(--fm);
            font-size: 9px;
            letter-spacing: 2.5px;
            animation: scrollBounce 2.2s infinite;
        }
        @keyframes scrollBounce {
            0%,100%{ transform:translateX(-50%) translateY(0); }
            50%{ transform:translateX(-50%) translateY(7px); }
        }

        
        #problema { padding: var(--pad-section) 0; }

        .prob-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .prob-card {
            padding: clamp(20px, 2.5vw, 30px);
            position: relative;
            overflow: hidden;
        }
        .prob-card:hover { border-color:var(--border-r); background:var(--bg-card-h); }
        @property --spin-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
        @keyframes border-spin { to { --spin-angle: 360deg; } }

        .prob-card::after,
        .serv-card::before,
        .caso-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: conic-gradient(from var(--spin-angle), transparent 0deg, rgba(185,28,28,.9) 55deg, transparent 110deg);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity .3s;
            animation: border-spin 2.2s linear infinite paused;
            pointer-events: none;
            z-index: 1;
        }
        .prob-card:hover::after                  { opacity:1; animation-play-state:running; }
        .serv-card.is-center:hover::before       { opacity:1; animation-play-state:running; }
        .caso-card.is-center:hover::before       { opacity:1; animation-play-state:running; }

        .prob-ico {
            width:46px; height:46px;
            border-radius:10px;
            background: var(--red-dim);
            display:flex; align-items:center; justify-content:center;
            font-size:21px;
            margin-bottom:18px;
        }
        .prob-card h4 { color:var(--text); margin-bottom:10px; font-size:1rem; }
        .prob-card p  { color:var(--g2); font-size:.88rem; line-height:1.65; }

        
        #solucion {
            padding: var(--pad-section) 0;
            background: var(--bg-2);
        }
        .sol-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
        }
        .sol-text h2 { margin-bottom:20px; }
        .sol-text p  { color:var(--g2); margin-bottom:14px; line-height:1.75; }
        .sol-text .btn { margin-top:14px; }

        .sol-card {
            background: var(--bg-card);
            border: 1px solid var(--border-r);
            border-radius: 16px;
            padding: clamp(24px, 3vw, 36px);
            position: relative;
            overflow: hidden;
        }
        .sol-card::after {
            content:'';
            position:absolute;
            bottom:-60%; right:-30%;
            width:300px; height:300px;
            border-radius:50%;
            background: radial-gradient(circle, var(--red-dim) 0%, transparent 70%);
            pointer-events:none;
        }
        .sol-list { display:flex; flex-direction:column; gap:22px; }
        .sol-item { display:flex; align-items:flex-start; gap:14px; }
        .sol-ico {
            width:36px; height:36px; flex-shrink:0;
            border-radius:8px;
            background: var(--red-dim);
            border: 1px solid var(--border-r);
            display:flex; align-items:center; justify-content:center;
            font-size:15px;
        }
        .sol-item h4 { color:var(--text); margin-bottom:3px; }
        .sol-item p  { color:var(--g2); font-size:.84rem; }

        
        #servicios { padding: var(--pad-section) 0; }
        .car-wrap { position: relative; }

        .serv-carousel {
            position: relative;
            padding: 70px 0 60px;
            margin-top: -70px;
            user-select: none;
            overflow: hidden;
            mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
        }

        .serv-track {
            position: relative;
            height: 420px;
            overflow: visible;
        }

        .serv-card {
            position: absolute;
            width: 420px;
            left: calc(50% - 210px);
            top: 0;
            height: 100%;
            border-radius: 16px;
            padding: 36px 38px;
            overflow: hidden;
            box-sizing: border-box;
            transform: translateX(var(--tx,0px)) scale(var(--sc,.8));
            transform-origin: center center;
            opacity: var(--op,0);
            filter: blur(var(--bl,4px));
            will-change: transform, opacity, filter;
            transition:
                transform  .55s cubic-bezier(.4,0,.2,1),
                opacity    .5s  ease,
                filter     .45s ease,
                border-color .35s,
                background   .35s,
                box-shadow   .5s;
            will-change: transform, opacity, filter;
            pointer-events: none;
        }
        .serv-card.is-center {
            pointer-events: auto;
            border-color: var(--border-r);
            box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 30px var(--red-glow);
        }
        .serv-card::after {
            content:'';
            position:absolute;
            bottom:0; left:0; right:0;
            height:2px;
            background: linear-gradient(90deg, var(--red), var(--red-b));
            opacity: 0;
            transition: opacity .4s;
        }
        .car-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 28px;
        }
        .car-dots { display: flex; gap: 8px; align-items: center; }
        .car-dot {
            width: 8px; height: 8px;
            min-width: 0; padding: 0;
            border-radius: 100px;
            background: var(--border);
            cursor: pointer;
            display: block;
            flex-shrink: 0;
            border: none;
            transition: width .35s var(--ease), background .35s var(--ease);
        }
        .car-dot.active {
            width: 28px !important;
            background: var(--red-b);
        }
        .car-progress { display: none; }
        #teamBar      { display: none !important; }
        .card-timer-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            overflow: visible;
        }
        .car-arr-sm {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px; height: 32px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid var(--border-r);
            color: var(--red-b);
            cursor: pointer;
            flex-shrink: 0;
            transition: background .22s, transform .22s;
        }
        .car-arr-sm:hover { background: var(--red-dim); transform: scale(1.1); }
        .car-footer { gap: 14px; }
        @media (max-width: 768px) {
            .serv-track  { height: 420px; }
            .serv-card   { width: 300px; left: calc(50% - 150px); padding: 28px; }
        }

        .serv-num {
            font-family: var(--fm);
            font-size: 10px;
            color: var(--red-b);
            letter-spacing: 2px;
            margin-bottom:18px;
        }
        .serv-ico {
            width:54px; height:54px;
            border-radius:13px;
            background: var(--red-dim);
            border: 1px solid var(--border-r);
            display:flex; align-items:center; justify-content:center;
            font-size:24px;
            margin-bottom:22px;
            transition: all .3s;
        }
        .serv-card:hover .serv-ico { box-shadow:0 0 20px var(--red-glow); background:rgba(139,21,21,.3); }
        .serv-card h3 { color:var(--text); margin-bottom:10px; }
        .serv-card > p { color:var(--g2); font-size:.88rem; line-height:1.65; }

        .feat-list { margin-top:18px; display:flex; flex-direction:column; gap:7px; }
        .feat-item {
            display:flex; align-items:center; gap:9px;
            font-size:.84rem; color:var(--g2);
        }
        .feat-item::before {
            content:'';
            width:5px; height:5px;
            border-radius:50%;
            background: var(--red-b);
            flex-shrink:0;
        }

        
        #como-funciona {
            padding: var(--pad-section) 0;
            background: var(--bg-2);
        }
        .steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 0;
            position: relative;
        }
        .steps::before {
            content:'';
            position:absolute;
            top:43px; left:8%; right:8%;
            height:1px;
            background: linear-gradient(90deg, transparent, var(--border-r), var(--border-r), var(--border-r), transparent);
            transform-origin: left center;
            transform: scaleX(0);
            opacity: 0;
            transition: transform 1.4s linear .1s, opacity .4s ease .1s;
        }
        .steps.steps-visible::before { transform: scaleX(1); opacity: 1; }
        .step {
            text-align:center; padding:0 20px;
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .6s ease, transform .6s ease;
        }
        .step.step-visible { opacity: 1; transform: translateY(0); }

        .step-n {
            width: clamp(68px, 5.5vw, 86px);
            height: clamp(68px, 5.5vw, 86px);
            border-radius:50%;
            background: var(--bg-card);
            border: 2px solid var(--border-r);
            display:flex; align-items:center; justify-content:center;
            margin:0 auto 26px;
            font-family: var(--fm);
            font-size: clamp(1.1rem, 1.4vw, 1.4rem); font-weight:700;
            color: var(--red-b);
            position:relative; z-index:1;
            transition: all .3s;
        }
        .step:hover .step-n {
            background: var(--bg-card);
            background-image: linear-gradient(var(--red-dim), var(--red-dim));
            box-shadow: 0 0 32px var(--red-glow);
            border-color: var(--red-b);
        }
        .step h3 { color:var(--text); margin-bottom:10px; }
        .step p  { color:var(--g2); font-size:.88rem; line-height:1.65; }

        
        #caso-exito { padding: var(--pad-section) 0; }
        .casos-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: start;
        }
        .caso-card {
            border-radius: 16px;
            padding: 28px 30px;
            overflow: hidden;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            border-color: var(--border-r);
            box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 30px var(--red-glow);
            transition: border-color .3s, box-shadow .5s, background .3s;
            position: relative;
        }
        .caso-card:hover {
            box-shadow: 0 16px 56px rgba(0,0,0,.4), 0 0 50px var(--red-glow);
        }
        
        .caso-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(139,21,21,.15) 0%, rgba(0,0,0,0) 80%);
            border-bottom: 1px solid var(--border-r);
            border-radius: 10px 10px 0 0;
            margin: -28px -30px 20px;
            padding: 0;
            position: relative;
            overflow: hidden;
        }
        .caso-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(139,21,21,.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(139,21,21,.08) 1px, transparent 1px);
            background-size: 28px 28px;
            pointer-events: none;
        }
        .caso-banner-logo {
            width: 100%;
            height: 140px;
            object-fit: cover;
            object-position: center;
            display: block;
            position: relative;
            z-index: 1;
            border-radius: 10px 10px 0 0;
        }
        .caso-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 20px 0;
            flex: 1;
            align-content: start;
        }
        .caso-met {
            background: var(--bg-2);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 11px 13px;
            position: relative;
            overflow: hidden;
            cursor: default;
            transition: border-color .3s;
            min-height: 72px;
        }
        .caso-met { cursor: pointer; }
        .caso-met:hover,
        .caso-met.touched { border-color: var(--border-r); }

        
        .met-normal { transition: opacity .22s ease, transform .22s ease; }
        .caso-met:hover .met-normal,
        .caso-met.touched .met-normal {
            opacity: 0; transform: translateY(-5px); pointer-events: none;
        }
        .met-l { font-size:.62rem; color:var(--g3); margin-bottom:4px; letter-spacing:.06em; text-transform:uppercase; }
        .met-v { font-family:var(--fh); font-size:1.3rem; font-weight:700; color:var(--text); line-height:1; }
        .met-c { font-size:.7rem; color:#22C55E; margin-top:4px; }

        
        .met-bars {
            position: absolute; inset: 0; padding: 10px 13px;
            opacity: 0; transform: translateY(5px);
            transition: opacity .22s ease, transform .22s ease;
            display: flex; flex-direction: column; justify-content: center; gap: 6px;
        }
        .caso-met:hover .met-bars,
        .caso-met.touched .met-bars {
            opacity: 1; transform: translateY(0);
        }
        .met-bar-row { display: flex; align-items: center; gap: 6px; }
        .met-bar-lbl { font-size:.6rem; color:var(--g3); font-family:var(--fm); width:30px; flex-shrink:0; }
        .met-bar-track { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
        .met-bar-fill { height:100%; border-radius:3px; width:0%; transition: width .55s cubic-bezier(.4,0,.2,1); }
        .met-bar-before { background: var(--g3); }
        .met-bar-after  { background: linear-gradient(90deg, var(--red), var(--red-b)); }
        .caso-met:hover .met-bar-fill,
        .caso-met.touched .met-bar-fill { width: var(--pct, 0%); }
        .met-bar-val { font-family:var(--fm); font-size:.65rem; color:var(--text); width:28px; text-align:right; flex-shrink:0; }

        .caso-coming {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            gap: 10px;
        }
        .caso-coming-ico { font-size: 2.2rem; }
        .caso-coming-ttl { font-family:var(--fh); font-size:1.1rem; font-weight:600; color:var(--text); }
        .caso-coming p   { color:var(--g3); font-size:.82rem; }

        @media (max-width: 768px) {
            .casos-grid { grid-template-columns: 1fr; gap: 20px; }
            .caso-card  { padding: 22px; }
            .caso-banner { margin: -22px -22px 16px; }
            .caso-banner-logo { height: 120px; }
        }
        @media (max-width: 480px) {
            .caso-card  { padding: 18px; }
            .caso-banner { margin: -18px -18px 14px; }
            .caso-banner-logo { height: 100px; }
            .caso-metrics { gap: 7px; }
            .met-v      { font-size: 1.05rem; }
            .met-l      { font-size: .58rem; }
            .met-c      { font-size: .65rem; }
        }

        
        #nosotros {
            padding: var(--pad-section) 0;
            background: var(--bg-2);
        }
        .nosotros-head {
            text-align: center;
            margin-bottom: 52px;
        }
        .nosotros-head .chip { margin-bottom: 18px; }
        .nosotros-head h2   { margin-bottom: 14px; }
        .nosotros-head p    { color: var(--g2); max-width: 520px; margin: 0 auto; line-height: 1.75; }
        .team-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 0;
            height: 520px;
            border-radius: 18px;
            overflow: hidden;
            transition: grid-template-columns 0.28s ease;
            border: 1px solid var(--border);
        }
        .team-box {
            position: relative;
            overflow: hidden;
            transition: filter 0.25s, opacity 0.25s;
            cursor: pointer;
        }
        .team-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            transition: transform 0.4s ease;
            z-index: 1;
        }
        .team-box:hover .team-img { transform: none; }
        .team-placeholder {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, #141414 0%, #200d0d 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .team-placeholder svg { opacity: 0.15; width: 64px; height: 64px; }
        .team-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 60%, transparent 100%);
            padding: 40px 18px 16px;
            z-index: 2;
            transition: padding 0.25s ease;
        }
        .team-box:hover .team-info { padding: 40px 20px 20px; }
        .team-name {
            font-family: var(--fh);
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 0 4px;
        }
        .team-role {
            display: inline-block;
            font-family: var(--fm);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .7px;
            text-transform: uppercase;
            color: #ffffff;
            background: rgba(139,21,21,.75);
            padding: 2px 8px;
            border-radius: 100px;
            border: 1px solid rgba(185,28,28,.6);
            margin-bottom: 8px;
        }
        .team-founder {
            display: inline-block;
            font-family: var(--fm);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .7px;
            text-transform: uppercase;
            color: #f59e0b;
            background: rgba(245,158,11,.12);
            padding: 2px 8px;
            border-radius: 100px;
            border: 1px solid rgba(245,158,11,.3);
            margin-left: 5px;
            margin-bottom: 8px;
        }
        .team-desc {
            font-size: .78rem;
            color: rgba(255,255,255,.75);
            line-height: 1.6;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.35s ease, opacity 0.3s ease 0.05s;
            margin: 0;
        }
        .team-box:hover .team-desc { max-height: 80px; opacity: 1; }
        .team-grid:hover .team-box              { filter: grayscale(1); opacity: 0.3; }
        .team-grid .team-box:hover              { filter: grayscale(0) !important; opacity: 1 !important; }
        .team-grid:has(#m1:hover) { grid-template-columns: 2fr 0.5fr 0.5fr 0.5fr; }
        .team-grid:has(#m2:hover) { grid-template-columns: 0.5fr 2fr 0.5fr 0.5fr; }
        .team-grid:has(#m3:hover) { grid-template-columns: 0.5fr 0.5fr 2fr 0.5fr; }
        .team-grid:has(#m4:hover) { grid-template-columns: 0.5fr 0.5fr 0.5fr 2fr; }
        .nosotros-cierre {
            margin-top: 40px;
            max-width: 860px;
            margin-left: auto;
            margin-right: auto;
        }
        .nosotros-cierre p {
            color: var(--g2);
            font-size: .9rem;
            line-height: 1.85;
        }
        .nosotros-cierre p + p { margin-top: 14px; }

        @media (max-width: 769px) {
            .team-grid {
                display: flex !important;
                flex-direction: row;
                overflow-x: scroll;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                height: 420px;
                border-radius: 18px;
                gap: 0;
                transition: none !important;
                grid-template-columns: unset !important;
                grid-template-rows: unset !important;
            }
            .team-grid::-webkit-scrollbar { display: none; }
            .team-box {
                flex: 0 0 100%;
                min-height: unset;
                scroll-snap-align: start;
                cursor: default;
                border-radius: 18px;
                overflow: visible;
            }
            .team-box .team-img {
                border-radius: 18px;
            }
            .team-grid .team-box { filter: none !important; opacity: 1 !important; }
            .team-box .team-desc { max-height: 80px; opacity: 1; }
            .team-dots {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 14px;
                margin-top: 16px;
            }
            .team-dot {
                width: 8px; height: 8px;
                border-radius: 100px;
                background: var(--border);
                border: none;
                cursor: pointer;
                transition: width .3s var(--ease), background .3s var(--ease);
                padding: 0;
                flex-shrink: 0;
            }
            .team-dot.active { width: 24px; background: var(--red-b); }
        }
        @media (min-width: 770px) {
            .team-dots { display: none; }
        }

        
        .logo-belt {
            position: relative;
            height: 144px;
            overflow: hidden;
            background: var(--bg-2);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
        }
        .logo-belt-track { display: none; }
        .logo-belt-item {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 48px;
            margin: 0;
            opacity: 0.45;
            filter: grayscale(1) brightness(1.8);
        }
        .logo-belt-item img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }
        .logo-belt-item.belt-xl {
            filter: invert(1) grayscale(1) brightness(1.8) opacity(0.45);
        }
        .logo-belt-item.belt-xl img {
            transform: scale(1.8);
        }

        
        #contacto {
            padding: var(--pad-section) 0;
            position:relative;
            overflow:hidden;
        }
        #contacto::before {
            content:'';
            position:absolute;
            width:900px; height:420px;
            border-radius:50%;
            background: radial-gradient(ellipse, rgba(139,21,21,.11) 0%, transparent 68%);
            top:50%; left:50%;
            transform:translate(-50%,-50%);
            pointer-events:none;
        }
        .ctc-inner {
            position:relative; z-index:2;
            text-align:center;
            max-width:900px;
            margin:0 auto;
        }
        .ctc-inner h2 { margin-bottom:18px; }
        .ctc-inner > p { color:var(--g2); font-size:1.08rem; margin-bottom:44px; line-height:1.75; }
        .ctc-calendar {
            margin: 2.5rem auto 1.75rem;
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid var(--border-r);
            box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 40px var(--red-glow);
            position: relative;
            background: #ffffff;
            height: 23.5rem;
            transition: height .4s cubic-bezier(.4,0,.2,1);
        }
        .ctc-calendar.cal-expanded {
            height: 43rem;
        }
        .ctc-calendar.cal-expanded iframe {
            margin-top: -2.75rem;
            transition: margin-top .4s cubic-bezier(.4,0,.2,1);
        }
        .ctc-calendar iframe {
            width: 100%;
            height: 48rem;
            border: none;
            display: block;
            background: #ffffff;
            margin-top: -12.5rem;
            transition: margin-top .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
        }
        .ctc-calendar iframe.cal-loading {
            opacity: 0;
        }
        .cal-skeleton {
            position: absolute;
            inset: 0;
            background: #ffffff;
            border-radius: inherit;
            z-index: 2;
            pointer-events: none;
        }
        .cal-skeleton.hidden { display: none; }
        .ctc-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
        @media (max-width: 768px) {
            .ctc-calendar { display: none; }
            .ctc-btns { flex-direction: column; align-items: stretch; gap:10px; }
            .ctc-btn  { justify-content: center; padding:15px 24px; }
        }
        @media (max-width: 480px) {
            .ctc-btns .ctc-btn { width: 100%; }
        }

        .ctc-btn {
            display:flex; align-items:center; gap:10px;
            padding:17px 30px;
            border-radius:9px;
            font-family:var(--fh); font-weight:600; font-size:.93rem;
            cursor:pointer;
            transition: all .28s var(--ease);
        }
        .ctc-wa { background:var(--c-wa); color:#fff; box-shadow:0 0 28px rgba(53,184,107,.25); }
        .ctc-ig { background:var(--c-ig); color:#fff; border-color:var(--c-ig); box-shadow:0 0 28px rgba(214,49,122,.25); }
        .ctc-fb { background:var(--c-fb); color:#fff; border-color:var(--c-fb); box-shadow:0 0 28px rgba(48,113,214,.25); }
        .ctc-em { background:var(--c-em); color:#fff; border-color:var(--c-em); box-shadow:0 0 28px rgba(212,69,53,.25); }
        .ctc-wa:hover { background:var(--c-wa-h); transform:translateY(-2px); box-shadow:0 0 50px rgba(53,184,107,.38); }
        .ctc-ig:hover { background:var(--c-ig-h); border-color:var(--c-ig-h); transform:translateY(-2px); box-shadow:0 0 50px rgba(214,49,122,.4); }
        .ctc-fb:hover { background:var(--c-fb-h); border-color:var(--c-fb-h); transform:translateY(-2px); box-shadow:0 0 50px rgba(48,113,214,.38); }
        .ctc-em:hover { background:var(--c-em-h); border-color:var(--c-em-h); transform:translateY(-2px); box-shadow:0 0 50px rgba(212,69,53,.38); }

        
        footer {
            padding: 22px 24px;
            border-top:1px solid var(--border);
            background: var(--bg-2);
        }
        .ft-inner {
            max-width:var(--container-max); margin:0 auto;
            display:flex; align-items:center;
            justify-content:space-between;
            flex-wrap:wrap; gap:20px;
        }
        .ft-logo img { height:52px; background:var(--logo-bg); border-radius:var(--logo-br); padding:var(--logo-pad); transition: background .35s; }
        .ft-copy { font-size:.78rem; color:var(--g3); }
        .ft-links { display:flex; gap:22px; }
        .ft-links a { font-size:.82rem; color:var(--g3); transition:color .22s; }
        .ft-links a:hover { color:var(--red-b); }
        @media (max-height: 820px) {
            h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
            h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
            .hero-content { padding: clamp(36px, 5vh, 56px) 24px clamp(40px, 5vh, 60px); }
            .hero-sub { margin-bottom: 28px; }
            .hero-stats { margin-top: 36px; }
            .stat-n { font-size: 1.25rem; }
            .scroll-hint { bottom: 12px; }
        }
        @media (max-width: 1400px) {
            .container { max-width: 1060px; }
        }
        @media (max-width: 1024px) {
            .nav-links { gap: 2px; }
            .nav-links a { padding: 8px 12px; font-size: .84rem; }
            nav { padding: 0 20px; }
        }
        @media (max-width: 768px) {
            .nav-links { display:none; }
            nav .btn  { display:none; }
            .hamburger { display:flex; }
            nav { padding: 0 20px; }

            .prob-grid   { grid-template-columns: repeat(2, 1fr); }
            .sol-inner   { grid-template-columns:1fr; gap:28px; }
            .sol-text    { text-align: center; }
            .sol-text .btn { margin-left: auto; margin-right: auto; }
            .steps::before { display:none; }
            .steps { display:flex; gap:32px; flex-direction: column; align-items: center; }
            .step { width: 100%; max-width: 360px; text-align: center; }

            h1 { font-size: clamp(1.9rem, 6vw, 2.3rem); }
            h2 { font-size: clamp(1.55rem, 5vw, 1.85rem); }
            .hero-stats { gap:18px; flex-wrap: wrap; justify-content:center; }
            .stat-sep  { display:none; }
            .stat-n { font-size:1.35rem; white-space:normal; text-align:center; }
            .stat-l { white-space:normal; text-align:center; }
            #contacto::before { width:500px; height:280px; }
            .ctc-inner > p { font-size:.95rem; margin-bottom:32px; }
            .ctc-btn  { justify-content: center; padding:15px 24px; }
            .ft-inner { flex-direction: column; align-items: center; gap:16px; text-align:center; }
            .ft-links { flex-wrap: wrap; justify-content: center; gap:14px; }
            .logo-belt-item { height:36px; }
        }
        @media (max-width: 480px) {
            .container { padding:0 16px; }
            .hero-content { padding: clamp(44px, 7vh, 70px) 16px clamp(52px, 8vh, 80px); }
            .hero-h1 { display: block; white-space: normal; font-size: clamp(2.4rem, 10vw, 3rem); }
            .hero-h1 > span:first-child { display: block; margin-bottom: 4px; }
            .word-rotate-wrap { display: block; width: 100% !important; transition: none !important; text-align: center; overflow: visible; min-height: 1.15em; }
            .word-rotate-word { width: 100%; text-align: center; }
            .word-rotate-word.wr-exit { width: 100%; text-align: center; }
            .hero-btns { flex-direction: column; align-items: center; gap:10px; width: 100%; margin-top: 32px; }
            .hero-btns .btn { width:100%; justify-content:center; }
            .hero-stats { gap:16px; }
            .stat-n { font-size:1.1rem; }
            .stat-l { font-size:.68rem; }
            .hero-vw-floor  { height:22%; }
            .hero-vw-ceiling { height:22%; }
            .prob-grid   { grid-template-columns: 1fr; }
            .sec-hd { margin-bottom:36px; }
            .chip { font-size:10px; padding:4px 10px; margin-bottom:12px; }
            .serv-card { width:280px; left:calc(50% - 140px); padding:20px; }
            .serv-track { height:400px; }
            .serv-ico { width:46px; height:46px; font-size:20px; margin-bottom:16px; }
            .caso-card  { padding:18px; }
            .caso-banner { margin:-18px -18px 14px; }
            .caso-banner-logo { height:100px; }
            .caso-metrics { gap:7px; }
            .met-v { font-size:1.05rem; }
            .met-l { font-size:.58rem; }
            .met-c { font-size:.65rem; }
            .team-box { min-height:110px; }
            #contacto::before { width:300px; height:200px; }
            .ctc-btn { padding:13px 20px; font-size:.88rem; }
            .ft-logo img { height:40px; }
            .ft-copy { font-size:.72rem; }
            .ft-links a { font-size:.76rem; }
            .founder-card { padding:24px; }
            .step { max-width:300px; }
            nav, .mob-menu {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
        }