:root{--ci-navy:#0a2534;--ci-blue:#075b82;--ci-teal:#007c78;--ci-line:#d9e4e8;--ci-muted:#58707d;--ci-paper:#f3f7f8}
.ci-hero{background:var(--ci-navy);color:#fff;padding:76px 0 64px;overflow:hidden}.ci-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.ci-kicker{font:500 11px 'Roboto Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:#88ddd1}.ci-hero h1{font-size:clamp(36px,4.4vw,62px);line-height:1.09;letter-spacing:-.05em;margin:25px 0}.ci-hero h1 em{font-style:normal;color:#8ce1d4}.ci-lead{font-size:16px;line-height:1.8;color:#c4d6df;max-width:520px}.ci-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 19px}.ci-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 20px;border:1px solid transparent;border-radius:5px;background:#007e7a;color:#fff;font:700 12px Manrope,sans-serif;text-decoration:none;cursor:pointer}.ci-btn:hover{background:#00645f;color:white}.ci-btn.secondary{background:transparent;border-color:#587280;color:inherit}.ci-btn.light{background:#fff;color:var(--ci-navy);border-color:var(--ci-line)}.ci-btn:disabled{cursor:not-allowed;opacity:.5}.ci-note{font-size:11px;color:#afc5d0}.ci-preview{background:#f4f8fa;color:var(--ci-navy);border:1px solid #5b7785;border-radius:9px;box-shadow:0 28px 60px #0004;transform:rotate(-2deg);overflow:hidden}.ci-preview-top{padding:15px 18px;background:#fff;border-bottom:1px solid var(--ci-line);display:flex;justify-content:space-between;font-size:10px}.ci-preview-body{display:grid;grid-template-columns:100px 1fr 92px;min-height:275px}.ci-preview-side{background:white;padding:15px 10px;font-size:9px}.ci-preview-side b{display:block;margin-bottom:20px}.ci-preview-side span{display:block;padding:12px 5px;border-bottom:1px solid var(--ci-line)}.ci-mini-canvas{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px;gap:10px;background-image:radial-gradient(#bbced5 1px,transparent 1px);background-size:15px 15px}.ci-mini-node{border:1px solid #7ba9b5;background:white;padding:14px 12px;min-width:138px;text-align:center;font-size:10px;border-radius:5px;box-shadow:0 4px 10px #0925340b}.ci-mini-line{width:1px;height:16px;background:#11847e}.ci-preview-bottom{padding:12px 18px;border-top:1px solid var(--ci-line);font-size:9px;background:#fff;color:var(--ci-teal)}.ci-strip{padding:23px 0;border-bottom:1px solid var(--ci-line);background:#edf5f4}.ci-strip .container{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#315953}.ci-section{padding:75px 0}.ci-section h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1.2;max-width:730px}.ci-section-intro{color:var(--ci-muted);max-width:700px;line-height:1.8}.ci-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.ci-card{border:1px solid var(--ci-line);padding:28px;border-radius:7px;background:#fff}.ci-card small{font:11px 'Roboto Mono',monospace;color:var(--ci-teal)}.ci-card h3{font-size:20px;margin:25px 0 12px}.ci-card p{font-size:13px;line-height:1.8;color:var(--ci-muted)}.ci-scope{background:var(--ci-paper)}.ci-scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.ci-list{padding:0;list-style:none}.ci-list li{padding:16px 0;border-bottom:1px solid var(--ci-line);font-size:13px}.ci-list li:before{content:'↗';color:var(--ci-teal);margin-right:14px}.ci-faq details{border-bottom:1px solid var(--ci-line);padding:20px 0}.ci-faq summary{font-weight:700;cursor:pointer}.ci-faq p{font-size:14px;color:var(--ci-muted);max-width:800px;line-height:1.8}.ci-promo{background:#e7f2f2;padding:48px 0;border-block:1px solid #cddfdf}.ci-promo .container{display:flex;align-items:center;justify-content:space-between;gap:35px}.ci-promo h2{font-size:32px;margin:10px 0}.ci-promo p{max-width:650px;color:var(--ci-muted);font-size:14px}.ci-promo .ci-btn{flex-shrink:0}.ci-footer-link{color:#8ce1d4!important}
.ci-section .ci-kicker,.ci-promo .ci-kicker{color:#00736d}
.ci-property-visual img{max-width:100%;max-height:100%;object-fit:contain}.ci-tech-details{border-top:1px solid var(--ci-line);padding:13px 0;font-size:11px}.ci-tech-details summary{cursor:pointer;font-weight:700}.ci-tech-details a{color:var(--ci-teal);overflow-wrap:anywhere}.ci-field{font-size:11px;display:block;margin:12px 0}.ci-field select{width:100%;margin-top:8px;padding:9px;border:1px solid var(--ci-line);border-radius:4px;background:white}.ci-recipe{font-size:10px;color:var(--ci-muted)}.ci-recipe select{display:block;padding:7px;border:1px solid var(--ci-line);border-radius:4px;background:white;color:var(--ci-navy)}.ci-toolbar{align-items:center}.ci-node strong{overflow-wrap:anywhere}.ci-platform-story a{color:var(--ci-teal);font-size:12px;font-weight:700}
/* Editor: catálogo izquierdo, lienzo central, propiedades derechas. */
.ci-app{margin:0;background:#eef3f5;color:var(--ci-navy);font:13px Manrope,sans-serif}.ci-app *{box-sizing:border-box}.ci-app button,.ci-app input{font:inherit}.ci-app a{color:inherit}.ci-app button:focus-visible,.ci-app a:focus-visible,.ci-app input:focus-visible,.ci-app summary:focus-visible{outline:3px solid #07877f;outline-offset:3px}.ci-app-header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:var(--ci-navy);color:#fff;gap:20px}.ci-app-brand{display:flex;align-items:center;gap:20px;text-decoration:none}.ci-app-brand img{width:112px;height:49px;object-fit:contain}.ci-app-brand strong{border-left:1px solid #54707d;padding-left:20px;font-size:14px}.ci-badge{background:#e3f5ef;color:#18715b;border:1px solid #bcded1;border-radius:30px;padding:5px 10px;font:10px 'Roboto Mono',monospace;white-space:nowrap}.ci-app-header .ci-badge{background:#264653;color:#9de1d7;border-color:#416575}.ci-app-subbar{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 25px;background:white;border-bottom:1px solid var(--ci-line)}.ci-app-subbar h1{font-size:16px;margin:0}.ci-app-subbar p{font-size:11px;margin:5px 0 0;color:var(--ci-muted)}.ci-toolbar{display:flex;gap:8px;flex-wrap:wrap}.ci-toolbar button{padding:9px 12px}.ci-workspace{display:grid;grid-template-columns:260px minmax(350px,1fr) 295px;min-height:630px;height:calc(100vh - 170px)}.ci-panel{background:#fff;overflow:auto}.ci-catalog{border-right:1px solid var(--ci-line)}.ci-properties{border-left:1px solid var(--ci-line)}.ci-panel-heading{padding:22px 20px 16px}.ci-panel-heading h2{font-size:14px;margin:0 0 7px}.ci-panel-heading p{font-size:11px;color:var(--ci-muted);margin:0;line-height:1.6}.ci-search{width:calc(100% - 32px);margin:0 16px 18px;padding:11px 12px;border:1px solid #cbd9df;border-radius:5px;background:#f8fafb}.ci-category{border-top:1px solid #e7edef}.ci-category summary{padding:15px 18px;font-size:12px;font-weight:700;cursor:pointer}.ci-category summary small{float:right;color:var(--ci-muted);font-weight:400}.ci-product{display:flex;align-items:center;gap:10px;padding:10px 12px;width:calc(100% - 20px);margin:0 10px 7px;border:1px solid transparent;background:white;text-align:left;border-radius:5px;cursor:pointer;color:var(--ci-navy)}.ci-product:hover,.ci-product[aria-pressed=true]{background:#eff7f7;border-color:#a4ceca}.ci-product.locked{background:#f7f8f9}.ci-product .ci-symbol{width:35px;height:35px;flex-shrink:0;background:#e9f1f4;display:grid;place-items:center;border-radius:5px;font-size:20px;color:#2b6c80}.ci-product strong{display:block;font-size:11px;line-height:1.5}.ci-product small{display:block;font-size:10px;color:var(--ci-muted);margin-top:2px}.ci-lock{margin-left:auto;color:#6e7e87;font-size:10px}.ci-center{display:flex;flex-direction:column;min-width:0;overflow:hidden}.ci-canvas-top{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;color:var(--ci-muted);font-size:11px}.ci-canvas-viewport{overflow:auto;flex:1;position:relative}.ci-canvas{position:relative;min-width:560px;min-height:460px;width:100%;height:100%;background-image:radial-gradient(#bbccd3 1px,transparent 1px);background-size:20px 20px;overflow:hidden}.ci-canvas-note{position:absolute;bottom:20px;left:20px;right:20px;font-size:10px;color:#607785;text-align:center;pointer-events:none}.ci-empty{position:absolute;inset:80px 50px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ci-muted);pointer-events:none;line-height:1.8}.ci-empty[hidden]{display:none}.ci-node{position:absolute;width:166px;min-height:95px;border:1px solid #b5cdd5;border-radius:7px;background:#fff;padding:13px;text-align:left;box-shadow:0 4px 12px #153f5110;cursor:grab;color:var(--ci-navy);touch-action:none}.ci-node:active{cursor:grabbing}.ci-node[aria-pressed=true]{border:2px solid var(--ci-teal);box-shadow:0 0 0 4px #00847712}.ci-node strong{display:block;font-size:11px;margin:7px 0}.ci-node small{font-size:10px;color:var(--ci-muted)}.ci-node .ci-node-code{font:9px 'Roboto Mono',monospace;color:var(--ci-teal)}.ci-node span.quantity{float:right;background:#e9f2f4;padding:3px 6px;border-radius:4px;font-size:10px}.ci-canvas-footer{padding:14px 20px;border-top:1px solid var(--ci-line);background:white;display:flex;justify-content:space-between;font-size:11px;gap:12px}.ci-property-content{padding:0 20px 22px}.ci-property-visual{height:100px;display:grid;place-items:center;background:linear-gradient(135deg,#edf4f6,#f8fafb);border:1px solid var(--ci-line);border-radius:6px;color:#397a8a;font-size:45px;margin-bottom:20px}.ci-property-content h3{font-size:18px;margin:12px 0}.ci-property-content p{font-size:12px;line-height:1.8;color:var(--ci-muted)}.ci-specs{margin:22px 0}.ci-specs div{padding:12px 0;border-bottom:1px solid #e7edef}.ci-specs dt{font-size:10px;color:var(--ci-muted);margin-bottom:5px}.ci-specs dd{margin:0;font-size:12px;font-weight:600}.ci-property-content .ci-btn{width:100%;margin-top:10px}.ci-warning{padding:12px;background:#fff7e9;border:1px solid #efddbc;border-radius:5px;font-size:11px!important;color:#79623b!important}.ci-quantity{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px}.ci-quantity input{width:64px;padding:8px;border:1px solid var(--ci-line);border-radius:4px}.ci-app-status{padding:11px 22px;background:#e5efef;color:#385c63;font-size:11px;min-height:40px}.ci-remove{color:#9c4242!important}.ci-tabs{display:none}.ci-app .ci-count{font-family:'Roboto Mono',monospace}.ci-app-noscript{padding:30px;background:#fff5d7;color:#6c471b}.ci-mobile-hint{display:none}
@media(max-width:1100px){.ci-workspace{grid-template-columns:225px minmax(300px,1fr) 250px}.ci-hero-grid{gap:30px}.ci-preview-body{grid-template-columns:80px 1fr 75px}.ci-preview-side{padding:10px 6px}.ci-mini-node{min-width:110px}.ci-app-brand strong{font-size:12px}}
@media(max-width:800px){.ci-hero-grid,.ci-scope-grid{grid-template-columns:1fr}.ci-hero{padding:45px 0}.ci-preview{transform:none}.ci-cards{grid-template-columns:1fr}.ci-strip .container{flex-direction:column;gap:10px}.ci-section{padding:45px 0}.ci-promo .container{flex-direction:column;align-items:flex-start}.ci-app-header{height:auto;min-height:65px;padding:10px 15px}.ci-app-brand{gap:10px}.ci-app-brand strong{padding-left:10px;max-width:150px}.ci-app-header>a{font-size:11px}.ci-app-header .ci-badge{display:none}.ci-app-subbar{align-items:flex-start;flex-direction:column;padding:15px}.ci-tabs{display:flex;background:white;border-bottom:1px solid var(--ci-line)}.ci-tabs button{flex:1;padding:13px 8px;border:0;background:#fff;color:var(--ci-muted);cursor:pointer}.ci-tabs button[aria-selected=true]{border-bottom:3px solid var(--ci-teal);color:var(--ci-teal);font-weight:700}.ci-workspace{display:block;height:auto;min-height:590px}.ci-workspace>[data-panel]{display:none}.ci-workspace>[data-panel].is-active{display:flex}.ci-workspace>.ci-panel.is-active{display:block}.ci-center{height:600px}.ci-catalog,.ci-properties{min-height:590px}.ci-panel-heading{padding-top:20px}.ci-property-content{max-width:500px}.ci-canvas-footer{font-size:10px}.ci-mobile-hint{display:block;font-size:11px;color:var(--ci-muted);padding:0 18px 12px}.ci-canvas{min-width:560px}}
.ci-product .ci-symbol{width:57px;height:47px;background:#f4f7f8}.ci-catalog-art{width:57px;height:47px;object-fit:contain;pointer-events:none}.ci-node-art{display:block;height:79px;text-align:center;margin:4px 0}.ci-canvas-art{width:134px;height:79px;object-fit:contain;pointer-events:none}.ci-node{min-height:158px}.ci-node strong{margin:3px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ci-node small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ci-canvas{min-height:595px}.ci-property-content .ci-property-visual{height:165px;background:#f7fafb}.ci-detail-art{width:100%;height:155px;object-fit:contain}.ci-property-content .ci-art-caption{font-size:10px;margin:-13px 0 18px;color:#617b88}

/* Scrollable design surface and proportional visual sizing. */
.ci-canvas-viewport{min-height:0;overflow:scroll;overscroll-behavior:contain;scrollbar-gutter:stable}.ci-canvas{flex:none;min-width:1600px;min-height:1100px}.ci-layout-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 15px;border-bottom:1px solid var(--ci-line);background:#f6fafb;font-size:10px;color:var(--ci-muted)}.ci-layout-tools button{padding:6px 9px;font-size:10px;white-space:nowrap}.ci-node{min-height:0;padding:10px;overflow:hidden}.ci-node-art{height:var(--art-height,82px);margin:3px 0}.ci-canvas-art{width:100%;height:100%;max-width:100%;object-fit:contain}.ci-node-code{display:block;max-width:calc(100% - 35px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ci-node span.quantity{position:absolute;right:8px;top:8px}.ci-resize-handle{position:absolute;right:0;bottom:0;width:25px;height:23px;display:grid;place-items:center;background:#e2f1ef;border-radius:6px 0 0 0;color:#007e7a;cursor:nwse-resize;touch-action:none}.ci-node small{padding-right:14px}.ci-size-control{margin:18px 0;padding:12px;background:#eff7f6;border-radius:5px}.ci-size-control label{display:flex;justify-content:space-between;font-size:12px}.ci-size-control input{width:100%;margin:12px 0;accent-color:#007e7a}.ci-size-control small{display:block;font-size:10px;color:var(--ci-muted)}