/* crescō · base + components · v1.0 */

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

html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01","cv11"; }

body { transition: background 0.3s; }

.view { display: none; }

.view.active { display: block; }

body[data-view="home"] { overflow: hidden; background: var(--bg); }

body[data-view="identidad"], body[data-view="voz"], body[data-view="sistema"], body[data-view="aplicacion"], body[data-view="casos"], body[data-view="recursos"] { overflow: auto; background: var(--bg); }

.view-home .page-hero { width: 100vw; height: 100vh; background: var(--bg); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; position: relative; }

.view-home .page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(61, 82, 64,0.10), transparent 55%); pointer-events: none; }

.view-home .ph-left { padding: 48px 64px 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; }

.view-home .ph-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.view-home .brand { display: flex; align-items: center; gap: 10px; }

.view-home .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.view-home .brand .mark { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.025em; color: var(--ink); }

.view-home .brand .mark em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-home .brand .v { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 2px 7px; border: 0.5pt solid var(--line); border-radius: 4px; letter-spacing: 0.04em; }

.view-home .ph-trail { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; }

.view-home .ph-trail b { color: var(--ink); font-weight: 500; }

.view-home .ph-mid { padding: 32px 0; }

.view-home .ph-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); color: var(--accent-deep); border: 0.5pt solid rgba(61, 82, 64,0.25); padding: 5px 12px; border-radius: 99px; font-family: var(--sans); font-size: 11px; font-weight: 500; margin-bottom: 22px; }

.view-home .ph-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-home .ph-title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.96; letter-spacing: -0.04em; color: var(--ink); }

.view-home .ph-title .ac { color: var(--accent); }

.view-home .ph-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); letter-spacing: -0.025em; }

.view-home .ph-sub { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 28px 0 0; max-width: 460px; }

.view-home .ph-sub em { font-style: italic; color: var(--muted); }

.view-home .ph-bottom { padding-top: 22px; border-top: 0.5pt solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.view-home .ph-stats { display: flex; gap: 32px; }

.view-home .ph-stat { display: flex; flex-direction: column; gap: 3px; }

.view-home .ph-stat-num { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }

.view-home .ph-stat-l { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

.view-home .ph-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--bg); padding: 11px 17px 11px 19px; border-radius: 99px; font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: transform 0.1s ease; }

.view-home .ph-cta:active { transform: scale(0.98); }

.view-home .ph-cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; transition: transform 0.16s; }

.view-home .ph-cta:hover .arr { transform: translateX(2px); }

.view-home .ph-right { padding: 48px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 12px; position: relative; z-index: 1; }

.view-home .ph-section { border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease; background: var(--paper); border: 0.5pt solid var(--line-soft); color: var(--ink); position: relative; }

.view-home .ph-section:hover { transform: translateY(-2px); border-color: var(--line); }

.view-home .ph-section.starred { background: var(--accent); border-color: var(--accent); color: var(--bg); padding: 18px 22px; }

.view-home .ph-section.locked { opacity: 0.55; cursor: not-allowed; }

.view-home .ph-section.locked:hover { transform: none; border-color: var(--line-soft); }

.view-home .ph-s-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.view-home .ph-s-num { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; opacity: 0.45; line-height: 1; font-feature-settings: "tnum" 1; }

.view-home .ph-section.starred .ph-s-num { opacity: 0.7; font-size: 22px; }

.view-home .ph-s-status { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; opacity: 0.75; padding: 3px 7px; border-radius: 4px; background: rgba(26,22,18,0.04); border: 0.5pt solid var(--line); color: var(--ink-soft); }

.view-home .ph-section.starred .ph-s-status { background: rgba(239,234,224,0.16); border-color: rgba(239,234,224,0.32); color: var(--bg); opacity: 0.95; }

.view-home .ph-s-title { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.015em; line-height: 1.2; margin-top: 8px; }

.view-home .ph-section.starred .ph-s-title { font-size: 16px; line-height: 1.15; margin-top: 8px; }

.view-home .ph-s-title em { font-style: italic; font-weight: 400; opacity: 0.65; }

.view-home .ph-s-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

.view-home .ph-s-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; font-weight: 500; opacity: 0.6; }

.view-home .ph-section.starred .ph-s-tag { opacity: 0.75; }

.view-home .ph-s-arrow { font-size: 14px; opacity: 0.5; transition: transform 0.16s, opacity 0.16s; }

.view-home .ph-section:hover:not(.locked) .ph-s-arrow { opacity: 1; transform: translateX(2px); }

.view-home .ph-section.locked .ph-s-arrow { display: none; }

.view-home .corner-status { position: absolute; bottom: 18px; right: 24px; z-index: 3; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.05em; display: flex; gap: 14px; align-items: center; }

.view-home .corner-status .live { display: inline-flex; gap: 6px; align-items: center; }

.view-home .corner-status .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.view-scroll .wrap { max-width: 1120px; margin: 0 auto; padding: 0 48px 120px; }

.view-scroll .topbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 48px; border-bottom: var(--bw) solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }

.view-scroll .topbar .left { display: flex; align-items: center; gap: 18px; }

.view-scroll .back { color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.16s; background: none; border: none; padding: 0; font-family: inherit; }

.view-scroll .back:hover { color: var(--ink); }

.view-scroll .crumb { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }

.view-scroll .crumb .sep { opacity: 0.4; }

.view-scroll .crumb b { color: var(--ink); font-weight: 500; }

.view-scroll .topbar .right { display: flex; align-items: center; gap: 14px; }

.view-scroll .v-pill { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 3px 8px; border: var(--bw) solid var(--line); border-radius: 4px; letter-spacing: 0.04em; }

.view-scroll .nav-pill { font-family: var(--mono); font-size: 10px; color: var(--accent); padding: 3px 9px; background: rgba(61, 82, 64,0.08); border: var(--bw) solid rgba(61, 82, 64,0.25); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; }

.view-scroll .hero { padding: 80px 0 24px; }

.view-scroll .hero-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .hero-eyebrow .num { color: var(--accent); }

.view-scroll h1.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.04em; margin: 16px 0 18px; }

.view-scroll h1.hero-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.view-scroll h1.hero-title .ac { color: var(--accent); }

.view-scroll .hero-sub { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 580px; margin-bottom: 24px; }

.view-scroll .hero-sub b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.view-scroll .toc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 11.5px; font-weight: 500; border: var(--bw) solid rgba(61, 82, 64,0.25); margin-top: 8px; }

.view-scroll .toc-pill .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-scroll section { margin-top: 88px; border-top: var(--bw) solid var(--line); padding-top: 36px; }

.view-scroll .sec-eyebrow { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .sec-eyebrow .num { color: var(--accent); }

.view-scroll h2.sec-title { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; margin: 10px 0 8px; }

.view-scroll h2.sec-title em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-scroll .sec-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }

.view-scroll .sec-sub b { color: var(--ink); font-weight: 500; }

.view-scroll .palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }

.view-scroll .swatch { border-radius: var(--r-lg); overflow: hidden; border: var(--bw) solid var(--line); background: #fff; }

.view-scroll .swatch .c { height: 130px; }

.view-scroll .swatch .meta-block { padding: 14px 16px; }

.view-scroll .swatch .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }

.view-scroll .swatch .hx { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }

.view-scroll .swatch .role { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

.view-scroll .derivs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }

.view-scroll .deriv { display: flex; gap: 10px; align-items: center; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }

.view-scroll .deriv .dot { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; border: var(--bw) solid rgba(0,0,0,0.05); }

.view-scroll .deriv .txt { font-size: 11.5px; min-width: 0; }

.view-scroll .deriv .nm { font-weight: 500; }

.view-scroll .deriv .hx { font-family: var(--mono); color: var(--muted); font-size: 10px; letter-spacing: 0.02em; }

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

.pair { border-radius: var(--r-md); border: var(--bw) solid var(--line); overflow: hidden; }

.pair .demo { padding: 28px 26px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; }

.pair .demo .big { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }

.pair .demo .small { font-size: 12.5px; line-height: 1.4; opacity: 0.75; }

.pair .demo .badge { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.04em; }

.pair .demo .badge.aa { background: rgba(0,150,80,0.18); color: #2D6A45; }

.pair .demo .badge.aaa { background: rgba(0,150,80,0.30); color: #1A5230; }

.pair .demo .badge.fail { background: rgba(61, 82, 64,0.18); color: var(--accent-deep); }

.pair .meta-block { padding: 14px 16px; background: #fff; border-top: var(--bw) solid var(--line); }

.pair .meta-block .label { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }

.pair .meta-block .ratio { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; margin-top: 2px; }

.pair .meta-block .use { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }

.type-row { display: grid; grid-template-columns: 200px 1fr; gap: 56px; padding: 28px 0; border-bottom: var(--bw) solid var(--line); align-items: baseline; }

.type-row:last-of-type { border-bottom: none; }

.type-spec { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.7; }

.type-spec b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; font-size: 14px; display: block; margin-bottom: 2px; }

.sample-fr { font-family: var(--serif); font-weight: 500; letter-spacing: -0.025em; color: var(--ink); }

.sample-fr em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.sample-in { font-family: var(--sans); color: var(--ink); }

.sample-mono { font-family: var(--mono); color: var(--ink); }

.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 32px; padding: 28px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); }

.icon-cell { background: var(--bg); border: var(--bw) solid var(--line); border-radius: 8px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; }

.icon-cell svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.icon-cell .lbl { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.04em; text-align: center; }

.icon-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }

.icon-rules .ic-rule { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }

.icon-rules .ic-rule .k { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.icon-rules .ic-rule .v { font-family: var(--serif); font-weight: 500; font-size: 18px; margin-top: 4px; letter-spacing: -0.015em; }

.icon-rules .ic-rule .v em { font-style: italic; font-weight: 400; color: var(--muted); }

.icon-rules .ic-rule .h { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }

.icon-sizes { display: flex; gap: 24px; margin-top: 24px; padding: 22px 26px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); align-items: flex-end; flex-wrap: wrap; }

.icon-sizes .iz { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.icon-sizes .iz svg { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.icon-sizes .iz .lbl { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

.imagery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.img-do, .img-dont { border-radius: var(--r-lg); overflow: hidden; border: var(--bw) solid var(--line); }

.img-do .head, .img-dont .head { padding: 14px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.img-do .head { background: rgba(60,90,70,0.10); color: #2D6A45; border-bottom: var(--bw) solid var(--line); }

.img-dont .head { background: rgba(61, 82, 64,0.10); color: var(--accent-deep); border-bottom: var(--bw) solid var(--line); }

.img-do .body, .img-dont .body { background: #fff; padding: 22px 24px; }

.img-do .body ul, .img-dont .body ul { list-style: none; padding: 0; margin: 0; }

.img-do .body li, .img-dont .body li { padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.img-do .body li:last-child, .img-dont .body li:last-child { border-bottom: none; }

.img-do .body li::before { content: '+'; color: #2D6A45; font-family: var(--mono); flex-shrink: 0; }

.img-dont .body li::before { content: '—'; color: var(--accent-deep); font-family: var(--mono); flex-shrink: 0; }

.img-do .body li b, .img-dont .body li b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.img-treatment { margin-top: 18px; padding: 22px 26px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); }

.img-treatment .row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 13.5px; }

.img-treatment .row:last-child { border-bottom: none; }

.img-treatment .row .ql { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; padding-top: 2px; }

.img-treatment .row .qv { color: var(--ink); line-height: 1.55; }

.logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }

.logo-card { border-radius: var(--r-lg); border: var(--bw) solid var(--line); padding: 56px 32px 24px; position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; }

.logo-card.lino { background: var(--bg); }

.logo-card.tinta { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.logo-card.accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.logo-card .label { position: absolute; top: 16px; left: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; }

.logo-card .wordmark { font-family: var(--serif); font-weight: 500; font-size: 56px; letter-spacing: -0.035em; line-height: 1; display: inline-flex; align-items: baseline; gap: 2px; }

.logo-card .wordmark .dot-static { color: inherit; }

.logo-card .wordmark .dot-live { color: var(--accent); animation: pulse-text 2.4s ease-in-out infinite; }

.logo-card.tinta .wordmark .dot-live { color: var(--accent); }

.logo-card.accent .wordmark .dot-live { color: var(--ink); }

@keyframes pulse-text { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.logo-card .ml { font-family: var(--mono); font-size: 10.5px; opacity: 0.55; letter-spacing: 0.04em; margin-top: auto; }

.marca-rules { margin-top: 20px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.marca-rules .row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 13.5px; }

.marca-rules .row:last-child { border-bottom: none; }

.marca-rules .row .ql { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; padding-top: 2px; }

.marca-rules .row .qv { color: var(--ink); line-height: 1.55; }

.marca-rules .row .qv b { font-family: var(--serif); font-weight: 500; font-style: italic; }

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

.miss { border-radius: var(--r-md); border: var(--bw) solid var(--line); overflow: hidden; background: #fff; }

.miss .demo { background: var(--bg); padding: 36px 24px; display: flex; align-items: center; justify-content: center; min-height: 130px; position: relative; overflow: hidden; }

.miss .demo::after { content: ''; position: absolute; top: 50%; left: 8%; right: 8%; height: 2px; background: var(--accent-deep); transform: rotate(-8deg); transform-origin: center; opacity: 0.85; }

.miss .demo .word { font-family: var(--serif); font-weight: 500; font-size: 38px; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }

.miss .demo .word em { color: var(--accent); }

.miss .meta-block { padding: 12px 16px; }

.miss .meta-block .x { font-family: var(--mono); font-size: 9.5px; color: var(--accent-deep); letter-spacing: 0.06em; text-transform: uppercase; }

.miss .meta-block .why { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; margin-top: 2px; line-height: 1.3; }

.miss .meta-block .why em { font-style: italic; font-weight: 400; color: var(--muted); }

.radii { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

.rbox { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 120px; }

.rbox .shape { background: var(--ink); width: 56px; height: 56px; }

.rbox .lbl { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.rbox .val { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }

.tokens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }

.tok { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }

.tok .k { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.tok .v { font-family: var(--serif); font-weight: 500; font-size: 22px; margin-top: 6px; letter-spacing: -0.015em; }

.tok .v em { font-style: italic; font-weight: 400; color: var(--muted); }

.tok .h { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; }

.motion-principles { margin-top: 32px; }

.mp-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: 24px 0; border-bottom: var(--bw) solid var(--line); align-items: flex-start; }

.mp-row:last-of-type { border-bottom: none; }

.mp-row .mp-name { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }

.mp-row .mp-name em { font-style: italic; font-weight: 400; color: var(--muted); }

.mp-row .mp-name .meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; }

.mp-row .mp-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

.mp-row .mp-desc b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.mp-row .mp-curve { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 8px 14px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }

.mp-row .mp-curve .live-block { width: 28px; height: 14px; background: linear-gradient(90deg, transparent, var(--accent)); border-radius: 2px; animation: motion-demo 2.4s cubic-bezier(.22,1,.36,1) infinite; }

@keyframes motion-demo { 0% { transform: translateX(0); opacity: 0.3; } 50% { opacity: 1; transform: translateX(8px); } 100% { transform: translateX(0); opacity: 0.3; } }

.manifesto { margin-top: 36px; padding: 44px 52px; background: var(--paper); border-radius: var(--r-md); border-left: 2px solid var(--accent); max-width: 760px; }

.manifesto .kicker { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }

.manifesto h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; margin: 14px 0 24px; }

.manifesto h3 em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.manifesto p { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0 0 16px; letter-spacing: -0.005em; }

.manifesto p em { font-style: italic; color: var(--ink-soft); }

.manifesto p b { font-weight: 500; }

.manifesto .signature { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: var(--bw) solid var(--line); }

.manifesto .signature .av { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 500; font-size: 12px; }

.manifesto .signature .who { font-size: 12.5px; line-height: 1.4; }

.manifesto .signature .who b { font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: -0.01em; }

.manifesto .signature .who span { color: var(--muted); display: block; font-family: var(--mono); font-size: 10.5px; margin-top: 1px; letter-spacing: 0.04em; }

.manifesto .footnote { display: flex; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; font-family: var(--serif); font-style: italic; }

.manifesto .footnote .sup { font-family: var(--mono); font-style: normal; color: var(--accent); font-size: 11px; }

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

.ref { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.ref .head { padding: 18px 22px 14px; }

.ref .head .what { font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.ref .head .nm { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; margin-top: 4px; }

.ref .head .nm em { font-style: italic; font-weight: 400; color: var(--muted); }

.ref .body { padding: 14px 22px 20px; border-top: var(--bw) solid var(--line); }

.ref .body .why { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

.ref .body .why b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.ref .body .takes { margin-top: 12px; padding-top: 10px; border-top: var(--bw) solid var(--line-soft); font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; line-height: 1.6; }

.ref .body .takes b { color: var(--ink); font-weight: 500; }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }

.rules h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin: 0 0 14px; }

.rules h4 em { font-style: italic; font-weight: 400; color: var(--muted); }

.rules ul { list-style: none; padding: 0; margin: 0; }

.rules li { padding: 10px 0; border-bottom: var(--bw) solid var(--line); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.rules li::before { content: ''; width: 14px; flex-shrink: 0; font-weight: 500; font-family: var(--mono); }

.rules .never li::before { content: '—'; color: var(--accent-deep); }

.rules .always li::before { content: '+'; color: var(--ink-soft); }

.rules b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.next-up { margin-top: 96px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }

.next-up .k { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.next-up h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.025em; margin: 8px 0 6px; line-height: 1.15; }

.next-up h3 em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.next-up p { font-size: 13.5px; line-height: 1.55; color: rgba(239,234,224,0.7); max-width: 560px; }

.next-up .cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: var(--r-pill); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; }

.next-up .cta:disabled { opacity: 0.5; cursor: not-allowed; }

.next-up .cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

.view-scroll footer { margin-top: 56px; padding-top: 22px; border-top: var(--bw) solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.view-scroll footer button { color: var(--ink); text-decoration: none; background: none; border: none; font-family: inherit; font-size: inherit; cursor: pointer; letter-spacing: inherit; padding: 0; }

.view-scroll footer button:hover { color: var(--accent); }

.view-placeholder { padding: 120px 48px; text-align: center; max-width: 720px; margin: 0 auto; }

.view-placeholder .k { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.view-placeholder h2 { font-family: var(--serif); font-weight: 500; font-size: 48px; letter-spacing: -0.03em; margin: 14px 0 16px; }

.view-placeholder h2 em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-placeholder p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; }

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

html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01","cv11"; }

body { transition: background 0.3s; }

.view { display: none; }

.view.active { display: block; }

body[data-view="home"] { overflow: hidden; background: var(--ink); }

body[data-view="identidad"], body[data-view="voz"], body[data-view="sistema"], body[data-view="aplicacion"], body[data-view="casos"], body[data-view="recursos"] { overflow: auto; background: var(--bg); }

.view-home .page-hero { width: 100vw; height: 100vh; background: var(--ink); color: var(--bg); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; position: relative; }

.view-home .page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(61, 82, 64,0.22), transparent 55%); pointer-events: none; }

.view-home .ph-left { padding: 48px 64px 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; }

.view-home .ph-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.view-home .brand { display: flex; align-items: center; gap: 10px; }

.view-home .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.view-home .brand .mark { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.025em; color: var(--bg); }

.view-home .brand .mark em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.view-home .brand .v { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.55); padding: 2px 7px; border: 0.5pt solid rgba(239,234,224,0.18); border-radius: 4px; letter-spacing: 0.04em; }

.view-home .ph-trail { font-family: var(--mono); font-size: 11px; color: rgba(239,234,224,0.5); letter-spacing: 0.05em; }

.view-home .ph-trail b { color: var(--bg); font-weight: 500; }

.view-home .ph-mid { padding: 32px 0; }

.view-home .ph-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(61, 82, 64,0.15); color: var(--accent); border: 0.5pt solid rgba(61, 82, 64,0.32); padding: 5px 12px; border-radius: 99px; font-family: var(--sans); font-size: 11px; font-weight: 500; margin-bottom: 22px; }

.view-home .ph-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-home .ph-title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.96; letter-spacing: -0.04em; color: var(--bg); }

.view-home .ph-title .ac { color: var(--accent); }

.view-home .ph-title em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); letter-spacing: -0.025em; }

.view-home .ph-sub { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.55; color: rgba(239,234,224,0.7); margin: 28px 0 0; max-width: 460px; }

.view-home .ph-sub em { font-style: italic; color: rgba(239,234,224,0.5); }

.view-home .ph-bottom { padding-top: 22px; border-top: 0.5pt solid rgba(239,234,224,0.16); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.view-home .ph-stats { display: flex; gap: 32px; }

.view-home .ph-stat { display: flex; flex-direction: column; gap: 3px; }

.view-home .ph-stat-num { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1; color: var(--bg); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }

.view-home .ph-stat-l { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.5); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

.view-home .ph-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: 99px; font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: transform 0.1s ease; }

.view-home .ph-cta:active { transform: scale(0.98); }

.view-home .ph-cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; transition: transform 0.16s; }

.view-home .ph-cta:hover .arr { transform: translateX(2px); }

.view-home .ph-right { padding: 48px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 12px; position: relative; z-index: 1; }

.view-home .ph-section { border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease; background: rgba(239,234,224,0.04); border: 0.5pt solid rgba(239,234,224,0.12); color: var(--bg); position: relative; }

.view-home .ph-section:hover { transform: translateY(-2px); border-color: rgba(239,234,224,0.30); }

.view-home .ph-section.starred { background: var(--accent); border-color: var(--accent); color: var(--ink); padding: 18px 22px; }

.view-home .ph-section.locked { opacity: 0.55; cursor: not-allowed; }

.view-home .ph-section.locked:hover { transform: none; border-color: rgba(239,234,224,0.12); }

.view-home .ph-s-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.view-home .ph-s-num { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; opacity: 0.55; line-height: 1; font-feature-settings: "tnum" 1; }

.view-home .ph-section.starred .ph-s-num { opacity: 0.7; font-size: 22px; }

.view-home .ph-s-status { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; opacity: 0.7; padding: 3px 7px; border-radius: 4px; background: rgba(239,234,224,0.08); border: 0.5pt solid rgba(239,234,224,0.18); }

.view-home .ph-section.starred .ph-s-status { background: rgba(26,22,18,0.12); border-color: rgba(26,22,18,0.18); color: var(--ink); opacity: 0.85; }

.view-home .ph-s-status.open { background: rgba(61, 82, 64,0.18); border-color: rgba(61, 82, 64,0.3); color: var(--accent); opacity: 1; }

.view-home .ph-s-title { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.015em; line-height: 1.2; margin-top: 8px; }

.view-home .ph-section.starred .ph-s-title { font-size: 16px; line-height: 1.15; margin-top: 8px; }

.view-home .ph-s-title em { font-style: italic; font-weight: 400; opacity: 0.65; }

.view-home .ph-s-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

.view-home .ph-s-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; font-weight: 500; opacity: 0.6; }

.view-home .ph-section.starred .ph-s-tag { opacity: 0.7; }

.view-home .ph-s-arrow { font-size: 14px; opacity: 0.55; transition: transform 0.16s, opacity 0.16s; }

.view-home .ph-section:hover:not(.locked) .ph-s-arrow { opacity: 1; transform: translateX(2px); }

.view-home .ph-section.locked .ph-s-arrow { display: none; }

.view-home .corner-status { position: absolute; bottom: 18px; right: 24px; z-index: 3; font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.4); letter-spacing: 0.05em; display: flex; gap: 14px; align-items: center; }

.view-home .corner-status .live { display: inline-flex; gap: 6px; align-items: center; }

.view-home .corner-status .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.view-scroll .wrap { max-width: 1120px; margin: 0 auto; padding: 0 48px 120px; }

.view-scroll .topbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 48px; border-bottom: var(--bw) solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }

.view-scroll .topbar .left { display: flex; align-items: center; gap: 18px; }

.view-scroll .back { color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.16s; background: none; border: none; padding: 0; font-family: inherit; }

.view-scroll .back:hover { color: var(--ink); }

.view-scroll .crumb { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }

.view-scroll .crumb .sep { opacity: 0.4; }

.view-scroll .crumb b { color: var(--ink); font-weight: 500; }

.view-scroll .topbar .right { display: flex; align-items: center; gap: 14px; }

.view-scroll .v-pill { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 3px 8px; border: var(--bw) solid var(--line); border-radius: 4px; letter-spacing: 0.04em; }

.view-scroll .nav-pill { font-family: var(--mono); font-size: 10px; color: var(--accent); padding: 3px 9px; background: rgba(61, 82, 64,0.08); border: var(--bw) solid rgba(61, 82, 64,0.25); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; }

.view-scroll .hero { padding: 80px 0 24px; }

.view-scroll .hero-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .hero-eyebrow .num { color: var(--accent); }

.view-scroll h1.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.04em; margin: 16px 0 18px; }

.view-scroll h1.hero-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.view-scroll h1.hero-title .ac { color: var(--accent); }

.view-scroll .hero-sub { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 580px; margin-bottom: 24px; }

.view-scroll .hero-sub b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.view-scroll .toc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 11.5px; font-weight: 500; border: var(--bw) solid rgba(61, 82, 64,0.25); margin-top: 8px; }

.view-scroll .toc-pill .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-scroll section { margin-top: 88px; border-top: var(--bw) solid var(--line); padding-top: 36px; }

.view-scroll .sec-eyebrow { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .sec-eyebrow .num { color: var(--accent); }

.view-scroll h2.sec-title { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; margin: 10px 0 8px; }

.view-scroll h2.sec-title em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-scroll .sec-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }

.view-scroll .sec-sub b { color: var(--ink); font-weight: 500; }

.view-scroll .palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }

.view-scroll .swatch { border-radius: var(--r-lg); overflow: hidden; border: var(--bw) solid var(--line); background: #fff; }

.view-scroll .swatch .c { height: 130px; }

.view-scroll .swatch .meta-block { padding: 14px 16px; }

.view-scroll .swatch .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }

.view-scroll .swatch .hx { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }

.view-scroll .swatch .role { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

.view-scroll .derivs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }

.view-scroll .deriv { display: flex; gap: 10px; align-items: center; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }

.view-scroll .deriv .dot { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; border: var(--bw) solid rgba(0,0,0,0.05); }

.view-scroll .deriv .txt { font-size: 11.5px; min-width: 0; }

.view-scroll .deriv .nm { font-weight: 500; }

.view-scroll .deriv .hx { font-family: var(--mono); color: var(--muted); font-size: 10px; letter-spacing: 0.02em; }

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

.pair { border-radius: var(--r-md); border: var(--bw) solid var(--line); overflow: hidden; }

.pair .demo { padding: 28px 26px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; }

.pair .demo .big { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }

.pair .demo .small { font-size: 12.5px; line-height: 1.4; opacity: 0.75; }

.pair .demo .badge { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.04em; }

.pair .demo .badge.aa { background: rgba(0,150,80,0.18); color: #2D6A45; }

.pair .demo .badge.aaa { background: rgba(0,150,80,0.30); color: #1A5230; }

.pair .demo .badge.fail { background: rgba(61, 82, 64,0.18); color: var(--accent-deep); }

.pair .meta-block { padding: 14px 16px; background: #fff; border-top: var(--bw) solid var(--line); }

.pair .meta-block .label { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }

.pair .meta-block .ratio { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; margin-top: 2px; }

.pair .meta-block .use { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }

.type-row { display: grid; grid-template-columns: 200px 1fr; gap: 56px; padding: 28px 0; border-bottom: var(--bw) solid var(--line); align-items: baseline; }

.type-row:last-of-type { border-bottom: none; }

.type-spec { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.7; }

.type-spec b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; font-size: 14px; display: block; margin-bottom: 2px; }

.sample-fr { font-family: var(--serif); font-weight: 500; letter-spacing: -0.025em; color: var(--ink); }

.sample-fr em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.sample-in { font-family: var(--sans); color: var(--ink); }

.sample-mono { font-family: var(--mono); color: var(--ink); }

.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 32px; padding: 28px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); }

.icon-cell { background: var(--bg); border: var(--bw) solid var(--line); border-radius: 8px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; }

.icon-cell svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.icon-cell .lbl { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.04em; text-align: center; }

.icon-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }

.icon-rules .ic-rule { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }

.icon-rules .ic-rule .k { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.icon-rules .ic-rule .v { font-family: var(--serif); font-weight: 500; font-size: 18px; margin-top: 4px; letter-spacing: -0.015em; }

.icon-rules .ic-rule .v em { font-style: italic; font-weight: 400; color: var(--muted); }

.icon-rules .ic-rule .h { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }

.icon-sizes { display: flex; gap: 24px; margin-top: 24px; padding: 22px 26px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); align-items: flex-end; flex-wrap: wrap; }

.icon-sizes .iz { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.icon-sizes .iz svg { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.icon-sizes .iz .lbl { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

.imagery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.img-do, .img-dont { border-radius: var(--r-lg); overflow: hidden; border: var(--bw) solid var(--line); }

.img-do .head, .img-dont .head { padding: 14px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.img-do .head { background: rgba(60,90,70,0.10); color: #2D6A45; border-bottom: var(--bw) solid var(--line); }

.img-dont .head { background: rgba(61, 82, 64,0.10); color: var(--accent-deep); border-bottom: var(--bw) solid var(--line); }

.img-do .body, .img-dont .body { background: #fff; padding: 22px 24px; }

.img-do .body ul, .img-dont .body ul { list-style: none; padding: 0; margin: 0; }

.img-do .body li, .img-dont .body li { padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.img-do .body li:last-child, .img-dont .body li:last-child { border-bottom: none; }

.img-do .body li::before { content: '+'; color: #2D6A45; font-family: var(--mono); flex-shrink: 0; }

.img-dont .body li::before { content: '—'; color: var(--accent-deep); font-family: var(--mono); flex-shrink: 0; }

.img-do .body li b, .img-dont .body li b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.img-treatment { margin-top: 18px; padding: 22px 26px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); }

.img-treatment .row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 13.5px; }

.img-treatment .row:last-child { border-bottom: none; }

.img-treatment .row .ql { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; padding-top: 2px; }

.img-treatment .row .qv { color: var(--ink); line-height: 1.55; }

.logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }

.logo-card { border-radius: var(--r-lg); border: var(--bw) solid var(--line); padding: 56px 32px 24px; position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; }

.logo-card.lino { background: var(--bg); }

.logo-card.tinta { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.logo-card.accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.logo-card .label { position: absolute; top: 16px; left: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; }

.logo-card .wordmark { font-family: var(--serif); font-weight: 500; font-size: 56px; letter-spacing: -0.035em; line-height: 1; display: inline-flex; align-items: baseline; gap: 2px; }

.logo-card .wordmark .dot-static { color: inherit; }

.logo-card .wordmark .dot-live { color: var(--accent); animation: pulse-text 2.4s ease-in-out infinite; }

.logo-card.tinta .wordmark .dot-live { color: var(--accent); }

.logo-card.accent .wordmark .dot-live { color: var(--ink); }

@keyframes pulse-text { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.logo-card .ml { font-family: var(--mono); font-size: 10.5px; opacity: 0.55; letter-spacing: 0.04em; margin-top: auto; }

.marca-rules { margin-top: 20px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.marca-rules .row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 13.5px; }

.marca-rules .row:last-child { border-bottom: none; }

.marca-rules .row .ql { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; padding-top: 2px; }

.marca-rules .row .qv { color: var(--ink); line-height: 1.55; }

.marca-rules .row .qv b { font-family: var(--serif); font-weight: 500; font-style: italic; }

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

.miss { border-radius: var(--r-md); border: var(--bw) solid var(--line); overflow: hidden; background: #fff; }

.miss .demo { background: var(--bg); padding: 36px 24px; display: flex; align-items: center; justify-content: center; min-height: 130px; position: relative; overflow: hidden; }

.miss .demo::after { content: ''; position: absolute; top: 50%; left: 8%; right: 8%; height: 2px; background: var(--accent-deep); transform: rotate(-8deg); transform-origin: center; opacity: 0.85; }

.miss .demo .word { font-family: var(--serif); font-weight: 500; font-size: 38px; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }

.miss .demo .word em { color: var(--accent); }

.miss .meta-block { padding: 12px 16px; }

.miss .meta-block .x { font-family: var(--mono); font-size: 9.5px; color: var(--accent-deep); letter-spacing: 0.06em; text-transform: uppercase; }

.miss .meta-block .why { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; margin-top: 2px; line-height: 1.3; }

.miss .meta-block .why em { font-style: italic; font-weight: 400; color: var(--muted); }

.radii { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

.rbox { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 120px; }

.rbox .shape { background: var(--ink); width: 56px; height: 56px; }

.rbox .lbl { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.rbox .val { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }

.tokens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }

.tok { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }

.tok .k { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.tok .v { font-family: var(--serif); font-weight: 500; font-size: 22px; margin-top: 6px; letter-spacing: -0.015em; }

.tok .v em { font-style: italic; font-weight: 400; color: var(--muted); }

.tok .h { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; }

.motion-principles { margin-top: 32px; }

.mp-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: 24px 0; border-bottom: var(--bw) solid var(--line); align-items: flex-start; }

.mp-row:last-of-type { border-bottom: none; }

.mp-row .mp-name { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }

.mp-row .mp-name em { font-style: italic; font-weight: 400; color: var(--muted); }

.mp-row .mp-name .meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; }

.mp-row .mp-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

.mp-row .mp-desc b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.mp-row .mp-curve { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 8px 14px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }

.mp-row .mp-curve .live-block { width: 28px; height: 14px; background: linear-gradient(90deg, transparent, var(--accent)); border-radius: 2px; animation: motion-demo 2.4s cubic-bezier(.22,1,.36,1) infinite; }

@keyframes motion-demo { 0% { transform: translateX(0); opacity: 0.3; } 50% { opacity: 1; transform: translateX(8px); } 100% { transform: translateX(0); opacity: 0.3; } }

.manifesto { margin-top: 36px; padding: 44px 52px; background: var(--paper); border-radius: var(--r-md); border-left: 2px solid var(--accent); max-width: 760px; }

.manifesto .kicker { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }

.manifesto h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; margin: 14px 0 24px; }

.manifesto h3 em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.manifesto p { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0 0 16px; letter-spacing: -0.005em; }

.manifesto p em { font-style: italic; color: var(--ink-soft); }

.manifesto p b { font-weight: 500; }

.manifesto .signature { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: var(--bw) solid var(--line); }

.manifesto .signature .av { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 500; font-size: 12px; }

.manifesto .signature .who { font-size: 12.5px; line-height: 1.4; }

.manifesto .signature .who b { font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: -0.01em; }

.manifesto .signature .who span { color: var(--muted); display: block; font-family: var(--mono); font-size: 10.5px; margin-top: 1px; letter-spacing: 0.04em; }

.manifesto .footnote { display: flex; gap: 12px; margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; font-family: var(--serif); font-style: italic; }

.manifesto .footnote .sup { font-family: var(--mono); font-style: normal; color: var(--accent); font-size: 11px; }

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

.ref { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.ref .head { padding: 18px 22px 14px; }

.ref .head .what { font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.ref .head .nm { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; margin-top: 4px; }

.ref .head .nm em { font-style: italic; font-weight: 400; color: var(--muted); }

.ref .body { padding: 14px 22px 20px; border-top: var(--bw) solid var(--line); }

.ref .body .why { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

.ref .body .why b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.ref .body .takes { margin-top: 12px; padding-top: 10px; border-top: var(--bw) solid var(--line-soft); font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; line-height: 1.6; }

.ref .body .takes b { color: var(--ink); font-weight: 500; }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }

.rules h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin: 0 0 14px; }

.rules h4 em { font-style: italic; font-weight: 400; color: var(--muted); }

.rules ul { list-style: none; padding: 0; margin: 0; }

.rules li { padding: 10px 0; border-bottom: var(--bw) solid var(--line); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.rules li::before { content: ''; width: 14px; flex-shrink: 0; font-weight: 500; font-family: var(--mono); }

.rules .never li::before { content: '—'; color: var(--accent-deep); }

.rules .always li::before { content: '+'; color: var(--ink-soft); }

.rules b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.princs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }

.princ { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.princ .num { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 12px; letter-spacing: 0.02em; }

.princ .t { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; margin: 6px 0 10px; line-height: 1.15; }

.princ .t em { font-style: italic; font-weight: 400; color: var(--muted); }

.princ .d { font-size: 13.5px; line-height: 1.6; color: var(--ink); }

.princ .ex { margin-top: 14px; padding-top: 12px; border-top: var(--bw) solid var(--line); font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.princ .ex b { color: var(--accent-deep); font-weight: 400; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

.princ .ex b.ok { color: #2D6A45; }

.dial { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; padding: 32px 36px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-lg); }

.dial-row { display: grid; grid-template-columns: 130px 1fr 130px; gap: 18px; align-items: center; padding: 14px 0; border-bottom: var(--bw) solid var(--line-soft); }

.dial-row:last-child { border-bottom: none; }

.dial-row .pole { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.015em; }

.dial-row .pole.left { text-align: right; color: var(--muted); }

.dial-row .pole.right { text-align: left; color: var(--muted); }

.dial-row .pole.active { color: var(--ink); }

.dial-row .pole .meta { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; margin-top: 2px; text-transform: uppercase; }

.dial-track { position: relative; height: 6px; background: var(--bg); border-radius: 99px; border: var(--bw) solid var(--line); overflow: visible; }

.dial-track .fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent); border-radius: 99px 0 0 99px; }

.dial-track .knob { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 0.5pt var(--ink); }

.voice-table { margin-top: 36px; }

.voice-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 12px; border-bottom: 1pt solid var(--ink); }

.voice-head div { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.voice-head .no { color: var(--accent-deep); }

.voice-head .si { color: #2D6A45; }

.voice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 18px 0; border-bottom: var(--bw) solid var(--line); align-items: start; }

.voice-row:last-child { border-bottom: none; }

.voice-row .no { color: var(--muted); font-size: 14.5px; line-height: 1.55; text-decoration: line-through; text-decoration-color: var(--accent-deep); text-decoration-thickness: 0.5pt; }

.voice-row .si { color: var(--ink); font-size: 15.5px; font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; }

.voice-row .si em { font-style: italic; font-weight: 400; color: var(--muted); }

.voice-row .note { grid-column: 1 / -1; font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--muted); margin-top: -4px; line-height: 1.5; }

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

.pers { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.pers .av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 500; font-size: 14px; margin-bottom: 12px; }

.pers .av.accent { background: var(--accent); color: var(--ink); }

.pers .av.outline { background: var(--bg); color: var(--ink); border: var(--bw) solid var(--ink); }

.pers .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }

.pers .rol { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }

.pers .voz { font-size: 12.5px; line-height: 1.55; color: var(--ink); margin-top: 14px; padding-top: 12px; border-top: var(--bw) solid var(--line); }

.pers .voz b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.pers .habla { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 12px; margin-top: 10px; line-height: 1.5; }

.fine-rules { margin-top: 32px; padding: 0; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.fr-row { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 24px; padding: 14px 22px; border-bottom: var(--bw) solid var(--line-soft); align-items: baseline; }

.fr-row:last-child { border-bottom: none; }

.fr-row.head { background: var(--paper); font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 12px 22px; }

.fr-row .lbl { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }

.fr-row .no { font-size: 13px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent-deep); text-decoration-thickness: 0.5pt; }

.fr-row .si { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; color: var(--ink); }

.fr-row .si em { font-style: italic; font-weight: 400; color: var(--muted); }

.ui-states { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }

.ui-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.ui-card .head { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 12px; border-bottom: var(--bw) solid var(--line); margin-bottom: 14px; }

.ui-pair { padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); }

.ui-pair:last-child { border-bottom: none; }

.ui-pair .ctx { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }

.ui-pair .copy { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; line-height: 1.4; }

.ui-pair .copy em { font-style: italic; font-weight: 400; color: var(--muted); }

.ui-pair .copy.no { font-family: var(--sans); font-weight: 400; font-size: 12.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent-deep); text-decoration-thickness: 0.5pt; margin-bottom: 4px; letter-spacing: 0; }

.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }

.plat-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }

.plat-card .n { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }

.plat-card .u { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.55; }

.plat-card .f { font-family: var(--serif); font-style: italic; font-size: 11.5px; color: var(--accent-deep); margin-top: 12px; padding-top: 10px; border-top: var(--bw) solid var(--line-soft); }

.plat-card .cad { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; text-transform: uppercase; }

.post-block { margin-top: 32px; padding: 28px 32px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); }

.post-block .ph { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1pt solid var(--ink); margin-bottom: 18px; }

.post-block .ph h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }

.post-block .ph h3 em { font-style: italic; font-weight: 400; color: var(--muted); }

.post-block .ph .meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; margin-left: auto; text-transform: uppercase; }

.post { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.post .post-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: var(--bw) solid var(--line); }

.post .post-head .av { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 500; font-size: 12px; flex-shrink: 0; }

.post .post-head .who { font-size: 13px; font-weight: 500; }

.post .post-head .when { font-size: 11px; color: var(--muted); margin-top: 1px; }

.post .post-body { padding: 16px 20px; font-size: 14px; line-height: 1.6; }

.post .post-body p { margin: 0 0 12px; }

.post .post-body p:last-child { margin-bottom: 0; }

.post .post-body p.muted { color: var(--muted); }

.post .post-body em { font-family: var(--serif); font-style: italic; }

.ai-prompt { margin-top: 32px; background: var(--ink); color: var(--bg); border-radius: var(--r-md); overflow: hidden; }

.ai-prompt .ap-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 0.5pt solid rgba(239,234,224,0.18); }

.ai-prompt .ap-head .ttl { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.ai-prompt .ap-head .copy-btn { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.7); letter-spacing: 0.04em; padding: 4px 10px; background: rgba(239,234,224,0.08); border: 0.5pt solid rgba(239,234,224,0.18); border-radius: 4px; text-transform: uppercase; cursor: pointer; }

.ai-prompt .ap-body { padding: 22px 26px; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: rgba(239,234,224,0.85); white-space: pre-wrap; }

.ai-prompt .ap-body .h { color: var(--accent); font-weight: 500; }

.ai-prompt .ap-body .c { color: var(--bg); }

.crisis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.crisis-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; border-left: 2px solid var(--accent); }

.crisis-card .when { font-family: var(--mono); font-size: 10px; color: var(--accent-deep); letter-spacing: 0.06em; text-transform: uppercase; }

.crisis-card .what { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin-top: 6px; line-height: 1.2; }

.crisis-card .what em { font-style: italic; font-weight: 400; color: var(--muted); }

.crisis-card .say { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink); margin-top: 12px; padding: 12px 16px; background: var(--paper); border-radius: 6px; line-height: 1.5; border-left: 2px solid var(--ink-soft); }

.crisis-card .why { font-size: 12px; color: var(--ink-soft); margin-top: 10px; line-height: 1.55; }

.crisis-card .why b { color: var(--ink); font-weight: 500; }

.glossary { margin-top: 32px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.gl-row { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 24px; padding: 12px 22px; border-bottom: var(--bw) solid var(--line-soft); align-items: baseline; }

.gl-row:last-child { border-bottom: none; }

.gl-row.head { background: var(--paper); font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 12px 22px; }

.gl-row .ctx { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.02em; }

.gl-row .si { font-family: var(--serif); font-weight: 500; font-size: 14.5px; color: var(--ink); letter-spacing: -0.005em; }

.gl-row .si em { font-style: italic; font-weight: 400; color: var(--muted); }

.gl-row .no { font-size: 12.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent-deep); text-decoration-thickness: 0.5pt; }

.next-up { margin-top: 96px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }

.next-up .k { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.next-up h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.025em; margin: 8px 0 6px; line-height: 1.15; }

.next-up h3 em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.next-up p { font-size: 13.5px; line-height: 1.55; color: rgba(239,234,224,0.7); max-width: 560px; }

.next-up .cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: var(--r-pill); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; }

.next-up .cta:disabled { opacity: 0.5; cursor: not-allowed; }

.next-up .cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

.view-scroll footer { margin-top: 56px; padding-top: 22px; border-top: var(--bw) solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.view-scroll footer button { color: var(--ink); text-decoration: none; background: none; border: none; font-family: inherit; font-size: inherit; cursor: pointer; letter-spacing: inherit; padding: 0; }

.view-scroll footer button:hover { color: var(--accent); }

.view-placeholder { padding: 120px 48px; text-align: center; max-width: 720px; margin: 0 auto; }

.view-placeholder .k { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.view-placeholder h2 { font-family: var(--serif); font-weight: 500; font-size: 48px; letter-spacing: -0.03em; margin: 14px 0 16px; }

.view-placeholder h2 em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-placeholder p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; }

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

html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01","cv11"; }

body { transition: background 0.3s; }

.view { display: none; }

.view.active { display: block; }

body[data-view="home"] { overflow: hidden; background: var(--ink); }

body[data-view="identidad"], body[data-view="voz"], body[data-view="lanzamientos"], body[data-view="sistema"], body[data-view="aplicacion"], body[data-view="casos"], body[data-view="recursos"] { overflow: auto; background: var(--bg); }

.view-home .page-hero { width: 100vw; height: 100vh; background: var(--ink); color: var(--bg); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; position: relative; }

.view-home .page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(61, 82, 64,0.22), transparent 55%); pointer-events: none; }

.view-home .ph-left { padding: 48px 64px 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; }

.view-home .ph-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.view-home .brand { display: flex; align-items: center; gap: 10px; }

.view-home .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.view-home .brand .mark { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.025em; color: var(--bg); }

.view-home .brand .mark em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.view-home .brand .v { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.55); padding: 2px 7px; border: 0.5pt solid rgba(239,234,224,0.18); border-radius: 4px; letter-spacing: 0.04em; }

.view-home .ph-trail { font-family: var(--mono); font-size: 11px; color: rgba(239,234,224,0.5); letter-spacing: 0.05em; }

.view-home .ph-trail b { color: var(--bg); font-weight: 500; }

.view-home .ph-mid { padding: 24px 0; }

.view-home .ph-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(61, 82, 64,0.15); color: var(--accent); border: 0.5pt solid rgba(61, 82, 64,0.32); padding: 5px 12px; border-radius: 99px; font-family: var(--sans); font-size: 11px; font-weight: 500; margin-bottom: 18px; }

.view-home .ph-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-home .ph-title { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.04em; color: var(--bg); }

.view-home .ph-title .ac { color: var(--accent); }

.view-home .ph-title em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); letter-spacing: -0.025em; }

.view-home .ph-sub { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.55; color: rgba(239,234,224,0.7); margin: 22px 0 0; max-width: 460px; }

.view-home .ph-sub em { font-style: italic; color: rgba(239,234,224,0.5); }

.view-home .ph-bottom { padding-top: 22px; border-top: 0.5pt solid rgba(239,234,224,0.16); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.view-home .ph-stats { display: flex; gap: 32px; }

.view-home .ph-stat { display: flex; flex-direction: column; gap: 3px; }

.view-home .ph-stat-num { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; color: var(--bg); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }

.view-home .ph-stat-l { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.5); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

.view-home .ph-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: 99px; font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: transform 0.1s ease; }

.view-home .ph-cta:active { transform: scale(0.98); }

.view-home .ph-cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; transition: transform 0.16s; }

.view-home .ph-cta:hover .arr { transform: translateX(2px); }

.view-home .ph-right { padding: 36px 40px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 10px; position: relative; z-index: 1; }

.view-home .ph-section { border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease; background: rgba(239,234,224,0.04); border: 0.5pt solid rgba(239,234,224,0.12); color: var(--bg); position: relative; }

.view-home .ph-section:hover { transform: translateY(-2px); border-color: rgba(239,234,224,0.30); }

.view-home .ph-section.starred { background: var(--accent); border-color: var(--accent); color: var(--ink); grid-row: span 2; padding: 22px 24px; }

.view-home .ph-section.locked { opacity: 0.55; cursor: not-allowed; }

.view-home .ph-section.locked:hover { transform: none; border-color: rgba(239,234,224,0.12); }

.view-home .ph-section.open-2 { background: rgba(61, 82, 64,0.18); border-color: rgba(61, 82, 64,0.4); }

.view-home .ph-s-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.view-home .ph-s-num { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; opacity: 0.55; line-height: 1; font-feature-settings: "tnum" 1; }

.view-home .ph-section.starred .ph-s-num { opacity: 0.6; font-size: 32px; }

.view-home .ph-section.open-2 .ph-s-num { color: var(--accent); opacity: 0.85; }

.view-home .ph-s-status { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; opacity: 0.7; padding: 2px 6px; border-radius: 3px; background: rgba(239,234,224,0.08); border: 0.5pt solid rgba(239,234,224,0.18); }

.view-home .ph-section.starred .ph-s-status { background: rgba(26,22,18,0.12); border-color: rgba(26,22,18,0.18); color: var(--ink); opacity: 0.85; }

.view-home .ph-s-status.open { background: rgba(61, 82, 64,0.18); border-color: rgba(61, 82, 64,0.3); color: var(--accent); opacity: 1; }

.view-home .ph-s-title { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: -0.015em; line-height: 1.18; margin-top: 6px; }

.view-home .ph-section.starred .ph-s-title { font-size: 24px; line-height: 1.05; margin-top: 10px; }

.view-home .ph-s-title em { font-style: italic; font-weight: 400; opacity: 0.65; }

.view-home .ph-s-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

.view-home .ph-s-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; font-weight: 500; opacity: 0.6; }

.view-home .ph-section.starred .ph-s-tag { opacity: 0.7; }

.view-home .ph-s-arrow { font-size: 13px; opacity: 0.55; transition: transform 0.16s, opacity 0.16s; }

.view-home .ph-section:hover:not(.locked) .ph-s-arrow { opacity: 1; transform: translateX(2px); }

.view-home .ph-section.locked .ph-s-arrow { display: none; }

.view-home .corner-status { position: absolute; bottom: 18px; right: 24px; z-index: 3; font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.4); letter-spacing: 0.05em; display: flex; gap: 14px; align-items: center; }

.view-home .corner-status .live { display: inline-flex; gap: 6px; align-items: center; }

.view-home .corner-status .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.view-scroll .wrap { max-width: 1120px; margin: 0 auto; padding: 0 48px 120px; }

.view-scroll .topbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 48px; border-bottom: var(--bw) solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }

.view-scroll .topbar .left { display: flex; align-items: center; gap: 18px; }

.view-scroll .back { color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.16s; background: none; border: none; padding: 0; font-family: inherit; }

.view-scroll .back:hover { color: var(--ink); }

.view-scroll .crumb { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }

.view-scroll .crumb .sep { opacity: 0.4; }

.view-scroll .crumb b { color: var(--ink); font-weight: 500; }

.view-scroll .topbar .right { display: flex; align-items: center; gap: 14px; }

.view-scroll .v-pill { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 3px 8px; border: var(--bw) solid var(--line); border-radius: 4px; letter-spacing: 0.04em; }

.view-scroll .nav-pill { font-family: var(--mono); font-size: 10px; color: var(--accent); padding: 3px 9px; background: rgba(61, 82, 64,0.08); border: var(--bw) solid rgba(61, 82, 64,0.25); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; }

.view-scroll .hero { padding: 80px 0 24px; }

.view-scroll .hero-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .hero-eyebrow .num { color: var(--accent); }

.view-scroll h1.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.04em; margin: 16px 0 18px; }

.view-scroll h1.hero-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.view-scroll h1.hero-title .ac { color: var(--accent); }

.view-scroll .hero-sub { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 580px; margin-bottom: 24px; }

.view-scroll .hero-sub b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.view-scroll .toc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 11.5px; font-weight: 500; border: var(--bw) solid rgba(61, 82, 64,0.25); margin-top: 8px; }

.view-scroll .toc-pill .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-scroll section { margin-top: 88px; border-top: var(--bw) solid var(--line); padding-top: 36px; }

.view-scroll .sec-eyebrow { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .sec-eyebrow .num { color: var(--accent); }

.view-scroll h2.sec-title { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; margin: 10px 0 8px; }

.view-scroll h2.sec-title em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-scroll .sec-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }

.view-scroll .sec-sub b { color: var(--ink); font-weight: 500; }

.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }

.swatch { border-radius: var(--r-lg); overflow: hidden; border: var(--bw) solid var(--line); background: #fff; }

.swatch .c { height: 130px; }

.swatch .meta-block { padding: 14px 16px; }

.swatch .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }

.swatch .hx { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }

.swatch .role { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

.princs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }

.princ { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.princ .num { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 12px; letter-spacing: 0.02em; }

.princ .t { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; margin: 6px 0 10px; line-height: 1.15; }

.princ .t em { font-style: italic; font-weight: 400; color: var(--muted); }

.princ .d { font-size: 13.5px; line-height: 1.6; color: var(--ink); }

.princ .ex { margin-top: 14px; padding-top: 12px; border-top: var(--bw) solid var(--line); font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.princ .ex b { color: var(--accent-deep); font-weight: 400; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

.princ .ex b.ok { color: #2D6A45; }

.anatomy { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 36px; }

.anatomy-mock { background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: 36px 40px; position: relative; }

.anatomy-mock .a-eyebrow { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.anatomy-mock .a-title { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0 8px; }

.anatomy-mock .a-title em { font-style: italic; font-weight: 400; color: var(--muted); }

.anatomy-mock .a-sub { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 22px; }

.anatomy-mock .a-video { background: var(--ink); border-radius: 8px; padding: 36px 24px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }

.anatomy-mock .a-video .play { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--ink); font-size: 12px; }

.anatomy-mock .a-video .meta { font-family: var(--mono); font-size: 11px; color: var(--bg); letter-spacing: 0.04em; }

.anatomy-mock .a-body { font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--ink); }

.anatomy-mock .a-body p { margin-bottom: 10px; }

.anatomy-mock .a-sig { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: var(--bw) solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.anatomy-mock .a-sig b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; }

.anatomy-tag { position: absolute; background: var(--accent); color: var(--ink); font-family: var(--mono); font-size: 9px; padding: 3px 8px; border-radius: 99px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }

.anatomy-key { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }

.anatomy-key h4 { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding-bottom: 12px; border-bottom: var(--bw) solid var(--line); margin-bottom: 6px; }

.anatomy-key .key-row { padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 12.5px; line-height: 1.55; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; }

.anatomy-key .key-row:last-child { border-bottom: none; }

.anatomy-key .key-row .nm { font-family: var(--mono); color: var(--accent); font-size: 11px; letter-spacing: 0.04em; font-weight: 500; }

.anatomy-key .key-row .lbl { color: var(--ink); }

.anatomy-key .key-row .lbl b { font-family: var(--serif); font-weight: 500; font-style: italic; font-weight: 400; color: var(--ink); }

.calendar { margin-top: 36px; padding: 28px 32px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-lg); }

.calendar-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: var(--bw) solid var(--line); margin-bottom: 20px; }

.calendar-head .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }

.calendar-head .nm em { font-style: italic; font-weight: 400; color: var(--muted); }

.calendar-head .leg { display: flex; gap: 16px; align-items: center; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

.calendar-head .leg span { display: inline-flex; align-items: center; gap: 6px; }

.calendar-head .leg .dot-acc { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.calendar-head .leg .dot-mute { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }

.calendar-grid { display: grid; grid-template-columns: 80px repeat(31, 1fr); gap: 2px; align-items: center; }

.cal-row { display: contents; }

.cal-row .month { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: -0.01em; padding-right: 12px; text-align: right; }

.cal-row .month em { font-style: italic; font-weight: 400; color: var(--muted); font-size: 11px; }

.cal-cell { aspect-ratio: 1; min-height: 16px; background: var(--paper); border-radius: 2px; display: grid; place-items: center; font-family: var(--mono); font-size: 8px; color: var(--muted); position: relative; }

.cal-cell.weekend { background: transparent; }

.cal-cell.empty { background: transparent; }

.cal-cell.launch { background: var(--accent); color: var(--ink); font-weight: 500; }

.cal-cell.satellite { background: var(--accent-soft); color: var(--accent-deep); }

.cal-row.head .cal-cell { background: transparent; font-family: var(--mono); font-size: 8.5px; color: var(--muted); height: 22px; aspect-ratio: auto; min-height: 0; }

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

.role-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px 22px; }

.role-card .nm { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.role-card .who { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; margin-top: 4px; }

.role-card .who em { font-style: italic; font-weight: 400; color: var(--muted); }

.role-card .does { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; padding-top: 10px; border-top: var(--bw) solid var(--line); line-height: 1.55; }

.role-card .does b { color: var(--ink); font-weight: 500; }

.role-card .when { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; margin-top: 10px; text-transform: uppercase; }

.cmatrix { margin-top: 32px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.cmatrix-row { display: grid; grid-template-columns: 140px 1fr 140px 90px; gap: 16px; padding: 14px 22px; border-bottom: var(--bw) solid var(--line-soft); align-items: center; }

.cmatrix-row:last-child { border-bottom: none; }

.cmatrix-row.head { background: var(--paper); font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 12px 22px; }

.cmatrix-row .ch { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.015em; }

.cmatrix-row .ch em { font-style: italic; font-weight: 400; color: var(--muted); font-size: 13px; }

.cmatrix-row .what { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.cmatrix-row .what b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.cmatrix-row .when-rel { font-family: var(--mono); font-size: 10.5px; color: var(--accent-deep); letter-spacing: 0.04em; }

.cmatrix-row .who-sig { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

.wa-templates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }

.wa-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.wa-card .wa-head { padding: 14px 20px 12px; border-bottom: var(--bw) solid var(--line); }

.wa-card .wa-head .ctx { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.wa-card .wa-head .nm { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin-top: 4px; line-height: 1.2; }

.wa-card .wa-head .nm em { font-style: italic; font-weight: 400; color: var(--muted); }

.wa-card .wa-mock { padding: 18px 20px 22px; background: linear-gradient(180deg, #ECE5D8 0%, #E5DDC9 100%); position: relative; }

.wa-card .wa-bubble { background: #FFFCF6; border: var(--bw) solid var(--line); border-radius: 14px; border-top-left-radius: 4px; padding: 12px 14px; max-width: 92%; font-size: 13px; line-height: 1.5; color: var(--ink); position: relative; box-shadow: 0 0.5pt 0 rgba(0,0,0,0.04); }

.wa-card .wa-bubble::before { content: ''; position: absolute; top: 0; left: -6px; width: 10px; height: 12px; background: #FFFCF6; clip-path: polygon(100% 0, 100% 100%, 0 0); border-left: var(--bw) solid var(--line); border-top: var(--bw) solid var(--line); }

.wa-card .wa-bubble p { margin: 0 0 8px; }

.wa-card .wa-bubble p:last-child { margin-bottom: 0; }

.wa-card .wa-bubble em { font-family: var(--serif); font-style: italic; }

.wa-card .wa-bubble code { font-family: var(--mono); font-size: 11.5px; background: var(--accent-soft); padding: 1px 4px; border-radius: 3px; color: var(--accent-deep); }

.wa-card .wa-bubble .time { display: block; font-family: var(--mono); font-size: 9px; color: var(--muted); margin-top: 6px; text-align: right; letter-spacing: 0.02em; }

.wa-card .wa-from { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }

.wa-card .wa-notes { padding: 12px 20px 16px; background: var(--paper); font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; border-top: var(--bw) solid var(--line); }

.wa-card .wa-notes b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 4px; }

.wa-card .wa-notes ul { list-style: none; padding: 0; margin: 0; }

.wa-card .wa-notes li { padding: 3px 0; }

.wa-card .wa-notes li::before { content: '· '; color: var(--accent); font-weight: 600; }

.wa-card .wa-notes code { font-family: var(--mono); font-size: 10.5px; background: #fff; padding: 1px 4px; border-radius: 2px; color: var(--accent-deep); border: var(--bw) solid var(--line); }

.num-template { margin-top: 32px; background: var(--ink); color: var(--bg); border-radius: var(--r-md); overflow: hidden; }

.num-template .nt-head { display: flex; justify-content: space-between; padding: 14px 22px; border-bottom: 0.5pt solid rgba(239,234,224,0.18); }

.num-template .nt-head .ttl { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.num-template .nt-head .copy-btn { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.7); letter-spacing: 0.04em; padding: 4px 10px; background: rgba(239,234,224,0.08); border: 0.5pt solid rgba(239,234,224,0.18); border-radius: 4px; text-transform: uppercase; cursor: pointer; }

.num-template .nt-body { padding: 22px 26px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: rgba(239,234,224,0.85); white-space: pre-wrap; }

.num-template .nt-body .h { color: var(--accent); font-weight: 500; }

.num-template .nt-body .placeholder { background: rgba(61, 82, 64,0.18); padding: 0 4px; border-radius: 2px; color: var(--accent); }

.archive-mock { margin-top: 32px; background: var(--bg); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: 36px 40px; }

.archive-mock .am-head { padding-bottom: 18px; border-bottom: 1pt solid var(--ink); margin-bottom: 22px; }

.archive-mock .am-eyebrow { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.archive-mock h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -0.025em; margin: 6px 0; }

.archive-mock h3 em { font-style: italic; font-weight: 400; color: var(--muted); }

.archive-mock .am-meta { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

.archive-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }

.archive-feat .feat-video { background: var(--ink); border-radius: 8px; aspect-ratio: 16/9; display: grid; place-items: center; color: var(--bg); position: relative; }

.archive-feat .feat-video::after { content: '▶ 1:24'; font-family: var(--mono); font-size: 12px; color: var(--bg); }

.archive-feat .feat-text .feat-num { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.archive-feat .feat-text .feat-t { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.025em; line-height: 1.1; margin: 6px 0 8px; }

.archive-feat .feat-text .feat-t em { font-style: italic; font-weight: 400; color: var(--muted); }

.archive-feat .feat-text .feat-d { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

.archive-feat .feat-text .feat-by { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; margin-top: 10px; }

.archive-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.arch-item { background: #fff; border: var(--bw) solid var(--line); border-radius: 8px; padding: 14px 16px; }

.arch-item .n { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; }

.arch-item .t { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.015em; margin-top: 4px; line-height: 1.2; }

.arch-item .t em { font-style: italic; font-weight: 400; color: var(--muted); }

.arch-item .d { font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.04em; margin-top: 10px; }

.checklists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.check-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 26px; }

.check-card .head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: var(--bw) solid var(--line); margin-bottom: 14px; }

.check-card .head .nm { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }

.check-card .head .nm em { font-style: italic; font-weight: 400; color: var(--muted); }

.check-card .head .when { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }

.check-card ul { list-style: none; padding: 0; margin: 0; }

.check-card li { padding: 9px 0; font-size: 13px; line-height: 1.55; display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline; border-bottom: var(--bw) solid var(--line-soft); }

.check-card li:last-child { border-bottom: none; }

.check-card li::before { content: ''; width: 12px; height: 12px; border-radius: 3px; border: 1pt solid var(--line); margin-top: 3px; }

.check-card li.done::before { background: var(--accent); border-color: var(--accent); }

.check-card li b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.launch-crisis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.lc { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; border-left: 2px solid var(--accent); }

.lc .when { font-family: var(--mono); font-size: 10px; color: var(--accent-deep); letter-spacing: 0.06em; text-transform: uppercase; }

.lc .what { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.015em; margin-top: 6px; line-height: 1.2; }

.lc .what em { font-style: italic; font-weight: 400; color: var(--muted); }

.lc .do { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink); margin-top: 12px; line-height: 1.55; padding: 10px 14px; background: var(--paper); border-radius: 6px; border-left: 2px solid var(--ink-soft); }

.next-up { margin-top: 96px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }

.next-up .k { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.next-up h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.025em; margin: 8px 0 6px; line-height: 1.15; }

.next-up h3 em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.next-up p { font-size: 13.5px; line-height: 1.55; color: rgba(239,234,224,0.7); max-width: 560px; }

.next-up .cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: var(--r-pill); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; }

.next-up .cta:disabled { opacity: 0.5; cursor: not-allowed; }

.next-up .cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

.view-scroll footer { margin-top: 56px; padding-top: 22px; border-top: var(--bw) solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.view-scroll footer button { color: var(--ink); text-decoration: none; background: none; border: none; font-family: inherit; font-size: inherit; cursor: pointer; letter-spacing: inherit; padding: 0; }

.view-scroll footer button:hover { color: var(--accent); }

.view-placeholder { padding: 120px 48px; text-align: center; max-width: 720px; margin: 0 auto; }

.view-placeholder .k { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.view-placeholder h2 { font-family: var(--serif); font-weight: 500; font-size: 48px; letter-spacing: -0.03em; margin: 14px 0 16px; }

.view-placeholder h2 em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-placeholder p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; }

.pull { margin: 32px 0 36px; padding: 22px 26px; border-left: 3px solid var(--accent); font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.45; letter-spacing: -0.015em; color: var(--ink); font-style: italic; max-width: 760px; }

.pull cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }

.rules h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin: 0 0 14px; }

.rules h4 em { font-style: italic; font-weight: 400; color: var(--muted); }

.rules ul { list-style: none; padding: 0; margin: 0; }

.rules li { padding: 10px 0; border-bottom: var(--bw) solid var(--line); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.rules li::before { content: ''; width: 14px; flex-shrink: 0; font-weight: 500; font-family: var(--mono); }

.rules .never li::before { content: '—'; color: var(--accent-deep); }

.rules .always li::before { content: '+'; color: var(--ink-soft); }

.rules b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

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

html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01","cv11"; }

body { transition: background 0.3s; }

.view { display: none; }

.view.active { display: block; }

body[data-view="home"] { overflow: hidden; background: var(--ink); }

body[data-view="identidad"], body[data-view="voz"], body[data-view="lanzamientos"], body[data-view="metodologia"], body[data-view="aplicacion"], body[data-view="casos"], body[data-view="recursos"] { overflow: auto; background: var(--bg); }

.view-home .page-hero { width: 100vw; height: 100vh; background: var(--ink); color: var(--bg); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; position: relative; }

.view-home .page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(61, 82, 64,0.22), transparent 55%); pointer-events: none; }

.view-home .ph-left { padding: 48px 64px 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; }

.view-home .ph-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.view-home .brand { display: flex; align-items: center; gap: 10px; }

.view-home .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.view-home .brand .mark { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.025em; color: var(--bg); }

.view-home .brand .mark em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.view-home .brand .v { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.55); padding: 2px 7px; border: 0.5pt solid rgba(239,234,224,0.18); border-radius: 4px; letter-spacing: 0.04em; }

.view-home .ph-trail { font-family: var(--mono); font-size: 11px; color: rgba(239,234,224,0.5); letter-spacing: 0.05em; }

.view-home .ph-trail b { color: var(--bg); font-weight: 500; }

.view-home .ph-mid { padding: 24px 0; }

.view-home .ph-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(61, 82, 64,0.15); color: var(--accent); border: 0.5pt solid rgba(61, 82, 64,0.32); padding: 5px 12px; border-radius: 99px; font-family: var(--sans); font-size: 11px; font-weight: 500; margin-bottom: 18px; }

.view-home .ph-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-home .ph-title { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.04em; color: var(--bg); }

.view-home .ph-title .ac { color: var(--accent); }

.view-home .ph-title em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); letter-spacing: -0.025em; }

.view-home .ph-sub { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.55; color: rgba(239,234,224,0.7); margin: 22px 0 0; max-width: 460px; }

.view-home .ph-sub em { font-style: italic; color: rgba(239,234,224,0.5); }

.view-home .ph-bottom { padding-top: 22px; border-top: 0.5pt solid rgba(239,234,224,0.16); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.view-home .ph-stats { display: flex; gap: 32px; }

.view-home .ph-stat { display: flex; flex-direction: column; gap: 3px; }

.view-home .ph-stat-num { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; color: var(--bg); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }

.view-home .ph-stat-l { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.5); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

.view-home .ph-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: 99px; font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: transform 0.1s ease; }

.view-home .ph-cta:active { transform: scale(0.98); }

.view-home .ph-cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; transition: transform 0.16s; }

.view-home .ph-cta:hover .arr { transform: translateX(2px); }

.view-home .ph-right { padding: 36px 40px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 10px; position: relative; z-index: 1; }

.view-home .ph-section { border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease; background: rgba(239,234,224,0.04); border: 0.5pt solid rgba(239,234,224,0.12); color: var(--bg); position: relative; }

.view-home .ph-section:hover { transform: translateY(-2px); border-color: rgba(239,234,224,0.30); }

.view-home .ph-section.starred { background: var(--accent); border-color: var(--accent); color: var(--ink); grid-row: span 2; padding: 22px 24px; }

.view-home .ph-section.locked { opacity: 0.55; cursor: not-allowed; }

.view-home .ph-section.locked:hover { transform: none; border-color: rgba(239,234,224,0.12); }

.view-home .ph-section.open-2 { background: rgba(61, 82, 64,0.18); border-color: rgba(61, 82, 64,0.4); }

.view-home .ph-s-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.view-home .ph-s-num { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; opacity: 0.55; line-height: 1; font-feature-settings: "tnum" 1; }

.view-home .ph-section.starred .ph-s-num { opacity: 0.6; font-size: 32px; }

.view-home .ph-section.open-2 .ph-s-num { color: var(--accent); opacity: 0.85; }

.view-home .ph-s-status { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; opacity: 0.7; padding: 2px 6px; border-radius: 3px; background: rgba(239,234,224,0.08); border: 0.5pt solid rgba(239,234,224,0.18); }

.view-home .ph-section.starred .ph-s-status { background: rgba(26,22,18,0.12); border-color: rgba(26,22,18,0.18); color: var(--ink); opacity: 0.85; }

.view-home .ph-s-status.open { background: rgba(61, 82, 64,0.18); border-color: rgba(61, 82, 64,0.3); color: var(--accent); opacity: 1; }

.view-home .ph-s-title { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: -0.015em; line-height: 1.18; margin-top: 6px; }

.view-home .ph-section.starred .ph-s-title { font-size: 24px; line-height: 1.05; margin-top: 10px; }

.view-home .ph-s-title em { font-style: italic; font-weight: 400; opacity: 0.65; }

.view-home .ph-s-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

.view-home .ph-s-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; font-weight: 500; opacity: 0.6; }

.view-home .ph-section.starred .ph-s-tag { opacity: 0.7; }

.view-home .ph-s-arrow { font-size: 13px; opacity: 0.55; transition: transform 0.16s, opacity 0.16s; }

.view-home .ph-section:hover:not(.locked) .ph-s-arrow { opacity: 1; transform: translateX(2px); }

.view-home .ph-section.locked .ph-s-arrow { display: none; }

.view-home .corner-status { position: absolute; bottom: 18px; right: 24px; z-index: 3; font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.4); letter-spacing: 0.05em; display: flex; gap: 14px; align-items: center; }

.view-home .corner-status .live { display: inline-flex; gap: 6px; align-items: center; }

.view-home .corner-status .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.view-scroll .wrap { max-width: 1120px; margin: 0 auto; padding: 0 48px 120px; }

.view-scroll .topbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 48px; border-bottom: var(--bw) solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }

.view-scroll .topbar .left { display: flex; align-items: center; gap: 18px; }

.view-scroll .back { color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.16s; background: none; border: none; padding: 0; font-family: inherit; }

.view-scroll .back:hover { color: var(--ink); }

.view-scroll .crumb { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }

.view-scroll .crumb .sep { opacity: 0.4; }

.view-scroll .crumb b { color: var(--ink); font-weight: 500; }

.view-scroll .topbar .right { display: flex; align-items: center; gap: 14px; }

.view-scroll .v-pill { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 3px 8px; border: var(--bw) solid var(--line); border-radius: 4px; letter-spacing: 0.04em; }

.view-scroll .nav-pill { font-family: var(--mono); font-size: 10px; color: var(--accent); padding: 3px 9px; background: rgba(61, 82, 64,0.08); border: var(--bw) solid rgba(61, 82, 64,0.25); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; }

.view-scroll .hero { padding: 80px 0 24px; }

.view-scroll .hero-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .hero-eyebrow .num { color: var(--accent); }

.view-scroll h1.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.04em; margin: 16px 0 18px; }

.view-scroll h1.hero-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.view-scroll h1.hero-title .ac { color: var(--accent); }

.view-scroll .hero-sub { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 580px; margin-bottom: 24px; }

.view-scroll .hero-sub b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.view-scroll .toc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 11.5px; font-weight: 500; border: var(--bw) solid rgba(61, 82, 64,0.25); margin-top: 8px; }

.view-scroll .toc-pill .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-scroll section { margin-top: 88px; border-top: var(--bw) solid var(--line); padding-top: 36px; }

.view-scroll .sec-eyebrow { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .sec-eyebrow .num { color: var(--accent); }

.view-scroll h2.sec-title { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; margin: 10px 0 8px; }

.view-scroll h2.sec-title em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-scroll .sec-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }

.view-scroll .sec-sub b { color: var(--ink); font-weight: 500; }

.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }

.swatch { border-radius: var(--r-lg); overflow: hidden; border: var(--bw) solid var(--line); background: #fff; }

.swatch .c { height: 130px; }

.swatch .meta-block { padding: 14px 16px; }

.swatch .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }

.swatch .hx { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }

.swatch .role { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

.princs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }

.princ { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.princ .num { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 12px; letter-spacing: 0.02em; }

.princ .t { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; margin: 6px 0 10px; line-height: 1.15; }

.princ .t em { font-style: italic; font-weight: 400; color: var(--muted); }

.princ .d { font-size: 13.5px; line-height: 1.6; color: var(--ink); }

.pull { margin: 32px 0 36px; padding: 22px 26px; border-left: 3px solid var(--accent); font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.45; letter-spacing: -0.015em; color: var(--ink); font-style: italic; max-width: 760px; }

.pull cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.next-up { margin-top: 96px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }

.next-up .k { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.next-up h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.025em; margin: 8px 0 6px; line-height: 1.15; }

.next-up h3 em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.next-up p { font-size: 13.5px; line-height: 1.55; color: rgba(239,234,224,0.7); max-width: 560px; }

.next-up .cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: var(--r-pill); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; }

.next-up .cta:disabled { opacity: 0.5; cursor: not-allowed; }

.next-up .cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

.view-scroll footer { margin-top: 56px; padding-top: 22px; border-top: var(--bw) solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.view-scroll footer button { color: var(--ink); text-decoration: none; background: none; border: none; font-family: inherit; font-size: inherit; cursor: pointer; letter-spacing: inherit; padding: 0; }

.view-scroll footer button:hover { color: var(--accent); }

.view-placeholder { padding: 120px 48px; text-align: center; max-width: 720px; margin: 0 auto; }

.view-placeholder .k { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.view-placeholder h2 { font-family: var(--serif); font-weight: 500; font-size: 48px; letter-spacing: -0.03em; margin: 14px 0 16px; }

.view-placeholder h2 em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-placeholder p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }

.rules h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin: 0 0 14px; }

.rules h4 em { font-style: italic; font-weight: 400; color: var(--muted); }

.rules ul { list-style: none; padding: 0; margin: 0; }

.rules li { padding: 10px 0; border-bottom: var(--bw) solid var(--line); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.rules li::before { content: ''; width: 14px; flex-shrink: 0; font-weight: 500; font-family: var(--mono); }

.rules .never li::before { content: '—'; color: var(--accent-deep); }

.rules .always li::before { content: '+'; color: var(--ink-soft); }

.rules b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.deck-anatomy { margin-top: 36px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

.deck-anatomy .da-mock { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; position: relative; }

.deck-anatomy .da-left { background: var(--ink); color: var(--bg); padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }

.deck-anatomy .da-left::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(61, 82, 64,0.18), transparent 55%); pointer-events: none; }

.deck-anatomy .da-left > * { position: relative; z-index: 1; }

.deck-anatomy .da-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(61, 82, 64,0.18); color: var(--accent); border-radius: 99px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; align-self: flex-start; margin-bottom: 14px; }

.deck-anatomy .da-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.deck-anatomy .da-title { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.035em; }

.deck-anatomy .da-title .ac { color: var(--accent); }

.deck-anatomy .da-title em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.deck-anatomy .da-sub { font-family: var(--serif); font-size: 13px; color: rgba(239,234,224,0.65); margin-top: 14px; max-width: 320px; line-height: 1.5; }

.deck-anatomy .da-bottom { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 16px; border-top: 0.5pt solid rgba(239,234,224,0.18); }

.deck-anatomy .da-stats { display: flex; gap: 16px; }

.deck-anatomy .da-stat .n { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--bg); }

.deck-anatomy .da-stat .l { font-family: var(--mono); font-size: 8.5px; color: rgba(239,234,224,0.5); letter-spacing: 0.04em; text-transform: uppercase; }

.deck-anatomy .da-cta { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.05em; padding: 4px 10px; border-radius: 99px; background: rgba(61, 82, 64,0.12); }

.deck-anatomy .da-right { padding: 28px 32px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 8px; background: linear-gradient(180deg, rgba(26,22,18,0.95), rgba(26,22,18,0.85)); }

.deck-anatomy .da-tile { border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(239,234,224,0.04); border: 0.5pt solid rgba(239,234,224,0.12); color: var(--bg); }

.deck-anatomy .da-tile.starred { background: var(--accent); border-color: var(--accent); color: var(--ink); grid-row: span 2; padding: 14px 16px; }

.deck-anatomy .da-tile .tn { font-family: var(--serif); font-weight: 500; font-size: 13px; opacity: 0.55; line-height: 1; }

.deck-anatomy .da-tile.starred .tn { font-size: 22px; opacity: 0.6; }

.deck-anatomy .da-tile .tt { font-family: var(--serif); font-weight: 500; font-size: 10px; line-height: 1.15; margin-top: 4px; letter-spacing: -0.01em; }

.deck-anatomy .da-tile.starred .tt { font-size: 16px; line-height: 1.05; margin-top: 8px; }

.deck-anatomy .da-tile .tg { font-family: var(--mono); font-size: 7.5px; opacity: 0.55; letter-spacing: 0.04em; }

.deck-anatomy .da-tag { position: absolute; background: var(--accent); color: var(--ink); font-family: var(--mono); font-size: 9px; padding: 3px 7px; border-radius: 99px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; z-index: 2; }

.deck-anatomy .da-keys { padding: 24px 32px; background: var(--paper); border-top: var(--bw) solid var(--line); }

.deck-anatomy .da-keys h4 { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding-bottom: 12px; border-bottom: var(--bw) solid var(--line); margin-bottom: 6px; }

.deck-anatomy .key-row { padding: 10px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 12.5px; line-height: 1.55; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; }

.deck-anatomy .key-row:last-child { border-bottom: none; }

.deck-anatomy .key-row .nm { font-family: var(--mono); color: var(--accent); font-size: 11px; letter-spacing: 0.04em; font-weight: 500; }

.deck-anatomy .key-row .lbl b { font-family: var(--serif); font-weight: 500; font-style: italic; font-weight: 400; color: var(--ink); }

.when-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.wd { border-radius: var(--r-md); border: var(--bw) solid var(--line); overflow: hidden; }

.wd .head { padding: 14px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.wd.yes .head { background: rgba(60,90,70,0.10); color: #2D6A45; border-bottom: var(--bw) solid var(--line); }

.wd.no .head { background: rgba(61, 82, 64,0.10); color: var(--accent-deep); border-bottom: var(--bw) solid var(--line); }

.wd .body { background: #fff; padding: 18px 22px; }

.wd .body ul { list-style: none; padding: 0; margin: 0; }

.wd .body li { padding: 9px 0; border-bottom: var(--bw) solid var(--line-soft); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.wd .body li:last-child { border-bottom: none; }

.wd.yes .body li::before { content: '+'; color: #2D6A45; font-family: var(--mono); flex-shrink: 0; }

.wd.no .body li::before { content: '—'; color: var(--accent-deep); font-family: var(--mono); flex-shrink: 0; }

.wd .body li b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.stages { margin-top: 36px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 28px 32px; }

.stages-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; position: relative; padding-top: 14px; }

.stages-grid::before { content: ''; position: absolute; top: 21px; left: 7px; right: 7px; height: 1px; background: var(--line); }

.stage-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.stage-cell .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 1pt solid var(--line); position: relative; z-index: 1; }

.stage-cell .dot.active { background: var(--accent); border-color: var(--accent); }

.stage-cell .day { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; }

.stage-cell .nm { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: -0.015em; line-height: 1.15; }

.stage-cell .nm em { font-style: italic; font-weight: 400; color: var(--muted); font-size: 11px; display: block; margin-top: 2px; }

.stage-cell .out { font-size: 11px; color: var(--ink-soft); line-height: 1.5; padding-top: 8px; margin-top: 8px; border-top: var(--bw) solid var(--line-soft); }

.stage-cell .out b { color: var(--accent-deep); font-weight: 500; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 2px; }

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

.role-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px 22px; }

.role-card .nm { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.role-card .who { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; margin-top: 4px; }

.role-card .who em { font-style: italic; font-weight: 400; color: var(--muted); }

.role-card .does { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; padding-top: 10px; border-top: var(--bw) solid var(--line); line-height: 1.55; }

.role-card .does b { color: var(--ink); font-weight: 500; }

.role-card .when { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; margin-top: 10px; text-transform: uppercase; }

.deck-template { margin-top: 32px; background: var(--ink); color: var(--bg); border-radius: var(--r-md); overflow: hidden; }

.deck-template .dt-head { display: flex; justify-content: space-between; padding: 14px 22px; border-bottom: 0.5pt solid rgba(239,234,224,0.18); }

.deck-template .dt-head .ttl { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.deck-template .dt-head .copy-btn { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.7); letter-spacing: 0.04em; padding: 4px 10px; background: rgba(239,234,224,0.08); border: 0.5pt solid rgba(239,234,224,0.18); border-radius: 4px; text-transform: uppercase; cursor: pointer; }

.deck-template .dt-body { padding: 22px 26px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: rgba(239,234,224,0.85); white-space: pre-wrap; }

.deck-template .dt-body .h { color: var(--accent); font-weight: 500; }

.deck-template .dt-body .placeholder { background: rgba(61, 82, 64,0.18); padding: 0 4px; border-radius: 2px; color: var(--accent); }

.decisions { margin-top: 32px; }

.dec { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: flex-start; padding: 18px 22px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; }

.dec-num { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1; color: var(--accent); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; padding-top: 2px; }

.dec-body { min-width: 0; }

.dec-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }

.dec-t { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; margin-top: 4px; color: var(--ink); }

.dec-t em { font-style: italic; font-weight: 400; color: var(--muted); }

.dec-d { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-top: 6px; }

.dec-tag { flex-shrink: 0; padding-top: 3px; }

.pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.pill.accent { background: var(--accent-soft); color: var(--accent-deep); }

.pill.tinta { background: var(--ink); color: var(--bg); }

.pill.neutral { background: var(--line-soft); color: var(--ink-soft); }

.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.screen-card { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.screen-card .sc-mock { background: var(--ink); padding: 32px 24px; min-height: 200px; display: flex; align-items: center; justify-content: center; position: relative; color: var(--bg); }

.screen-card .sc-mock .ph { font-family: var(--serif); font-style: italic; color: rgba(239,234,224,0.5); font-size: 13px; }

.screen-card .sc-mock .badge { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: 9px; padding: 3px 8px; border-radius: 99px; background: rgba(61, 82, 64,0.2); color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }

.screen-card .sc-meta { padding: 14px 18px; }

.screen-card .sc-meta .num { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.screen-card .sc-meta .nm { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.015em; margin-top: 4px; }

.screen-card .sc-meta .nm em { font-style: italic; font-weight: 400; color: var(--muted); }

.screen-card .sc-meta .desc { font-size: 12px; color: var(--ink-soft); margin-top: 8px; padding-top: 8px; border-top: var(--bw) solid var(--line); line-height: 1.55; }

.screen-card .sc-states { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.screen-card .sc-states .st { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border: var(--bw) solid var(--line); border-radius: 3px; color: var(--muted); letter-spacing: 0.04em; }

.screen-card .sc-states .st.active { background: var(--accent-soft); color: var(--accent-deep); border-color: rgba(61, 82, 64,0.25); }

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

.rm { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.rm.mvp { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.rm.v2 { background: var(--paper); }

.rm.v3 { background: #fff; }

.rm .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; }

.rm.mvp .label { opacity: 0.7; }

.rm .when-r { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.025em; margin: 4px 0 12px; }

.rm .when-r em { font-style: italic; font-weight: 400; opacity: 0.65; }

.rm ul { list-style: none; padding: 0; margin: 0; }

.rm li { padding: 8px 0; border-bottom: var(--bw) solid rgba(0,0,0,0.08); font-size: 12.5px; line-height: 1.5; }

.rm.mvp li { border-bottom-color: rgba(26,22,18,0.15); }

.rm li:last-child { border-bottom: none; }

.postmortem { margin-top: 32px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 28px 32px; max-width: 760px; }

.postmortem h4 { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.postmortem .pm-q { margin-top: 14px; padding: 12px 0; border-bottom: var(--bw) solid var(--line); }

.postmortem .pm-q:last-child { border-bottom: none; }

.postmortem .pm-q .q { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.015em; line-height: 1.3; }

.postmortem .pm-q .q em { font-style: italic; font-weight: 400; color: var(--muted); }

.postmortem .pm-q .a { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.55; font-family: var(--serif); font-style: italic; }

.met-crisis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }

.mc { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; border-left: 2px solid var(--accent); }

.mc .when { font-family: var(--mono); font-size: 10px; color: var(--accent-deep); letter-spacing: 0.06em; text-transform: uppercase; }

.mc .what { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.015em; margin-top: 6px; line-height: 1.2; }

.mc .what em { font-style: italic; font-weight: 400; color: var(--muted); }

.mc .do { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink); margin-top: 12px; line-height: 1.55; padding: 10px 14px; background: var(--paper); border-radius: 6px; border-left: 2px solid var(--ink-soft); }

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

html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01","cv11"; }

body { transition: background 0.3s; }

.view { display: none; }

.view.active { display: block; }

body[data-view="home"] { overflow: hidden; background: var(--bg); }

body[data-view="esencia"], body[data-view="identidad"], body[data-view="voz"], body[data-view="lanzamientos"], body[data-view="metodologia"], body[data-view="compania"], body[data-view="slides"], body[data-view="aplicacion"], body[data-view="casos"], body[data-view="recursos"] { overflow: auto; background: var(--bg); }

.view-home .page-hero { width: 100vw; height: 100vh; background: var(--bg); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; position: relative; }

.view-home .page-hero::after { content: ''; position: absolute; inset: 0; background: none; pointer-events: none; }

.view-home .ph-left { padding: 48px 64px 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; }

.view-home .ph-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.view-home .brand { display: flex; align-items: center; gap: 10px; }

.view-home .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.view-home .brand .mark { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.025em; color: var(--ink); }

.view-home .brand .mark em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-home .brand .v { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 2px 7px; border: 0.5pt solid var(--line); border-radius: 4px; letter-spacing: 0.04em; }

.view-home .ph-trail { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; }

.view-home .ph-trail b { color: var(--ink); font-weight: 500; }

.view-home .ph-mid { padding: 24px 0; }

.view-home .ph-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); color: var(--accent-deep); border: 0.5pt solid rgba(61, 82, 64,0.25); padding: 5px 12px; border-radius: 99px; font-family: var(--sans); font-size: 11px; font-weight: 500; margin-bottom: 18px; }

.view-home .ph-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-home .ph-title { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); }

.view-home .ph-title .ac { color: var(--accent); }

.view-home .ph-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); letter-spacing: -0.025em; }

.view-home .ph-sub { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 22px 0 0; max-width: 460px; }

.view-home .ph-sub em { font-style: italic; color: var(--muted); }

.view-home .ph-bottom { padding-top: 22px; border-top: 0.5pt solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.view-home .ph-stats { display: flex; gap: 32px; }

.view-home .ph-stat { display: flex; flex-direction: column; gap: 3px; }

.view-home .ph-stat-num { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }

.view-home .ph-stat-l { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

.view-home .ph-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--bg); padding: 11px 17px 11px 19px; border-radius: 99px; font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: transform 0.1s ease; }

.view-home .ph-cta:active { transform: scale(0.98); }

.view-home .ph-cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; transition: transform 0.16s; }

.view-home .ph-cta:hover .arr { transform: translateX(2px); }

.view-home .ph-right { padding: 28px 40px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; position: relative; z-index: 1; }

.view-home .ph-section { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease; background: var(--paper); border: 0.5pt solid var(--line-soft); color: var(--ink); position: relative; }

.view-home .ph-section:hover { transform: translateY(-2px); border-color: var(--line); }

.view-home .ph-section.starred { background: var(--accent); border-color: var(--accent); color: var(--bg); grid-row: span 2; padding: 22px 24px; }

.view-home .ph-section.locked { opacity: 0.55; cursor: not-allowed; }

.view-home .ph-section.locked:hover { transform: none; border-color: var(--line-soft); }

.view-home .ph-section.open-2 { background: var(--paper); border-color: var(--line-soft); }

.view-home .ph-s-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.view-home .ph-s-num { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; opacity: 0.45; line-height: 1; font-feature-settings: "tnum" 1; }

.view-home .ph-section.starred .ph-s-num { opacity: 0.6; font-size: 30px; }

.view-home .ph-section.open-2 .ph-s-num { color: var(--accent-deep); opacity: 0.85; }

.view-home .ph-s-status { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; opacity: 0.75; padding: 2px 6px; border-radius: 3px; background: rgba(26,22,18,0.04); border: 0.5pt solid var(--line); color: var(--ink-soft); }

.view-home .ph-section.starred .ph-s-status { background: rgba(239,234,224,0.16); border-color: rgba(239,234,224,0.32); color: var(--bg); opacity: 0.95; }

.view-home .ph-s-status.open { background: rgba(61, 82, 64,0.12); border-color: rgba(61, 82, 64,0.28); color: var(--accent-deep); opacity: 1; }

.view-home .ph-s-title { font-family: var(--serif); font-weight: 500; font-size: 12px; letter-spacing: -0.015em; line-height: 1.18; margin-top: 6px; }

.view-home .ph-section.starred .ph-s-title { font-size: 22px; line-height: 1.05; margin-top: 10px; }

.view-home .ph-s-title em { font-style: italic; font-weight: 400; opacity: 0.65; }

.view-home .ph-s-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }

.view-home .ph-s-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em; font-weight: 500; opacity: 0.6; }

.view-home .ph-section.starred .ph-s-tag { opacity: 0.75; }

.view-home .ph-s-arrow { font-size: 12px; opacity: 0.5; transition: transform 0.16s, opacity 0.16s; }

.view-home .ph-section:hover:not(.locked) .ph-s-arrow { opacity: 1; transform: translateX(2px); }

.view-home .ph-section.locked .ph-s-arrow { display: none; }

.view-home .corner-status { position: absolute; bottom: 18px; right: 24px; z-index: 3; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.05em; display: flex; gap: 14px; align-items: center; }

.view-home .corner-status .live { display: inline-flex; gap: 6px; align-items: center; }

.view-home .corner-status .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.view-scroll .wrap { max-width: 1120px; margin: 0 auto; padding: 0 48px 120px; }

.view-scroll .topbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 48px; border-bottom: var(--bw) solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }

.view-scroll .topbar .left { display: flex; align-items: center; gap: 18px; }

.view-scroll .back { color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.16s; background: none; border: none; padding: 0; font-family: inherit; }

.view-scroll .back:hover { color: var(--ink); }

.view-scroll .crumb { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }

.view-scroll .crumb .sep { opacity: 0.4; }

.view-scroll .crumb b { color: var(--ink); font-weight: 500; }

.view-scroll .topbar .right { display: flex; align-items: center; gap: 14px; }

.view-scroll .v-pill { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 3px 8px; border: var(--bw) solid var(--line); border-radius: 4px; letter-spacing: 0.04em; }

.view-scroll .nav-pill { font-family: var(--mono); font-size: 10px; color: var(--accent); padding: 3px 9px; background: rgba(61, 82, 64,0.08); border: var(--bw) solid rgba(61, 82, 64,0.25); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; }

.view-scroll .hero { padding: 80px 0 24px; }

.view-scroll .hero-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .hero-eyebrow .num { color: var(--accent); }

.view-scroll h1.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.04em; margin: 16px 0 18px; }

.view-scroll h1.hero-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.view-scroll h1.hero-title .ac { color: var(--accent); }

.view-scroll .hero-sub { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 580px; margin-bottom: 24px; }

.view-scroll .hero-sub b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.view-scroll .toc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 11.5px; font-weight: 500; border: var(--bw) solid rgba(61, 82, 64,0.25); margin-top: 8px; }

.view-scroll .toc-pill .live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }

.view-scroll section { margin-top: 88px; border-top: var(--bw) solid var(--line); padding-top: 36px; }

.view-scroll .sec-eyebrow { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.view-scroll .sec-eyebrow .num { color: var(--accent); }

.view-scroll h2.sec-title { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; margin: 10px 0 8px; }

.view-scroll h2.sec-title em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-scroll .sec-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }

.view-scroll .sec-sub b { color: var(--ink); font-weight: 500; }

.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }

.swatch { border-radius: var(--r-lg); overflow: hidden; border: var(--bw) solid var(--line); background: #fff; }

.swatch .c { height: 130px; }

.swatch .meta-block { padding: 14px 16px; }

.swatch .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }

.swatch .hx { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }

.swatch .role { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }

.princs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }

.princ { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 22px 24px; }

.princ .num { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 12px; letter-spacing: 0.02em; }

.princ .t { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; margin: 6px 0 10px; line-height: 1.15; }

.princ .t em { font-style: italic; font-weight: 400; color: var(--muted); }

.princ .d { font-size: 13.5px; line-height: 1.6; color: var(--ink); }

.pull { margin: 32px 0 36px; padding: 22px 26px; border-left: 3px solid var(--accent); font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.45; letter-spacing: -0.015em; color: var(--ink); font-style: italic; max-width: 760px; }

.pull cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.next-up { margin-top: 96px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }

.next-up .k { font-family: var(--mono); font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.next-up h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.025em; margin: 8px 0 6px; line-height: 1.15; }

.next-up h3 em { font-style: italic; font-weight: 400; color: rgba(239,234,224,0.55); }

.next-up p { font-size: 13.5px; line-height: 1.55; color: rgba(239,234,224,0.7); max-width: 560px; }

.next-up .cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink); padding: 11px 17px 11px 19px; border-radius: var(--r-pill); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; }

.next-up .cta:disabled { opacity: 0.5; cursor: not-allowed; }

.next-up .cta .arr { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

.view-scroll footer { margin-top: 56px; padding-top: 22px; border-top: var(--bw) solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

.view-scroll footer button { color: var(--ink); text-decoration: none; background: none; border: none; font-family: inherit; font-size: inherit; cursor: pointer; letter-spacing: inherit; padding: 0; }

.view-scroll footer button:hover { color: var(--accent); }

.view-placeholder { padding: 120px 48px; text-align: center; max-width: 720px; margin: 0 auto; }

.view-placeholder .k { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.view-placeholder h2 { font-family: var(--serif); font-weight: 500; font-size: 48px; letter-spacing: -0.03em; margin: 14px 0 16px; }

.view-placeholder h2 em { font-style: italic; font-weight: 400; color: var(--muted); }

.view-placeholder p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }

.rules h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin: 0 0 14px; }

.rules h4 em { font-style: italic; font-weight: 400; color: var(--muted); }

.rules ul { list-style: none; padding: 0; margin: 0; }

.rules li { padding: 10px 0; border-bottom: var(--bw) solid var(--line); font-size: 13px; line-height: 1.55; display: flex; gap: 10px; }

.rules li::before { content: ''; width: 14px; flex-shrink: 0; font-weight: 500; font-family: var(--mono); }

.rules .never li::before { content: '—'; color: var(--accent-deep); }

.rules .always li::before { content: '+'; color: var(--ink-soft); }

.rules b { color: var(--ink); font-weight: 500; font-family: var(--serif); font-style: italic; font-weight: 400; }

.ai-prompt { margin-top: 32px; background: var(--ink); color: var(--bg); border-radius: var(--r-md); overflow: hidden; }

.ai-prompt .ap-head { display: flex; justify-content: space-between; padding: 14px 22px; border-bottom: 0.5pt solid rgba(239,234,224,0.18); }

.ai-prompt .ap-head .ttl { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }

.ai-prompt .copy-btn { font-family: var(--mono); font-size: 10px; color: rgba(239,234,224,0.7); letter-spacing: 0.04em; padding: 4px 10px; background: rgba(239,234,224,0.08); border: 0.5pt solid rgba(239,234,224,0.18); border-radius: 4px; text-transform: uppercase; cursor: pointer; }

.ai-prompt .ap-body { padding: 22px 26px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: rgba(239,234,224,0.85); white-space: pre-wrap; }

.ai-prompt .ap-body .h { color: var(--accent); font-weight: 500; }

.ai-prompt .ap-body .placeholder { background: rgba(61, 82, 64,0.18); padding: 0 4px; border-radius: 2px; color: var(--accent); }

/* crescō · compañía · org map · v1.0 */
.org-map { position: relative; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-lg); margin-top: 36px; aspect-ratio: 1.5/1; overflow: hidden; max-width: 1080px; }
.org-map svg.connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.org-map .conn-solid { stroke: var(--ink); stroke-width: 1; fill: none; opacity: 0.65; }
.org-map .conn-dashed { stroke: var(--ink-soft); stroke-width: 0.8; fill: none; stroke-dasharray: 4 4; opacity: 0.55; }
.org-map .conn-accent { stroke: var(--accent); stroke-width: 1.2; fill: none; stroke-dasharray: 6 4; }
.org-map .conn-meta { stroke: var(--accent-deep); stroke-width: 1; fill: none; stroke-dasharray: 2 4; opacity: 0.7; }
.org-map .circle { position: absolute; background: #fff; border: 1pt solid var(--ink); border-radius: 50%; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-family: var(--sans); z-index: 2; box-sizing: border-box; }
.org-map .circle .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.org-map .circle .nm { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.org-map .circle .nm em { font-style: italic; font-weight: 400; color: var(--muted); font-size: 12px; display: block; margin-top: 3px; letter-spacing: 0; }
.org-map .circle .roles-mini { margin-top: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--ink-soft); line-height: 1.4; letter-spacing: 0.02em; }
.org-map .circle .roles-mini .agent { color: var(--accent); }
.org-map .circle.anchor { top: 4%; left: 50%; transform: translate(-50%, 0); width: 19%; aspect-ratio: 1.7/1; background: var(--ink); border-color: var(--ink); }
.org-map .circle.anchor .lbl { color: rgba(239,234,224,0.55); }
.org-map .circle.anchor .nm { color: var(--bg); }
.org-map .circle.anchor .nm em { color: rgba(239,234,224,0.55); }
.org-map .circle.anchor .roles-mini { color: rgba(239,234,224,0.7); }
.org-map .circle.operativo { width: 18%; aspect-ratio: 1.05/1; top: 36%; }
.org-map .circle.operativo.p { left: 4%; }
.org-map .circle.operativo.c { left: 50%; transform: translate(-50%, 0); }
.org-map .circle.operativo.o { right: 4%; }
.org-map .circle.transversal { top: 64%; left: 50%; transform: translate(-50%, 0); width: 30%; aspect-ratio: 2.6/1; border: 1.5pt dashed var(--accent); background: rgba(218, 226, 217, 0.4); }
.org-map .circle.transversal .lbl { color: var(--accent-deep); }
.org-map .circle.helping, .org-map .circle.meta { top: 86%; width: 17%; aspect-ratio: 1.7/1; border-radius: 14px 18px 14px 18px / 18px 14px 18px 14px; }
.org-map .circle.helping.left { left: 4%; }
.org-map .circle.helping.right { right: 4%; }
.org-map .circle.meta { left: 50%; transform: translate(-50%, 0); border: 1.5pt solid var(--accent); background: rgba(218, 226, 217, 0.5); }
.org-map .circle.meta .lbl { color: var(--accent-deep); }
.org-map .legend { position: absolute; bottom: 12px; right: 16px; z-index: 3; display: flex; gap: 14px; font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; align-items: center; flex-wrap: wrap; max-width: 50%; justify-content: flex-end; background: rgba(247,243,234,0.85); padding: 6px 10px; border: 0.5pt solid var(--line); border-radius: 6px; backdrop-filter: blur(2px); }
.org-map .legend .li { display: inline-flex; align-items: center; gap: 5px; }
.org-map .legend .li .swatch { display: inline-block; width: 20px; height: 1.5px; }
.org-map .legend .li .swatch.solid { background: var(--ink); }
.org-map .legend .li .swatch.dashed { background: repeating-linear-gradient(to right, var(--ink-soft) 0 4px, transparent 4px 8px); }
.org-map .legend .li .swatch.accent { background: repeating-linear-gradient(to right, var(--accent) 0 6px, transparent 6px 10px); }

@media (max-width: 720px) {
  .org-map { aspect-ratio: 0.9/1; }
  .org-map .circle .nm { font-size: 13px; }
  .org-map .circle .nm em { font-size: 10px; }
  .org-map .circle .roles-mini { display: none; }
}

/* crescō · compañía · cast (person cards) · v1.0 */
.cast-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.person { background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 18px 18px 16px; position: relative; display: flex; flex-direction: column; }
.person .pin { position: absolute; top: -8px; right: 14px; font-family: var(--mono); font-size: 9px; color: var(--accent-deep); background: var(--accent-soft); border: 0.5pt solid var(--accent); padding: 2px 8px; border-radius: 99px; letter-spacing: 0.04em; text-transform: uppercase; }
.person .pin.bridge { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.person .av { width: 52px; height: 52px; border-radius: 50%; background: var(--paper); border: 1pt solid var(--ink); display: grid; place-items: center; font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px; }
.person .av.bridge { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.person h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: -0.025em; margin: 0; }
.person .who { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
.person .roles { list-style: none; padding: 0; margin: 12px 0 0; padding-top: 12px; border-top: 0.5pt solid var(--line); }
.person .roles li { padding: 5px 0; font-size: 12px; line-height: 1.4; color: var(--ink); display: flex; gap: 6px; align-items: baseline; }
.person .roles li::before { content: '·'; color: var(--ink-soft); font-weight: 600; flex-shrink: 0; }
.person .roles li.agent { color: var(--accent); }
.person .roles li.agent::before { content: '⌬'; color: var(--accent); font-size: 11px; }
.person .roles li .ctx { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-left: auto; }
.person .stats-mini { margin-top: 10px; padding-top: 10px; border-top: 0.5pt solid var(--line-soft); font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; display: flex; gap: 12px; }
.person .stats-mini b { color: var(--ink); font-weight: 500; }

/* Matrix · persons × circles */
.matrix-roles { margin-top: 32px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.matrix-roles table { width: 100%; border-collapse: collapse; }
.matrix-roles th, .matrix-roles td { padding: 12px 14px; border-bottom: 0.5pt solid var(--line-soft); border-right: 0.5pt solid var(--line-soft); text-align: left; vertical-align: top; }
.matrix-roles th:last-child, .matrix-roles td:last-child { border-right: none; }
.matrix-roles thead tr { background: var(--paper); }
.matrix-roles thead th { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; border-bottom: 0.5pt solid var(--line); }
.matrix-roles thead th.col-circle { color: var(--ink); }
.matrix-roles tbody td.row-head { background: var(--paper); font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.015em; color: var(--ink); width: 130px; }
.matrix-roles tbody td.row-head em { font-style: italic; font-weight: 400; color: var(--muted); display: block; font-size: 11px; margin-top: 2px; line-height: 1.3; }
.matrix-roles tbody tr:last-child td { border-bottom: none; }
.matrix-roles .role-cell { display: inline-block; font-family: var(--sans); font-size: 11px; padding: 2px 8px; border: 0.5pt solid var(--line); background: #fff; border-radius: 99px; margin: 2px 2px 2px 0; color: var(--ink); letter-spacing: -0.005em; }
.matrix-roles .role-cell.lead { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 500; }
.matrix-roles .role-cell.rep { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 500; }
.matrix-roles .role-cell.agent { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.matrix-roles .role-cell.bridge { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }
.matrix-roles .empty-cell { font-family: var(--mono); font-size: 10px; color: var(--muted); opacity: 0.4; letter-spacing: 0.04em; }
.matrix-legend { display: flex; gap: 14px; padding: 12px 16px; background: var(--paper); border-top: 0.5pt solid var(--line); font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; flex-wrap: wrap; }
.matrix-legend .li { display: inline-flex; align-items: center; gap: 6px; }
.matrix-legend .swatch { display: inline-block; width: 22px; height: 12px; border-radius: 99px; border: 0.5pt solid var(--line); }
.matrix-legend .swatch.lead { background: var(--ink); border-color: var(--ink); }
.matrix-legend .swatch.rep { background: var(--accent); border-color: var(--accent); }
.matrix-legend .swatch.agent { background: #fff; border-style: dashed; border-color: var(--accent); }
.matrix-legend .swatch.bridge { background: var(--accent-soft); border-color: var(--accent); }

/* Constellation · Venn-like diagram */
.constellation { position: relative; margin-top: 32px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-lg); aspect-ratio: 1.4/1; max-width: 1080px; overflow: hidden; }
.constellation .blob { position: absolute; border-radius: 50%; opacity: 0.55; mix-blend-mode: multiply; }
.constellation .blob.producto { width: 36%; aspect-ratio: 1; left: 6%; top: 16%; background: rgba(61, 82, 64, 0.18); border: 1pt solid var(--accent-deep); }
.constellation .blob.cliente { width: 36%; aspect-ratio: 1; right: 6%; top: 16%; background: rgba(61, 82, 64, 0.14); border: 1pt solid var(--accent-deep); }
.constellation .blob.ops { width: 38%; aspect-ratio: 1; left: 50%; top: 38%; transform: translateX(-50%); background: rgba(26, 22, 18, 0.10); border: 1pt solid var(--ink); }
.constellation .blob.ventas { width: 32%; aspect-ratio: 1; right: 14%; bottom: 6%; background: rgba(61, 82, 64, 0.20); border: 1.5pt dashed var(--accent); }
.constellation .blob.rrhh { width: 32%; aspect-ratio: 1; left: 14%; bottom: 6%; background: rgba(61, 82, 64, 0.20); border: 1.5pt dashed var(--accent); }
.constellation .blob-label { position: absolute; font-family: var(--mono); font-size: 10px; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; background: var(--bg); border: 0.5pt solid var(--line); padding: 3px 8px; border-radius: 4px; z-index: 3; font-weight: 500; }
.constellation .blob-label.acc { color: var(--accent-deep); border-color: var(--accent); }
.constellation .person-dot { position: absolute; font-family: var(--serif); font-weight: 500; font-size: 12px; color: var(--ink); background: #fff; border: 1pt solid var(--ink); padding: 4px 10px; border-radius: 99px; line-height: 1; letter-spacing: -0.01em; z-index: 4; white-space: nowrap; box-shadow: 0 0 0 2px var(--bg); }
.constellation .person-dot.bridge { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.constellation .person-dot.agent { border-style: dashed; border-color: var(--accent); color: var(--accent); background: var(--bg); }
.constellation .pin { position: absolute; font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--accent-deep); background: var(--bg); border: 0.5pt solid var(--accent); padding: 4px 10px; border-radius: 6px; z-index: 5; line-height: 1.3; max-width: 200px; }
.constellation svg.bridges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.constellation svg.bridges path { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; opacity: 0.7; }

@media (max-width: 880px) {
  .cast-grid { grid-template-columns: repeat(2, 1fr); }
  .matrix-roles { font-size: 11px; overflow-x: auto; }
  .constellation { aspect-ratio: 1/1; }
  .constellation .person-dot { font-size: 10px; padding: 2px 6px; }
}

/* crescō · compañía · matrix invertida (persons en cells) · v1.0 */
.matrix-persons { margin-top: 32px; background: #fff; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.matrix-persons table { width: 100%; border-collapse: collapse; }
.matrix-persons th, .matrix-persons td { padding: 14px 14px; border-bottom: 0.5pt solid var(--line-soft); border-right: 0.5pt solid var(--line-soft); text-align: left; vertical-align: top; }
.matrix-persons th:last-child, .matrix-persons td:last-child { border-right: none; }
.matrix-persons thead tr { background: var(--paper); }
.matrix-persons thead th { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; border-bottom: 0.5pt solid var(--line); }
.matrix-persons thead th.col-circle { color: var(--ink); }
.matrix-persons tbody td.row-head { background: var(--paper); font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: -0.015em; color: var(--ink); width: 130px; }
.matrix-persons tbody td.row-head em { font-style: italic; font-weight: 400; color: var(--muted); display: block; font-size: 11px; margin-top: 2px; line-height: 1.3; }
.matrix-persons tbody td.row-head .swatch-mini { display: inline-block; width: 18px; height: 8px; border-radius: 99px; margin-right: 6px; vertical-align: middle; border: 0.5pt solid var(--line); }
.matrix-persons tbody td.row-head .swatch-mini.lead { background: var(--ink); border-color: var(--ink); }
.matrix-persons tbody td.row-head .swatch-mini.rep { background: var(--accent); border-color: var(--accent); }
.matrix-persons tbody td.row-head .swatch-mini.spec { background: #fff; }
.matrix-persons tbody td.row-head .swatch-mini.agent { background: #fff; border-style: dashed; border-color: var(--accent); }
.matrix-persons tbody tr:last-child td { border-bottom: none; }
.matrix-persons .person-chip { display: inline-block; font-family: var(--serif); font-weight: 500; font-size: 13px; padding: 4px 10px; border: 0.5pt solid var(--line); background: #fff; border-radius: 99px; margin: 2px 3px 2px 0; color: var(--ink); letter-spacing: -0.005em; line-height: 1.3; }
.matrix-persons .person-chip em { font-style: italic; font-weight: 400; color: var(--muted); font-size: 11px; }
.matrix-persons .person-chip.filled { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 500; }
.matrix-persons .person-chip.bridge { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 600; }
.matrix-persons .person-chip.vacant { background: var(--paper); color: var(--ink-soft); border-style: dashed; border-color: var(--line); }
.matrix-persons .person-chip.agent { border-style: dashed; border-color: var(--accent); color: var(--accent); background: #fff; }
.matrix-persons .person-chip.agent::before { content: '⌬ '; }
.matrix-persons .person-chip .arr { font-size: 10px; opacity: 0.7; margin-left: 3px; }
.matrix-persons tr.lead-row td { background: rgba(26, 22, 18, 0.025); }
.matrix-persons tr.rep-row td { background: rgba(61, 82, 64, 0.04); }
.matrix-persons tr.bridge-row td { background: rgba(218, 226, 217, 0.30); }
.matrix-persons .empty-cell { font-family: var(--mono); font-size: 10px; color: var(--muted); opacity: 0.4; letter-spacing: 0.04em; }
.matrix-persons .meta-row { padding: 12px 16px; background: var(--paper); border-top: 0.5pt solid var(--line); font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; display: flex; gap: 16px; flex-wrap: wrap; }
.matrix-persons .meta-row b { color: var(--ink); font-weight: 500; }

/* =====================================================================
 * crescō · responsive · v1.0
 * mobile-first NO. el manual nace desktop. acá lo bajamos a tablet/mobile
 * sin reescribir nada — solo collapse de grids y reducción de padding.
 * breakpoints: 1080 / 880 / 640 (alineados con tokens.css --bp-*)
 * ===================================================================== */

/* tablet horizontal · 1080px */
@media (max-width: 1080px) {
  .view-scroll .wrap { padding: 0 32px 96px; }
  .view-scroll h1.hero-title { font-size: clamp(40px, 6.5vw, 64px); }
  .view-scroll h2.sec-title { font-size: 30px; }

  .icon-grid { grid-template-columns: repeat(6, 1fr); }
  .tokens { grid-template-columns: repeat(2, 1fr); }
  .refs { grid-template-columns: repeat(2, 1fr); }
  .misuse { grid-template-columns: repeat(2, 1fr); }
  .pairings { grid-template-columns: repeat(2, 1fr); }
}

/* tablet vertical · 880px */
@media (max-width: 880px) {
  /* home: stack vertical, scroll permitido */
  .view-home .page-hero { height: auto; min-height: 100vh; grid-template-columns: 1fr; }
  .view-home .ph-left { padding: 32px 28px 24px; }
  .view-home .ph-right { padding: 24px 28px 40px; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 10px; }
  .view-home .ph-title { font-size: clamp(40px, 8vw, 56px); }
  .view-home .ph-sub { font-size: 15px; max-width: 100%; }
  .view-home .corner-status { display: none; }
  .view-home .ph-stats { gap: 28px; }

  /* secciones */
  .view-scroll .wrap { padding: 0 24px 80px; }
  .view-scroll .hero { padding: 56px 0 16px; }
  .view-scroll h1.hero-title { font-size: clamp(36px, 7.5vw, 56px); }
  .view-scroll h2.sec-title { font-size: 26px; }
  .view-scroll .hero-sub { font-size: 16px; line-height: 1.55; }

  /* grids comunes — collapse a 2 columnas */
  .palette { grid-template-columns: repeat(2, 1fr); }
  .derivs { grid-template-columns: repeat(2, 1fr); }
  .imagery { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: 1fr; }
  .icon-grid { grid-template-columns: repeat(4, 1fr); padding: 20px; }
  .icon-rules { grid-template-columns: repeat(2, 1fr); }
  .pairings { grid-template-columns: 1fr; }
  .misuse { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; gap: 24px; }
  .refs { grid-template-columns: 1fr; }
  .tokens { grid-template-columns: 1fr; }

  /* type rows · de 2 col a stack */
  .type-row { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
  .img-treatment .row,
  .marca-rules .row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .mp-row { grid-template-columns: 1fr; gap: 16px; padding: 18px 0; }

  /* topbar de cada sección · ajusta */
  .view-scroll .topbar { padding: 14px 20px; flex-wrap: wrap; gap: 8px; }
  .view-scroll .crumb { font-size: 10px; }

  /* manifiesto · padding reducido */
  .manifesto { padding: 28px 24px; }

  /* next-up cta · stack */
  .next-up { grid-template-columns: 1fr; padding: 28px 24px; gap: 18px; }
}

/* mobile · 640px */
@media (max-width: 640px) {
  .view-home .ph-right { grid-template-columns: 1fr; }
  .view-home .ph-stats { flex-wrap: wrap; gap: 20px; }
  .view-home .brand .v { display: none; }

  .view-scroll .wrap { padding: 0 20px 64px; }
  .view-scroll h1.hero-title { font-size: clamp(32px, 9vw, 44px); letter-spacing: -0.03em; }
  .view-scroll h2.sec-title { font-size: 22px; }
  .view-scroll .hero-eyebrow,
  .view-scroll .sec-eyebrow { font-size: 10px; }

  .palette { grid-template-columns: 1fr; }
  .derivs { grid-template-columns: 1fr 1fr; }
  .icon-grid { grid-template-columns: repeat(3, 1fr); }
  .icon-rules { grid-template-columns: 1fr; }

  /* tablas con scroll-x · evita romper layout */
  .matrix-roles, .matrix-persons { overflow-x: auto; }
  .matrix-roles table, .matrix-persons table { min-width: 720px; }

  /* slides · escalar contenedor en mobile (chapter 07) */
  .slide-frame { transform: scale(0.6); transform-origin: top left; }

  /* manifesto */
  .manifesto { margin-top: 24px; padding: 22px 18px; }
  .manifesto blockquote,
  .manifesto p { font-size: 17px; line-height: 1.5; }
}

/* print · básico, evita romper si alguien exporta a PDF */
@media print {
  body { background: #fff; color: #000; }
  .topbar, .corner-status, .ph-cta, .next-up, button { display: none !important; }
  .view { display: block !important; page-break-after: always; }
  a { color: inherit; text-decoration: underline; }
}