:root {
            --proto-ink: #17243a;
            --proto-blue: #3568c8;
            --proto-blue-soft: #e8f0fc;
            --proto-paper: #eef1f5;
            --proto-card: #ffffff;
            --proto-line: #d9e0e8;
            --proto-text: #202b3a;
            --proto-muted: #6b7687;
            --proto-green: #34775a;
            --proto-green-soft: #eef7f2;
            --proto-warm: #8a641b;
            --proto-warm-soft: #fff6e6;
        }

        body.prototype-v2 {
            background: var(--proto-paper);
            color: var(--proto-text);
        }

        .proto-v2-hero {
            margin: 28px 0 18px;
            display: grid;
            grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
            min-height: 560px;
            overflow: hidden;
            border-radius: 24px;
            background: #fff;
            border: 1px solid var(--proto-line);
        }

        .proto-v2-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: clamp(34px, 5vw, 72px);
        }

        .proto-v2-copy .eyebrow {
            color: var(--proto-blue);
        }

        .proto-v2-copy h1 {
            max-width: 640px;
            margin: 0;
            color: var(--proto-ink);
            font-size: clamp(46px, 6vw, 82px);
            line-height: .93;
            letter-spacing: -.055em;
        }

        .proto-v2-copy > p:not(.eyebrow) {
            max-width: 570px;
            margin: 21px 0 0;
            color: var(--proto-muted);
            font-size: 13px;
            line-height: 1.65;
        }

        .proto-v2-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 25px;
        }

        .proto-v2-actions a {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            border-radius: 9px;
            font-size: 10px;
            font-weight: 800;
            text-decoration: none;
        }

        .proto-v2-actions .primary {
            background: var(--proto-blue);
            color: #fff;
        }

        .proto-v2-actions .secondary {
            border: 1px solid #cad4e0;
            color: #32445f;
            background: #f8fafc;
        }

        .proto-v2-visual {
            position: relative;
            min-height: 560px;
            display: grid;
            place-items: center;
            overflow: hidden;
            background: #211b32;
        }

        .proto-v2-visual::after {
            content: "";
            position: absolute;
            left: 20%;
            right: 20%;
            bottom: 58px;
            height: 38px;
            border-radius: 50%;
            background: rgba(26,42,64,.10);
            filter: blur(16px);
        }

        .proto-v2-visual img {
            position: relative;
            z-index: 2;
            width: 78%;
            height: 430px;
            object-fit: contain;
            filter: drop-shadow(16px 24px 18px rgba(26,42,64,.18));
        }

        /* Las imágenes de portada son fotografías ambientales, no recortes de producto. */
        .prototype-v2 .proto-v2-visual { background: #211b32; }
        .prototype-v2 .proto-v2-visual::after { display: none; }
        .prototype-v2 .proto-v2-visual img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            padding: 18px;
            filter: none;
        }

        .proto-v2-chip {
            position: absolute;
            z-index: 3;
            padding: 9px 11px;
            border: 1px solid rgba(255,255,255,.75);
            border-radius: 11px;
            background: rgba(255,255,255,.78);
            color: #40536f;
            font-size: 8px;
            font-weight: 800;
            backdrop-filter: blur(10px);
        }

        .proto-v2-chip.one { top: 24px; left: 24px; }
        .proto-v2-chip.two { right: 24px; bottom: 24px; }

        .proto-v2-status {
            margin: 14px 0 0;
            color: #718095;
            font-size: 9px;
        }

        .proto-v2-tabs {
            position: sticky;
            top: 10px;
            z-index: 30;
            display: flex;
            gap: 6px;
            margin: 16px 0 28px;
            padding: 7px;
            overflow-x: auto;
            border: 1px solid var(--proto-line);
            border-radius: 14px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 12px 28px rgba(26,42,64,.06);
            backdrop-filter: blur(12px);
        }

        .proto-v2-tabs a {
            flex: 0 0 auto;
            padding: 9px 13px;
            border-radius: 9px;
            color: #536074;
            font-size: 9px;
            font-weight: 800;
            text-decoration: none;
        }

        .proto-v2-tabs a:hover {
            background: var(--proto-blue-soft);
            color: #2b58a4;
        }

        .proto-v2-intro {
            margin: 48px 0 22px;
        }

        .proto-v2-intro-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 28px;
            margin-bottom: 18px;
        }

        .proto-v2-intro h2 {
            margin: 0;
            color: var(--proto-ink);
            font-size: clamp(34px, 5vw, 62px);
            line-height: .98;
            letter-spacing: -.045em;
        }

        .proto-v2-intro-head > p {
            max-width: 430px;
            margin: 0;
            color: var(--proto-muted);
            font-size: 11px;
            line-height: 1.6;
        }

        .proto-v2-ways {
            display: grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap: 12px;
        }

        .proto-way {
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 21px;
            border: 1px solid var(--proto-line);
            border-radius: 17px;
            background: #fff;
            text-decoration: none;
            padding: 0;
            overflow: hidden;
        }

.proto-way-image { width: 100%; height: auto; aspect-ratio: 3 / 2; overflow: hidden; display: grid; place-items: center; padding: 0; box-sizing: border-box; background: #211b33; }
.proto-way-image img { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: cover; object-position: center; padding: 0; transition: transform .25s ease; }
.proto-way-image--contain img { object-fit: contain; }
.proto-way:hover .proto-way-image img { transform: scale(1.025); }
.proto-way--overlay { position: relative; aspect-ratio: 3 / 2; min-height: 0; align-self: start; isolation: isolate; color: #fff; background: #17151d; }
.proto-way--overlay .proto-way-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.proto-way--overlay::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(18, 15, 23, .84) 0%, rgba(18, 15, 23, .56) 43%, rgba(18, 15, 23, .08) 100%), linear-gradient(0deg, rgba(18, 15, 23, .52), transparent 55%); pointer-events: none; }
.proto-way--overlay .proto-way-copy { position: absolute; inset: 0; justify-content: flex-end; gap: 10px; padding: clamp(18px, 2.2vw, 28px); color: #fff; }
.proto-way--overlay .proto-way-copy h3 { max-width: 15ch; color: #fff; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.08; text-shadow: 0 1px 12px rgba(0, 0, 0, .2); }
.proto-way--overlay .proto-way-copy p { max-width: 34ch; color: rgba(255, 255, 255, .92); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.45; text-shadow: 0 1px 10px rgba(0, 0, 0, .22); }
.proto-way--overlay .proto-way-copy > span:last-child { width: fit-content; margin-top: 2px; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; color: #fff; background: rgba(24, 19, 30, .54); font-size: 12px; backdrop-filter: blur(8px); }
.proto-way--overlay:hover .proto-way-image img { transform: scale(1.025); }
.proto-way--portrait { position: relative; width: min(100%, 390px); aspect-ratio: 2 / 3; min-height: 0; justify-self: center; align-self: start; isolation: isolate; color: #fff; background: #10252a; box-shadow: 0 18px 44px rgba(38, 30, 54, .16); }
.proto-way--portrait .proto-way-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.proto-way--portrait .proto-way-image img { filter: none; transition: transform .3s ease, filter .25s ease; }
.proto-way--portrait::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, rgba(8, 20, 23, .02) 22%, rgba(8, 20, 23, .38) 54%, rgba(8, 20, 23, .94) 100%); pointer-events: none; }
.proto-way--portrait .proto-way-copy { position: absolute; inset: auto 0 0; flex: initial; justify-content: initial; gap: 12px; padding: clamp(22px, 3vw, 30px); color: #fff; }
.proto-way--portrait .proto-way-copy h3 { max-width: 13ch; margin: 0; color: #fff; font-size: clamp(24px, 2.5vw, 32px); font-weight: 750; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.proto-way--portrait .proto-way-copy p { max-width: 30ch; color: rgba(255, 255, 255, .92); font-size: 14px; line-height: 1.5; }
.proto-way--portrait .proto-way-portrait-eyebrow { color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.proto-way--portrait .proto-way-portrait-action { display: inline-flex; width: fit-content; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; background: rgba(20, 17, 28, .62); font-size: 13px; font-weight: 750; backdrop-filter: blur(8px); }
.proto-way--portrait .proto-way-portrait-action span { color: #fff; font-size: inherit; }
.proto-way--portrait:hover .proto-way-image img { transform: scale(1.025); }
.proto-way--portrait:focus-visible { outline: 3px solid #9871d1; outline-offset: 4px; }
.proto-way--portrait:focus-visible .proto-way-image img { transform: scale(1.025); }
        .proto-way-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px; }
        .proto-way-copy > span:last-child { margin-top: auto; padding-top: 14px; }

        .proto-way span:first-child {
            color: var(--proto-blue);
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .10em;
        }

        .proto-way h3 {
            margin: 0 0 7px;
            color: var(--proto-ink);
            font-size: 26px;
        }

        .proto-way p {
            margin: 0;
            color: var(--proto-muted);
            font-size: 9px;
            line-height: 1.5;
        }

        .proto-way span:last-child {
            color: #315fae;
            font-size: 9px;
            font-weight: 800;
        }

        .proto-tools {
            display: grid;
            gap: 22px;
            padding-bottom: 52px;
        }

        .proto-tool {
            overflow: hidden;
            border: 1px solid var(--proto-line);
            border-radius: 21px;
            background: #fff;
            scroll-margin-top: 90px;
        }

        .proto-tool-header {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            align-items: end;
            padding: 27px 28px 21px;
            border-bottom: 1px solid #e2e7ed;
        }

        .proto-tool-header .index {
            display: block;
            margin-bottom: 7px;
            color: var(--proto-blue);
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .11em;
            text-transform: uppercase;
        }

        .proto-tool-header h2 {
            margin: 0;
            color: var(--proto-ink);
            font-size: clamp(26px, 4vw, 46px);
            line-height: 1;
            letter-spacing: -.035em;
        }

        .proto-tool-header p {
            max-width: 620px;
            margin: 9px 0 0;
            color: var(--proto-muted);
            font-size: 9px;
            line-height: 1.55;
        }

        .proto-tool-badge {
            padding: 7px 10px;
            border-radius: 999px;
            background: var(--proto-blue-soft);
            color: #365fa7;
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .proto-tool-body {
            padding: 24px 28px 28px;
        }

        /* Ficha */
        .tech-v2 {
            display: grid;
            grid-template-columns: minmax(360px, .9fr) minmax(0,1.1fr);
            gap: 24px;
        }

        .component-preview {
            position: relative;
            min-height: 420px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border-radius: 17px;
            background: #e6ebf2;
        }

        .component-preview::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 46% 30%, rgba(255,255,255,.84), transparent 45%);
        }

        .ficha-product-image {
            position: relative;
            z-index: 2;
            width: 84%;
            height: 340px;
            object-fit: contain;
            filter: drop-shadow(12px 18px 16px rgba(30,45,68,.17));
        }

        .component-preview-empty {
            position: relative;
            z-index: 2;
            max-width: 250px;
            text-align: center;
            color: #657286;
        }

        .component-preview.ficha-cpu { background: #dbe7f5; }
        .component-preview.ficha-gpu { background: #dcebe5; }
        .component-preview.ficha-ram { background: #eee3d4; }
        .component-preview.ficha-storage { background: #ebe4d8; }
        .component-preview.ficha-motherboard { background: #dce6ef; }
        .component-preview.ficha-psu { background: #ece2d2; }
        .component-preview.ficha-case { background: #dce4ed; }
        .component-preview.ficha-cooling { background: #d9e8e4; }

        .tool-control label,
        .builder-field label {
            display: block;
            margin-bottom: 7px;
            color: #5b687a;
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .tool-select,
        .budget-number {
            width: 100%;
            min-height: 44px;
            border: 1px solid #ccd6e2;
            border-radius: 10px;
            padding: 0 12px;
            background: #fff;
            color: #223047;
            font-size: 11px;
        }

        .tool-select optgroup {
            color: #315fae;
            font-weight: 800;
        }

        .detail-v2 {
            margin-top: 14px;
            padding: 20px;
            border-radius: 15px;
            background: #f5f7fa;
        }

        .detail-v2 h3 {
            margin: 5px 0 0;
            color: var(--proto-ink);
            font-size: 29px;
            letter-spacing: -.025em;
        }

        .screen-muted {
            color: var(--proto-muted);
            font-size: 10px;
        }

        .spec-list {
            display: grid;
            margin-top: 17px;
            border-top: 1px solid #dce3ea;
        }

        .spec-list > div {
            display: grid;
            grid-template-columns: 132px minmax(0,1fr);
            gap: 12px;
            padding: 11px 0;
            border-bottom: 1px solid #e2e7ed;
        }

        .spec-list span {
            color: #748092;
            font-size: 8px;
        }

        .spec-list b {
            color: #334055;
            font-size: 9px;
            font-weight: 700;
        }

        /* Comparador */
        .compare-v2-selectors {
            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 12px;
        }

        .compare-v2-box {
            padding: 15px;
            border-radius: 13px;
            background: #f5f7fa;
        }

        .compare-helper {
            margin: 12px 0 16px;
            padding: 11px 13px;
            border-radius: 10px;
            background: #edf3fc;
            color: #536781;
            font-size: 9px;
        }

        #comparar-b:disabled {
            opacity: .62;
            background: #eef1f5;
            cursor: not-allowed;
        }

        .comparison-table {
            display: grid;
            grid-template-columns: 160px repeat(2,minmax(0,1fr));
            overflow: hidden;
            border: 1px solid #dce3ea;
            border-radius: 13px;
        }

        .comparison-table > span {
            min-height: 49px;
            padding: 12px;
            border-right: 1px solid #e0e6ed;
            border-bottom: 1px solid #e0e6ed;
            color: #46536a;
            font-size: 9px;
            line-height: 1.4;
        }

        .comparison-table > span:nth-child(3n) { border-right: 0; }
        .comparison-table > span:nth-last-child(-n+3) { border-bottom: 0; }
        .comparison-table > span:nth-child(-n+3) {
            background: #f1f5fa;
            color: #213653;
            font-weight: 800;
        }

        /* Builder manual */
        .builder-v2 {
            display: grid;
            grid-template-columns: minmax(0,1.18fr) minmax(330px,.82fr);
            gap: 18px;
            align-items: start;
        }

        .builder-options {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 10px;
        }

        .builder-field {
            padding: 13px;
            border-radius: 13px;
            background: #f5f7fa;
        }

        .builder-side {
            position: sticky;
            top: 90px;
            padding: 21px;
            border-radius: 16px;
            background: var(--proto-ink);
            color: #fff;
        }

        .builder-side .eyebrow { color: #95b5ef; }
        .builder-side h3 {
            margin: 5px 0 8px;
            color: #fff;
            font-size: 21px;
        }

        .builder-side .screen-muted {
            color: #bac7d9;
            line-height: 1.5;
        }

        .builder-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 15px;
        }

        .builder-actions .button {
            width: 100%;
            min-height: 40px;
            font-size: 9px;
        }

        .builder-preview-button {
            border: 1px solid rgba(255,255,255,.15);
            background: rgba(255,255,255,.07);
            color: #fff;
        }

        .build-preview-panel {
            margin-top: 18px;
            overflow: hidden;
            border: 1px solid #d9e1e8;
            border-radius: 17px;
            background: #f7f9fc;
        }

        .build-preview-top {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: flex-start;
            padding: 18px 20px;
            border-bottom: 1px solid #dfe5eb;
            background: #fff;
        }

        .build-preview-metrics {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .build-metric {
            min-width: 112px;
            padding: 9px 10px;
            border-radius: 10px;
            background: #f2f5f9;
        }

        .build-metric small {
            display: block;
            color: #778396;
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .build-metric strong {
            display: block;
            margin-top: 3px;
            color: #18304d;
            font-size: 12px;
        }

        .build-preview-grid {
            display: grid;
            grid-template-columns: minmax(320px,1fr) minmax(320px,1fr);
        }

        .build-visual {
            position: relative;
            min-height: 390px;
            display: grid;
            place-items: center;
            overflow: hidden;
            padding: 24px;
            background:
                radial-gradient(circle at 50% 36%, #fff 0 9%, transparent 40%),
                linear-gradient(145deg, #e8eef5, #dce5ef);
        }

        .build-main-image {
            position: relative;
            z-index: 2;
            width: 82%;
            height: 300px;
            max-width: 100%;
            max-height: 300px;
            object-fit: contain;
            mix-blend-mode: normal;
            filter: drop-shadow(10px 18px 15px rgba(34,50,74,.20));
        }

        .build-main-empty {
            position: relative;
            z-index: 2;
            max-width: 250px;
            text-align: center;
            color: #617086;
        }

        .build-visual-badge {
            position: absolute;
            z-index: 3;
            top: 15px;
            left: 15px;
            padding: 6px 9px;
            border-radius: 999px;
            background: rgba(255,255,255,.84);
            color: #40536f;
            font-size: 7px;
            font-weight: 900;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .build-parts-panel {
            padding: 17px;
            border-left: 1px solid #dfe5eb;
            background: #fff;
        }

        .build-parts-title {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .build-parts-title h4 { margin: 0; font-size: 13px; }
        .build-parts-title span { color: #7c8797; font-size: 8px; }

        .build-parts-list {
            display: grid;
            gap: 7px;
        }

        .build-part-card {
            display: grid;
            grid-template-columns: 42px minmax(0,1fr) auto;
            gap: 9px;
            align-items: center;
            padding: 8px 9px;
            border: 1px solid #e2e7ed;
            border-radius: 10px;
            background: #fafbfd;
        }

        .build-part-thumb {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border-radius: 8px;
            background: #e7ecf3;
        }

        .build-part-thumb img { width: 90%; height: 90%; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: normal; }
        .build-part-fallback { color: #5d6d82; font-size: 8px; font-weight: 900; }
        .build-part-info small { display: block; color: #5576ad; font-size: 7px; font-weight: 900; text-transform: uppercase; }
        .build-part-info strong { display: block; max-width: 230px; overflow: hidden; color: #273245; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
        .build-part-price { color: #214d8e; font-size: 8px; font-weight: 900; white-space: nowrap; }

        .build-missing {
            margin-top: 10px;
            padding: 9px 10px;
            border-radius: 9px;
            background: var(--proto-warm-soft);
            color: var(--proto-warm);
            font-size: 8px;
            line-height: 1.45;
        }

        .build-missing.build-complete {
            background: var(--proto-green-soft);
            color: var(--proto-green);
        }

        .build-preview-note,
        .tool-note {
            margin: 0;
            padding: 10px 17px;
            color: #788496;
            font-size: 8px;
            line-height: 1.5;
        }

        /* Smart Builder: estilo configurador */
        .smart-v2 {
            padding: 0;
            overflow: hidden;
        }

        .smart-v2-top {
            display: grid;
            grid-template-columns: minmax(0,.8fr) minmax(500px,1.2fr);
            min-height: 420px;
            background: var(--proto-ink);
            color: #fff;
        }

        .smart-v2-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px;
        }

        .smart-v2-copy .index {
            color: #90b1ef;
        }

        .smart-v2-copy h2 {
            margin: 0;
            color: #fff;
            font-size: clamp(40px,5vw,68px);
            line-height: .95;
            letter-spacing: -.045em;
        }

        .smart-v2-copy p {
            max-width: 590px;
            margin: 16px 0 0;
            color: #c2cfdf;
            font-size: 10px;
            line-height: 1.6;
        }

        .smart-v2-showcase {
            position: relative;
            display: grid;
            place-items: center;
            min-height: 420px;
            overflow: hidden;
            background:
                radial-gradient(circle at 50% 40%, rgba(89,132,213,.48), transparent 34%),
                linear-gradient(145deg, #213a5d, #111c2d);
        }

        .smart-v2-showcase img {
            position: relative;
            z-index: 2;
            width: 70%;
            height: 320px;
            object-fit: contain;
            filter: drop-shadow(16px 22px 18px rgba(0,0,0,.25));
        }

        .smart-v2-workspace {
            display: grid;
            grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr);
        }

        .smart-config {
            padding: 24px;
            border-right: 1px solid #e1e6ec;
            background: #f7f9fb;
        }

        .smart-step + .smart-step {
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid #e0e5eb;
        }

        .smart-step-label {
            margin: 0 0 8px;
            color: var(--proto-blue);
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .11em;
            text-transform: uppercase;
        }

        .smart-step h3 {
            margin: 0 0 12px;
            color: var(--proto-ink);
            font-size: 18px;
        }

        .smart-choice-grid {
            display: grid;
            gap: 8px;
        }

        .smart-choice {
            min-height: 84px;
            display: grid;
            grid-template-columns: 34px minmax(0,1fr);
            gap: 10px;
            align-items: center;
            padding: 12px;
            border: 1px solid #d5dde7;
            border-radius: 12px;
            background: #fff;
            text-align: left;
            cursor: pointer;
        }

        .smart-choice.is-selected {
            border-color: #5d85d1;
            background: #edf3ff;
            box-shadow: inset 0 0 0 1px #5d85d1;
        }

        .smart-choice-icon {
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            border-radius: 8px;
            background: #e9f0fb;
            color: #3568c8;
            font-size: 11px;
            font-weight: 900;
        }

        .smart-choice strong {
            display: block;
            color: #243650;
            font-size: 11px;
        }

        .smart-choice small {
            display: block;
            margin-top: 3px;
            color: #788496;
            font-size: 8px;
            line-height: 1.4;
        }

        .budget-row {
            display: grid;
            grid-template-columns: 1fr 108px;
            gap: 9px;
            align-items: center;
        }

        .budget-range {
            width: 100%;
            accent-color: var(--proto-blue);
        }

        .budget-scale {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            color: #8a95a5;
            font-size: 7px;
        }

        .smart-generate {
            width: 100%;
            min-height: 44px;
            margin-top: 18px;
        }

        .smart-disclaimer {
            margin: 10px 0 0;
            color: #7d8898;
            font-size: 7px;
            line-height: 1.5;
        }

        .smart-result {
            min-height: 100%;
            background: #fff;
        }

        .smart-result-empty {
            min-height: 520px;
            display: grid;
            place-items: center;
            padding: 34px;
            text-align: center;
            color: #768297;
            background:
                radial-gradient(circle at 50% 34%, rgba(77,116,190,.11), transparent 30%),
                #fff;
        }

        .smart-result-empty strong {
            display: block;
            margin-bottom: 7px;
            color: #293a52;
            font-size: 18px;
        }

        .smart-result-content[hidden],
        .smart-result-empty[hidden] { display: none; }

        .smart-result-head {
            padding: 22px 22px 16px;
            border-bottom: 1px solid #e1e6ec;
        }

        .smart-result-head h3 {
            margin: 4px 0 5px;
            color: var(--proto-ink);
            font-size: 25px;
        }

        .smart-result-head p {
            margin: 0;
            color: var(--proto-muted);
            font-size: 9px;
        }

        .smart-summary-metrics {
            display: grid;
            grid-template-columns: repeat(3,minmax(0,1fr));
            gap: 8px;
            padding: 13px 15px;
            background: #f3f6fa;
            border-bottom: 1px solid #e2e7ed;
        }

        .smart-metric {
            padding: 10px;
            border-radius: 10px;
            background: #fff;
        }

        .smart-metric small {
            display: block;
            color: #7b8797;
            font-size: 7px;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .smart-metric strong {
            display: block;
            margin-top: 4px;
            color: #23344e;
            font-size: 12px;
        }

        .smart-build-list {
            display: grid;
            gap: 7px;
            padding: 15px;
        }

        .smart-part {
            display: grid;
            grid-template-columns: 46px minmax(0,1fr) auto;
            align-items: center;
            gap: 9px;
            padding: 8px 9px;
            border: 1px solid #e1e6ed;
            border-radius: 10px;
            background: #fafbfd;
        }

        .smart-part-image {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border-radius: 8px;
            background: #e7ecf3;
        }

        .smart-part-image img { width: 90%; height: 90%; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: normal; }
        .smart-part-info small { display: block; color: #5274ad; font-size: 7px; font-weight: 900; text-transform: uppercase; }
        .smart-part-info strong { display: block; margin-top: 2px; color: #253247; font-size: 9px; }
        .smart-part-price { color: #244f91; font-size: 8px; font-weight: 900; white-space: nowrap; }
        .smart-part-price-block { display: grid; justify-items: end; gap: 4px; max-width: 150px; }
        .smart-part-price-origin { color: #8792a1; font-size: 7px; line-height: 1.3; text-align: right; }

        .smart-result-note {
            margin: 0 15px 13px;
            padding: 9px 10px;
            border-radius: 9px;
            background: var(--proto-warm-soft);
            color: var(--proto-warm);
            font-size: 8px;
            line-height: 1.45;
        }

        .smart-result-note.is-good {
            background: var(--proto-green-soft);
            color: var(--proto-green);
        }

        .smart-result-actions {
            display: flex;
            gap: 8px;
            padding: 0 15px 15px;
            flex-wrap: wrap;
        }

        .smart-result-actions .button {
            min-height: 38px;
            font-size: 8px;
        }

        .smart-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .smart-resolution-field { display: grid; gap: 6px; margin-top: 14px; }
        .smart-resolution-field[hidden] { display: none; }
        .smart-resolution-field label { color: #42516a; font-size: 9px; font-weight: 800; }
        .smart-resolution-field select { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid #d5dde7; border-radius: 9px; background: #fff; color: #253247; }
        .smart-part { grid-template-columns: 46px minmax(0,1fr) auto; }
        .smart-part-copy { min-width: 0; }
        .smart-part-reason { margin: 5px 0 0; color: #657287; font-size: 8px; line-height: 1.45; }
        .smart-part-actions { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
        .smart-lock-button, .smart-alternatives button { padding: 5px 8px; border: 1px solid #d5ddeb; border-radius: 7px; background: #fff; color: #42516a; font-size: 8px; cursor: pointer; }
        .smart-lock-button[aria-pressed="true"] { border-color: #6b4bb7; background: #f2edfc; color: #563d98; }
        .smart-alternatives { position: relative; color: #4569a8; font-size: 8px; }
        .smart-alternatives summary { cursor: pointer; }
        .smart-alternatives button { display: block; margin-top: 5px; text-align: left; }
        .smart-result-notices { margin: 0 15px 10px; color: #805c15; font-size: 8px; line-height: 1.45; }
        .smart-build-analysis { padding: 15px; border-top: 1px solid #e2e7ed; }
        .smart-build-analysis h4 { margin: 0 0 8px; color: var(--proto-ink); font-size: 14px; }
        .smart-build-analysis[hidden] { display: none; }
        .smart-build-analysis .build-analysis-sections { display: grid; gap: 8px; }
        .smart-build-analysis .build-analysis-section { padding: 10px; }
        .smart-build-analysis .build-analysis-finding p { font-size: 8px; }

        /* Guardadas */
        .saved-empty {
            padding: 40px 20px;
            border: 1px dashed #ccd6e1;
            border-radius: 14px;
            text-align: center;
            background: #f8fafc;
        }

        .empty-icon {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            margin: 0 auto 10px;
            border-radius: 12px;
            background: #e9f0fb;
            color: #3568c8;
            font-size: 20px;
        }

        .saved-builds {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 12px;
        }

        .saved-build-card {
            padding: 15px;
            border: 1px solid #dce3ea;
            border-radius: 13px;
            background: #f9fbfd;
        }

        .saved-build-header {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: baseline;
        }

        .saved-build-header h3 { margin: 0; font-size: 14px; }
        .saved-build-header span { color: #8792a1; font-size: 8px; }
        .saved-build-card ul { padding-left: 16px; color: #59667a; font-size: 8px; line-height: 1.55; }
        .saved-delete { padding: 0; font-size: 8px; }

        @media (max-width: 1000px) {
            .proto-v2-hero,
            .tech-v2,
            .builder-v2,
            .smart-v2-top,
            .smart-v2-workspace,
            .build-preview-grid {
                grid-template-columns: 1fr;
            }

            .builder-side {
                position: static;
            }

            .smart-config {
                border-right: 0;
                border-bottom: 1px solid #e1e6ec;
            }

            .build-parts-panel {
                border-left: 0;
                border-top: 1px solid #dfe5eb;
            }
        }

        @media (max-width: 560px) {
            .smart-choice-grid { grid-template-columns: 1fr; }
            .smart-part { grid-template-columns: 40px minmax(0,1fr); }
            .smart-part-price-block { grid-column: 2; justify-items: start; }
            .smart-part-price-origin { text-align: left; }
        }

        @media (max-width: 720px) {
            .proto-v2-ways,
            .compare-v2-selectors,
            .builder-options,
            .saved-builds,
            .smart-summary-metrics {
                grid-template-columns: 1fr;
            }

            .proto-way--overlay { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 2; }

            .proto-v2-intro-head,
            .proto-tool-header,
            .build-preview-top {
                flex-direction: column;
                align-items: flex-start;
            }

            .builder-actions,
            .budget-row {
                grid-template-columns: 1fr;
            }

            .comparison-table {
                grid-template-columns: 92px repeat(2,minmax(0,1fr));
            }

            .proto-v2-copy,
            .smart-v2-copy {
                padding: 30px 24px;
            }

            .proto-v2-visual {
                min-height: 360px;
            }

            .proto-v2-visual img {
                height: 300px;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        /* Estilo final: menos blanco, textos legibles y herramientas claras. */
        :root {
            --proto-paper: #e3e7ec;
            --proto-card: #f8f7f3;
            --proto-line: #cbd3dc;
            --proto-muted: #526073;
        }

        .prototype-v2 { background: var(--proto-paper); }
        .prototype-v2 > .site-header {
            position: sticky !important;
            top: 0 !important;
            z-index: 1000 !important;
        }

        .proto-v2-hero {
            min-height: 470px;
            grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
            background: #17243a;
            border: 0;
        }

        .proto-v2-copy .eyebrow { color: #a9c4ff; }
        .proto-v2-copy h1 { color: #fff; }
        .proto-v2-copy > p:not(.eyebrow) { color: #d5dce8; font-size: 17px; }
        .proto-v2-status { color: #bdcbe0; font-size: 13px; }
        .proto-tool p:not(.eyebrow) { font-size: 14px; line-height: 1.55; }
        .proto-tool p.eyebrow { font-size: 11px; }
        .proto-tool small { font-size: 12px; }
        .proto-tool button { font-size: 14px; }
        .tool-control label, .builder-field label { font-size: 13px; }

        .proto-tool {
            border-color: var(--proto-line);
            background: var(--proto-card);
            box-shadow: 0 12px 32px rgba(24, 39, 61, .055);
        }

        .proto-tool:nth-child(even) { background: #eef1f4; }
        .proto-tool-header { padding: 34px 38px 27px; }
        .proto-tool-header .index { font-size: 11px; }
        .proto-tool-header h2 { font-size: clamp(32px, 4vw, 48px); }
        .proto-tool-header p { font-size: 14px; }
        .proto-tool-badge { padding: 9px 13px; font-size: 11px; }
        .proto-tool-body { padding: 30px 38px 38px; }

        .tool-control label, .builder-field label { font-size: 12px; }
        .tool-select, .budget-number { min-height: 52px; font-size: 15px; }
        .compare-helper, .tool-note { font-size: 14px; }
        .spec-list > div { padding: 14px 0; }
        .spec-list span, .spec-list b { font-size: 13px; }

        .compare-v2-products {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            margin: 22px 0;
        }

        .compare-v2-product {
            min-width: 0;
            overflow: hidden;
            padding: 14px 14px 20px;
            border: 1px solid #d9dfe5;
            border-radius: 17px;
            background: #fff;
        }

        .compare-v2-product-image {
            height: 235px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border-radius: 11px;
            background: #e7ebef;
            color: #526073;
            text-align: center;
            font-size: 14px;
        }

        .compare-v2-product-image img {
            display: block;
            width: min(100%, 540px) !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
            object-position: center !important;
        }

        .compare-v2-product h3 {
            margin: 17px 8px 4px;
            color: var(--proto-ink);
            font-size: 22px;
            overflow-wrap: anywhere;
        }

        .compare-v2-product p {
            margin: 0 8px 8px;
            color: var(--proto-muted);
            font-size: 14px;
        }

        .compare-v2-product strong {
            margin-inline: 8px;
            color: #263b5b;
            font-size: 17px;
        }

        .compare-v2-table-wrap { overflow-x: auto; }
        .comparison-table {
            min-width: 610px;
            grid-template-columns: 180px repeat(2, minmax(0, 1fr));
            border-color: #d3dae2;
        }

        .comparison-table > span { min-height: 58px; padding: 16px; font-size: 14px; }
        .comparison-table > span:nth-child(-n+3) { background: #17243a; color: #fff; }
        .comparison-table > span:nth-child(n+4):nth-child(-n+6) { background: #e9edf2; }
        .comparison-table > span:nth-child(3n+1) { color: #243550; font-weight: 750; }

        @media (max-width: 720px) {
            .proto-v2-hero { grid-template-columns: 1fr; }
            .proto-tool-header, .proto-tool-body { padding-inline: 22px; }
            .compare-v2-products { grid-template-columns: 1fr; }
            .compare-v2-product-image { height: 220px; }
        }

        /* Lectura clara en las herramientas, sin números ni rótulos decorativos. */
        .proto-v2-chip,
        .proto-tool-header .index,
        .smart-v2-copy .index,
        .smart-step-label,
        .proto-v2-intro-head > p { display: none !important; }

        .proto-v2-actions a,
        .proto-v2-tabs a,
        .proto-way-copy > span:last-child,
        .builder-actions .button,
        .smart-result-actions .button,
        .saved-delete { font-size: 14px; }
        .proto-v2-status { font-size: 14px; }
        .proto-way p,
        .proto-tool-header p,
        .smart-v2-copy p,
        .smart-result-head p { font-size: 16px; line-height: 1.5; }
        .tool-control label,
        .builder-field label,
        .tool-select,
        .budget-number,
        .screen-muted,
        .spec-list span,
        .spec-list b,
        .compare-helper,
        .comparison-table > span,
        .budget-scale,
        .smart-choice small,
        .smart-disclaimer,
        .smart-result-note,
        .build-missing,
        .saved-build-card ul { font-size: 14px; line-height: 1.45; }
        .smart-choice strong,
        .build-parts-title h4,
        .saved-build-header h3 { font-size: 17px; }
        .build-parts-title span,
        .build-metric small,
        .smart-metric small,
        .build-part-info small,
        .smart-part-info small,
        .saved-build-header span { font-size: 13px; letter-spacing: 0; text-transform: none; }
        .build-metric strong,
        .smart-metric strong,
        .build-part-info strong,
        .smart-part-info strong,
        .build-part-price,
        .smart-part-price { font-size: 15px; }
        .build-part-info strong { max-width: none; white-space: normal; overflow: visible; }
        .build-part-card,
        .smart-part { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 12px; }
        .build-part-price,
        .smart-part-price { white-space: normal; text-align: right; }

/* Ampliación de la página de Prototipos */
.proto-gallery { margin: var(--section-space) 0; }
.proto-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: var(--content-gap); margin-bottom: var(--heading-content-gap); }
.proto-gallery-head h2 { margin: 0; color: #30283e; font-size: clamp(38px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -.05em; }
.proto-gallery-head > p { max-width: 390px; margin: 0 0 5px; color: #686074; font-size: 16px; line-height: 1.5; }
.proto-build-group-label { display: flex; align-items: center; gap: 12px; margin: 26px 0 13px; color: #70687a; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.proto-build-group-label::after { height: 1px; flex: 1; background: #ded9e6; content: ""; }
.proto-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.proto-build-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); min-height: 400px; overflow: hidden; border: 1px solid #e0dce8; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(48, 40, 67, .05); }
.proto-build-feature-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3vw, 43px); }
.proto-build-tag { display: inline-block; margin-bottom: 24px; padding: 8px 13px; border-radius: 999px; background: #e4d9f4; color: #67489f; font-size: 12px; font-weight: 800; }
.proto-build-feature h3 { margin: 0 0 12px; color: #30283e; font-size: clamp(34px, 3vw, 46px); line-height: 1.05; letter-spacing: -.045em; }
.proto-build-feature p { margin: 0 0 18px; color: #625a6d; font-size: 16px; line-height: 1.5; }
.proto-build-feature ul { display: grid; gap: 7px; margin: 0 0 22px; padding: 0; list-style: none; color: #40394a; font-size: 15px; }
.proto-build-feature-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: auto; }
.proto-build-price { color: #30283e; font-size: 24px; font-weight: 800; white-space: nowrap; }
.proto-build-feature a, .proto-build-card a { color: #67489f; font-size: 14px; font-weight: 800; }
.proto-build-feature-media { display: grid; min-width: 0; min-height: 380px; place-items: center; padding: 30px; background: #f2eff7; }
.proto-build-feature-media img { display: block; width: 100%; max-height: 340px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(48, 40, 62, .14)); }
.proto-build-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.proto-build-card { display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid #e0dce8; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(48, 40, 67, .05); }
.proto-build-card-media { display: flex; height: 220px; align-items: center; justify-content: center; padding: 15px; background: #f2eff7; }
.proto-build-card-media img { display: block; width: 100%; height: 190px; max-width: 100%; object-fit: contain; }
.proto-build-card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 23px 25px; }
.proto-build-card-body .proto-build-tag { align-self: flex-start; margin-bottom: 14px; }
.proto-build-card h3 { margin: 0 0 8px; color: #30283e; font-size: 27px; letter-spacing: -.035em; }
.proto-build-card p { margin: 0 0 15px; color: #625a6d; font-size: 15px; line-height: 1.45; }
.proto-build-card ul { display: grid; gap: 5px; margin: 0 0 16px; padding: 0; list-style: none; color: #40394a; font-size: 14px; }
.proto-build-card .proto-build-price { display: block; margin-top: auto; padding-top: 16px; border-top: 1px solid #e8e1ed; font-size: 22px; }
.proto-build-card a { display: inline-block; margin-top: 13px; }
.proto-build-note { margin: 14px 0 0; color: #736c7d; font-size: 14px; }

.proto-compare { margin-bottom: 80px; }
.proto-compare h2 { margin: 0 0 22px; color: #30283e; font-size: clamp(36px, 4vw, 52px); letter-spacing: -.045em; }
.proto-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.proto-compare-item { min-width: 0; padding: 28px 30px; border: 1px solid #e0dce8; border-radius: 20px; background: #fff; }
.proto-compare-item h3 { margin: 0 0 18px; color: #30283e; font-size: 26px; }
.proto-compare-item dl { display: grid; gap: 10px; margin: 0; }
.proto-compare-item dl div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 9px; border-bottom: 1px solid #e3deea; }
.proto-compare-item dt { color: #736a7e; }
.proto-compare-item dd { margin: 0; color: #30283e; font-weight: 750; text-align: right; }
.proto-compare-item a { display: inline-block; margin-top: 18px; color: #67489f; font-weight: 750; }
.proto-custom-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; margin-bottom: 82px; padding: 38px 43px; border-radius: 22px; background: #30283e; color: #fff; }
.proto-custom-cta h2 { margin: 0 0 8px; font-size: clamp(30px, 3.5vw, 43px); letter-spacing: -.04em; }
.proto-custom-cta p { margin: 0; color: #ded8e8; font-size: 16px; }
.proto-custom-cta a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 23px; border-radius: 999px; background: #ff744b; color: #18202d; font-weight: 750; }
.prototype-v2 .proto-v2-intro { margin-top: 0; margin-bottom: 90px; }

@media (max-width: 1100px) {
    .proto-build-feature { grid-template-columns: 1fr; }
    .proto-build-feature-media { min-height: 290px; }
    .proto-build-feature-media img { max-height: 290px; }
    .proto-build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .proto-gallery { margin: 54px 0 66px; }
    .proto-gallery-head { display: block; }
    .proto-gallery-head > p { margin-top: 12px; }
    .proto-feature-grid, .proto-build-grid, .proto-compare-grid { grid-template-columns: 1fr; }
    .proto-build-feature-media { min-height: 250px; padding-top: 0; }
    .proto-build-feature-media img { max-height: 250px; }
    .proto-build-card-media { height: 235px; }
    .proto-custom-cta { padding: 32px 27px; }
}

/* Builder manual: lenguaje visual del catálogo PCForge y área preparada para 3D. */
.builder-v2 {
    display: grid;
    grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
    gap: clamp(18px, 2vw, 30px);
    align-items: start;
}
.builder-select-column { min-width: 0; }
.builder-select-heading { padding: 4px 2px 17px; }
.builder-select-heading .eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.builder-select-heading h3 { margin: 0; color: var(--ink); font-size: clamp(25px, 2vw, 31px); letter-spacing: -.035em; }
.builder-select-heading > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.builder-options { display: grid; gap: 15px; }
.builder-group { min-width: 0; padding: 0 0 2px; }
.builder-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 8px; border-bottom: 1px solid var(--line); }
.builder-group-heading h4 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 750; }
.builder-group-heading p { margin: 0; color: var(--muted); font-size: 11px; text-align: right; }
.builder-field {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 0;
    background: transparent;
    transition: border-color .18s ease, background-color .18s ease;
}
.builder-v2 .builder-field { background: transparent; }
.builder-field-number { display: grid; width: 26px; height: 26px; place-items: center; color: var(--blue); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.builder-field-content { min-width: 0; }
.builder-field label { display: block; margin: 0 0 5px; color: var(--ink); font-size: 13px; font-weight: 700; }
.builder-field .tool-select {
    width: 100%;
    min-height: 42px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: var(--surface);
    color: var(--ink);
    font-size: 13px;
    box-shadow: none;
    transition: border-color .18s ease, background-color .18s ease;
}
.builder-field .tool-select:hover { border-color: var(--blue); }
.builder-field .tool-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 32%, transparent); outline-offset: 1px; border-color: var(--blue); }
.builder-field.is-selected .builder-field-number { border-color: var(--blue); background: var(--blue); color: #fff; }
.builder-field.is-selected .tool-select { border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); background-color: var(--surface); }
.builder-side {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    padding: 16px 17px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    background: var(--proto-card);
    color: var(--ink);
    box-shadow: none;
}
.builder-side .eyebrow { margin: 0 0 4px; color: var(--blue); font-size: 10px; letter-spacing: .1em; }
.builder-side h3 { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.3; }
.builder-side .screen-muted { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.builder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; }
.builder-actions .button { width: 100%; min-height: 42px; border-radius: 5px; font-size: 12px; }
.builder-preview-button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.builder-preview-button:hover { border-color: var(--blue); background: var(--proto-blue-soft); color: var(--ink); }
.builder-side .button:not(.builder-preview-button) { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.builder-side .button:not(.builder-preview-button):hover { background: color-mix(in srgb, var(--blue) 86%, var(--ink)); }
.builder-actions .button:disabled { opacity: .48; cursor: not-allowed; }
.build-preview-panel {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--proto-card);
    box-shadow: none;
}
.build-preview-panel[hidden] { display: none; }
.build-preview-top { display: grid; gap: 14px; padding: 19px 20px 15px; border: 0; border-bottom: 1px solid var(--line); background: var(--proto-card); }
.build-preview-top .eyebrow { margin: 0 0 5px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.build-preview-top h3 { margin: 0; color: var(--ink); font-size: 22px; letter-spacing: -.03em; }
.build-preview-top .screen-muted { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.build-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-content: stretch; }
.build-metric { display: grid; min-width: 0; gap: 4px; padding: 2px 10px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
.build-metric:first-child { border-left: 0; padding-left: 0; }
.build-metric small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.build-metric strong { overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.build-preview-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(245px, .92fr); min-height: 465px; }
.build-visual {
    position: relative;
    min-width: 0;
    min-height: 465px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 56px 22px 24px;
    border-right: 1px solid var(--line);
    background-color: color-mix(in srgb, var(--proto-paper) 76%, var(--proto-card));
}
.build-visual-caption { position: absolute; inset: 16px 17px auto; display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.build-visual-caption small { margin-left: auto; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .05em; }
.build-visual-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.build-main-image { width: 90%; height: 350px; max-width: 100%; max-height: 350px; object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 12px 14px rgba(40,35,50,.12)); }
.build-main-empty { max-width: 270px; color: var(--ink); text-align: center; }
.build-main-empty strong { display: block; font-size: 18px; }
.build-main-empty p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.build-visual-placeholder { position: relative; display: block; width: 142px; height: 192px; margin: 27px auto 0; border: 1px solid color-mix(in srgb, var(--blue) 38%, var(--line)); border-radius: 7px 7px 3px 3px; background: var(--proto-card); box-shadow: none; transform: perspective(400px) rotateY(-5deg); }
.build-visual-placeholder::before { position: absolute; top: 14px; right: 13px; bottom: 14px; left: 13px; border: 1px solid var(--line); border-radius: 3px; content: ''; }
.build-visual-placeholder i { position: absolute; z-index: 1; left: 34px; width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--blue) 52%, var(--line)); border-radius: 50%; }
.build-visual-placeholder i:nth-child(1) { top: 40px; }
.build-visual-placeholder i:nth-child(2) { top: 70px; }
.build-visual-placeholder i:nth-child(3) { top: 100px; }
.build-visual-placeholder i:nth-child(4) { right: 19px; bottom: 23px; left: auto; width: 10px; height: 10px; border: 0; background: var(--blue); }
.build-parts-panel { min-width: 0; padding: 18px 15px; border: 0; background: var(--proto-card); }
.build-parts-title { align-items: center; margin-bottom: 12px; }
.build-parts-title h4 { color: var(--ink); font-size: 13px; }
.build-parts-title span { color: var(--muted); font-size: 10px; }
.build-parts-list { display: grid; gap: 7px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.build-part-card { grid-template-columns: 39px minmax(0,1fr); gap: 9px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.build-part-thumb { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 5px; background: var(--proto-paper); }
.build-part-thumb img { mix-blend-mode: normal; }
.build-part-info small { color: var(--blue); font-size: 9px; letter-spacing: .04em; }
.build-part-info strong { max-width: none; color: var(--ink); font-size: 11px; line-height: 1.35; white-space: normal; }
.build-part-price { grid-column: 2; margin-top: -5px; color: var(--blue); font-size: 10px; }
.build-missing { margin-top: 12px; padding: 10px 11px; border: 1px solid var(--line); border-left: 3px solid var(--proto-warm); border-radius: 4px; background: var(--proto-card); color: var(--muted); font-size: 11px; line-height: 1.45; }
.build-missing.build-complete { border-left-color: var(--proto-green); color: var(--proto-green); }
.build-compatibility { margin-top: 9px; padding: 10px 11px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 4px; background: var(--proto-card); color: var(--muted); font-size: 11px; line-height: 1.45; }
.builder-compatibility-full { width: auto; margin: 0; padding: 0; border-radius: 0 0 10px 10px; font-size: 12px; overflow-wrap: anywhere; }
.build-compatibility-disclosure { margin: 0; }
.build-compatibility-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; color: var(--ink); cursor: pointer; list-style: none; }
.build-compatibility-toggle::-webkit-details-marker { display: none; }
.build-compatibility-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.build-compatibility-disclosure[open] > .build-compatibility-toggle .build-compatibility-chevron { transform: rotate(180deg); }
.build-compatibility-toggle-copy { display: grid; gap: 3px; min-width: 0; }
.build-compatibility-toggle-copy > strong { margin: 0; color: var(--ink); font-size: 15px; }
.build-compatibility-toggle-copy > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.build-compatibility-content { max-height: min(46vh, 430px); overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 16px; border-top: 1px solid var(--line); scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blue) 38%, var(--line)) transparent; }
.builder-page .build-parts-list { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blue) 38%, var(--line)) transparent; }
.build-compatibility-content::-webkit-scrollbar, .builder-page .build-parts-list::-webkit-scrollbar { width: 9px; }
.build-compatibility-content::-webkit-scrollbar-track, .builder-page .build-parts-list::-webkit-scrollbar-track { background: transparent; }
.build-compatibility-content::-webkit-scrollbar-thumb, .builder-page .build-parts-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--blue) 38%, var(--line)); background-clip: padding-box; }
.build-compatibility-content::-webkit-scrollbar-thumb:hover, .builder-page .build-parts-list::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--blue) 58%, var(--line)); background-clip: padding-box; }
.builder-compatibility-full .build-compatibility-content > ul { gap: 12px; padding: 13px 0 0 22px; }
.builder-compatibility-full .build-compatibility-content > ul > li { padding-left: 3px; }
.builder-compatibility-full .build-recommendations { margin: 10px 0 14px; padding: 14px; }
.builder-compatibility-full .build-recommendation-option { align-items: center; }
.builder-compatibility-full .build-recommendation-copy strong { font-size: 13px; }
.builder-compatibility-full .build-recommendation-copy span { font-size: 12px; }
.builder-compatibility-full .build-recommendation-button { min-height: 36px; padding-inline: 14px; font-size: 12px; }
.build-compatibility strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 11px; }
.build-compatibility ul { display: grid; gap: 3px; margin: 0; padding-left: 16px; }
.build-compatibility li { padding-left: 1px; }
.build-compatibility li details { margin: 4px 0 2px; }
.build-compatibility li summary { width: fit-content; color: var(--blue); cursor: pointer; font-weight: 650; }
.build-compatibility li details p { margin: 5px 0 8px; color: var(--muted); }
.build-recommendations { display: grid; gap: 8px; margin: 9px 0 12px; padding: 10px; border: 1px solid var(--proto-line); border-radius: 9px; background: var(--proto-card); color: var(--proto-text); }
.build-recommendations-title { margin: 0 !important; color: var(--proto-text) !important; font-size: 11px !important; }
.build-recommendations-empty { margin: 0; color: var(--proto-muted); }
.build-recommendation-group { display: grid; gap: 6px; }
.build-recommendation-group h4 { margin: 0; color: var(--proto-muted); font-size: 10px; font-weight: 700; }
.build-recommendation-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border: 1px solid var(--proto-line); border-radius: 7px; background: var(--proto-paper); }
.build-recommendation-copy { display: grid; min-width: 0; gap: 2px; }
.build-recommendation-copy strong { color: var(--proto-text); font-size: 10px; overflow-wrap: anywhere; }
.build-recommendation-copy span { color: var(--proto-muted); font-size: 9px; }
.build-recommendation-button { flex: 0 0 auto; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 999px; background: #7655b5; color: #fff; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.build-recommendation-button:hover { background: #62439c; }
.build-recommendation-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.build-compatibility li.is-conflict > span { color: #8b3632; font-weight: 650; }
.build-compatibility li.is-next-step > span { color: var(--proto-blue); font-weight: 650; }
.build-compatibility li.is-duplicate > span { color: var(--proto-warm); font-weight: 650; }
.build-compatibility.has-unknowns { border-left-color: var(--proto-warm); color: var(--proto-warm); }
.build-compatibility.has-unknowns strong { color: var(--proto-warm); }
.build-compatibility.has-conflicts { border-left-color: #b23a3a; color: #8b3632; }
.build-compatibility.has-conflicts strong { color: #8b3632; }
.build-compatibility.has-duplicate:not(.has-conflicts) { border-left-color: var(--proto-warm); }
.build-compatibility.has-duplicate:not(.has-conflicts) strong { color: var(--proto-warm); }
.build-preview-note { padding: 11px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
@media (max-width: 1100px) {
    .builder-v2 { grid-template-columns: minmax(0, 1fr); }
    .build-preview-grid { min-height: 400px; }
    .build-visual { min-height: 400px; }
    .build-main-image { height: 310px; max-height: 310px; }
}
@media (max-width: 700px) {
    .builder-v2 { grid-template-columns: minmax(0, 1fr); }
    .builder-group-heading { display: block; }
    .builder-group-heading p { margin-top: 3px; text-align: left; }
    .builder-actions { grid-template-columns: 1fr; }
    .build-preview-top { padding: 16px; }
    .build-preview-top h3 { font-size: 19px; }
    .build-preview-metrics { grid-template-columns: 1fr 1fr; }
    .build-preview-grid { grid-template-columns: minmax(0, 1fr); }
    .build-visual { min-height: 340px; border-right: 0; border-bottom: 1px solid #ece7f0; }
    .build-main-image { height: 250px; max-height: 250px; }
    .build-parts-list { max-height: none; }
    .build-visual-caption { inset: 13px 12px auto; font-size: 8px; }
    .build-visual-caption small { font-size: 7px; }
}

/* Builder manual: jerarquía clara, grupos plegables y visor amplio. */
.builder-page .builder-page-container {
    padding-top: var(--page-top-space);
    padding-bottom: 64px;
}
.builder-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(22px, 3vw, 38px);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.builder-page-heading .eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.builder-page-heading h1 { margin: 0; color: var(--ink); font-size: clamp(34px, 4vw, 50px); line-height: 1; letter-spacing: -.045em; }
.builder-page-heading .builder-intro { max-width: 640px; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.builder-page-heading #prototype-status { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.builder-page-heading #prototype-status.is-error { color: #9c3b3b; }
.builder-page-heading #prototype-status a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.builder-page-heading #prototype-status .build-login-link { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; margin: 6px 0 0 7px; padding: 4px 12px; border-radius: 999px; background: #7655b5; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.builder-page-heading #prototype-status .build-login-link:hover { background: #62439c; color: #fff; }
.builder-page-heading #prototype-status .build-login-link:focus-visible { outline: 2px solid #62439c; outline-offset: 3px; }
html[data-theme="dark"] .builder-page-heading #prototype-status .build-login-link { border-color: transparent; background: #ff7652; color: #21131a; }
html[data-theme="dark"] .builder-page-heading #prototype-status .build-login-link:hover { background: #ff8a69; color: #21131a; }
.builder-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.builder-page-actions .builder-analyze-button { border-color: var(--line); background: var(--proto-card); color: var(--ink); }
.builder-page-actions .builder-analyze-button:hover { border-color: var(--blue); }
.builder-page-actions button:disabled { cursor: not-allowed; opacity: .52; }
.build-analysis-report { margin: 28px 0 8px; padding: clamp(18px, 2.6vw, 28px); border: 1px solid var(--line); border-radius: 12px; background: var(--proto-card); color: var(--ink); }
.build-analysis-report[hidden] { display: none; }
.build-analysis-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.build-analysis-heading .eyebrow { margin: 0 0 5px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.build-analysis-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.build-analysis-summary { max-width: 60ch; margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.build-analysis-section { padding: 17px 0; border-bottom: 1px solid var(--line); }
.build-analysis-section:last-child { border-bottom: 0; }
.build-analysis-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.build-analysis-section-heading h3 { margin: 0; font-size: 16px; }
.build-analysis-section-heading span { color: var(--muted); font-size: 10px; font-weight: 750; }
.build-analysis-section[data-status="problem"] .build-analysis-section-heading span,
.build-analysis-finding[data-level="problem"] > small { color: #a73535; }
.build-analysis-section[data-status="warning"] .build-analysis-section-heading span,
.build-analysis-finding[data-level="warning"] > small { color: #8a5a12; }
.build-analysis-section-summary { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.build-analysis-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; margin: 11px 0; }
.build-analysis-metrics dt { color: var(--muted); font-size: 10px; }
.build-analysis-metrics dd { margin: 0; font-size: 11px; font-weight: 700; }
.build-analysis-finding { margin-top: 11px; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); }
.build-analysis-finding[data-level="problem"] { border-color: #a73535; }
.build-analysis-finding[data-level="warning"] { border-color: #b47b24; }
.build-analysis-finding > small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 750; }
.build-analysis-finding > strong { display: block; font-size: 12px; }
.build-analysis-finding p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.build-analysis-finding p b { color: var(--ink); }
.build-analysis-note { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.build-analysis-inline { margin: 15px 0 0; padding: 14px; }
.build-analysis-inline .build-analysis-section { padding: 12px 0; }
.saved-build-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.saved-build-actions .builder-analyze-button { min-height: 38px; padding: 8px 13px; }
.ficha-data-row { align-items: start !important; }
.ficha-data-row ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; font-weight: 500; }
.ficha-data-row li { line-height: 1.45; }
.ficha-data-row li strong { margin-right: 6px; }
#ficha-acciones { align-items: stretch; }
#ficha-acciones > * { flex: 1 1 190px; }
#ficha-compatibilidad { flex-basis: 100%; margin: 0; }
.saved-build-actions > .button { min-height: 38px; padding: 8px 13px; text-decoration: none; }
.saved-build-card li { overflow-wrap: anywhere; }
.saved-build-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.saved-build-header input { width: 18px; height: 18px; margin: 0; accent-color: #7550ae; }
.saved-build-header h3 { overflow-wrap: anywhere; }
.saved-build-compare-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.saved-build-compare-controls p { margin: 0; color: var(--muted); }
.saved-build-comparison { margin: 0 0 18px; overflow: hidden; border: 1px solid #dce3ea; border-radius: 12px; }
.saved-build-comparison[hidden] { display: none; }
.saved-build-comparison-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.saved-build-comparison table { width: 100%; min-width: 570px; border-collapse: collapse; background: #fff; }
.saved-build-comparison th, .saved-build-comparison td { padding: 11px 13px; border-bottom: 1px solid #e7eaf0; text-align: left; vertical-align: top; font-size: 13px; line-height: 1.45; }
.saved-build-comparison thead th { position: sticky; top: 0; background: #f5f2fa; }
.saved-build-comparison tbody th { width: 150px; color: #5f536f; }
@media (max-width: 600px) {
    .saved-builds { grid-template-columns: minmax(0, 1fr); }
    .saved-build-actions > .button, .saved-build-actions > button { flex: 1 1 100%; }
    .saved-build-compare-controls { align-items: stretch; flex-direction: column; }
}
@media (max-width: 720px) {
    .builder-page-actions { justify-content: flex-start; }
    .build-analysis-heading { flex-direction: column; }
}
@media (max-width: 450px) {
    .builder-page-actions { width: 100%; }
    .builder-page-actions .button { flex: 1 1 100%; }
    .build-analysis-metrics { grid-template-columns: minmax(0, 1fr); }
    .build-analysis-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
}
.builder-save-button { min-width: 145px; min-height: 44px; border-radius: 6px; }
.builder-page .builder-group { scroll-margin-top: 24px; }
.builder-save-blocked { display: grid; gap: 7px; margin: 22px 0 0; padding: 14px 16px; border: 1px solid #d69b99; border-left: 4px solid #b23a3a; border-radius: 8px; background: #fff8f7; color: #382b3e; }
.builder-save-blocked[hidden] { display: none; }
.builder-save-blocked > strong { color: #8b3632; font-size: 15px; }
.builder-save-blocked p { margin: 0; color: #574a5a; font-size: 13px; }
.builder-save-blocked ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: #574a5a; font-size: 13px; }
.builder-save-blocked a { width: fit-content; color: #62439c; font-size: 13px; font-weight: 700; text-underline-offset: 3px; }
.builder-save-blocked:focus { outline: 2px solid #8b67c4; outline-offset: 3px; }
.builder-page .proto-tools { display: block; padding: 0; }
.builder-page .proto-tool { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.builder-page .proto-tool-body { padding: 0; }
.builder-recommendation { display: flex; justify-content: center; margin: clamp(28px, 4vw, 52px) auto; }
.builder-recommendation-card { position: relative; display: block; width: min(100%, 390px); aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px; isolation: isolate; color: #fff; background: #10252a; box-shadow: 0 18px 44px rgba(38, 30, 54, .16); text-decoration: none; }
.builder-recommendation-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease, filter .3s ease; }
.builder-recommendation-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 23, .02) 22%, rgba(8, 20, 23, .38) 54%, rgba(8, 20, 23, .94) 100%); }
.builder-recommendation-copy { position: absolute; inset: auto 0 0; display: grid; gap: 12px; padding: clamp(22px, 3vw, 30px); color: #fff; }
.builder-recommendation-eyebrow { color: #d5c5ed; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.builder-recommendation-title { max-width: 13ch; color: #fff; font-size: clamp(24px, 2.5vw, 32px); font-weight: 750; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.builder-recommendation-description { max-width: 30ch; color: rgba(255, 255, 255, .92); font-size: 14px; line-height: 1.5; }
.builder-recommendation-action { display: inline-flex; width: fit-content; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; background: rgba(20, 17, 28, .62); font-size: 13px; font-weight: 750; backdrop-filter: blur(8px); }
.builder-recommendation-card:hover > img { transform: scale(1.025); }
.builder-recommendation-card:focus-visible { outline: 3px solid #9871d1; outline-offset: 4px; }
.builder-recommendation-card:focus-visible > img { transform: scale(1.025); }
.builder-page .builder-v2 { grid-template-columns: minmax(320px, .38fr) minmax(0, .62fr); gap: clamp(26px, 3vw, 48px); }
.builder-select-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.builder-select-heading h2 { margin: 0; color: var(--ink); font-size: 23px; letter-spacing: -.03em; }
.builder-select-heading > span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.builder-part-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px; color: var(--muted); font-size: 11px; }
.builder-part-controls label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.builder-part-controls input { accent-color: var(--blue); }
.builder-part-controls .text-button { border: 0; padding: 4px 0; color: var(--blue); background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.builder-part-controls button:focus-visible, .build-part-actions a:focus-visible, .build-part-actions button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.builder-field-compatibility { min-height: 1.25em; margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.builder-field-compatibility[data-status="compatible"] { color: var(--proto-green); }
.builder-field-compatibility[data-status="incompatible"] { color: #a73535; }
.builder-field-compatibility[data-status="warning"], .builder-field-compatibility[data-status="unknown"] { color: #8a5a12; }
.builder-live-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 7px 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 11px; }
.builder-v2 .builder-live-summary { grid-column: 1 / -1; }
.builder-live-summary > span:first-child { color: var(--ink); font-weight: 750; }
.builder-live-summary label { font-weight: 650; }
.builder-live-summary input { width: 100%; min-height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; background: var(--proto-card); color: var(--ink); font: inherit; }
.builder-live-summary [data-status="incompatible"] { color: #a73535; }
.builder-live-summary [data-status="compatible"] { color: var(--proto-green); }
.builder-options { gap: 0; }
.builder-group { padding: 0; border-bottom: 1px solid var(--line); }
.builder-group-heading {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border: 0;
    cursor: pointer;
    list-style: none;
}
.builder-group-heading::-webkit-details-marker { display: none; }
.builder-group-heading::marker { content: ''; }
.builder-group-heading::after { width: 14px; margin-left: 3px; color: var(--muted); content: '+'; font-size: 19px; font-weight: 400; line-height: 1; text-align: center; }
.builder-group[open] > .builder-group-heading::after { color: var(--blue); content: '−'; }
.builder-group-title { color: var(--ink); font-size: 16px; font-weight: 650; }
.builder-group-count { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.builder-page .builder-group-description { margin: -2px 4px 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.builder-page .builder-field.is-locked { opacity: .58; }
.builder-page .builder-field .tool-select:disabled { cursor: not-allowed; background: color-mix(in srgb, var(--proto-paper) 65%, var(--proto-card)); color: var(--muted); }
.builder-install-board { display: grid; gap: 10px; margin: 14px 0 18px; padding: 15px; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--proto-blue-soft) 48%, var(--proto-card)); }
.builder-install-board p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.5; }
.builder-install-board .button { width: 100%; min-height: 44px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; }
.builder-install-board .button:disabled { cursor: not-allowed; opacity: .48; }
.builder-group.is-complete > .builder-group-heading .builder-group-count { color: var(--proto-green); }
.builder-group-heading:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.builder-fields { display: grid; gap: 14px; padding: 2px 4px 18px; }
.builder-v2 .builder-field { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 0; border: 0; }
.builder-v2 .builder-field-number { display: none; }
.builder-field label { margin: 0; font-size: 12px; font-weight: 650; }
.builder-field .tool-select { min-height: 46px; border-radius: 6px; font-size: 13px; }
.builder-v2 .build-preview-panel { min-height: 640px; border-radius: 12px; }
.builder-v2 .build-preview-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 22px 24px; }
.build-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.build-preview-heading .eyebrow { margin: 0 0 5px; }
.build-preview-heading h2 { margin: 0; color: var(--ink); font-size: 24px; letter-spacing: -.035em; }
.build-preview-heading .screen-muted { margin: 5px 0 0; font-size: 12px; }
.build-state { flex: 0 0 auto; padding: 6px 9px; border-left: 2px solid var(--proto-warm); background: var(--proto-paper); color: var(--muted); font-size: 10px; font-weight: 650; }
.build-preview-metrics { display: flex; align-items: stretch; gap: 0; }
.build-metric { min-width: 100px; padding: 2px 13px; }
.build-metric:last-child { min-width: 145px; }
.build-preview-grid { grid-template-columns: minmax(0, 1fr) minmax(245px, .34fr); grid-template-areas: "visual parts" "compatibility ."; grid-template-rows: minmax(555px, auto) auto; min-height: 555px; }
.builder-page .build-visual { grid-area: visual; }
.builder-page .build-parts-panel { grid-area: parts; }
.builder-page .builder-compatibility-full { grid-area: compatibility; align-self: start; border-top: 0; }
.build-visual { min-height: 555px; background-image: linear-gradient(color-mix(in srgb, var(--proto-line) 42%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--proto-line) 42%, transparent) 1px, transparent 1px); background-size: 36px 36px; }
.build-visual-caption { color: var(--muted); font-size: 9px; }
.build-visual-caption small { font-size: 9px; }
.build-main-image { height: 440px; max-height: 440px; }
.build-main-empty strong { font-size: 17px; }
.build-main-empty p { font-size: 12px; }
.build-visual-placeholder { width: 174px; height: 236px; margin-top: 20px; }
.build-visual-placeholder i { left: 42px; width: 28px; height: 28px; }
.build-visual-placeholder i:nth-child(1) { top: 45px; }
.build-visual-placeholder i:nth-child(2) { top: 83px; }
.build-visual-placeholder i:nth-child(3) { top: 121px; }
.build-visual-placeholder i:nth-child(4) { right: 22px; bottom: 25px; }
.build-parts-panel { padding: 20px 18px; }
.build-parts-title { align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.build-parts-title h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 650; }
.build-parts-title span { font-variant-numeric: tabular-nums; }
.build-parts-list { max-height: 440px; gap: 0; }
.build-part-card { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; }
.build-part-thumb { width: 42px; height: 42px; }
.build-part-info small { font-size: 9px; }
.build-part-info strong { font-size: 11px; }
.build-part-price { grid-column: auto; margin: 0; white-space: nowrap; }
.build-part-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.build-part-actions button, .build-part-actions a { border: 0; padding: 2px 0; color: var(--blue); background: transparent; font: inherit; font-size: 10px; font-weight: 700; text-decoration: none; cursor: pointer; }
    .build-compatibility { margin-top: 14px; font-size: 11px; }
    .build-recommendation-option { align-items: flex-start; flex-direction: column; }
    .build-recommendation-button { width: 100%; }
.build-preview-note { padding: 10px 18px; font-size: 10px; }
@media (max-width: 1120px) {
    .builder-page .builder-v2 { grid-template-columns: minmax(0, 1fr); }
    .builder-page .build-preview-panel { min-height: 0; }
    .build-preview-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "compatibility" "parts"; grid-template-rows: auto; min-height: 460px; }
    .build-visual { min-height: 460px; }
}
@media (max-width: 720px) {
    .builder-page .builder-page-container { padding-top: 24px; }
    .builder-page-heading { align-items: start; margin-bottom: 22px; }
    .builder-page-heading h1 { font-size: 36px; }
    .builder-save-button { min-width: 0; padding-inline: 14px; }
    .builder-page .builder-v2 { gap: 26px; }
    .builder-recommendation { margin-block: 26px 34px; }
    .builder-recommendation-card { width: min(100%, 360px); }
    .builder-page .build-preview-top { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
    .builder-select-heading { align-items: flex-start; flex-direction: column; }
    .builder-part-controls { justify-content: flex-start; }
    .builder-live-summary { grid-template-columns: minmax(0, 1fr); }
    .build-preview-heading h2 { font-size: 21px; }
    .build-preview-metrics { justify-content: start; }
    .build-preview-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .build-visual { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--line); }
    .build-main-image { height: 300px; max-height: 300px; }
    .build-parts-panel { padding: 18px; }
    .build-parts-list { max-height: none; }
    .builder-save-blocked { margin: 18px 0 0; padding: 12px; }
    .builder-compatibility-full { margin-top: 18px; padding: 0; }
    .build-compatibility-toggle { padding: 13px 14px; }
    .build-compatibility-content { max-height: min(52vh, 380px); padding: 0 14px 14px; }
    .builder-compatibility-full .build-recommendation-option { align-items: flex-start; flex-direction: column; }
    .builder-compatibility-full .build-recommendation-button { width: 100%; }
    .builder-save-blocked > strong { font-size: 14px; }
}
@media (max-width: 450px) {
    .builder-page-heading { flex-direction: column; align-items: stretch; }
    .builder-save-button { align-self: start; }
    .build-metric { min-width: 84px; padding-inline: 9px; }
    .build-metric:last-child { min-width: 125px; }
    .build-visual { min-height: 330px; }
    .build-main-image { height: 250px; max-height: 250px; }
}

/* Builder manual: grupos siempre visibles, con selectores claros en columna. */
.builder-page .builder-group {
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}
.builder-page .builder-group-heading {
    min-height: 48px;
    gap: 10px;
    padding: 8px 0;
    cursor: default;
}
.builder-page .builder-group-heading::after { display: none; content: none; }
.builder-page .builder-group-heading:focus-visible { outline: none; }
.builder-page .builder-group-title { font-size: 17px; letter-spacing: -.02em; }
.builder-page .builder-group-count {
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--proto-card);
    font-size: 10px;
}
.builder-page .builder-group.is-complete > .builder-group-heading .builder-group-count {
    border-color: color-mix(in srgb, var(--proto-green) 28%, var(--line));
    background: color-mix(in srgb, var(--proto-green) 8%, var(--proto-card));
}
.builder-page .builder-fields { gap: 10px; padding: 3px 0 7px; }
.builder-page .builder-field-media {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 17%, var(--line));
    border-radius: 8px;
    background: var(--proto-blue-soft);
    transition: border-color .18s ease, background-color .18s ease;
}
.builder-page .builder-v2 .builder-field {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--proto-card);
    transition: border-color .16s ease, background-color .16s ease;
}
.builder-page .builder-v2 .builder-field:hover,
.builder-page .builder-v2 .builder-field:focus-within {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    background: color-mix(in srgb, var(--proto-card) 90%, var(--proto-blue-soft));
}
.builder-page .builder-field-icon {
    width: 22px;
    height: 22px;
    color: var(--blue);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: center;
    transition: transform .2s ease, color .2s ease;
}
.builder-page .builder-v2 .builder-field:hover .builder-field-media,
.builder-page .builder-v2 .builder-field:focus-within .builder-field-media {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    background: color-mix(in srgb, var(--proto-blue-soft) 76%, var(--proto-card));
}
.builder-page .builder-v2 .builder-field:hover .builder-field-icon,
.builder-page .builder-v2 .builder-field:focus-within .builder-field-icon {
    color: color-mix(in srgb, var(--blue) 82%, #8b65c8);
    transform: translateY(-1px) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
    .builder-page .builder-field-media,
    .builder-page .builder-field-icon { transition: none; }
    .builder-page .builder-v2 .builder-field:hover .builder-field-icon,
    .builder-page .builder-v2 .builder-field:focus-within .builder-field-icon { transform: none; }
}

.builder-page .builder-field-content { grid-column: 2; grid-row: 1; display: grid; min-width: 0; gap: 6px; }
.builder-page .builder-field label { font-size: 12px; }
.builder-page .builder-field .tool-select { min-height: 44px; border-radius: 6px; }
.builder-page .build-preview-panel { position: sticky; top: 18px; align-self: start; }
@media (max-width: 1120px) {
    .builder-page .build-preview-panel { position: static; }
}
@media (max-width: 720px) {
    .builder-page .builder-group-heading { display: flex; align-items: center; }
    .builder-page .builder-group-heading p { text-align: left; }
    .builder-page .builder-v2 .builder-field { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 9px; }
    .builder-page .builder-field-media { width: 38px; height: 38px; }
}

/* Visor 3D manual: escena interactiva con iluminación y materiales moderados. */
.builder-page .build-visual {
    display: block;
    min-height: 555px;
    padding: 0;
    border-right: 1px solid #494353;
    background: radial-gradient(ellipse at 50% 43%, #3b3548 0%, #2b2635 57%, #201d28 100%);
    isolation: isolate;
}
.builder-page .build-visual::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#d3c4e906 1px, transparent 1px), linear-gradient(90deg, #d3c4e906 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    mask-image: radial-gradient(ellipse at center, #000 28%, #0009 68%, transparent 100%);
    pointer-events: none;
}
.builder-page .build-visual-caption { z-index: 2; color: #f3edf9; }
.builder-page .build-visual-caption small.build-3d-status {
    display: inline-flex;
    max-width: min(62%, 260px);
    min-height: 26px;
    align-items: center;
    overflow: hidden;
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid #ffffff18;
    border-radius: 999px;
    background: #17151d9c;
    color: #d9d2e3;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}
.builder-page .build-visual-caption small.build-3d-status[data-state="loading"] { color: #d7c5f4; }
.builder-page .build-visual-caption small.build-3d-status[data-state="canvas"] { color: #e4cba3; }
.builder-page .build-visual-caption small.build-3d-status[data-state="error"] { color: #f0c49a; }
.builder-page .build-visual-caption small.build-3d-status[data-state="ready"] { color: #c9e2d4; }
.builder-page .build-visual-caption small.build-3d-status[data-state="reference"], .builder-page .build-visual-caption small.build-3d-status[data-state="empty"] { color: #d4cbdc; }
.build-3d-viewer { position: absolute; inset: 0; min-height: 0; }
.build-3d-viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.build-3d-viewer canvas[hidden] { display: none !important; }
.build-3d-viewer .build-3d-webgl-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.build-3d-viewer canvas.is-dragging { cursor: grabbing; }
.build-3d-controls { position: absolute; z-index: 2; top: 54px; right: 16px; display: flex; align-items: center; gap: 6px; }
.build-3d-controls button {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    padding: 0 9px;
    border: 1px solid #ffffff20;
    border-radius: 9px;
    background: #191720d9;
    color: #f6f1fc;
    font-size: 14px;
    font-weight: 650;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    backdrop-filter: blur(8px);
}
.build-3d-controls button:hover:not(:disabled), .build-3d-controls button[aria-pressed="true"] { border-color: #a88bcf; background: #493b5c; }
.build-3d-controls button:hover:not(:disabled) { transform: translateY(-1px); }
.build-3d-controls button:last-child { font-size: 10px; }
.build-3d-controls button:disabled { cursor: not-allowed; opacity: .48; }
.build-3d-controls button:focus-visible { outline: 2px solid #c1a9eb; outline-offset: 3px; }
.build-3d-footnote { position: absolute; z-index: 2; right: 17px; bottom: 14px; left: 17px; display: flex; justify-content: space-between; gap: 12px; color: #d9d0e2; font-size: 10px; text-shadow: 0 1px 4px #17151d; }
.build-3d-footnote span:first-child { color: #e7d8ff; font-weight: 700; }
.build-3d-footnote span:last-child { text-align: right; }
html[data-theme="dark"] .builder-page .build-visual { border-color: #403849; background: radial-gradient(ellipse at 50% 43%, #342e3e 0%, #25212e 58%, #1a1821 100%); }
html[data-theme="dark"] .build-3d-controls button { border-color: #d8c6f522; background: #17151de8; }
html[data-theme="dark"] .build-3d-controls button:hover:not(:disabled), html[data-theme="dark"] .build-3d-controls button[aria-pressed="true"] { border-color: #a88bcf; background: #42354f; }
@media (max-width: 720px) {
    .builder-page .build-visual { min-height: 390px; }
    .build-3d-controls { top: 49px; right: 11px; gap: 4px; }
    .build-3d-controls button { min-width: 31px; height: 31px; padding-inline: 7px; }
    .build-3d-controls button:last-child { font-size: 9px; }
    .build-3d-footnote { right: 12px; bottom: 10px; left: 12px; font-size: 9px; }
    .builder-page .build-visual-caption small.build-3d-status { min-height: 24px; max-width: min(60%, 220px); padding: 4px 8px; font-size: 8px; }
}
@media (max-width: 390px) {
    .build-3d-footnote { flex-direction: column; gap: 2px; }
    .build-3d-footnote span:last-child { text-align: left; }
    .build-3d-controls { gap: 3px; }
    .build-3d-controls button { min-width: 29px; height: 29px; }
    .build-3d-controls button:last-child { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .build-3d-controls button { transition: none; }
    .build-3d-controls button:hover:not(:disabled) { transform: none; }
}

/* Las fotos aportan contexto y mantienen un nivel de color secundario al texto. */
.prototype-v2 .proto-way-image img { filter: none; }
.prototype-v2 .proto-way:hover .proto-way-image img { filter: none; }

.prototype-v2 .proto-build-feature {
    position: relative;
    display: block;
    min-height: 470px;
    isolation: isolate;
    border-color: #44384f;
    background: #1c1725;
    color: #fbf8ff;
}
.prototype-v2 .proto-build-feature::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 16, 27, .96) 0%, rgba(20, 16, 27, .84) 48%, rgba(20, 16, 27, .2) 100%);
    content: "";
    pointer-events: none;
}
.prototype-v2 .proto-build-feature-copy {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: min(69%, 520px);
    padding: clamp(27px, 3vw, 42px);
    color: #fbf8ff;
}
.prototype-v2 .proto-build-feature h3 { color: #fff; }
.prototype-v2 .proto-build-feature p,
.prototype-v2 .proto-build-feature ul { color: #eee8f5; }
.prototype-v2 .proto-build-feature .proto-build-price { color: #fff; }
.prototype-v2 .proto-build-feature a { color: #d3b6ff; }
.prototype-v2 .proto-build-feature-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    min-height: 0;
    display: block;
    padding: 0;
    background: #1c1725;
}
.prototype-v2 .proto-build-feature-media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    filter: none;
}
.prototype-v2 .proto-build-tag { background: #3c2c51; color: #e4d1ff; }

@media (max-width: 720px) {
    .prototype-v2 .proto-build-feature { min-height: 570px; }
    .prototype-v2 .proto-build-feature::after { background: linear-gradient(180deg, rgba(20, 16, 27, .2) 0%, rgba(20, 16, 27, .58) 35%, rgba(20, 16, 27, .97) 70%); }
    .prototype-v2 .proto-build-feature-copy { inset: auto 0 0; width: auto; padding: 26px 24px; }
    .prototype-v2 .proto-build-feature-media { min-height: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .prototype-v2 .proto-way-image img { transition: none; }
}

/* Ajuste de lectura y encuadre para portadas de herramientas existentes. */
.proto-v2-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.proto-v2-copy { min-width: 0; padding: clamp(28px, 4vw, 58px); }
.proto-v2-copy h1 { width: 100%; max-width: 570px; font-size: clamp(40px, 4.25vw, 64px); line-height: 1.04; letter-spacing: -.045em; overflow-wrap: anywhere; text-wrap: balance; }
.proto-v2-copy > p:not(.eyebrow) { max-width: 490px; font-size: 16px; line-height: 1.55; }
.proto-v2-visual { min-width: 0; min-height: 0; aspect-ratio: 3 / 2; }
.prototype-v2 .proto-v2-visual img { padding: 0; object-fit: cover; object-position: center; }
.compare-v2-table-wrap { max-width: 100%; }
.comparator-body { display: grid; gap: 18px; }
.comparator-body .compare-v2-selectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.comparator-body .compare-v2-box { border: 1px solid var(--proto-line); background: var(--proto-card, #fff); }
.comparator-body .compare-v2-box label { display: block; margin-bottom: 8px; color: var(--proto-ink); font-size: 13px; font-weight: 750; }
.compare-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.compare-toolbar .compare-helper { margin: 0; flex: 1; }
.compare-differences-toggle { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; color: var(--proto-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.compare-differences-toggle input { width: 18px; height: 18px; accent-color: var(--proto-blue); }
.comparator-body .compare-v2-products { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.comparator-body .compare-v2-product { background: var(--proto-card, #fff); border-color: var(--proto-line); }
.comparator-body .compare-v2-product-image { background: color-mix(in srgb, var(--background) 72%, var(--surface)); }
.comparator-body .compare-v2-product h3 { color: var(--proto-ink); }
.comparator-body .compare-v2-product p { color: var(--proto-muted); }
.comparator-body .compare-v2-product strong { display: block; color: var(--proto-ink); }
.compare-choose-button { min-height: 44px; margin: 16px 8px 0; padding: 10px 14px; border: 1px solid var(--proto-line); border-radius: 10px; background: var(--proto-blue-soft); color: var(--proto-ink); font: inherit; font-weight: 750; cursor: pointer; }
.compare-choose-button:hover { border-color: var(--proto-blue); }
.comparison-table { display: block; min-width: 100%; border-color: var(--proto-line); background: var(--surface); }
.comparison-row { display: grid; grid-template-columns: minmax(130px, 190px) repeat(var(--compare-columns, 3), minmax(180px, 1fr)); border-bottom: 1px solid var(--proto-line); }
.comparison-row:last-child { border-bottom: 0; }
.comparison-row > span { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--proto-line); color: var(--proto-muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.comparison-row > span:last-of-type { border-right: 0; }
.comparison-row .comparison-label { color: var(--proto-ink); font-weight: 750; }
.comparison-head { position: sticky; top: 0; z-index: 3; background: var(--navy); }
.comparison-head > span { color: #fff; font-weight: 750; }
.comparison-row.is-different > span { background: color-mix(in srgb, var(--proto-blue-soft) 48%, var(--surface)); }
.comparison-value.is-different { color: var(--proto-ink); font-weight: 700; }
.compare-delta { display: block; width: fit-content; margin-top: 5px; color: var(--proto-blue); font-size: 12px; font-weight: 800; }
.comparison-context { grid-column: 2 / -1; margin: 0; padding: 0 16px 12px; color: var(--proto-muted); font-size: 12px; line-height: 1.45; }
.compare-empty { grid-column: 1 / -1; margin: 0; padding: 20px; color: var(--proto-muted); }
.compare-build-context { padding: 16px; border: 1px solid var(--proto-line); border-radius: 13px; background: var(--proto-blue-soft); color: var(--proto-ink); }
.compare-build-context > strong { display: block; margin-bottom: 6px; }
.compare-build-context > p { margin: 0; color: var(--proto-muted); line-height: 1.5; }
.compare-compatibility-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.compare-compatibility-item { padding: 12px; border: 1px solid var(--proto-line); border-radius: 10px; background: var(--surface); }
.compare-compatibility-item strong { display: block; color: var(--proto-ink); }
.compare-compatibility-item p { margin: 7px 0 0; color: var(--proto-muted); font-size: 13px; line-height: 1.45; }
.compatibility-status { display: inline-flex; margin-top: 7px; padding: 4px 8px; border: 1px solid var(--proto-line); border-radius: 999px; color: var(--proto-ink); background: var(--surface); font-size: 12px; font-weight: 750; }
.compatibility-status.status-compatible { border-color: color-mix(in srgb, var(--proto-blue) 40%, var(--proto-line)); }
.compatibility-status.status-incompatible, .compatibility-status.status-warning, .compatibility-status.status-unknown { border-style: dashed; }
@media (max-width: 720px) {
    .comparator-body .compare-v2-selectors { grid-template-columns: 1fr; }
    .compare-toolbar { align-items: flex-start; flex-direction: column; }
    .comparator-body .compare-v2-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .comparator-body .compare-v2-product { padding: 10px; }
    .comparator-body .compare-v2-product-image { height: 150px; }
    .comparator-body .compare-v2-product h3 { margin: 10px 2px 4px; font-size: 16px; }
    .comparator-body .compare-v2-product p { margin-inline: 2px; font-size: 12px; }
    .comparator-body .compare-v2-product strong { margin-inline: 2px; font-size: 14px; }
    .compare-choose-button { margin-inline: 0; padding-inline: 9px; font-size: 12px; }
    .compare-compatibility-list { grid-template-columns: 1fr; }
    .compare-v2-table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
    .comparison-table { min-width: 0; }
    .comparison-row { grid-template-columns: minmax(110px, 130px) repeat(var(--compare-columns, 3), minmax(145px, 1fr)); }
    .comparison-row > span { padding: 12px 10px; font-size: 13px; }
    .comparison-row > span:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }
    .comparison-head > span:first-child { background: var(--navy); }
    .comparison-context { grid-column: 1 / -1; padding-inline: 10px; }
}
@media (max-width: 420px) {
    .comparator-body .compare-v2-products { grid-template-columns: 1fr 1fr; }
    .comparator-body .compare-v2-product-image { height: 120px; }
}
@media (max-width: 1000px) {
    .proto-v2-hero { grid-template-columns: minmax(0, 1fr); }
    .proto-v2-copy h1 { max-width: 680px; font-size: clamp(40px, 6.2vw, 58px); }
    .proto-v2-visual { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 620px) {
    .proto-v2-hero { min-height: 0; }
    .proto-v2-copy { padding: 30px 24px; }
    .proto-v2-copy h1 { font-size: clamp(38px, 10vw, 52px); }
    .proto-v2-visual { min-height: 0; aspect-ratio: 3 / 2; }
}

/* Tarjetas amplias para destacar cada herramienta con una foto y texto legible. */
.prototype-v2 .proto-v2-ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 100%;
    margin-inline: auto;
}
.prototype-v2 .proto-way--feature {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 300px;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    isolation: isolate;
    align-self: stretch;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    color: #fff;
    background: #17151d;
    box-shadow: 0 16px 38px rgba(38, 30, 54, .14);
    transition: transform .22s ease, box-shadow .22s ease;
}
.prototype-v2 .proto-way--feature .proto-way-image {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.prototype-v2 .proto-way--feature .proto-way-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
    transition: transform .35s ease;
}
.prototype-v2 .proto-way--feature::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    content: "";
    background: linear-gradient(90deg, rgba(13, 11, 19, .94) 0%, rgba(13, 11, 19, .78) 38%, rgba(13, 11, 19, .1) 100%), linear-gradient(0deg, rgba(13, 11, 19, .32), transparent 58%);
    pointer-events: none;
}
.prototype-v2 .proto-way--feature .proto-way-copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    width: min(78%, 520px);
    padding: clamp(24px, 3vw, 40px);
    color: #fff;
}
.prototype-v2 .proto-way--feature .proto-way-feature-eyebrow { color: #fff !important; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.prototype-v2 .proto-way--feature .proto-way-copy h3 { max-width: 17ch; margin: 0; color: #fff; font-size: clamp(25px, 2.35vw, 36px); font-weight: 750; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.prototype-v2 .proto-way--feature .proto-way-copy p { max-width: 40ch; margin: 0; color: rgba(255, 255, 255, .94); font-size: clamp(14px, 1.15vw, 16px); line-height: 1.5; }
.prototype-v2 .proto-way--feature .proto-way-feature-action,
.prototype-v2 .proto-way--feature .proto-way-feature-action span { color: #fff !important; }
.prototype-v2 .proto-way--feature .proto-way-feature-action { display: inline-flex; width: fit-content; align-items: center; gap: 10px; margin-top: 3px; padding: 11px 15px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(20, 17, 28, .58); font-size: 13px; font-weight: 750; backdrop-filter: blur(5px); }
.prototype-v2 .proto-way--feature:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(38, 30, 54, .2); }
.prototype-v2 .proto-way--feature:hover .proto-way-image img { transform: scale(1.025); }
.prototype-v2 .proto-way--feature:focus-visible { outline: 3px solid #9871d1; outline-offset: 4px; }
.prototype-v2 .proto-way--feature:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 24px) / 2); justify-self: center; }
@media (max-width: 820px) {
    .prototype-v2 .proto-v2-ways { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .prototype-v2 .proto-way--feature { min-height: 300px; aspect-ratio: 16 / 9; }
    .prototype-v2 .proto-way--feature:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
}
@media (max-width: 480px) {
    .prototype-v2 .proto-way--feature { min-height: 340px; aspect-ratio: auto; }
    .prototype-v2 .proto-way--feature .proto-way-copy { width: 100%; gap: 11px; padding: 24px; }
    .prototype-v2 .proto-way--feature .proto-way-copy h3 { font-size: clamp(24px, 7vw, 31px); }
    .prototype-v2 .proto-way--feature .proto-way-copy p { font-size: 14px; }
    .prototype-v2 .proto-way--feature::after { background: linear-gradient(90deg, rgba(13, 11, 19, .88), rgba(13, 11, 19, .3)), linear-gradient(0deg, rgba(13, 11, 19, .55), transparent 80%); }
}
@media (prefers-reduced-motion: reduce) {
    .prototype-v2 .proto-way--feature,
    .prototype-v2 .proto-way--feature .proto-way-image img { transition: none; }
}

/* En Herramientas, las opciones principales ocupan el centro de la página. */
.prototype-v2 .tools-page { padding-top: 0; }
.prototype-v2 .tools-overview { margin: 0 0 clamp(58px, 7vw, 92px); }
.prototype-v2 .tools-overview-copy { max-width: 850px; margin: 0 0 clamp(24px, 3vw, 38px); }
.prototype-v2 .tools-overview-copy .eyebrow { margin: 0 0 12px; color: var(--proto-blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.prototype-v2 .tools-overview-copy h1 { max-width: 19ch; margin: 0; color: var(--proto-ink); font-size: clamp(38px, 5.3vw, 66px); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.prototype-v2 .tools-overview-copy > p:not(.eyebrow):not(.proto-v2-status) { max-width: 660px; margin: 15px 0 0; color: var(--proto-muted); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; }
.prototype-v2 .tools-overview .proto-v2-ways { margin-top: 0; }
@media (max-width: 620px) {
    .prototype-v2 .tools-page { padding-top: 0; }
    .prototype-v2 .tools-overview-copy { margin-bottom: 24px; }
    .prototype-v2 .tools-overview-copy h1 { font-size: clamp(36px, 10vw, 50px); }
    .prototype-v2 .tools-overview-copy > p:not(.eyebrow):not(.proto-v2-status) { font-size: 15px; }
}

/* Página de Herramientas: recorrido editorial, datos reales y previews funcionales. */
.prototype-v2 .tools-hub-page {
    display: grid;
    gap: clamp(42px, 5.4vw, 76px);
    padding-top: clamp(24px, 3.2vw, 48px);
    padding-bottom: clamp(42px, 5.5vw, 76px);
}
.prototype-v2 .tools-hub-page,
.prototype-v2 .tools-hub-page * { min-width: 0; }
.prototype-v2 .tools-hub-page img { display: block; max-width: 100%; }
.prototype-v2 .tools-hub-eyebrow {
    margin: 0 0 14px;
    color: var(--proto-blue);
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .15em;
    line-height: 1.4;
}
.prototype-v2 .tools-hub-hero {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--proto-line);
    border-radius: 24px;
    background: var(--proto-card);
    box-shadow: 0 18px 48px rgba(38, 30, 54, .08);
}
.prototype-v2 .tools-hub-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(30px, 5vw, 70px);
}
.prototype-v2 .tools-hub-hero h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--proto-ink);
    font-size: clamp(42px, 5.3vw, 68px);
    font-weight: 780;
    line-height: .99;
    letter-spacing: -.055em;
    text-wrap: balance;
}
.prototype-v2 .tools-hub-hero-copy > p:not(.tools-hub-eyebrow):not(.proto-v2-status) {
    max-width: 46ch;
    margin: 18px 0 0;
    color: var(--proto-muted);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65;
}
.prototype-v2 .tools-hub-hero-photo,
.prototype-v2 .tools-hub-smart-photo,
.prototype-v2 .tools-hub-editorial-photo,
.prototype-v2 .tools-hub-manual-photo { position: relative; display: block; overflow: hidden; }
.prototype-v2 .tools-hub-hero-photo { min-height: 420px; background: #302b39; }
.prototype-v2 .tools-hub-hero-photo img,
.prototype-v2 .tools-hub-smart-photo img,
.prototype-v2 .tools-hub-editorial-photo img,
.prototype-v2 .tools-hub-manual-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.prototype-v2 .tools-hub-hero-photo img { position: absolute; inset: 0; object-position: center 52%; }
.prototype-v2 .tools-hub-smart-photo:hover img,
.prototype-v2 .tools-hub-editorial-photo:hover img,
.prototype-v2 .tools-hub-manual-photo:hover img { transform: scale(1.025); }

.prototype-v2 .tools-hub-journey {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 28px clamp(28px, 5vw, 74px);
    padding: 24px 0;
    border-top: 1px solid var(--proto-line);
    border-bottom: 1px solid var(--proto-line);
}
.prototype-v2 .tools-hub-journey-intro .tools-hub-eyebrow { margin-bottom: 10px; }
.prototype-v2 .tools-hub-journey-intro h2 {
    max-width: 19ch;
    margin: 0;
    color: var(--proto-ink);
    font-size: clamp(23px, 2.3vw, 31px);
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.prototype-v2 .tools-hub-journey-intro > p:last-child { max-width: 46ch; margin: 9px 0 0; color: var(--proto-muted); font-size: 13px; line-height: 1.6; }
.prototype-v2 .tools-hub-journey-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.prototype-v2 .tools-hub-journey-steps li { display: flex; align-items: center; gap: 10px; color: var(--proto-ink); }
.prototype-v2 .tools-hub-journey-steps li > span { color: var(--proto-blue); font-size: 10px; font-weight: 820; letter-spacing: .05em; }
.prototype-v2 .tools-hub-journey-steps li > strong { font-size: 12px; font-weight: 720; }

.prototype-v2 .tools-hub-smart {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    min-height: 450px;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(125deg, #282235, #382b4b);
    box-shadow: 0 20px 52px rgba(38, 30, 54, .13);
}
.prototype-v2 .tools-hub-smart-photo { min-height: 450px; background: #201d28; }
.prototype-v2 .tools-hub-smart-photo img { position: absolute; inset: 0; object-position: center 44%; }
.prototype-v2 .tools-hub-smart-copy,
.prototype-v2 .tools-hub-manual-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(28px, 4.5vw, 62px);
}
.prototype-v2 .tools-hub-smart-copy .tools-hub-eyebrow,
.prototype-v2 .tools-hub-manual-copy .tools-hub-eyebrow { color: #cfb6f5; }
.prototype-v2 .tools-hub-smart-copy h2,
.prototype-v2 .tools-hub-manual-copy h2,
.prototype-v2 .tools-hub-saved-copy h2 {
    max-width: 16ch;
    margin: 0;
    color: inherit;
    font-size: clamp(31px, 3.5vw, 47px);
    font-weight: 760;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.prototype-v2 .tools-hub-smart-copy > p:not(.tools-hub-eyebrow),
.prototype-v2 .tools-hub-manual-copy > p:not(.tools-hub-eyebrow),
.prototype-v2 .tools-hub-saved-copy > p:not(.tools-hub-eyebrow) {
    max-width: 50ch;
    margin: 15px 0 0;
    color: var(--proto-muted);
    font-size: 14px;
    line-height: 1.7;
}
.prototype-v2 .tools-hub-smart-copy > p:not(.tools-hub-eyebrow) { color: rgba(255,255,255,.76); }
.prototype-v2 .tools-hub-smart-points {
    display: grid;
    gap: 10px;
    margin: 20px 0 24px;
    padding: 0;
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 650;
    list-style: none;
}
.prototype-v2 .tools-hub-smart-points li { display: flex; align-items: center; gap: 10px; }
.prototype-v2 .tools-hub-smart-points li > span { color: #cfb6f5; font-size: 15px; font-weight: 900; }
.prototype-v2 .tools-hub-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 19px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 780;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.prototype-v2 .tools-hub-button:hover { transform: translateY(-2px); }
.prototype-v2 .tools-hub-button:focus-visible,
.prototype-v2 .tools-hub-inline-link:focus-visible { outline: 3px solid var(--proto-blue); outline-offset: 4px; }
.prototype-v2 .tools-hub-button--primary { color: #fff; background: #7655b5; box-shadow: 0 8px 20px rgba(79, 53, 122, .19); }
.prototype-v2 .tools-hub-button--primary:hover { background: #604393; box-shadow: 0 11px 24px rgba(79, 53, 122, .23); }
.prototype-v2 .tools-hub-button--light { color: #302940; background: #fff; }
.prototype-v2 .tools-hub-button--light:hover { background: #f2edf9; }

.prototype-v2 .tools-hub-section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
    align-items: end;
    gap: 12px 48px;
    margin-bottom: 24px;
}
.prototype-v2 .tools-hub-section-intro .tools-hub-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.prototype-v2 .tools-hub-section-intro h2 {
    max-width: 17ch;
    margin: 0;
    color: var(--proto-ink);
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.04;
    letter-spacing: -.05em;
    text-wrap: balance;
}
.prototype-v2 .tools-hub-section-intro > p:last-child { max-width: 42ch; margin: 0; color: var(--proto-muted); font-size: 14px; line-height: 1.65; }
.prototype-v2 .tools-hub-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    min-height: 380px;
    overflow: hidden;
    border-top: 1px solid var(--proto-line);
    border-bottom: 1px solid var(--proto-line);
}
.prototype-v2 .tools-hub-editorial-photo { min-height: 380px; background: #322d35; }
.prototype-v2 .tools-hub-editorial-photo img { position: absolute; inset: 0; object-position: center 52%; }
.prototype-v2 .tools-hub-editorial-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(30px, 4.3vw, 58px);
}
.prototype-v2 .tools-hub-editorial-copy h3 {
    max-width: 15ch;
    margin: 0;
    color: var(--proto-ink);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 760;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.prototype-v2 .tools-hub-editorial-copy > p:not(.tools-hub-eyebrow) { max-width: 45ch; margin: 14px 0 0; color: var(--proto-muted); font-size: 14px; line-height: 1.7; }
.prototype-v2 .tools-hub-spec-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 17px;
    margin: 19px 0 0;
    padding: 0;
    color: var(--proto-muted);
    font-size: 11px;
    font-weight: 680;
    list-style: none;
}
.prototype-v2 .tools-hub-spec-points li::before { content: "•"; margin-right: 7px; color: var(--proto-blue); }
.prototype-v2 .tools-hub-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    color: var(--proto-blue);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.prototype-v2 .tools-hub-inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.prototype-v2 .tools-hub-compare {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: clamp(22px, 4vw, 54px);
    padding: clamp(22px, 3.3vw, 42px);
    border-radius: 20px;
    background: var(--proto-blue-soft);
}
.prototype-v2 .tools-hub-compare-copy { padding: 0; }
.prototype-v2 .tools-hub-compare-copy h3 { font-size: clamp(29px, 3vw, 40px); }
.prototype-v2 .tools-hub-compare-visual {
    overflow: hidden;
    border: 1px solid var(--proto-line);
    border-radius: 14px;
    color: var(--proto-text);
    background: var(--proto-card);
    box-shadow: 0 12px 30px rgba(38, 30, 54, .07);
}
.prototype-v2 .tools-hub-preview-bar {
    display: flex;
    min-height: 43px;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    border-bottom: 1px solid var(--proto-line);
    color: var(--proto-muted);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .03em;
}
.prototype-v2 .tools-hub-preview-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #8d6cc4; }
.prototype-v2 .tools-hub-preview-menu { margin-left: auto; color: var(--proto-muted); letter-spacing: .13em; }
.prototype-v2 .tools-hub-compare-table-wrap { overflow-x: auto; }
.prototype-v2 .tools-hub-compare-table { width: 100%; min-width: 450px; border-collapse: collapse; table-layout: fixed; }
.prototype-v2 .tools-hub-compare-table th,
.prototype-v2 .tools-hub-compare-table td {
    padding: 14px 13px;
    border-bottom: 1px solid var(--proto-line);
    text-align: left;
    vertical-align: middle;
}
.prototype-v2 .tools-hub-compare-table thead th { color: var(--proto-muted); font-size: 10px; font-weight: 760; }
.prototype-v2 .tools-hub-compare-table thead th:first-child,
.prototype-v2 .tools-hub-compare-table tbody th { width: 30%; }
.prototype-v2 .tools-hub-compare-table tbody th { color: var(--proto-ink); font-size: 11px; font-weight: 730; }
.prototype-v2 .tools-hub-compare-table tbody td { color: var(--proto-muted); font-size: 11px; }
.prototype-v2 .tools-hub-preview-footnote { margin: 0; padding: 12px 15px; color: var(--proto-muted); font-size: 10px; line-height: 1.5; }

.prototype-v2 .tools-hub-manual {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    min-height: 420px;
    overflow: hidden;
    border-radius: 23px;
    background: var(--proto-card);
    box-shadow: 0 14px 38px rgba(38, 30, 54, .07);
}
.prototype-v2 .tools-hub-manual-photo { min-height: 420px; background: #28232f; }
.prototype-v2 .tools-hub-manual-photo img { position: absolute; inset: 0; object-position: center 48%; }
.prototype-v2 .tools-hub-photo-caption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    background: rgba(25, 22, 31, .76);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    backdrop-filter: blur(7px);
}
.prototype-v2 .tools-hub-manual-copy { padding: clamp(27px, 4vw, 54px); }
.prototype-v2 .tools-hub-build-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 20px 0 24px;
    padding: 0;
    list-style: none;
}
.prototype-v2 .tools-hub-build-steps li {
    padding: 8px 10px;
    border: 1px solid var(--proto-line);
    border-radius: 999px;
    color: var(--proto-muted);
    background: var(--proto-paper);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
}

.prototype-v2 .tools-hub-saved {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(22px, 3.3vw, 42px);
    border: 1px solid var(--proto-line);
    border-radius: 21px;
    background: var(--proto-card);
}
.prototype-v2 .tools-hub-saved-preview {
    overflow: hidden;
    border: 1px solid var(--proto-line);
    border-radius: 14px;
    background: var(--proto-paper);
}
.prototype-v2 .tools-hub-preview-account { margin-left: auto; color: var(--proto-blue); font-size: 9px; letter-spacing: .09em; }
.prototype-v2 .tools-hub-saved-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 225px;
    padding: 28px 24px;
    text-align: center;
}
.prototype-v2 .tools-hub-saved-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--proto-blue); background: var(--proto-blue-soft); }
.prototype-v2 .tools-hub-saved-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prototype-v2 .tools-hub-saved-empty > strong { color: var(--proto-ink); font-size: 13px; font-weight: 730; }
.prototype-v2 .tools-hub-saved-empty > span:not(.tools-hub-saved-icon) { color: var(--proto-muted); font-size: 11px; line-height: 1.5; }
.prototype-v2 .tools-hub-saved-preview-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--proto-blue); font-size: 11px; font-weight: 760; }
.prototype-v2 .tools-hub-saved-copy { padding: 14px 0; }
.prototype-v2 .tools-hub-saved-copy h2 { color: var(--proto-ink); }
.prototype-v2 .tools-hub-benefits {
    display: grid;
    grid-template-columns: minmax(140px, .65fr) minmax(0, 2.35fr);
    align-items: center;
    gap: 22px;
    padding: 22px 0;
    border-top: 1px solid var(--proto-line);
    border-bottom: 1px solid var(--proto-line);
}
.prototype-v2 .tools-hub-benefits-title { margin: 0; color: var(--proto-ink); font-size: 13px; font-weight: 760; }
.prototype-v2 .tools-hub-benefits ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.prototype-v2 .tools-hub-benefits li { display: grid; gap: 4px; }
.prototype-v2 .tools-hub-benefits li strong { color: var(--proto-ink); font-size: 11px; font-weight: 760; }
.prototype-v2 .tools-hub-benefits li span { color: var(--proto-muted); font-size: 10px; line-height: 1.45; }

@media (max-width: 1020px) {
    .prototype-v2 .tools-hub-hero { min-height: 380px; }
    .prototype-v2 .tools-hub-hero-photo { min-height: 380px; }
    .prototype-v2 .tools-hub-journey { grid-template-columns: 1fr; gap: 20px; }
    .prototype-v2 .tools-hub-smart { min-height: 410px; }
    .prototype-v2 .tools-hub-smart-photo { min-height: 410px; }
    .prototype-v2 .tools-hub-compare { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
    .prototype-v2 .tools-hub-manual { min-height: 390px; }
    .prototype-v2 .tools-hub-manual-photo { min-height: 390px; }
}
@media (max-width: 820px) {
    .prototype-v2 .tools-hub-page { gap: 52px; padding-top: 24px; padding-bottom: 50px; }
    .prototype-v2 .tools-hub-hero { grid-template-columns: 1fr; }
    .prototype-v2 .tools-hub-hero-copy { padding: clamp(28px, 7vw, 48px); }
    .prototype-v2 .tools-hub-hero h1 { max-width: 14ch; }
    .prototype-v2 .tools-hub-hero-photo { min-height: 0; height: clamp(280px, 52vw, 410px); }
    .prototype-v2 .tools-hub-smart { grid-template-columns: 1fr 1fr; }
    .prototype-v2 .tools-hub-smart-photo { min-height: 400px; }
    .prototype-v2 .tools-hub-smart-copy { padding: clamp(24px, 4vw, 38px); }
    .prototype-v2 .tools-hub-section-intro { grid-template-columns: 1fr; gap: 11px; }
    .prototype-v2 .tools-hub-section-intro .tools-hub-eyebrow { grid-column: auto; }
    .prototype-v2 .tools-hub-section-intro > p:last-child { max-width: 55ch; }
    .prototype-v2 .tools-hub-editorial { min-height: 330px; }
    .prototype-v2 .tools-hub-editorial-photo { min-height: 330px; }
    .prototype-v2 .tools-hub-editorial-copy { padding: 27px; }
    .prototype-v2 .tools-hub-compare { grid-template-columns: 1fr; gap: 22px; }
    .prototype-v2 .tools-hub-compare-copy { padding: 0; }
    .prototype-v2 .tools-hub-manual { grid-template-columns: 1fr 1fr; min-height: 360px; }
    .prototype-v2 .tools-hub-manual-photo { min-height: 360px; }
    .prototype-v2 .tools-hub-manual-copy { padding: 26px; }
    .prototype-v2 .tools-hub-saved { gap: 27px; padding: 24px; }
}
@media (max-width: 620px) {
    .prototype-v2 .tools-hub-page { gap: 42px; padding-top: 18px; padding-bottom: 40px; }
    .prototype-v2 .tools-hub-hero { border-radius: 19px; }
    .prototype-v2 .tools-hub-hero h1 { font-size: clamp(39px, 10.8vw, 52px); }
    .prototype-v2 .tools-hub-hero-copy > p:not(.tools-hub-eyebrow):not(.proto-v2-status) { font-size: 14px; }
    .prototype-v2 .tools-hub-hero-photo { height: clamp(235px, 62vw, 335px); }
    .prototype-v2 .tools-hub-journey { gap: 18px; padding: 20px 0; }
    .prototype-v2 .tools-hub-journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .prototype-v2 .tools-hub-journey-steps li { gap: 8px; }
    .prototype-v2 .tools-hub-journey-steps li > strong { font-size: 11px; }
    .prototype-v2 .tools-hub-smart { grid-template-columns: 1fr; border-radius: 19px; }
    .prototype-v2 .tools-hub-smart-photo { min-height: 0; height: clamp(280px, 76vw, 390px); }
    .prototype-v2 .tools-hub-smart-copy { padding: 27px; }
    .prototype-v2 .tools-hub-smart-copy h2,
    .prototype-v2 .tools-hub-manual-copy h2,
    .prototype-v2 .tools-hub-saved-copy h2 { font-size: clamp(31px, 8vw, 39px); }
    .prototype-v2 .tools-hub-section-intro h2 { font-size: clamp(31px, 8vw, 42px); }
    .prototype-v2 .tools-hub-editorial { grid-template-columns: 1fr; }
    .prototype-v2 .tools-hub-editorial-photo { min-height: 0; height: clamp(230px, 64vw, 340px); }
    .prototype-v2 .tools-hub-editorial-copy { padding: 26px 0 28px; }
    .prototype-v2 .tools-hub-compare { padding: 20px; border-radius: 16px; }
    .prototype-v2 .tools-hub-compare-table { min-width: 440px; }
    .prototype-v2 .tools-hub-compare-table th,
    .prototype-v2 .tools-hub-compare-table td { padding: 12px 10px; }
    .prototype-v2 .tools-hub-manual { grid-template-columns: 1fr; }
    .prototype-v2 .tools-hub-manual-photo { min-height: 0; height: clamp(240px, 68vw, 370px); }
    .prototype-v2 .tools-hub-manual-copy { padding: 27px; }
    .prototype-v2 .tools-hub-build-steps { gap: 7px; }
    .prototype-v2 .tools-hub-build-steps li { font-size: 9px; }
    .prototype-v2 .tools-hub-saved { grid-template-columns: 1fr; gap: 20px; padding: 18px; border-radius: 17px; }
    .prototype-v2 .tools-hub-saved-empty { min-height: 195px; padding: 22px 16px; }
    .prototype-v2 .tools-hub-saved-copy { padding: 0 5px 5px; }
    .prototype-v2 .tools-hub-benefits { grid-template-columns: 1fr; gap: 14px; padding: 19px 0; }
    .prototype-v2 .tools-hub-benefits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .prototype-v2 .tools-hub-button,
    .prototype-v2 .tools-hub-hero-photo img,
    .prototype-v2 .tools-hub-smart-photo img,
    .prototype-v2 .tools-hub-editorial-photo img,
    .prototype-v2 .tools-hub-manual-photo img { transition: none; }
}