/* ==========================================================================
   Escenas · "Del nudo a la línea"
   Fotografía a sangre en la capa de fondo; el contenido usa vidrio solo cuando va sobre imagen.
   Reflujo (lectura/móvil) con @container scene al final.
   ========================================================================== */

.sc-head { grid-column: 1 / 13; display: grid; gap: var(--s3); justify-items: start; }
.sc-head .title, .sc-head .title-2 { max-width: 22ch; }
.sc-lede { max-width: 40ch; }

/* ---------- Apertura ---------- */
.tpl-opening { grid-template-rows: auto 1fr auto; align-content: stretch; padding-bottom: var(--margin); }
.op-kicker { grid-column: 1 / 9; }
.op-title { grid-column: 1 / 9; align-self: center; font-size: 168px; line-height: 0.9; letter-spacing: -0.045em; text-shadow: 0 10px 60px rgb(var(--scrim) / 0.6); }
.op-lede { grid-column: 1 / 7; align-self: end; max-width: 26ch; color: var(--text-primary); }
.op-meta { grid-column: 8 / 13; align-self: end; list-style: none; padding: 10px 24px; }
.op-meta li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: baseline; padding: 14px 0; font-size: 21px; }
.op-meta li + li { border-top: var(--hair) solid var(--border); }
.op-meta .mi { color: var(--accent); font-size: 22px; }
.op-meta .mt { color: var(--text-primary); font-weight: 600; }
.op-meta .mw { color: var(--text-muted); font-size: 17px; }
.op-credit { position: absolute; right: 22px; top: 50%; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }

/* ---------- Dato protagonista ---------- */
.tpl-stat { grid-template-rows: auto 1fr auto auto; }
.st-kicker { grid-column: 1 / 13; }
.st-main { grid-column: 1 / 9; align-self: center; }
.st-value { font-size: 300px; line-height: 0.82; letter-spacing: -0.06em; color: var(--accent); text-shadow: 0 0 80px color-mix(in srgb, var(--accent) 35%, transparent); }
.st-unit { margin-top: var(--s3); max-width: 20ch; color: var(--text-primary); font-size: 46px; }
.st-break { grid-column: 9 / 13; align-self: center; list-style: none; display: grid; gap: var(--s2); }
.st-break li { display: grid; gap: 2px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.st-break .num { font-size: 50px; color: var(--text-primary); line-height: 1; }
.st-break li span:last-child { font-size: 19px; color: var(--text-secondary); }
.st-bar { grid-column: 1 / 13; margin-top: var(--s4); }
.st-track { display: flex; height: 58px; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 2px var(--border-strong); }
.st-ok { background: linear-gradient(90deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 80%, var(--accent))); color: var(--background); display: flex; align-items: center; padding: 0 24px; font-weight: 700; font-size: 20px; white-space: nowrap; border-radius: 999px; }
.st-gap { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 24px; font-weight: 700; font-size: 20px; color: var(--accent);
  background: repeating-linear-gradient(-45deg, transparent 0 11px, color-mix(in srgb, var(--accent) 26%, transparent) 11px 13px); }
.st-bar figcaption { margin-top: 12px; }
.st-human { grid-column: 1 / 13; margin-top: var(--s3); font-family: var(--font-display); font-weight: 700; font-stretch: 85%; letter-spacing: -0.02em; font-size: 42px; line-height: 1.1; color: var(--text-primary); }

/* ---------- Horario ---------- */
.tpl-schedule { grid-template-rows: auto 1fr auto auto; }
.sch-row { grid-column: 1 / 13; grid-row: 3; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.sch-line { position: absolute; left: 30px; right: 30px; top: -26px; width: calc(100% - 60px); height: 20px; overflow: visible; }
.sch-line path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.sch-col { position: relative; padding: 28px 30px; display: grid; gap: 10px; align-content: start; border-radius: var(--radius-card); background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.sch-col.is-own { box-shadow: var(--glow); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sch-node { position: absolute; top: -34px; left: 30px; width: 18px; height: 18px; border-radius: 50%; background: var(--background); border: 3px solid var(--accent); }
.sch-col.is-own .sch-node { background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.sch-col:not(.is-own) { opacity: 0.84; }
.sch-who { font-size: 18px; font-weight: 600; color: var(--text-muted); margin-top: 6px; }
.sch-col.is-own .sch-who { color: var(--accent); }
.sch-band { grid-column: 1 / 13; grid-row: 4; margin-top: var(--s3); display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; font-size: 21px; color: var(--text-secondary); }
.sch-band b { color: var(--text-primary); font-size: 26px; }

/* ---------- Bento con fotografía ---------- */
.bento { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr 1fr; gap: var(--gutter); margin-top: var(--s4); height: 520px; }
.bn { position: relative; perspective: 1000px; }
.bn .icard-face { position: relative; height: 100%; border-radius: var(--radius-card); overflow: hidden; border: var(--hair) solid var(--border); background: var(--surface-solid); box-shadow: var(--shadow-card); }
.bn-media { position: absolute; inset: 0; }
.bn-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.bn:hover .bn-media img { transform: scale(1.05); }
.bn-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--scrim) / 0.96) 0%, rgb(var(--scrim) / 0.6) 45%, rgb(var(--scrim) / 0.05) 85%); }
.bn-body { position: absolute; inset: auto 0 0 0; padding: var(--s4); display: grid; gap: 8px; }
.bn-lg { grid-column: 1 / 7; grid-row: 1 / 3; }
.bn-lg .icard-face { box-shadow: var(--shadow-card), var(--glow); }
.bn-md { grid-column: 7 / 13; grid-row: 1; }
.bn-sm:nth-of-type(3) { grid-column: 7 / 10; grid-row: 2; }
.bn-sm:nth-of-type(4) { grid-column: 10 / 13; grid-row: 2; }
.bn-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bn-list li { font-size: 16px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.08); border: var(--hair) solid var(--border-strong); color: var(--text-primary); }

/* ---------- Capítulo ---------- */
.tpl-chapter { grid-template-rows: 1fr auto; padding-bottom: var(--margin); }
.ch-num { position: absolute; right: 60px; bottom: 30px; font-size: 440px; line-height: 0.8; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 70%, transparent); pointer-events: none; }
.ch-main { grid-column: 1 / 9; grid-row: 1; align-self: center; display: grid; gap: var(--s4); justify-items: start; position: relative; z-index: 1; }
.ch-title { font-size: 150px; line-height: 0.88; }
.ch-main .lede { max-width: 28ch; color: var(--text-primary); }
.ch-meta { grid-column: 1 / 9; grid-row: 2; display: flex; gap: var(--s2); flex-wrap: wrap; }
.ch-meta div { padding: 12px 20px; border-radius: 16px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.ch-meta dt { font-size: 15px; }
.ch-meta dd { font-size: 21px; color: var(--text-primary); font-weight: 600; margin-top: 2px; }

/* ---------- Agenda ---------- */
.ag-left { grid-column: 1 / 6; display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.ag-facts { display: grid; gap: var(--s2); width: 100%; }
.ag-facts div { padding: 16px 20px; border-radius: 18px; background: var(--surface); border: var(--hair) solid var(--border); }
.ag-facts dd { font-size: 22px; color: var(--text-primary); margin-top: 4px; }
.ag-list { grid-column: 7 / 13; list-style: none; align-self: start; padding: 10px 26px; border-radius: var(--radius-card); background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.ag-list li { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s2); align-items: baseline; padding: 13px 0; }
.ag-list li + li { border-top: var(--hair) solid var(--border); }
.ag-list .t { font-size: 23px; color: var(--text-muted); }
.ag-list .w { font-size: 23px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.ag-list .w small { display: block; font-size: 17px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.ag-list .d { font-size: 15px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.ag-list li.hl .t, .ag-list li.hl .d { color: var(--accent); }
.ag-list li.hl .w { color: var(--accent-strong); }
.ag-list li.brk .w { color: var(--text-muted); font-weight: 400; }
.ag-note { grid-column: 7 / 13; margin-top: var(--s2); }

/* ---------- Afirmación ---------- */
.stm-rows { grid-column: 1 / 13; list-style: none; margin-top: var(--s5); display: grid; gap: 12px; }
.stm-rows li { display: grid; grid-template-columns: 84px 520px 1fr; gap: var(--s4); align-items: center; padding: 20px 28px; border-radius: 22px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.stm-n { font-size: 40px; color: var(--text-muted); }
.stm-t { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 32px; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.12; }
.stm-b { font-size: 23px; color: var(--text-secondary); line-height: 1.38; }
.stm-rows li.hl { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--glow); }
.stm-rows li.hl .stm-n, .stm-rows li.hl .stm-t { color: var(--accent); }
.tpl-statement:has(.stm-idea) { grid-template-rows: auto 1fr auto; }
.stm-kicker { grid-column: 1 / 13; }
.stm-idea { grid-column: 1 / 12; align-self: end; font-family: var(--font-display); font-weight: 800; font-stretch: 84%; letter-spacing: -0.04em; font-size: 112px; line-height: 0.95; text-wrap: balance; text-shadow: 0 10px 60px rgb(var(--scrim) / 0.6); }
.stm-idea em { font-style: normal; color: var(--accent); }
.stm-foot { grid-column: 1 / 8; margin-top: var(--s4); display: grid; gap: 6px; padding: 22px 26px; border-radius: 22px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }

/* ---------- Pilares ---------- */
.pl-left { grid-column: 1 / 6; display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.pl-list { grid-column: 7 / 13; list-style: none; align-self: start; display: grid; gap: 12px; counter-reset: p; }
.pl-list li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s2); padding: 20px 24px; border-radius: 22px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.pl-n { font-size: 36px; color: var(--accent); line-height: 1; }
.pl-list .small { margin-top: 6px; }
.pl-foot { grid-column: 1 / 13; align-self: end; margin-top: var(--s4); font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; color: var(--text-primary); max-width: 34ch; }

/* Ejemplos concretos dentro de filas y pilares: una línea con «Ej.» en verde */
.pl-ex, .stm-ex { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; font-size: 19px; line-height: 1.32; color: var(--text-primary); }
.pl-ex b, .stm-ex b { flex: none; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border: var(--hair) solid color-mix(in srgb, var(--ok) 40%, transparent); transform: translateY(-2px); }
.stm-ex { font-size: 20px; }
.stm-b { display: block; }
.pl-list.con-ej li { padding: 16px 22px; }
.pl-list.con-ej .small { margin-top: 2px; }

/* ---------- Cifras ---------- */
.nb-row { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--s4); }
.nb-row article { padding: 28px; border-radius: var(--radius-card); background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); display: grid; gap: 10px; align-content: start; }
.nb-v { font-size: 150px; line-height: 0.85; color: var(--accent); text-shadow: 0 0 60px color-mix(in srgb, var(--accent) 30%, transparent); }
.nb-foot { grid-column: 1 / 13; margin-top: var(--s3); max-width: 56ch; color: var(--text-primary); }

/* ---------- Contraste con fotos ---------- */
.ct-row { grid-column: 1 / 13; display: grid; grid-template-columns: 5fr 7fr; gap: var(--s4); margin-top: var(--s4); }
.ct-side { position: relative; display: grid; gap: 10px; align-content: end; min-height: 370px; padding: var(--s4); border-radius: var(--radius-card); overflow: hidden; border: var(--hair) solid var(--border); box-shadow: var(--shadow-card); isolation: isolate; }
.ct-media { position: absolute; inset: 0; z-index: -1; }
.ct-media img { width: 100%; height: 100%; object-fit: cover; }
.ct-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--scrim) / 0.97) 20%, rgb(var(--scrim) / 0.55) 60%, rgb(var(--scrim) / 0.15)); }
.ct-big { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; letter-spacing: -0.04em; font-size: 96px; line-height: 0.9; }
.ct-light .ct-big { color: var(--text-primary); }
.ct-dense { box-shadow: var(--shadow-card), var(--glow); }
.ct-dense .ct-big { color: var(--accent); }
.ct-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ct-facts li { font-size: 17px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.08); border: var(--hair) solid var(--border-strong); color: var(--text-primary); }
.ct-foot { grid-column: 1 / 13; margin-top: var(--s3); font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; color: var(--text-primary); }

/* ---------- Dos columnas ---------- */
.tc-row { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: var(--s4); }
.tc-col { padding: 26px 30px; border-radius: var(--radius-card); background: var(--surface-solid); border: var(--hair) solid var(--border); }
.tc-col + .tc-col { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--glow); }
.tc-col ul { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.tc-col li { font-size: 22px; line-height: 1.36; color: var(--text-secondary); padding-left: 30px; position: relative; }
.tc-col li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); }
.tc-col li b { color: var(--text-primary); }
.tc-foot { grid-column: 1 / 13; margin-top: var(--s3); font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 34px; color: var(--text-primary); }
.tc-foot em { font-style: normal; color: var(--accent); }

/* ---------- Puente ---------- */
.br-left { grid-column: 1 / 7; display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.br-take { list-style: none; display: grid; gap: 10px; width: 100%; }
.br-take li { font-size: 25px; font-weight: 600; padding: 16px 22px; border-radius: 18px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.br-take li::before { content: "✓"; color: var(--accent); margin-right: 14px; font-weight: 800; }
.br-next { grid-column: 8 / 13; list-style: none; display: grid; gap: var(--s2); align-self: center; }
.br-next li { display: grid; gap: 6px; padding: 24px 26px; border-radius: var(--radius-card); background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.br-next li:last-child { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--glow); }
.br-arrow { position: absolute; left: 740px; top: 470px; width: 150px; height: 40px; overflow: visible; }
.br-arrow path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cierre ---------- */
.tpl-closing { grid-template-rows: 1fr auto auto; padding-bottom: var(--margin); }
.cl-main { grid-column: 1 / 13; align-self: end; display: grid; gap: var(--s3); justify-items: start; }
.cl-title { font-size: 136px; max-width: 14ch; line-height: 0.9; text-shadow: 0 10px 60px rgb(var(--scrim) / 0.7); }
.cl-cols { grid-column: 1 / 10; display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gutter); margin-top: var(--s4); }
.cl-cols section { padding: 18px 24px; border-radius: 20px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.cl-cols ul { list-style: none; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cl-cols li { font-size: 20px; color: var(--text-primary); }
.cl-cols li::before { content: "● "; color: var(--accent); font-size: 12px; vertical-align: middle; }
.cl-thanks { grid-column: 10 / 13; align-self: end; justify-self: end; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 64px; color: var(--accent); }

/* ==========================================================================
   Diagramas
   ========================================================================== */
.sy-diagram { grid-column: 1 / 8; position: relative; height: 620px; }
.sy-diagram svg { position: absolute; inset: 0; width: 820px; height: 640px; overflow: visible; }
.sy-edge { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.sy-edge.on { stroke: var(--accent); stroke-dasharray: none; filter: drop-shadow(0 0 8px var(--accent)); }
.sy-node { position: absolute; transform: translate(-50%, -50%); width: 260px; padding: 22px 24px; border-radius: var(--radius-card); border: var(--hair) solid var(--border-strong);
  background: var(--surface); backdrop-filter: blur(var(--glass-blur)); cursor: pointer; text-align: left; display: grid; gap: 4px; transition: opacity 240ms, border-color 240ms, box-shadow 240ms; }
.sy-node[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--glow); }
.sy-node.dim { opacity: 0.45; }
.sy-verb { font-size: 17px; font-weight: 700; color: var(--accent); }
.sy-name { font-family: var(--font-display); font-weight: 800; font-stretch: 84%; font-size: 40px; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1; }
.sy-when { font-size: 16px; color: var(--text-muted); }
.sy-panel { grid-column: 8 / 13; align-self: center; padding: 30px; border-radius: var(--radius-card); background: var(--surface-solid); border: var(--hair) solid var(--border); min-height: 330px; }
.sy-body { display: grid; gap: var(--s2); }
.sy-link { padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-strong); font-weight: 600; }

.pr-wave { grid-column: 1 / 13; position: relative; height: 400px; margin-top: var(--s2); }
.pr-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pr-seg { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)); }
.pr-node { position: absolute; width: 180px; display: flex; flex-direction: column; align-items: center; text-align: center; transform: translate(-50%, -16px); }
.pr-node.up { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 16px)); }
.pr-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--background); border: 4px solid var(--accent); margin: 10px 0; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); }
.pr-name { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 28px; color: var(--text-primary); }
.pr-when { font-size: 16px; color: var(--text-muted); }
.pr-groups { position: absolute; left: 0; right: 0; bottom: -6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pr-groups .label { padding: 10px 16px; border-radius: 999px; text-align: center; background: var(--surface); border: var(--hair) solid var(--border); }
.tpl-process.alert .pr-node.g2 .pr-dot { border-color: var(--risk); box-shadow: 0 0 22px var(--risk); }
.tpl-process.alert .pr-seg.g2 { stroke: var(--risk); filter: drop-shadow(0 0 12px var(--risk)); }
.tpl-process.alert .pr-groups .g2 { color: var(--risk); border-color: var(--risk); }
.pr-note { grid-column: 1 / 13; margin-top: var(--s5); font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 36px; color: var(--text-primary); text-align: center; }
.pr-note em { font-style: normal; color: var(--risk); }

.mx-grid { grid-column: 1 / 13; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: var(--s4); }
.mx-grid li { display: grid; gap: 4px; align-content: start; padding: 14px 18px; border-radius: 18px; background: var(--surface-solid); border: var(--hair) solid var(--border); min-height: 118px; transition: opacity 320ms, border-color 320ms, box-shadow 320ms; }
.mx-n { font-size: 26px; color: var(--text-muted); line-height: 1; }
.mx-t { font-size: 23px; font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.mx-h { font-size: 17px; color: var(--text-muted); line-height: 1.35; }
.mx-grid.fire li:not(.key) { opacity: 0.28; }
.mx-grid.fire li.key { border-color: var(--accent); box-shadow: var(--glow); }
.mx-grid.fire li.key .mx-n { color: var(--accent); }
.mx-fire { grid-column: 1 / 13; margin-top: var(--s3); font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 34px; color: var(--text-primary); }
.mx-fire b { color: var(--accent); }

.lp-svg { grid-column: 1 / 13; width: 100%; height: 380px; margin-top: var(--s2); overflow: visible; }
.lp-line { fill: none; stroke: var(--border-strong); stroke-width: 4; }
.lp-node circle { fill: var(--surface-solid); stroke: var(--accent); stroke-width: 4; }
.lp-node.is-test circle { fill: var(--accent); filter: drop-shadow(0 0 14px var(--accent)); }
.lp-node.is-test .lp-num { fill: var(--accent-contrast); }
.lp-num { font: 800 28px var(--font-display); fill: var(--text-primary); text-anchor: middle; }
.lp-name { font: 600 25px var(--font-body); fill: var(--text-primary); text-anchor: middle; }
.lp-phase { font: 700 18px var(--font-body); fill: var(--accent); text-anchor: middle; }
.lp-arc, .lp-arrow { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)); }
.lp-arc-t { font: 700 30px var(--font-display); fill: var(--text-primary); text-anchor: middle; }
.lp-foot { grid-column: 1 / 12; margin-top: var(--s3); font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 36px; color: var(--text-primary); }
.lp-foot em { font-style: normal; color: var(--accent); }

.cs-rows { grid-column: 1 / 10; list-style: none; margin-top: var(--s3); position: relative; display: grid; gap: 6px; }
.cs-rows li { position: relative; display: grid; grid-template-columns: 44px 230px 1fr; gap: var(--s2); align-items: baseline; padding: 9px 20px; border-radius: 16px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.cs-dot { display: none; }
.cs-n { font-size: 26px; color: var(--accent); line-height: 1; }
.cs-h { font-size: 23px; font-weight: 700; color: var(--text-primary); }
.cs-v { font-size: 19px; line-height: 1.32; color: var(--text-secondary); }
.cs-v b { color: var(--accent-strong); }
.cs-src { grid-column: 1 / 10; margin-top: 10px; }

.pt-bar { grid-column: 1 / 13; margin-top: var(--s5); }
.pt-segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 80px; }
.pt-seg { background: color-mix(in srgb, var(--accent) 22%, var(--surface-solid)); border-radius: 14px; display: flex; align-items: center; padding-left: 20px; border: var(--hair) solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pt-seg.last { background: var(--accent); box-shadow: var(--glow); }
.pt-seg .num { font-size: 34px; color: var(--text-primary); }
.pt-seg.last .num { color: var(--accent-contrast); }
.pt-marks { display: flex; justify-content: space-between; font-size: 16px; color: var(--text-muted); margin-top: 10px; font-variant-numeric: tabular-nums; }
.pt-beats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-top: var(--s4); }
.pt-beats div { display: grid; gap: 8px; align-content: start; }

.mchip { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 18px; border: var(--hair) solid var(--border-strong); background: var(--surface-solid); font-size: 25px; font-weight: 600; color: var(--text-primary); list-style: none; box-shadow: var(--shadow-card); }
.mchip .n { font-size: 22px; color: var(--accent); }
.s10-grid { grid-column: 1 / 13; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: var(--s5); }
.s10-keep { grid-column: 1 / 13; margin-top: var(--s5); padding: 24px 28px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent) 10%, var(--surface-solid)); border: var(--hair) solid color-mix(in srgb, var(--accent) 40%, transparent); }
.s10-keep ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-top: 12px; }
.s10-keep li { font-size: 21px; line-height: 1.35; color: var(--text-primary); }
.s10-keep li::before { content: "✓ "; color: var(--accent); font-weight: 800; }

.morph { grid-column: 1 / 13; display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s4); }
.m-row { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1100px; }
.morph.formed .m-row { display: none; }
.mchip.in-slot { padding: 7px 13px; font-size: 16px; font-weight: 600; border-radius: 10px; background: rgb(255 255 255 / 0.06); color: var(--text-secondary); box-shadow: none; }
.mchip.in-slot .n { font-size: 14px; }
.m-phases { display: grid; grid-template-columns: 1fr 1fr 1fr 0.6fr; gap: var(--s3); }
.mphase { padding: 18px; border-radius: var(--radius-card); border: 2px dashed var(--border); display: flex; flex-direction: column; gap: 10px; transition: border-color 500ms, background-color 500ms, box-shadow 500ms; }
.morph.formed .mphase { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface-solid); box-shadow: var(--shadow-card); }
.mslot { padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / 0.03); border: var(--hair) solid var(--border); }
.mslot .lbl { font-family: var(--font-display); font-weight: 800; font-stretch: 86%; font-size: 26px; letter-spacing: -0.02em; display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; color: var(--text-primary); }
.mslot .lbl i { font-style: normal; font-size: 20px; color: var(--accent); }
.mslot .holder { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.new-badge { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--accent-contrast); background: var(--accent); padding: 5px 10px; border-radius: 999px; box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 60%, transparent); }

.fm-left { grid-column: 1 / 7; display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.fm-steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.fm-steps li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 9px 14px; border-radius: 12px; font-size: 21px; font-weight: 600; color: var(--text-primary); background: rgb(255 255 255 / 0.04); transition: background-color 200ms, color 200ms, box-shadow 200ms; }
.fm-steps li small { grid-column: 2; font-size: 15px; font-weight: 500; color: var(--text-muted); }
.fm-steps li.off { color: var(--text-muted); background: none; }
.fm-steps li .num { color: var(--accent); font-size: 22px; }
.fm-steps li.hit { background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.fm-form { grid-column: 8 / 13; align-self: start; padding: var(--s4); border-radius: var(--radius-card); background: var(--surface-elevated); border: var(--hair) solid var(--border); box-shadow: var(--shadow-card); backdrop-filter: blur(var(--glass-blur)); display: grid; gap: 10px; }
.fm-h { font-family: var(--font-display); font-weight: 800; font-stretch: 86%; font-size: 36px; letter-spacing: -0.03em; }
.fm-s { font-size: 16px; color: var(--text-muted); margin-bottom: 6px; }
.fm-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; border: var(--hair) solid var(--border-strong); background: rgb(255 255 255 / 0.04); cursor: pointer; text-align: left; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.fm-field em { font-style: normal; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.08); color: var(--text-secondary); white-space: nowrap; }
.fm-field[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--glow); }
.fm-field[aria-pressed="true"] em { background: var(--accent); color: var(--accent-contrast); }

.pf-tag { grid-column: 10 / 13; justify-self: end; align-self: start; margin-top: 8px; grid-row: 1; }
.pf-flow { grid-column: 1 / 13; list-style: none; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: var(--s3); margin-top: var(--s4); }
.pf-line { position: absolute; left: 0; right: 0; top: 16px; width: 100%; height: 20px; overflow: visible; }
.pf-line path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 9; opacity: 0.6; }
.pf-step { position: relative; display: grid; gap: 10px; align-content: start; }
.pf-node { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-contrast); font-size: 26px; position: relative; z-index: 1; box-shadow: var(--glow); }
.pf-mock { margin-top: 8px; padding: 18px; border-radius: 20px; background: var(--surface-elevated); border: var(--hair) solid var(--border); box-shadow: var(--shadow-card); display: grid; gap: 8px; }
.pf-row, .pf-status, .pf-rank { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 17px; color: var(--text-secondary); padding: 7px 0; }
.pf-row + .pf-row, .pf-status + .pf-status, .pf-rank + .pf-rank { border-top: var(--hair) solid var(--border); }
.pf-ok { font-style: normal; color: var(--ok); font-weight: 800; }
.pf-status em { font-style: normal; font-size: 14px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.pf-rank .num { color: var(--accent); font-size: 20px; }
.pf-rank span:nth-child(2) { flex: 1; }
.pf-rank em { font-style: normal; font-weight: 800; color: var(--text-primary); }
.pf-bar { display: grid; grid-template-columns: 120px 1fr 24px; gap: 10px; align-items: center; font-size: 16px; color: var(--text-secondary); }
.pf-bar b { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--v), rgb(255 255 255 / 0.08) var(--v)); }
.pf-bar em { font-style: normal; font-weight: 800; color: var(--text-primary); }

/* ==========================================================================
   Demostraciones
   ========================================================================== */
.cp-stage { grid-column: 1 / 13; position: relative; height: 460px; margin-top: var(--s4); border-radius: var(--radius-card); overflow: hidden; border: var(--hair) solid var(--border-strong); cursor: ew-resize; touch-action: pan-y; user-select: none; box-shadow: var(--shadow-card); }
.cp-layer { position: absolute; inset: 0; padding: var(--s5) var(--s6); display: grid; gap: var(--s3); align-content: center; }
.cp-before { background: linear-gradient(135deg, color-mix(in srgb, var(--risk) 16%, var(--surface-solid)), var(--surface-solid)); }
.cp-after { background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 14%, var(--surface-solid)), var(--surface-solid)); clip-path: inset(0 0 0 50%); }
.cp-lab { position: absolute; top: 26px; padding: 6px 14px; border-radius: 999px; font-size: 16px; }
.cp-before .cp-lab { left: var(--s6); color: var(--risk); background: color-mix(in srgb, var(--risk) 16%, transparent); }
.cp-after .cp-lab { right: var(--s6); color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.cp-text { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; letter-spacing: -0.02em; font-size: 42px; line-height: 1.16; color: var(--text-primary); max-width: 40ch; }
.cp-before .cp-text { font-size: 72px; color: var(--text-secondary); }
.cp-text mark { background: none; color: var(--accent); }
.cp-text u { text-decoration: none; box-shadow: inset 0 -0.18em 0 color-mix(in srgb, var(--ok) 35%, transparent); }
.cp-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cp-notes li { font-size: 18px; font-weight: 700; padding: 7px 14px; border-radius: 999px; }
.cp-notes li.bad { color: var(--risk); background: color-mix(in srgb, var(--risk) 14%, transparent); }
.cp-notes li.good { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.cp-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: var(--accent); pointer-events: none; box-shadow: 0 0 20px var(--accent); }
.cp-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: grid; place-items: center; font-size: 26px; font-weight: 800; box-shadow: var(--glow); }
.cp-controls { grid-column: 1 / 13; display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.cp-range { display: flex; align-items: center; gap: 16px; flex: 1; }
.cp-range input { flex: 1; accent-color: var(--accent); height: 30px; }

.ws-left { grid-column: 1 / 8; display: grid; gap: 18px; align-content: start; justify-items: start; }
.ws-steps { list-style: none; display: grid; gap: 10px; width: 100%; }
.ws-steps li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s2); padding: 12px 20px; border-radius: 18px; font-size: 23px; font-weight: 600; color: var(--text-primary); background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.ws-steps li small { display: block; font-size: 16px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.ws-steps .num { color: var(--text-muted); font-size: 26px; }
.ws-steps li.hl { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--glow); }
.ws-steps li.hl .num { color: var(--accent); }
.ws-out { display: grid; gap: 4px; font-size: 22px; font-weight: 600; color: var(--text-primary); padding: 14px 20px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-solid)); }
.ws-timer { grid-column: 9 / 13; align-self: center; display: grid; justify-items: center; gap: var(--s2); }
.tm { position: relative; width: 420px; height: 420px; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.tm svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.tm-bg { fill: rgb(var(--scrim) / 0.75); stroke: rgb(255 255 255 / 0.08); stroke-width: 14; }
.tm-fg { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 300ms; filter: drop-shadow(0 0 12px var(--accent)); }
.tm.warn .tm-fg { stroke: var(--warn); filter: drop-shadow(0 0 12px var(--warn)); }
.tm.done .tm-fg { stroke: var(--risk); }
.tm-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.tm-time { font-size: 112px; color: var(--text-primary); }
.tm.done .tm-time { color: var(--risk); }
.tm-hint { font-size: 15px; font-weight: 700; color: var(--text-muted); }

.cn-head { grid-column: 1 / 13; display: flex; justify-content: space-between; align-items: flex-end; }
.cn-head > div { display: grid; gap: var(--s3); justify-items: start; }
.cn-count { font-size: 110px; color: var(--accent); line-height: 0.85; text-shadow: 0 0 50px color-mix(in srgb, var(--accent) 40%, transparent); }
.cn-count .muted { font-size: 56px; -webkit-text-fill-color: currentColor; }
.cn-group { grid-column: 1 / 13; margin-top: var(--s3); display: grid; gap: 10px; }
.cn-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cn-group:first-of-type .cn-list { grid-template-columns: repeat(4, 1fr); }
.cn-dec { width: 100%; height: 100%; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 16px 18px; border-radius: 22px; border: 2px solid var(--border-strong); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); cursor: pointer; text-align: left; transition: border-color 200ms, background-color 200ms, box-shadow 200ms; }
.cn-i { font-size: 24px; color: var(--text-muted); grid-row: 1 / 3; }
.cn-q { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.cn-st { justify-self: start; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 999px; border: var(--hair) solid var(--border-strong); color: var(--text-muted); white-space: nowrap; }
.cn-dec[data-state="consenso"] { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 12px 40px -12px var(--ok); }
.cn-dec[data-state="consenso"] .cn-st { color: var(--background); background: var(--ok); border-color: var(--ok); }
.cn-dec[data-state="consenso"] .cn-st::before { content: "✓ "; }
.cn-dec[data-state="ajustar"] { border-color: var(--warn); }
.cn-dec[data-state="ajustar"] .cn-st { color: var(--background); background: var(--warn); border-color: var(--warn); }
.cn-dec[data-state="ajustar"] .cn-st::before { content: "± "; }
.cn-help { grid-column: 1 / 13; margin-top: var(--s3); }

.ac-doc { grid-column: 1 / 8; display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.ac-list { list-style: none; display: grid; gap: 8px; width: 100%; }
.ac-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s2); align-items: baseline; padding: 14px 20px; border-radius: 16px; background: var(--surface-solid); border: var(--hair) solid var(--border); font-size: 21px; color: var(--text-primary); }
.ac-list .num { color: var(--accent); font-size: 24px; }
.ac-list em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--text-muted); }
.ac-list li[data-state="consenso"] em { color: var(--ok); }
.ac-list li[data-state="ajustar"] em { color: var(--warn); }
.ac-side { grid-column: 9 / 13; display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border-radius: var(--radius-card); background: var(--surface-elevated); border: var(--hair) solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-card), var(--glow); }
.ac-sign { margin-top: var(--s5); border-top: var(--hair) solid var(--border-strong); padding-top: 8px; font-size: 16px; color: var(--text-muted); }
.ac-print { margin-top: var(--s3); }

/* ---------- Explorador ---------- */
.tpl-explorer { grid-template-rows: auto 1fr; }
.ex-top { grid-column: 1 / 5; grid-row: 1; display: grid; gap: var(--s3); justify-items: start; }
.ex-title { font-size: var(--t-h2); }
.ex-rail { grid-column: 1 / 5; grid-row: 2; position: relative; margin-top: var(--s4); }
.ex-rail ol { list-style: none; position: relative; z-index: 1; }
.ex-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ex-line path { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 3; }
.ex-phase { font-size: 16px; font-weight: 800; color: var(--accent); margin: 16px 0 6px 56px; }
.ex-phase:first-child { margin-top: 0; }
.ex-node { width: 100%; display: grid; grid-template-columns: 40px 34px 1fr; align-items: center; gap: 8px; padding: 8px 12px 8px 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 12px; color: var(--text-secondary); }
.ex-node:hover { color: var(--text-primary); background: rgb(255 255 255 / 0.04); }
.ex-dot { justify-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--background); border: 3px solid var(--border-strong); transition: transform var(--d-local) var(--ease-out); }
.ex-node.done .ex-dot { background: var(--accent); border-color: var(--accent); }
.ex-node[aria-pressed="true"] { color: var(--text-primary); }
.ex-node[aria-pressed="true"] .ex-dot { border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 20px var(--accent); transform: scale(1.15); }
.ex-num { font-size: 20px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ex-node[aria-pressed="true"] .ex-num { color: var(--accent); }
.ex-name { font-size: 25px; font-weight: 600; line-height: 1.2; }
.ex-panel { grid-column: 5 / 13; grid-row: 1 / 3; padding: 34px 40px; border-radius: var(--radius-card); background: var(--surface-solid); border: var(--hair) solid var(--border); box-shadow: var(--shadow-card); position: relative; }
.ex-body { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.ex-intro { margin: auto 0; display: grid; gap: var(--s3); }
.ex-intro .lede { max-width: 18ch; font-size: 64px; color: var(--text-primary); font-family: var(--font-display); font-weight: 800; font-stretch: 84%; letter-spacing: -0.04em; line-height: 0.98; }
.ex-head { display: grid; gap: 8px; justify-items: start; }
.ex-head .title-2 { font-size: 60px; }
.ex-q { font-size: 27px; line-height: 1.32; color: var(--text-secondary); max-width: 44ch; text-wrap: balance; }
.ex-case { font-size: 21px; line-height: 1.36; padding: 12px 18px; border-radius: 16px; color: var(--text-primary); background: color-mix(in srgb, var(--ok) 11%, transparent); border: var(--hair) solid color-mix(in srgb, var(--ok) 38%, transparent); }
.ex-case .label { display: block; margin-bottom: 3px; color: var(--ok); }
.ex-case b { color: var(--ok); }
.ex-intro:has(.ex-fases) .lede { font-size: 46px; max-width: 22ch; }
.ex-fases { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ex-fases li { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: var(--hair) solid var(--border); }
.ex-fases li b { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 25px; line-height: 1.12; letter-spacing: -0.015em; color: var(--text-primary); }
.ex-fases .label { color: var(--accent); }
.ex-tpl { font-size: 23px; line-height: 1.4; padding: 14px 20px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: var(--hair) solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text-primary); }
.ex-tpl .label { display: block; margin-bottom: 4px; }
.ex-tpl b { color: var(--accent-strong); font-weight: 700; }
.ex-cols, .ex-levels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ex-cols .label, .ex-levels .label { margin-bottom: 6px; }
.ex-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ex-list li { font-size: 18px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.06); border: var(--hair) solid var(--border-strong); color: var(--text-primary); }
.ex-alert { padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--risk) 12%, transparent); border: var(--hair) solid color-mix(in srgb, var(--risk) 40%, transparent); }
.ex-alert .label { color: var(--risk); }
.ex-alert p:not(.label), .ex-levels p:not(.label) { font-size: 20px; line-height: 1.36; color: var(--text-primary); }
.ex-levels > div { padding: 14px 18px; border-radius: 16px; background: rgb(255 255 255 / 0.04); }
.ex-card { display: flex; align-items: center; gap: 14px; font-size: 18px; color: var(--text-muted); margin-top: auto; }
.ex-card b { color: var(--text-secondary); }
.ex-suit { width: 26px; height: 34px; border-radius: 6px; background: linear-gradient(160deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 40%, var(--background))); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; transform: rotate(-6deg); }
.ex-all { display: none; }

/* ---------- Rúbrica ---------- */
.tpl-rubrica { grid-template-rows: auto 1fr auto; }
.rb-top { grid-column: 1 / 13; display: grid; gap: var(--s3); justify-items: start; }
.rb-table { grid-column: 1 / 9; margin-top: var(--s4); align-self: start; padding: 20px 26px; border-radius: var(--radius-card); background: var(--surface-solid); border: var(--hair) solid var(--border); }
.rb-caption { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rb-headrow { display: grid; grid-template-columns: 380px 224px 1fr 76px; gap: 18px; padding-bottom: 8px; font-size: 15px; color: var(--text-muted); font-weight: 700; }
.rb-row { display: grid; grid-template-columns: 380px 224px 1fr 76px; gap: 18px; align-items: center; padding: 9px 0; border-top: var(--hair) solid var(--border); }
.rb-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rb-crit { font-size: 23px; font-weight: 600; color: var(--text-primary); }
.rb-w { font-size: 17px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.rb-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.rb-opt { position: relative; cursor: pointer; }
.rb-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rb-opt span { display: grid; place-items: center; height: 44px; border-radius: 12px; font-size: 21px; font-weight: 800; color: var(--text-secondary); background: rgb(255 255 255 / 0.05); border: var(--hair) solid var(--border); font-variant-numeric: tabular-nums; transition: background-color 160ms, color 160ms, box-shadow 160ms; }
.rb-opt input:checked + span { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
.rb-opt input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-opt:hover input:not(:checked) + span { background: rgb(255 255 255 / 0.1); }
.rb-bar { height: 12px; border-radius: 999px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.rb-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent)); border-radius: 999px; }
.rb-contrib { font-size: 24px; text-align: right; color: var(--text-primary); }
.rb-result { grid-column: 9 / 13; grid-row: 2 / 4; margin-top: var(--s4); padding: 24px 28px; border-radius: var(--radius-card); background: var(--surface-elevated); border: var(--hair) solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-card), var(--glow); display: flex; flex-direction: column; gap: 10px; align-self: start; }
.rb-score { font-size: 132px; line-height: 0.85; color: var(--accent); }
.rb-scale { position: relative; height: 36px; border-top: 2px solid var(--border-strong); font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rb-scale span { position: absolute; top: 8px; }
.rb-scale span:nth-of-type(1) { left: 0; }
.rb-scale span:nth-of-type(2) { left: 25%; transform: translateX(-50%); }
.rb-scale span:nth-of-type(3) { left: 50%; transform: translateX(-50%); }
.rb-scale span:nth-of-type(4) { left: 75%; transform: translateX(-50%); }
.rb-scale span:nth-of-type(5) { right: 0; }
.rb-mark { position: absolute; top: -9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--surface-solid), 0 0 16px var(--accent); }
.rb-weights { border: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rb-weights legend { width: 100%; margin-bottom: 6px; }
.rb-weights label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: var(--hair) solid var(--border-strong); font-size: 18px; font-weight: 600; cursor: pointer; }
.rb-weights label:has(input:checked) { border-color: var(--accent); color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rb-weights input { accent-color: var(--accent); }
.rb-rank { list-style: none; display: grid; gap: 4px; }
.rb-rank li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 12px; font-size: 19px; color: var(--text-secondary); background: rgb(255 255 255 / 0.03); }
.rb-rank li.is-self { color: var(--text-primary); font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rb-rank .rk-pos { color: var(--accent); font-size: 20px; }
.rb-rank .rk-sc { font-size: 22px; color: var(--text-primary); }
.rb-delta { min-height: 50px; font-size: 18px; }
.rb-src { grid-column: 1 / 9; align-self: end; white-space: nowrap; }
.rb-reset { align-self: flex-start; }

.fm-form { position: relative; }
.fm-badge { position: absolute; top: -18px; right: 22px; padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--accent-contrast); background: var(--warn); box-shadow: 0 8px 24px -8px var(--warn); transform: rotate(2deg); }

/* ---------- La guía rápida como objeto ---------- */
.gp-left { grid-column: 1 / 6; display: grid; gap: var(--s3); align-content: center; justify-items: start; }
.gp-points { list-style: none; display: grid; gap: 10px; margin-top: var(--s2); }
.gp-points li { position: relative; padding-left: 34px; font-size: 22px; font-weight: 600; color: var(--text-primary); }
.gp-points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 18px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.gp-desk { grid-column: 6 / 13; align-self: center; display: grid; place-items: center; perspective: 1600px; height: 700px; }
.gp-sheet { position: relative; width: 520px; height: 690px; padding: 40px 44px; border-radius: 10px; transform-style: preserve-3d;
  background: linear-gradient(160deg, #fffdf7, #f2eee4); color: #14213a;
  box-shadow: 0 60px 90px -30px rgb(0 0 0 / 0.7), 0 20px 40px -20px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(20 33 58 / 0.08); }
.gp-sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply;
  background: radial-gradient(120% 70% at 90% 0%, transparent 40%, rgb(20 33 58 / 0.12)), repeating-linear-gradient(0deg, transparent 0 3px, rgb(20 33 58 / 0.015) 3px 4px); }
.gp-sh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 3px solid #14213a; }
.gp-brand { font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 30px; letter-spacing: -0.02em; }
.gp-brand em { font-style: normal; color: #b8862b; }
.gp-tag { font-size: 13px; font-weight: 700; color: #5a6680; }
.gp-qs { list-style: none; display: grid; gap: 20px; margin-top: 26px; }
.gp-qs li { display: grid; grid-template-columns: 36px 1fr; row-gap: 12px; }
.gp-n { grid-row: 1 / 4; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #14213a; color: #fffdf7; font-size: 15px; font-weight: 700; }
.gp-q { font-size: 20px; font-weight: 700; line-height: 1.2; }
.gp-line { display: block; height: 2px; background: rgb(20 33 58 / 0.22); transform-origin: left; }
.gp-line.short { width: 62%; }
.gp-sf { position: absolute; left: 44px; right: 44px; bottom: 30px; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #5a6680; border-top: 1px dashed rgb(20 33 58 / 0.3); padding-top: 10px; }
.gp-stamp { position: absolute; right: 24px; bottom: 96px; display: grid; justify-items: center; gap: 4px; padding: 16px 26px; border: 5px double #c0392b; border-radius: 14px; color: #c0392b; transform: rotate(-12deg) translateZ(30px);
  font-family: var(--font-display); font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.02em; mix-blend-mode: multiply; opacity: 0.92;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgb(0 0 0 / 0.75) 61%, #000 75%); mask: radial-gradient(circle at 30% 40%, #000 60%, rgb(0 0 0 / 0.75) 61%, #000 75%); }
.gp-stamp span { font-size: 34px; line-height: 1; }
.gp-stamp small { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.2em; }
.gp-ring { position: absolute; right: 60px; bottom: 90px; width: 240px; height: 240px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; pointer-events: none; box-shadow: 0 0 40px var(--accent); }

/* ---------- Decisiones elevadas ---------- */
.ev-head { grid-column: 1 / 13; display: flex; justify-content: space-between; align-items: end; gap: var(--s4); }
.ev-head .title-2 { max-width: 20ch; }
.ev-form { grid-column: 1 / 13; margin-top: var(--s3); display: grid; grid-template-columns: 1fr 2fr auto auto; gap: var(--s2); align-items: end; padding: var(--s3); border-radius: 20px; }
.ev-form[hidden] { display: none; }
.ev-form label { display: grid; gap: 6px; }
.ev-form input { font: 600 20px var(--font-body); padding: 12px 16px; border-radius: 12px; border: var(--hair) solid var(--border-strong); background: var(--surface-solid); color: var(--text-primary); }
.ev-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ev-table { grid-column: 1 / 13; list-style: none; margin-top: var(--s5); display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s4) var(--s3); align-content: start; }
.ev-card { position: relative; display: grid; gap: 10px; align-content: start; min-height: 190px; padding: 26px 28px 30px; border-radius: 8px; transform: rotate(var(--r));
  background: linear-gradient(170deg, #fffdf6, #f3ecdc); color: #14213a; box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.75); }
.ev-card::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-2deg); background: color-mix(in srgb, var(--accent) 70%, transparent); opacity: 0.75; }
.ev-card .label { color: #9a6f1f; }
.ev-card p { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
.ev-card.ghost { background: transparent; color: var(--text-muted); border: 2px dashed var(--border-strong); box-shadow: none; }
.ev-card.ghost::before { display: none; }
.ev-card.ghost .label { color: var(--text-muted); }
.ev-card.ghost p { font-family: var(--font-body); font-weight: 500; font-size: 19px; color: var(--text-secondary); }
.ev-del { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(20 33 58 / 0.08); color: #14213a; font-size: 20px; cursor: pointer; opacity: 0; transition: opacity 200ms; }
.ev-card:hover .ev-del, .ev-del:focus-visible { opacity: 1; }
.ev-help { grid-column: 1 / 13; margin-top: var(--s4); }
.ac-list .ac-elev { grid-template-columns: repeat(3, 1fr); }
.ac-list .ac-elev li { grid-template-columns: 30px 1fr; font-size: 15px; line-height: 1.25; padding: 7px 12px; gap: 2px 8px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-solid)); }
.ac-list .ac-elev .num { font-size: 15px; grid-row: 1 / 3; }
.ac-list .ac-elev em { grid-column: 2; grid-row: 1; font-size: 12px; color: var(--accent); }

/* ---------- Temporizador por rondas ---------- */
.tm-tick { stroke: var(--text-primary); stroke-width: 5; stroke-linecap: round; opacity: 0.8; }
.tm-round { font-size: 17px; font-weight: 800; color: var(--accent); max-width: 250px; line-height: 1.2; }
.tm-flash { position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--accent); box-shadow: 0 0 60px var(--accent), inset 0 0 40px color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0; pointer-events: none; }
.tm-rounds { list-style: none; display: grid; gap: 8px; width: 420px; }
.tm-rounds li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 16px; border-radius: 12px; overflow: hidden; font-size: 16px; font-weight: 600; color: var(--text-secondary); background: var(--surface-solid); border: var(--hair) solid var(--border); }
.tm-rounds .tm-bar { position: absolute; inset: 0; }
.tm-rounds .tm-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: color-mix(in srgb, var(--accent) 22%, transparent); transition: transform 1s linear; }
.tm-rounds .tm-rl, .tm-rounds .num { position: relative; }
.tm-rounds li.on { color: var(--text-primary); border-color: var(--accent); box-shadow: var(--glow); }
.tm-rounds li.past { color: var(--text-secondary); }
.tm-rounds li.past .tm-bar i { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ws-timer { gap: 14px; }
.tm-keys { padding: 6px 14px; border-radius: 999px; background: rgb(var(--scrim) / 0.7); white-space: nowrap; }
.tm { width: 380px; height: 380px; }
.tm-time { font-size: 100px; }

/* ==========================================================================
   Reflujo (lectura / móvil)
   ========================================================================== */
@container scene (max-width: 1120px) {
  .scene > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .op-title, .ch-title, .cl-title, .stm-idea { font-size: var(--t-display) !important; }
  .op-credit, .ch-num, .br-arrow { display: none; }
  .st-value { font-size: 120px; }
  .st-unit { font-size: var(--t-h3); }
  .st-break { grid-template-columns: 1fr 1fr 1fr; }
  .st-break .num { font-size: 30px; }
  .sch-row, .nb-row, .tc-row, .ct-row, .pt-beats, .cl-cols, .s10-keep ul, .ex-cols, .ex-levels { grid-template-columns: 1fr; gap: 14px; }
  .sch-line, .sch-node { display: none; }
  .bento { height: auto; grid-template-rows: none; grid-template-columns: 1fr; }
  .bn-lg, .bn-md, .bn-sm:nth-of-type(3), .bn-sm:nth-of-type(4) { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .ch-meta { flex-direction: column; }
  .stm-rows li, .pl-list li { grid-template-columns: 50px 1fr; }
  .stm-b { grid-column: 2; }
  .nb-v { font-size: 80px; }
  .ct-side { min-height: 320px; }
  .ct-big { font-size: 56px; }
  .sy-diagram { height: auto; display: grid; gap: 12px; }
  .sy-diagram svg { display: none; }
  .sy-node { position: relative; transform: none; left: auto !important; top: auto !important; width: 100%; }
  .sy-panel { min-height: 0; }
  .pr-wave { height: auto; display: grid; gap: 10px; }
  .pr-wave svg, .pr-groups { display: none; }
  .pr-node, .pr-node.up { position: relative; left: auto !important; top: auto !important; transform: none; flex-direction: row; gap: 14px; width: 100%; justify-content: flex-start; text-align: left; }
  .mx-grid { grid-template-columns: 1fr 1fr; }
  .lp-svg { display: none; }
  .cs-rows li { grid-template-columns: 40px 1fr; }
  .cs-v { grid-column: 2; }
  .pt-segs { height: 44px; }
  .s10-grid, .m-row, .m-phases, .cn-list { grid-template-columns: 1fr 1fr; }
  .cp-stage { height: auto; cursor: default; }
  .cp-layer { position: relative; clip-path: none !important; padding: var(--s4); }
  .cp-handle, .cp-controls { display: none; }
  .cp-text, .cp-before .cp-text { font-size: var(--t-h3); }
  .ws-timer { justify-items: start; }
  .tm { width: 260px; height: 260px; }
  .tm-time { font-size: 64px; }
  .cn-head { flex-direction: column; align-items: flex-start; }
  .rb-headrow { display: none; }
  .rb-row { grid-template-columns: 1fr; gap: 10px; }
  .rb-src { white-space: normal; }
  .rb-score { font-size: 96px; }
  .tpl-explorer .ex-panel { display: none; }
  .ex-all { display: grid; gap: 28px; }
  .ev-form { grid-template-columns: 1fr; }
  .gp-desk { height: auto; perspective: none; }
  .gp-sheet { transform: none !important; width: 100%; max-width: 520px; height: auto; padding-bottom: 80px; }
  .ev-head { flex-direction: column; align-items: flex-start; }
  .tm-rounds { width: 100%; }
  .ex-all > article { display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: var(--surface-solid); border: var(--hair) solid var(--border); }
}
@container scene (max-width: 1120px) {
  .pf-flow { grid-template-columns: 1fr; }
  .cn-dec { grid-template-columns: 40px 1fr; }
  .cn-st { grid-column: 2; justify-self: start; }
  .pf-line { display: none; }
  .pf-tag { justify-self: start; }
}
@container scene (max-width: 600px) {
  .s10-grid, .m-row, .m-phases, .cn-list, .mx-grid, .st-break { grid-template-columns: 1fr; }
}

/* ---------- Créditos ---------- */
.cr-list { grid-column: 1 / 13; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px var(--gutter); margin-top: var(--s4); }
.cr-list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 10px; border-radius: 16px; background: var(--surface-solid); border: var(--hair) solid var(--border); }
.cr-list img { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; }
.cr-list b { display: block; font-size: 17px; color: var(--text-primary); }
.cr-list span { font-size: 14px; color: var(--text-muted); line-height: 1.35; }
.cr-note { grid-column: 1 / 13; margin-top: var(--s3); }
@container scene (max-width: 1120px) { .cr-list { grid-template-columns: 1fr; } }

.cn-dec[data-state="nivel"] { border-color: var(--accent); box-shadow: var(--glow); }
.cn-dec[data-state="nivel"] .cn-st { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.ac-list { display: grid; gap: 6px; width: 100%; }
.ac-list ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ac-list .ac-g { margin-top: 8px; }
.ac-list li { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: 14px; background: var(--surface-solid); border: var(--hair) solid var(--border); font-size: 17px; color: var(--text-primary); }
.ac-list li .num { color: var(--accent); font-size: 18px; }
.ac-list li em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--text-muted); }
.ac-list li[data-state="consenso"] em { color: var(--ok); }
.ac-list li[data-state="ajustar"] em { color: var(--warn); }
.ac-list li[data-state="nivel"] em { color: var(--accent); }
.ac-sign { margin-top: var(--s3) !important; }
html.reader .gp-stamp { opacity: .92 !important; visibility: visible !important; }
/* Acta: cabe con hasta ~9 decisiones elevadas */
.ac-doc { gap: var(--s2); }
.ac-doc .title-2 { font-size: 44px; }
.ac-list li { padding: 9px 16px; font-size: 18px; }
.ac-list .ac-elev li { padding: 6px 12px; }
/* Reflujo: ningún hijo de grilla puede ensanchar su pista más allá de la pantalla */
@container scene (max-width: 1120px) {
  .scene * { min-width: 0; }
  :where(.scene) > :where(*) { grid-template-columns: minmax(0, 1fr); }
  .cn-group .cn-list, .cn-group:first-of-type .cn-list { grid-template-columns: 1fr; }
  .gp-stamp { right: 10px; bottom: 64px; width: max-content; padding: 8px 14px; border-width: 4px; }
  .gp-stamp span { font-size: 20px; }
  .gp-stamp small { font-size: 11px; }
  .scene .label, .scene .kicker, .tm-keys { white-space: normal; }
}

/* ==========================================================================
   Co-creación (js/templates/cocrea.js): paraguas, plataforma real, cartas de Meli, tablero de propuestas
   ========================================================================== */
/* Paraguas: 7 pasos en 3 fases; corchetes del nivel idea (arriba) y del nivel proyecto (abajo) */
.tpl-umbrella { grid-template-rows: auto 1fr auto; }
.tpl-umbrella .sc-lede { font-size: var(--t-body); max-width: 62ch; }
.um-map { grid-column: 1 / 13; align-self: center; display: grid; gap: 10px; margin-top: var(--s3); }
.um-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; list-style: none; min-height: 10px; }
.um-phase { padding: 8px 16px; border-radius: 999px; text-align: center; font-size: 18px; font-weight: 700; color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent); border: var(--hair) solid var(--border); }
.um-steps li { display: grid; gap: 10px; align-content: start; min-height: 118px; padding: 16px 18px 18px; border-radius: 20px; font-size: 21px; font-weight: 600; line-height: 1.2;
  color: var(--text-secondary); background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.um-steps li .num { font-size: 36px; color: var(--text-muted); }
.um-steps li.idea { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.um-steps li.idea .num { color: var(--accent); }
.um-br { position: relative; display: grid; place-items: center; height: 46px; }
.um-br::before { content: ""; position: absolute; left: 6px; right: 6px; height: 14px; border: 3px solid var(--accent); }
.um-br.top::before { bottom: 0; border-bottom: 0; border-radius: 12px 12px 0 0; }
.um-br.bottom::before { top: 0; border-top: 0; border-radius: 0 0 12px 12px; border-color: var(--accent-2); }
.um-br b { position: relative; z-index: 1; padding: 4px 14px; border-radius: 999px; font-size: 17px; background: var(--background); color: var(--accent); white-space: nowrap; }
.um-br.top b { transform: translateY(-12px); }
.um-br.bottom b { transform: translateY(12px); color: var(--accent-2); }
.um-roles { grid-column: 1 / 13; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--s4); }
.um-roles li { display: grid; gap: 4px; padding: 14px 20px; border-radius: 16px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); font-size: 20px; color: var(--text-secondary); }
.um-foot { grid-column: 1 / 13; margin-top: var(--s3); }

/* Plataforma real: navegador con capturas + acceso por QR */
.tpl-platreal { align-content: center; }
.prl-left { grid-column: 1 / 6; display: grid; gap: var(--s2); align-content: center; justify-items: start; }
.prl-lede { max-width: 34ch; }
.prl-list { list-style: none; display: grid; gap: 6px; width: 100%; margin-top: 6px; }
.prl-item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; width: 100%; padding: 10px 14px; border: var(--hair) solid transparent; border-radius: 14px; background: none; color: var(--text-secondary); text-align: left; cursor: pointer; font: inherit; transition: background-color var(--d-local), border-color var(--d-local); }
.prl-item .num { font-size: 22px; color: var(--text-muted); }
.prl-item b { display: block; font-size: 20px; color: var(--text-primary); font-weight: 700; }
.prl-item small { display: block; font-size: 16px; line-height: 1.35; margin-top: 2px; }
.prl-list li.on .prl-item { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.prl-list li.on .num { color: var(--accent); }
.prl-access { display: flex; gap: 16px; align-items: center; margin-top: 8px; padding: 10px 18px 10px 10px; border-radius: 18px; background: var(--surface); border: var(--hair) solid var(--border-strong); color: inherit; text-decoration: none; }
.prl-access img { width: 96px; height: 96px; padding: 6px; border-radius: 10px; background: #fff; }
.prl-access b { display: block; font-size: 20px; color: var(--text-primary); }
.prl-browser { grid-column: 6 / 13; align-self: center; margin: 0; padding: 0; overflow: hidden; border-radius: 18px; }
.prl-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: color-mix(in srgb, var(--surface-solid) 90%, transparent); border-bottom: var(--hair) solid var(--border); }
.prl-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.prl-url { flex: 1; margin-left: 10px; padding: 4px 14px; border-radius: 999px; font-size: 14px; color: var(--text-secondary); background: rgb(0 0 0 / 0.22); }
.prl-live { font-size: 13px; font-weight: 800; color: var(--ok); }
.prl-live::before { content: "● "; }
.prl-screens { position: relative; aspect-ratio: 16 / 10; perspective: 1400px; background: #0b0b0e; }
.prl-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform-origin: 50% 0; }
.prl-browser figcaption { padding: 8px 16px; }

/* Cartas de Meli: abanico */
.tpl-cartas { grid-template-rows: auto 1fr auto; }
.ca-fan { grid-column: 1 / 13; position: relative; list-style: none; height: 430px; margin-top: var(--s3); }
.ca-card { position: absolute; left: calc(50% - 105px); top: 20px; width: 210px; height: 310px; transform-origin: 50% 120%; }
.ca-face { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 18px 20px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-solid), color-mix(in srgb, var(--surface-solid) 70%, var(--accent) 12%));
  border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: var(--shadow-card); transition: transform var(--d-local) var(--ease-out); }
.ca-card:hover .ca-face { transform: translateY(-18px); }
.ca-corner { display: grid; gap: 2px; }
.ca-corner .num { font-size: 44px; line-height: 1; color: var(--accent); }
.ca-corner small { font-size: 13px; font-weight: 800; color: var(--text-muted); }
.ca-step { align-self: center; font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 30px; line-height: 1.02; letter-spacing: -0.02em; color: var(--text-primary); }
.ca-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); padding-top: 10px; border-top: var(--hair) solid var(--border); }
.ca-card.pending .ca-title { color: var(--text-muted); font-style: italic; }
.ca-suit { position: absolute; right: -10px; bottom: 36px; font-family: var(--font-display); font-weight: 800; font-size: 150px; line-height: 1; color: var(--accent); opacity: 0.08; }
.ca-foot { grid-column: 1 / 13; text-align: center; justify-self: center; max-width: 70ch; }

/* Tablero de co-creación (reusa las tarjetas de «elevadas») */
.co-form { grid-template-columns: 0.8fr 1.3fr 0.9fr 2fr auto auto; }
.co-form select { font: 600 20px var(--font-body); padding: 12px 14px; border-radius: 12px; border: var(--hair) solid var(--border-strong); background: var(--surface-solid); color: var(--text-primary); }
.co-tipo { justify-self: start; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #14213a; background: rgb(20 33 58 / 0.1); }
.co-tipo[data-t="Agregar"] { background: color-mix(in srgb, var(--ok) 35%, #fff); }
.co-tipo[data-t="Cambiar"] { background: color-mix(in srgb, var(--warn) 40%, #fff); }
.co-tipo[data-t="Sacar"] { background: color-mix(in srgb, var(--risk) 35%, #fff); }
.ev-card.ghost .co-tipo { color: var(--text-muted); background: transparent; border: var(--hair) dashed var(--border-strong); }

@container scene (max-width: 1120px) {
  .um-row { grid-template-columns: 1fr; }
  .um-phases, .um-row:has(.um-br) { display: none; }
  .um-steps li { min-height: 0; grid-template-columns: 50px 1fr; align-items: baseline; }
  .um-roles { grid-template-columns: 1fr; }
  .prl-browser { order: -1; }
  .ca-fan { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ca-card { position: relative; left: auto; top: auto; width: auto; height: 240px; transform: none !important; }
  .co-form { grid-template-columns: 1fr; }
}
html.reader .prl-screens { aspect-ratio: auto; display: grid; gap: 8px; }
html.reader .prl-screens img { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; height: auto; }

/* Consenso: el bloque A (5 acuerdos) en una sola fila */
.cn-group:first-of-type .cn-list:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cn-group:first-of-type .cn-list:has(> li:nth-child(5)) .cn-q { font-size: 19px; }
@container scene (max-width: 1120px) { .cn-group:first-of-type .cn-list:has(> li:nth-child(5)) { grid-template-columns: 1fr; } }
@container scene (max-width: 1120px) { .prl-access { width: 100%; } .prl-access > span { min-width: 0; } .prl-access b { overflow-wrap: anywhere; font-size: 17px; } .prl-access img { width: 72px; height: 72px; flex: none; } }

/* La primera pregunta: la sala pone el dato */
.tpl-pregunta { align-content: center; }
.pq-left { grid-column: 1 / 8; display: grid; gap: var(--s3); align-content: center; justify-items: start; }
.pq-q { font-size: 84px; max-width: 15ch; }
.pq-q2 { max-width: 20ch; color: var(--text-primary); }
.pq-close { max-width: 26ch; }
.pq-board { grid-column: 8 / 13; align-self: center; display: grid; gap: 16px; padding: 26px 28px; }
.pq-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pq-totals b { display: block; font-size: 76px; line-height: 1; color: var(--text-primary); margin-top: 6px; }
.pq-totals > div + div b { color: var(--accent); }
.pq-bar { height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--risk) 38%, transparent); overflow: hidden; }
.pq-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.pq-list { list-style: none; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.pq-list:empty { display: none; }
.pq-list li { position: relative; display: grid; grid-template-columns: 1fr 70px 70px 28px; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); font-size: 17px; color: var(--text-secondary); }
.pq-list b, .pq-list em { font-style: normal; text-align: right; font-size: 19px; color: var(--text-primary); }
.pq-list em { color: var(--accent); }
.pq-del { border: 0; background: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.pq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.pq-form[hidden] { display: none; }
.pq-form label { display: grid; gap: 4px; }
.pq-form .wide { grid-column: 1 / -1; }
.pq-form input { font: 600 19px var(--font-body); padding: 10px 14px; border-radius: 12px; border: var(--hair) solid var(--border-strong); background: var(--surface-solid); color: var(--text-primary); min-width: 0; }
.pq-add { justify-self: start; }
.pq-add[hidden] { display: none; }
@container scene (max-width: 1120px) {
  .pq-q { font-size: var(--t-h1); }
  .pq-totals b { font-size: 56px; }
}
.pq-bar.empty { background: var(--border); }

/* Plataforma: pantalla sin captura (nivel proyecto) */
.prl-panel { position: absolute; inset: 0; display: grid; align-content: center; gap: 18px; padding: 40px 48px; background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--accent) 10%, var(--surface-solid)), var(--surface-solid)); transform-origin: 50% 0; }
.prl-panel ol { list-style: none; display: grid; gap: 10px; }
.prl-panel li { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: baseline; padding: 12px 18px; border-radius: 14px; background: color-mix(in srgb, var(--background) 45%, transparent); border: var(--hair) solid var(--border); font-size: 19px; color: var(--text-secondary); }
.prl-panel li b { font-size: 24px; color: var(--accent); }
html.reader .prl-panel { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; }
@container scene (max-width: 1120px) { .prl-panel { padding: 20px; } .prl-panel li { grid-template-columns: 1fr; gap: 4px; } }
/* Galería: etiquetas de tipo y alcance */
.co-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.co-alc { padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #14213a; border: 1.5px solid rgb(20 33 58 / 0.35); }
.co-alc[data-a="Estructural"] { background: #14213a; color: #fff; border-color: #14213a; }
.ev-card.ghost .co-alc { color: var(--text-muted); background: transparent; border: var(--hair) dashed var(--border-strong); }
.co-form { grid-template-columns: 0.8fr 1.2fr 0.8fr 0.8fr 1.8fr auto auto; }
.ac-const { margin-top: var(--s3); }
.cn-dec[data-state="no"] { border-color: var(--risk); }
.cn-dec[data-state="no"] .cn-st { color: var(--background); background: var(--risk); border-color: var(--risk); }
.cn-dec[data-state="no"] .cn-st::before { content: "✕ "; }
.ac-list li[data-state="no"] em { color: var(--risk); }
@container scene (max-width: 1120px) { .ev-head, .ev-head > div { max-width: 100%; min-width: 0; } .ev-head .kicker { width: auto; } .ev-head .title-2 { max-width: 100%; } }
.ca-step { font-size: 25px; overflow-wrap: anywhere; }

/* Elevadas: resumen por decisión del lienzo */
.ev-sum { grid-column: 1 / 13; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.ev-sum:empty { display: none; }
.ev-sum li { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: var(--hair) solid var(--border-strong); font-size: 18px; font-weight: 600; color: var(--text-secondary); }
.ev-sum li:first-child { border-color: var(--accent); box-shadow: var(--glow); color: var(--text-primary); }
.ev-sum b { font-size: 24px; color: var(--accent); }
.ev-form select { font: 600 20px var(--font-body); padding: 12px 14px; border-radius: 12px; border: var(--hair) solid var(--border-strong); background: var(--surface-solid); color: var(--text-primary); }
.ev-form:not(.co-form) { grid-template-columns: 1fr 1.2fr 2fr auto auto; }
.ev-table { margin-top: var(--s4); }
@container scene (max-width: 1120px) { .ev-form:not(.co-form) { grid-template-columns: 1fr; } }
/* Elevadas y acta: caben hasta ~10 Laboratorios */
.tpl-elevadas .ev-table { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; margin-top: var(--s3); }
.tpl-elevadas .ev-card { min-height: 0; padding: 16px 16px 18px; gap: 6px; }
.tpl-elevadas .ev-card p { font-size: 19px; line-height: 1.15; }
.tpl-elevadas .ev-card .label { font-size: 14px; }
.tpl-elevadas .ev-help { margin-top: var(--s2); font-size: 15px; }
.tpl-acta .ac-doc .title-2 { font-size: 38px; }
.tpl-acta .ac-list { gap: 4px; }
.tpl-acta .ac-list .ac-g { margin-top: 4px; font-size: 15px; }
.tpl-acta .ac-list li { padding: 5px 10px; font-size: 14.5px; line-height: 1.2; grid-template-columns: 30px 1fr auto; gap: 8px; }
.tpl-acta .ac-list li .num { font-size: 14px; }
.tpl-acta .ac-list li em { font-size: 12px; }
.tpl-acta .ac-list ol.ac-elev { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tpl-acta .ac-list ol.ac-elev li { grid-template-columns: 30px 1fr; }
.tpl-acta .ac-list ol.ac-elev li em { grid-column: 2; }
.tpl-acta .ac-list ol.ac-elev li span:last-child { grid-column: 2; }
@container scene (max-width: 1120px) { .tpl-elevadas .ev-table, .tpl-acta .ac-list ol.ac-elev { grid-template-columns: 1fr; } }

/* Acta: resumen en pantalla, detalle al imprimir */
.ac-full { display: none !important; }
.ac-sum { list-style: none; display: flex !important; flex-wrap: wrap; gap: 6px; }
.ac-sum li { display: inline-flex !important; gap: 8px; align-items: baseline; padding: 4px 12px !important; border-radius: 999px !important; font-size: 14px !important; }
.ac-sum b { color: var(--accent); font-size: 17px; }
.tpl-acta .ac-list ol.ac-co { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpl-acta .ac-list ol.ac-co li span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media print { .ac-screen { display: none !important; } .ac-full { display: grid !important; } }
@container scene (max-width: 1120px) { .tpl-acta .ac-list ol.ac-co { grid-template-columns: 1fr; } }

/* Acuerdos de las mesas: tres columnas por tema, con apoyos y estado */
.ag-form { grid-template-columns: 0.7fr 1fr 2fr 1fr 0.8fr auto auto; }
.ag-form select { font: 600 19px var(--font-body); padding: 11px 12px; border-radius: 12px; border: var(--hair) solid var(--border-strong); background: var(--surface-solid); color: var(--text-primary); }
.ag-cols { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s3); align-items: start; }
.ag-col > .label { padding-bottom: 8px; border-bottom: 2px solid var(--accent); margin-bottom: 10px; }
.ag-col ol { list-style: none; display: grid; gap: 8px; max-height: 470px; overflow: auto; }
.ag-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); }
.ag-card.ghost { background: transparent; border-style: dashed; opacity: 0.75; }
.ag-card[data-state="consenso"] { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.ag-card[data-state="ajustar"] { border-color: var(--warn); }
.ag-card[data-state="no"] { opacity: 0.55; }
.ag-que { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--text-primary); }
.ag-meta { font-size: 13px; color: var(--text-muted); }
.ag-row { display: flex; align-items: center; gap: 6px; }
.ag-n { font-size: 20px; color: var(--accent); min-width: 22px; text-align: center; }
.ag-nl { font-size: 12px; color: var(--text-muted); margin-right: auto; }
.ag-vote, .ag-del { width: 28px; height: 28px; border-radius: 50%; border: var(--hair) solid var(--border-strong); background: var(--surface-solid); color: var(--text-primary); cursor: pointer; font-size: 16px; line-height: 1; }
.ag-st { padding: 4px 10px; border-radius: 999px; border: var(--hair) solid var(--border-strong); background: transparent; color: var(--text-secondary); font: 700 12px var(--font-body); cursor: pointer; }
.ag-card[data-state="consenso"] .ag-st { background: var(--ok); color: var(--background); border-color: var(--ok); }
.ag-card[data-state="ajustar"] .ag-st { background: var(--warn); color: var(--background); border-color: var(--warn); }
.ag-card[data-state="no"] .ag-st { background: var(--risk); color: var(--background); border-color: var(--risk); }
/* Acuerdos del encuentro (para la tarde) */
.rs-head { grid-column: 1 / 13; display: flex; justify-content: space-between; align-items: end; gap: var(--s4); }
.rs-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; color: var(--text-muted); }
.rs-stats b { display: block; font-size: 34px; color: var(--accent); line-height: 1; }
.rs-cols { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s4); align-items: start; }
.rs-col { padding: 20px 22px; border-radius: var(--radius-card); background: var(--surface); border: var(--hair) solid var(--border); backdrop-filter: blur(var(--glass-blur)); min-height: 420px; }
.rs-col > .label { font-size: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); margin-bottom: 12px; }
.rs-col ol { list-style: none; display: grid; gap: 10px; counter-reset: rs; }
.rs-col li { counter-increment: rs; display: grid; gap: 2px; padding-left: 34px; position: relative; }
.rs-col li::before { content: counter(rs); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-body); background: var(--accent); color: var(--accent-contrast); }
.rs-col li span { font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.rs-col li small { font-size: 13px; color: var(--text-muted); }
.rs-actions { grid-column: 1 / 13; display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); }
@media print { body.print-only-resultado .scene:not([data-id="resultado"]) { display: none !important; } body.print-only-resultado .rs-actions { display: none; } }
@container scene (max-width: 1120px) { .ag-cols, .rs-cols, .ag-form { grid-template-columns: 1fr; } .rs-head { flex-direction: column; align-items: flex-start; } .rs-col { min-height: 0; } .ag-col ol { max-height: none; } }
.rs-col { min-height: 330px; padding: 16px 18px; }
.rs-col li span { font-size: 16px; }
.rs-col ol { gap: 7px; }
.rs-cols { margin-top: var(--s3); }
.rs-actions { margin-top: var(--s2); }
/* Escenas de método: el pie es la regla, más contenido */
.tpl-pillars:has(.title-2) .pl-foot { font-size: 28px; }
@container scene (max-width: 1120px) { .rs-head, .rs-head > div { max-width: 100%; min-width: 0; } .rs-head .kicker { width: auto; } .rs-stats { gap: 10px; } }

/* Escenas de actividad: una por parte, con QR al material exacto */
.ws-ex { display: grid; gap: 8px; width: 100%; }
.ws-ex p { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline; padding: 10px 16px; border-radius: 14px; font-size: 18px; line-height: 1.3; color: var(--text-secondary); background: var(--surface); border: var(--hair) solid var(--border); }
.ws-bad { font-weight: 800; color: var(--risk); }
.ws-good { font-weight: 800; color: var(--ok); }
.ws-mats { display: grid; gap: 10px; width: 100%; max-width: 420px; }
.ws-mat { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface); border: var(--hair) solid var(--border-strong); color: inherit; text-decoration: none; backdrop-filter: blur(var(--glass-blur)); }
.ws-mat img { width: 104px; height: 104px; padding: 6px; border-radius: 10px; background: #fff; }
.ws-mat b { display: block; font-size: 18px; line-height: 1.2; color: var(--text-primary); }
.ws-mat small { display: block; font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.ws-timer:has(.ws-mats) .tm { width: 300px; height: 300px; }
.ws-timer:has(.ws-mats) .tm-time { font-size: 76px; }
.ws-timer:has(.ws-mats .ws-mat:nth-child(3)) .tm { width: 250px; height: 250px; }
.ws-timer:has(.ws-mats .ws-mat:nth-child(3)) .ws-mat img { width: 84px; height: 84px; }
.ws-timer:has(.ws-mats .ws-mat:nth-child(3)) .ws-mat { grid-template-columns: 84px 1fr; padding: 6px 12px 6px 6px; }
@container scene (max-width: 1120px) { .ws-mats { max-width: none; } }
.pl-left .ws-ex p { grid-template-columns: 1fr; gap: 4px; font-size: 20px; padding: 14px 18px; }
.pl-left .ws-ex p:last-child { color: var(--text-primary); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
/* Varias rondas + QR (viernes): reloj y tarjetas compactos para que todo entre en 16:9 */
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) { gap: 10px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .tm { width: 210px; height: 210px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .tm-time { font-size: 56px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .tm-round { font-size: 12px; max-width: 140px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .tm-hint { font-size: 12px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .tm-rounds li { padding: 7px 14px; font-size: 15px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .ws-mats { gap: 8px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .ws-mat { grid-template-columns: 68px 1fr; gap: 12px; padding: 6px 12px 6px 6px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .ws-mat img { width: 68px; height: 68px; padding: 4px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .ws-mat b { font-size: 16px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .ws-mat small { font-size: 13px; }
.ws-timer:has(.tm-rounds li + li):has(.ws-mats) .tm-rounds, .ws-timer:has(.tm-rounds li + li):has(.ws-mats) .ws-mats { width: 400px; max-width: 400px; }
@container scene (max-width: 1120px) { .ws-timer:has(.tm-rounds li + li):has(.ws-mats) .tm-rounds, .ws-timer:has(.tm-rounds li + li):has(.ws-mats) .ws-mats { width: 100%; max-width: none; } }

/* ---------- Ficha de actividad (plantilla actividad) ---------- */
.tpl-actividad { grid-template-rows: auto 1fr auto; row-gap: 20px; }
.af-head { grid-column: 1 / 10; display: grid; gap: 14px; align-content: start; justify-items: start; }
.af-head .title-2 { font-size: 58px; }
.af-rail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.af-rail li { padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text-muted); background: rgb(var(--scrim) / 0.55); border: var(--hair) solid var(--border); }
.af-rail li.past { color: var(--text-secondary); }
.af-rail li.past::before { content: "✓ "; color: var(--ok); }
.af-rail li.on { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.af-clock { grid-column: 10 / 13; grid-row: 1; justify-self: end; align-self: start; display: grid; justify-items: center; gap: 8px; }
.af-clock .tm { width: 200px; height: 200px; }
.af-clock .tm-time { font-size: 54px; }
.af-clock .tm-round { font-size: 12px; max-width: 130px; }
.af-clock .tm-hint { font-size: 11px; }
.af-clock .tm-rounds { width: 300px; gap: 5px; }
.af-clock .tm-rounds li { padding: 6px 12px; font-size: 14px; }
.tpl-actividad:has(.tm-rounds) .af-clock { grid-template-columns: auto auto; align-items: center; gap: 14px; }
.tpl-actividad:has(.tm-rounds) .af-head { grid-column: 1 / 8; }
.tpl-actividad:has(.tm-rounds) .af-clock { grid-column: 8 / 13; }
.af-cols { grid-column: 1 / 13; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 18px; align-items: stretch; min-height: 0; }
.af-col { display: grid; align-content: start; gap: 12px; padding: 18px 20px 20px; border-radius: 20px; background: rgb(var(--scrim) / 0.78); border: var(--hair) solid var(--border-strong); backdrop-filter: blur(var(--glass-blur)); }
.af-h { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.af-h i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 14px; letter-spacing: 0; color: var(--accent-contrast); background: var(--accent); }
.af-steps { list-style: none; display: grid; gap: 16px; counter-reset: none; }
.af-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; font-size: 22px; font-weight: 650; line-height: 1.25; color: var(--text-primary); }
.af-steps li .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 16px; color: var(--accent); border: var(--hair) solid color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(4px); }
.af-steps small { display: block; margin-top: 3px; font-size: 15.5px; font-weight: 400; line-height: 1.3; color: var(--text-secondary); }
.af-with { justify-items: center; }
.af-with .af-h { justify-self: stretch; }
.af-doc { position: relative; display: block; width: 190px; border-radius: 6px; box-shadow: 0 14px 34px rgb(0 0 0 / 0.45); transform: rotate(-1.5deg); }
.af-doc.land { width: 100%; max-width: 300px; transform: rotate(-1deg); }
.af-thumb { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
.af-qr { position: absolute; right: -14px; bottom: -14px; width: 96px; height: 96px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / 0.4); transform: rotate(1.5deg); }
.af-doc-l { display: grid; gap: 2px; margin-top: 8px; text-align: center; }
.af-doc-l b { font-size: 18px; line-height: 1.2; color: var(--text-primary); }
.af-doc-l small { font-size: 14px; color: var(--text-secondary); }
.af-more { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; width: 100%; padding: 6px 10px 6px 6px; border-radius: 12px; color: inherit; text-decoration: none; background: var(--surface); border: var(--hair) solid var(--border); }
.af-more .af-qr { position: static; width: 58px; height: 58px; padding: 4px; border-radius: 8px; box-shadow: none; transform: none; }
.af-more .label { font-size: 12px; }
.af-more b { display: block; font-size: 15px; line-height: 1.2; color: var(--text-primary); }
.af-more small { display: block; font-size: 12.5px; color: var(--text-muted); }
.af-res { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.af-who { font-size: 15px; color: var(--text-secondary); }
.af-ex { display: grid; gap: 8px; }
.af-ex p { display: grid; gap: 3px; padding: 10px 14px; border-radius: 12px; font-size: 15.5px; line-height: 1.35; color: var(--text-secondary); background: var(--surface); border: var(--hair) solid var(--border); }
.af-ex span { font-size: 13px; font-weight: 800; letter-spacing: 0.03em; }
.af-bad span { color: var(--risk); }
.af-good { color: var(--text-primary) !important; border-color: color-mix(in srgb, var(--ok) 50%, transparent) !important; }
.af-good span { color: var(--ok); }
.af-keys { grid-column: 1 / 13; justify-self: start; }
@container scene (max-width: 1120px) {
  .tpl-actividad { grid-template-rows: none; }
  .af-head, .tpl-actividad:has(.tm-rounds) .af-head { grid-column: 1 / -1; }
  .af-clock, .tpl-actividad:has(.tm-rounds) .af-clock { grid-column: 1 / -1; grid-row: auto; justify-self: start; grid-template-columns: 1fr; }
  .af-clock .tm-rounds { width: 100%; }
  .af-cols { grid-template-columns: 1fr; }
  .af-keys { white-space: normal; }
}
/* Ficha con varias hojas: miniatura principal más chica para que entren las filas adicionales */
.af-with:has(.af-more + .af-more) { gap: 8px; }
.af-with:has(.af-more + .af-more) .af-doc { width: 124px; }
.af-with:has(.af-more + .af-more) .af-doc .af-qr { width: 74px; height: 74px; padding: 5px; right: -40px; bottom: -8px; }
.af-with:has(.af-more + .af-more) .af-doc-l { margin-top: 2px; }
.af-with:has(.af-more + .af-more) .af-doc-l b { font-size: 16px; }
.af-with:has(.af-more + .af-more) .af-more { grid-template-columns: 52px 1fr; padding: 4px 8px 4px 4px; }
.af-with:has(.af-more + .af-more) .af-more .af-qr { width: 52px; height: 52px; }
/* QR más grandes (13-oct): hoja y QR lado a lado, el QR legible desde las mesas */
.af-doc { display: flex; align-items: flex-end; gap: 14px; width: auto; box-shadow: none; transform: none; border-radius: 0; }
.af-doc.land { width: auto; max-width: none; transform: none; }
.af-doc .af-thumb { width: 150px; flex: none; box-shadow: 0 14px 34px rgb(0 0 0 / 0.45); transform: rotate(-1.5deg); }
.af-doc.land .af-thumb { width: 200px; transform: rotate(-1deg); }
.af-doc .af-qr { position: static; width: 168px; height: 168px; padding: 8px; border-radius: 12px; transform: none; flex: none; }
.af-doc.land .af-qr { width: 160px; height: 160px; }
.af-more { grid-template-columns: 84px 1fr; }
.af-more .af-qr { width: 84px; height: 84px; }
.af-with:has(.af-more + .af-more) .af-doc .af-thumb { width: 96px; }
.af-with:has(.af-more + .af-more) .af-doc .af-qr { width: 132px; height: 132px; padding: 6px; }
.af-with:has(.af-more + .af-more) .af-more { grid-template-columns: 76px 1fr; }
.af-with:has(.af-more + .af-more) .af-more .af-qr { width: 76px; height: 76px; }
.prl-access img { width: 116px; height: 116px; }
.tpl-platreal .prl-lede { margin-bottom: -6px; }

/* Ficha sin reloj: el encabezado ocupa todo el ancho */
.tpl-actividad .af-head { grid-column: 1 / 13; }
.tpl-actividad .af-cols { margin-top: 6px; }
.tpl-actividad .af-steps li { font-size: 23px; }

/* ---------- Reloj de la actividad (plantilla reloj) ---------- */
.rj-left { grid-column: 1 / 8; display: grid; gap: 18px; align-content: start; justify-items: start; }
.rj-left .title-2 { font-size: 60px; }
.rj-steps { list-style: none; display: grid; gap: 12px; width: 100%; }
.rj-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px 18px; border-radius: 16px; font-size: 25px; font-weight: 650; line-height: 1.22; color: var(--text-primary); background: rgb(var(--scrim) / 0.72); border: var(--hair) solid var(--border-strong); }
.rj-steps .num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 19px; color: var(--accent-contrast); background: var(--accent); }
.rj-out { display: grid; gap: 2px; padding: 12px 18px; border-radius: 16px; font-size: 21px; font-weight: 700; color: var(--text-primary); background: color-mix(in srgb, var(--accent) 16%, var(--surface-solid)); }
.rj-right { grid-column: 8 / 13; display: grid; justify-items: center; align-content: start; gap: 16px; }
.rj-right .tm { width: 380px; height: 380px; }
.rj-right .tm-time { font-size: 104px; }
.rj-right .tm-round { font-size: 18px; }
.rj-right .tm-rounds { width: 420px; }
.rj-qr { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; width: 100%; max-width: 560px; padding: 12px 18px 12px 12px; border-radius: 20px; color: inherit; text-decoration: none; background: rgb(var(--scrim) / 0.8); border: var(--hair) solid var(--border-strong); }
.rj-qr img { width: 200px; height: 200px; padding: 10px; border-radius: 14px; background: #fff; }
.rj-qr b { display: block; font-size: 22px; line-height: 1.2; color: var(--text-primary); margin-top: 2px; }
.rj-qr small { display: block; font-size: 15px; color: var(--text-secondary); margin-top: 4px; }
.rj-qr .rj-more { font-size: 13px; color: var(--text-muted); }
/* Con varias rondas (viernes) el reloj se achica para que entren la lista y el QR */
.tpl-reloj:has(.tm-rounds) .rj-right { gap: 12px; }
.tpl-reloj:has(.tm-rounds) .rj-right .tm { width: 290px; height: 290px; }
.tpl-reloj:has(.tm-rounds) .rj-right .tm-time { font-size: 80px; }
.tpl-reloj:has(.tm-rounds) .rj-qr { grid-template-columns: 170px 1fr; }
.tpl-reloj:has(.tm-rounds) .rj-qr img { width: 170px; height: 170px; }
@container scene (max-width: 1120px) {
  .rj-left, .rj-right { grid-column: 1 / -1; }
  .rj-right { justify-items: start; }
  .rj-right .tm, .tpl-reloj:has(.tm-rounds) .rj-right .tm { width: 260px; height: 260px; }
  .rj-right .tm-time { font-size: 64px; }
  .rj-right .tm-rounds { width: 100%; }
  .rj-qr, .tpl-reloj:has(.tm-rounds) .rj-qr { grid-template-columns: 120px 1fr; }
  .rj-qr img, .tpl-reloj:has(.tm-rounds) .rj-qr img { width: 120px; height: 120px; }
  .rj-steps li { font-size: 19px; }
}
.rj-left .af-rail li { padding: 4px 10px; font-size: 13px; }
.tpl-reloj:has(.tm-rounds) .rj-right .tm-round { font-size: 14px; max-width: 170px; }
/* Rúbrica: el panel de resultado entra completo y la nota no pasa por debajo del botón */
.rb-result { margin-top: var(--s2); padding: 20px 24px; gap: 8px; }
.rb-score { font-size: 112px; }
.rb-src { white-space: normal; }


/* ---------- Miniaturas de documentos en tarjetas (versiones sin fotos) ---------- */
.bn-docs, .ct-docs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bn-docs::after, .ct-docs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--surface-solid) 22%, color-mix(in srgb, var(--surface-solid) 70%, transparent) 50%, transparent 82%); }
.bn-body { z-index: 1; }
.bn-docs img, .ct-docs img { position: absolute; border-radius: 4px; background: #fff; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.08); transition: transform 700ms var(--ease-out);
  --rot: calc((var(--i) - (var(--n) - 1) / 2) * 7deg); transform: rotate(var(--rot)); }
.bn-docs img.port, .ct-docs img.port { width: 34%; }
.bn-docs img.land, .ct-docs img.land { width: 52%; }
.bn-docs img { top: calc(8% + var(--i) * 4%); right: calc(6% + var(--i) * 15%); }
.bn-lg .bn-docs img.port { width: 26%; } .bn-lg .bn-docs img.land { width: 46%; }
.bn-lg .bn-docs img { top: calc(7% + var(--i) * 6%); right: calc(5% + var(--i) * 17%); }
.bn-md .bn-docs img.port { width: 18%; } .bn-md .bn-docs img.land { width: 30%; }
.bn-md .bn-docs img { top: calc(10% + var(--i) * 6%); right: calc(4% + var(--i) * 15%); }
.bn-md .bn-docs::after { background: linear-gradient(90deg, var(--surface-solid) 40%, color-mix(in srgb, var(--surface-solid) 60%, transparent) 62%, transparent 85%); }
.bn-md .bn-body { padding-right: 38%; }
.bn-sm .bn-docs img { top: calc(-14% + var(--i) * 6%); right: calc(-6% + var(--i) * 22%); }
.bn-sm .bn-docs img.port { width: 34%; } .bn-sm .bn-docs img.land { width: 58%; }
.bn:hover .bn-docs img { transform: rotate(var(--rot)) translateY(-6px); }
.ct-docs { z-index: -1; }
.ct-docs img { top: calc(8% + var(--i) * 7%); right: calc(6% + var(--i) * 16%); }
.ct-light .ct-docs img.port { width: 34%; }
.ct-dense .ct-docs img.land { width: 44%; }
/* Ajuste: las hojas se asoman arriba y nunca tapan el texto */
.bn-lg .bn-docs img.port { width: 22%; } .bn-lg .bn-docs img.land { width: 38%; }
.bn-lg .bn-docs img { top: calc(4% + var(--i) * 3%); right: calc(5% + var(--i) * 15%); }
.bn-md .bn-docs img.port { width: 15%; } .bn-md .bn-docs img.land { width: 25%; }
.bn-md .bn-docs img { top: calc(12% + var(--i) * 5%); right: calc(4% + var(--i) * 13%); }
.bn-md .bn-body { padding-right: 32%; }
.bn-sm .bn-docs img.port { width: 24%; } .bn-sm .bn-docs img.land { width: 40%; }
.bn-sm .bn-docs img { top: calc(-30% + var(--i) * 4%); right: calc(4% + var(--i) * 20%); }
.bn-sm .bn-docs::after { background: linear-gradient(0deg, var(--surface-solid) 62%, color-mix(in srgb, var(--surface-solid) 40%, transparent) 78%, transparent 92%); }
.bn-md .bn-body { padding-right: 24%; }
.bn-md .bn-docs img.port { width: 12%; } .bn-md .bn-docs img.land { width: 20%; }
.bn-md .bn-docs img { top: calc(8% + var(--i) * 6%); right: calc(3% + var(--i) * 11%); }
.ct-docs img { top: calc(-26% + var(--i) * 5%); right: calc(5% + var(--i) * 18%); }
.ct-light .ct-docs img.port { width: 26%; }
.ct-dense .ct-docs img.land { width: 30%; }
.ct-docs::after { background: linear-gradient(0deg, var(--surface-solid) 60%, color-mix(in srgb, var(--surface-solid) 40%, transparent) 76%, transparent 90%); }
.bn-sm .bn-docs img { top: calc(-12% + var(--i) * 4%); right: calc(4% + var(--i) * 22%); }
.bn-sm .bn-docs::after { background: linear-gradient(0deg, var(--surface-solid) 66%, color-mix(in srgb, var(--surface-solid) 30%, transparent) 80%, transparent 94%); }
.bn-sm:has(.bn-docs) .title-3 { font-size: 29px; }
.bn-sm:has(.bn-docs) .small { font-size: 19px; }

/* Pregunta de apertura: QR al formulario en línea (las respuestas aparecen solas en el tablero) */
.pq-qr { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--surface-solid) 80%, transparent); border: var(--hair) solid var(--border-strong); }
.pq-qr img { width: 132px; height: 132px; padding: 7px; border-radius: 10px; background: #fff; }
.pq-qr b { display: block; font-size: 22px; color: var(--text-primary); margin-top: 2px; }
.pq-qr small { display: block; font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.pq-list li.en-linea span:first-child::after { content: " · en línea"; font-size: 12px; color: var(--accent); }
.tpl-pregunta .pq-add .btn-face { font-size: 14px; }
@container scene (max-width: 1120px) { .pq-qr { grid-template-columns: 96px 1fr; } .pq-qr img { width: 96px; height: 96px; } }
/* Pregunta de apertura: solo totales */
.pq-n { font-size: 16px; color: var(--text-secondary); }
.pq-n .pq-resp { font-size: 22px; color: var(--text-primary); }
.pq-form { grid-template-columns: 1fr 1fr; }
/* El deber ser */
.scene[data-id="deber-ser"] .pl-foot { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--text-muted); max-width: 60ch; }
.scene[data-id="deber-ambidextro"] .ct-side { min-height: 300px; }
.pl-src { font-size: 15px; max-width: 46ch; }
.scene[data-id="deber-ambidextro"] .ct-big { font-size: 72px; }
.scene[data-id="deber-ambidextro"] .ct-row { margin-top: var(--s3); }
/* El porqué: cifras más contenidas, en tres columnas */
.scene[data-id="porque-brecha"] .nb-row { grid-template-columns: repeat(3, 1fr); }
.scene[data-id="porque-brecha"] .nb-v { font-size: 104px; white-space: nowrap; }
.scene[data-id="porque-brecha"] .nb-foot { margin-top: var(--s3); }
.scene[data-id="porque-brecha"] .nb-row article { min-height: 0; }
@container scene (max-width: 1120px) { .scene[data-id="porque-brecha"] .nb-row { grid-template-columns: 1fr; } .scene[data-id="porque-brecha"] .nb-v { font-size: 64px; } }
[data-variant="expediente"] .scene[data-id="porque-brecha"] .nb-v { font-size: 88px; }
.nb-src { grid-column: 1 / 13; margin-top: 10px; font-size: 13px; max-width: 120ch; }
.scene[data-id="porque-ia"] .nb-row { grid-template-columns: repeat(3, 1fr); }
.scene[data-id="porque-ia"] .nb-v { font-size: 100px; white-space: nowrap; }
.scene[data-id="porque-ia"] .nb-row article { padding: 22px 26px; }
.scene[data-id="porque-ia"] .nb-foot { margin-top: var(--s2); }
@container scene (max-width: 1120px) { .scene[data-id="porque-ia"] .nb-row { grid-template-columns: 1fr; } .scene[data-id="porque-ia"] .nb-v { font-size: 64px; } }
[data-variant="expediente"] .scene[data-id="porque-ia"] .nb-v { font-size: 84px; }
.scene[data-id="porque-ia"] .title-2 { font-size: 52px; }
.scene[data-id="porque-ia"] .nb-row { margin-top: var(--s3); }
.scene[data-id="porque-ia"] .nb-foot { font-size: 24px; }

/* ---------- Ejemplos (16-oct): compactar lo que crece al sumar «Ej.» ---------- */
.stm-rows:has(.stm-ex) { margin-top: var(--s3); gap: 10px; }
.stm-rows:has(.stm-ex) .stm-n { font-size: 32px; }
.stm-rows:has(.stm-ex) .stm-t { font-size: 28px; }
.stm-rows:has(.stm-ex) .stm-b { font-size: 20px; line-height: 1.3; }
.stm-rows:has(.stm-ex) .stm-ex { margin-top: 4px; font-size: 19px; }
.ex-body:has(.ex-case) { gap: 12px; }
.ex-body:has(.ex-case) .ex-tpl { font-size: 20px; padding: 10px 16px; }
.ex-body:has(.ex-case) .ex-alert p:not(.label), .ex-body:has(.ex-case) .ex-levels p:not(.label) { font-size: 18px; }
.ex-body:has(.ex-case) .ex-q { font-size: 22px; }
.ex-body:has(.ex-case) .ex-head .title-2 { font-size: 50px; }
@container scene (min-width: 1121px) {
  .stm-rows:has(.stm-ex) li { grid-template-columns: 64px 430px 1fr; padding: 12px 24px; }
  .pl-list.con-ej { grid-row: 1 / span 2; }
  .pl-list.con-ej ~ .pl-foot { grid-column: 1 / 6; grid-row: 2; font-size: 28px; max-width: none; }
}
.ex-body:has(.ex-case) .ex-list li { font-size: 16px; padding: 5px 12px; }
.ex-body:has(.ex-case) .ex-head { gap: 4px; }
.ex-body:has(.ex-case) .ex-head .title-2 { font-size: 46px; }
.ex-body:has(.ex-case) .ex-levels > div { padding: 10px 16px; }
.pl-list.con-ej { gap: 10px; }
.pl-list.con-ej li { padding: 14px 20px; }
/* Elevadas en vivo (16-oct): tres pasos y ejemplos legibles */
.ev-how { grid-column: 1 / 13; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: var(--s3); }
.ev-how li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: var(--hair) solid var(--border); font-size: 20px; line-height: 1.3; color: var(--text-secondary); backdrop-filter: blur(var(--glass-blur)); }
.ev-how li b:not(.num) { color: var(--text-primary); }
.ev-how .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 18px; }
.tpl-elevadas .ev-card.ej { min-height: 150px; }
.tpl-elevadas .ev-card.ej p { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: 22px; color: var(--text-primary); }
.tpl-elevadas .ev-card.ej .label { color: var(--ok); }
@container scene (max-width: 1120px) { .ev-how { grid-template-columns: 1fr; } }
.tpl-elevadas .ev-table:has(.ej) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 28px; margin-top: var(--s4); }
.tpl-elevadas .ev-card.ej { min-height: 200px; padding: 24px 26px 28px; gap: 12px; }
.tpl-elevadas .ev-card.ej p { font-size: 32px; line-height: 1.12; }
.tpl-elevadas .ev-card.ej .label { font-size: 15px; }
@container scene (max-width: 1120px) { .tpl-elevadas .ev-table:has(.ej) { grid-template-columns: 1fr; } }
.scene[data-id="vinculos-relato"] .pl-foot { font-size: 46px; line-height: 1.05; }