/* ==========================================================================
   TrainAR HQ · hoja de estilo común
   Dirección visual: consola + bloques + textos grandes.
   Un solo archivo para todas las páginas. Los estilos propios de una página
   van al final, agrupados bajo un comentario con el nombre de la página.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root{
  --bg:#F6F7F9; --panel:#FFFFFF; --panel-2:#EEF0F4; --line:#E3E6EC; --line-2:#D3D8E1;
  --text:#101319; --muted:#5A6472; --faint:#939BA9;
  --ok:#12925B; --ok-bg:#E1F3EA; --warn:#9A6C08; --warn-bg:#F8EED6; --crit:#C0463F; --crit-bg:#FADFDD;
  --acc:#1E6FE0; --acc-2:#2E9BFF; --acc-ink:#FFFFFF; --acc-soft:rgba(46,155,255,.10);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --side-w:236px;
  --head-h:64px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0B0D11;--panel:#14171D;--panel-2:#1B1F27;--line:#242932;--line-2:#343B47;
    --text:#EAECF1;--muted:#8C94A3;--faint:#59606D;
    --ok:#43C88B;--ok-bg:#122419;--warn:#E6B455;--warn-bg:#2A2210;--crit:#EC6A62;--crit-bg:#2C1614;
    --acc-ink:#08111E;--acc-soft:rgba(46,155,255,.14)}
}
:root[data-theme="light"]{--bg:#F6F7F9;--panel:#FFFFFF;--panel-2:#EEF0F4;--line:#E3E6EC;--line-2:#D3D8E1;
  --text:#101319;--muted:#5A6472;--faint:#939BA9;
  --ok:#12925B;--ok-bg:#E1F3EA;--warn:#9A6C08;--warn-bg:#F8EED6;--crit:#C0463F;--crit-bg:#FADFDD;
  --acc-ink:#FFFFFF;--acc-soft:rgba(46,155,255,.10)}
:root[data-theme="dark"]{--bg:#0B0D11;--panel:#14171D;--panel-2:#1B1F27;--line:#242932;--line-2:#343B47;
  --text:#EAECF1;--muted:#8C94A3;--faint:#59606D;
  --ok:#43C88B;--ok-bg:#122419;--warn:#E6B455;--warn-bg:#2A2210;--crit:#EC6A62;--crit-bg:#2C1614;
  --acc-ink:#08111E;--acc-soft:rgba(46,155,255,.14)}
:root[data-accent="blue"]{--acc:#1E6FE0;--acc-2:#2E9BFF}
:root[data-accent="green"]{--acc:#0F9E5A;--acc-2:#25D07A}
:root[data-accent="orange"]{--acc:#DE6B1E;--acc-2:#FF8A3D}
:root[data-theme="dark"][data-accent="blue"]{--acc:#4C8DFF;--acc-2:#6BA5FF}
:root[data-theme="dark"][data-accent="green"]{--acc:#33D183;--acc-2:#5CE0A0}
:root[data-theme="dark"][data-accent="orange"]{--acc:#FF9245;--acc-2:#FFAE73}

/* --- base ----------------------------------------------------------------- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px)}
body{background:var(--bg);color:var(--text);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.008em}
/* El idioma que no toca se oculta SIEMPRE. Va con !important a propósito: sin él,
   cualquier regla de página que estilice `span` (p. ej. `.bloque .x span{display:block}`)
   gana por especificidad y saca los dos idiomas a la vez. Ha pasado dos veces. */
[data-lang="es"] .en{display:none!important}
[data-lang="en"] .es{display:none!important}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* --- cabecera ------------------------------------------------------------- */
header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;padding:13px 24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:16px;text-decoration:none;white-space:nowrap}
/* Marca: el isotipo de TrainAR (el infinito) suelto y el nombre en tipografía.
   El lockup oficial es vertical y no cabe en una barra, así que se usa el
   isotipo a color, que se sostiene igual en tema claro y en oscuro. */
.mark{height:26px;width:auto;display:block;flex:none}
.wordmark{letter-spacing:-.012em}
.brand{transition:opacity .15s}
.brand:hover{opacity:.72}
.tabs{display:flex;gap:2px;margin-left:6px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;padding:7px 12px;border-radius:8px;white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text);background:var(--panel-2)}
.ctrls{margin-left:auto;display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;padding:3px;gap:2px;background:var(--panel)}
.seg button{border:none;background:none;color:var(--muted);font:700 12.5px/1 var(--mono);padding:7px 10px;border-radius:7px}
.seg button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc)}
.ibtn{width:37px;height:37px;border:1px solid var(--line-2);background:var(--panel);border-radius:10px;color:var(--text);font-size:15px;display:grid;place-items:center;flex:none}
.sws{display:flex;gap:6px;align-items:center;padding-left:8px;border-left:1px solid var(--line)}
.sw{width:19px;height:19px;border-radius:50%;border:0;box-shadow:0 0 0 1px var(--line-2);padding:0}
.sw[data-c="blue"]{background:#2E9BFF}.sw[data-c="green"]{background:#25D07A}.sw[data-c="orange"]{background:#FF8A3D}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--acc-2);transform:scale(1.14)}
#burger{margin-right:2px}

/* segunda barra: los miniproyectos de la sección actual */
.subwrap{border-top:1px solid var(--line);background:var(--panel-2)}
.subtabs{display:flex;gap:3px;padding:8px 24px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.subtabs::-webkit-scrollbar{display:none}
.subtabs a{color:var(--muted);text-decoration:none;font:600 13.5px/1 var(--sans);padding:7px 11px;border-radius:7px;white-space:nowrap;border:1px solid transparent}
.subtabs a:hover{color:var(--text);background:var(--panel)}
.subtabs a.on{color:var(--acc);background:var(--panel);border-color:var(--line-2)}
@media(max-width:560px){.subtabs{padding:8px 16px}}

/* --- armazón: barra lateral + contenido ----------------------------------- */
.shell{display:flex;align-items:flex-start}

.side{
  flex:none;width:var(--side-w);
  position:sticky;top:var(--head-h);align-self:flex-start;
  height:calc(100vh - var(--head-h));overflow-y:auto;
  border-right:1px solid var(--line);
  padding:22px 14px 30px;
  display:flex;flex-direction:column;gap:24px;
}
.side-blk{display:flex;flex-direction:column;gap:5px}
.side-lab{font:10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:0 10px;margin-bottom:5px}
.side a,.side .side-item{
  display:flex;align-items:center;gap:9px;
  color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;
  padding:8px 10px;border-radius:9px;line-height:1.3;
}
.side a:hover{color:var(--text);background:var(--panel-2)}
.side a.on{color:var(--acc);background:var(--acc-soft)}
.side a .ico{width:16px;text-align:center;font-size:13px;opacity:.8;flex:none}
.side .toc a{font-size:14px;font-weight:550;border-left:2px solid var(--line);border-radius:0 8px 8px 0;padding-left:12px}
.side .toc a.on{border-left-color:var(--acc)}
.side .grow{flex:1}
/* hueco a definir: caja de reserva del lateral */
.side-slot{
  border:1px dashed var(--line-2);border-radius:11px;background:var(--panel-2);
  padding:12px 13px;color:var(--faint);font-size:13px;line-height:1.45;
}
.side-slot b{display:block;color:var(--muted);font:10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.side-foot{font:10.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--faint);padding:0 10px}

.content{flex:1 1 auto;min-width:0}
.wrap{max-width:1560px;margin:0 auto;padding:0 30px}

/* lateral plegado (escritorio) */
:root[data-side="off"] .side{display:none}

/* lateral como cajón (móvil / pantallas estrechas) */
.side-backdrop{display:none;position:fixed;inset:0;background:rgba(8,10,14,.5);z-index:35}
@media(max-width:1000px){
  .side{
    position:fixed;top:var(--head-h);left:0;z-index:36;
    background:var(--bg);width:280px;
    transform:translateX(-101%);transition:transform .2s ease;
  }
  :root[data-side="on"] .side{transform:none;box-shadow:0 18px 40px rgba(8,10,14,.28)}
  :root[data-side="off"] .side{display:flex}
  :root[data-side="on"] .side-backdrop{display:block}
  .wrap{padding:0 22px}
  .tabs{display:none} /* en estrecho la navegación es el cajón lateral */
}
@media(max-width:560px){
  .sws{display:none}
  .bar{gap:10px;padding:11px 16px}
}

/* --- piezas comunes ------------------------------------------------------- */
/* El main lleva también la clase .wrap, que fija padding lateral. Como .wrap gana
   en especificidad a main, el aire de arriba hay que ponerlo aquí o no se aplica:
   sin esto el breadcrumb queda pegado a la barra de pestañas. */
main{padding:36px 0 40px}
main.wrap{padding-top:34px;padding-bottom:44px}
@media(max-width:700px){main.wrap{padding-top:24px}}
/* Cabecera de página: es un documento de trabajo, no una portada. El título
   ocupa una línea, el contexto va en letra pequeña y los datos suben arriba. */
.hero{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.kick{font:11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:9px}
h1{font-size:26px;font-weight:780;letter-spacing:-.02em;line-height:1.25;max-width:none}
h1 br{display:none}
h1 .dim{color:var(--faint)}
h1 br+.dim::before{content:" "}
.sub{font-size:15px;line-height:1.55;color:var(--muted);max-width:88ch;margin:9px 0 0}
@media(max-width:700px){h1{font-size:22px}}

.sh{display:flex;align-items:baseline;gap:14px;margin:0 0 8px}
.sh h2{font-size:16px;font-weight:750;letter-spacing:.01em}
.sh .rule{flex:1;height:1px;background:var(--line)}
.sh .t{font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.sh .t.pub{color:var(--acc)}
.sh-note{color:var(--muted);font-size:15px;margin:0 0 18px}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px;padding-bottom:24px;color:var(--faint);font:12px/1.6 var(--mono);letter-spacing:.05em}

/* página en blanco, todavía sin contenido */
.stub{border:1px dashed var(--line-2);border-radius:16px;background:var(--panel);padding:30px 30px 34px;margin-top:8px}
.stub .clab{margin-bottom:14px}
.stub h3{font-size:22px;font-weight:780;letter-spacing:-.02em;margin-bottom:10px}
.stub p{color:var(--muted);font-size:17px;max-width:60ch}
.stub ul{margin:16px 0 0;padding-left:20px;color:var(--muted);font-size:16px;line-height:1.7}

/* etiqueta de estado (confidencial, borrador, etc.) */
.clab{display:inline-flex;align-items:center;gap:7px;font:11px/1 var(--mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--crit);background:var(--crit-bg);padding:6px 10px;border-radius:7px}
.clab::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.clab.draft{color:var(--warn);background:var(--warn-bg)}
.clab.pub{color:var(--ok);background:var(--ok-bg)}

/* ==========================================================================
   Página: Producto
   ========================================================================== */
.flow{display:flex;gap:14px;align-items:stretch}
.flow .arrow{flex:none;display:flex;align-items:center;color:var(--acc-2);font-size:30px;font-weight:700}
.phase{flex:1 1 0;min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.phase img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--panel-2)}
.phase .body{padding:18px 19px 19px;display:flex;flex-direction:column;gap:10px}
.phase .head{display:flex;align-items:center;gap:12px}
.pnum{width:32px;height:32px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font:800 16px/1 var(--sans);display:grid;place-items:center;flex:none}
.phase h3{font-size:23px;font-weight:780;letter-spacing:-.02em}
.phase .ln{font-size:17px;color:var(--muted);line-height:1.45}
details.acc{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);overflow:hidden;margin-top:2px}
details.acc summary{list-style:none;cursor:pointer;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:650;font-size:14.5px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary .cv{color:var(--faint);transition:transform .18s;font-size:12px}
details.acc[open] summary .cv{transform:rotate(90deg);color:var(--acc)}
details.acc .db{padding:0 13px 13px;color:var(--muted);font-size:15px;line-height:1.5}
@media(max-width:880px){
  .flow{flex-direction:column}
  .phase{flex:0 0 auto} /* en columna, flex-basis:0 dejaría las tarjetas sin alto */
  .flow .arrow{transform:rotate(90deg);align-self:center}
}

.secret{border:1px solid var(--line);border-left:3px solid var(--crit);border-radius:16px;background:var(--panel);padding:24px 26px;margin-top:14px}
.secret h3{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:14px 0 0}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;margin-top:18px}
@media(max-width:820px){.sgrid{grid-template-columns:1fr;gap:18px}}
.sgrid img{width:100%;border-radius:12px;border:1px solid var(--line);display:block;background:var(--panel-2)}
.sgrid p{font-size:18px;line-height:1.5}
.notes{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.note{display:flex;gap:12px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.note b{color:var(--text);font-weight:700}
.note .d{width:8px;height:8px;border-radius:50%;margin-top:8px;flex:none}
.note .d.crit{background:var(--crit)} .note .d.ok{background:var(--ok)} .note .d.warn{background:var(--warn)} .note .d.acc{background:var(--acc)}

.biz{border-top:1px solid var(--line);margin-top:46px;padding:38px 0 60px}
.biz .lab{font:13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:24px}
.bizgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:880px){.bizgrid{grid-template-columns:1fr;gap:26px}}
.bcol h3{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:12px}
.bcol p{font-size:20px;line-height:1.4;font-weight:600;letter-spacing:-.015em}
.stats{display:flex;flex-direction:column;gap:15px;margin-top:18px}
.stat{display:flex;align-items:baseline;gap:13px}
.stat .n{flex:none;font-size:31px;font-weight:820;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.stat.good .n{color:var(--acc)}
.stat .t{font-size:16px;color:var(--muted);line-height:1.3}

/* ==========================================================================
   Página: Marketing
   ========================================================================== */
/* aviso de método, arriba del todo */
.method{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:14px;background:var(--panel);padding:20px 22px;margin:26px 0 34px}
details.method{padding:0}
details.method>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 20px;font-size:14px;font-weight:700}
details.method>summary::-webkit-details-marker{display:none}
details.method>summary .cv{margin-left:auto;color:var(--faint);font-size:12px;transition:transform .18s}
details.method[open]>summary .cv{transform:rotate(90deg)}
details.method[open]{padding-bottom:18px}
details.method>p:first-of-type{margin-top:4px}
details.method>p{padding:0 20px}
.method h2{font-size:15px;font-weight:750;margin-bottom:10px}
.method p{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:78ch}
.method p+p{margin-top:9px}
.method b{color:var(--text)}

/* rejilla de motores/frentes */
.motores{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.motor{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 17px;display:flex;flex-direction:column;gap:9px}
.motor .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.motor h3{font-size:17.5px;font-weight:760;letter-spacing:-.015em}
.motor .txt{font-size:14.5px;line-height:1.5;color:var(--muted)}
.motor .meta{font:11px/1.5 var(--mono);letter-spacing:.04em;color:var(--faint);border-top:1px solid var(--line);padding-top:8px;margin-top:auto}

/* píldora de estado */
.pill{font:10px/1 var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px;white-space:nowrap;flex:none}
.pill.live{color:var(--ok);background:var(--ok-bg)}
.pill.stop{color:var(--warn);background:var(--warn-bg)}
.pill.plan{color:var(--faint);background:var(--panel-2)}
.pill.bad{color:var(--crit);background:var(--crit-bg)}

/* tabla densa */
.tw{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table.t{width:100%;border-collapse:collapse;font-size:14.5px;min-width:600px}
table.t th{text-align:left;font:10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel-2)}
table.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;color:var(--muted)}
table.t tr:last-child td{border-bottom:0}
table.t td b,table.t td strong{color:var(--text);font-weight:680}
table.t td.n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);font-weight:700}
table.t td.src{font:11px/1.4 var(--mono);color:var(--faint)}

/* dato con fuente */
.datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:13px;margin-top:16px}
.dato{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:15px 16px}
.dato .n{font-size:27px;font-weight:820;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.dato .l{font-size:14.5px;line-height:1.4;margin-top:5px}
.dato .s{font:10.5px/1.5 var(--mono);color:var(--faint);margin-top:9px;border-top:1px solid var(--line);padding-top:7px}
.dato.warn .n{color:var(--warn)} .dato.ok .n{color:var(--acc)} .dato.crit .n{color:var(--crit)}

/* hueco: lo que no se ha encontrado */
.gaps{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.gap{display:flex;gap:13px;border:1px dashed var(--line-2);border-radius:11px;background:var(--panel-2);padding:13px 15px;font-size:15px;line-height:1.5;color:var(--muted)}
.gap .q{font:700 13px/1.35 var(--mono);color:var(--crit);flex:none;padding-top:2px}
.gap b{color:var(--text);font-weight:700}

/* contradicción entre documentos */
.contras{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.contra{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:12px;background:var(--panel);padding:15px 17px}
.contra h4{font-size:16px;font-weight:740;margin-bottom:10px}
.contra .vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.contra .vs{grid-template-columns:1fr}}
.contra .v{background:var(--panel-2);border-radius:9px;padding:11px 13px;font-size:14px;line-height:1.5;color:var(--muted)}
.contra .v .who{font:10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px}
.contra .out{font-size:14.5px;line-height:1.5;margin-top:11px;color:var(--text)}
.contra .out b{font-weight:730}

/* lista de preguntas al equipo */
.qs{counter-reset:q;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.qi{display:flex;gap:14px;border-bottom:1px solid var(--line);padding-bottom:12px}
.qi:last-child{border-bottom:0;padding-bottom:0}
.qi .num{counter-increment:q;font:700 12px/1.5 var(--mono);color:var(--acc);flex:none;width:22px}
.qi .num::before{content:counter(q,decimal-leading-zero)}
.qi .body{font-size:15.5px;line-height:1.55}
.qi .body b{font-weight:700}
.qi .who{font:10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:5px;display:block}

/* lista simple con viñeta de color */
.bl{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.bl .b{display:flex;gap:12px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.bl .b b{color:var(--text);font-weight:700}
.bl .b .d{width:8px;height:8px;border-radius:50%;margin-top:8px;flex:none;background:var(--faint)}
.bl .b .d.ok{background:var(--ok)} .bl .b .d.warn{background:var(--warn)} .bl .b .d.crit{background:var(--crit)} .bl .b .d.acc{background:var(--acc)}

/* ==========================================================================
   Marketing: rejilla de miniproyectos (en el overview)
   ========================================================================== */
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:13px;margin-top:16px}
a.mini{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 17px;
  transition:border-color .15s,transform .15s;
}
a.mini:hover{border-color:var(--acc-2);transform:translateY(-2px)}
a.mini .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
a.mini h3{font-size:17px;font-weight:760;letter-spacing:-.015em;color:var(--text)}
a.mini .txt{font-size:14px;line-height:1.5;color:var(--muted)}
a.mini .go{font:10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-top:auto;padding-top:8px}

/* ficha de cabecera de un miniproyecto */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:22px}
.ficha .c{background:var(--panel);padding:13px 15px}
.ficha .k{font:10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.ficha .v{font-size:15px;font-weight:670;line-height:1.35}
.ficha .v.sm{font-size:13.5px;font-weight:600;color:var(--muted)}

/* enlaces externos (URLs que se pueden visitar) */
.urls{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.url{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:11px 14px;flex-wrap:wrap}
.url a{font:13.5px/1.4 var(--mono);color:var(--acc);text-decoration:none;font-weight:600;word-break:break-all}
.url a:hover{text-decoration:underline}
.url .tag{font:10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:var(--panel-2);padding:5px 8px;border-radius:6px;flex:none}
.url .note{font-size:13.5px;color:var(--muted);margin-left:auto}

/* acordeón ancho, para el texto largo */
details.long{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;margin-top:12px}
details.long summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:680;font-size:15.5px}
details.long summary::-webkit-details-marker{display:none}
details.long summary .cv{color:var(--faint);transition:transform .18s;font-size:12px;flex:none}
details.long[open] summary{border-bottom:1px solid var(--line)}
details.long[open] summary .cv{transform:rotate(90deg);color:var(--acc)}
details.long .db{padding:15px 16px 17px;color:var(--muted);font-size:15px;line-height:1.6}
details.long .db p+p{margin-top:10px}
details.long .db b{color:var(--text)}
details.long .db ul{margin:10px 0 0;padding-left:20px;line-height:1.65}
details.long .db li+li{margin-top:6px}
details.long .db .tw{margin-top:12px}
details.long summary .cnt{font:10.5px/1 var(--mono);color:var(--faint);letter-spacing:.06em;margin-left:auto;padding-right:10px}

/* línea de tiempo */
.tl{display:flex;flex-direction:column;margin-top:16px;border-left:2px solid var(--line);padding-left:0}
.tl .ev{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:0 0 18px 18px;position:relative}
.tl .ev::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--line-2);border:2px solid var(--bg)}
.tl .ev.hi::before{background:var(--acc)}
.tl .ev.bad::before{background:var(--crit)}
.tl .d{font:11.5px/1.5 var(--mono);color:var(--faint);letter-spacing:.03em}
.tl .c{font-size:15px;line-height:1.55;color:var(--muted)}
.tl .c b{color:var(--text);font-weight:700}
@media(max-width:620px){.tl .ev{grid-template-columns:1fr;gap:3px}}

/* ==========================================================================
   Página: Decisiones (agenda de trabajo con el equipo)
   ========================================================================== */
/* barra de filtros y marcador */
.filtros{position:sticky;top:var(--head-h);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
  padding:12px 0 13px;margin:0 0 8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fgrp{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;padding:3px;gap:2px;background:var(--panel);flex-wrap:wrap}
.fgrp button{border:none;background:none;color:var(--muted);font:650 12.5px/1 var(--sans);padding:7px 11px;border-radius:7px;white-space:nowrap}
.fgrp button:hover{color:var(--text)}
.fgrp button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc)}
.marcador{margin-left:auto;display:flex;gap:14px;align-items:center;font:11px/1 var(--mono);letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.marcador b{font-size:17px;color:var(--text);font-family:var(--sans);letter-spacing:-.02em}
.marcador .rst{border:1px solid var(--line-2);background:var(--panel);color:var(--muted);border-radius:8px;padding:6px 10px;font:600 11.5px/1 var(--sans)}

/* ítem */
.items{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.item{border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.item>summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;padding:13px 16px}
.item>summary::-webkit-details-marker{display:none}
.item>summary:hover{background:var(--panel-2);border-radius:13px}
.item .cv{margin-left:auto;flex:none;color:var(--faint);font-size:11px;transition:transform .18s}
.item[open]>summary .cv{transform:rotate(90deg)}
.item[open]>summary:hover{border-radius:13px 13px 0 0}
.item>.cuerpo{padding:2px 16px 15px 54px;border-top:1px solid var(--line);margin-top:2px;padding-top:13px}
@media(max-width:640px){.item>.cuerpo{padding-left:16px}}
.item.oculto{display:none}
.item[data-estado="ok"]{border-color:var(--ok);background:var(--ok-bg)}
.item[data-estado="no"]{opacity:.55}
.item .marca{flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--bg);
  color:var(--faint);font:700 13px/1 var(--sans);display:grid;place-items:center;margin-top:2px;cursor:pointer;padding:0}
.item[data-estado="ok"] .marca{background:var(--ok);border-color:var(--ok);color:#fff}
.item[data-estado="no"] .marca{background:var(--panel-2);color:var(--crit)}

.item .cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.item .ref{font:11px/1 var(--mono);color:var(--faint);letter-spacing:.06em;flex:none}
.item h3{font-size:16.5px;font-weight:720;letter-spacing:-.015em;line-height:1.35;flex:1;min-width:0}
.item[data-estado="ok"] h3{text-decoration:line-through;text-decoration-color:var(--ok);text-decoration-thickness:1.5px}
.item .por{font-size:14.5px;line-height:1.55;color:var(--muted)}
.item .por b{color:var(--text);font-weight:680}
.item .pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.chip{font:10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.chip.quien{background:var(--acc-soft);color:var(--acc);font-weight:700}
.chip.plazo{background:var(--crit-bg);color:var(--crit);font-weight:700}
.chip.hecho{background:var(--ok-bg);color:var(--ok);font-weight:700}
.item[data-resp="1"] .ref::after{content:"\2713";color:var(--ok);margin-left:5px;font-weight:800}
.item .resp{border-left:3px solid var(--ok);background:var(--ok-bg);border-radius:0 9px 9px 0;padding:11px 14px;margin-bottom:11px;font-size:14.5px;line-height:1.55;color:var(--text)}
.item .resp .k{font:10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ok);font-weight:700;display:block;margin-bottom:6px}
.chip a{color:inherit;text-decoration:none}
.chip a:hover{text-decoration:underline}
@media(max-width:560px){.item{padding:13px 14px;gap:11px}.filtros{position:static}}

/* cabecera de bloque */
.bloque{margin-top:40px}
.bloque .cabe{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.bloque .num{font:800 30px/1 var(--sans);letter-spacing:-.03em;color:var(--acc);flex:none;min-width:38px}
.bloque .tit h2{font-size:22px;font-weight:790;letter-spacing:-.02em;line-height:1.2}
.bloque .tit p{font-size:15.5px;color:var(--muted);line-height:1.5;margin-top:5px;max-width:70ch}

/* ==========================================================================
   Página: Plan (acciones recomendadas)
   ========================================================================== */
/* veredicto de cabecera */
.veredicto{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:16px;background:var(--panel);padding:26px 28px;margin-top:26px}
.veredicto .lab{font:11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.veredicto h2{font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.25;max-width:34ch}
.veredicto p{font-size:16.5px;line-height:1.6;color:var(--muted);margin-top:13px;max-width:76ch}
.veredicto p b{color:var(--text)}
.veredicto .dos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
@media(max-width:760px){.veredicto .dos{grid-template-columns:1fr}}
.veredicto .caja{background:var(--panel-2);border-radius:11px;padding:15px 17px}
.veredicto .caja .k{font:10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.veredicto .caja.si .k{color:var(--ok)} .veredicto .caja.no .k{color:var(--crit)}
.veredicto .caja p{margin-top:0;font-size:15px}

/* una acción */
.accion{border-top:1px solid var(--line);padding:34px 0 6px;display:grid;grid-template-columns:64px 1fr;gap:20px}
.accion:first-of-type{border-top:0}
.accion .n{font:800 42px/0.9 var(--sans);letter-spacing:-.04em;color:var(--line-2)}
.accion[data-p="ya"] .n{color:var(--acc)}
.accion .co{min-width:0}
.accion h3{font-size:clamp(22px,3vw,31px);font-weight:820;letter-spacing:-.03em;line-height:1.15;text-wrap:balance;max-width:24ch}
.accion .resumen{font-size:17.5px;line-height:1.55;color:var(--muted);margin-top:11px;max-width:70ch}
.accion .resumen b{color:var(--text);font-weight:680}
.accion .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.tg{font:10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:6px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.tg.ya{background:var(--crit-bg);color:var(--crit);font-weight:700}
.tg.skill{background:var(--acc-soft);color:var(--acc);font-weight:700}
.tg.ok{background:var(--ok-bg);color:var(--ok);font-weight:700}
@media(max-width:640px){
  .accion{grid-template-columns:1fr;gap:8px;padding-top:28px}
  .accion .n{font-size:30px}
}

/* etiqueta de estatus de evidencia, como piden las skills */
.ev{display:inline-block;font:10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:var(--panel-2);color:var(--faint);margin-right:6px;vertical-align:middle}
.ev.hecho{background:var(--ok-bg);color:var(--ok)}
.ev.consenso{background:var(--acc-soft);color:var(--acc)}
.ev.hip{background:var(--warn-bg);color:var(--warn)}
.ev.nose{background:var(--crit-bg);color:var(--crit)}

/* ==========================================================================
   Página: Propuesta (el plan que se presenta al equipo)
   Cada tarea es un botón compacto que se abre. Limpio y con poco texto.
   ========================================================================== */
.pr-intro{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:16px;background:var(--panel);padding:24px 26px;margin-top:24px}
.pr-intro h2{font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.025em;line-height:1.3;max-width:38ch}
.pr-intro p{font-size:16.5px;line-height:1.6;color:var(--muted);margin-top:12px;max-width:78ch}
.pr-intro p b{color:var(--text)}

/* la lista de tareas */
.tareas{display:flex;flex-direction:column;gap:9px;margin-top:18px}
details.tarea{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .15s}
details.tarea:hover{border-color:var(--line-2)}
details.tarea[open]{border-color:var(--acc-2)}
details.tarea summary{
  list-style:none;cursor:pointer;padding:17px 19px;
  display:flex;align-items:center;gap:16px;
}
details.tarea summary::-webkit-details-marker{display:none}
details.tarea .num{
  flex:none;width:34px;height:34px;border-radius:10px;background:var(--panel-2);color:var(--faint);
  font:800 15px/1 var(--sans);display:grid;place-items:center;letter-spacing:-.02em;
}
details.tarea[open] .num{background:var(--acc);color:var(--acc-ink)}
details.tarea .tt{flex:1;min-width:0;font-size:18.5px;font-weight:740;letter-spacing:-.02em;line-height:1.3}
details.tarea .plazo{flex:none;font:10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--panel-2);padding:7px 10px;border-radius:7px;white-space:nowrap}
details.tarea .plazo.ya{background:var(--crit-bg);color:var(--crit);font-weight:700}
details.tarea .cv{flex:none;color:var(--faint);font-size:12px;transition:transform .18s}
details.tarea[open] .cv{transform:rotate(90deg);color:var(--acc)}
details.tarea .cuerpo{padding:4px 19px 20px;border-top:1px solid var(--line);margin-top:2px;padding-top:18px}
@media(max-width:640px){
  details.tarea summary{flex-wrap:wrap;gap:11px;padding:15px 16px}
  details.tarea .tt{font-size:17px;flex-basis:calc(100% - 62px)}
  details.tarea .plazo{order:3}
  details.tarea .cuerpo{padding:16px 16px 18px}
}

/* los tres bloques de dentro */
.bq{margin-top:16px}
.bq:first-child{margin-top:0}
.bq .k{font:10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px;font-weight:700}
.bq.dolor .k{color:var(--crit)}
.bq.hacer .k{color:var(--acc)}
.bq.evid .k{color:var(--faint)}
.bq p{font-size:16px;line-height:1.6;color:var(--muted)}
.bq p b{color:var(--text);font-weight:680}
.bq.dolor p{font-size:16.5px;color:var(--text);font-weight:520;line-height:1.55}

/* pasos con plazo */
.pasos{display:flex;flex-direction:column;gap:9px}
.paso{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:start;font-size:15.5px;line-height:1.5}
.paso .w{font:10.5px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--acc);padding-top:2px}
.paso .x{color:var(--muted)}
.paso .x b{color:var(--text);font-weight:670}
@media(max-width:560px){.paso{grid-template-columns:1fr;gap:2px}}

/* cifras que justifican */
.cifras{display:flex;flex-wrap:wrap;gap:8px}
.cifra{border:1px solid var(--line);border-radius:9px;background:var(--panel-2);padding:9px 12px;font-size:13.5px;line-height:1.35;color:var(--muted);max-width:100%}
.cifra b{display:block;color:var(--text);font-size:16px;font-weight:780;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* argumento de apertura de la Propuesta: para exponer, no para leer */
.arg-h{font-size:clamp(27px,4.4vw,46px);font-weight:840;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;max-width:20ch;margin-top:30px}
.arg-h .dim{color:var(--faint)}
.arg3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
@media(max-width:820px){.arg3{grid-template-columns:1fr}}
.arg{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:20px 21px}
.arg .k{font:10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin-bottom:11px}
.arg .f{font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.02em}
.arg .s{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:9px}
.arg.mal{border-left:3px solid var(--crit)}
.arg.mal .k{color:var(--crit)}
.arg-cierre{border-left:3px solid var(--acc);background:var(--panel-2);border-radius:0 14px 14px 0;padding:19px 22px;margin-top:16px}
.arg-cierre p{font-size:19.5px;line-height:1.45;font-weight:650;letter-spacing:-.015em}
.arg-cierre .cita{font-size:14px;line-height:1.55;color:var(--muted);margin-top:11px;font-style:italic}

/* Equipo: inicial en círculo y papel en letra pequeña */
table.t.equipo td{vertical-align:middle;padding-top:10px;padding-bottom:10px}
table.t.equipo td.ini{width:1%;padding-right:0}
table.t.equipo td.ini::before{content:attr(data-i)}
table.t.equipo td.ini{font:700 12px/26px var(--mono);text-align:center;color:var(--acc)}
table.t.equipo td.rol{font:11.5px/1.4 var(--mono);color:var(--faint);text-transform:uppercase;white-space:nowrap}

/* Objetivos: cuadro de mando. Meta y Hoy enfrentadas, en cifras alineadas. */
table.t.cuadro td{vertical-align:middle;padding-top:9px;padding-bottom:9px}
table.t.cuadro td.n{width:1%;color:var(--faint);font-weight:600}
table.t.cuadro td.meta,table.t.cuadro td.hoy{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15.5px}
table.t.cuadro td.meta{color:var(--text);font-weight:680}
table.t.cuadro td.hoy{border-left:1px solid var(--line)}
table.t.cuadro td.hoy b{font-size:17px}
table.t.cuadro td.cu{font:11.5px/1.4 var(--mono);color:var(--faint);white-space:nowrap;text-transform:uppercase}

/* Objetivos: chip verde para lo que ya está cumplido */
details.tarea .plazo.ok{background:var(--ok-bg);color:var(--ok);font-weight:700}

/* CRM: la frase literal que hay que pedir, para copiar y pegar */
.hero h1 .dim{color:var(--faint)}
.bq p.ped{font-size:17px;line-height:1.5;color:var(--text);font-weight:600;
  border-left:3px solid var(--acc);background:var(--panel-2);border-radius:0 10px 10px 0;
  padding:13px 16px}
.bq p.ped code{font-size:.92em}

/* lista de evidencias del cierre de la Propuesta */
.ev-lista{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.ev-lista .e{font-size:16px;line-height:1.45;color:var(--muted);padding-left:17px;position:relative}
.ev-lista .e::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--crit)}
.ev-lista .e b{color:var(--text);font-weight:700}

/* ==========================================================================
   Página: Decisiones · vista de tablero (kanban)
   ========================================================================== */
/* conmutador de vista, en la barra de filtros */
.vsw{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;padding:3px;gap:2px;background:var(--panel)}
.vsw button{border:none;background:none;color:var(--muted);font:650 12.5px/1 var(--sans);
  padding:7px 11px;border-radius:7px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.vsw button:hover{color:var(--text)}
.vsw button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc)}
.vsw .ic{font-size:12px;line-height:1}

/* qué se ve en cada vista */
.tablero,.tablero-nota{display:none}
body[data-vista="tablero"] .tablero{display:grid}
body[data-vista="tablero"] .tablero-nota{display:block}
body[data-vista="tablero"] .bloque{display:none!important}

/* columnas */
.tablero{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px;align-items:start}
.tablero .col{border:1px solid var(--line);border-radius:14px;background:var(--panel-2);padding:12px;min-width:0}
.tablero .col.sobre{border-color:var(--acc);background:var(--acc-soft)}
.tablero .ch{display:flex;align-items:center;gap:8px;padding:2px 4px 11px}
.tablero .ch .t{font:11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.tablero .ch .n{margin-left:auto;font:700 12px/1 var(--sans);color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 9px}
.tablero .col[data-col="ok"] .ch .t{color:var(--ok)}
.tablero .col[data-col="no"] .ch .t{color:var(--crit)}
.tablero .zona{display:flex;flex-direction:column;gap:10px;min-height:120px}
.tablero .vacio{display:none;font-size:13px;line-height:1.45;color:var(--faint);padding:14px 6px 6px}
.tablero .zona:empty ~ .vacio{display:block}

/* fichas */
.tcard{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:11px 12px 12px;cursor:pointer}
.tcard:hover{border-color:var(--line-2)}
.tcard.arrastrando{opacity:.45}
.tcard .tc-top{display:flex;align-items:center;gap:8px;min-height:22px}
.tcard .ref{font:11px/1 var(--mono);color:var(--faint);letter-spacing:.06em}
.tcard h4{font-size:14.5px;font-weight:700;letter-spacing:-.012em;line-height:1.35;margin-top:6px;overflow-wrap:anywhere}
.tcard .tc-pie{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tcard .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tcard .tc-mv{display:none;margin-left:auto;gap:4px}
.tcard .mv{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg);
  color:var(--muted);font:700 15px/1 var(--sans);display:grid;place-items:center;padding:0;position:relative}
.tcard .mv[disabled]{opacity:.3;cursor:default}
.tablero .col[data-col="ok"] .tcard{border-color:var(--ok);background:var(--ok-bg)}
.tablero .col[data-col="no"] .tcard{opacity:.72}

.tablero-nota{font-size:13.5px;line-height:1.5;color:var(--faint);margin-top:16px;max-width:78ch}

/* pantallas estrechas: sin arrastrar, columnas apiladas y flechas en la ficha */
@media(max-width:700px){
  .tablero{grid-template-columns:minmax(0,1fr)}
  .tcard .tc-mv{display:flex}
}

/* Decisiones · tablero: el porqué se lee dentro de la propia ficha */
.tc-mas{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.tc-mas>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  font:10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--acc)}
.tc-mas>summary::-webkit-details-marker{display:none}
.tc-mas>summary .cv{font-size:9px;color:var(--faint);transition:transform .18s}
.tc-mas[open]>summary .cv{transform:rotate(90deg)}
.tc-por{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:8px;
  max-height:230px;overflow-y:auto}
.tc-por b{color:var(--text);font-weight:670}
.tc-por code{font-size:.92em}

/* ==========================================================================
   Página: Planes (HQ nuevo)
   Jerarquía plan > subplan > tarea, toda plegable.
   ========================================================================== */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px}
.legend .lnote{color:var(--faint);font-size:13px;margin-left:4px}

.st{display:inline-flex;align-items:center;gap:6px;flex:none;
  font:10.5px/1 var(--mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 8px;border-radius:6px;border:1px solid transparent}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-draft{color:var(--muted);background:var(--panel-2);border-color:var(--line-2)}
.st-ok{color:var(--acc);background:var(--acc-soft);border-color:var(--acc-soft)}
.st-work{color:var(--warn);background:var(--warn-bg)}
.st-done{color:var(--ok);background:var(--ok-bg)}
.st-hole{color:var(--crit);background:var(--crit-bg)}

details.plan{border:1px solid var(--line);border-radius:14px;background:var(--panel);
  margin-bottom:12px;overflow:hidden}
details.plan[open]{border-color:var(--line-2);box-shadow:0 1px 0 var(--line)}
details.plan>summary,details.sub>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 18px}
details>summary::-webkit-details-marker{display:none}
details.plan>summary:hover,details.sub>summary:hover{background:var(--panel-2)}
.mark{flex:none;width:11px;height:11px;border-right:2px solid var(--faint);
  border-bottom:2px solid var(--faint);transform:rotate(-45deg);margin-left:2px;
  transition:transform .15s ease}
details[open]>summary .mark{transform:rotate(45deg)}
.pnum{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acc-2),var(--acc));color:var(--acc-ink);
  font:800 13px/1 var(--mono)}
.ptit{flex:1;min-width:0;font-size:17px;font-weight:750;letter-spacing:-.01em}
.pobj{display:block;font-size:14px;font-weight:500;color:var(--muted);margin-top:3px;letter-spacing:0}
.pcount,.scount{flex:none;color:var(--faint);font:11px/1 var(--mono);letter-spacing:.06em}
@media(max-width:700px){.pcount,.scount{display:none}}

.pbody{padding:0 18px 18px;border-top:1px solid var(--line)}
.pwhy{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.pwhy b{flex:none;width:150px;font:10.5px/1.6 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-weight:700}
.pwhy p{color:var(--muted);font-size:15px;line-height:1.6;max-width:80ch}
@media(max-width:700px){.pwhy{flex-direction:column;gap:5px}.pwhy b{width:auto}}

details.sub{border:1px solid var(--line);border-radius:11px;background:var(--panel-2);margin-top:12px}
details.sub>summary{padding:12px 14px}
.stit{flex:1;min-width:0;font-size:15px;font-weight:700}
.sline{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-top:2px}

ul.tasks{list-style:none;margin:0;padding:2px 14px 12px 14px}
li.task{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);margin-top:6px}
li.task.on{opacity:.55}
li.task.on .ttxt{text-decoration:line-through}
.tick{flex:none;width:17px;height:17px;margin-top:2px;border:1.5px solid var(--line-2);
  border-radius:5px;background:var(--panel);padding:0}
.tick[aria-pressed="true"]{background:var(--acc);border-color:var(--acc)}
.ttxt{flex:1;min-width:0;font-size:15px;line-height:1.5}
.tnota{display:block;font-size:13px;color:var(--faint);margin-top:2px}

/* --- lista de ítems (Cosas que sacar adelante) ----------------------------- */
.items{list-style:none;margin:0;padding:0}
.item{display:flex;align-items:center;gap:13px;
  border:1px solid var(--line);border-radius:13px;background:var(--panel);
  padding:17px 18px;margin-bottom:10px}
.inum{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acc-2),var(--acc));color:var(--acc-ink);
  font:800 13px/1 var(--mono)}
.itit{font-size:17px;font-weight:750;letter-spacing:-.01em}

/* --- ítem plegable --------------------------------------------------------- */
details.item{display:block;padding:0}
details.item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;padding:17px 18px}
details.item>summary::-webkit-details-marker{display:none}
details.item>summary:hover{background:var(--panel-2);border-radius:13px}
details.item[open]>summary:hover{border-radius:13px 13px 0 0}
.iva{margin-left:auto;flex:none;color:var(--faint);font-size:20px;line-height:1;transition:transform .18s}
details.item[open] .iva{transform:rotate(90deg)}
.ibody{padding:4px 18px 18px}

/* --- Pilotos: tabla de comprobación ---------------------------------------- */
table.t.checks td{vertical-align:middle}
table.t.checks th:nth-child(n+3),table.t.checks td.ck{text-align:center}
table.t.checks td.ck{width:1%;padding-left:10px;padding-right:10px}
table.t.checks td.ck .tick{margin:0 auto;display:block;width:19px;height:19px}
ul.leyenda{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
ul.leyenda li{font-size:13.5px;line-height:1.5;color:var(--faint)}
ul.leyenda b{color:var(--muted);font-weight:700;margin-right:6px}
.isolo{display:flex;align-items:center;gap:13px}
.ibody .sh h3{font-size:15px;font-weight:750;letter-spacing:.01em}
.ibody .sh{margin-top:16px}
table.t.checks td.f,table.t.checks th.f{white-space:nowrap;padding-left:10px;padding-right:10px}
table.t.checks td.f{font:12.5px/1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
table.t.checks td.ow{padding-left:10px;padding-right:10px}
table.t.checks td.ow input{width:110px;font:inherit;font-size:13.5px;color:var(--text);
  background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:5px 8px}
table.t.checks td.ow input:focus{outline:none;border-color:var(--acc)}
.quo{margin:0;padding:13px 16px;border-left:3px solid var(--acc);background:var(--panel-2);
  border-radius:0 10px 10px 0;font-size:15px;line-height:1.6;color:var(--text)}
.quo-es{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.quo-src{margin:7px 0 0;font:11.5px/1.5 var(--mono);color:var(--faint)}
li.task{flex-wrap:wrap}
ul.subtasks{list-style:none;flex-basis:100%;width:100%;margin:8px 0 0;padding:0 0 0 28px}
ul.subtasks li.task{background:var(--panel-2);margin-top:5px}

/* la tabla de comprobación se ajusta al ancho disponible: sin min-width fijo no
   sale una barra de scroll dentro del bloque al abrir el ítem */
table.t.checks{min-width:0}
/* apretar la tabla de comprobación para que quepa sin scroll interno */
table.t.checks th,table.t.checks td{padding:11px 9px}
table.t.checks td.ck{padding-left:6px;padding-right:6px}
table.t.checks td.ow input{width:88px}
table.t.checks th:first-child,table.t.checks td:first-child{padding-left:14px}


/* ---------------------------------------------------------------------------
   Guía · El mensaje (guia.html, 01-08-2026). Roadmap de ocho pasos. Cada paso
   se despliega en dos columnas: el texto a la izquierda y, cuando la hay, la
   tarjeta con la frase a la derecha. Lo que va entre paréntesis en el título
   NO va en negrita: es la aclaración, no el nombre del paso.
   --------------------------------------------------------------------------- */
.hero .lede{margin-top:9px;font-size:15px;line-height:1.6;color:var(--muted);max-width:74ch}

.itit .ipar{font-weight:450;color:var(--faint);letter-spacing:0}
.iaqui{flex:none;font:10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);font-weight:700;border:1px solid var(--acc);border-radius:999px;padding:5px 9px}
details.item[data-aqui="1"]>summary .inum{background:var(--acc);border-color:var(--acc);color:#fff}

/* dos columnas al desplegar: texto + tarjeta */
.ibody.two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.gcard{margin:4px 0 0}
.gcard img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);
  background:var(--panel)}
.gcard figcaption{margin-top:8px;font:11.5px/1.5 var(--mono);color:var(--faint)}
@media(max-width:900px){
  .ibody.two{grid-template-columns:1fr}
  .gcard{max-width:320px}
}

/* texto dentro de un paso */
.ibody p.gp{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted);max-width:78ch}
.ibody ul.gl{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ibody ul.gl li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.6;
  color:var(--muted);max-width:78ch}
.ibody ul.gl li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--acc);opacity:.55}
.ibody ul.gl b{color:var(--text);font-weight:700;margin-right:5px}
/* las tres salidas del cliente: lista numerada, el título de cada una resaltado
   en su propia línea, y debajo qué pasa con ella. Cierra la conclusión. */
.ibody ol.gopts{counter-reset:go;list-style:none;margin:13px 0 0;padding:0;max-width:78ch;
  display:flex;flex-direction:column;gap:14px}
.ibody ol.gopts li{counter-increment:go;position:relative;padding-left:34px}
.ibody ol.gopts li::before{content:counter(go);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel-2);color:var(--acc);font:700 11.5px/21px var(--mono);
  text-align:center}
.ibody ol.gopts b{display:block;margin:0 0 3px;color:var(--text);font-size:15px;
  font-weight:750;letter-spacing:.01em}
/* nunca estilar `span` aquí: [data-lang] oculta los idiomas con .es/.en y un
   selector más específico sobre span los volvería a mostrar los dos. */
.ibody ol.gopts .d{font-size:14.5px;line-height:1.6;color:var(--muted)}
.ibody p.gend{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);
  max-width:78ch;color:var(--text);font-size:16px;font-weight:700;line-height:1.5}

/* las dos hipótesis, una al lado de la otra y con los mismos campos en el mismo
   orden: es lo que permite compararlas. No estilar `span` aquí (ver arriba). */
.ghyp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:14px 0 0;
  align-items:start}
.ghyp .hyp{border:1px solid var(--line);border-radius:14px;background:var(--panel-2);
  padding:16px 17px 6px}
.ghyp .hyp>header{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.ghyp .hl{flex:none;width:24px;height:24px;border-radius:50%;background:var(--acc);
  color:#fff;font:700 12px/24px var(--mono);text-align:center}
.ghyp .ht{font-size:15px;font-weight:750;color:var(--text);letter-spacing:.01em}
.ghyp .hyp>img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line);background:var(--panel)}
.ghyp .hyp .quo{margin-top:14px}
/* el bloque de la cifra: lo primero que se lee de una hipótesis. Sin esto, una
   hipótesis es una frase bonita sin nada que la pruebe. */
.ghyp .hnum{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--panel);
  border:1px solid var(--acc)}
.ghyp .hnum .k{display:block;margin-bottom:6px;font:10.5px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--acc);font-weight:700}
.ghyp .hnum b{display:block;color:var(--text);font-size:15.5px;font-weight:750;
  line-height:1.45}
.ghyp .hnum .hok{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:13.5px;line-height:1.55;color:var(--muted)}
.ghyp .hfs{margin:14px 0 0;padding:0}
.ghyp .hf{padding:10px 0;border-top:1px solid var(--line)}
.ghyp .hf dt{margin:0 0 3px;font:10.5px/1.4 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:700}
.ghyp .hf dd{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
@media(max-width:1280px){.ghyp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.ghyp{grid-template-columns:1fr}}

/* cifras en fila: lo que se lee de un vistazo y no merece un párrafo */
.gstats{display:flex;flex-wrap:wrap;gap:10px;margin:13px 0 0}
.gstats .st{flex:1 1 150px;min-width:0;padding:12px 14px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel-2)}
.gstats .st b{display:block;font:750 30px/1 var(--sans);color:var(--acc);
  letter-spacing:-.02em}
.gstats .st .lb{margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted)}

/* un proceso en columnas. En párrafo no se lee; así sí. */
.gfases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:13px 0 0}
.gfases .fa{padding:13px 15px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel-2)}
.gfases .fa .k{display:block;margin-bottom:9px;font:10.5px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--acc);font-weight:700}
.gfases .fa ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.gfases .fa li{position:relative;padding-left:13px;font-size:13.5px;line-height:1.5;
  color:var(--muted)}
.gfases .fa li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--acc);opacity:.5}
@media(max-width:900px){.gfases{grid-template-columns:1fr}}

/* ROJO = escrito por Claude y sin aprobar, o hueco sin definir. Todo lo que esté
   en rojo se quita o se confirma; nada rojo puede salir fuera de este documento. */
.inv{color:var(--crit)}
.invn{color:var(--crit);opacity:.85;font-size:.92em;font-style:italic}
.ghyp .hnum .inv{color:var(--crit)}
.ghyp .hyp>blockquote .inv,.ghyp .hyp>header .inv{color:var(--crit)}

/* pendiente de definir: el hueco se marca y se deja vacío, nunca se rellena */
.ibody p.gtodo{margin:13px 0 0;padding:11px 14px;border:1px dashed var(--crit);
  border-radius:10px;font-size:14px;line-height:1.6;color:var(--crit);max-width:78ch}
.ibody p.gtodo .k{display:block;margin-bottom:5px;font:10.5px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--crit);font-weight:700}

/* abierto: sin verificar. Va en rojo como todo lo que no está confirmado. */
.ibody p.gopen{margin:13px 0 0;padding:11px 14px;border-left:3px solid var(--crit);
  background:var(--panel-2);border-radius:0 9px 9px 0;font-size:14px;line-height:1.6;
  color:var(--crit);max-width:78ch}
.ibody p.gopen .k{display:block;margin-bottom:5px;font:10.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--crit);font-weight:700}

/* desplegable dentro de un paso: lo que apoya pero no hace falta leer de entrada */
.ibody details.sub{margin:13px 0 0;max-width:78ch;border:1px solid var(--line);
  border-radius:10px;background:var(--panel-2)}
.ibody details.sub>summary{display:flex;align-items:center;gap:10px;cursor:pointer;
  list-style:none;padding:11px 14px;font-size:14px;font-weight:700;color:var(--text)}
.ibody details.sub>summary::-webkit-details-marker{display:none}
.ibody details.sub>summary .va{margin-left:auto;color:var(--faint);font-size:16px;
  transition:transform .15s ease}
.ibody details.sub[open]>summary .va{transform:rotate(90deg)}
.ibody details.sub[open]>summary{border-bottom:1px solid var(--line)}
.ibody .subb{padding:12px 14px 14px}
.ibody .subb .quo{margin-top:0}
.ibody .subb .quo+.quo-es+.quo-src+.quo{margin-top:14px}

/* --- Overview ---------------------------------------------------------------
   La portada del HQ. Es la única página que SÍ es una portada, así que su hero
   se sale de la regla sobria del resto: va centrado y con la marca. Todo lo
   demás usa los mismos tokens que el resto del HQ. */
.ov section{margin-top:36px}
.ov-hero{text-align:center;border-bottom:0;margin-bottom:8px;padding:14px 0 26px}
.ov-mark{height:44px;width:auto;display:block;margin:0 auto 18px}
.ov-hero h1{font-size:34px;letter-spacing:-.028em}
.ov-lede{margin:12px auto 0;max-width:62ch;color:var(--muted);font-size:16px;line-height:1.6}
@media(max-width:700px){.ov-hero h1{font-size:26px}.ov-hero{padding-top:4px}}

/* La tarjeta de una sección. Es un enlace entero, no un bloque con un botón. */
.ov-card{display:block;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:22px 24px 20px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.ov-card:hover{border-color:var(--line-2);transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(8,15,30,.04),0 14px 30px -18px rgba(8,15,30,.28)}
.ov-card-top{display:flex;align-items:center;gap:14px}
.ov-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc);font-size:15px}
.ov-card-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ov-card-t b{font-size:17px;font-weight:750;letter-spacing:-.015em}
.ov-card-s{color:var(--muted);font-size:14px;line-height:1.45}
.ov-go{margin-left:auto;flex:none;color:var(--acc);font-size:13.5px;font-weight:650;
  display:flex;align-items:center;gap:6px}
.ov-card:hover .ov-go span{transform:translateX(2px)}
.ov-go span{transition:transform .15s}
.ov-card-p{margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.62;max-width:88ch}
@media(max-width:620px){.ov-go{display:none}}

/* Los ocho pasos, en rejilla. El paso en curso lleva el acento. */
.ov-pasos{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.ov-pasos li{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
.ov-pasos li.aqui{border-color:var(--acc);background:var(--acc-soft)}
.ov-n{flex:none;width:21px;height:21px;border-radius:7px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line-2);color:var(--muted);
  font:600 11px/1 var(--mono);margin-top:1px}
.ov-pasos li.aqui .ov-n{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.ov-p{display:flex;flex-direction:column;gap:2px;min-width:0}
.ov-p b{font:650 11px/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.ov-q{color:var(--muted);font-size:13px;line-height:1.4}
.ov-aqui{margin-left:auto;flex:none;color:var(--acc);font-size:10.5px;font-weight:700;
  letter-spacing:.03em;text-align:right;line-height:1.3}

/* Cómo se usa: cuatro notas cortas. */
.ov-uso{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.ov-u{border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:var(--panel)}
.ov-u b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px}
.ov-u p{color:var(--muted);font-size:14px;line-height:1.55}

/* La nota de lo que va marcado sin aprobar. */
.ov-rojo{border-left:3px solid var(--crit);background:var(--crit-bg);
  border-radius:0 10px 10px 0;padding:14px 16px;font-size:15px;line-height:1.6;max-width:92ch}