/* TrueML · tokens del sistema de diseño (fuente única: apps/trueml). Claro y oscuro.
   Los colores --tm-* son los de trueml-mark.js (THEMES.claro y THEMES.oscuro). El oscuro aplica con el sistema en
   oscuro, salvo data-theme="light" en <html>, o siempre con data-theme="dark". Cada app copia este archivo con sync.mjs. */
:root {
  --tm-bg: #EDEFF7; --tm-grid: rgba(14,21,48,.055); --tm-card: #FFFFFF; --tm-ink: #0E1530; --tm-ink2: #3A4364; --tm-ink3: #5A6385;
  --tm-line: #E3E6F0; --tm-chip: #EEF1FF; --tm-acc: #3D5AFE; --tm-nav: rgba(237,239,247,.86); --tm-sh: 0 1px 0 rgba(14,21,48,.08);
  --tm-btn2: #FFFFFF; --tm-btn2sh: #C9CEE0; --tm-code: #0E1530; --tm-codeink: #E6EAFB; --tm-codeink2: #8F9BC9;
  --tm-ok: #E3F7EF; --tm-okink: #0C7A5B; --tm-lead: #9AA2C0;
  --tm-dojo: #B07A0C; --tm-warn: #D9532A; --tm-mon: #1B2550; --tm-off: #DCE0EC;
  --y: #E8AE36; --yt: #FFC857; --yd: #D99A1E; --o: #EC6A3F; --g: #17B386; --b: #3D5AFE; --p: #7A69EE; --n: #5A6699; --navy: #0E1530;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tm-bg: #0A0F22; --tm-grid: rgba(255,255,255,.045); --tm-card: #121A36; --tm-ink: #EEF1FB; --tm-ink2: #B4BCDD; --tm-ink3: #8C95BD;
    --tm-line: #232C52; --tm-chip: #1B2450; --tm-acc: #8FA2FF; --tm-nav: rgba(10,15,34,.82); --tm-sh: 0 0 0 1px #1E2750;
    --tm-btn2: #1B2450; --tm-btn2sh: #070B1A; --tm-code: #070B1A; --tm-codeink: #DDE3FA; --tm-codeink2: #7F8AB8;
    --tm-ok: #0F3B30; --tm-okink: #5BE0B5; --tm-lead: #4A5480; --tm-dojo: #FFC857; --tm-warn: #FF8A5C; --tm-mon: #5A6699; --tm-off: #2A3360;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tm-bg: #0A0F22; --tm-grid: rgba(255,255,255,.045); --tm-card: #121A36; --tm-ink: #EEF1FB; --tm-ink2: #B4BCDD; --tm-ink3: #8C95BD;
  --tm-line: #232C52; --tm-chip: #1B2450; --tm-acc: #8FA2FF; --tm-nav: rgba(10,15,34,.82); --tm-sh: 0 0 0 1px #1E2750;
  --tm-btn2: #1B2450; --tm-btn2sh: #070B1A; --tm-code: #070B1A; --tm-codeink: #DDE3FA; --tm-codeink2: #7F8AB8;
  --tm-ok: #0F3B30; --tm-okink: #5BE0B5; --tm-lead: #4A5480; --tm-dojo: #FFC857; --tm-warn: #FF8A5C; --tm-mon: #5A6699; --tm-off: #2A3360;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- piezas compartidas */
.tm-stripe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 4px; }
.tm-c-datos { background: var(--y); } .tm-c-modelo { background: var(--o); } .tm-c-api { background: var(--g); }
.tm-c-contenedor { background: var(--b); } .tm-c-orquestacion { background: var(--p); } .tm-c-monitoreo { background: var(--n); }

/* la T chica: barra de 3 arriba y el tronco en la columna del centro */
.tm-mini-wrap { display: inline-flex; gap: 10px; align-items: center; }
.tm-mini-txt { font: 500 11px/1.3 var(--mono); color: var(--tm-ink3); text-align: right; }
.tm-mini { display: grid; grid-template-columns: repeat(3, 8px); grid-auto-rows: 8px; gap: 2px; flex: none; }
.tm-mini i { border-radius: 2px; }
.tm-mini .tm-mini-api, .tm-mini .tm-mini-modelo, .tm-mini .tm-mini-datos { grid-column: 2; }
.tm-mini-contenedor { background: var(--b); } .tm-mini-orquestacion { background: var(--p); } .tm-mini-monitoreo { background: var(--tm-mon); }
.tm-mini-api { background: var(--g); } .tm-mini-modelo { background: var(--o); } .tm-mini-datos { background: var(--y); }
.tm-mini i.tm-off { background: var(--tm-off); }

/* selector de tema */
.tm-tema { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tm-card); box-shadow: var(--tm-sh); }
.tm-tema button { border: 0; cursor: pointer; font: 600 13px/1 var(--sans); padding: 8px 12px; border-radius: 999px; background: transparent; color: var(--tm-ink2); }
.tm-tema button[aria-pressed="true"] { background: var(--tm-ink); color: var(--tm-bg); }

/* Portada de TrueML (Claude Design: «Portada TrueML»). Los tokens --tm-* y las piezas compartidas (franja, T chica,
   selector de tema) vienen de vendor/trueml/tokens.css, que el build pone antes de este archivo. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body.tm-pagina {
  margin: 0; min-height: 100vh; padding-bottom: 56px;
  background-color: var(--tm-bg);
  background-image: linear-gradient(var(--tm-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tm-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--tm-ink); font: 16px/1.5 var(--sans);
}
.tm-pagina a { color: var(--tm-acc); }
.tm-pagina h1, .tm-pagina h2, .tm-pagina h3, .tm-pagina p { margin: 0; }
.tm-pagina :focus-visible { outline: 2px solid var(--tm-acc); outline-offset: 2px; border-radius: 6px; }
.p-wrap { max-width: 1280px; margin: 0 auto; padding-left: clamp(16px, 5vw, 56px); padding-right: clamp(16px, 5vw, 56px); }

/* barra */
.p-nav { position: sticky; top: 0; z-index: 20; background: var(--tm-nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--tm-line); }
.p-head { padding-top: 14px; padding-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.p-logo { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--tm-ink) !important; }
.p-logo-mark { width: 30px; display: block; flex: none; }
.p-word { font: 800 26px/1 var(--sans); letter-spacing: -.04em; }
.p-word span, .p-hero h1 span { color: var(--tm-acc); }
.p-head-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.p-menu { display: flex; gap: 6px; font: 600 14px/1 var(--sans); background: var(--tm-card); padding: 6px; border-radius: 999px; box-shadow: var(--tm-sh); }
.p-menu a { padding: 10px 16px; border-radius: 999px; color: var(--tm-ink); text-decoration: none; }
.p-menu a:hover { background: var(--tm-chip); }
.p-menu a.p-on { background: var(--tm-ink); color: var(--tm-bg); }
@media (max-width: 520px) { .p-menu a { padding: 9px 11px; } .p-head-r { width: 100%; justify-content: space-between; } }

/* hero + la T fija + las herramientas */
.p-main { padding-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 40px 48px; align-items: start; }
.p-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: clamp(8px, 4vw, 56px); min-width: 0; }
.p-kicker { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-acc); background: var(--tm-card); padding: 9px 14px; border-radius: 999px; box-shadow: var(--tm-sh); }
.p-hero h1 { font: 800 clamp(72px, 10vw, 128px)/.88 var(--sans); letter-spacing: -.055em; }
.p-lead { font: 20px/1.5 var(--sans); color: var(--tm-ink2); max-width: 470px; text-wrap: pretty; }
.p-btns { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 6px; }
.p-btn { display: inline-block; font: 700 16px/1.1 var(--sans); padding: 17px 24px; border-radius: 14px; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.p-btn:hover { transform: translateY(-1px); }
.p-btn-b { background: #3D5AFE; color: #fff !important; box-shadow: 0 6px 0 #2234B8; }
.p-btn-b:active { transform: translateY(5px); box-shadow: 0 1px 0 #2234B8; }
.p-btn-w { background: var(--tm-btn2); color: var(--tm-ink) !important; box-shadow: 0 6px 0 var(--tm-btn2sh); }
.p-btn-w:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--tm-btn2sh); }
.p-btn-y { background: var(--yt); color: var(--navy) !important; box-shadow: 0 6px 0 var(--yd); margin-top: 6px; }
.p-btn-y:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--yd); }

.p-t { grid-row: span 2; position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.p-t-marca { width: 100%; max-width: 680px; container-type: inline-size; }
.p-t-sin { display: none; }
@container (max-width: 439px) { .p-t-con { display: none; } .p-t-sin { display: block; } }
.p-caption { font: 500 12px/1.4 var(--mono); color: var(--tm-ink3); text-align: center; min-height: 17px; }

.p-tools { scroll-margin-top: 96px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p-tools > h2, .p-sec > h2 { font: 800 28px/1.2 var(--sans); letter-spacing: -.02em; }
.p-list { display: flex; flex-direction: column; gap: 12px; }
.p-tool, .p-card { background: var(--tm-card); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-shadow: var(--tm-sh); min-width: 0; }
.p-tool { transition: box-shadow .2s ease, transform .2s ease; }
.p-tool:hover, .p-tool:focus-within { box-shadow: 0 0 0 2px var(--tm-ink); transform: translateY(-2px); }
.p-tool-h { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.p-num { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tm-acc); }
.p-tool h3 { font: 800 22px/1.2 var(--sans); letter-spacing: -.01em; }
.p-tool p, .p-card p { font: 15px/1.5 var(--sans); color: var(--tm-ink2); text-wrap: pretty; }
.p-btn-dark { margin-top: 6px; font: 700 14px/1 var(--sans); background: var(--tm-ink); color: var(--tm-bg) !important; padding: 13px 18px; border-radius: 12px; text-decoration: none; transition: background .15s ease; }
.p-btn-dark:hover { background: var(--b); color: #fff !important; }

/* el Dojo: el bloque destacado, siempre oscuro */
.p-dojo {
  scroll-margin-top: 96px; margin-bottom: 28px; color: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
  background-color: var(--navy); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 24px 24px; box-shadow: 0 14px 32px -14px rgba(14,21,48,.55); transition: transform .2s ease, box-shadow .2s ease;
  --tm-ink3: #AAB3D6; --tm-mon: #5A6699; --tm-off: rgba(255,255,255,.14);
}
.p-dojo:hover, .p-dojo:focus-within { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(14,21,48,.6); }
.p-dojo-stripe { height: 10px; }
.p-dojo-body { padding: 26px 28px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.p-num-y { color: var(--yt); }
.p-dojo h2 { font: 800 clamp(30px, 3.2vw, 40px)/1.05 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.p-dojo p { font: 16px/1.5 var(--sans); color: #C9D0EE; max-width: 540px; text-wrap: pretty; }
.p-avance { display: flex; flex-direction: column; gap: 8px; align-self: stretch; max-width: 420px; }
.p-avance > span { font: 500 12px/1.4 var(--mono); color: #AAB3D6; }
.p-pips { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 4px; }
.p-pips i { height: 8px; border-radius: 2px; }
.p-pips i.p-off { opacity: .32; }
.p-pip-todas { background: linear-gradient(90deg, var(--y), var(--o), var(--g), var(--b), var(--p), var(--n)); }
.p-dojo + .p-dojo { margin-top: -12px; }
.p-pips--densa { gap: 2px; }
.p-pips--densa i { border-radius: 1px; }

/* por dónde empezar, garantías, feedback y pie */
.p-sec { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; }
.p-rutas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.p-ruta h3 { font: 800 19px/1.25 var(--sans); letter-spacing: -.01em; }
.p-garantias { list-style: none; margin: 0; background: var(--navy); color: #fff; border-radius: 20px; padding: 22px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.p-garantias li { display: flex; gap: 12px; align-items: center; font: 600 15px/1.3 var(--sans); }
.p-check { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--sans); }
.p-check-0 { background: var(--b); } .p-check-1 { background: var(--p); } .p-check-2 { background: var(--g); color: var(--navy); } .p-check-3 { background: #FF8A5C; color: var(--navy); }
.p-feedback { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 40px; align-items: start; padding: 28px; }
.p-feedback h2 { font: 800 24px/1.25 var(--sans); letter-spacing: -.02em; }
.p-feedback p { font-size: 16px; line-height: 1.6; }
.p-foot { margin-top: 48px; }
.p-foot p { font: 14px/1.55 var(--sans); color: var(--tm-ink3); margin-bottom: 8px; }
.p-foot p:first-child { border-top: 1px solid var(--tm-line); padding-top: 22px; }

/* aviso de privacidad */
.p-legal { padding-top: 28px; display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.p-back { font: 600 13px/1.3 var(--mono); text-decoration: none; }
.p-legal h1 { font: 800 clamp(28px, 5vw, 40px)/1.1 var(--sans); letter-spacing: -.02em; }
.p-legal h2 { font: 800 20px/1.3 var(--sans); margin-top: 12px; }
.p-legal .p-lead { font-size: 18px; max-width: none; }
.p-legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--tm-ink2); }
.p-legal p { color: var(--tm-ink2); }
.p-legal code { font: .9em var(--mono); }
.p-legal .p-nota { font-size: 14px; color: var(--tm-ink3); }
@media (prefers-reduced-motion: reduce) { .p-btn, .p-tool, .p-dojo { transition: none; } }