/* GENERADO POR build.js - NO EDITAR A MANO.
   Parte 1: el sistema de diseno, extraido del <style> de index.html.
   Parte 2: la capa editorial, desde _assets/editorial.css. */

:root {
            --ink: #1c1c1c;
            --ink-80: rgba(28, 28, 28, .8);
            --ink-60: rgba(28, 28, 28, .74);
            --ink-45: rgba(28, 28, 28, .62);
            --line: rgba(28, 28, 28, .12);
            --line-soft: rgba(28, 28, 28, .07);
            --bg: #ffffff;
            --bg-alt: #f4f4f4;
            --accent: #ff4d4d;
            --accent-deep: #d92d20;

            --serif: 'Aleo', Georgia, 'Times New Roman', serif;
            --sans: 'Host Grotesk', 'Inter', system-ui, sans-serif;
            --body: 'Inter', system-ui, -apple-system, sans-serif;
            --mono: 'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

            --cut: 11px;
            --cut-lg: 34px;
            --max: 1180px;

            /* ---- tokens de movimiento (ADN extraido de twenty.com) ---- */
            --e-out: cubic-bezier(.22, 1, .36, 1);
            --e-soft: cubic-bezier(.16, 1, .3, 1);
            --e-pop: cubic-bezier(.34, 1.56, .64, 1);
            --e-press: cubic-bezier(.4, 0, .2, 1);

            --d-tap: 80ms;
            --d-color: .18s;
            --d-micro: .26s;
            --d-in: .32s;
            --d-enter: .42s;
            --d-settle: .68s;
            --d-seq: 1.2s;

            --stg: 90ms;
            --stg-dense: 60ms;

            --rise: 10px;
            --fall: -2px;
            --rise-far: 34px;
            --sink: .975;
        }

        @property --cut {
            syntax: '<length>';
            inherits: true;
            initial-value: 11px;
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 84px;
        }

        body {
            overflow-x: clip;
            font-family: var(--body);
            font-size: 16px;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        ::selection {
            background: var(--ink);
            color: #fff;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .wrap {
            max-width: var(--max);
            margin: 0 auto;
            padding: 0 28px;
        }

        /* ============ Chaflán (motivo de marca) ============ */
        .cut {
            border-radius: 4px;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
        }

        .cut-lg {
            border-radius: 6px;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
        }

        /* ============ Botones ============ */
        .btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            height: 44px;
            padding: 0 22px;
            font-family: var(--mono);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .04em;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
            border: none;
            background: none;
            transition: transform var(--d-tap) var(--e-press), --cut var(--d-micro) var(--e-out);
        }

        .btn:hover,
        .btn:focus-visible {
            --cut: 14px;
        }

        .btn:active {
            --cut: 9px;
        }

        .btn>* {
            position: relative;
            z-index: 2;
        }

        .btn::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 4px;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
            transition: background var(--d-color) var(--e-soft);
        }

        .btn::after {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: 3px;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--cut) - 1px)), calc(100% - (var(--cut) - 1px)) 100%, 0 100%);
            transition: background var(--d-color) var(--e-soft) 40ms;
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn-solid {
            color: #fff;
        }

        .btn-solid::before {
            background: var(--ink);
        }

        .btn-solid::after {
            background: var(--ink);
        }

        .btn-solid:hover::after {
            background: #333;
        }

        .btn-outline {
            color: var(--ink);
        }

        .btn-outline::before {
            background: rgba(28, 28, 28, .28);
        }

        .btn-outline::after {
            background: var(--bg);
        }

        .btn-outline.on-alt::after {
            background: var(--bg-alt);
        }

        .btn-outline:hover::before {
            background: var(--ink);
        }

        .btn-light {
            color: var(--ink);
        }

        .btn-light::before,
        .btn-light::after {
            background: #fff;
        }

        .btn-light:hover::after {
            background: #ededed;
        }

        .btn .arr {
            transition: transform var(--d-micro) var(--e-out);
            font-family: var(--body);
        }

        .btn:hover .arr {
            transform: translateX(4px);
        }

        /* NAV-06 - foco de teclado visible */
        :where(a, button, summary):focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: 2px;
        }

        /* 2 - clip-path recorta el outline: en superficies achaflanadas va por dentro */
        .case:focus-visible,
        .card:focus-visible,
        .cut:focus-visible {
            outline-offset: -4px;
        }

        /* ============ Eyebrow ============ */
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-family: var(--sans);
            font-size: 17px;
            font-weight: 500;
            color: var(--ink-60);
            margin-bottom: 22px;
        }

        .eyebrow::before {
            content: '';
            width: 14px;
            height: 7px;
            border-radius: 1px;
            background: var(--accent);
            flex: none;
        }

        .eyebrow.on-dark {
            color: rgba(255, 255, 255, .65);
        }

        .mono-tag {
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        /* ============ Tipografía ============ */
        h1,
        h2,
        h3 {
            font-family: var(--serif);
            font-weight: 300;
            letter-spacing: -.02em;
            line-height: 1.14;
            color: var(--ink);
        }

        h1 {
            font-size: clamp(2.5rem, 5.6vw, 4rem);
        }

        h2 {
            font-size: clamp(1.9rem, 3.6vw, 3rem);
        }

        /* énfasis sans dentro de titular serif */
        .sw {
            font-family: var(--sans);
            font-weight: 300;
            letter-spacing: -.04em;
        }

        .lead {
            font-size: 18px;
            color: var(--ink-60);
            line-height: 1.62;
        }

        section {
            padding: 104px 0;
        }

        .alt {
            background: var(--bg-alt);
        }

        .sec-head {
            max-width: 680px;
            margin-bottom: 56px;
        }

        .sec-head.center {
            margin-inline: auto;
            text-align: center;
        }

        .sec-head.center .eyebrow {
            justify-content: center;
        }

        .sec-head p {
            margin-top: 18px;
        }

        /* ============ Nav ============ */
        header {
            position: sticky;
            top: 0;
            z-index: 60;
            background: rgba(255, 255, 255, .82);
            -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
            border-bottom: 1px solid var(--line-soft);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
            gap: 20px;
            transition: height var(--d-in) var(--e-out);
        }

        /* NAV-01 - la cabecera se compacta al salir del hero */
        header {
            transition: background-color var(--d-in) var(--e-soft),
                box-shadow var(--d-in) var(--e-soft),
                border-color var(--d-in) var(--e-soft);
        }

        header.compact .nav {
            height: 60px;
        }

        header.compact {
            background: rgba(255, 255, 255, .94);
            border-bottom-color: transparent;
            box-shadow: 0 1px 0 rgba(28, 28, 28, .05), 0 10px 26px -18px rgba(28, 28, 28, .45);
        }

        header.compact .brand .mark {
            width: 28px;
            height: 28px;
        }

        /* NAV-02 - se invierte sobre los bloques oscuros */
        header.on-dark {
            background: rgba(20, 20, 20, .88);
            border-bottom-color: rgba(255, 255, 255, .10);
        }

        header.on-dark .brand {
            color: #fff;
        }

        header.on-dark .brand .mark {
            background-image: url(/logo-invert.svg);
        }

        header.on-dark .nav-links {
            color: rgba(255, 255, 255, .62);
        }

        header.on-dark .nav-links a {
            border-left-color: rgba(255, 255, 255, .14);
        }

        header.on-dark .nav-links a:hover,
        header.on-dark .nav-links a.active {
            color: #fff;
        }

        header.on-dark .nav-toggle {
            color: #fff;
            border-color: rgba(255, 255, 255, .22);
        }

        header.on-dark .btn-solid {
            color: var(--ink);
        }

        header.on-dark .btn-solid::before,
        header.on-dark .btn-solid::after {
            background: #fff;
        }

        header.on-dark .btn-solid:hover::after {
            background: #ededed;
        }

        /* NAV-03 - barra de progreso del documento */
        header::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: 0 50%;
            z-index: 2;
            pointer-events: none;
        }

        @supports (animation-timeline: scroll()) {
            @keyframes sp {
                from {
                    transform: scaleX(0);
                }

                to {
                    transform: scaleX(1);
                }
            }

            header::after {
                animation: sp linear both;
                animation-timeline: scroll(root block);
                animation-range: 0% 100%;
            }
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            font-family: var(--sans);
            font-weight: 500;
            font-size: 17px;
            letter-spacing: -.02em;
            flex: none;
        }

        /* Marca: prompt de consola >_ . El chaflan ya viene en el SVG.
           Va de fondo (y no en un <img>) para poder invertirlo sobre fondo oscuro. */
        .brand .mark {
            width: 32px;
            height: 32px;
            flex: none;
            background: url(/logo.svg) center / 100% 100% no-repeat;
            transition: width var(--d-in) var(--e-out), height var(--d-in) var(--e-out);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 0;
            font-family: var(--mono);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--ink-60);
        }

        .nav-links a {
            position: relative;
            padding: 0 20px;
            border-left: 1px solid var(--line);
            transition: color var(--d-color) var(--e-soft), border-color var(--d-in) var(--e-soft);
        }

        /* NAV-04 - filete de seccion activa */
        .nav-links a::after {
            content: '';
            position: absolute;
            left: 20px;
            right: 20px;
            bottom: calc(50% - 15px);
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: 100% 50%;
            transition: transform .22s var(--e-out);
        }

        .nav-links a.active {
            color: var(--ink);
        }

        .nav-links a.active::after {
            transform: scaleX(1);
            transform-origin: 0 50%;
        }

        .brand,
        .nav-toggle {
            transition: color var(--d-in) var(--e-soft), border-color var(--d-in) var(--e-soft);
        }

        .nav-links a:first-child {
            border-left: none;
        }

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

        .nav-cta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: none;
        }

        .nav-cta .btn {
            height: 38px;
            padding: 0 16px;
            --cut: 9px;
        }

        .nav-cta .btn:hover,
        .nav-cta .btn:focus-visible {
            --cut: 11px;
        }

        .nav-toggle {
            display: none;
            background: none;
            border: 1px solid var(--line);
            border-radius: 4px;
            padding: 8px 11px;
            cursor: pointer;
            font-size: 17px;
            line-height: 1;
        }

        /* ============ Hero ============ */
        .hero {
            background: var(--bg-alt);
            padding: 62px 0 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        #dots {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
            opacity: 0;
            transition: opacity 1.1s var(--e-out);
            z-index: 0;
        }

        #dots.on {
            opacity: 1;
        }

        .hero-glow {
            position: absolute;
            top: -220px;
            left: 50%;
            width: 1100px;
            height: 620px;
            transform: translateX(-50%);
            background: radial-gradient(ellipse at center, rgba(255, 77, 77, .10), rgba(255, 77, 77, 0) 62%);
            pointer-events: none;
        }

        .hero .wrap {
            position: relative;
            z-index: 1;
        }

        .hero h1 {
            max-width: 900px;
            margin: 0 auto 20px;
            font-size: clamp(2.4rem, 5.2vw, 3.7rem);
        }

        .hero .lead {
            max-width: 620px;
            margin: 0 auto 30px;
            font-size: 17.5px;
        }

        .hero-ctas {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .hero-note {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ink-45);
            margin-bottom: 40px;
        }

        /* ---- Mockup CRM con paralaje 3D ---- */
        .stage {
            padding-bottom: 0;
        }

        .tilt {
            perspective: 1600px;
            perspective-origin: 50% 30%;
        }

        .window {
            width: min(1000px, 100%);
            margin: 0 auto;
            background: #fff;
            border: 1px solid rgba(28, 28, 28, .13);
            border-radius: 12px 12px 0 0;
            box-shadow: 0 2px 4px rgba(28, 28, 28, .04), 0 12px 28px rgba(28, 28, 28, .07),
                0 40px 80px rgba(28, 28, 28, .09);
            overflow: hidden;
            transform-style: preserve-3d;
            transition: transform .5s var(--e-out);
            contain: paint;
            text-align: left;
        }

        .win-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 42px;
            padding: 0 15px;
            border-bottom: 1px solid var(--line-soft);
            background: #fbfbfb;
        }

        .dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            flex: none;
        }

        .win-title {
            flex: 1;
            text-align: center;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .06em;
            color: var(--ink-45);
            text-transform: uppercase;
        }

        .board {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--line-soft);
        }

        .col {
            background: #fff;
            padding: 16px 14px 22px;
            min-height: 300px;
        }

        .col-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .col-head span:first-child {
            font-family: var(--mono);
            font-size: 10.5px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ink-60);
        }

        .col-count {
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--ink-45);
        }

        .deal {
            border: 1px solid var(--line-soft);
            border-radius: 7px;
            padding: 11px 12px;
            margin-bottom: 9px;
            background: #fff;
            transition: border-color .9s var(--e-soft);
        }

        .deal:hover {
            border-color: rgba(28, 28, 28, .2);
        }

        .deal-name {
            font-family: var(--sans);
            font-size: 13.5px;
            font-weight: 500;
            letter-spacing: -.01em;
            margin-bottom: 7px;
        }

        .deal-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .src {
            font-family: var(--mono);
            font-size: 9.5px;
            letter-spacing: .05em;
            text-transform: uppercase;
            padding: 2.5px 7px;
            border-radius: 3px;
            white-space: nowrap;
        }

        .src-g {
            background: rgba(66, 133, 244, .1);
            color: #2c62c4;
        }

        .src-m {
            background: rgba(0, 129, 251, .1);
            color: #0072e0;
        }

        .src-w {
            background: rgba(37, 211, 102, .13);
            color: #128c4a;
        }

        .src-o {
            background: rgba(28, 28, 28, .07);
            color: var(--ink-60);
        }

        .deal-val {
            font-family: var(--mono);
            font-size: 11px;
            color: var(--ink-60);
        }

        /* familia B - unica aparicion de los 28px en toda la pagina */
        .deal.fresh {
            animation: leadEnter var(--d-settle) var(--e-out) both;
            border-color: rgba(255, 77, 77, .5);
        }

        @keyframes leadEnter {
            0% {
                opacity: 0;
                transform: translateY(var(--rise-far));
            }

            58% {
                opacity: 1;
                transform: translateY(var(--rise));
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* familia H - retirada real del DOM */
        .deal.leaving {
            animation: popAway var(--d-settle) var(--e-out) both;
            pointer-events: none;
        }

        @keyframes popAway {
            0% {
                opacity: 1;
                transform: scale(.985) translate(0, 0);
            }

            36% {
                opacity: 1;
                transform: scale(1.06) translate(2px, -1px);
            }

            100% {
                opacity: 0;
                transform: scale(.64) translate(18px, -6px);
            }
        }

        /* HRO-06 - contador de columna */
        .col-count {
            display: inline-block;
            overflow: hidden;
            height: 1.25em;
            line-height: 1.25;
            vertical-align: bottom;
            min-width: 1.6ch;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .col-count b {
            display: block;
            font-weight: inherit;
        }

        @keyframes digitOut {
            to {
                transform: translateY(-110%);
                opacity: 0;
            }
        }

        @keyframes digitIn {
            from {
                transform: translateY(70%);
                opacity: 0;
            }

            to {
                transform: none;
                opacity: 1;
            }
        }

        .col-count b.out {
            animation: digitOut .16s var(--e-out) both;
        }

        .col-count b.in {
            animation: digitIn .26s var(--e-out) 40ms both;
        }

        .live {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--ink-45);
        }

        .live i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #25c65e;
            animation: pulse 2.6s ease-in-out infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .35;
            }
        }

        /* ============ Franja clientes ============ */
        .strip {
            padding: 34px 0;
            border-bottom: 1px solid var(--line-soft);
        }

        .strip .wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px 40px;
            flex-wrap: wrap;
        }

        .strip .mono-tag {
            color: var(--ink-45);
        }

        .strip b {
            font-family: var(--sans);
            font-weight: 500;
            font-size: 16px;
            color: var(--ink-60);
            letter-spacing: -.01em;
        }

        /* ============ Split (problema) ============ */
        .split {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 76px;
            align-items: center;
        }

        .panel {
            background: var(--ink);
            color: #fff;
            padding: 44px 40px;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 26px;
        }

        .panel .row {
            display: flex;
            align-items: baseline;
            gap: 16px;
            padding-bottom: 22px;
            border-bottom: 1px solid rgba(255, 255, 255, .13);
        }

        .panel .row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .panel .num {
            font-family: var(--mono);
            font-size: 12px;
            color: rgba(255, 255, 255, .3);
            flex: none;
            width: 26px;
            transition: color var(--d-in) var(--e-soft);
        }

        .panel .row.in .num {
            color: var(--accent);
            transition-delay: calc(min(var(--i, 0), 5) * var(--stg) + 140ms);
        }

        .panel .row div b {
            display: block;
            font-family: var(--sans);
            font-weight: 500;
            font-size: 17px;
            letter-spacing: -.01em;
            margin-bottom: 4px;
        }

        .panel .row div span {
            font-size: 14.5px;
            color: rgba(255, 255, 255, .6);
        }

        .hair-list {
            margin-top: 40px;
        }

        .hair-list .item {
            padding: 22px 0;
            border-top: 1px solid var(--line);
        }

        .hair-list .item:last-child {
            border-bottom: 1px solid var(--line);
        }

        .hair-list h3 {
            font-family: var(--sans);
            font-size: 17px;
            font-weight: 500;
            letter-spacing: -.01em;
            margin-bottom: 5px;
        }

        .hair-list p {
            font-size: 15px;
            color: var(--ink-60);
        }

        /* ============ Servicios ============ */
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .card {
            background: var(--bg);
            border: 1px solid var(--line);
            padding: 32px 30px 30px;
            display: flex;
            flex-direction: column;
            transition: border-color var(--d-micro) var(--e-soft),
                transform var(--d-micro) var(--e-out),
                filter var(--d-micro) var(--e-soft);
        }

        /* FIX-03: clip-path recorta box-shadow; drop-shadow se aplica despues del recorte */
        .card:hover,
        .card:focus-within {
            border-color: rgba(28, 28, 28, .3);
            transform: translateY(-2px);
            filter: drop-shadow(0 10px 18px rgba(28, 28, 28, .07));
        }

        .card h3 {
            font-family: var(--sans);
            font-size: 21px;
            font-weight: 500;
            letter-spacing: -.02em;
            margin-bottom: 6px;
        }

        .card .from {
            font-family: var(--mono);
            font-size: 12px;
            color: var(--accent-deep);
            margin-bottom: 16px;
        }

        .card .desc {
            font-size: 15px;
            color: var(--ink-60);
            margin-bottom: 24px;
        }

        /* ============ Mini-demos de producto ============ */
        .demo {
            height: 88px;
            margin: 0 0 22px;
            border: 1px solid var(--line-soft);
            border-radius: 5px;
            background: var(--bg-alt);
            overflow: hidden;
            position: relative;
        }

        .demo>* {
            pointer-events: none;
        }

        /* --- 1. navegador que se monta --- */
        .dbar {
            height: 15px;
            background: rgba(28, 28, 28, .05);
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 0 6px;
        }

        .dbar i {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(28, 28, 28, .2);
        }

        .dbody {
            padding: 9px 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .db {
            display: block;
            height: 6px;
            border-radius: 2px;
            background: rgba(28, 28, 28, .13);
            transform-origin: 0 50%;
        }

        .db.b1 { width: 58% }
        .db.b2 { width: 88% }
        .db.b3 { width: 72% }

        .db.cta {
            width: 34%;
            height: 11px;
            background: var(--accent);
            border-radius: 2px;
        }

        .js .demo .db { transform: scaleX(0) }

        .js .card.in .demo .db {
            animation: dbIn .42s var(--e-out) both;
            animation-delay: calc(340ms + var(--i2) * 110ms);
        }

        @keyframes dbIn {
            from { transform: scaleX(0); opacity: 0 }
            to { transform: scaleX(1); opacity: 1 }
        }

        .js .card.in .demo .db.cta {
            animation: dbIn .42s var(--e-out) both, ctaPulse 2.4s var(--e-soft) infinite;
            animation-delay: calc(340ms + var(--i2) * 110ms), 1.6s;
        }

        @keyframes ctaPulse {
            0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .45) }
            36% { box-shadow: 0 0 0 5px rgba(255, 77, 77, 0) }
        }

        /* --- 2. filas del CRM --- */
        .demo-crm {
            padding: 10px 10px;
            display: flex;
            flex-direction: column;
            gap: 7px;
            justify-content: center;
        }

        .drow {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .drow .dot {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: rgba(28, 28, 28, .12);
            flex: none;
        }

        .drow .ln {
            height: 5px;
            border-radius: 2px;
            background: rgba(28, 28, 28, .13);
            flex: 1;
        }

        .drow .tag {
            font-family: var(--mono);
            font-size: 8px;
            letter-spacing: .04em;
            padding: 2px 5px;
            border-radius: 2px;
            flex: none;
        }

        .tag.tg { background: rgba(66, 133, 244, .12); color: #2c62c4 }
        .tag.tm { background: rgba(0, 129, 251, .12); color: #0072e0 }
        .tag.tw { background: rgba(37, 211, 102, .15); color: #128c4a }

        .js .demo-crm .drow { opacity: 0 }

        .js .card.in .demo-crm .drow {
            animation: crmRow .42s var(--e-out) both;
            animation-delay: calc(360ms + var(--i2) * 150ms);
        }

        @keyframes crmRow {
            from { opacity: 0; transform: translateY(9px) }
            to { opacity: 1; transform: none }
        }

        /* --- 3. barras de campaña + CPL --- */
        .demo-ads {
            display: flex;
            align-items: flex-end;
            gap: 6px;
            padding: 12px 12px 10px;
        }

        .demo-ads i {
            display: block;
            flex: 1;
            height: var(--h);
            background: rgba(28, 28, 28, .13);
            border-radius: 2px 2px 0 0;
            transform-origin: 50% 100%;
        }

        .demo-ads i.hot { background: var(--accent) }

        .js .demo-ads i { transform: scaleY(0) }

        .js .card.in .demo-ads i {
            animation: barUp .52s var(--e-out) both;
            animation-delay: calc(340ms + var(--i2) * 90ms);
        }

        @keyframes barUp {
            from { transform: scaleY(0) }
            to { transform: scaleY(1) }
        }

        .cpl {
            position: absolute;
            top: 9px;
            right: 10px;
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--ink-45);
        }

        .cpl b {
            color: var(--accent-deep);
            font-variant-numeric: tabular-nums;
        }

        /* --- 4. SERP: los numeros no se mueven, las barras si --- */
        .demo-serp {
            --row: 14px;
            --gap: 7px;
            --pitch: 21px;
            height: 76px;
            margin: 0 0 16px;
            padding: 9px 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .srp {
            display: flex;
            flex-direction: column;
            gap: var(--gap);
            flex: none;
            font-family: var(--mono);
            font-size: 8.5px;
            color: var(--ink-45);
        }

        .srp span {
            height: var(--row);
            line-height: var(--row);
        }

        .srb {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--gap);
        }

        .sr {
            height: var(--row);
            display: flex;
            align-items: center;
            transition: transform .62s var(--e-out) 420ms;
        }

        .sr .bar {
            height: 5px;
            border-radius: 2px;
            background: rgba(28, 28, 28, .13);
            width: 100%;
        }

        .sr.me .bar {
            background: var(--accent);
            opacity: .4;
            transition: opacity .5s var(--e-soft) 420ms;
        }

        .js .case.in .demo-serp .sr.me .bar { opacity: 1 }
        .js .case.in .demo-serp .sr.me { transform: translateY(calc(var(--pitch) * -2)) }
        .js .case.in .demo-serp .sr.o1,
        .js .case.in .demo-serp .sr.o2 { transform: translateY(var(--pitch)) }

        @media (max-width: 680px) {
            .demo { height: 80px }
        }

        .tiers {
            list-style: none;
            margin-top: auto;
        }

        .tiers li {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            padding: 11px 0;
            border-top: 1px solid var(--line-soft);
            font-size: 14.5px;
            color: var(--ink-80);
        }

        .tiers .v {
            font-family: var(--mono);
            font-size: 12.5px;
            white-space: nowrap;
        }

        .note {
            margin-top: 18px;
            font-size: 13px;
            color: var(--ink-45);
        }

        /* ============ Motor ============ */
        .motor-wrap {
            background: var(--ink);
            color: #fff;
            padding: 62px 58px;
            display: grid;
            grid-template-columns: 1.08fr .92fr;
            gap: 62px;
        }

        .motor-wrap h2 {
            color: #fff;
        }

        .price {
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(2.6rem, 5vw, 3.7rem);
            letter-spacing: -.03em;
            line-height: 1.05;
            margin: 20px 0 6px;
        }

        .price small {
            font-family: var(--mono);
            font-size: 12px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .5);
        }

        .motor-wrap .lead {
            color: rgba(255, 255, 255, .66);
            margin-bottom: 30px;
        }

        .inc {
            list-style: none;
        }

        .inc li {
            display: flex;
            gap: 13px;
            align-items: baseline;
            padding: 13px 0;
            border-top: 1px solid rgba(255, 255, 255, .12);
            font-size: 15.5px;
            color: rgba(255, 255, 255, .9);
        }

        .inc .tick {
            color: var(--accent);
            flex: none;
        }

        .side {
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .12);
            padding: 32px 30px;
            align-self: start;
            position: sticky;
            top: 84px;
        }

        /* ---- MTR-01: el grafo del sistema se dibuja solo ---- */
        .graph-wrap {
            position: relative;
            margin: 26px 0 30px;
            max-width: 620px;
            container-type: inline-size;
        }

        .graph {
            width: 100%;
            height: auto;
            display: block;
            overflow: visible;
        }

        .graph .edge {
            fill: none;
            stroke: rgba(255, 255, 255, .30);
            stroke-width: 1.5;
            stroke-linecap: round;
        }

        .graph .node path {
            fill: rgba(255, 255, 255, .05);
            stroke: rgba(255, 255, 255, .14);
            stroke-width: 1;
        }

        .graph .node text {
            fill: rgba(255, 255, 255, .82);
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .09em;
            text-anchor: middle;
        }

        /* estado inicial SOLO con JS: sin JS el grafo se ve terminado */
        .js .motor-wrap .edge {
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            opacity: 0;
        }

        .js .motor-wrap .node {
            opacity: 0;
        }

        .js .motor-wrap .runner {
            opacity: 0;
        }

        @keyframes edgeDraw {
            0% {
                opacity: 0;
                stroke-dashoffset: 1;
            }

            25% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                stroke-dashoffset: 0;
            }
        }

        @keyframes nodeIn {
            0% {
                opacity: 0;
                transform: translateY(6px);
            }

            100% {
                opacity: 1;
                transform: none;
            }
        }

        @keyframes nodeHit {
            0% {}

            30% {
                stroke: rgba(255, 77, 77, .75);
                fill: rgba(255, 77, 77, .12);
            }

            100% {}
        }

        @keyframes run {
            0% {
                opacity: 0;
            }

            8% {
                opacity: 1;
            }

            92% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: translateX(calc(100cqw - 6px));
            }
        }

        .js .motor-wrap.in .node {
            animation: nodeIn var(--d-in) var(--e-out) both;
            animation-delay: calc(200ms + var(--i) * 270ms);
            transform-box: fill-box;
            transform-origin: 50% 50%;
        }

        .js .motor-wrap.in .edge {
            animation: edgeDraw .52s var(--e-out) both;
            animation-delay: calc(380ms + var(--i) * 270ms);
        }

        .js .motor-wrap.in .node path {
            animation: nodeHit .6s var(--e-soft) both;
            animation-delay: calc(1500ms + var(--i) * 366ms);
        }

        .runner {
            position: absolute;
            left: 0;
            top: 46%;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 4px rgba(255, 77, 77, .16);
        }

        .js .motor-wrap.in .runner {
            animation: run 1.1s var(--e-press) 1500ms both;
        }

        /* version apilada para movil */
        .graph-stack {
            display: none;
            margin: 24px 0 28px;
        }

        .graph-stack .gs-node {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .09em;
            color: rgba(255, 255, 255, .82);
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .05);
            padding: 9px 14px;
            border-radius: 3px;
        }

        .graph-stack .gs-link {
            width: 1px;
            height: 18px;
            margin: 0 0 0 20px;
            background: rgba(255, 255, 255, .3);
            transform-origin: 50% 0;
        }

        .js .graph-stack .gs-node {
            opacity: 0;
        }

        .js .graph-stack .gs-link {
            transform: scaleY(0);
        }

        .js .motor-wrap.in .graph-stack .gs-node {
            animation: nodeIn var(--d-in) var(--e-out) both;
            animation-delay: calc(200ms + var(--i) * 270ms);
        }

        .js .motor-wrap.in .graph-stack .gs-link {
            transform: scaleY(1);
            transition: transform .32s var(--e-out);
            transition-delay: calc(380ms + var(--i) * 270ms);
        }

        /* ---- MTR-02: el ahorro se resuelve delante ---- */
        .strike {
            position: relative;
            white-space: nowrap;
        }

        .strike::after {
            content: '';
            position: absolute;
            left: -2px;
            right: -2px;
            top: 52%;
            height: 1.5px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: 0 50%;
        }

        .js .motor-wrap.in .strike::after {
            transition: transform var(--d-in) var(--e-out) 620ms;
            transform: scaleX(1);
        }

        .save {
            font-family: var(--mono);
            font-size: 12px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--accent);
            white-space: nowrap;
        }

        @keyframes textSwap {
            0% {
                opacity: 0;
                filter: blur(2px);
                transform: translateY(4px);
            }

            100% {
                opacity: 1;
                filter: blur(0);
                transform: none;
            }
        }

        .js .motor-wrap .save {
            opacity: 0;
        }

        .js .motor-wrap.in .save {
            animation: textSwap var(--d-enter) var(--e-out) 900ms both;
        }

        .side h3 {
            font-family: var(--sans);
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 12px;
        }

        .side p {
            font-size: 14.5px;
            color: rgba(255, 255, 255, .62);
            margin-bottom: 20px;
        }

        .cuota {
            font-family: var(--serif);
            font-size: 34px;
            font-weight: 300;
            letter-spacing: -.02em;
            color: #fff;
        }

        .cuota small {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .5);
        }

        .side hr {
            border: none;
            border-top: 1px solid rgba(255, 255, 255, .12);
            margin: 22px 0;
        }

        /* ============ Casos ============ */
        .cases {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .case {
            border: 1px solid var(--line);
            padding: 30px 28px;
            display: flex;
            flex-direction: column;
            gap: 9px;
            background: var(--bg);
            transition: border-color var(--d-micro) var(--e-soft),
                transform var(--d-micro) var(--e-out),
                filter var(--d-micro) var(--e-soft);
        }

        .case:hover,
        .case:focus-visible {
            border-color: rgba(28, 28, 28, .3);
            transform: translateY(-2px);
            filter: drop-shadow(0 10px 18px rgba(28, 28, 28, .07));
        }

        .case .logo {
            height: 42px;
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }

        .case .logo img {
            max-height: 30px;
            max-width: 165px;
            width: auto;
            object-fit: contain;
            filter: grayscale(1);
            opacity: .72;
            transition: filter .3s var(--e-soft), opacity .3s var(--e-soft),
                transform var(--d-micro) var(--e-out);
        }

        .case:hover .logo img {
            transform: scale(1.03);
        }

        /* compensacion optica: los logos cuadrados necesitan mas alto */
        .case .logo.sq img {
            max-height: 42px;
        }

        .case:hover .logo img {
            filter: none;
            opacity: 1;
        }

        .case .res {
            font-family: var(--serif);
            font-size: 27px;
            font-weight: 300;
            letter-spacing: -.02em;
            line-height: 1.15;
        }

        .case .res em {
            font-style: normal;
            color: var(--accent-deep);
        }

        .case .who {
            font-family: var(--sans);
            font-size: 15px;
            font-weight: 500;
        }

        .case p {
            font-size: 14.5px;
            color: var(--ink-60);
        }

        .case .go {
            margin-top: auto;
            padding-top: 18px;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .05em;
            color: var(--ink-45);
            transition: color var(--d-color) var(--e-soft);
        }

        .case .go .arr {
            display: inline-block;
            transition: transform var(--d-micro) var(--e-out);
        }

        .case:hover .go .arr {
            transform: translateX(3px);
        }

        /* CAS-02 - esqueleto de carga del logo */
        .js .case .logo:not(.ready) {
            background: linear-gradient(90deg, rgba(28, 28, 28, 0) 0%, rgba(28, 28, 28, .06) 42%, rgba(28, 28, 28, 0) 84%);
            background-size: 220% 100%;
            animation: shimmer 1.25s linear infinite;
            border-radius: 3px;
        }

        @keyframes shimmer {
            from {
                background-position: 100% 0;
            }

            to {
                background-position: 0 0;
            }
        }

        .js .case .logo img {
            opacity: 0;
            transition: opacity var(--d-in) var(--e-soft), filter .3s var(--e-soft),
                transform var(--d-micro) var(--e-out);
        }

        .js .case .logo.ready img {
            opacity: .72;
        }

        /* el hover debe ganar a la regla de carga, que es mas especifica */
        .js .case:hover .logo.ready img,
        .js .case:focus-visible .logo.ready img {
            filter: none;
            opacity: 1;
        }

        .case:hover .go {
            color: var(--ink);
        }

        /* ============ Proceso ============ */
        .timeline {
            position: relative;
            padding-top: 1px;
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            border-top: none;
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--line);
            transform-origin: 0 50%;
        }

        .js .timeline::before {
            transform: scaleX(0);
        }

        .js .timeline.in::before {
            transform: scaleX(1);
            transition: transform var(--d-seq) var(--e-out) 120ms;
        }

        /* PRC-02 - los cuatro hitos (unica aparicion del rebote fuerte) */
        .mk {
            position: absolute;
            top: -4px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--bg-alt);
            border: 1.5px solid var(--line);
            transform: translateX(-50%) scale(1);
        }

        .js .steps .step.rv {
            transition-delay: calc(240ms + min(var(--i, 0), 5) * var(--stg));
        }

        .mk.m0 { left: 0 }
        .mk.m1 { left: 33.33% }
        .mk.m2 { left: 66.66% }
        .mk.m3 { left: 100% }

        @keyframes mkPop {
            0% {
                transform: translateX(-50%) scale(0);
                border-color: var(--line);
            }

            40% {
                transform: translateX(-50%) scale(1.35);
                border-color: var(--accent);
            }

            70% {
                transform: translateX(-50%) scale(.94);
            }

            100% {
                transform: translateX(-50%) scale(1);
                border-color: var(--line);
            }
        }

        .js .timeline .mk {
            opacity: 0;
        }

        .js .timeline.in .mk {
            opacity: 1;
            animation: mkPop .42s var(--e-pop) both;
            animation-delay: calc(120ms + var(--i) * 380ms);
        }

        .js .timeline.in .mk.m3 {
            border-color: var(--accent);
        }

        /* PRC-03 - contador de dias */
        .daycount {
            position: absolute;
            right: 0;
            top: -34px;
            display: flex;
            align-items: baseline;
            gap: 7px;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ink-45);
        }

        .daycount b {
            font-size: 13px;
            font-variant-numeric: tabular-nums;
            color: var(--ink-45);
            transition: color var(--d-color) var(--e-soft);
        }

        .daycount b.done {
            color: var(--accent-deep);
            animation: dayPop .32s var(--e-pop);
        }

        @keyframes dayPop {
            0% {
                transform: scale(1);
            }

            38% {
                transform: scale(1.14);
            }

            100% {
                transform: scale(1);
            }
        }

        .step {
            padding: 32px 26px 30px 0;
            border-right: 1px solid var(--line);
        }

        .step:last-child {
            border-right: none;
            padding-right: 0;
        }

        .step:not(:first-child) {
            padding-left: 26px;
        }

        .step .n {
            font-family: var(--mono);
            font-size: 12px;
            font-weight: 500;
            color: var(--accent-deep);
            margin-bottom: 16px;
        }

        .step h3 {
            font-family: var(--sans);
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -.02em;
            margin-bottom: 9px;
        }

        .step p {
            font-size: 14.5px;
            color: var(--ink-60);
        }

        /* ============ Sobre mí ============ */
        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 70px;
            align-items: start;
        }

        .about p {
            font-size: 16.5px;
            color: var(--ink-60);
            margin-bottom: 16px;
        }

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

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .chip {
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .04em;
            border: 1px solid var(--line);
            background: var(--bg);
            border-radius: 3px;
            padding: 7px 12px;
            color: var(--ink-60);
        }

        .about-sep {
            height: 1px;
            background: var(--line);
            margin: 26px 0;
        }

        /* ============ FAQ ============ */
        .faq {
            max-width: 780px;
            margin: 0 auto;
        }

        .faq details {
            border-top: 1px solid var(--line);
        }

        .faq details:last-of-type {
            border-bottom: 1px solid var(--line);
        }

        .faq summary {
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 22px;
            padding: 24px 2px;
            font-family: var(--sans);
            font-size: 17.5px;
            font-weight: 500;
            letter-spacing: -.01em;
        }

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

        .faq .plus {
            font-family: var(--body);
            font-size: 21px;
            font-weight: 300;
            color: var(--ink-45);
            transition: transform var(--d-micro) var(--e-soft), color var(--d-color) var(--e-soft);
            flex: none;
        }

        .faq details[open] .plus {
            transform: rotate(45deg);
            color: var(--accent-deep);
        }

        .faq summary {
            transition: color var(--d-color) var(--e-soft);
        }

        .faq summary:hover {
            color: var(--ink-60);
        }

        @keyframes faqIn {
            from {
                opacity: 0;
                transform: translateY(var(--fall));
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        .faq details[open] p {
            animation: faqIn var(--d-micro) var(--e-out) both;
        }

        @supports selector(details::details-content) {
            :root {
                interpolate-size: allow-keywords;
            }

            .faq details::details-content {
                block-size: 0;
                overflow: hidden;
                transition: block-size var(--d-in) var(--e-out), content-visibility var(--d-in) allow-discrete;
                transition-behavior: allow-discrete;
            }

            .faq details[open]::details-content {
                block-size: auto;
            }
        }

        /* CTA-01 - el boton de cierre se posa desde arriba */
        @keyframes pinnedIn {
            0% {
                opacity: 0;
                transform: translateY(-6px) scale(.94);
            }

            60% {
                opacity: 1;
                transform: translateY(1px) scale(1.02);
            }

            100% {
                opacity: 1;
                transform: none;
            }
        }

        .js .final .btn-solid {
            opacity: 0;
        }

        .js .final .rv.in .btn-solid {
            animation: pinnedIn .5s var(--e-out) 240ms both;
        }

        .faq details p {
            padding: 0 2px 26px;
            font-size: 15.5px;
            color: var(--ink-60);
            max-width: 660px;
        }

        /* ============ CTA final ============ */
        .final {
            text-align: center;
        }

        .final h2 {
            max-width: 700px;
            margin: 0 auto 18px;
        }

        .final .lead {
            max-width: 560px;
            margin: 0 auto 38px;
        }

        /* ============ Footer ============ */
        footer {
            background: var(--ink);
            color: rgba(255, 255, 255, .62);
            padding: 72px 0 40px;
            font-size: 14.5px;
        }

        .foot-top {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr;
            gap: 52px;
            padding-bottom: 46px;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
        }

        .foot-top h3 {
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .95);
            margin-bottom: 18px;
        }

        .foot-top ul {
            list-style: none;
        }

        .foot-top li {
            margin-bottom: 11px;
        }

        .foot-top a:hover {
            color: #fff;
        }

        .foot-brand {
            display: flex;
            align-items: center;
            gap: 11px;
            color: #fff;
            font-family: var(--sans);
            font-weight: 500;
            font-size: 17px;
            margin-bottom: 15px;
        }

        .foot-brand .mark {
            width: 30px;
            height: 30px;
            flex: none;
            background: url(/logo-invert.svg) center / 100% 100% no-repeat;
        }

        .compliance {
            padding: 38px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
            font-size: 13px;
            color: rgba(255, 255, 255, .45);
            line-height: 1.72;
        }

        .compliance h3 {
            font-family: var(--mono);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 14px;
        }

        .compliance p {
            max-width: 900px;
            margin-bottom: 10px;
        }

        .foot-bottom {
            padding-top: 30px;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .05em;
            color: rgba(255, 255, 255, .4);
        }

        /* ============ Reveal ============ */
        .js .rv {
            opacity: 0;
            transform: translateY(var(--rise));
            transition: opacity var(--d-enter) var(--e-out), transform var(--d-enter) var(--e-out);
            transition-delay: calc(min(var(--i, 0), 5) * var(--stg, 90ms));
        }

        /* la escala solo en superficies tipo tarjeta: en texto ancho desenfoca */
        .js .card.rv,
        .js .case.rv,
        .js .motor-wrap.rv,
        .js .stage.rv {
            transform: translateY(var(--rise)) scale(var(--sink));
        }

        .js .stage.rv {
            transition-duration: var(--d-settle);
        }

        .js .rv.in {
            opacity: 1;
            transform: none;
        }

        /* ============ Responsive ============ */
        @media (max-width: 1000px) {

            .grid-3,
            .cases {
                grid-template-columns: 1fr 1fr;
            }

            .split,
            .about,
            .motor-wrap {
                grid-template-columns: 1fr;
                gap: 44px;
            }

            .motor-wrap {
                padding: 46px 34px;
            }

            .steps {
                grid-template-columns: 1fr 1fr;
            }

            .step {
                padding: 28px 22px 26px 0;
            }

            .step:nth-child(2n) {
                border-right: none;
                padding-right: 0;
            }

            .step:nth-child(n+3) {
                border-top: 1px solid var(--line);
            }

            .step:nth-child(2n+1) {
                padding-left: 0;
            }

            .board {
                grid-template-columns: 1fr 1fr;
            }

            .col:nth-child(n+3) {
                display: none;
            }

            .side {
                position: static;
            }
        }

        @media (max-width: 760px) {

            .graph,
            .runner {
                display: none;
            }

            .graph-stack {
                display: block;
            }
        }

        @media (max-width: 1080px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--bg);
                border-bottom: 1px solid var(--line);
                flex-direction: column;
                align-items: flex-start;
                padding: 14px 28px 22px;
                font-size: 13px;
            }

            .nav-links.open {
                display: flex;
            }

            header.on-dark .nav-links {
                background: #141414;
                border-bottom-color: rgba(255, 255, 255, .12);
            }

            header.on-dark .nav-links a {
                color: rgba(255, 255, 255, .78);
            }

            .nav-links a {
                border-left: none;
                padding: 12px 0;
                width: 100%;
            }

            .nav-toggle {
                display: block;
            }

            .nav-links a::after {
                display: none;
            }
        }

        @media (max-width: 860px) {
            section {
                padding: 74px 0;
            }

            .hero {
                padding-top: 66px;
            }

            .foot-top {
                grid-template-columns: 1fr;
                gap: 36px;
            }
        }

        @media (max-width: 680px) {

            .grid-3,
            .cases {
                grid-template-columns: 1fr;
            }

            .steps {
                grid-template-columns: 1fr;
            }

            .step {
                padding: 26px 0;
                border-right: none;
            }

            .step:not(:first-child) {
                padding-left: 0;
                border-top: 1px solid var(--line);
            }

            .board {
                grid-template-columns: 1fr;
            }

            .col:nth-child(n+2) {
                display: none;
            }

            .steps::before,
            .mk {
                display: none;
            }

            .daycount {
                position: static;
                margin-bottom: 14px;
                justify-content: flex-end;
            }

            .panel {
                padding: 34px 26px;
            }
        }

        @media (max-width: 420px) {
            .wrap {
                padding: 0 20px;
            }

            .btn {
                height: 42px;
                padding: 0 16px;
                font-size: 11px;
            }

            .nav-cta .btn {
                padding: 0 12px;
                font-size: 10.5px;
            }

            .hide-xs {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-delay: 0ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
                transition-delay: 0ms !important;
                animation-timeline: none !important;
            }

            .js .rv {
                opacity: 1 !important;
                transform: none !important;
            }

            header::after {
                transform: scaleX(0) !important;
            }

            .js .motor-wrap .edge {
                stroke-dashoffset: 0 !important;
                opacity: 1 !important;
            }

            .js .motor-wrap .node,
            .js .motor-wrap .save,
            .js .graph-stack .gs-node {
                opacity: 1 !important;
            }

            .js .graph-stack .gs-link {
                transform: scaleY(1) !important;
            }

            .js .motor-wrap .runner {
                display: none;
            }

            .js .timeline::before {
                transform: scaleX(1) !important;
            }

            .js .timeline .mk {
                opacity: 1 !important;
                transform: translateX(-50%) scale(1) !important;
            }

            .js .case .logo {
                animation: none !important;
            }

            .js .case .logo img {
                opacity: .72 !important;
            }

            .js .demo .db {
                transform: scaleX(1) !important;
            }

            .js .demo-crm .drow {
                opacity: 1 !important;
            }

            .js .demo-ads i {
                transform: scaleY(1) !important;
            }

            .js .demo-serp .sr.me {
                transform: translateY(calc(var(--pitch) * -2)) !important;
            }

            .js .demo-serp .sr.o1,
            .js .demo-serp .sr.o2 {
                transform: translateY(var(--pitch)) !important;
            }

            .js .demo-serp .sr.me .bar {
                opacity: 1 !important;
            }

            .cw-hint i::after {
                animation: none !important;
            }

            .demo .db.cta {
                animation: none !important;
            }

            .js .final .btn-solid {
                opacity: 1 !important;
            }

            .live i {
                animation: none;
                opacity: .85;
            }
        }

        /* ============ Interaccion con el raton en los mockups ============ */
        .cw-ln[data-k] {
            cursor: pointer;
            transition: background-color .14s var(--e-soft);
        }

        .cw-ln[data-k]:hover,
        .cw-ln.cw-ln-hot {
            background: rgba(255, 77, 77, .12);
            box-shadow: inset 2px 0 0 var(--accent);
        }

        [data-t] {
            transition: outline-color .16s var(--e-soft), background-color .16s var(--e-soft);
            outline: 1.5px solid transparent;
            outline-offset: 2px;
            border-radius: 2px;
        }

        [data-t].cw-hot {
            outline-color: var(--accent);
            background: rgba(255, 77, 77, .07);
        }

        /* pista visual de que el editor es explorable */
        .cw-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 14px;
            font-family: var(--mono);
            font-size: 11px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--ink-45);
        }

        .cw-hint i {
            width: 13px;
            height: 13px;
            border: 1.5px solid var(--accent);
            border-radius: 50%;
            position: relative;
            flex: none;
        }

        .cw-hint i::after {
            content: '';
            position: absolute;
            inset: 2.5px;
            border-radius: 50%;
            background: var(--accent);
            animation: hintPulse 2.2s var(--e-soft) infinite;
        }

        @keyframes hintPulse {

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

            50% {
                opacity: .3;
                transform: scale(.6);
            }
        }

        /* --- CRM: las tarjetas responden --- */
        .pk-card {
            transition: translate .16s var(--e-out), scale .16s var(--e-out),
                box-shadow .16s var(--e-soft), border-color .16s var(--e-soft);
        }

        .pk-card:hover {
            translate: 0 -2px;
            box-shadow: 0 6px 16px rgba(28, 28, 28, .10);
            border-color: rgba(28, 28, 28, .26);
            cursor: grab;
        }

        .pk-card:active {
            cursor: grabbing;
            translate: 0 0;
            scale: .995;
        }

        .pk-col {
            transition: background-color .2s var(--e-soft);
        }

        .pk-col:hover {
            background: rgba(28, 28, 28, .022);
        }

        .pk-nav,
        .pk-sub {
            cursor: pointer;
        }

        /* --- Panel: guia vertical y punto que siguen al raton --- */
        .db-plot {
            cursor: crosshair;
        }

        .db-xhair {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1px;
            background: rgba(28, 28, 28, .22);
            opacity: 0;
            transition: opacity .18s var(--e-soft);
            pointer-events: none;
        }

        .db-plot:hover .db-xhair {
            opacity: 1;
        }

        /* el marcador entero sigue al raton, con el cartel volteando en los bordes */
        .db-mark,
        .db-xhair {
            transition: left .12s linear, top .12s linear;
        }

        .db-tip.db-tip-l {
            left: auto;
            right: 6px;
            transform: none;
        }

        .db-tip.db-tip-r {
            left: 6px;
            right: auto;
            transform: none;
        }

        @media (hover: none) {
            .cw-hint {
                display: none;
            }
        }

        /* ==================================================================
           COMPONENTES DENSOS  ·  mockups de producto
           ================================================================== */

/* ------------------------------------------------------------------
   PK — Nexo CRM · captura de tablero (prefijo .pk-)
   Sin librerias, sin imagenes, sin SVG. Estado oculto solo bajo html.js.
   Dispara con la clase "in" en .pk-demo (contenedor raiz).
   Cifras verificadas: 24.850+21.400+22.700+14.750 = 83.700 (abiertos)
                       + 34.200 (ganados) = 117.900 € en 27+9 = 36 tratos
                       117.900/36 = 3.275 · 83.700/27 = 3.100 · 34.200/9 = 3.800
                       9/36 = 25,0 %
------------------------------------------------------------------ */

.pk-demo{
    --pk-cut:14px;
    --pk-chrome:#fafafa;          /* token unico para el gris de chrome */
    --pk-ok:#2f8a56;
    --pk-warn:#c9822b;
    --pk-late:#b23c2e;
    --pk-av1:#5b6b7d;             /* gris pizarra */
    --pk-av2:#8a7a5f;             /* arena */
    --pk-av3:#5c7a63;             /* verde apagado */
    --pk-av4:#6b6f8c;             /* azul apagado */
    --pk-stg:40ms;
    container-type:inline-size;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    font-family:var(--body);
    color:var(--ink);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
}
.pk-demo *{box-sizing:border-box}

/* sombra en un envoltorio que NUNCA anima ni recibe paralaje */
.pk-wrap{filter:drop-shadow(0 16px 38px rgba(28,28,28,.10)) drop-shadow(0 2px 5px rgba(28,28,28,.05))}

/* marco achaflanado: capa exterior = borde, capa interior = superficie */
.pk-frame{
    background:var(--line);
    padding:1px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--pk-cut)),calc(100% - var(--pk-cut)) 100%,0 100%);
}
.pk-shell{
    --pk-side:176px;
    --pk-colw:216px;
    --pk-h:540px;
    --pk-pad:14px;
    background:var(--bg);
    overflow:hidden;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);
}

/* ================= chrome de navegador ================= */
.pk-tabs{
    display:flex;align-items:stretch;gap:6px;
    height:30px;padding:0 10px;
    background:var(--bg-alt);
    border-bottom:1px solid var(--line-soft);
}
.pk-dots{display:flex;align-items:center;gap:6px;flex:none;padding-right:6px}
.pk-dots i{width:8px;height:8px;border-radius:50%;background:rgba(28,28,28,.18)}
.pk-tab{
    display:flex;align-items:center;gap:6px;
    align-self:flex-end;height:24px;padding:0 9px;min-width:0;max-width:230px;
    border-radius:5px 5px 0 0;
    font-family:var(--body);font-size:11px;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;
}
.pk-tab-on{
    background:var(--bg);color:var(--ink);
    box-shadow:0 -1px 0 var(--line-soft);
}
.pk-tab span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pk-fav{
    width:11px;height:11px;flex:none;background:var(--accent);
    clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
}
.pk-fav-off{background:rgba(28,28,28,.22)}
.pk-x{flex:none;font-weight:400;font-size:12px;line-height:1;color:var(--ink-45)}
.pk-newtab{align-self:center;flex:none;font-size:14px;line-height:1;color:var(--ink-45);padding:0 4px}

.pk-url{
    display:flex;align-items:center;gap:9px;
    height:32px;padding:0 11px;
    background:var(--bg);
    border-bottom:1px solid var(--line-soft);
}
.pk-navb{display:flex;align-items:center;gap:11px;flex:none;color:var(--ink-45)}
.pk-chev{width:7px;height:7px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;display:inline-block}
.pk-chev-l{transform:rotate(45deg)}
.pk-chev-r{transform:rotate(-135deg)}
.pk-reload{
    width:11px;height:11px;border:1.6px solid currentColor;border-radius:50%;
    border-top-color:transparent;display:inline-block;transform:rotate(-35deg);
}
.pk-bar-url{
    flex:1;min-width:0;display:flex;align-items:center;gap:7px;
    height:22px;padding:0 9px;
    background:var(--bg-alt);border:1px solid var(--line-soft);border-radius:11px;
}
.pk-lock{position:relative;flex:none;width:7px;height:6px;border-radius:1px;background:var(--ink-60);margin-top:2px}
.pk-lock::before{
    content:"";position:absolute;left:1.3px;top:-3.6px;width:4.4px;height:4px;
    border:1.2px solid var(--ink-60);border-bottom:0;border-radius:2px 2px 0 0;
}
.pk-dom{
    min-width:0;font-family:var(--mono);font-size:11px;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pk-dom b{font-weight:500;color:var(--ink)}
.pk-star{flex:none;font-size:12px;line-height:1;color:var(--ink-45)}

/* ================= cuerpo ================= */
.pk-body{display:flex;align-items:stretch;background:var(--bg-alt)}

/* ---------- barra lateral (altura completa, marca arriba) ---------- */
.pk-side{
    flex:none;width:var(--pk-side);
    display:flex;flex-direction:column;
    padding:10px 9px 9px;
    background:var(--pk-chrome);
    border-right:1px solid var(--line-soft);
}
.pk-brand{display:flex;align-items:center;gap:8px;height:32px;padding:0 6px;margin-bottom:10px}
.pk-mark{
    width:20px;height:20px;flex:none;display:grid;place-items:center;
    background:var(--accent);color:#fff;
    font-family:var(--mono);font-size:11px;line-height:1;
    clip-path:polygon(0 0,100% 0,100% 66%,66% 100%,0 100%);
}
.pk-brand-txt{
    flex:1;min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:500;
    letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;
}
.pk-caret{
    flex:none;width:0;height:0;
    border-left:3.5px solid transparent;border-right:3.5px solid transparent;
    border-top:4px solid var(--ink-45);
}
.pk-nav{
    position:relative;display:flex;align-items:center;gap:9px;
    height:30px;padding:0 26px 0 8px;border-radius:6px;
    font-size:12.5px;color:var(--ink-60);white-space:nowrap;
}
.pk-nav-on{background:rgba(28,28,28,.075);color:var(--ink);font-weight:500;box-shadow:inset 2px 0 0 var(--accent)}
.pk-nav-txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pk-badge{
    position:absolute;right:7px;top:50%;transform:translateY(-50%);
    font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.4;
    background:var(--ink);color:#fff;border-radius:20px;padding:0 5px;
}
.pk-sec{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.09em;text-transform:uppercase;color:var(--ink-45);
    padding:0 8px;margin:13px 0 5px;white-space:nowrap;overflow:hidden;
}
.pk-sub{
    position:relative;display:flex;align-items:center;gap:9px;
    height:26px;padding:0 26px 0 8px;border-radius:6px;
    font-size:12px;color:var(--ink-60);white-space:nowrap;
}
.pk-sub-on{color:var(--ink);font-weight:500;background:rgba(28,28,28,.045)}
.pk-sq{width:8px;height:8px;flex:none;border-radius:2px;background:rgba(28,28,28,.28)}
.pk-sq-2{background:rgba(28,28,28,.5)}
.pk-sq-3{background:var(--pk-ok)}
.pk-cnt{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-45);
}
.pk-acct{
    margin-top:auto;display:flex;align-items:center;gap:8px;
    padding:8px 6px 0;border-top:1px solid var(--line-soft);
}
.pk-acct-txt{flex:1;min-width:0;overflow:hidden}
.pk-acct-n{display:block;font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-acct-p{display:block;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-60);white-space:nowrap}

/* iconos CSS */
.pk-i{position:relative;display:inline-block;width:14px;height:14px;flex:none;opacity:.85}
.pk-i-board{background:
    linear-gradient(currentColor 0 0) 0 0/3px 14px no-repeat,
    linear-gradient(currentColor 0 0) 5.5px 0/3px 10px no-repeat,
    linear-gradient(currentColor 0 0) 11px 0/3px 7px no-repeat}
.pk-i-person::before{content:"";position:absolute;left:4px;top:1px;width:6px;height:6px;border-radius:50%;background:currentColor}
.pk-i-person::after{content:"";position:absolute;left:1px;bottom:1px;width:12px;height:6px;border-radius:6px 6px 2px 2px;background:currentColor}
.pk-i-build{background:
    linear-gradient(currentColor 0 0) 0 0/14px 2.5px no-repeat,
    linear-gradient(currentColor 0 0) 1px 4.5px/2.5px 9.5px no-repeat,
    linear-gradient(currentColor 0 0) 5.75px 4.5px/2.5px 9.5px no-repeat,
    linear-gradient(currentColor 0 0) 10.5px 4.5px/2.5px 9.5px no-repeat}
.pk-i-clock{border:1.5px solid currentColor;border-radius:50%}
.pk-i-clock::before{content:"";position:absolute;left:4.7px;top:2.4px;width:1.5px;height:4.4px;background:currentColor}
.pk-i-clock::after{content:"";position:absolute;left:4.7px;top:5.3px;width:3.6px;height:1.5px;background:currentColor}
.pk-i-chart{background:
    linear-gradient(currentColor 0 0) 0 100%/3px 6px no-repeat,
    linear-gradient(currentColor 0 0) 5.5px 100%/3px 10px no-repeat,
    linear-gradient(currentColor 0 0) 11px 100%/3px 14px no-repeat}
.pk-i-mag{width:12px;height:12px;opacity:.6}
.pk-i-mag::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%}
.pk-i-mag::after{content:"";position:absolute;right:0;bottom:.5px;width:4.5px;height:1.5px;background:currentColor;transform:rotate(45deg);transform-origin:right center}
.pk-i-filter{width:12px;height:12px;background:
    linear-gradient(currentColor 0 0) 0 1.5px/12px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 2px 5.5px/8px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 4px 9.5px/4px 1.5px no-repeat}

/* ---------- panel principal ---------- */
.pk-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-alt)}

/* barra de herramientas */
.pk-tools{
    display:flex;align-items:center;gap:8px;
    height:46px;padding:0 12px;flex:none;
    background:var(--bg);border-bottom:1px solid var(--line-soft);
}
.pk-tg{display:flex;align-items:center;gap:8px;min-width:0}
.pk-tg-mid{flex:1 1 auto}
.pk-chip{
    flex:none;display:inline-flex;align-items:center;gap:7px;
    height:28px;padding:0 10px;
    background:var(--bg);border:1px solid var(--line);border-radius:6px;
    font-size:11.5px;color:var(--ink-60);white-space:nowrap;
}
.pk-chip b{font-weight:500;color:var(--ink)}
.pk-chip-k{font-family:var(--mono);font-size:11px;color:var(--ink-45)}
.pk-search{
    flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
    height:28px;padding:0 9px;
    border:1px solid var(--line);border-radius:6px;background:var(--bg-alt);
}
.pk-search-txt{flex:1;min-width:0;font-size:11.5px;color:var(--ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-kbd{
    flex:none;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ink-60);
    background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:0 5px;line-height:1.5;
}
.pk-live{
    flex:none;display:inline-flex;align-items:center;gap:7px;
    font-family:var(--mono);font-size:11px;color:var(--ink-60);white-space:nowrap;
}
.pk-live b{font-weight:500}
.pk-pulse{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--pk-ok)}
.pk-pulse::after{
    content:"";position:absolute;inset:-2px;border-radius:50%;
    border:1.5px solid var(--pk-ok);opacity:0;transform:scale(.6);
}
.pk-team{flex:none;display:flex;padding-left:2px}
.pk-team .pk-av{width:23px;height:23px;border:1.5px solid var(--bg)}
.pk-team .pk-av + .pk-av{margin-left:-8px}
.pk-cta{
    flex:none;display:inline-flex;align-items:center;gap:6px;
    height:28px;padding:0 12px;
    background:var(--accent);color:#fff;
    font-family:var(--sans);font-size:11.5px;font-weight:500;white-space:nowrap;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
.pk-plus{font-size:14px;line-height:0;margin-top:-1px}

/* franja de agregados */
.pk-kpis{
    display:flex;align-items:stretch;flex:none;
    height:64px;padding:0 4px;overflow:hidden;
    background:var(--bg);border-bottom:1px solid var(--line-soft);
}
.pk-kpi{
    flex:1 1 0;min-width:150px;
    display:flex;flex-direction:column;justify-content:center;gap:3px;
    padding:0 14px;
    border-left:1px solid var(--line-soft);
}
.pk-kpi:first-child{border-left:0;flex-grow:1.5}
.pk-kpi-l{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pk-kpi-v{
    font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:-.015em;
    color:var(--ink);white-space:nowrap;line-height:1.15;
}
.pk-kpi-s{
    font-family:var(--mono);font-size:11px;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- tablero: se desborda a proposito y lo corta el marco ---------- */
.pk-board{
    flex:none;height:var(--pk-h);
    display:grid;grid-auto-flow:column;
    grid-auto-columns:var(--pk-colw);
    grid-template-rows:minmax(0,1fr);
    gap:12px;padding:var(--pk-pad);
    overflow:hidden;
    background:var(--bg-alt);
}
.pk-col{position:relative;min-width:0;display:flex;flex-direction:column;padding-bottom:28px}
.pk-col-nf{padding-bottom:0}
.pk-col-bar{height:3px;border-radius:2px;margin-bottom:9px;flex:none}
.pk-bar1{background:rgba(28,28,28,.18)}
.pk-bar2{background:rgba(28,28,28,.34)}
.pk-bar3{background:rgba(28,28,28,.5)}
.pk-bar4{background:rgba(28,28,28,.66)}
.pk-bar5{background:var(--pk-ok)}
.pk-col-head{display:flex;align-items:center;gap:6px;flex:none;margin-bottom:3px}
.pk-col-name{
    min-width:0;font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pk-col-n{
    flex:none;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink);
    background:rgba(28,28,28,.07);border-radius:20px;padding:0 6px;
}
.pk-col-acts{margin-left:auto;flex:none;display:flex;align-items:center;gap:7px;color:var(--ink-45);line-height:1}
.pk-col-acts b{font-weight:400;font-size:13px}
.pk-col-acts i{font-style:normal;font-size:12px;letter-spacing:1.4px}
.pk-col-sum{
    flex:none;font-family:var(--mono);font-size:12.5px;color:var(--ink);
    margin-bottom:10px;white-space:nowrap;
}
.pk-col-list{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.pk-col-foot{position:absolute;left:0;right:0;bottom:0;display:flex;padding-top:8px}
.pk-morep{
    flex:1;min-width:0;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:22px;padding:0 8px;
    background:var(--bg);border:1px dashed var(--line);border-radius:5px;
    font-family:var(--mono);font-size:11px;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;
}
/* barra de scroll falsa: prueba visible de que hay mas debajo */
.pk-scroll{position:absolute;right:0;top:60px;bottom:36px;width:5px;border-radius:3px;background:rgba(28,28,28,.06)}
.pk-scroll i{position:absolute;left:0;top:0;width:5px;height:34%;border-radius:3px;background:rgba(28,28,28,.22)}
.pk-col-sc .pk-col-list{padding-right:11px}
.pk-col-sc .pk-col-foot{padding-right:11px}

/* zona de soltar */
.pk-drop{
    min-height:60px;flex:1 1 auto;
    display:grid;place-items:center;
    border:1px dashed rgba(28,28,28,.2);border-radius:7px;
    background:rgba(28,28,28,.015);
    font-family:var(--mono);font-size:11px;color:var(--ink-60);
    letter-spacing:.05em;
}

/* ---------- tarjetas ---------- */
.pk-card{
    position:relative;
    background:var(--bg);
    border:1px solid var(--line-soft);border-radius:7px;
    padding:8px 10px;margin-bottom:10px;flex:none;
}
.pk-card-hov{border-color:rgba(28,28,28,.22);box-shadow:0 3px 10px rgba(28,28,28,.09)}
.pk-card-sel{border-color:rgba(28,28,28,.55);box-shadow:0 0 0 2px rgba(28,28,28,.08)}
.pk-grip{
    position:absolute;right:8px;top:11px;width:7px;height:11px;opacity:.32;
    background:
        radial-gradient(circle,currentColor 45%,transparent 46%) 0 0/3.5px 3.5px,
        radial-gradient(circle,currentColor 45%,transparent 46%) 3.5px 0/3.5px 3.5px,
        radial-gradient(circle,currentColor 45%,transparent 46%) 0 3.75px/3.5px 3.5px,
        radial-gradient(circle,currentColor 45%,transparent 46%) 3.5px 3.75px/3.5px 3.5px,
        radial-gradient(circle,currentColor 45%,transparent 46%) 0 7.5px/3.5px 3.5px,
        radial-gradient(circle,currentColor 45%,transparent 46%) 3.5px 7.5px/3.5px 3.5px;
    background-repeat:no-repeat;
}
.pk-card-top{display:flex;align-items:flex-start;gap:8px}
.pk-av{
    width:26px;height:26px;flex:none;border-radius:50%;
    display:grid;place-items:center;color:#fff;
    font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.01em;
}
.pk-av1{background:var(--pk-av1)}
.pk-av2{background:var(--pk-av2)}
.pk-av3{background:var(--pk-av3)}
.pk-av4{background:var(--pk-av4)}
.pk-card-name{
    min-width:0;padding-top:2px;
    font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.28;
    letter-spacing:-.012em;color:var(--ink);
}
.pk-card-top-a{align-items:center}
.pk-who{
    margin-top:5px;font-size:11.5px;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pk-who b{font-weight:500;color:var(--ink)}
.pk-note{
    margin-top:7px;padding-left:7px;border-left:2px solid var(--line);
    font-size:11.5px;line-height:1.35;color:var(--ink-60);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pk-card-mid{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.pk-tags{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.pk-tag{
    flex:0 1 auto;min-width:0;
    font-family:var(--mono);font-size:11px;line-height:1.5;
    padding:2px 6px;border-radius:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pk-tg-g{background:rgba(58,99,168,.10);color:#3a63a8}
.pk-tg-m{background:rgba(74,91,181,.11);color:#4a5bb5}
.pk-tg-w{background:rgba(47,125,82,.12);color:#2f7d52}
.pk-tg-f{background:rgba(28,28,28,.06);color:var(--ink-60)}
.pk-tg-x{border:1px solid var(--line);color:var(--ink-60);padding:1px 5px}
.pk-amt{flex:none;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.pk-amt-n{font-size:11.5px;color:var(--ink-60)}
.pk-prog{margin-top:9px}
.pk-prog-l{
    display:flex;justify-content:space-between;gap:6px;
    font-family:var(--mono);font-size:11px;color:var(--ink-60);margin-bottom:4px;
}
.pk-prog-t{height:4px;border-radius:3px;background:rgba(28,28,28,.09);overflow:hidden}
.pk-prog-t i{display:block;height:4px;width:40%;border-radius:3px;background:rgba(28,28,28,.55)}
.pk-card-foot{
    display:flex;align-items:center;gap:8px;
    margin-top:8px;padding-top:7px;border-top:1px solid var(--line-soft);
    font-family:var(--mono);font-size:11px;color:var(--ink-60);
}
.pk-meta{display:flex;align-items:center;gap:7px;min-width:0;margin-right:auto;overflow:hidden;white-space:nowrap}
.pk-id{flex:none;color:var(--ink-45)}
.pk-when{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pk-late{color:var(--pk-late)}
.pk-st{flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pk-st i{width:6px;height:6px;border-radius:50%;background:var(--pk-ok);flex:none}
.pk-st-w i{background:var(--pk-warn)}
.pk-st-l i{background:var(--pk-late)}

/* ================= entrada (solo con JS + clase .in) ================= */
@keyframes pkUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pkDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pkLeft{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes pkSafe{to{opacity:1;transform:none}}
@keyframes pkRing{0%{opacity:.75;transform:scale(.6)}70%,100%{opacity:0;transform:scale(2.1)}}

/* estado oculto + RED DE SEGURIDAD: si .in no llega nunca, se pinta solo a 2,4 s */
.js .pk-demo .pk-tabs,
.js .pk-demo .pk-url,
.js .pk-demo .pk-side,
.js .pk-demo .pk-nav,
.js .pk-demo .pk-sub,
.js .pk-demo .pk-tg,
.js .pk-demo .pk-kpi,
.js .pk-demo .pk-col,
.js .pk-demo .pk-card{
    opacity:0;
    animation:pkSafe .001s linear 2400ms both;
}

.js .pk-demo.in .pk-tabs{animation:pkDown var(--d-in) var(--e-out) both}
.js .pk-demo.in .pk-url{animation:pkDown var(--d-in) var(--e-out) both;animation-delay:50ms}
.js .pk-demo.in .pk-side{animation:pkLeft var(--d-in) var(--e-out) both;animation-delay:60ms}
.js .pk-demo.in .pk-nav{animation:pkLeft var(--d-in) var(--e-out) both;animation-delay:calc(110ms + var(--n,0) * 30ms)}
.js .pk-demo.in .pk-sub{animation:pkLeft var(--d-in) var(--e-out) both;animation-delay:calc(250ms + var(--n,0) * 30ms)}
.js .pk-demo.in .pk-tg{animation:pkDown var(--d-in) var(--e-out) both;animation-delay:calc(110ms + var(--t,0) * 45ms)}
.js .pk-demo.in .pk-kpi{animation:pkUp var(--d-in) var(--e-soft) both;animation-delay:calc(150ms + var(--m,0) * 40ms)}
.js .pk-demo.in .pk-col{animation:pkUp var(--d-in) var(--e-out) both;animation-delay:calc(180ms + var(--i,0) * var(--pk-stg))}
.js .pk-demo.in .pk-card{animation:pkUp var(--d-in) var(--e-out) both;animation-delay:calc(240ms + var(--i,0) * var(--pk-stg) + var(--c,0) * 40ms)}
/* ultima tarjeta: 240 + 4x40 + 2x40 = 480 ms · asentada a 800 ms */

.pk-pulse::after{animation:pkRing 2.8s var(--e-soft) infinite}

/* ================= container queries: responden al ancho REAL ================= */
@container (max-width:1060px){
    .pk-shell{--pk-side:56px;--pk-colw:222px}
    .pk-side{padding:10px 8px 9px;align-items:center}
    .pk-brand{justify-content:center;padding:0;gap:0}
    .pk-brand-txt,.pk-caret,.pk-nav-txt,.pk-sub span,.pk-sec,.pk-acct-txt,.pk-cnt{display:none}
    .pk-nav,.pk-sub{justify-content:center;padding:0;width:38px;align-self:center}
    .pk-sub-pl{display:none}
    .pk-badge{right:2px;top:4px;transform:none;padding:0 4px}
    .pk-sub{height:24px}
    .pk-acct{justify-content:center;padding:8px 0 0;width:100%}
}
@container (max-width:980px){
    .pk-team{display:none}
}
@container (max-width:900px){
    /* las baldosas dejan de encogerse: la franja se corta como en una pantalla mas ancha */
    .pk-kpi{flex:0 0 auto;min-width:0;width:198px}
    .pk-kpi:first-child{flex-grow:0;width:250px}
}
@container (max-width:880px){
    .pk-shell{--pk-side:0px;--pk-colw:230px}
    .pk-side{display:none}
    .pk-chip-w{display:none}
}
@container (max-width:820px){
    .pk-chip-ord{display:none}
    .pk-live{display:none}
}
@container (max-width:790px){
    .pk-star,.pk-newtab{display:none}
    .pk-tab-2{display:none}
}
@container (max-width:700px){
    .pk-shell{--pk-colw:236px;--pk-h:500px;--pk-pad:12px}
    .pk-kpi-v{font-size:15px}
    .pk-chip-per{display:none}
    .pk-navb{display:none}
}
@container (max-width:600px){
    .pk-search-txt,.pk-kbd{display:none}
    .pk-search{flex:0 0 auto;width:38px;justify-content:center;padding:0}
    .pk-tg-mid{flex:0 0 auto}
    .pk-cta-l{display:none}
    .pk-note{display:none}
    .pk-tools{gap:6px;padding:0 10px}
}
@container (max-width:460px){
    .pk-shell{--pk-colw:242px;--pk-pad:10px}
    .pk-kpi{width:186px}
    .pk-kpi:first-child{width:238px}
    .pk-search,.pk-chip-fil{display:none}
    .pk-id{display:none}
    .pk-card{padding:8px 9px}
}
@container (max-width:360px){
    .pk-shell{--pk-colw:238px}
    .pk-tabs{padding:0 7px}
    .pk-tab{max-width:150px}
}

/* ================= movimiento reducido: estado FINAL ================= */
@media (prefers-reduced-motion: reduce){
    .js .pk-demo .pk-tabs,
    .js .pk-demo .pk-url,
    .js .pk-demo .pk-side,
    .js .pk-demo .pk-nav,
    .js .pk-demo .pk-sub,
    .js .pk-demo .pk-tg,
    .js .pk-demo .pk-kpi,
    .js .pk-demo .pk-col,
    .js .pk-demo .pk-card,
    .js .pk-demo.in .pk-tabs,
    .js .pk-demo.in .pk-url,
    .js .pk-demo.in .pk-side,
    .js .pk-demo.in .pk-nav,
    .js .pk-demo.in .pk-sub,
    .js .pk-demo.in .pk-tg,
    .js .pk-demo.in .pk-kpi,
    .js .pk-demo.in .pk-col,
    .js .pk-demo.in .pk-card{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }
    .pk-pulse::after{animation:none !important;opacity:0 !important}
}

/* ==========================================================================
   COMPONENTE 2 · IDE escribiendo la portada de un cliente + preview en vivo
   Prefijo: cw-   ·   Trigger: .cw-demo.in   ·   Sin JS propio
   Coherencia: lo que se teclea (lineas 12-42 de index.html) es exactamente
   lo que renderiza la preview. Ln 42 / Col 27 = ultima linea, 26 caracteres.
   ========================================================================== */

.cw-demo{
    /* --- familias: todas con fallback, igual que el resto de tokens --- */
    --cw-mono: var(--mono, 'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace);
    --cw-sans: var(--sans, 'Host Grotesk', 'Inter', system-ui, sans-serif);
    --cw-body: var(--body, 'Inter', system-ui, -apple-system, sans-serif);
    --cw-serif: var(--serif, 'Aleo', Georgia, 'Times New Roman', serif);
    --cw-eo: var(--e-out, cubic-bezier(.22, 1, .36, 1));
    --cw-es: var(--e-soft, cubic-bezier(.16, 1, .3, 1));
    --cw-din: var(--d-in, .32s);
    --cw-cut: var(--cut, 11px);

    /* --- ritmo (total ~1,74 s, por debajo de la red de seguridad de 2,5 s) --- */
    --cw-t0: .16s;      /* arranque */
    --cw-ln: .048s;     /* cadencia de tecleo: una linea cada 48 ms */
    --cw-tw: .048s;     /* lo que tarda en escribirse una linea = la cadencia,
                           asi solo hay un caret vivo en cada instante */
    --cw-lag: .10s;     /* retardo del bloque renderizado respecto a su linea */
    --cw-o: 0s;         /* desfase extra dentro de un grupo */
    --cw-last: 30;      /* indice 0-based de la ultima linea del editor */

    /* --- metrica del editor: 10,6/15,2 = 1,43 de interlineado --- */
    --cw-fs: clamp(9px, calc(.36vw + 5.9px), 10.6px);
    --cw-lh: calc(var(--cw-fs) * 1.43);
    --cw-gut: calc(var(--cw-fs) * 3.1);
    --cw-rows: 30.6;    /* filas visibles: a la 31 la corta el borde inferior */

    /* --- unidad de la web en miniatura (escala con su ancho real) --- */
    --cw-u: clamp(8.8px, calc(.42vw + 5.2px), 11.4px);

    /* --- tema del editor: 6 tokens, cerrado.
           HTML no produce keyword/numero/funcion, por eso no existen. --- */
    --cw-bg: #15151a;
    --cw-bar: #0f0f13;
    --cw-panel: #131318;
    --cw-act: #1c1c23;
    --cw-hair: rgba(255, 255, 255, .07);
    --cw-hair2: rgba(255, 255, 255, .045);
    --cw-cm: #5b6170;
    --cw-tag: var(--accent, #ff4d4d);
    --cw-atr: #93a2b5;
    --cw-str: #c4ad81;
    --cw-txt: #d9dce2;
    --cw-pun: #767e8d;
    --cw-dim: rgba(217, 220, 226, .44);
    --cw-ok: #3fb950;
    --cw-warn: #d29922;

    /* tintes de marca: fallback plano + color-mix retematizable */
    --cw-a08: rgba(255, 77, 77, .08);
    --cw-a14: rgba(255, 77, 77, .14);
    --cw-a34: rgba(255, 77, 77, .34);
    --cw-a55: rgba(255, 77, 77, .55);

    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: 18px;
    align-items: stretch;
    max-width: 100%;
    pointer-events: none;
}

@supports (color: color-mix(in srgb, red 50%, transparent)){
    .cw-demo{
        --cw-a08: color-mix(in srgb, var(--accent, #ff4d4d) 8%, transparent);
        --cw-a14: color-mix(in srgb, var(--accent, #ff4d4d) 14%, transparent);
        --cw-a34: color-mix(in srgb, var(--accent, #ff4d4d) 34%, transparent);
        --cw-a55: color-mix(in srgb, var(--accent, #ff4d4d) 55%, transparent);
    }
}

.cw-demo *{ pointer-events: none; }
.cw-code, .cw-code *, .cw-page, .cw-page *{ pointer-events: auto; }

/* --- envoltorio: la sombra vive aqui porque clip-path recorta drop-shadow --- */
.cw-shell{
    min-width: 0;
    display: flex;
    filter: drop-shadow(0 12px 26px rgba(28, 28, 28, .13));
}

.cw-win{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 4px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cw-cut)), calc(100% - var(--cw-cut)) 100%, 0 100%);
}

/* ==========================================================================
   1 · EDITOR
   ========================================================================== */
.cw-ide{
    background: var(--cw-bg);
    border: 1px solid rgba(255, 255, 255, .09);
}

/* --- barra de pestañas --- */
.cw-bar{
    flex: none;
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: calc(var(--cw-fs) * 2.55);
    padding-left: 9px;
    background: var(--cw-bar);
    border-bottom: 1px solid var(--cw-hair);
}
.cw-dots{ display: flex; align-items: center; gap: 5px; flex: none; }
.cw-dots i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.cw-dots i:first-child{ background: var(--cw-a55); }

.cw-tabs{ display: flex; align-items: stretch; min-width: 0; overflow: hidden; }
.cw-tab{
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 0 8px;
    font-family: var(--cw-mono);
    font-size: max(9px, calc(var(--cw-fs) * .88));
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(217, 220, 226, .42);
    white-space: nowrap;
    border-right: 1px solid var(--cw-hair2);
}
.cw-tab-on{
    color: #eceef2;
    background: var(--cw-bg);
    box-shadow: inset 0 -2px 0 0 var(--accent, #ff4d4d);
}
.cw-ft{ flex: none; width: 8px; height: 8px; border-radius: 1px; }
.cw-ft-html{ background: var(--accent, #ff4d4d); }
.cw-ft-css{ background: #5aa2d8; }
.cw-ft-js{ background: #d8c05a; }
.cw-ft-json{ background: #8ec07c; }
.cw-ft-md{ background: #9a9fb0; }
.cw-dirty{ flex: none; width: 6px; height: 6px; border-radius: 50%; background: #cfd3da; }
.cw-x{
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    opacity: .55;
}
.cw-x::before,
.cw-x::after{
    content: "";
    position: absolute;
    left: 0;
    top: 3.5px;
    width: 8px;
    height: 1px;
    background: currentColor;
}
.cw-x::before{ transform: rotate(45deg); }
.cw-x::after{ transform: rotate(-45deg); }

/* --- cuerpo: explorador + area de codigo --- */
.cw-body{ flex: 1; display: flex; min-height: 0; min-width: 0; }

.cw-side{
    flex: none;
    width: calc(var(--cw-fs) * 9.8);
    padding: 7px 0 0;
    background: var(--cw-panel);
    border-right: 1px solid var(--cw-hair);
    overflow: hidden;
}
.cw-side-h{
    font-family: var(--cw-mono);
    font-size: max(9px, calc(var(--cw-fs) * .84));
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cw-dim);
    padding: 0 8px 7px;
    white-space: nowrap;
}
.cw-tree{ display: flex; flex-direction: column; }
.cw-fold,
.cw-file{
    display: flex;
    align-items: center;
    gap: 5px;
    height: calc(var(--cw-fs) * 1.8);
    padding: 0 6px 0 8px;
    font-family: var(--cw-mono);
    font-size: max(9px, calc(var(--cw-fs) * .88));
    color: rgba(217, 220, 226, .58);
    white-space: nowrap;
}
.cw-fold{
    color: rgba(217, 220, 226, .82);
    font-weight: 500;
    letter-spacing: .01em;
}
.cw-fold::before{
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transform: rotate(90deg);
}
.cw-file{ padding-left: 15px; }
.cw-file-on{
    color: #eceef2;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 2px 0 0 0 var(--accent, #ff4d4d);
}
.cw-mark{
    margin-left: auto;
    font-family: var(--cw-mono);
    font-size: max(9px, calc(var(--cw-fs) * .82));
    font-weight: 500;
    color: var(--cw-warn);
}
.cw-mark-a{ color: var(--cw-ok); }

.cw-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cw-crumb{
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    height: calc(var(--cw-fs) * 1.9);
    padding: 0 8px;
    font-family: var(--cw-mono);
    font-size: max(9px, calc(var(--cw-fs) * .84));
    color: var(--cw-dim);
    white-space: nowrap;
    overflow: hidden;
    background: var(--cw-bg);
}
.cw-crumb i{ color: rgba(217, 220, 226, .26); font-style: normal; }
.cw-crumb b{ color: rgba(217, 220, 226, .74); font-weight: 500; }

/* --- area de codigo --- */
.cw-code{
    position: relative;
    flex: none;
    height: calc(var(--cw-lh) * var(--cw-rows));
    overflow: hidden;
}
.cw-code::before{      /* canal del gutter */
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: var(--cw-gut);
    background: rgba(255, 255, 255, .022);
    border-right: 1px solid var(--cw-hair2);
}

.cw-ln{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: var(--cw-lh);
    font-family: var(--cw-mono);
    font-size: var(--cw-fs);
    line-height: var(--cw-lh);
    color: var(--cw-txt);
}
.cw-ln-act{ background: var(--cw-act); --cw-vbg: var(--cw-act); }

.cw-num{
    position: relative;
    flex: none;
    width: var(--cw-gut);
    padding-right: 8px;
    text-align: right;
    font-size: calc(var(--cw-fs) * .92);
    color: rgba(217, 220, 226, .36);
}
.cw-ln-act .cw-num{ color: rgba(217, 220, 226, .8); }
/* marcas de git pegadas al borde del gutter */
.cw-ln-add .cw-num::before,
.cw-ln-mod .cw-num::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cw-ok);
}
.cw-ln-mod .cw-num::before{ background: var(--cw-warn); }

.cw-tx{
    position: relative;
    flex: 0 0 auto;
    margin-left: 10px;
    white-space: pre;
}
/* guias de indentacion cada 2 espacios */
.cw-ind1 .cw-tx::before,
.cw-ind2 .cw-tx::before{
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    bottom: -1px;
    width: 0;
    border-left: 1px solid rgba(255, 255, 255, .07);
}
.cw-ind2 .cw-tx::before{ box-shadow: 2ch 0 0 0 rgba(255, 255, 255, .07); }

.cw-cm{ color: var(--cw-cm); font-style: italic; }
.cw-tag{ color: var(--cw-tag); }
.cw-atr{ color: var(--cw-atr); }
.cw-str{ color: var(--cw-str); }
.cw-txt{ color: var(--cw-txt); }
.cw-pun{ color: var(--cw-pun); }
/* aviso del linter: 2 en total, los mismos que anuncia la barra de estado */
.cw-lint{
    text-decoration: underline wavy var(--cw-warn);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* cortina de tecleo: tapa la linea y se retira hacia la derecha */
.cw-veil{
    position: absolute;
    inset: 0 -1px 0 0;
    background: var(--cw-vbg, var(--cw-bg));
    font: inherit;             /* 1ch identico al del texto */
    font-style: normal;
    transform: scaleX(0);      /* estado TERMINADO: no tapa nada */
    transform-origin: 100% 50%;
}
.cw-cur{
    position: absolute;
    left: 0;
    top: 50%;
    width: .5ch;
    height: 1.15em;
    margin-top: -.575em;
    font: inherit;                                     /* idem: el caret mide en ch */
    font-style: normal;
    background: var(--accent, #ff4d4d);
    opacity: 0;                                        /* linea ya escrita */
    transform: translateX(calc(var(--n) * 1ch));       /* al final del texto */
}
.cw-cur-live{ opacity: 1; }                            /* cursor real, ultima linea */

/* minimapa: las 57 lineas del archivo, corredera sobre las visibles (12-42) */
.cw-map{
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: calc(var(--cw-fs) * 3.2);
    height: 100%;
    padding: 4px 5px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--cw-bg);
    border-left: 1px solid var(--cw-hair2);
}
.cw-map i{
    flex: none;
    height: 2px;
    width: calc(var(--mw) * 1%);
    margin-left: calc(var(--mo) * 1%);
    background: rgba(217, 220, 226, .24);
}
.cw-map i:nth-child(3n+2){ background: var(--cw-a34); }
.cw-mapv{
    position: absolute;
    left: 0;
    right: 0;
    top: 37px;
    height: 93px;
    background: rgba(255, 255, 255, .07);
    border-top: 1px solid var(--cw-hair2);
    border-bottom: 1px solid var(--cw-hair2);
}
.cw-scroll{
    position: absolute;
    z-index: 3;
    right: 1px;
    top: 34px;
    width: 3px;
    height: 99px;
    border-radius: 2px;
    background: rgba(217, 220, 226, .3);
}

/* --- barra de estado --- */
.cw-status{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: calc(var(--cw-fs) * 2.05);
    padding: 0 9px;
    background: var(--cw-bar);
    border-top: 1px solid var(--cw-hair);
    font-family: var(--cw-mono);
    font-size: max(9px, calc(var(--cw-fs) * .84));
    color: var(--cw-dim);
    white-space: nowrap;
    overflow: hidden;
}
.cw-stg{ display: flex; align-items: center; gap: 11px; min-width: 0; overflow: hidden; }
.cw-sti{ display: flex; align-items: center; gap: 4px; flex: none; }
.cw-branch{ color: rgba(217, 220, 226, .76); font-weight: 500; }
.cw-branch::before{
    content: "";
    width: 6px;
    height: 6px;
    border: 1px solid currentColor;
    border-radius: 50%;
    box-shadow: -4px 0 0 -2px currentColor;
}
.cw-err b{ color: var(--cw-ok); font-weight: 500; }
.cw-err em{ color: var(--cw-warn); font-style: normal; font-weight: 500; }
.cw-lang{ color: rgba(217, 220, 226, .76); font-weight: 500; }

/* ==========================================================================
   2 · NAVEGADOR + WEB EN MINIATURA
   ========================================================================== */
.cw-brw{
    background: var(--bg, #fff);
    border: 1px solid var(--line, rgba(28, 28, 28, .12));
}

.cw-btabs{
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: calc(var(--cw-u) * 2.15);
    padding: 0 8px;
    background: #e7e7e7;
    border-bottom: 1px solid var(--line, rgba(28, 28, 28, .12));
}
.cw-btab{
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 78%;
    height: calc(100% - 3px);
    padding: 0 7px;
    background: var(--bg, #fff);
    border-radius: 4px 4px 0 0;
    font-family: var(--cw-body);
    font-size: max(9px, calc(var(--cw-u) * .78));
    color: var(--ink, #1c1c1c);
}
.cw-fav{
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--accent, #ff4d4d);
    clip-path: polygon(0 0, 100% 0, 100% 64%, 64% 100%, 0 100%);
}
.cw-btitle{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-btab .cw-x{ color: var(--ink-45, rgba(28, 28, 28, .62)); }
.cw-plus{
    flex: none;
    position: relative;
    width: 9px;
    height: 9px;
    margin-bottom: 5px;
    opacity: .5;
}
.cw-plus::before,
.cw-plus::after{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 9px;
    height: 1px;
    background: var(--ink, #1c1c1c);
}
.cw-plus::after{ transform: rotate(90deg); }

.cw-tool{
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    height: calc(var(--cw-u) * 2.5);
    background: var(--bg-alt, #f4f4f4);
    border-bottom: 1px solid var(--line-soft, rgba(28, 28, 28, .07));
}
.cw-i{
    flex: none;
    width: calc(var(--cw-u) * 1.05);
    height: calc(var(--cw-u) * 1.05);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cw-gl{ display: flex; color: var(--ink-45, rgba(28, 28, 28, .62)); }
.cw-gl-off{ opacity: .35; }
.cw-url{
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    height: calc(var(--cw-u) * 1.6);
    padding: 0 9px;
    border-radius: 999px;
    background: var(--bg, #fff);
    border: 1px solid var(--line-soft, rgba(28, 28, 28, .07));
    font-family: var(--cw-body);
    font-size: max(9px, calc(var(--cw-u) * .78));
    overflow: hidden;
    white-space: nowrap;
}
.cw-url .cw-i{
    width: calc(var(--cw-u) * .82);
    height: calc(var(--cw-u) * .82);
    color: var(--ink-45, rgba(28, 28, 28, .62));
}
.cw-dom{ color: var(--ink, #1c1c1c); font-weight: 500; }
.cw-path{ color: var(--ink-45, rgba(28, 28, 28, .62)); }
.cw-kebab{
    flex: none;
    width: 3px;
    height: 3px;
    margin: 0 2px;
    border-radius: 50%;
    color: var(--ink-45, rgba(28, 28, 28, .62));
    background: currentColor;
    box-shadow: 0 -5px 0 0 currentColor, 0 5px 0 0 currentColor;
}

/* --- pagina renderizada ---
   .cw-doc va en absoluto a proposito: asi la altura de la pareja la fija
   SIEMPRE el editor y la web sobrante la corta el marco, como en una captura.
   Si la pagina empujara, al editor le saldria una banda negra vacia debajo. */
.cw-page{
    position: relative;
    flex: 1;
    /* en una sola columna nadie estira este panel: se lo da su propio minimo,
       calculado sobre el alto del area de codigo para que las dos ventanas
       sigan siendo hermanas */
    min-height: calc(var(--cw-lh) * var(--cw-rows));
    overflow: hidden;
    background: var(--bg, #fff);
}
.cw-doc{
    position: absolute;
    inset: 0;
    overflow: hidden;
    font-size: var(--cw-u);
    padding: 1.1em 1.25em 0;
}
.cw-thumb{
    position: absolute;
    right: 2px;
    top: 6%;
    width: 3px;
    height: 34%;
    border-radius: 2px;
    background: rgba(28, 28, 28, .18);
}

.cw-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5em 1em;
    padding-bottom: .85em;
    border-bottom: 1px solid var(--line-soft, rgba(28, 28, 28, .07));
}
.cw-marca{
    display: flex;
    align-items: center;
    gap: .45em;
    font-family: var(--cw-sans);
    font-weight: 500;
    font-size: 1.22em;
    letter-spacing: -.015em;
    color: var(--ink, #1c1c1c);
    white-space: nowrap;
}
.cw-marca::before{
    content: "";
    width: .8em;
    height: .8em;
    background: var(--accent, #ff4d4d);
    clip-path: polygon(0 0, 100% 0, 100% 64%, 64% 100%, 0 100%);
}
.cw-menu{
    display: flex;
    flex-wrap: wrap;
    gap: .35em .95em;
    font-family: var(--cw-body);
    font-size: .84em;
    color: var(--ink-60, rgba(28, 28, 28, .74));
    white-space: nowrap;
}

.cw-hero{ padding: 1.05em 0 1.15em; }
.cw-h1{
    font-family: var(--cw-serif);
    font-weight: 300;
    font-size: 2.05em;
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--ink, #1c1c1c);
}
.cw-lead{
    margin-top: .55em;
    max-width: 30em;
    font-family: var(--cw-body);
    font-size: .92em;
    line-height: 1.5;
    color: var(--ink-60, rgba(28, 28, 28, .74));
}
.cw-ctarow{ display: flex; align-items: center; margin-top: .95em; }
.cw-cta{
    display: inline-flex;
    align-items: center;
    font-family: var(--cw-sans);
    font-weight: 500;
    font-size: .92em;
    color: #fff;
    background: var(--accent, #ff4d4d);
    padding: .72em 1.15em;
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - .62em), calc(100% - .62em) 100%, 0 100%);
    white-space: nowrap;
}
.cw-small{
    margin-top: .75em;
    font-family: var(--cw-mono);
    font-size: max(9px, .78em);
    letter-spacing: .01em;
    color: var(--ink-45, rgba(28, 28, 28, .62));
}
.cw-firman{
    display: flex;
    align-items: center;
    gap: .55em;
    margin-top: .85em;
    font-family: var(--cw-body);
    font-size: .82em;
    color: var(--ink-60, rgba(28, 28, 28, .74));
}
.cw-avs{ display: flex; flex: none; }
.cw-av{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    font-family: var(--cw-mono);
    font-size: .84em;
    font-weight: 500;
    letter-spacing: .02em;
    color: #fff;
    box-shadow: 0 0 0 1.5px var(--bg, #fff);
}
.cw-av-1{ background: var(--ink, #1c1c1c); }
.cw-av-2{ background: var(--accent-deep, #d92d20); margin-left: -.6em; }
.cw-firman b{ color: var(--ink, #1c1c1c); font-weight: 600; }

.cw-hoy{
    margin-top: 1.05em;
    font-family: var(--cw-mono);
    font-size: max(9px, .78em);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-45, rgba(28, 28, 28, .62));
}
.cw-hoy b{ color: var(--accent-deep, #d92d20); }
.cw-huecos{
    display: flex;
    flex-wrap: wrap;
    gap: .35em;
    margin-top: .55em;
}
.cw-hue{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6em;
    padding: .35em .45em;
    border-radius: 2px;
    font-family: var(--cw-mono);
    font-size: max(9px, .78em);
    font-weight: 500;
    color: var(--ink-45, rgba(28, 28, 28, .62));
    background: var(--bg-alt, #f4f4f4);
    border: 1px solid transparent;
    text-decoration: line-through;
    text-decoration-color: rgba(28, 28, 28, .3);
}
.cw-hue-on{
    color: var(--accent-deep, #d92d20);
    background: var(--cw-a08);
    border-color: var(--cw-a34);
    text-decoration: none;
}

.cw-h2{
    /* la regla que separa la seccion va en el titulo, no en el contenedor:
       asi aparece con el, y no queda una linea flotando sobre el vacio */
    padding-top: 1.15em;
    border-top: 1px solid var(--line-soft, rgba(28, 28, 28, .07));
    font-family: var(--cw-mono);
    font-size: max(9px, .8em);
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-45, rgba(28, 28, 28, .62));
    margin-bottom: .7em;
}
.cw-sv{
    display: flex;
    align-items: flex-start;
    gap: .75em;
    padding: .75em .8em;
    margin-bottom: .5em;
    background: var(--bg, #fff);
    border: 1px solid var(--line, rgba(28, 28, 28, .12));
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - .55em), calc(100% - .55em) 100%, 0 100%);
}
.cw-sv-ic{
    flex: none;
    display: flex;
    margin-top: .1em;
    color: var(--accent-deep, #d92d20);
}
.cw-sv-ic .cw-i{ width: 1.35em; height: 1.35em; stroke-width: 1.6; }
.cw-sv-b{ flex: 1; min-width: 0; }
.cw-sv-h{ display: flex; align-items: center; flex-wrap: wrap; gap: .3em .5em; }
.cw-sv-n{
    font-family: var(--cw-sans);
    font-weight: 500;
    font-size: .96em;
    letter-spacing: -.01em;
    color: var(--ink, #1c1c1c);
}
.cw-chip{
    font-family: var(--cw-mono);
    font-size: max(9px, .68em);
    font-weight: 500;
    font-style: normal;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--accent-deep, #d92d20);
    background: var(--cw-a14);
    padding: .2em .45em;
    border-radius: 2px;
    white-space: nowrap;
}
.cw-sv-d{
    display: block;
    margin-top: .28em;
    font-family: var(--cw-body);
    font-size: .82em;
    line-height: 1.42;
    color: var(--ink-60, rgba(28, 28, 28, .74));
}
.cw-sv-note{
    display: block;
    margin-top: .34em;
    font-family: var(--cw-mono);
    font-size: max(9px, .72em);
    letter-spacing: .02em;
    color: var(--ink-45, rgba(28, 28, 28, .62));
}
.cw-price{
    flex: none;
    text-align: right;
    font-family: var(--cw-mono);
    font-size: 1.08em;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink, #1c1c1c);
}
.cw-price span{
    display: block;
    margin-top: .15em;
    font-size: .58em;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--ink-45, rgba(28, 28, 28, .62));
}

.cw-more{
    margin-top: .55em;
    font-family: var(--cw-body);
    font-size: .82em;
    font-weight: 500;
    color: var(--accent-deep, #d92d20);
}

/* pie: existe para que el borde inferior del marco corte la pagina,
   igual que en una captura de verdad */
.cw-foot{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4em 1em;
    margin-top: 1.25em;
    padding: .95em 0 3em;
    border-top: 1px solid var(--line-soft, rgba(28, 28, 28, .07));
    font-family: var(--cw-body);
    font-size: .78em;
    color: var(--ink-45, rgba(28, 28, 28, .62));
}
.cw-foot b{ color: var(--ink-60, rgba(28, 28, 28, .74)); font-weight: 500; }

/* ==========================================================================
   3 · ESTADO INICIAL (solo bajo html.js; sin JS se ve TERMINADO)
   ========================================================================== */
.js .cw-ln{ opacity: 0; }
.js .cw-veil{ transform: scaleX(1); }
.js .cw-cur{ opacity: 0; transform: translateX(0); }
.js .cw-rv{ opacity: 0; }

/* ==========================================================================
   4 · SECUENCIA (al recibir .in en la raiz) · total ~1,74 s
   ========================================================================== */
/* Nota: todo se anima con fill BACKWARDS y el estado final va en la propia
   regla. Con steps() y fill forwards el navegador congela el penultimo paso
   (el caret se quedaba a un caracter del final y no se apagaba). */
.js .cw-demo.in .cw-ln{
    opacity: 1;
    animation: cwLn var(--cw-tw) linear backwards;
    animation-delay: calc(var(--cw-t0) + var(--l) * var(--cw-ln));
}
.js .cw-demo.in .cw-veil{
    transform: scaleX(0);
    animation: cwWipe var(--cw-tw) steps(var(--n)) backwards;
    animation-delay: calc(var(--cw-t0) + var(--l) * var(--cw-ln));
}
.js .cw-demo.in .cw-cur{
    opacity: 0;
    transform: translateX(calc(var(--n) * 1ch));
    animation: cwCx var(--cw-tw) steps(var(--n)) backwards,
               cwCv var(--cw-tw) linear backwards;
    animation-delay: calc(var(--cw-t0) + var(--l) * var(--cw-ln)),
                     calc(var(--cw-t0) + var(--l) * var(--cw-ln));
}
.js .cw-demo.in .cw-cur-live{
    opacity: 1;
    animation: cwCx var(--cw-tw) steps(var(--n)) backwards,
               cwCv var(--cw-tw) linear backwards,
               cwBlink 1s steps(1, end) 3;
    animation-delay: calc(var(--cw-t0) + var(--l) * var(--cw-ln)),
                     calc(var(--cw-t0) + var(--l) * var(--cw-ln)),
                     calc(var(--cw-t0) + var(--l) * var(--cw-ln) + var(--cw-tw));
}
.js .cw-demo.in .cw-rv{
    opacity: 1;
    animation: cwRv var(--cw-din) var(--cw-eo) backwards;
    animation-delay: calc(var(--cw-t0) + var(--p) * var(--cw-ln) + var(--cw-tw) + var(--cw-lag) + var(--cw-o));
}
/* remate: la regla del boton entra en vigor en el render */
.js .cw-demo.in .cw-cta{
    animation: cwPulse .42s var(--cw-es) backwards;
    animation-delay: calc(var(--cw-t0) + var(--p) * var(--cw-ln) + var(--cw-tw) + var(--cw-lag) + .12s);
}
/* la tercera tarjeta cae justo detras de la ultima linea escrita */
.cw-sv-3{ --p: calc(var(--cw-last) + 1); }

@keyframes cwLn{
    0%{ opacity: 0; }
    .01%, 100%{ opacity: 1; }
}
@keyframes cwWipe{
    from{ transform: scaleX(1); }
    to{ transform: scaleX(0); }
}
@keyframes cwCx{
    from{ transform: translateX(0); }
    to{ transform: translateX(calc(var(--n) * 1ch)); }
}
@keyframes cwCv{
    0%{ opacity: 0; }
    .01%, 100%{ opacity: 1; }
}
@keyframes cwBlink{
    0%{ opacity: 1; }
    50%{ opacity: 0; }
    100%{ opacity: 1; }
}
@keyframes cwRv{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: none; }
}
@keyframes cwPulse{
    0%{ filter: drop-shadow(0 0 0 var(--cw-a55)); }
    45%{ filter: drop-shadow(0 3px 9px var(--cw-a55)); }
    100%{ filter: drop-shadow(0 0 0 var(--cw-a08)); }
}

/* ==========================================================================
   5 · RESPONSIVE · de 320 a 1400 sin desbordar
   ========================================================================== */
@media (max-width: 900px){
    .cw-demo{
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        --cw-fs: clamp(9.4px, calc(.5vw + 5.6px), 12px);
        --cw-u: clamp(9px, calc(.9vw + 5.6px), 12.6px);
    }
    .cw-lead{ max-width: 36em; }
}
@media (max-width: 620px){
    .cw-side{ display: none; }
    .cw-map{ width: calc(var(--cw-fs) * 2.5); }
    .cw-tab-3{ display: none; }
}
@media (max-width: 400px){
    .cw-demo{ --cw-cut: 9px; }
    .cw-crumb-3,
    .cw-sti-x{ display: none; }
    .cw-map{ display: none; }
    .cw-bar{ padding-left: 6px; gap: 7px; }
    .cw-status{ gap: 6px; padding: 0 6px; }
    .cw-stg{ gap: 8px; }
    .cw-doc{ padding: .9em 1em 0; }
}

/* ==========================================================================
   6 · MOVIMIENTO REDUCIDO → estado FINAL, sin animaciones
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
    .js .cw-ln,
    .js .cw-rv{
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .js .cw-veil{ transform: scaleX(0) !important; animation: none !important; }
    .js .cw-cur{
        opacity: 0 !important;
        transform: translateX(calc(var(--n) * 1ch)) !important;
        animation: none !important;
    }
    .js .cw-cur-live{ opacity: 1 !important; }
    .js .cw-cta{ filter: none !important; animation: none !important; }
}

/* ============ Panel de campañas (prefijo db-) ============ */
.db-panel{
    --db-cut:14px;
    --db-cut-s:6px;
    --db-grid:color-mix(in srgb, var(--ink) 8%, transparent);
    --db-serie2:color-mix(in srgb, var(--ink) 42%, transparent);
    --db-track:color-mix(in srgb, var(--ink) 10%, transparent);
    --db-fill:color-mix(in srgb, var(--ink) 48%, transparent);
    --db-cross:color-mix(in srgb, var(--ink) 26%, transparent);
    --db-sel:color-mix(in srgb, var(--accent) 5%, transparent);
    --db-halo:color-mix(in srgb, var(--accent) 20%, transparent);
    --db-plot:150px;
    --db-axw:26px;
    --db-axr:34px;
    --db-stg:22ms;
    --db-rise:7px;
    --db-eo:var(--e-out, cubic-bezier(.22,.75,.25,1));
    --db-es:var(--e-soft, cubic-bezier(.4,0,.2,1));
    --db-ep:var(--e-pop, cubic-bezier(.34,1.42,.5,1));
    --db-di:var(--d-in,.32s);
    --db-de:var(--d-enter,.42s);
    --db-ds:var(--d-settle,.68s);
    position:relative;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    font-size:13px;
    line-height:1.35;
    border:1px solid var(--line);
    border-radius:5px;
    padding:14px 16px 11px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--db-cut)),calc(100% - var(--db-cut)) 100%,0 100%);
}
/* bisel con trazo real: el clip-path recorta el borde, este pseudo lo devuelve */
.db-panel::after{
    content:"";
    position:absolute;
    height:1px;
    width:calc(var(--db-cut) * 1.4142);
    right:calc(.6px - var(--db-cut) * .2071);
    bottom:calc(var(--db-cut) * .5 + .1px);
    background:var(--line);
    transform:rotate(-45deg);
}

/* ---------- barra superior ---------- */
.db-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px 14px;
    flex-wrap:wrap;
}
.db-acct{display:flex;align-items:center;gap:9px;min-width:0}
.db-av{
    flex:none;
    width:27px;height:27px;
    border-radius:50%;
    background:var(--ink);
    color:var(--bg);
    display:grid;
    place-items:center;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.03em;
}
.db-acct-n{
    display:block;
    font-family:var(--sans);
    font-weight:500;
    font-size:13.5px;
    letter-spacing:-.005em;
    white-space:nowrap;
}
.db-acct-i{
    display:block;
    margin-top:2px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.03em;
    color:var(--ink-45);
    white-space:nowrap;
}
.db-caret{
    flex:none;
    width:0;height:0;
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-top:4px solid var(--ink-45);
}
.db-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.db-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 9px;
    background:var(--bg-alt);
    border:1px solid var(--line);
    border-radius:3px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.03em;
    color:var(--ink-60);
    white-space:nowrap;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--db-cut-s)),calc(100% - var(--db-cut-s)) 100%,0 100%);
}
.db-ico{
    position:relative;
    flex:none;
    width:27px;height:27px;
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--ink-60);
    display:grid;
    place-items:center;
    transition:background-color var(--db-di) var(--db-es),border-color var(--db-di) var(--db-es);
}
.db-ico:hover{background:var(--bg-alt);border-color:var(--ink-45)}
.db-ico-col::before{
    content:"";
    width:12px;height:11px;
    background:
        linear-gradient(currentColor,currentColor) 0 0/2px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 5px 0/2px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 10px 0/2px 100% no-repeat;
}
.db-ico-dl::before{
    content:"";
    width:1.5px;height:9px;
    background:currentColor;
    margin-bottom:3px;
}
.db-ico-dl::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:6px;height:6px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translate(-50%,-85%) rotate(45deg);
}
.db-ico-more::before{
    content:"";
    width:12px;height:2px;
    background:
        linear-gradient(currentColor,currentColor) 0 0/2px 2px no-repeat,
        linear-gradient(currentColor,currentColor) 5px 0/2px 2px no-repeat,
        linear-gradient(currentColor,currentColor) 10px 0/2px 2px no-repeat;
}
.db-sync{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.03em;
    color:var(--ink-45);
    white-space:nowrap;
}
.db-sync i{
    position:relative;
    flex:none;
    width:7px;height:7px;
    border-radius:50%;
    background:color-mix(in srgb, var(--ink) 55%, transparent);
}
.db-sync i::after{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    border:1px solid color-mix(in srgb, var(--ink) 34%, transparent);
    opacity:0;
}

/* ---------- pestañas ---------- */
.db-tabs{
    display:flex;
    align-items:flex-end;
    gap:18px;
    flex-wrap:wrap;
    margin-top:13px;
    border-bottom:1px solid var(--line);
}
.db-tab{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding-bottom:8px;
    font-family:var(--sans);
    font-weight:500;
    font-size:12.5px;
    color:var(--ink-45);
    white-space:nowrap;
}
.db-tab b{
    font-family:var(--mono);
    font-weight:500;
    font-size:10px;
    letter-spacing:.02em;
    color:var(--ink-45);
    background:var(--bg-alt);
    padding:2px 5px;
    border-radius:2px;
}
.db-tab-on{color:var(--ink)}
.db-tab-on b{color:var(--ink-60)}
.db-tab-on::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-1px;
    height:2px;
    background:var(--accent);
}

/* ---------- filtros ---------- */
.db-filters{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    margin-top:11px;
}
.db-fchip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:4px 8px;
    background:var(--bg-alt);
    border:1px solid var(--line-soft);
    border-radius:3px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.02em;
    color:var(--ink-60);
    white-space:nowrap;
}
.db-fchip-add{background:none;border-style:dashed;border-color:var(--line);color:var(--ink-45)}
.db-close{position:relative;flex:none;width:7px;height:7px;opacity:.6}
.db-close::before,.db-close::after{
    content:"";
    position:absolute;
    left:0;top:3px;
    width:7px;height:1px;
    background:currentColor;
}
.db-close::before{transform:rotate(45deg)}
.db-close::after{transform:rotate(-45deg)}
.db-search{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-left:auto;
    padding:5px 10px;
    min-width:172px;
    border:1px solid var(--line);
    border-radius:3px;
    font-size:12px;
    color:var(--ink-45);
}
.db-mag{
    position:relative;
    flex:none;
    width:10px;height:10px;
    border:1.5px solid currentColor;
    border-radius:50%;
}
.db-mag::after{
    content:"";
    position:absolute;
    right:-4px;bottom:-1px;
    width:5px;height:1.5px;
    background:currentColor;
    transform:rotate(45deg);
}

/* ---------- tarjetas de métrica ---------- */
.db-kpis{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    margin-top:14px;
}
.db-kpi{
    padding:0 14px;
    border-left:1px solid var(--line-soft);
    min-width:0;
}
.db-kpi:first-child{padding-left:0;border-left:0}
.db-kpi-l{
    display:block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--ink-45);
    white-space:nowrap;
}
.db-kpi-v{
    display:block;
    margin-top:8px;
    font-family:var(--sans);
    font-weight:500;
    font-size:26px;
    line-height:1;
    letter-spacing:-.025em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.db-kpi-d{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:9px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.02em;
    color:var(--ink-60);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.db-tri{
    flex:none;
    width:0;height:0;
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-bottom:5px solid currentColor;
}
.db-dn .db-tri{border-bottom:0;border-top:5px solid currentColor}
.db-note{
    margin-top:11px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.03em;
    color:var(--ink-45);
}

/* ---------- gráfico ---------- */
.db-chart{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--line-soft);
}
.db-chart-h{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px 16px;
    flex-wrap:wrap;
    margin-bottom:14px;
}
.db-chart-t{
    font-family:var(--serif);
    font-weight:300;
    font-size:15px;
    letter-spacing:-.01em;
}
.db-chart-t span{
    font-family:var(--body);
    font-size:12px;
    color:var(--ink-45);
}
.db-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.db-lg{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.03em;
    color:var(--ink-60);
    white-space:nowrap;
}
.db-lg i{flex:none;width:13px;height:2px;border-radius:1px;background:var(--accent)}
.db-lg b{font-weight:500;color:var(--ink-45)}
.db-lg-b i{background:var(--db-serie2)}
.db-plotwrap{display:flex;gap:8px}
.db-ax{
    position:relative;
    flex:none;
    width:var(--db-axw);
    height:var(--db-plot);
}
.db-ax-r{width:var(--db-axr)}
.db-ax span{
    position:absolute;
    right:0;
    top:var(--t);
    transform:translateY(-50%);
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1;
    color:var(--ink-45);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.db-ax-r span{right:auto;left:0}
.db-plot{position:relative;flex:1;min-width:0;height:var(--db-plot)}
.db-grid i,.db-vgrid i{position:absolute;background:var(--db-grid)}
.db-grid i{left:0;right:0;height:1px;top:var(--t)}
.db-grid i:last-child{background:var(--line)}
.db-vgrid i{top:0;bottom:0;width:1px;left:var(--t)}
.db-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.db-area{fill:url(#dbAreaFade)}
.db-fade-a{stop-color:var(--accent);stop-opacity:.2}
.db-fade-b{stop-color:var(--accent);stop-opacity:0}
.db-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.db-l1{stroke:var(--accent);stroke-width:2}
.db-l2{stroke:var(--db-serie2);stroke-width:1.5;stroke-dasharray:5 4}
.db-xhair{
    position:absolute;
    left:68.966%;
    top:0;bottom:0;
    width:1px;
    background:var(--db-cross);
}
.db-mark{position:absolute;left:68.966%;top:20.833%;width:0;height:0}
.db-mdot{
    position:absolute;
    left:-5px;top:-5px;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--accent);
    border:2px solid var(--bg);
    box-shadow:0 0 0 3px var(--db-halo);
}
.db-tip{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    padding:6px 9px 7px;
    background:var(--ink);
    border-radius:3px;
    white-space:nowrap;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--db-cut-s)),calc(100% - var(--db-cut-s)) 100%,0 100%);
}
.db-tip-d{
    display:block;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:color-mix(in srgb, var(--bg) 62%, transparent);
}
.db-tip-v{
    display:block;
    margin-top:3px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.01em;
    color:var(--bg);
}
.db-tip-s{color:color-mix(in srgb, var(--bg) 60%, transparent)}
.db-xax{
    position:relative;
    height:13px;
    margin:8px calc(var(--db-axr) + 8px) 0 calc(var(--db-axw) + 8px);
}
.db-xax span{
    position:absolute;
    left:var(--t);
    transform:translateX(-50%);
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1;
    color:var(--ink-45);
    white-space:nowrap;
}
.db-xax span:first-child{transform:none}
.db-xax span:last-child{left:auto;right:0;transform:none}

/* ---------- tabla ---------- */
.db-table{
    --db-cols:16px minmax(0,1fr) 104px 70px 70px 68px 52px 46px 62px 88px 112px;
    margin-top:15px;
}
.db-tr{
    display:grid;
    grid-template-columns:var(--db-cols);
    align-items:center;
    gap:9px;
    padding:8px 6px 8px 5px;
    border-top:1px solid var(--line-soft);
    transition:background-color var(--db-di) var(--db-es);
}
.db-th{
    border-top:0;
    padding-bottom:7px;
    padding-top:0;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-45);
}
.db-th span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-row:hover{background:var(--bg-alt)}
.db-sel{background:var(--db-sel);box-shadow:inset 2px 0 0 var(--accent)}
.db-sel:hover{background:var(--db-sel)}
.db-off .db-name-n,.db-off .db-num{color:var(--ink-45)}
.db-r{text-align:right}
.db-num{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.01em;
    font-variant-numeric:tabular-nums;
    color:var(--ink-60);
    text-align:right;
    white-space:nowrap;
}
.db-num-s{color:var(--ink);font-weight:500}
.db-box{
    flex:none;
    width:13px;height:13px;
    border:1px solid color-mix(in srgb, var(--ink) 32%, transparent);
    border-radius:2.5px;
    position:relative;
    justify-self:start;
}
.db-box-on{background:var(--ink);border-color:var(--ink)}
.db-box-on::after{
    content:"";
    position:absolute;
    left:3.5px;top:1px;
    width:4px;height:7px;
    border-right:1.5px solid var(--bg);
    border-bottom:1.5px solid var(--bg);
    transform:rotate(40deg);
}
.db-box-mid::after{
    content:"";
    position:absolute;
    left:2px;top:5px;
    width:7px;height:1.5px;
    background:color-mix(in srgb, var(--ink) 45%, transparent);
}
.db-c-name,.db-name{min-width:0}
.db-name-m>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.db-name-n{
    display:block;
    font-family:var(--sans);
    font-weight:500;
    font-size:13px;
    letter-spacing:-.005em;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.db-name-m{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
    min-width:0;
    font-size:11px;
    color:var(--ink-45);
    white-space:nowrap;
    overflow:hidden;
}
.db-tag{
    flex:none;
    padding:1px 5px;
    border:1px solid var(--line);
    border-radius:2px;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.02em;
    color:var(--ink-60);
}
.db-warn{color:var(--accent-deep);overflow:hidden;text-overflow:ellipsis}
.db-warn::before{
    content:"";
    display:inline-block;
    vertical-align:1px;
    margin-right:5px;
    width:0;height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:7px solid currentColor;
}
.db-state{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    font-size:11.5px;
    color:var(--ink-60);
}
.db-state span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-sdot{
    flex:none;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--ink);
}
.db-sdot-p{background:none;border:1.5px solid var(--ink-45)}
.db-sdot-l{background:var(--accent-deep)}
.db-sdot-a{background:none;border:1.5px dotted color-mix(in srgb, var(--ink) 55%, transparent)}
.db-plat{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 6px;
    background:var(--bg-alt);
    border:1px solid var(--line-soft);
    border-radius:2px;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.04em;
    color:var(--ink-60);
    white-space:nowrap;
}
.db-glyph{flex:none;display:block;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.db-goal{display:flex;align-items:center;gap:8px;min-width:0}
.db-bar{
    position:relative;
    flex:1;
    min-width:24px;
    height:5px;
    border-radius:3px;
    background:var(--db-track);
    overflow:hidden;
}
.db-bar i{
    display:block;
    width:var(--w);
    height:100%;
    border-radius:3px;
    background:var(--db-fill);
    transform-origin:0 50%;
}
.db-bar-hot i{background:var(--accent)}
.db-pct{flex:none;text-align:right}
.db-pct b{
    display:block;
    font-family:var(--mono);
    font-weight:500;
    font-size:11px;
    color:var(--ink-60);
    font-variant-numeric:tabular-nums;
}
.db-pct s{
    display:block;
    margin-top:2px;
    text-decoration:none;
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink-45);
    font-variant-numeric:tabular-nums;
}
.db-sortd{
    display:inline-block;
    margin-left:5px;
    vertical-align:1px;
    width:0;height:0;
    border-left:3px solid transparent;
    border-right:3px solid transparent;
    border-top:4px solid var(--ink);
}
.db-tot{
    border-top:1px solid var(--line);
    background:var(--bg-alt);
    padding-top:9px;
    padding-bottom:9px;
}
.db-tot .db-num{color:var(--ink);font-weight:500}
.db-tot-l{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ---------- pie ---------- */
.db-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px 14px;
    flex-wrap:wrap;
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid var(--line-soft);
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.03em;
    color:var(--ink-45);
}
.db-pager{display:flex;align-items:center;gap:8px}
.db-pg{
    display:grid;
    place-items:center;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border:1px solid var(--line);
    border-radius:2px;
    color:var(--ink-60);
}
.db-pg-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.db-pg-off{opacity:.4}
.db-chev{width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.db-chev-l{border-right:4px solid currentColor}
.db-chev-r{border-left:4px solid currentColor}

/* ---------- estado inicial: sólo cuando hay JS ---------- */
.js .db-panel .db-top,
.js .db-panel .db-tabs,
.js .db-panel .db-filters,
.js .db-panel .db-kpi,
.js .db-panel .db-note,
.js .db-panel .db-chart-h,
.js .db-panel .db-row,
.js .db-panel .db-tot,
.js .db-panel .db-foot{opacity:0}
.js .db-panel .db-grid,
.js .db-panel .db-vgrid,
.js .db-panel .db-ax,
.js .db-panel .db-xax{opacity:0}
.js .db-panel .db-sweep{transform:translateX(-612px)}
.js .db-panel .db-mark,
.js .db-panel .db-xhair{opacity:0}
.js .db-panel .db-bar i{transform:scaleX(0)}

/* ---------- entrada al recibir .in ---------- */
.js .db-panel.in .db-top{animation:dbRise var(--db-de) var(--db-eo) both}
.js .db-panel.in .db-tabs{animation:dbRise var(--db-de) var(--db-eo) 50ms both}
.js .db-panel.in .db-filters{animation:dbRise var(--db-de) var(--db-eo) 90ms both}
.js .db-panel.in .db-kpi{
    animation:dbRise var(--db-de) var(--db-eo) both;
    animation-delay:calc(110ms + var(--i) * 32ms);
}
.js .db-panel.in .db-note{animation:dbFade var(--db-di) var(--db-es) 250ms both}
.js .db-panel.in .db-chart-h{animation:dbFade var(--db-di) var(--db-es) 200ms both}
.js .db-panel.in .db-grid,
.js .db-panel.in .db-vgrid,
.js .db-panel.in .db-ax,
.js .db-panel.in .db-xax{animation:dbFade var(--db-di) var(--db-es) 220ms both}
.js .db-panel.in .db-sweep{animation:dbSweep .64s var(--db-es) 240ms both}
.js .db-panel.in .db-xhair{animation:dbFade var(--db-di) var(--db-es) 720ms both}
.js .db-panel.in .db-mark{animation:dbPop var(--db-di) var(--db-ep) 760ms both}
.js .db-panel.in .db-row,
.js .db-panel.in .db-tot{
    animation:dbRise var(--db-de) var(--db-eo) both;
    animation-delay:calc(210ms + var(--i) * var(--db-stg));
}
.js .db-panel.in .db-bar i{
    animation:dbGrow var(--db-de) var(--db-eo) both;
    animation-delay:calc(300ms + var(--i) * var(--db-stg));
}
.js .db-panel.in .db-foot{animation:dbFade var(--db-ds) var(--db-es) 620ms both}
.js .db-panel.in .db-sync i::after{animation:dbPing 2.8s var(--db-es) 1200ms infinite}

@keyframes dbRise{
    from{opacity:0;transform:translateY(var(--db-rise))}
    to{opacity:1;transform:none}
}
@keyframes dbFade{
    from{opacity:0}
    to{opacity:1}
}
@keyframes dbSweep{
    from{transform:translateX(-612px)}
    to{transform:translateX(0)}
}
@keyframes dbPop{
    from{opacity:0;transform:scale(.6)}
    to{opacity:1;transform:none}
}
@keyframes dbGrow{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}
@keyframes dbPing{
    0%{transform:scale(.55);opacity:.85}
    65%,100%{transform:scale(1.6);opacity:0}
}

/* ---------- responsive ---------- */
@media (max-width:1120px){
    .db-table{--db-cols:16px minmax(0,1fr) 100px 68px 66px 52px 46px 60px 88px 110px}
    .db-c-imp{display:none}
}
@media (max-width:980px){
    .db-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 0}
    .db-kpi:nth-child(3n+1){padding-left:0;border-left:0}
    .db-kpi-v{font-size:23px}
    .db-table{--db-cols:16px minmax(0,1fr) 96px 66px 62px 44px 58px 86px 104px}
    .db-c-clk{display:none}
}
@media (max-width:840px){
    .db-panel{padding:13px 14px 11px;--db-plot:136px}
    .db-table{--db-cols:16px minmax(0,1fr) 92px 64px 44px 56px 84px 96px}
    .db-c-bud{display:none}
    .db-search{margin-left:0;flex:1 1 150px;min-width:0}
}
@media (max-width:680px){
    .db-table{--db-cols:16px minmax(0,1fr) 88px 44px 54px 80px 86px}
    .db-c-plat{display:none}
    .db-acct-i{display:none}
    .db-ico-more{display:none}
}
@media (max-width:600px){
    .db-panel{padding:12px 12px 10px;--db-plot:120px;--db-axw:22px;--db-axr:30px}
    .db-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 0}
    .db-kpi{padding-left:14px;border-left:1px solid var(--line-soft)}
    .db-kpi:nth-child(odd){padding-left:0;border-left:0}
    .db-kpi:last-child{grid-column:1/-1}
    .db-kpi-v{font-size:21px}
    .db-tr{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:5px 10px;
        padding:10px 4px 11px;
    }
    .db-c-chk{order:1;flex:none;align-self:flex-start;margin-top:2px}
    .db-c-name{order:2;flex:1 1 130px;min-width:0}
    .db-c-plat{order:3;flex:none;margin-left:auto;display:inline-flex}
    .db-c-state{order:4;flex:1 0 100%}
    .db-c-lead{order:5;flex:none;text-align:left}
    .db-c-cpl{order:6;flex:none}
    .db-c-spend{order:7;flex:none;margin-left:auto}
    .db-c-goal{order:8;flex:1 0 100%;margin-top:1px}
    .db-c-bud,.db-c-imp,.db-c-clk{display:none}
    .db-c-lead::before{content:"Leads ";color:var(--ink-45)}
    .db-c-cpl::before{content:"CPL ";color:var(--ink-45)}
    .db-tot .db-c-plat{display:none}
    .db-tot .db-c-name{flex:1 0 100%}
    .db-tr.db-th{display:none}
    .db-tab:nth-child(4){display:none}
    .db-tip{left:auto;right:-8px;transform:none}
    .db-tip-v>span{display:block}
    .db-tip-v>.db-tip-sep,.db-tip .db-tip-s{display:none}
    .db-legend{gap:10px}
    .db-lg b{display:none}
}
@media (max-width:400px){
    .db-tab:nth-child(3){display:none}
    .db-acct-n{font-size:12.5px}
    .db-kpi-v{font-size:19.5px}
    .db-name-n{font-size:12.5px}
    .db-pill{font-size:10px;padding:5px 7px}
    .db-xax span:nth-child(2),
    .db-xax span:nth-child(3),
    .db-xax span:nth-child(4),
    .db-xax span:nth-child(6){display:none}
}

/* ---------- movimiento reducido: estado FINAL, sin animación ---------- */
@media (prefers-reduced-motion:reduce){
    .js .db-panel .db-top,
    .js .db-panel .db-tabs,
    .js .db-panel .db-filters,
    .js .db-panel .db-kpi,
    .js .db-panel .db-note,
    .js .db-panel .db-chart-h,
    .js .db-panel .db-row,
    .js .db-panel .db-tot,
    .js .db-panel .db-foot,
    .js .db-panel .db-grid,
    .js .db-panel .db-vgrid,
    .js .db-panel .db-ax,
    .js .db-panel .db-xax,
    .js .db-panel .db-mark,
    .js .db-panel .db-xhair{
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
    }
    .js .db-panel .db-sweep{transform:none !important;animation:none !important}
    .js .db-panel .db-bar i{transform:scaleX(1) !important;animation:none !important}
    .js .db-panel .db-sync i::after{animation:none !important;opacity:0 !important}
    .db-ico,.db-tr{transition:none !important}
}

/* ===================== capa editorial del blog ===================== */

/* ===========================================================================
   CAPA EDITORIAL DEL BLOG
   ---------------------------------------------------------------------------
   Esto es lo unico que el blog anade al sistema de diseno de la home. Todo lo
   demas -colores, tipografias, botones, cabecera, pie, animaciones- se hereda
   de index.html, que se extrae automaticamente en el build.

   POR QUE HACE FALTA
   ==================
   La home nunca ha tenido texto largo: todo su copy son frases cortas de
   marketing en bloques anchos. El reset (* { margin: 0; padding: 0 }) deja el
   sitio literalmente SIN estilos de prosa: no hay margen de parrafo, ni
   vinetas, ni citas, ni codigo, ni tablas, y `a { text-decoration: none }` es
   global, asi que un enlace dentro de un articulo seria indistinguible del
   texto normal. Todo eso se construye aqui, y se construye SOLO con los tokens
   que ya existen para que parezca que estuvo ahi desde el principio.

   PREFIJO bl-
   ===========
   El CSS de la home tiene clases sueltas muy genericas (.note, .chip, .row,
   .item, .tag, .num, .side...). Todo lo nuevo va con prefijo `bl-` para no
   pisarlas, igual que la home ya hace con `pk-`, `cw-` y `db-`.

   UNA SOLA REJILLA
   ================
   La cabecera del articulo, el cuerpo y el cierre comparten el MISMO
   contenedor `.bl-art`. Es deliberado: si cada parte usara su propio ancho, el
   titular, la portada y el primer parrafo acabarian con bordes izquierdos
   distintos y el articulo se veria descuadrado en pantallas anchas.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   RED DE SEGURIDAD: el CSS de la home estiliza ELEMENTOS, no clases.

   `header { position: sticky; top: 0; background: rgba(255,255,255,.82);
   backdrop-filter: blur(14px) }` y `footer { background: var(--ink); color:
   blanco }` se aplican a CUALQUIER <header> o <footer> del documento, tambien a
   uno que este dentro del articulo. Sin esto, un <header> dentro de un post se
   queda pegado arriba con fondo translucido y su propia barra de progreso, y un
   <footer> sale como un bloque negro en mitad del texto.

   Las plantillas ya usan <div> para evitarlo, pero esta regla protege ademas el
   caso de que un articulo escriba HTML semantico dentro de su Markdown, que es
   algo perfectamente razonable de hacer.
   --------------------------------------------------------------------------- */

.bl-art header,
.bl-art footer,
.bl-prosa header,
.bl-prosa footer {
    position: static;
    z-index: auto;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    color: inherit;
    font-size: inherit;
    transition: none;
}

.bl-art header::after,
.bl-art footer::after,
.bl-prosa header::after,
.bl-prosa footer::after {
    content: none;
}

.bl-art {
    --bl-canal: 28px;
    /* Medida de lectura. 66ch en Inter a 18px son unos 620px: dentro del rango
       de 60-75 caracteres por linea que se considera comodo en castellano. */
    --bl-prosa: 66ch;
    --bl-ritmo: 1.55rem;

    display: grid;
    grid-template-columns:
        [sangre-i] minmax(var(--bl-canal), 1fr)
        [ancha-i] minmax(0, 10rem)
        [texto-i] min(var(--bl-prosa), calc(100% - var(--bl-canal) * 2))
        [texto-f] minmax(0, 10rem)
        [ancha-f] minmax(var(--bl-canal), 1fr) [sangre-f];
}

/* Por defecto TODO cae en la columna de texto. Lo que quiera salirse lo pide
   explicitamente con .bl-ancha o .bl-sangre. */
.bl-art > * {
    grid-column: texto-i / texto-f;
}

.bl-ancha {
    grid-column: ancha-i / ancha-f;
}

.bl-sangre {
    grid-column: sangre-i / sangre-f;
}

/* ============ Migas de pan ============ */

.bl-migas {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-45);
    margin-bottom: 20px;
}

.bl-migas a {
    color: var(--ink-60);
    transition: color var(--d-color) var(--e-out);
}

.bl-migas a:hover {
    color: var(--accent-deep);
}

.bl-migas span {
    margin: 0 8px;
    opacity: .5;
}

/* ============ Cabecera del articulo ============ */

.bl-cab {
    padding: 56px 0 40px;
}

.bl-cab h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    line-height: 1.1;
    text-wrap: balance;
}

.bl-entradilla {
    margin-top: 22px;
    font-size: 20px;
    line-height: 1.6;
    color: var(--ink-60);
    text-wrap: pretty;
}

.bl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-45);
}

.bl-meta .sep {
    opacity: .45;
}

/* ============ Etiquetas ============
   Son <span>, no enlaces: todavia no hay paginas de etiqueta y enlazarlas
   generaria 404s internos desde el primer dia. */

.bl-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin-left: auto;
}

.bl-etiquetas li {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--ink-60);
}

/* ============ Prosa ============ */

.bl-prosa {
    padding-bottom: 24px;
    font-size: 18px;
    line-height: 1.72;
    color: var(--ink-80);
    /* Seguro para movil: una URL larga sin espacios desbordaria la columna y
       sacaria una barra de scroll horizontal a toda la pagina. */
    overflow-wrap: break-word;
}

.bl-prosa > * + * {
    margin-top: var(--bl-ritmo);
}

.bl-prosa p {
    /* pretty evita la palabra huerfana al final del parrafo. En un texto de
       2.000 palabras aparece una decena de veces. */
    text-wrap: pretty;
}

/* Primer parrafo del articulo, algo mayor: hace de rampa de entrada. */
.bl-prosa > p:first-child {
    font-size: 19.5px;
    color: var(--ink);
}

/* ---- Titulares dentro del articulo ---- */

.bl-prosa h2 {
    margin-top: calc(var(--bl-ritmo) * 2.1);
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.55rem, 2.7vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}

.bl-prosa h3 {
    margin-top: calc(var(--bl-ritmo) * 1.5);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--ink);
}

.bl-prosa h4 {
    margin-top: calc(var(--bl-ritmo) * 1.2);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 1rem;
    color: var(--ink);
}

/* ---- Ancla permanente de cada apartado ---- */

.bl-ancla {
    margin-left: .4em;
    font-family: var(--mono);
    font-size: .62em;
    color: var(--accent);
    opacity: 0;
    transition: opacity var(--d-color) var(--e-out);
}

h2:hover > .bl-ancla,
h3:hover > .bl-ancla,
.bl-ancla:focus-visible {
    opacity: 1;
}

/* En tactil no hay hover: se deja siempre visible pero muy tenue. */
@media (hover: none) {
    .bl-ancla {
        opacity: .3;
    }
}

/* ---- Enlaces dentro del texto ----
   `a { text-decoration: none }` es global en la home. Aqui se revierte: dentro
   de un articulo un enlace TIENE que distinguirse del texto, y no basta con el
   color (seria un fallo de accesibilidad para quien no distingue el rojo). */

.bl-prosa a {
    color: var(--accent-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(217, 45, 32, .35);
    transition: text-decoration-color var(--d-color) var(--e-out);
}

.bl-prosa a:hover {
    text-decoration-color: var(--accent-deep);
}

/* ---- Listas ---- */

.bl-prosa ul,
.bl-prosa ol {
    padding-left: 1.35em;
}

.bl-prosa li + li {
    margin-top: .5em;
}

.bl-prosa li::marker {
    color: var(--accent);
}

.bl-prosa ol li::marker {
    font-family: var(--mono);
    font-size: .85em;
    color: var(--ink-45);
}

.bl-prosa li > ul,
.bl-prosa li > ol {
    margin-top: .5em;
}

/* ---- Cita ---- */

.bl-prosa blockquote {
    padding-left: 24px;
    border-left: 2px solid var(--accent);
    font-family: var(--serif);
    font-size: 1.18em;
    line-height: 1.5;
    color: var(--ink);
}

.bl-prosa blockquote p + p {
    margin-top: .7em;
}

/* ---- Codigo ----
   El bloque va en oscuro a proposito: es el mismo gesto que el logotipo de
   la marca, que es un prompt de consola. */

.bl-prosa code {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-alt);
    font-family: var(--mono);
    font-size: .84em;
    color: var(--accent-deep);
}

.bl-prosa pre {
    overflow-x: auto;
    padding: 20px 22px;
    border-radius: 4px;
    background: #1c1c1c;
    /* El chaflan de marca, en su version pequena. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
    /* Sin esto el <pre> usa la monoespaciada por defecto del navegador y no
       la del sistema de diseno. */
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.65;
    -webkit-overflow-scrolling: touch;
}

.bl-prosa pre code {
    padding: 0;
    background: none;
    font-size: inherit;
    color: rgba(255, 255, 255, .88);
}

/* ---- Tabla ---- */

.bl-tabla {
    overflow-x: auto;
}

.bl-prosa table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
}

.bl-prosa th,
.bl-prosa td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}

.bl-prosa th {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
    border-bottom-color: var(--line);
    white-space: nowrap;
}

.bl-prosa tbody tr:last-child td {
    border-bottom: none;
}

/* ---- Figuras ---- */

.bl-figura {
    margin-top: calc(var(--bl-ritmo) * 1.4);
}

.bl-figura img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.bl-figura figcaption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-45);
}

/* ---- Separador ---- */

.bl-prosa hr {
    margin-top: calc(var(--bl-ritmo) * 2);
    border: none;
    border-top: 1px solid var(--line);
}

/* ---- Nota al margen ---- */

.bl-nota {
    padding: 18px 22px;
    border-left: 2px solid var(--line);
    background: var(--bg-alt);
    font-size: 16px;
    color: var(--ink-60);
}

.bl-nota strong {
    color: var(--ink);
}

/* ============ Llamada a la accion del cierre ============ */

.bl-cta {
    margin-top: 64px;
    padding: 40px;
    background: var(--bg-alt);
    border-radius: 6px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
}

.bl-cta h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.bl-cta p {
    margin-top: 14px;
    font-size: 16.5px;
    color: var(--ink-60);
}

.bl-cta .btn {
    margin-top: 24px;
}

/* ============ Pie del articulo ============ */

.bl-pie {
    margin-top: 48px;
    padding: 26px 0 72px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bl-firma {
    font-size: 15px;
    color: var(--ink-60);
}

.bl-firma b {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
}

.bl-comp {
    display: flex;
    gap: 8px;
}

.bl-comp a,
.bl-comp button {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: none;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-60);
    cursor: pointer;
    transition: border-color var(--d-color) var(--e-out), color var(--d-color) var(--e-out);
}

.bl-comp a:hover,
.bl-comp button:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.bl-comp button.ok {
    border-color: var(--accent);
    color: var(--accent-deep);
}

/* ============ Listado del blog ============ */

.bl-hero {
    padding: 72px 0 8px;
}

.bl-hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.4rem);
}

.bl-hero p {
    margin-top: 20px;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.62;
    color: var(--ink-60);
}

/* La columna se acota a 860px aunque .wrap permita 1180. Un titular de
   articulo ocupando 1180px se lee mal, y con pocos articulos publicados una
   tarjeta a todo lo ancho parece un hueco en vez de una decision. */
.bl-lista {
    max-width: 860px;
    padding: 48px 0 104px;
    display: grid;
    gap: 20px;
}

.bl-tarjeta {
    border: 1px solid var(--line);
    background: var(--bg);
    transition: border-color var(--d-micro) var(--e-out), filter var(--d-micro) var(--e-out);
}

.bl-tarjeta > a {
    display: block;
    padding: 30px 32px 34px;
}

.bl-tarjeta:hover {
    border-color: rgba(28, 28, 28, .3);
    /* filter y no box-shadow: clip-path recorta las sombras de caja. */
    filter: drop-shadow(0 10px 24px rgba(28, 28, 28, .07));
}

.bl-tarjeta:focus-within {
    border-color: var(--ink);
}

.bl-tarjeta-meta {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-45);
}

.bl-tarjeta h2 {
    margin-top: 14px;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    line-height: 1.18;
    text-wrap: balance;
}

.bl-tarjeta-txt {
    margin-top: 12px;
    max-width: 62ch;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-60);
}

.bl-tarjeta-mas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
}

.bl-tarjeta .arr {
    transition: transform var(--d-micro) var(--e-out);
}

.bl-tarjeta:hover .arr {
    transform: translateX(4px);
}

/* Mismo gesto de entrada que las tarjetas de la home: sin esto, el blog
   entraria de una forma y la home de otra. */
.js .bl-tarjeta.rv {
    transform: translateY(var(--rise)) scale(var(--sink));
}

.js .bl-tarjeta.rv.in {
    transform: none;
}

/* ============ Responsive ============
   Los cortes siguen los de la home: 860 y 560. */

@media (max-width: 860px) {
    .bl-art {
        --bl-canal: 22px;
    }

    .bl-cab {
        padding: 40px 0 32px;
    }

    .bl-prosa {
        font-size: 17px;
    }

    .bl-entradilla {
        font-size: 18px;
    }

    .bl-cta {
        padding: 32px 26px;
    }

    .bl-hero {
        padding: 48px 0 4px;
    }

    .bl-tarjeta > a {
        padding: 24px 24px 28px;
    }
}

@media (max-width: 560px) {
    .bl-art {
        --bl-canal: 20px;
    }

    .bl-meta {
        font-size: 10px;
        gap: 8px;
    }

    .bl-etiquetas {
        margin-left: 0;
        width: 100%;
        margin-top: 4px;
    }

    .bl-prosa pre {
        padding: 16px;
        font-size: 12.5px;
    }

    .bl-pie {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============ Impresion ============ */

@media print {

    header,
    .bl-comp,
    .bl-cta,
    .bl-migas,
    footer {
        display: none !important;
    }

    .bl-prosa {
        font-size: 11pt;
        color: #000;
    }

    .bl-prosa a::after {
        content: ' (' attr(href) ')';
        font-size: .85em;
        color: #555;
    }
}