:root {
            /* base grafito medio — ni negro duro ni navy */
            --bg: #23262d;
            --bg-2: #282c34;
            --surface: rgba(255, 255, 255, .025);
            --surface-2: rgba(255, 255, 255, .045);
            --ink: #eef0f4;
            --ink-dim: #a4a9b4;
            --ink-faint: #6f7480;
            /* un único acento */
            --accent: #788cff;
            --accent-bright: #9aa9ff;
            --accent-soft: rgba(120, 140, 255, .14);
            --line: rgba(255, 255, 255, .08);
            --line-2: rgba(255, 255, 255, .15);
            --maxw: 1180px;
            --ease: cubic-bezier(.2, .7, .2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            background: var(--bg);
            color: var(--ink);
            font-family: 'Sora', system-ui, sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        ::selection {
            background: var(--accent-soft);
            color: var(--ink)
        }

        /* una sola atmósfera sutil, monocromo */
        .atmo {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(closest-side at 12% 0%, rgba(120, 140, 255, .12), transparent 60%),
                radial-gradient(closest-side at 88% 18%, rgba(120, 140, 255, .06), transparent 60%);
        }

        .wrap {
            position: relative;
            z-index: 2;
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 0 32px
        }

        /* idioma */
        [data-lang] {
            display: none
        }

        body.lang-es [data-lang="es"],
        body.lang-en [data-lang="en"] {
            display: revert
        }

        body.lang-es span[data-lang="es"],
        body.lang-en span[data-lang="en"] {
            display: inline
        }

        /* ── NAV ── */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            backdrop-filter: blur(18px) saturate(130%);
            background: rgba(35, 38, 45, .72);
            border-bottom: 1px solid transparent;
            transition: border-color .3s, background .3s
        }

        nav.scrolled {
            border-bottom-color: var(--line);
            background: rgba(33, 36, 42, .85)
        }

        .nav-in {
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 17px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            font-weight: 600;
            font-size: 15px;
            letter-spacing: -.01em;
            text-decoration: none;
            color: inherit
        }

        .brand .mark {
            width: 26px;
            height: 26px;
            flex-shrink: 0
        }

        .brand b {
            font-weight: 600
        }

        .brand i {
            color: var(--ink-faint);
            font-style: normal;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
            font-weight: 400
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 34px;
            font-size: 14px
        }

        .nav-links a {
            color: var(--ink-dim);
            text-decoration: none;
            transition: color .2s;
            position: relative;
            font-weight: 400
        }

        .nav-links a:hover,
        .nav-links a.cur {
            color: var(--ink)
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 0;
            height: 1.5px;
            background: var(--accent);
            transition: width .3s var(--ease);
            border-radius: 2px
        }

        .nav-links a:hover::after,
        .nav-links a.cur::after {
            width: 100%
        }

        .lang-toggle {
            display: flex;
            border: 1px solid var(--line-2);
            border-radius: 8px;
            overflow: hidden;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px
        }

        .lang-toggle button {
            background: transparent;
            color: var(--ink-dim);
            border: none;
            padding: 7px 11px;
            cursor: pointer;
            transition: .2s;
            letter-spacing: .05em
        }

        .lang-toggle button.active {
            background: var(--accent);
            color: #fff;
            font-weight: 500
        }

        @media(max-width:820px) {
            .nav-links a:not(.lang-li) {
                display: none
            }
        }

        /* ── HERO (centrado) ── */
        header {
            padding: 200px 0 56px;
            position: relative;
            text-align: center
        }

        .hero-inner {
            max-width: 840px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center
        }

        @media(max-width:940px) {
            header {
                padding: 150px 0 44px
            }
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--ink-dim);
            letter-spacing: .04em;
            margin-bottom: 30px;
            opacity: 0;
            animation: rise .7s .05s var(--ease) forwards
        }

        .eyebrow .pip {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 4px var(--accent-soft);
            animation: pulse 2.6s ease-in-out infinite
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .4
            }
        }

        h1 {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: clamp(2.7rem, 6vw, 4.8rem);
            line-height: 1.02;
            letter-spacing: -.025em;
            margin-bottom: 30px
        }

        h1 .l {
            display: block;
            opacity: 0;
            animation: rise .85s var(--ease) forwards
        }

        h1 .l:nth-child(1) {
            animation-delay: .14s
        }

        h1 .l:nth-child(2) {
            animation-delay: .26s
        }

        h1 em {
            font-style: italic;
            color: var(--accent-bright)
        }

        .lede {
            max-width: 580px;
            margin: 0 auto 42px;
            font-size: clamp(1.05rem, 1.6vw, 1.22rem);
            color: var(--ink-dim);
            font-weight: 300;
            opacity: 0;
            animation: rise .85s .4s var(--ease) forwards
        }

        .lede strong {
            color: var(--ink);
            font-weight: 500
        }

        .hero-cta {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
            opacity: 0;
            animation: rise .85s .52s var(--ease) forwards
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(26px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .btn {
            font-size: 14.5px;
            font-weight: 500;
            text-decoration: none;
            padding: 15px 26px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            transition: transform .3s var(--ease), background .25s, border-color .25s, box-shadow .3s;
            cursor: pointer;
            border: 1px solid transparent;
            will-change: transform
        }

        .btn-primary {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 8px 26px rgba(120, 140, 255, .28)
        }

        .btn-primary:hover {
            box-shadow: 0 14px 40px rgba(120, 140, 255, .42)
        }

        .btn-ghost {
            border: 1px solid var(--line-2);
            color: var(--ink);
            background: var(--surface)
        }

        .btn-ghost:hover {
            border-color: var(--ink-faint);
            background: var(--surface-2)
        }

        .btn .arr {
            transition: transform .25s var(--ease)
        }

        .btn:hover .arr {
            transform: translate(3px, -3px)
        }

        /* hero visual — minimal monocromo */
        .hero-visual {
            position: relative;
            margin: 60px auto 0;
            opacity: 0;
            animation: fadeScale 1.2s .6s var(--ease) forwards;
            display: flex;
            justify-content: center
        }

        @keyframes fadeScale {
            from {
                opacity: 0;
                transform: scale(.95)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @media(max-width:940px) {
            .hero-visual {
                margin-top: 44px;
                max-width: 320px
            }

            .hero-visual svg {
                width: 280px;
                height: 280px
            }
        }

        .orbit {
            animation: spin 44s linear infinite;
            transform-origin: center
        }

        .orbit-rev {
            animation: spin 32s linear infinite reverse;
            transform-origin: center
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .floaty {
            animation: floaty 7s ease-in-out infinite
        }

        @keyframes floaty {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-12px)
            }
        }

        .node {
            animation: nodepulse 3.4s ease-in-out infinite
        }

        @keyframes nodepulse {

            0%,
            100% {
                opacity: .45
            }

            50% {
                opacity: 1
            }
        }

        /* ── TRUST ── */
        .trust {
            margin-top: 96px;
            padding-top: 36px;
            border-top: 1px solid var(--line);
            opacity: 0;
            animation: rise .85s .7s var(--ease) forwards
        }

        .trust .lbl {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--ink-faint);
            letter-spacing: .14em;
            text-transform: uppercase;
            margin-bottom: 22px
        }

        .trust .logos {
            display: flex;
            flex-wrap: wrap;
            gap: 16px 40px;
            align-items: center
        }

        .trust .logos span {
            font-size: 1.05rem;
            font-weight: 500;
            color: var(--ink-dim);
            opacity: .7;
            transition: .25s
        }

        .trust .logos span:hover {
            opacity: 1;
            color: var(--ink)
        }

        /* ── EXPERIENCIA / EMPRESAS ── */
        .exp {
            padding: 60px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            text-align: center;
            background:
                radial-gradient(closest-side at 50% 0%, var(--accent-soft), transparent 70%)
        }

        .exp .exp-lbl {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
            color: var(--accent-bright);
            letter-spacing: .16em;
            text-transform: uppercase;
            margin-bottom: 28px;
            display: inline-flex;
            align-items: center;
            gap: 11px
        }

        .exp .exp-lbl::before,
        .exp .exp-lbl::after {
            content: "";
            width: 22px;
            height: 1px;
            background: var(--accent);
            opacity: .55
        }

        .exp .exp-logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 16px 38px
        }

        .exp .exp-logos b {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: clamp(1.35rem, 3vw, 2rem);
            color: var(--ink-dim);
            letter-spacing: -.01em;
            transition: color .3s var(--ease), transform .3s var(--ease)
        }

        .exp .exp-logos b:hover {
            color: var(--ink);
            transform: translateY(-2px)
        }

        .exp .exp-logos .dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            opacity: .5
        }

        @media(max-width:600px) {
            .exp {
                padding: 46px 0
            }

            .exp .exp-logos .dot {
                display: none
            }
        }

        /* ── SECTION ── */
        section {
            padding: 110px 0;
            position: relative
        }

        .sec-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 64px;
            flex-wrap: wrap
        }

        .sec-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
            color: var(--accent-bright);
            letter-spacing: .14em;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 11px
        }

        .sec-tag::before {
            content: "";
            width: 22px;
            height: 1px;
            background: var(--accent)
        }

        h2 {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 1.06;
            letter-spacing: -.022em;
            margin-top: 20px;
            max-width: 16ch
        }

        h2 em {
            font-style: italic;
            color: var(--accent-bright)
        }

        .sec-desc {
            max-width: 380px;
            color: var(--ink-dim);
            font-size: 1.02rem;
            font-weight: 300;
            padding-bottom: 6px
        }

        /* ── VALUE PROPS ── */
        .vp-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden
        }

        @media(max-width:780px) {
            .vp-grid {
                grid-template-columns: 1fr
            }
        }

        .vp {
            background: var(--bg);
            padding: 40px 34px;
            transition: background .3s
        }

        .vp:hover {
            background: var(--bg-2)
        }

        .vp .vp-n {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--accent-bright);
            margin-bottom: 18px
        }

        .vp h3 {
            font-size: 1.18rem;
            font-weight: 600;
            margin-bottom: 11px
        }

        .vp p {
            color: var(--ink-dim);
            font-size: .96rem;
            font-weight: 300
        }

        /* ── SERVICES ── */
        .svc-list {
            border-top: 1px solid var(--line)
        }

        .svc {
            display: grid;
            grid-template-columns: 80px 1.1fr 1.4fr auto;
            gap: 30px;
            align-items: center;
            padding: 34px 8px;
            border-bottom: 1px solid var(--line);
            position: relative;
            transition: padding .35s var(--ease)
        }

        .svc::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0;
            background: var(--accent);
            opacity: 0;
            transition: opacity .3s
        }

        .svc:hover {
            padding-left: 22px;
            padding-right: 22px
        }

        .svc:hover::before {
            width: 2px;
            opacity: 1
        }

        .svc .num {
            font-family: 'Fraunces', serif;
            font-style: italic;
            font-size: 1.7rem;
            color: var(--ink-faint);
            transition: color .3s
        }

        .svc:hover .num {
            color: var(--accent-bright)
        }

        .svc h3 {
            font-family: 'Fraunces', serif;
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 1.12
        }

        .svc .blurb {
            color: var(--ink-dim);
            font-size: .98rem;
            font-weight: 300
        }

        .svc .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            justify-content: flex-end
        }

        .svc .tags span {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10.5px;
            color: var(--ink-dim);
            border: 1px solid var(--line);
            padding: 4px 10px;
            border-radius: 20px;
            white-space: nowrap
        }

        @media(max-width:900px) {
            .svc {
                grid-template-columns: 50px 1fr;
                gap: 8px 18px;
                padding: 28px 6px
            }

            .svc .num {
                grid-row: 1 / 3;
                font-size: 1.4rem
            }

            .svc .blurb {
                grid-column: 2
            }

            .svc .tags {
                grid-column: 2;
                justify-content: flex-start;
                margin-top: 4px
            }

            .svc:hover {
                padding-left: 14px;
                padding-right: 6px
            }
        }

        /* ── SHOWCASE ── */
        .showcase-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 70px
        }

        @media(max-width:880px) {
            .showcase-grid {
                grid-template-columns: 1fr;
                gap: 16px
            }
        }

        .shot {
            position: relative;
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden;
            aspect-ratio: 4/3.2;
            background: var(--bg-2);
            transition: transform .5s var(--ease), border-color .4s
        }

        .shot img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* duotono sutil para integrar con la paleta */
            filter: grayscale(.85) brightness(.78) contrast(1.05);
            transition: filter .6s var(--ease), transform .7s var(--ease)
        }

        .shot::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 22%, rgba(18, 20, 25, .55) 58%, rgba(13, 14, 18, .95)),
                linear-gradient(160deg, var(--accent-soft), transparent 60%);
            pointer-events: none
        }

        .shot figcaption {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 20px;
            z-index: 2;
            text-shadow: 0 1px 12px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .5)
        }

        .shot .shot-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10.5px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--accent-bright);
            display: block;
            margin-bottom: 7px
        }

        .shot .shot-title {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: 1.18rem;
            line-height: 1.18
        }

        /* leyendas del showcase: mostrar solo el idioma activo */
        body.lang-es .shot [data-lang="en"],
        body.lang-en .shot [data-lang="es"] {
            display: none
        }

        body.lang-es .shot [data-lang="es"],
        body.lang-en .shot [data-lang="en"] {
            display: block
        }

        .shot:hover {
            transform: translateY(-6px);
            border-color: var(--line-2)
        }

        .shot:hover img {
            filter: grayscale(.2) brightness(.92) contrast(1.02);
            transform: scale(1.05)
        }

        /* ── PROJECTS ── */
        .proj-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }

        @media(max-width:900px) {
            .proj-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:560px) {
            .proj-grid {
                grid-template-columns: 1fr
            }
        }

        .proj {
            border: 1px solid var(--line);
            border-radius: 16px;
            background: var(--surface);
            padding: 30px 28px;
            transition: .3s var(--ease);
            position: relative;
            overflow: hidden
        }

        .proj::after {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), transparent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s var(--ease)
        }

        .proj:hover {
            border-color: var(--line-2);
            background: var(--surface-2);
            transform: translateY(-4px)
        }

        .proj:hover::after {
            transform: scaleX(1)
        }

        .proj-cat {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10.5px;
            color: var(--accent-bright);
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-bottom: 16px
        }

        .proj h3 {
            font-family: 'Fraunces', serif;
            font-size: 1.32rem;
            font-weight: 500;
            line-height: 1.15;
            margin-bottom: 11px
        }

        .proj p {
            color: var(--ink-dim);
            font-size: .94rem;
            font-weight: 300
        }

        .proj-cta {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(160deg, var(--accent-soft), transparent 70%)
        }

        .proj-link {
            margin-top: 16px;
            align-self: flex-start;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12.5px;
            color: var(--accent-bright);
            text-decoration: none;
            border: 1px solid var(--line-2);
            padding: 8px 16px;
            border-radius: 30px;
            transition: .22s
        }

        .proj-link:hover {
            background: var(--accent);
            color: #fff;
            border-color: transparent
        }

        /* ── PROCESS ── */
        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden;
            counter-reset: s
        }

        @media(max-width:860px) {
            .steps {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:520px) {
            .steps {
                grid-template-columns: 1fr
            }
        }

        .step {
            background: var(--bg);
            padding: 36px 30px;
            transition: background .3s
        }

        .step:hover {
            background: var(--bg-2)
        }

        .step .sn {
            font-family: 'Fraunces', serif;
            font-style: italic;
            font-size: 2rem;
            color: var(--accent-bright);
            margin-bottom: 16px;
            display: block
        }

        .step .sn::before {
            counter-increment: s;
            content: "0" counter(s)
        }

        .step h4 {
            font-size: 1.08rem;
            font-weight: 600;
            margin-bottom: 8px
        }

        .step p {
            color: var(--ink-dim);
            font-size: .92rem;
            font-weight: 300
        }

        /* ── USE CASES (explorador por áreas) ── */
        .uc-areas {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 28px
        }

        @media(max-width:880px) {
            .uc-areas {
                grid-template-columns: repeat(2, 1fr);
                gap: 9px
            }
        }

        .uc-area {
            text-align: left;
            font-family: 'Sora', sans-serif;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 20px 19px 17px;
            cursor: pointer;
            color: var(--ink);
            display: flex;
            flex-direction: column;
            gap: 6px;
            position: relative;
            overflow: hidden;
            transition: .28s var(--ease)
        }

        .uc-area::after {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), transparent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s var(--ease)
        }

        .uc-area:hover {
            border-color: var(--line-2);
            background: var(--surface-2);
            transform: translateY(-3px)
        }

        .uc-area.active {
            border-color: var(--accent);
            background: var(--accent-soft)
        }

        .uc-area.active::after {
            transform: scaleX(1)
        }

        .uc-a-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px
        }

        .uc-a-n {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--accent-bright)
        }

        .uc-a-c {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--ink-faint);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 3px 9px;
            white-space: nowrap;
            transition: .25s
        }

        .uc-area.active .uc-a-c {
            color: var(--accent-bright);
            border-color: var(--accent)
        }

        .uc-a-t {
            font-weight: 600;
            font-size: 1.02rem;
            line-height: 1.25
        }

        .uc-a-d {
            color: var(--ink-dim);
            font-size: .82rem;
            font-weight: 300;
            line-height: 1.45
        }

        @media(max-width:880px) {
            .uc-area {
                padding: 15px 14px 13px
            }

            .uc-a-d {
                display: none
            }

            .uc-a-t {
                font-size: .94rem
            }
        }

        .uc-empty {
            border: 1px dashed var(--line-2);
            border-radius: 16px;
            padding: 44px 24px;
            text-align: center;
            color: var(--ink-faint);
            font-size: .95rem;
            font-weight: 300
        }

        .uc-empty .uc-e-arrow {
            display: block;
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: var(--accent-bright);
            animation: floaty 3s ease-in-out infinite
        }

        .uc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px
        }

        @media(max-width:980px) {
            .uc-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:620px) {
            .uc-grid {
                grid-template-columns: 1fr
            }
        }

        .uc {
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--surface);
            padding: 24px 22px;
            transition: border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease);
            position: relative;
            overflow: hidden;
            opacity: 0;
            animation: ucIn .5s var(--ease) forwards
        }

        @keyframes ucIn {
            from {
                opacity: 0;
                transform: translateY(18px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .uc:hover {
            border-color: var(--line-2);
            background: var(--surface-2);
            transform: translateY(-3px)
        }

        .uc .cat {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--accent-bright);
            letter-spacing: .07em;
            text-transform: uppercase;
            margin-bottom: 12px;
            display: inline-block
        }

        .uc h4 {
            font-size: 1.02rem;
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1.3
        }

        .uc p {
            color: var(--ink-dim);
            font-size: .88rem;
            font-weight: 300;
            line-height: 1.55
        }


        /* ── ABOUT ── */
        #sobre .about-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 64px;
            align-items: center
        }

        @media(max-width:860px) {
            #sobre .about-grid {
                grid-template-columns: 1fr;
                gap: 44px
            }
        }

        .about-text p {
            color: var(--ink-dim);
            font-size: 1.04rem;
            font-weight: 300;
            margin-bottom: 18px
        }

        .about-text p strong {
            color: var(--ink);
            font-weight: 500
        }

        .about-card {
            border: 1px solid var(--line);
            border-radius: 22px;
            background: var(--surface);
            padding: 8px;
            overflow: hidden
        }

        .about-card .ai-orb {
            height: 300px;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(closest-side at 50% 45%, rgba(120, 140, 255, .14), transparent 70%),
                linear-gradient(160deg, var(--bg-2), var(--bg))
        }

        .about-card .ai-orb svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%
        }

        .ao-pulse {
            transform-origin: center;
            animation: pr 3.6s ease-out infinite
        }

        @keyframes pr {
            0% {
                transform: scale(.6);
                opacity: .7
            }

            100% {
                transform: scale(1.5);
                opacity: 0
            }
        }

        .about-meta {
            padding: 24px 22px 16px
        }

        .about-meta .name {
            font-family: 'Fraunces', serif;
            font-size: 1.45rem;
            font-weight: 500;
            margin-bottom: 4px
        }

        .about-meta .role {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--accent-bright);
            margin-bottom: 22px
        }

        .about-meta .cred {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .about-meta .cred-pill {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
            color: var(--ink-dim);
            border: 1px solid var(--line);
            border-radius: 9px;
            padding: 9px 13px;
            background: var(--bg);
            display: flex;
            align-items: center;
            gap: 9px
        }

        .about-meta .cred-pill::before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            flex-shrink: 0
        }

        /* ── CTA ── */
        #empezar {
            padding: 120px 0;
            text-align: center
        }

        .cta-box {
            position: relative;
            border: 1px solid var(--line);
            border-radius: 26px;
            background: linear-gradient(165deg, var(--accent-soft), transparent 70%), var(--surface);
            padding: 80px 40px;
            overflow: hidden
        }

        .cta-box .sec-tag {
            justify-content: center;
            margin-bottom: 22px
        }

        .cta-box h2 {
            margin: 0 auto 20px;
            max-width: 20ch
        }

        .cta-box p {
            color: var(--ink-dim);
            font-weight: 300;
            max-width: 480px;
            margin: 0 auto 40px;
            font-size: 1.08rem
        }

        .contact-info {
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            justify-content: center;
            margin-top: 28px
        }

        .contact-pill {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--ink-dim);
            border: 1px solid var(--line);
            background: var(--bg);
            padding: 9px 16px;
            border-radius: 30px;
            text-decoration: none;
            transition: .22s
        }

        .contact-pill:hover {
            border-color: var(--accent);
            color: var(--ink)
        }

        /* ── QUIZ ── */
        .quiz {
            max-width: 620px;
            margin: 14px auto 0;
            border: 1px solid var(--line-2);
            border-radius: 20px;
            background: rgba(35, 38, 45, .6);
            backdrop-filter: blur(10px);
            padding: 28px 30px 24px;
            text-align: left
        }

        @media(max-width:560px) {
            .quiz {
                padding: 24px 20px 20px
            }
        }

        .quiz-bar {
            height: 4px;
            border-radius: 4px;
            background: var(--line);
            overflow: hidden
        }

        .quiz-bar span {
            display: block;
            height: 100%;
            width: 20%;
            border-radius: 4px;
            background: var(--accent);
            transition: width .4s var(--ease)
        }

        .quiz-steplbl {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--ink-faint);
            letter-spacing: .08em;
            text-transform: uppercase;
            margin: 16px 0 6px
        }

        .quiz-body {
            min-height: 230px
        }

        .quiz-q {
            font-family: 'Fraunces', serif;
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 1.18;
            margin-bottom: 20px;
            animation: rise .4s var(--ease)
        }

        .quiz-opts {
            display: grid;
            gap: 9px
        }

        @media(min-width:480px) {
            .quiz-opts.cols {
                grid-template-columns: 1fr 1fr
            }
        }

        .quiz-opt {
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
            font-family: 'Sora', sans-serif;
            font-size: .95rem;
            color: var(--ink);
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 14px 16px;
            cursor: pointer;
            transition: .2s var(--ease)
        }

        .quiz-opt:hover {
            border-color: var(--line-2);
            background: var(--surface-2)
        }

        .quiz-opt .tick {
            width: 18px;
            height: 18px;
            border-radius: 6px;
            border: 1.5px solid var(--line-2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .2s
        }

        .quiz-opt.sel {
            border-color: var(--accent);
            background: var(--accent-soft)
        }

        .quiz-opt.sel .tick {
            background: var(--accent);
            border-color: var(--accent)
        }

        .quiz-opt.sel .tick::after {
            content: "✓";
            color: #fff;
            font-size: 11px;
            font-weight: 700
        }

        .quiz-field {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .quiz-field input,
        .quiz-field textarea {
            background: var(--bg);
            border: 1px solid var(--line-2);
            border-radius: 12px;
            padding: 13px 15px;
            color: var(--ink);
            font-family: 'Sora', sans-serif;
            font-size: .95rem;
            outline: none;
            transition: .2s;
            width: 100%;
            resize: vertical
        }

        .quiz-field input::placeholder,
        .quiz-field textarea::placeholder {
            color: var(--ink-faint)
        }

        .quiz-field input:focus,
        .quiz-field textarea:focus {
            border-color: var(--accent)
        }

        .quiz-free {
            margin-top: 14px;
            background: var(--bg);
            border: 1px solid var(--line-2);
            border-radius: 12px;
            padding: 13px 15px;
            color: var(--ink);
            font-family: 'Sora', sans-serif;
            font-size: .95rem;
            outline: none;
            transition: .2s;
            width: 100%;
            resize: vertical
        }

        .quiz-free::placeholder {
            color: var(--ink-faint)
        }

        .quiz-free:focus {
            border-color: var(--accent)
        }

        .quiz-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-top: 22px
        }

        .quiz-back,
        .quiz-next {
            font-family: 'Sora', sans-serif;
            font-size: 14px;
            font-weight: 500;
            border-radius: 11px;
            padding: 12px 22px;
            cursor: pointer;
            transition: .25s var(--ease);
            border: 1px solid transparent
        }

        .quiz-back {
            background: transparent;
            color: var(--ink-dim);
            border-color: var(--line-2)
        }

        .quiz-back:hover {
            color: var(--ink);
            border-color: var(--ink-faint)
        }

        .quiz-back[disabled] {
            opacity: 0;
            pointer-events: none
        }

        .quiz-next {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 8px 24px rgba(120, 140, 255, .3);
            margin-left: auto
        }

        .quiz-next[disabled] {
            opacity: .4;
            cursor: not-allowed;
            box-shadow: none
        }

        .quiz-done {
            text-align: center;
            padding: 20px 0;
            animation: rise .5s var(--ease)
        }

        .quiz-done .ok {
            width: 54px;
            height: 54px;
            margin: 0 auto 16px;
            border-radius: 50%;
            background: var(--accent-soft);
            border: 1px solid var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-bright);
            font-size: 24px
        }

        .quiz-done h3 {
            font-family: 'Fraunces', serif;
            font-size: 1.5rem;
            font-weight: 500;
            margin-bottom: 10px
        }

        .quiz-done p {
            color: var(--ink-dim);
            font-weight: 300;
            max-width: 380px;
            margin: 0 auto 20px
        }

        .quiz-ref {
            display: inline-block;
            margin: 0 auto 20px;
            padding: 9px 16px;
            border: 1px dashed var(--line-2);
            border-radius: 10px;
            font-family: 'JetBrains Mono', monospace;
            font-size: .82rem;
            color: var(--ink-dim);
            letter-spacing: .04em
        }

        .quiz-ref b {
            color: var(--accent);
            font-weight: 600
        }

        /* ── FAQ ── */
        .faq-list {
            max-width: 820px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .faq-item {
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--bg-2);
            padding: 0 22px;
            transition: border-color .2s
        }

        .faq-item[open] {
            border-color: var(--line-2)
        }

        .faq-item summary {
            list-style: none;
            cursor: pointer;
            padding: 18px 0;
            font-family: 'Sora', sans-serif;
            font-size: 1.02rem;
            font-weight: 500;
            color: var(--ink);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px
        }

        .faq-item summary::-webkit-details-marker {
            display: none
        }

        .faq-item summary::after {
            content: '+';
            font-size: 1.5rem;
            font-weight: 300;
            color: var(--accent);
            transition: transform .25s;
            line-height: 1;
            flex-shrink: 0
        }

        .faq-item[open] summary::after {
            transform: rotate(45deg)
        }

        .faq-a {
            padding: 0 0 20px;
            color: var(--ink-dim);
            font-weight: 300;
            line-height: 1.6;
            max-width: 680px
        }

        /* ── FOOTER ── */
        footer {
            border-top: 1px solid var(--line);
            padding: 44px 0;
            position: relative;
            z-index: 2
        }

        .foot-in {
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 0 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--ink-faint)
        }

        .foot-in a {
            color: var(--ink-dim);
            text-decoration: none;
            transition: .2s
        }

        .foot-in a:hover {
            color: var(--accent-bright)
        }

        .foot-legal {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 10px;
            align-items: center
        }

        /* ── LEGAL MODAL (Aviso legal · Privacidad · Cookies) ── */
        .legal-ov {
            position: fixed;
            inset: 0;
            z-index: 300;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: 80px 20px 40px;
            background: rgba(20, 22, 27, .72);
            backdrop-filter: blur(8px);
            overflow-y: auto
        }

        .legal-ov.open {
            display: flex
        }

        .legal-modal {
            position: relative;
            width: 100%;
            max-width: 760px;
            background: var(--bg-2);
            border: 1px solid var(--line-2);
            border-radius: 20px;
            padding: 40px 42px 44px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
            animation: rise .4s var(--ease)
        }

        @media(max-width:560px) {
            .legal-modal {
                padding: 30px 22px 32px
            }
        }

        .legal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--ink-dim);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .2s
        }

        .legal-close:hover {
            color: var(--ink);
            border-color: var(--line-2);
            background: var(--surface-2)
        }

        .legal-modal .legal-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--accent-bright);
            letter-spacing: .14em;
            text-transform: uppercase;
            margin-bottom: 12px
        }

        .legal-modal h2 {
            font-family: 'Fraunces', serif;
            font-size: 1.9rem;
            margin: 0 0 6px;
            max-width: none
        }

        .legal-modal .legal-upd {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--ink-faint);
            margin-bottom: 24px
        }

        .legal-body {
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 8px
        }

        .legal-body h3 {
            font-size: 1.02rem;
            font-weight: 600;
            margin: 22px 0 8px;
            color: var(--ink)
        }

        .legal-body h3:first-child {
            margin-top: 0
        }

        .legal-body p,
        .legal-body li {
            color: var(--ink-dim);
            font-size: .94rem;
            font-weight: 300;
            line-height: 1.7
        }

        .legal-body ul {
            margin: 6px 0 6px 18px
        }

        .legal-body li {
            margin-bottom: 4px
        }

        .legal-body a {
            color: var(--accent-bright);
            text-decoration: none
        }

        .legal-body a:hover {
            text-decoration: underline
        }

        .legal-body strong {
            color: var(--ink);
            font-weight: 500
        }

        .legal-body .legal-fill {
            color: var(--accent-bright);
            font-style: italic
        }

        .legal-body::-webkit-scrollbar {
            width: 8px
        }

        .legal-body::-webkit-scrollbar-thumb {
            background: var(--line-2);
            border-radius: 8px
        }

        /* checkbox de consentimiento del cuestionario */
        .quiz-consent {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            margin-top: 16px;
            font-size: .85rem;
            color: var(--ink-dim);
            font-weight: 300;
            line-height: 1.5;
            cursor: pointer
        }

        .quiz-consent input {
            appearance: none;
            -webkit-appearance: none;
            width: 19px;
            height: 19px;
            flex-shrink: 0;
            margin-top: 1px;
            border-radius: 6px;
            border: 1.5px solid var(--line-2);
            background: var(--bg);
            cursor: pointer;
            transition: .2s;
            position: relative
        }

        .quiz-consent input:checked {
            background: var(--accent);
            border-color: var(--accent)
        }

        .quiz-consent input:checked::after {
            content: "✓";
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
            font-weight: 700
        }

        .quiz-consent a {
            color: var(--accent-bright);
            text-decoration: underline;
            text-underline-offset: 2px
        }

        /* ── MÓVIL: versión simplificada y compacta ── */
        @media(max-width:640px) {
            .wrap {
                padding: 0 20px
            }

            header {
                padding: 122px 0 36px
            }

            /* fuera el gráfico decorativo: directo al contenido */
            .hero-visual {
                display: none
            }

            .trust {
                margin-top: 52px;
                padding-top: 26px
            }

            .trust .logos {
                gap: 10px 22px
            }

            .trust .logos span {
                font-size: .9rem
            }

            section {
                padding: 60px 0
            }

            .sec-head {
                margin-bottom: 34px;
                gap: 14px
            }

            .sec-desc {
                font-size: .94rem
            }

            .vp {
                padding: 22px 20px
            }

            .svc {
                padding: 20px 4px
            }

            .svc .tags {
                display: none
            }

            /* showcase y proyectos → carrusel horizontal con snap */
            .showcase-grid,
            .proj-grid {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                margin-left: -20px;
                margin-right: -20px;
                padding: 0 20px 8px;
                scrollbar-width: none
            }

            .showcase-grid::-webkit-scrollbar,
            .proj-grid::-webkit-scrollbar {
                display: none
            }

            .showcase-grid {
                margin-top: 40px
            }

            .shot {
                flex: 0 0 76%;
                scroll-snap-align: start
            }

            .proj {
                flex: 0 0 80%;
                scroll-snap-align: start;
                padding: 24px 22px
            }

            .step {
                padding: 22px 20px
            }

            #empezar {
                padding: 60px 0
            }

            .cta-box {
                padding: 46px 20px;
                border-radius: 20px
            }

            .uc-empty {
                padding: 32px 18px;
                font-size: .88rem
            }

            .cb-fab {
                width: 50px;
                height: 50px;
                bottom: 20px;
                left: 20px
            }

            #stt {
                bottom: 20px;
                right: 20px
            }
        }

        /* ── REVEAL ── */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .8s var(--ease), transform .8s var(--ease)
        }

        .reveal.in {
            opacity: 1;
            transform: none
        }

        /* stagger */
        .vp-grid.in .vp:nth-child(2),
        .steps.in .step:nth-child(2) {
            transition-delay: .08s
        }

        .vp-grid.in .vp:nth-child(3),
        .steps.in .step:nth-child(3) {
            transition-delay: .16s
        }

        .steps.in .step:nth-child(4) {
            transition-delay: .24s
        }

        /* ── SCROLL PROGRESS ── */
        #sp {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: var(--accent);
            z-index: 200;
            width: 0%;
            transition: width .08s linear;
            pointer-events: none
        }

        /* ── CURSOR GLOW (sutil, un solo tono) ── */
        #csg {
            position: fixed;
            width: 440px;
            height: 440px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
            background: radial-gradient(closest-side, rgba(120, 140, 255, .05), transparent 70%);
            transform: translate(-50%, -50%);
            will-change: left, top
        }

        @media(hover:none) {
            #csg {
                display: none
            }
        }

        /* ── HAMBURGER ── */
        .mbtn {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: transparent;
            border: 1px solid var(--line-2);
            padding: 10px 11px;
            border-radius: 9px;
            cursor: pointer;
            transition: .22s
        }

        .mbtn span {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--ink-dim);
            border-radius: 2px;
            transition: transform .3s, opacity .3s
        }

        .mbtn.o span:nth-child(1) {
            transform: translateY(7px) rotate(45deg)
        }

        .mbtn.o span:nth-child(2) {
            opacity: 0
        }

        .mbtn.o span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg)
        }

        @media(max-width:820px) {
            .mbtn {
                display: flex
            }
        }

        .mob-ov {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .5);
            z-index: 48;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s;
            backdrop-filter: blur(4px)
        }

        .mob-ov.o {
            opacity: 1;
            pointer-events: all
        }

        .mob-nav {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(300px, 80vw);
            background: rgba(40, 44, 52, .98);
            backdrop-filter: blur(28px);
            border-left: 1px solid var(--line-2);
            z-index: 49;
            padding: 84px 26px 44px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            transform: translateX(110%);
            transition: transform .4s var(--ease)
        }

        .mob-nav.o {
            transform: none
        }

        .mob-nav a {
            color: var(--ink-dim);
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
            padding: 13px 14px;
            border-radius: 11px;
            transition: .22s
        }

        .mob-nav a:hover {
            background: var(--surface-2);
            color: var(--ink)
        }

        .mob-nav .m-sep {
            height: 1px;
            background: var(--line);
            margin: 12px 0
        }

        .mob-nav .lang-toggle {
            align-self: flex-start;
            margin-top: 6px
        }

        /* ── SCROLL TO TOP ── */
        #stt {
            position: fixed;
            bottom: 28px;
            right: 28px;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 1px solid var(--line-2);
            background: rgba(40, 44, 52, .9);
            backdrop-filter: blur(12px);
            color: var(--ink-dim);
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .25s;
            z-index: 40;
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none
        }

        #stt.vis {
            opacity: 1;
            transform: none;
            pointer-events: all
        }

        #stt:hover {
            border-color: var(--accent);
            color: var(--accent-bright);
            transform: translateY(-4px)
        }

        /* ══════ CHATBOT ══════ */
        .cb-fab {
            position: fixed;
            bottom: 28px;
            left: 28px;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 8px 26px rgba(120, 140, 255, .42);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            z-index: 45;
            transition: transform .28s var(--ease), box-shadow .28s, background .28s;
            border: none
        }

        .cb-fab:hover {
            transform: scale(1.08);
            box-shadow: 0 12px 36px rgba(120, 140, 255, .56)
        }

        .cb-fab.open {
            background: var(--bg-2)
        }

        .cb-fab svg {
            transition: transform .3s, opacity .3s
        }

        .cb-fab .ico-close {
            position: absolute;
            opacity: 0;
            transform: rotate(-90deg) scale(.5)
        }

        .cb-fab.open .ico-chat {
            opacity: 0;
            transform: rotate(90deg) scale(.5)
        }

        .cb-fab.open .ico-close {
            opacity: 1;
            transform: none
        }

        .cb-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background: var(--accent-bright);
            color: #1a1c22;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--bg);
            transition: opacity .2s, transform .2s
        }

        .cb-badge.off {
            opacity: 0;
            transform: scale(0);
            pointer-events: none
        }

        .cb-panel {
            position: fixed;
            bottom: 94px;
            left: 28px;
            width: 360px;
            background: rgba(40, 44, 52, .98);
            backdrop-filter: blur(24px) saturate(140%);
            border: 1px solid var(--line-2);
            border-radius: 20px;
            z-index: 44;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
            transform: translateY(18px) scale(.97);
            opacity: 0;
            pointer-events: none;
            transition: transform .38s var(--ease), opacity .3s
        }

        .cb-panel.open {
            transform: none;
            opacity: 1;
            pointer-events: all
        }

        @media(max-width:480px) {
            .cb-panel {
                left: 12px;
                right: 12px;
                width: auto;
                bottom: 86px
            }
        }

        .cb-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            border-bottom: 1px solid var(--line);
            flex-shrink: 0
        }

        .cb-head-info {
            display: flex;
            align-items: center;
            gap: 11px
        }

        .cb-av {
            position: relative;
            width: 34px;
            height: 34px;
            flex-shrink: 0
        }

        .cb-av svg {
            width: 34px;
            height: 34px
        }

        .cb-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #4ade80;
            border: 2px solid rgba(40, 44, 52, .98);
            animation: pulse 2.5s ease-in-out infinite
        }

        .cb-name {
            font-weight: 600;
            font-size: .9rem;
            line-height: 1.2
        }

        .cb-sub {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--accent-bright);
            margin-top: 2px
        }

        .cb-x {
            background: transparent;
            border: 1px solid var(--line);
            color: var(--ink-dim);
            width: 30px;
            height: 30px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .2s;
            flex-shrink: 0
        }

        .cb-x:hover {
            border-color: var(--line-2);
            color: var(--ink)
        }

        .cb-msgs {
            flex: 1;
            overflow-y: auto;
            padding: 16px 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            scrollbar-width: thin;
            scrollbar-color: var(--line-2) transparent;
            min-height: 240px;
            max-height: 340px
        }

        .cb-msgs::-webkit-scrollbar {
            width: 3px
        }

        .cb-msgs::-webkit-scrollbar-thumb {
            background: var(--line-2);
            border-radius: 3px
        }

        .cb-m {
            max-width: 86%;
            animation: rise .3s forwards;
            opacity: 0
        }

        .cb-m.ai {
            align-self: flex-start
        }

        .cb-m.usr {
            align-self: flex-end
        }

        .cb-b {
            padding: 10px 14px;
            border-radius: 14px;
            font-size: .87rem;
            line-height: 1.52
        }

        .cb-m.ai .cb-b {
            background: var(--surface-2);
            border: 1px solid var(--line);
            color: var(--ink);
            border-radius: 4px 14px 14px 14px
        }

        .cb-m.usr .cb-b {
            background: var(--accent);
            color: #fff;
            border-radius: 14px 14px 4px 14px
        }

        .cb-typing-wrap {
            align-self: flex-start
        }

        .cb-typing {
            display: flex;
            gap: 5px;
            align-items: center;
            padding: 12px 14px;
            background: var(--surface-2);
            border: 1px solid var(--line);
            border-radius: 4px 14px 14px 14px
        }

        .cb-typing span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--ink-faint);
            animation: cb-bounce 1.4s ease-in-out infinite
        }

        .cb-typing span:nth-child(2) {
            animation-delay: .22s
        }

        .cb-typing span:nth-child(3) {
            animation-delay: .44s
        }

        @keyframes cb-bounce {

            0%,
            60%,
            100% {
                transform: translateY(0);
                background: var(--ink-faint)
            }

            30% {
                transform: translateY(-5px);
                background: var(--accent-bright)
            }
        }

        .cb-cta {
            flex-shrink: 0;
            margin: 0 14px 2px;
            padding: 10px 14px;
            border: 1px solid var(--accent);
            border-radius: 11px;
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            color: var(--ink);
            font-family: 'Sora', sans-serif;
            font-size: .82rem;
            font-weight: 500;
            cursor: pointer;
            transition: .2s
        }

        .cb-cta:hover {
            background: color-mix(in srgb, var(--accent) 22%, transparent);
            transform: translateY(-1px)
        }

        .cb-footer {
            display: flex;
            gap: 9px;
            padding: 12px 14px;
            border-top: 1px solid var(--line);
            flex-shrink: 0
        }

        .cb-inp {
            flex: 1;
            background: var(--bg);
            border: 1px solid var(--line-2);
            border-radius: 10px;
            padding: 9px 13px;
            color: var(--ink);
            font-family: 'Sora', sans-serif;
            font-size: .86rem;
            outline: none;
            transition: .22s
        }

        .cb-inp::placeholder {
            color: var(--ink-faint)
        }

        .cb-inp:focus {
            border-color: var(--accent)
        }

        .cb-send-btn {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            border-radius: 10px;
            background: var(--accent);
            border: none;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .22s
        }

        .cb-send-btn:hover {
            transform: scale(1.08)
        }

        .cb-send-btn:disabled {
            opacity: .45;
            cursor: not-allowed;
            transform: none
        }

        .cb-powered {
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 9px;
            color: var(--ink-faint);
            padding: 6px 0 10px;
            letter-spacing: .04em
        }

        /* ═══════════════════════════════════════════════════════════════
           SUBPÁGINAS: servicios, proyectos y blog (reestructuración SEO)
           Reutiliza variables y estilos del sistema de diseño existente.
           ═══════════════════════════════════════════════════════════════ */
        .subhero {
            padding: 140px 0 36px;
            position: relative
        }

        .subhero .wrap,
        .sub-section .wrap {
            max-width: 880px
        }

        .crumbs {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12.5px;
            color: var(--ink-faint);
            margin-bottom: 22px
        }

        .crumbs a {
            color: var(--ink-faint);
            text-decoration: none;
            transition: color .2s
        }

        .crumbs a:hover {
            color: var(--accent-bright)
        }

        .crumbs .cur {
            color: var(--ink-dim)
        }

        .subhero-h1 {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: clamp(30px, 5vw, 50px);
            line-height: 1.08;
            letter-spacing: -.02em;
            margin: 14px 0 18px
        }

        .subhero .lede {
            font-size: 18px;
            color: var(--ink-dim);
            max-width: 680px;
            margin: 0
        }

        .subhero-cta {
            margin-top: 26px
        }

        .sub-section {
            padding: 26px 0;
            position: relative
        }

        .prose h2 {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: 23px;
            letter-spacing: -.01em;
            margin: 34px 0 10px
        }

        .prose p {
            color: var(--ink-dim);
            margin-bottom: 14px
        }

        .prose ul {
            color: var(--ink-dim);
            margin: 0 0 16px 1.1em
        }

        .prose li {
            margin-bottom: 7px
        }

        .prose strong {
            color: var(--ink);
            font-weight: 600
        }

        .prose a {
            color: var(--accent-bright);
            text-decoration: none;
            border-bottom: 1px solid var(--line-2)
        }

        .prose a:hover {
            color: var(--ink)
        }

        .points-h {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: 22px;
            margin: 30px 0 16px
        }

        .svc-points {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px
        }

        .svc-points li {
            position: relative;
            padding: 14px 16px 14px 40px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 12px;
            color: var(--ink-dim);
            font-size: 14.5px
        }

        .svc-points li::before {
            content: "→";
            position: absolute;
            left: 16px;
            color: var(--accent)
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px
        }

        .related-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 18px 44px 18px 20px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 14px;
            text-decoration: none;
            transition: .25s var(--ease);
            position: relative
        }

        .related-card:hover {
            background: var(--surface-2);
            border-color: var(--line-2);
            transform: translateY(-3px)
        }

        .related-num,
        .related-cat {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
            color: var(--accent);
            letter-spacing: .04em
        }

        .related-name {
            color: var(--ink);
            font-weight: 500;
            font-size: 15.5px;
            line-height: 1.3
        }

        .related-arrow {
            color: var(--ink-faint);
            position: absolute;
            top: 16px;
            right: 18px
        }

        .blog-list {
            display: grid;
            gap: 16px
        }

        .blog-card {
            display: block;
            padding: 24px 26px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 16px;
            text-decoration: none;
            transition: .25s var(--ease)
        }

        .blog-card:hover {
            background: var(--surface-2);
            border-color: var(--line-2);
            transform: translateY(-3px)
        }

        .blog-card-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11.5px;
            color: var(--accent);
            letter-spacing: .04em
        }

        .blog-card-title {
            font-family: 'Fraunces', serif;
            font-weight: 500;
            font-size: 22px;
            color: var(--ink);
            margin: 8px 0 10px;
            line-height: 1.2
        }

        .blog-card-ex {
            color: var(--ink-dim);
            font-size: 15px;
            margin-bottom: 14px
        }

        .blog-card-meta {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--ink-faint)
        }

        .article-meta {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            color: var(--ink-faint);
            margin: 6px 0 16px
        }

        .sub-section .cta-box {
            text-align: center
        }

        @media(max-width:600px) {
            .svc-points {
                grid-template-columns: 1fr
            }
        }

        /* Título de servicio enlazable en la home (no rompe el grid de .svc) */
        .svc-title-link {
            color: inherit;
            text-decoration: none;
            transition: color .2s
        }

        .svc-title-link:hover {
            color: var(--accent-bright)
        }

        /* .proj como columna para que el enlace "Ver proyecto" caiga con su margen */
        .proj {
            display: flex;
            flex-direction: column
        }