/* Vallacorp · Caso 01 · tema claro forzado.
   Tres bloques: 01 coste de mantener la operación · 02 del coste al precio (imprenta) · 03 protección frente a la inflación (gran formato + USD).
   NAVY = resultados · AZUL = operación, estructura y coste · AZULES CLAROS = composición ·
   TERRACOTA = solo recargo comercial (markup) · ARENA = planchas y logística (y costes variables en 01) · VERDE = solo referencia USD.
   Los cuadrados solo aparecen donde representan m² (bloque 01). */
:root {
  color-scheme: light;
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --panel: #F2F5FB;
  --ink: #13213A;
  --ink-2: #3C4A5E;
  --muted: #5D6878;
  --line: #E4E6E8;
  --line-strong: #C9D0D9;
  --accent: #2F63D8;
  --accent-hover: #2451B9;
  --accent-soft: #EDF2FC;
  --accent-mid: #6F98E8;
  --accent-light: #CFDDF7;
  --navy: #173A72;
  --navy-deep: #102B55;
  --comp1: #173A72;
  --comp2: #2F63D8;
  --comp3: #A9C3F0;
  --terra: #C86943;
  --terra-dark: #A34E32;
  --sand: #E6B45D;
  --sand-soft: #F7EDD8;
  --sand-ink: #7A4F10;
  --markup: var(--terra);
  --ext: var(--sand);
  --usd: #208755;
  --usd-deep: #196B43;
  --usd-soft: #DDF2E6;
  --warn: #8F5A12;
  --warn-soft: #FAF0E0;
  --floor-free: #E8EAEC;
  --floor-office: #D7DBE0;
  --radius: 14px;
  --shadow: none;
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.page { --gap: 20px; max-width: 1400px; margin: 0 auto; padding-inline: 24px; padding-block: 36px 44px; display: grid; gap: var(--gap); }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.equation, .eq-list, .waterfall, .comp-legend, .detail, .mini, .mech, .center { font-variant-numeric: tabular-nums; }
small.tech { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em; margin-left: 4px; }

/* ---------- Entrada ---------- */
.hero { display: grid; gap: 14px; }
.case-return { justify-self: start; margin-bottom: -13px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.case-return:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.eyebrow { font-family: var(--f-display); font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hero .eyebrow { color: var(--navy); }
h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 780; font-stretch: 88%; line-height: 1.04; letter-spacing: -.015em; }
h1 .dash { color: var(--line-strong); font-weight: 400; }
h1 .h1-sub { font-weight: 500; color: var(--ink-2); }
.lede { font-size: 17px; color: var(--ink-2); max-width: 62ch; line-height: 1.55; }
.pillars { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pillars li { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 10px; font-weight: 600; font-size: 14px; }
.pillars svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pillars circle { fill: var(--accent); stroke: none; }
.provenance { font-size: 13px; color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.linkish:hover { color: var(--accent-hover); }

/* ---------- Bloques ---------- */
.block { --px: 26px; --pt: 26px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--pt) var(--px); display: grid; gap: 18px; min-width: 0; }
.step-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.num-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--badge, var(--navy)); color: #fff; display: grid; place-items: center; font-size: 12px; letter-spacing: 0; flex: none; }
.block-usd { --badge: var(--usd); }
.block-usd .step-eyebrow { color: var(--usd-deep); }
.block-title { font-size: clamp(22px, 2.4vw, 27px); font-weight: 720; font-stretch: 90%; letter-spacing: -.01em; line-height: 1.15; }
.block-lead { font-size: 15.5px; color: var(--ink-2); max-width: 62ch; }
.title-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: -8px; }
.line-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--navy); border: 1.5px solid var(--accent-light); background: var(--accent-soft); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.block-usd .line-tag { color: var(--usd-deep); border-color: #B9DEC9; background: #F1F8F4; }

/* ================= 01 · Cuánto cuesta mantener la operación ================= */
.a-top { display: grid; gap: 24px; }
.a-part { display: grid; gap: 12px; align-content: start; min-width: 0; }
.part-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.part-title { font-size: 19px; font-weight: 700; font-stretch: 92%; line-height: 1.2; margin-top: -4px; }
.statement { font-size: clamp(22px, 2.3vw, 28px); font-weight: 720; font-stretch: 88%; line-height: 1.14; letter-spacing: -.012em; margin-top: -4px; }
.statement em { font-style: normal; color: var(--accent); }
.statement-sub { font-size: 15px; color: var(--ink-2); max-width: 52ch; }

/* problema: la máquina parada sigue costando */
.idle { margin: 4px 0 0; display: grid; gap: 10px; padding: 16px 18px; background: var(--surface-2); border-radius: 14px; }
.idle-rows { display: grid; gap: 14px; }
.idle-row { display: grid; grid-template-columns: 132px 1fr; gap: 4px 12px; align-items: center; }
.idle-who { display: flex; align-items: center; gap: 8px; grid-row: 1 / span 2; }
.idle-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.idle-row.off .idle-icon { background: var(--floor-free); color: var(--muted); }
.idle-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.idle-state { font-weight: 700; font-size: 14px; }
.idle-track { display: flex; gap: 4px; min-height: 34px; }
.idle-base { flex: 0 0 56%; display: flex; gap: 2px; border-radius: 6px; overflow: hidden; }
.idle-base span { display: block; height: 100%; flex: 0 0 auto; transition: flex-basis .22s ease; }
.idle-var { flex: 1; border: 1.5px dashed var(--sand); background: repeating-linear-gradient(135deg, var(--sand-soft) 0 6px, #FFFFFF 6px 12px); border-radius: 6px; font-size: 11px; line-height: 1.15; font-weight: 650; color: var(--warn); display: flex; align-items: center; padding: 3px 8px; }
.idle-empty { flex: 1; }
.idle-note { font-size: 12.5px; color: var(--ink-2); }
.idle-note b { font-family: var(--f-display); font-size: 14px; font-weight: 720; color: var(--ink); }
.idle figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 8px; }
.idle .lg { display: inline-flex; align-items: center; gap: 6px; }
.idle .lg-src { margin-left: auto; color: var(--muted); }

/* estructura: 363,5 m² en cuadros */
.structure { display: grid; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--panel); }
.structure-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.area-big { font-family: var(--f-display); font-size: 44px; font-weight: 780; font-stretch: 86%; line-height: 1; letter-spacing: -.02em; }
.area-big span { font-size: .42em; color: var(--muted); font-weight: 600; }
.area-meta { display: grid; gap: 2px; }
.kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.area-sub { font-size: 13px; color: var(--ink-2); }
.tags { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 11.5px; font-weight: 600; background: var(--surface); border-radius: 999px; padding: 3px 9px; color: var(--ink-2); }
.floor-wrap { display: grid; gap: 10px; min-width: 0; }
.floor { display: grid; grid-template-columns: repeat(28, 1fr); gap: 2px; }
.floor i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--floor-free); transition: background .2s ease, transform .2s ease; }
.floor i.office { background: var(--floor-office); }
.floor i.other { background: var(--accent-light); }
.floor i.sel { background: var(--accent); transform: scale(1.06); }
.floor i.peek:not(.sel) { background: var(--accent-mid); }
.floor i.gap { grid-column: 1 / -1; aspect-ratio: auto; height: 6px; background: none; }
.floor-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11.5px; color: var(--ink-2); }
.floor-legend li { display: inline-flex; align-items: center; gap: 6px; }
.floor-legend .note { color: var(--muted); }
.sw { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }

.connector { font-size: 13px; color: var(--muted); font-weight: 600; margin: -4px 0 -6px; }
.connector span { color: var(--accent); font-size: 16px; margin-right: 4px; }

/* centros: fila compacta de selección */
.centers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.center { text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; transition: border-color .2s, box-shadow .2s, background .2s, color .2s; }
.center:hover { border-color: var(--accent-mid); }
.center[aria-checked="true"] { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(47, 99, 216, .22); }
.center-icon { grid-row: 1 / span 3; align-self: start; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.center[aria-checked="true"] .center-icon { background: #fff; }
.center-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.center-name { font-family: var(--f-display); font-size: 15.5px; font-weight: 720; font-stretch: 92%; line-height: 1.15; }
.center-fn { font-size: 12px; color: var(--muted); line-height: 1.25; }
.center-m2 { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.center-m2 b { font-family: var(--f-display); font-size: 15px; font-weight: 720; color: var(--ink); }
.center[aria-checked="true"] .center-fn, .center[aria-checked="true"] .center-m2, .center[aria-checked="true"] .center-m2 b { color: rgba(255, 255, 255, .88); }
.center[aria-checked="true"] .center-m2 b { color: #fff; }

/* panel del centro seleccionado */
.buildup { position: relative; display: grid; gap: 14px; padding: 16px 20px 18px; border-radius: 14px; border: 1px solid var(--accent); background: #FFFFFF; --caret-x: 50%; }
.buildup::before, .buildup::after { content: ""; position: absolute; left: var(--caret-x); transform: translateX(-50%); width: 0; height: 0; border-style: solid; transition: left .25s ease; }
.buildup::before { top: -12px; border-width: 0 12px 12px; border-color: transparent transparent var(--accent); }
.buildup::after { top: -10.5px; border-width: 0 11px 11px; border-color: transparent transparent #FFFFFF; }
.buildup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.buildup-center { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 18px; font-weight: 740; font-stretch: 92%; }
.bc-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.bc-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.buildup-caption { font-size: 13.5px; color: var(--ink-2); flex: 1 1 320px; }
.buildup-head .btn-text { margin-left: auto; }
.flow { display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.flow-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.comp-card { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 10px 20px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--panel); }
.comp-card-title { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.comp-card-title small { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted); margin-left: 6px; }
.res { display: grid; gap: 8px; }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.res-list li { display: grid; grid-template-columns: 14px 12px 1fr auto; gap: 8px; align-items: center; background: var(--surface); border-radius: 10px; padding: 7px 12px 7px 8px; }
.res-list .op { color: var(--muted); font-weight: 700; text-align: center; }
.res-list .sw { width: 12px; height: 12px; }
.rl-name { font-size: 14px; font-weight: 650; line-height: 1.2; }
.rl-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.rl-pct { font-family: var(--f-display); font-size: 18px; font-weight: 740; font-stretch: 90%; font-variant-numeric: tabular-nums; }
.donut-wrap { position: relative; width: 156px; aspect-ratio: 1; justify-self: center; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.donut circle { fill: none; stroke-width: 16; }
.d-track { stroke: #FFFFFF; }
.d-seg { transition: stroke-dasharray .25s ease, stroke-dashoffset .25s ease; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dc-value { font-family: var(--f-display); font-size: 22px; font-weight: 770; font-stretch: 86%; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-unit { font-size: 12px; font-weight: 650; color: var(--muted); }
.base-step { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 120px; }
.bs-cap { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.25; max-width: 124px; }
.bs-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 750; white-space: nowrap; }
.bs-pill b { font-size: 17px; }
.bs-arrow { color: var(--accent); }
.bs-arrow svg { width: 40px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.hour-card { display: grid; align-content: center; gap: 5px; padding: 18px 22px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(16, 43, 85, .16); }
.hour-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; }
.hour-icon svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hour-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B7C6EA; }
.hour-value { font-family: var(--f-display); font-size: clamp(30px, 3vw, 40px); font-weight: 780; font-stretch: 86%; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hour-value .unit { font-size: .4em; color: #A9BBE6; font-weight: 650; margin-left: 6px; letter-spacing: .02em; }
.hour-sub { font-size: 12.5px; color: #B7C6EA; }
.comp-card.pulse { animation: pulse .25s ease-out; }
@keyframes pulse { from { box-shadow: 0 0 0 5px rgba(36, 87, 197, .22); } to { box-shadow: 0 0 0 0 rgba(36, 87, 197, 0); } }
.hour-card.pulse { animation: pulseNavy .25s ease-out; }
@keyframes pulseNavy { from { box-shadow: 0 0 0 4px rgba(47, 99, 216, .30); } to { box-shadow: 0 0 0 0 rgba(47, 99, 216, 0); } }

/* ---------- botones y paneles desplegables ---------- */
.btn-text { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--accent); font-weight: 650; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.btn-text::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.btn-text[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.btn-text:hover { color: var(--accent-hover); }
.btn-reset { white-space: nowrap; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 650; cursor: pointer; color: var(--ink-2); }
.btn-reset:hover { border-color: var(--accent); color: var(--accent); }
.reveal { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 14px; animation: reveal .18s ease-out; }
@keyframes reveal { from { opacity: .4; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* detalle (valores exactos) */
.detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.detail-group { display: grid; align-content: start; min-width: 0; }
.detail-group h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--f-body); padding-bottom: 6px; }
.dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dl .d { display: block; font-size: 12px; color: var(--muted); }
.dl .v { text-align: right; white-space: nowrap; }
.dl.sum { font-weight: 700; }
.table-wrap { overflow-x: auto; }
.mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini caption { text-align: left; font-size: 12px; color: var(--muted); padding-bottom: 6px; caption-side: top; }
.mini th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 12px 6px 0; white-space: nowrap; }
.mini td { padding: 7px 12px 7px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.mini .num { text-align: right; }
.mini tr.ref td { font-weight: 650; }
.flash { animation: flash .6s ease-out; }
@keyframes flash { from { background: var(--accent-soft); } to { background: transparent; } }

/* ---------- controles ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 14px 18px; background: #F1F4F9; border-radius: 12px; }
.toolbar-tag { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.toolbar-tag svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tool { display: grid; gap: 7px; }
.tool label, .tool-label { font-size: 12px; font-weight: 650; color: var(--ink-2); }
.tool-range { flex: 1 1 220px; }
.tool-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.range-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.range-row output { font-weight: 700; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
select, input[type="number"] { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; padding: 8px 10px; font-variant-numeric: tabular-nums; min-height: 38px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 8px 14px; min-width: 40px; font-weight: 650; cursor: pointer; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-checked="true"] { background: var(--accent); color: #fff; }
.proc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper input { width: 52px; text-align: center; }
.step-btn { width: 32px; height: 38px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; cursor: pointer; font-size: 16px; }
.unit-h { font-size: 13px; color: var(--muted); margin-left: 2px; }
.input-unit { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); overflow: hidden; }
.input-unit input { border: 0; width: 110px; min-height: 36px; border-radius: 0; }
.input-unit input:focus-visible { outline: none; }
.input-unit:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.input-unit span { padding: 0 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.status { font-size: 12px; font-weight: 650; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.status.hist { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.status.sim { background: var(--warn-soft); color: var(--warn); }
.toolbar-v { display: grid; gap: 14px; align-items: start; }
.toolbar-v .tool-end { margin-left: 0; justify-content: space-between; flex-wrap: wrap; }

.sub { display: grid; gap: 12px; align-content: start; min-width: 0; }
.sub-title { font-size: 16px; font-weight: 700; font-stretch: 92%; }
.sub-note { font-size: 13px; color: var(--muted); }

/* ================= 02 · Del coste al precio ================= */
.b-grid { display: grid; gap: 12px; }
.b-in { display: grid; gap: 20px; align-content: start; min-width: 0; }
.b-out { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.b-note { align-self: start; }
.comp-legend { align-self: start; }

/* coste del trabajo: lista vertical (mismo lenguaje que «Qué incluye») */
.eq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.eq-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--surface-2); border-radius: 10px; padding: 8px 14px 8px 8px; }
.eq-list .op { color: var(--muted); font-weight: 700; text-align: center; }
.el-name { font-size: 14px; font-weight: 650; line-height: 1.2; }
.el-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.el-val { font-family: var(--f-display); font-size: 17px; font-weight: 720; font-stretch: 90%; white-space: nowrap; }
.eq-list li.hour { background: var(--accent-soft); }
.eq-list li.hour .el-name { color: var(--accent); }
.eq-list li.hour .el-name small { color: var(--muted); }
.eq-list li.sim .el-val { color: var(--warn); }
/* resultado del coste del trabajo: pareja visual de la banda del PVP */
.eq-total { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 64px; padding: 12px 16px 12px 8px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(16, 43, 85, .16); }
.eq-total .op { color: #B7C6EA; font-weight: 700; text-align: center; }
.eq-total .el-name { font-family: var(--f-display); font-size: 17px; font-weight: 780; letter-spacing: .02em; }
.eq-total .el-val { font-family: var(--f-display); font-size: 26px; font-weight: 780; font-stretch: 86%; line-height: 1; text-align: right; white-space: nowrap; }
.eq-total .el-val .unit { display: block; font-size: 12px; color: #B7C7EA; font-weight: 650; margin-top: 3px; letter-spacing: .02em; }

/* escalera del PVP */
.waterfall { display: grid; gap: 6px; padding: 2px 0; }
.wf-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 128px; gap: 14px; align-items: center; min-height: 34px; }
.wf-label { display: grid; gap: 0; }
.wf-label b { font-size: 14px; font-weight: 650; }
.wf-label b .op { color: var(--muted); display: inline-block; width: 16px; }
.wf-label > span { font-size: 12px; color: var(--muted); padding-left: 16px; line-height: 1.3; }
.wf-track { position: relative; height: 22px; }
.wf-bar { position: absolute; top: 0; bottom: 0; border-radius: 5px; transition: left .25s ease, width .25s ease; }
.wf-val { text-align: right; font-weight: 650; font-size: 14px; white-space: nowrap; }
.wf-row.wf-sub { background: var(--panel); border-radius: 10px; padding: 4px 6px; margin: 2px -6px; }
.wf-row.wf-sub .wf-bar { background: transparent !important; border: 2px solid var(--accent); }
.wf-row.mk .wf-label b, .wf-row.mk .wf-val { color: var(--terra-dark); }

/* PVP: banda compacta de resultado, alineada con la escalera */
.pvp-card { display: grid; grid-template-columns: 200px minmax(0, 1fr) 128px; gap: 14px; align-items: center; min-height: 72px; padding: 14px 8px; margin: 4px -8px 0; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(16, 43, 85, .16); }
.pvp-head { display: grid; gap: 1px; padding-left: 8px; }
.pvp-label { font-family: var(--f-display); font-size: 17px; font-weight: 780; letter-spacing: .04em; }
.pvp-sub { font-size: 12px; color: #B7C7EA; }
.pvp-bar { grid-column: 2; grid-row: 1; display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; }
.pvp-bar span { display: block; height: 100%; transition: flex-basis .25s ease; }
.pvp-value { grid-column: 3; grid-row: 1; text-align: right; padding-right: 8px; font-family: var(--f-display); font-size: 26px; font-weight: 780; font-stretch: 86%; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pvp-value .unit { display: block; font-size: 12px; color: #B7C7EA; font-weight: 650; margin-top: 3px; letter-spacing: .02em; }
.pvp-card.recalc, .cv-out.recalc { animation: resultPulse .25s ease-out; }
@keyframes resultPulse { from { box-shadow: 0 0 0 4px rgba(47, 99, 216, .30); } to { box-shadow: 0 0 0 0 rgba(47, 99, 216, 0); } }

/* composición del PVP: leyenda compacta */
.comp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--ink-2); }
.comp-legend li { display: inline-flex; align-items: center; gap: 7px; }
.comp-legend b { font-weight: 700; color: var(--navy); }
.comp-legend .mk b { color: var(--terra-dark); }
.comp-legend .ex b { color: var(--sand-ink); }

/* ================= 03 · Protección frente a la inflación ================= */
.c-head { display: grid; gap: 14px; align-content: start; min-width: 0; }
.c-head .title-row { margin-top: -4px; }
.c-calc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c-calc .sub { display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* máquina: dos mitades iguales */
#gf-maquina { display: grid; grid-template-columns: 1fr 1fr; }
#gf-maquina button { text-align: center; white-space: nowrap; padding-inline: 6px; }
.mech { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 10px; align-items: center; }
.cv { border-radius: 12px; padding: 16px 18px; display: grid; gap: 6px; align-content: center; background: var(--surface-2); min-width: 0; }
.cv-label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cv-value { font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 760; font-stretch: 86%; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-value small, .cv-value .unit { font-size: .45em; font-weight: 700; margin-left: 4px; }
.cv-sub { font-size: 12px; color: var(--muted); }
.cv-ref { background: var(--panel); }
.cv-rate { background: var(--usd-soft); }
.cv-rate .cv-label { color: var(--usd-deep); }
.rate-input { display: flex; align-items: center; border: 1.5px solid #9FCDB5; border-radius: 10px; background: var(--surface); overflow: hidden; }
.rate-input:focus-within { outline: 2px solid var(--usd); outline-offset: 1px; }
.rate-input input { border: 0; width: 100%; min-width: 0; font-family: var(--f-display); font-size: 24px; font-weight: 740; padding: 8px 12px; min-height: 50px; }
.rate-input input:focus-visible { outline: none; }
.rate-input span { padding: 0 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cv-op { display: grid; place-items: center; font-family: var(--f-display); font-size: 24px; font-weight: 700; color: var(--muted); }
.cv-out { display: grid; grid-template-rows: 1fr auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(16, 43, 85, .14); min-width: 0; }
.cv-out .cv { border-radius: 0; }
.cv-bs { background: var(--navy); color: #fff; }
.cv-bs .cv-label, .cv-bs .cv-sub { color: #B7C7EA; }
.cv-usd { background: #1D7C4E; color: #fff; padding-block: 12px; }
.cv-usd .cv-label, .cv-usd .cv-sub { color: #fff; opacity: .92; }
.usd-shift { font-size: 14px; color: var(--ink-2); background: #F1F8F4; border-left: 3px solid var(--usd); border-radius: 10px; padding: 11px 16px; }
.usd-shift b { color: var(--ink); }

/* ecuación de tokens (construcción del PVP de gran formato) */
.equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.tok { display: grid; gap: 2px; align-content: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); flex: 1 1 0; min-width: 104px; }
.tok-l { font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.tok-v { font-family: var(--f-display); font-size: 18px; font-weight: 720; font-stretch: 90%; white-space: nowrap; }
.tok-s { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.tok.hour { background: var(--accent-soft); }
.tok.hour .tok-l { color: var(--accent); }
.tok.sim .tok-v { color: var(--warn); }
.tok.mk .tok-l, .tok.mk .tok-v { color: var(--terra-dark); }
.tok.total { background: var(--surface); border: 1.5px solid var(--navy); }
.tok.total .tok-v { color: var(--navy); }
.eq-op { display: grid; place-items: center; color: var(--muted); font-weight: 700; font-size: 17px; min-width: 10px; }

/* ---------- Pie ---------- */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }

/* ---------- Modal ---------- */
.modal { border: 0; padding: 0; background: transparent; width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); color: var(--ink); }
.modal::backdrop { background: rgba(17, 28, 43, .5); }
.modal-inner { background: var(--surface); border-radius: 16px; padding: 24px; display: grid; gap: 16px; max-height: calc(100dvh - 26px); overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-head h2 { font-size: 22px; font-weight: 720; margin-top: 4px; }
.ev-editorial-note { max-width: 70ch; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.btn-close { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); flex: none; }
.btn-close:hover { color: var(--ink); border-color: var(--line-strong); }
.ev-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-tabs button { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.ev-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ev-body { display: grid; gap: 14px; }
.ev-caption { display: grid; gap: 4px; padding: 14px 16px; background: var(--accent-soft); border-radius: 10px; }
.ev-caption .ev-q { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ev-caption p { font-size: 15px; color: var(--ink); }
.ev-file { font-size: 12.5px; color: var(--muted); }
.ev-shot { border: 1px solid var(--line-strong); border-radius: 8px; overflow: auto; background: #fff; max-height: 58dvh; }
.ev-shot img { display: block; width: 100%; min-width: 520px; max-width: none; height: auto; }

/* ---------- Composición de escritorio (≥1100 px) ---------- */
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; row-gap: 10px; align-items: end; }
  .hero > .eyebrow, .hero > h1, .hero > .lede { grid-column: 1; }
  .hero > .pillars { grid-column: 2; grid-row: 2; justify-content: flex-end; align-self: center; }
  .hero > .provenance { grid-column: 2; grid-row: 3; text-align: right; align-self: end; }
  .hero h1 { font-size: clamp(30px, 2.9vw, 42px); }
  .hero .lede { font-size: 16px; }

  /* 01: problema | estructura, a partes iguales */
  .a-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; }

  /* 02: rejilla compartida → arriba y abajo alineados.
     fila 1: variables + coste del trabajo | escalera (se reparte en todo el alto)
     fila 2: = Coste del trabajo | = PVP (misma altura) · fila 3: tarifa | leyenda */
  .b-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 36px; row-gap: 10px; }
  .b-in { grid-column: 1; grid-row: 1; }
  .eq-total { grid-column: 1; grid-row: 2; }
  .b-note { grid-column: 1; grid-row: 3; }
  .b-out { grid-column: 2; grid-row: 1; }
  .b-grid > .pvp-card { grid-column: 2; grid-row: 2; margin: 0 -8px; }
  .b-grid > .comp-legend { grid-column: 2; grid-row: 3; }
  /* escalera como tabla: filas iguales con filete fino, ocupando todo el alto */
  .b-out .waterfall { flex: 1; grid-auto-rows: 1fr; gap: 0; padding: 0; }
  .b-out .wf-row { min-height: 50px; border-top: 1px solid var(--line); }
  .b-out .wf-row:first-child { border-top: 0; }
  .b-out .wf-row.wf-sub { border-top: 0; margin: 3px -6px; }
  .b-out .wf-row.wf-sub + .wf-row { border-top: 0; }
  .b-out .wf-track { height: 26px; }

  /* 03: rejilla compartida → arriba y abajo alineados.
     fila 1: texto | mecanismo (tarjetas a igual altura) · fila 2: controles | construcción del PVP */
  .block-usd { grid-template-columns: 300px minmax(0, 1fr); column-gap: 36px; row-gap: 18px; }
  .c-head { grid-column: 1; grid-row: 1; }
  .block-usd > #gf-form { grid-column: 1; grid-row: 2; align-content: space-between; }
  .mech { grid-column: 2; grid-row: 1; align-items: stretch; }
  .c-calc { grid-column: 2; grid-row: 2; }
  .c-calc .equation { flex: 1; flex-wrap: nowrap; }
  .c-calc .tok { padding: 14px 16px; gap: 6px; }
  .c-calc .tok-l { font-size: 13.5px; }
  .c-calc .tok-v { font-size: 27px; }
  .c-calc .tok-s { font-size: 12px; }
  .c-calc .tok.total .tok-v { font-size: 30px; }
  .block-usd > .btn-text, .block-usd > .reveal { grid-column: 1 / -1; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .wf-row, .pvp-card { grid-template-columns: 184px minmax(0, 1fr) 108px; gap: 12px; }
  .wf-label b { font-size: 13.5px; white-space: nowrap; }
  .eq-total .el-val { font-size: 23px; }
  .c-calc .tok { padding: 12px 10px; }
  .c-calc .tok-v { font-size: 21px; }
  .c-calc .tok.total .tok-v { font-size: 23px; }
  .pvp-value { font-size: 23px; }
  .block-usd { grid-template-columns: 270px minmax(0, 1fr); column-gap: 28px; }
  .mech { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.1fr); gap: 8px; }
  .cv { padding: 14px; }
  .rate-input input { font-size: 21px; }
  .flow { grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 1fr); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .b-out { margin-top: 12px; }
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .base-step { grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; }
  .bs-cap { max-width: none; }
  .bs-arrow { transform: rotate(90deg); }
  .centers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mech { grid-template-columns: 1fr; }
  .cv-op { height: 22px; font-size: 20px; transform: rotate(90deg); }
  .detail { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 820px) {
  .wf-row { grid-template-columns: 1fr auto; grid-template-areas: "l v" "t t"; gap: 4px 12px; }
  .wf-label { grid-area: l; } .wf-val { grid-area: v; } .wf-track { grid-area: t; }
  .pvp-card { grid-template-columns: 1fr auto; gap: 10px 12px; min-height: 0; padding: 14px 12px; margin: 4px 0 0; }
  .pvp-head { padding-left: 0; }
  .pvp-value { grid-column: 2; grid-row: 1; padding-right: 0; font-size: 24px; }
  .pvp-bar { grid-column: 1 / -1; grid-row: 2; }
  .equation { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .eq-op { justify-content: start; padding-left: 14px; min-height: 0; font-size: 15px; line-height: 1; }
  .tok { grid-template-columns: 1fr auto; align-items: baseline; padding: 10px 12px; }
  .tok-s { grid-column: 1 / -1; }
  .tok-v { grid-row: 1; grid-column: 2; }
}
@media (max-width: 680px) {
  .page { --gap: 16px; padding-inline: 16px; padding-block: 24px 36px; }
  .block { --px: 16px; --pt: 20px; gap: 16px; }
  .centers { grid-template-columns: 1fr; gap: 8px; }
  .center { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px; }
  .center-icon { grid-row: 1 / span 2; align-self: center; }
  .center-name, .center-fn { grid-column: 2; }
  .center-m2 { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .buildup { padding: 14px; }
  .buildup::before, .buildup::after { display: none; }
  .buildup-head .btn-text { margin-left: 0; }
  .comp-card { grid-template-columns: 1fr; padding: 14px; }
  .donut-wrap { width: 170px; grid-row: 2; }
  .base-step { grid-auto-flow: row; gap: 4px; }
  .area-big { font-size: 38px; }
  .idle { padding: 14px; }
  .idle-row { grid-template-columns: 1fr; }
  .idle-who { grid-row: auto; }
  .idle-var { font-size: 10.5px; padding: 3px 6px; }
  .idle .lg-src { margin-left: 0; }
  .floor { gap: 1.5px; }
  .toolbar { gap: 14px; }
  .tool, .tool-range { flex: 1 1 100%; }
  .tool-end { margin-left: 0; justify-content: space-between; }
  .seg { display: flex; } .seg button { flex: 1; }
  .modal-inner { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* zona táctil ampliada (≥ 40 px) para enlaces de texto en tablet y móvil, sin cambiar su aspecto */
@media (max-width: 1099px), (pointer: coarse) {
  .linkish, .btn-text { position: relative; }
  .linkish::before, .btn-text::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
}