:root{
  --paper:#FAF5EC;--card:#FFFFFF;--bd:#E8DECC;--bd2:#D9CDB4;--soft:#F4EDDD;
  --ink:#21252C;--sec:#5B6472;--dim:#867F6E;
  /* accent celeste brand (decisión usuario 2026-06-21): medio-oscuro para resaltar sobre el claro.
     Todo el celeste sale de acá. El ámbar semántico (probable/warning/expectativa) NO es brand. */
  --ac:#2E7BC4;            /* fondo de acento (sec-h, langsw) — texto blanco encima */
  --on-ac:#fff;            /* texto SOBRE el acento (botones): blanco sobre el azul medio de esta piel */
  --acink:#1E6FB8;         /* texto/link de acento sobre el claro */
  --ac-rgb:46,123,196;     /* tints brand: rgba(var(--ac-rgb),a) */
  --ac-soft:#EAF3FB;       /* fondo celeste muy claro (hover, puerta emprender) */
  --teal:#0C7A6D;--bad:#B3261E;
  --ver:#1B7A4E;--pro:#8F6400;--est:#6D4FC4;--tes:#2B6CB0;
  /* terracota = rol "tension / el hueco / amenaza alta" en la pagina de nicho gente (v2, decision
     2026-07-01). NO es alarma (--bad es demasiado rojo). Se sumo un token propio porque ningun token
     existente juega ese rol sin colision: --pro (ambar) ya es "probable" y choca con el sello del hero
     y con el nivel MEDIO del medidor de amenaza. Para revertir a ambar: apuntar estos 3 a --pro. */
  --gap:#C0603F;--gap-soft:#FAF6F3;--gap-bd:#ECDCD3;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --sans:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
}
/* paleta del CIERRE en esta piel (clara). La estructura vive en cierre.css; cada skin define su paleta. */
.cierre-zone{--paper:#FAF5EC;--card:#FFFFFF;--soft:#F4EDDD;--bd:#E8DECC;--bd2:#D9CDB4;
  --ink:#21252C;--sec:#5B6472;--dim:#867F6E;--ac:#2E7BC4;--on-ac:#fff;--acink:#1E6FB8;--ac-soft:#EAF3FB;
  --ver:#1B7A4E;--pro:#8F6400;--bad:#B3261E;--on-ac:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}

/* header — MEDIDAS en tokens.css (chrome compartido entre skins); acá SOLO el color de esta piel */
header{background:rgba(250,245,236,.96)}
.brand{color:var(--ink)}
.back{color:var(--teal);background:var(--card)}
.back:hover{border-color:var(--teal);background:#EAF4F1}
.back.alt{color:var(--acink)}
.back.alt:hover{border-color:var(--acink);background:var(--ac-soft)}
.chip{color:var(--sec)}
.chip.cy{color:var(--teal);border-color:rgba(12,122,109,.35);background:#EAF4F1}
.langsw b{background:var(--ac);color:#fff}
.langsw a{color:var(--sec);background:var(--card)}
.coords{color:var(--dim)}
.swn-d summary{color:var(--sec);background:var(--card)}
.swn-d summary:hover{border-color:var(--acink);color:var(--acink)}
.swn-m{background:var(--card);box-shadow:0 14px 30px rgba(33,37,44,.18)}
.swn-g{color:var(--acink)}
.swn-i{color:var(--sec)}
.swn-i:hover{background:var(--ac-soft);color:var(--acink)}
.swn-i.cur{color:var(--teal);background:#EAF4F1}
.swn-hub{color:var(--teal);background:var(--card)}
.swn-hub:hover{border-color:var(--teal);background:#EAF4F1}

/* COMPARTIR — fila bajo el hero (molde, todas las páginas; estructura compartida, cada piel pone color) */
.share{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:2px 0 20px}
.share-l{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.share-b{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:9px;border:1px solid var(--bd2);background:var(--panel2);color:var(--mut);cursor:pointer;text-decoration:none;transition:.13s;position:relative}
.share-b:hover{color:var(--ac);border-color:rgba(var(--ac-rgb),.5);background:rgba(var(--ac-rgb),.08)}
.share-b.wa:hover{color:#1FAE54;border-color:rgba(37,211,102,.55);background:rgba(37,211,102,.1)}
.share-b.li:hover{color:#0A66C2;border-color:rgba(10,102,194,.55);background:rgba(10,102,194,.1)}
.share-b.cp.ok{color:var(--ver);border-color:rgba(74,222,156,.55)}
.share-b.cp.ok::after{content:"\00a1copiado!";position:absolute;bottom:calc(100% + 6px);right:0;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ver);background:var(--panel2);border:1px solid var(--bd2);border-radius:6px;padding:3px 8px;z-index:5}
.page{max-width:1020px;margin:0 auto;padding:18px 16px 60px}

.gente-hero{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:26px 24px;margin-bottom:14px;box-shadow:0 1px 2px rgba(26,28,22,.03),0 14px 32px -26px rgba(26,28,22,.40)}
/* kicker con la firma Moderno A: regla celeste de 3px + azul estructural (igual que .mm-kicker / .sec-h) */
.gente-hero .gh-k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acink);margin-bottom:13px}
.gente-hero .gh-k::before{content:"";width:24px;height:3px;background:var(--ac);border-radius:2px;flex:0 0 auto}
.gente-hero .gh-t{font-size:clamp(24px,4.5vw,32px);line-height:1.22;font-weight:800;color:var(--ink);margin:0 0 12px}
.gente-hero .gh-t .acc{color:var(--acink)}
/* split aprobado/eval como cajas con punto + monto + % + descripcion (detalle Claude Design 2026-06):
   la caja 'ok' se ajusta al contenido, la 'ev' llena — espeja la proporcion de la barra de arriba. */
.gente-hero .gh-split{display:flex;gap:16px;margin:0}
.ghs{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:10px;border:1px solid var(--bd2);background:var(--soft)}
.ghs.ok{flex:0 0 auto;border-color:rgba(27,122,78,.3);background:#EAF5EE}
.ghs.ev{flex:1;border-color:rgba(143,100,0,.28);background:#FBF3DF}
.ghs-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.ghs.ok .ghs-dot{background:var(--ver)}
.ghs.ev .ghs-dot{background:#D9A92E}
.ghs-v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-body);font-weight:700}
.ghs.ok .ghs-v{color:var(--ver)}
.ghs.ev .ghs-v{color:var(--pro)}
.ghs-pct{font-size:11px;font-weight:500;opacity:.75}
.ghs-d{font-size:var(--fs-sub);color:var(--sec);line-height:1.4;margin-top:1px}
.gente-hero .gh-p{font-size:16px;line-height:1.6;color:var(--sec);margin:18px 0 0;max-width:720px}
/* barra de proporcion del hero: el split aprobado/eval, ahora visual (puesta a punto 2026-06-25).
   Verde = ya aprobado y arrancando; ambar = presentado/en evaluacion. */
.gh-bar{display:flex;height:11px;gap:2px;margin:0 0 13px}
.gh-bar i{display:block;height:100%}
.gh-bar i.ok{background:var(--ver);border-radius:6px 2px 2px 6px}
.gh-bar i.ev{background:#D9A92E;border-radius:2px 6px 6px 2px}

/* fila de KPIs de golpe de vista (gente): las 3 puertas del vecino en numero. Mismo rol que la fila
   k3 del inversor, en la paleta clara. Las card-LINK (oficios/ideas) llevan 'ver ↓' y caja tocable.
   Unidad inline junto a la cifra; refinamientos de Claude Design 2026-06. */
.kpis-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin:0 0 18px}
.kpi-g{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:18px 20px;box-shadow:0 1px 3px rgba(34,34,30,.04);text-decoration:none;color:inherit}
.kg-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px}
.kg-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.kg-go{font-family:var(--mono);font-size:var(--fs-label);color:var(--teal);white-space:nowrap}
.kpi-g.acc .kg-go{color:var(--acink)}
.kg-v{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--teal)}
.kpi-g.acc .kg-v{color:var(--acink)}
.kg-un{font-size:12px;font-weight:500;color:var(--dim);letter-spacing:0}
.kg-u{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-body-sm);color:var(--sec);line-height:1.4;margin-top:10px}
a.kpi-g.go{transition:.13s}
a.kpi-g.go:hover{border-color:var(--acink);box-shadow:0 4px 13px rgba(var(--ac-rgb),.14);transform:translateY(-1px)}

/* strip 'X en numeros' (gente): equivalente ciudadano del rail provincial del inversor. */
.pf-panel{padding:16px 18px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.pf-tile{background:var(--paper);border:1px solid var(--bd);border-radius:11px;padding:13px 14px;min-width:0}
.pf-top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.pf-cifra{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--acink)}
.pf-t{font-size:var(--fs-sub);color:var(--sec);line-height:1.4}
.pf-bar{height:7px;border-radius:5px;overflow:hidden;background:var(--soft);border:1px solid var(--bd2);margin-top:9px}
.pf-bar i{display:block;height:100%;background:var(--ac)}

/* punto de sello (golpe de vista del nivel de confianza, sin texto) — espejo claro del de la skin dark */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sec);vertical-align:middle;flex:0 0 auto}
.dot.ver{background:var(--ver)}.dot.pro{background:var(--pro)}.dot.sin{background:var(--bad)}.dot.est{background:var(--est)}.dot.tes{background:var(--tes)}.dot.neutral{background:var(--sec)}

.firma-gente{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px 15px;margin:28px 0 18px}
.firma-av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:-.01em;color:#aed4f5;background:linear-gradient(140deg,#1c3a5c,#0f2236);border:1px solid rgba(124,192,255,.3);overflow:hidden}
img.firma-av{object-fit:cover}
.firma-rol{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ac)}
.fg-nombre{font-weight:800;font-size:var(--fs-body-lg)}
.fg-nombre a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--bd2)}
.fg-nombre a:hover{border-bottom-style:solid}
.fg-creds{font-size:var(--fs-sub);line-height:1.45;color:var(--sec);margin-top:1px}

/* Header de seccion EDITORIAL (Moderno A 2026-06-27): sin pill de color — titulo ink en bold con
   una regla-kicker celeste de 3px arriba. Reemplaza la caja celeste/teal que se veia "de template". */
.sec-h{display:flex;width:auto;align-items:baseline;flex-wrap:wrap;gap:10px;background:none;color:var(--ink);
  padding:15px 0 0;border-radius:0;position:relative;font-weight:800;font-size:22px;letter-spacing:-.015em;line-height:1.15;margin:40px 0 16px}
.sec-h::before{content:"";position:absolute;top:0;left:0;width:26px;height:3px;background:var(--ac);border-radius:2px}
.sec-h span[style]{color:var(--dim)!important;opacity:1!important;font-weight:500;font-size:15px;letter-spacing:0}

/* overflow-x: una tabla ancha scrollea DENTRO del panel, no panea la pagina (fix mobile 2026-06-11) */
.panel{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:var(--pad-panel);box-shadow:0 1px 8px rgba(60,45,20,.04);overflow-x:auto;margin-bottom:22px}
.panel+.sec-h{margin-top:10px}

.micro-hecho{font-size:var(--fs-body);color:var(--sec);padding:6px 0;border-bottom:1px solid var(--bd);line-height:1.5}.micro-hecho:last-child{border:0}

/* tarjetas-stat de la capa gente (redisenio 2026-06-11): cifra protagonista + detalle colapsable.
   min-width:0 en los hijos del grid: leccion L32 (una col 1fr no encoge bajo su min-content). */
/* auto-FIT (no auto-fill): las columnas sin tile colapsan y los tiles LLENAN la fila; un grupo de
   1 tile pasa a titular a todo el ancho (stat-faro), no a hueco (re-auditoria 2026-06-21). */
.mh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:10px;border-top:1px dashed var(--bd2);padding-top:12px}
.mh{display:flex;flex-direction:column;gap:4px;min-width:0;background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:13px 14px;box-shadow:0 1px 5px rgba(60,45,20,.04);transition:.13s}
.mh:hover{border-color:var(--teal);box-shadow:0 3px 10px rgba(12,122,109,.10)}
.mh-cifra{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:27px;font-weight:700;letter-spacing:-.5px;line-height:1.05;color:var(--teal);overflow-wrap:break-word}
.mh-titulo{font-size:var(--fs-body-sm);font-weight:600;color:var(--ink);line-height:1.45}
.mh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:auto;padding-top:6px}
.mh.adv{background:#FCF3DF;border-color:#E3C98E}
/* .mh.adv = tarjeta de ADVERTENCIA: ámbar semántico (no brand), se mantiene dorado a propósito */
.mh.adv:hover{border-color:#8F6400;box-shadow:0 3px 10px rgba(143,100,0,.12)}
.mh.adv .mh-cifra{color:#8F6400}
/* mini-barra de la tile cuando la cifra es un % (46%, +29%, 2,3%...): visualiza la magnitud, igual
   que los minis del inversor. Ambar en las tiles de advertencia (.mh.adv). */
.mh-bar{height:6px;border-radius:4px;overflow:hidden;background:var(--soft);border:1px solid var(--bd2);margin:1px 0 2px}
.mh-bar i{display:block;height:100%;background:var(--teal)}
.mh-bar.adv i{background:#C99A2E}
/* tile de advertencia que SURFACEA el "qué pasó" (gente): ancho completo + explicación honesta inline.
   Resuelve la paradoja (un negativo al lado del boom) en vez de dejar un dato suelto que asuste. */
.mh-explica{grid-column:1/-1}
.mh-explica .mh-titulo{font-size:15.5px;font-weight:800;line-height:1.4}
.mh-porque{margin-top:10px;padding-top:11px;border-top:1px dashed #E3C98E;font-size:var(--fs-body-lg);line-height:1.62;color:#6E5A26}
.mh-pk{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8F6400;margin-bottom:6px}
.mh-pt b,.mh-pt strong{color:#5E4D1E;font-weight:700}
/* surfacing POSITIVO (no advertencia): mismo patrón, paleta teal (ejemplo concreto / prueba), no ámbar */
.mh-explica.pos{background:var(--card);border-color:var(--bd)}
.mh-explica.pos .mh-cifra{color:var(--teal)}
.mh-porque.pos{border-top-color:rgba(12,122,109,.26);color:var(--sec)}
.mh-porque.pos .mh-pk{color:var(--teal)}
.mh-porque.pos .mh-pt b,.mh-porque.pos .mh-pt strong{color:var(--ink)}
/* Muro de oficios: banda al TOPE de la pagina gente. Chips SOLIDOS grandes = lo que el que busca
   laburo ve apenas entra (redisenio 2026-06-21). Ancla a la card de detalle via #oficios. */
.muro-of{background:linear-gradient(180deg,#EAF4F1,var(--card));border:1px solid rgba(12,122,109,.30);border-left:4px solid var(--teal);border-radius:14px;padding:18px 20px 15px;margin:0 0 16px;box-shadow:0 2px 12px rgba(12,122,109,.07)}
.muro-of-k{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal)}
.muro-of-banda{margin:12px 0}
.muro-of-bk{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
/* banda 'con titulo o carrera': azul profesional, distinto del oficio (teal) — scaneable de un vistazo */
.muro-of-banda:has(.muro-of-chip.prof) .muro-of-bk{color:var(--tes)}
.muro-of-bn{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--dim)}
.muro-of-chips{display:flex;flex-wrap:wrap;gap:9px}
/* chips SUAVES (pasada Claude Design 2026-06, elegidos por el usuario): etiquetas (no botones) — fondo
   claro + texto color, mono, rectangulares. Se leen como indice, no como tap-targets. Color por banda. */
.muro-of-chip{font-family:var(--mono);font-size:var(--fs-sub);font-weight:500;color:#155F53;background:#DCEFE5;border:1px solid #BBE3D2;border-radius:9px;padding:8px 14px;white-space:nowrap}
.muro-of-chip.prof{color:#244E95;background:#DDE8FA;border-color:#C2D4F1}
/* botón de acción ESTÁNDAR (caja iluminada, paleta teal): igual patrón que la skin dark (.oc-go/.ff),
   ilumina al hover propio Y al hover de toda la card .muro-of. */
.muro-of-foot{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.02em;color:var(--teal);text-decoration:none;border:1px solid rgba(12,122,109,.34);background:rgba(12,122,109,.06);border-radius:7px;padding:6px 13px;transition:.13s;margin-top:2px}
.muro-of-foot:hover,.muro-of:hover .muro-of-foot{background:rgba(12,122,109,.13);border-color:var(--teal)}
.muro-of-foot span{font-family:var(--mono)}
#oficios{scroll-margin-top:70px}
/* puerta a EMPRENDER: barra-link bajo el muro que baja a #emprender. Ambar = distinta del muro
   de trabajo (teal/azul); sistema de 'puertas' por color (idea usuario 2026-06-21). */
.puerta-emp{display:flex;align-items:center;gap:12px;text-decoration:none;background:linear-gradient(180deg,var(--ac-soft),var(--card));border:1px solid rgba(var(--ac-rgb),.28);border-left:4px solid var(--ac);border-radius:12px;padding:13px 17px;margin:0 0 16px;transition:.13s}
.puerta-emp:hover{border-color:var(--acink);box-shadow:0 3px 10px rgba(var(--ac-rgb),.12)}
.pe-tag{flex:0 0 auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--acink);background:var(--ac-soft);border:1px solid rgba(var(--ac-rgb),.3);padding:5px 10px;border-radius:7px;white-space:nowrap}
.pe-txt{font-size:var(--fs-body-lg);color:var(--ink);line-height:1.4}
.pe-txt b{color:var(--acink)}
.pe-arrow{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:17px;color:var(--acink);flex:0 0 auto}
#emprender{scroll-margin-top:70px}
/* fch.vol queda ÁMBAR a propósito: es aviso semántico de número perecedero (no es brand) */
.fch.vol{color:#8F6400;border-color:#E3C98E;background:#FCF3DF}


/* SISTEMA DE TOKENS (regla del molde): caja = se TOCA (CTAs/filtros) · plano = se LEE (sello+estado+fase).
   El color de semáforo + el punto cargan el significado; la caja queda para lo clickeable. */
.b{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;
  border:0;background:none;padding:0;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.b::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.b.ver,.b.ap{color:var(--ver)}
.b.pro,.b.pr{color:var(--pro)}
.b.est,.b.an{color:var(--est)}
.b.tes{color:var(--tes);letter-spacing:.06em}
.b.warn{color:var(--pro)}   /* efecto 'presiona' (NN_EF) en la piel gente: ámbar, igual que .gh-ver.presiona */
.b.sin{color:var(--bad)}
.b.neutral{color:var(--sec)}
.b.neutral::before{display:none}

/* catalogo de fuentes colapsado (mismo patron que portada/inversor, skin clara): resumen fuerte
   visible + catalogo en <details>; la credibilidad la da PODER abrirlas, no leer 50 filas (H3) */
.fuentes-det summary{cursor:pointer;font-size:var(--fs-body-lg);color:var(--ink);line-height:1.6}
.fuentes-det summary b{color:var(--ink)}
.fuentes-det summary::marker{color:var(--acink)}
.fuentes-det summary:hover .fd-cta{background:#FBF2DC}
.fd-cta{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--acink);border:1px solid rgba(var(--ac-rgb),.4);border-radius:5px;padding:3px 9px;margin-left:10px;white-space:nowrap}
.fuentes-det:not([open]) .fd-cta::after{content:"abrir el cat\00E1logo"}
.fuentes-det[open] .fd-cta::after{content:"cerrar el cat\00E1logo"}
.fuentes-det[open] summary{margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid var(--bd)}

.src{color:var(--acink);text-decoration:none;font-family:var(--mono);font-size:var(--fs-micro)}
.src:hover{text-decoration:underline}

/* sello de frescura "dato al MM-AAAA" (decision 7, 2026-06-10) */
.fch{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;color:var(--dim);border:1px solid var(--bd2);border-radius:var(--r-sm);padding:1px 5px;white-space:nowrap;vertical-align:middle;background:var(--card)}

/* sello de procedencia PLANO (decision usuario 2026-06-21): espejo claro del de la skin dark */
.sello{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-label);
  color:var(--dim);text-decoration:none;vertical-align:middle;white-space:nowrap;line-height:1.3;
  border-radius:var(--r-sm);padding:1px 4px;margin-left:3px;transition:background .12s,color .12s}
a.sello:hover{background:rgba(var(--ac-rgb),.08)}
.se-c{display:inline-flex;align-items:center;gap:4px;letter-spacing:.04em;text-transform:uppercase}
.se-c::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.se-c.ver{color:var(--ver)}.se-c.pro{color:var(--pro)}.se-c.sin{color:var(--bad)}.se-c.est{color:var(--est)}.se-c.tes{color:var(--tes)}.se-c.neutral{color:var(--sec)}
.se-c.neutral::before{display:none}
.se-sep{color:var(--bd2)}
.se-f{color:var(--dim)}
.se-go{color:var(--acink);font-size:var(--fs-micro);line-height:1}
a.sello:hover .se-f{color:var(--ink)}

/* leyenda de los sellos de confianza (decision 1, 2026-06-10) */
.leyenda{font-family:var(--mono);font-size:var(--fs-micro);color:var(--sec);line-height:2.2;margin:0 0 12px}
/* leyenda de sellos: caja blanca para que lea sobre el papel beige (no la tira suelta) */
.leyenda.sellos{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:11px 16px;line-height:2;margin:0 0 22px;box-shadow:0 1px 2px rgba(26,28,22,.03);scroll-margin-top:70px}
table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
th{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:left;padding:var(--pad-th);border-bottom:1px solid var(--bd2)}
td{padding:var(--pad-td);border-bottom:1px solid var(--bd);vertical-align:top}tr:hover td{background:var(--soft)}
td.r,th.r{text-align:right}.ent{color:var(--ink);font-weight:700}.sub{color:var(--dim);font-size:var(--fs-label)}
td.mono{word-break:break-all}


.disc{background:var(--soft);border:1px solid var(--bd);border-radius:10px;padding:12px 15px;font-size:var(--fs-body);color:var(--sec);margin:16px 0;line-height:1.55}
.sec-lead{font-size:var(--fs-body);color:var(--sec);line-height:1.55}
.sec-lead b{color:var(--ink);font-weight:700}
/* lectura rapida: la negrita de skim resalta sobre el gris del parrafo (en .disc y en el contenido) */
.disc b,.gh-p b{color:var(--ink);font-weight:700}
.foot{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);text-align:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--bd)}

/* "Cómo este boom se vuelve tu oportunidad": el CAMINO (v8 Premium, Claude Design 2026-06-27). Steps
   numerados con timeline + dos PUERTAS premium (header en degradé + rail de oficios/rubros SIEMPRE visible,
   feedback usuario "que no esté cerrado") + caveat + chip macro oscuro al Tablero. NÚMEROS = hechos (con
   sello clickeable a la fuente), ENCADENADO = tesis. Sin panel: las cards flotan sobre el papel. */
.cm-wrap{margin:0 0 22px}
.cm-lead{font-size:17.5px;line-height:1.5;color:var(--sec);margin:0 0 24px;max-width:760px}
.cm-lead b{color:var(--ink);font-weight:800}
/* step numerado (tronco) con timeline a la izquierda */
.cm-step{display:grid;grid-template-columns:50px 1fr;gap:18px}
.cm-rail{display:flex;flex-direction:column;align-items:center}
.cm-num{width:44px;height:44px;border-radius:13px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cm-railline{flex:1;width:2px;background:var(--bd2);margin:7px 0}
.cm-card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:20px 24px;box-shadow:0 1px 2px rgba(33,30,24,.04),0 16px 32px -22px rgba(33,30,24,.22);margin-bottom:4px}
.cm-card-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.cm-h{margin:0;font-size:25px;font-weight:800;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.cm-h-sub{font-family:var(--mono);font-size:var(--fs-sub);color:var(--dim)}
/* evidencia: strip con número grande (mono) + label chica + divisores; el sello clickeable va al frente */
.cm-ev{display:flex;align-items:center;flex-wrap:wrap;gap:9px 13px;background:var(--soft);border:1px solid var(--bd2);border-radius:11px;padding:10px 15px;margin-bottom:13px}
.cm-ev-pair{display:flex;align-items:baseline;gap:5px}
.cm-n{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cm-ev-l{font-size:12px;color:var(--dim)}
.cm-ev-div{width:1px;height:15px;background:var(--bd2)}
.cm-ev .sello{margin-left:0}
.cm-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);border:1px solid var(--bd2);border-radius:20px;padding:3px 9px}
.cm-vos{font-size:16px;line-height:1.5;color:var(--sec);margin:0}
.cm-vos b{color:var(--ink);font-weight:700}
/* detalle surfaceado de un nodo del camino (hechos con `surfacear`): el valor completo del dato,
   en voz de dato (mono chico) entre el strip de evidencia y el "para vos" */
.cm-det{font-size:var(--fs-body-sm);line-height:1.55;color:var(--sec);margin:0 0 9px;padding:8px 12px;border-left:2px solid var(--bd2);background:rgba(26,28,22,.025);border-radius:0 8px 8px 0}
/* conector 01->02 (la flecha es tesis) */
.cm-conn{display:grid;grid-template-columns:50px 1fr;gap:18px}
.cm-conn-b{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 0;font-size:var(--fs-body);color:var(--sec)}
.cm-conn-ar{font-family:var(--mono);color:var(--tes);font-weight:700}
/* cabecera de bifurcación */
.cm-fork{display:flex;flex-direction:column;align-items:center;margin:8px 0 6px}
.cm-fork-t{font-size:var(--fs-body);color:var(--sec)}
.cm-fork-t b{color:var(--ink);font-weight:800}
.cm-fork svg{margin-top:5px}
/* dos puertas premium */
.cm-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;align-items:start}
.cm-door{background:var(--card);border-radius:18px;overflow:hidden}
/* Moderno A (2026-06-27): puerta = card blanca con ACENTO de color arriba (3px) en vez del header
   de gradiente saturado + emoji. La semantica teal=trabajo / azul=pyme se conserva como acento. */
.cm-door.trabajo{border:1px solid #C4E2D6;border-top:3px solid var(--teal);box-shadow:0 1px 2px rgba(33,30,24,.04),0 18px 36px -26px rgba(12,122,109,.4)}
.cm-door.pyme{border:1px solid #CCDCF1;border-top:3px solid var(--ac);box-shadow:0 1px 2px rgba(33,30,24,.04),0 18px 36px -26px rgba(35,78,149,.4)}
.cm-door-h{display:flex;align-items:center;gap:13px;padding:16px 22px;background:var(--card);border-bottom:1px solid var(--bd)}
.cm-door-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em}
.cm-door.trabajo .cm-door-k{color:var(--teal)}
.cm-door.pyme .cm-door-k{color:var(--acink)}
.cm-door-t{font-size:21px;font-weight:800;color:var(--ink);line-height:1.1}
.cm-door-b{padding:19px 22px}
.cm-door-b .cm-vos{margin-bottom:17px}
.cm-door.trabajo .cm-door-b .cm-ev{background:#E9F4EF;border-color:#C8E3D8}
.cm-door.pyme .cm-door-b .cm-ev{background:#EAF0FA;border-color:#D2E0F4}
.cm-door.trabajo .cm-ev .cm-n{color:#15665A}
.cm-door.pyme .cm-ev .cm-n{color:#234E95}
/* rail del abanico de oficios / rubros (siempre visible dentro de la puerta) */
.cm-rl-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:11px}
.cm-rl-k.trabajo{color:#4F9885}
.cm-rl-k.pyme{color:#5E7CB4}
.cm-rl{border-left:2px solid;padding-left:14px;display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
.cm-rl.trabajo{border-color:#BFE0D4}
.cm-rl.pyme{border-color:#C6D8F0}
.cm-rl-i{display:flex;align-items:baseline;gap:9px;font-size:var(--fs-body-lg);line-height:1.35}
.cm-rl.trabajo .cm-rl-i{color:#3A463F}
.cm-rl.pyme .cm-rl-i{color:#374A63}
.cm-rl-b{font-family:var(--mono);font-size:11px;flex:0 0 auto}
.cm-rl.trabajo .cm-rl-b{color:#9BC3B6}
.cm-rl.pyme .cm-rl-b{color:#9DB6DD}
.cm-rl-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:500;text-decoration:none;margin-bottom:18px}
.cm-rl-go.trabajo{color:#15665A}
.cm-rl-go.pyme{color:#234E95}
.cm-rl-go:hover{text-decoration:underline}
/* CTA primer paso (sólido, color de la puerta) */
/* Moderno A: el "primer paso" pasa de CTA oscuro solido a caja de TINTE CLARO con texto de color
   (espeja .mm-paso); la semantica teal/azul se mantiene. */
.cm-paso{display:block;text-decoration:none;border-radius:13px;padding:15px 18px;transition:.13s;border:1px solid}
.cm-paso.trabajo{background:#EAF4F1;border-color:#C4E2D6}
.cm-paso.pyme{background:var(--ac-soft);border-color:#CCDCF1}
.cm-paso.trabajo:hover{background:#E0EFEA}
.cm-paso.pyme:hover{background:#E2EDF9}
.cm-paso-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;margin-bottom:7px}
.cm-paso.trabajo .cm-paso-k{color:var(--teal)}
.cm-paso.pyme .cm-paso-k{color:var(--acink)}
.cm-paso-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cm-paso-t{font-size:18px;font-weight:800}
.cm-paso.trabajo .cm-paso-t{color:#15665A}
.cm-paso.pyme .cm-paso-t{color:#234E95}
.cm-paso-ar{font-size:16px;flex:0 0 auto}
.cm-paso.trabajo .cm-paso-ar{color:var(--teal)}
.cm-paso.pyme .cm-paso-ar{color:var(--acink)}
.cm-paso-d{font-size:var(--fs-body);line-height:1.45;margin-top:5px;color:var(--sec)}
/* caveat honesto (ámbar, badge "!") */
.cm-caveat{display:flex;gap:15px;background:#FAF2DD;border:1px solid #ECD9A8;border-radius:14px;padding:17px 22px;margin-bottom:14px}
.cm-cav-b{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:#D8A93A;color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.cm-cav-t{font-size:17.5px;font-weight:800;color:#7D5E14;margin-bottom:6px;letter-spacing:-.01em}
.cm-cav-d{font-size:15.5px;line-height:1.5;color:#6E5A26}
.cm-cav-d b{color:#5E4D1E;font-weight:700}
.cm-cav-d .sello{color:#8A6A14}
/* chip macro al Tablero (oscuro, premium) */
.cm-macro{display:flex;align-items:center;gap:15px;background:var(--ink);border-radius:14px;padding:16px 22px;text-decoration:none;transition:.13s}
.cm-macro:hover{filter:brightness(1.18)}
.cm-macro-ico{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;color:#7FD1C0}
.cm-macro-t{flex:1;font-size:15.5px;line-height:1.45;color:#D6CFC0}
.cm-macro-t b{color:#fff;font-weight:700}
.cm-macro-go{font-family:var(--mono);font-size:12px;color:#7FD1C0;white-space:nowrap}
@media(max-width:640px){
  .cm-doors{grid-template-columns:1fr}
  .cm-step,.cm-conn{grid-template-columns:40px 1fr;gap:13px}
  .cm-num{width:38px;height:38px;font-size:var(--fs-body)}
  .cm-h{font-size:22px}
  .cm-card{padding:17px 18px}
}

/* abanico de oficios · ÍNDICE comparable (Mock A, Claude Design 2026-06-27): filtros + tabla con BARRA de
   salario (salario_rango, neto, escala común) + ficha expandible. #oficios (scroll-margin arriba) es el
   ancla del KPI 'oficios' y del primer paso del camino. El salario es estimado/probable y datado: la barra
   no se presenta como hecho duro (punto de confianza al lado del número + base neta + 'cambia c/paritaria'). */
.ofx-wrap{margin:0 0 22px}
.ofx-intro{font-size:15.5px;line-height:1.55;color:var(--sec);margin:0 0 14px;max-width:700px}
.ofx-intro b{color:var(--ink);font-weight:700}
.ofx-note{display:block;margin-top:6px;font-size:var(--fs-body-sm);color:var(--dim)}
.ofx-note b{color:var(--sec);font-weight:700}
.ofx-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 7px}
.ofx-fk{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--dim);margin-right:2px}
.ofx-f{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--sec);background:var(--card);border:1px solid var(--bd2);padding:6px 13px;border-radius:8px;cursor:pointer;transition:.12s}
.ofx-f:hover{border-color:var(--dim)}
.ofx-f.active{color:#fff;background:var(--ink);border-color:var(--ink)}
.ofx-spacer{flex:1}
.ofx-count{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.ofx-count b{color:var(--sec);font-weight:600}
.ofx-head{display:grid;grid-template-columns:1fr 158px 118px 38px;gap:14px;align-items:center;padding:10px 14px 8px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;color:var(--dim)}
.ofx-rows{display:flex;flex-direction:column;gap:8px}
.ofx{background:var(--card);border:1px solid var(--bd);border-radius:13px;overflow:hidden;box-shadow:0 1px 3px rgba(34,34,30,.04);transition:.13s}
.ofx[open]{background:#FFFDF8;border-color:var(--bd2);box-shadow:0 3px 12px rgba(60,45,20,.07)}
.ofx.ofi{border-left:3px solid var(--teal)}
.ofx.prof{border-left:3px solid var(--tes)}
.ofx-sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 158px 118px 38px;gap:14px;align-items:center;padding:14px}
.ofx-sum::-webkit-details-marker{display:none}
.ofx-name{min-width:0}
.ofx-nl{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ofx-n{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ofx-cat{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;white-space:nowrap}
.ofx-cat.ofi{color:#155F53;background:#DCEFE5;border:1px solid #BBE3D2}
.ofx-cat.prof{color:#244E95;background:#DDE8FA;border:1px solid #C2D4F1}
.ofx-what{font-size:var(--fs-body-sm);line-height:1.4;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofx-pv{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-body);font-weight:600;color:var(--ink);line-height:1}
.ofx-pv.sd{color:var(--dim);font-weight:500}
.ofx-track{height:4px;background:#EEE6D3;border-radius:3px;overflow:hidden;margin-top:6px}
.ofx-track i{display:block;height:100%;border-radius:3px}
.ofx-track.ofi i{background:var(--teal)}
.ofx-track.prof i{background:var(--tes)}
.ofx-track.empty{background:repeating-linear-gradient(90deg,#EEE6D3 0 5px,transparent 5px 10px)}
.ofx-dt{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:4px 9px;border-radius:6px;white-space:nowrap}
.ofx-dt.urgente{color:#fff;background:var(--teal);border:1px solid var(--teal)}
.ofx-dt.firme{color:var(--sec);background:var(--soft);border:1px solid var(--bd2)}
.ofx-dt.emergente{color:var(--dim);background:var(--soft);border:1px solid var(--bd2)}
.ofx-chev{font-family:var(--mono);font-size:11px;color:var(--acink);text-align:right;white-space:nowrap}
.ofx[open] .ofx-chev{color:var(--dim)}
.ofx-chev::after{content:" \25BE"}
.ofx[open] .ofx-chev::after{content:" \25B4"}
.ofx-body{padding:2px 16px 18px 16px;border-top:1px dashed var(--bd2)}
.ofx-d{display:grid;grid-template-columns:148px 1fr;gap:16px;padding:11px 0;border-top:1px solid var(--soft)}
.ofx-d:first-child{border-top:0;padding-top:14px}
.ofx-dk{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;padding-top:2px}
.ofx-dk.pay{color:var(--pro)}.ofx-dk.cert{color:var(--teal)}.ofx-dk.form{color:var(--acink)}.ofx-dk.via{color:var(--dim)}.ofx-dk.frena{color:var(--pro)}
.ofx-dv{font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec)}
.ofx-dv b{color:var(--ink);font-weight:700}
.ofx-rngnote{display:block;margin-top:4px;font-size:var(--fs-sub);color:var(--dim)}
.ofx-rngnote b{color:var(--sec)}
.ofx-rngwhy{color:var(--dim)}
.ofc-forms{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.ofc-forms li{font-size:var(--fs-body);line-height:1.45;color:var(--sec)}
.ofc-forms b{color:var(--ink)}
.ofc-fnota{color:var(--dim);font-size:var(--fs-sub)}
.of-mod{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:5px;margin:0 2px}
.of-mod.gratis{color:var(--ver);background:#E7F4EC;border:1px solid #BFE0CC}
.of-mod.aran{color:var(--pro);background:#FBF2DC;border:1px solid #E3C98E}
.of-mod.mixto{color:var(--acink);background:var(--ac-soft);border:1px solid #C2D4F1}
.ofx-paso{display:flex;gap:10px;align-items:baseline;margin-top:14px;padding:12px 15px;background:#EAF4F1;border:1px solid rgba(12,122,109,.26);border-radius:10px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--ink)}
.ofx-pk{flex:0 0 auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.ofx-fsrc{margin-top:12px;padding-top:10px;border-top:1px dashed var(--bd2);font-size:12px;color:var(--dim)}
.ofx-fsrc .ofx-dk{display:inline;margin-right:6px}
@media(max-width:680px){
  .ofx-head{display:none}
  .ofx-sum{grid-template-columns:1fr auto;gap:6px 11px}
  .ofx-name{grid-column:1}
  .ofx-chev{grid-column:2;align-self:center}
  .ofx-pay{grid-column:1/-1;display:flex;align-items:center;gap:11px;margin-top:3px}
  .ofx-track{flex:1;margin-top:0;min-width:70px}
  .ofx-dem{grid-column:1/-1}
  .ofx-d{grid-template-columns:1fr;gap:3px}
}

@media(max-width:760px){
  .chip.cy{display:none}
  .page{padding:14px 13px 50px}
  .gente-hero{padding:20px 17px}
  .gh-split{flex-direction:column}
  .ghs.ok,.ghs.ev{flex:1 1 auto}
}


/* ---- agregados de implementacion (no venian en el handoff) ---- */

/* ============================================================================
   MODERNO A — bloque "Impacto micro - para la gente" (Claude Design 2026-06-27).
   Lenguaje editorial serio: secciones NUMERADAS sin emoji, metadata en mono,
   card-metrica de numero grande + sello + disclosure nativo (abierto por default
   = surfacea, honra L134), tesis-lede acotada. SOLO gente (el inversor no carga
   esta hoja). Reusa los tokens de confianza ya establecidos (--ver/--pro/--tes),
   no los reinventa. Piloto del rollout de Moderno A a toda la pagina gente. */
.mm{max-width:880px}
.mm-kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.mm-kicker i{width:24px;height:3px;background:var(--ac);border-radius:2px;flex:0 0 auto}
.mm-kicker span{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acink)}
.mm-intro{font-size:17px;line-height:1.5;color:var(--sec);max-width:720px;margin:0 0 34px}
.mm-intro b{color:var(--ink);font-weight:700}

.mm-sec{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.mm-sec.next{margin-top:50px}
.mm-n{font-family:var(--mono);font-size:var(--fs-sub);font-weight:600;color:var(--dim)}
.mm-h{margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}

.mm-tesis{display:flex;gap:13px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;margin:0 0 22px}
.mm-tbadge{flex:0 0 auto;height:fit-content;margin-top:2px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--tes);background:rgba(43,108,176,.09);border:1px solid rgba(43,108,176,.22);padding:3px 8px;border-radius:5px}
.mm-tesis p{margin:0;font-size:15.5px;line-height:1.55;color:var(--sec)}
.mm-tesis b{color:var(--ink);font-weight:700}.mm-tesis .warn{color:var(--pro)}

.mm-glabel{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);margin:22px 0 11px}
.mm-glabel.warn{color:var(--pro)}
/* la banda del TAM junto al rótulo "qué tan firme es el número": el rótulo prometía un número que no estaba */
.ng-tamval{color:var(--ink);font-weight:700;letter-spacing:.02em;text-transform:none}

.mm-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;box-shadow:0 1px 2px rgba(26,28,22,.03),0 14px 32px -26px rgba(26,28,22,.40);overflow:hidden;margin:0 0 12px}
.mm-card.legal{border-color:#D3E2EF;box-shadow:0 1px 2px rgba(26,28,22,.03),0 14px 32px -26px rgba(31,100,153,.45)}
.mm-card.adv{border-color:#ECDFC4;box-shadow:0 1px 2px rgba(26,28,22,.03),0 14px 32px -26px rgba(176,125,28,.40)}
.mm-cbody{padding:19px 21px}
.mm-crow{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.mm-nt{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mm-num{font-size:38px;font-weight:800;letter-spacing:-.025em;line-height:.95;color:var(--acink);font-variant-numeric:tabular-nums lining-nums}
.mm-card.adv .mm-num{color:var(--pro)}
.mm-tx{font-size:15.5px;line-height:1.35;color:var(--sec);max-width:380px}
.mm-tx b{color:var(--ink);font-weight:700}
.mm-sello-tr{flex:0 0 auto;white-space:nowrap}
.mm-bar{height:6px;background:var(--soft);border-radius:4px;overflow:hidden;margin-top:15px}
.mm-bar i{display:block;height:100%;background:var(--ac);border-radius:4px}
/* disclosure NATIVO (sin JS): abierto por default = surfacea el valor curado (L134), colapsable */
.mm-det{border-top:1px solid var(--soft)}
.mm-det>summary{list-style:none;display:flex;align-items:center;gap:8px;background:var(--soft);padding:11px 21px;cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acink);user-select:none}
.mm-det.adv>summary{color:var(--pro)}
.mm-det>summary::-webkit-details-marker{display:none}
.mm-det>summary::before{content:"\25B8";display:inline-block;transition:transform .15s}
.mm-det[open]>summary::before{transform:rotate(90deg)}
.mm-det-body{padding:15px 21px 19px;background:var(--card)}
.mm-det-body p{margin:0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--sec)}
.mm-det-body b{color:var(--ink);font-weight:700}

.mm-paso{background:var(--ac-soft);border:1px solid #D3E2EF;border-radius:14px;padding:15px 19px;margin:14px 0 0}
.mm-pk{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acink);margin-bottom:7px}
.mm-paso p{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--sec)}
.mm-paso b{color:var(--acink);font-weight:700}

@media(max-width:560px){
  .mm-num{font-size:32px}
  .mm-crow{flex-direction:column;gap:9px}
  .mm-sello-tr{order:-1}
}

/* ============================================================================
   IDEAS PARA EMPRENDER — ÍNDICE RANQUEADO (Moderno B, Claude Design 2026-06-27).
   El gemelo del abanico de oficios para el lado EMPRENDER: una tabla, filas por
   urgencia de demanda + medidor de 3 barras + disclosure nativo. Gente-only.
   urgente=rojo (--bad) · ventana abierta=azul (--ac). */
.idx-title{font-size:clamp(22px,3.4vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.18;margin:0 0 9px}
.idx-title .acc{color:var(--acink)}
.idx-intro{font-size:16px;line-height:1.5;color:var(--sec);max-width:740px;margin:0 0 22px}
.idx-intro b{color:var(--ink);font-weight:700}
.idx-list{background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(26,28,22,.03),0 16px 34px -28px rgba(26,28,22,.5)}
.idx-row{border-top:1px solid var(--bd)}
.idx-row:first-child{border-top:none}
.idx-row[open]{background:var(--soft)}
.idx-sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:30px 1fr 150px 24px;gap:18px;align-items:center;padding:16px 22px}
.idx-sum::-webkit-details-marker{display:none}
.idx-num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--dim)}
.idx-main{min-width:0}
.idx-t{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.idx-h{font-size:var(--fs-body-sm);line-height:1.42;color:var(--sec);margin-top:3px}
.idx-h b{color:var(--ink);font-weight:700}
.idx-meter{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.idx-dl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.05em}
.idx-bars{display:flex;gap:3px}
.idx-bars i{width:20px;height:5px;border-radius:3px;background:var(--bd2)}
.idx-row.urg .idx-dl{color:var(--bad)}
.idx-row.urg .idx-bars i.on{background:var(--bad)}
.idx-row.ven .idx-dl{color:var(--acink)}
.idx-row.ven .idx-bars i.on{background:var(--ac)}
.idx-chev{font-family:var(--mono);font-size:12px;text-align:center;transition:transform .15s;color:var(--dim)}
.idx-row[open] .idx-chev{transform:rotate(90deg)}
.idx-row.urg .idx-chev{color:var(--bad)}
.idx-row.ven .idx-chev{color:var(--acink)}
.idx-body{padding:0 22px 20px 70px}
.idx-pk,.idx-ck{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.idx-pk{margin-bottom:9px}
.idx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.idx-chip{font-size:var(--fs-sub);color:var(--ink);background:var(--card);border:1px solid var(--bd2);border-radius:7px;padding:5px 11px}
.idx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:11px;overflow:hidden}
.idx-cell{background:var(--card);padding:13px 15px}
.idx-ck{margin-bottom:7px}
.idx-row.urg .idx-ck{color:var(--bad)}
.idx-row.ven .idx-ck{color:var(--acink)}
.idx-cv{font-size:var(--fs-sub);line-height:1.45;color:var(--sec)}
.idx-cv b{color:var(--ink);font-weight:700}
@media(max-width:620px){
  .idx-sum{grid-template-columns:26px 1fr 22px;gap:8px 11px}
  .idx-meter{grid-column:2;flex-direction:row;align-items:center;gap:9px;margin-top:4px}
  .idx-chev{grid-column:3;align-self:center}
  .idx-body{padding-left:22px}
}

/* ============================================================================
   PAGINA DE NICHO — piel GENTE (render_nicho_gente): construida con los ELEMENTOS
   nativos de la pagina gente (gente-hero, kpis-g, panel, sec-h, mm-paso, cm-ev,
   ofx-d, mh, firma-gente), NO el molde inversor. Aca solo lo propio del nicho.
   ============================================================================ */
/* CTA de la fila del indice emprender hacia la pagina propia del nicho (pagina_gente) */
.idx-cta{display:inline-flex;align-items:center;gap:7px;margin-top:13px;padding:9px 15px;border-radius:9px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.02em;text-decoration:none;
  color:var(--on-ac);background:var(--ac);transition:.13s}
.idx-cta:hover{background:var(--acink)}

/* LA OTRA PUNTA inversa (nicho gente -> pagina de oficio relacionada; espejo del .of-rel de oficio.css) */
.ng-rel{margin:18px 0 26px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec);
  background:color-mix(in srgb,var(--teal) 6%,var(--card));border:1px solid var(--bd);
  border-radius:10px;padding:11px 15px}
.ng-rel-k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--teal);
  font-weight:600;margin-right:8px}
.ng-rel a{color:var(--teal);font-weight:600;text-decoration:none}
.ng-rel a:hover{text-decoration:underline}

/* veredicto en el hero (pill, mismo color-code que las cajas del split) */
.gh-ver{display:inline-flex;align-items:center;gap:9px;margin:2px 0 14px;padding:7px 14px;border-radius:22px;
  font-size:var(--fs-body);font-weight:700;border:1px solid}
.gh-ver.refuerza{color:var(--ver);background:#EAF5EE;border-color:rgba(27,122,78,.30)}
.gh-ver.presiona{color:var(--pro);background:#FBF3DF;border-color:rgba(143,100,0,.28)}

/* la norma que lo mueve — filas limpias dentro del panel */
.ng-norma{display:flex;align-items:flex-start;gap:13px;padding:14px 2px;border-top:1px solid var(--bd);text-decoration:none;transition:.13s}
.ng-norma:first-of-type{border-top:0}
.ng-norma:hover{background:var(--soft)}
.ng-norma-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ng-norma-tx b{font-size:15px;color:var(--ink);line-height:1.3}
.ng-norma-tx span{font-size:var(--fs-body-sm);color:var(--sec);line-height:1.5}
.ng-go{flex:0 0 auto;align-self:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--acink);white-space:nowrap}
@media(max-width:560px){.ng-go{display:none}}

/* quien ya esta — incumbentes con punto de color */
.ng-incs{display:flex;flex-direction:column;gap:16px}
.ng-inc-h{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:4px}
.ng-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--dim)}
.ng-dot.lead{background:var(--pro)}.ng-dot.gap{background:var(--teal)}
.ng-inc-n{font-size:15.5px;font-weight:800;color:var(--ink)}
.ng-share{font-family:var(--mono);font-size:11px;color:var(--dim)}
.ng-inc p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--sec)}

/* mapa de entrada: reusa la fila de definicion ofx-d, con el rotulo en acento */
.ng-mapa .ofx-d{grid-template-columns:130px 1fr}
.ng-mapa .ofx-dk{color:var(--acink)}
@media(max-width:560px){.ng-mapa .ofx-d{grid-template-columns:1fr;gap:3px}}

/* la linea 'seguir' del indicador (clickeable a la fuente) */
.ng-seguir{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--acink);text-decoration:none}
.ng-seguir:hover{text-decoration:underline}
.ng-mec{margin:13px 0 0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--sec)}
.ng-mec b{color:var(--ink);font-weight:700}

/* tile del motor: el titulo es link (el tile es <div>, sin anchor anidado) */
a.mh-titulo,a.mh-lnk{text-decoration:none;color:var(--ink);transition:.12s}
a.mh-lnk:hover{color:var(--acink)}

/* puntero a recurso con nombre (link_recurso: escuela/organismo) — el nombre ENTERO clickeable,
   flecha adentro; mismo lenguaje que a.mh-lnk (tinta que avisa al hover) */
a.rsrc{text-decoration:none;color:inherit;transition:.12s}
a.rsrc:hover{color:var(--acink)}
.rsrc-f{color:var(--acink);font-family:var(--mono);font-size:var(--fs-micro)}
.mh-cifra{text-decoration:none}

/* grafico de barras comparativas (gente): 'por que aca / cuanto deja' de un vistazo */
.gcb{display:flex;flex-direction:column;gap:14px}
.gcb-row{display:grid;grid-template-columns:120px 1fr auto;gap:8px 14px;align-items:center}
.gcb-lbl{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;color:var(--sec);text-align:right}
.gcb-track{height:22px;background:var(--soft);border:1px solid var(--bd2);border-radius:7px;overflow:hidden}
.gcb-fill{height:100%;background:#CDBE9E;border-radius:6px 3px 3px 6px}
.gcb-fill.hi{background:var(--ac)}
.gcb-v{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-body);font-weight:700;color:var(--ink);white-space:nowrap}
.gcb-sub{font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;color:var(--acink)}
/* sub de barra no-destacada: DEBAJO del track (col 2), no en la celda del valor — si engorda la
   columna auto, cada fila queda con track de distinto largo y las barras pierden la base común (L135) */
.gcb-under{grid-column:2;font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;color:var(--acink);margin-top:-4px}
.gcb-nota{margin:15px 0 0;padding-top:12px;border-top:1px solid var(--bd);font-size:var(--fs-micro);line-height:1.5;color:var(--dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:560px){.gcb-row{grid-template-columns:1fr auto;gap:5px 10px}.gcb-lbl{grid-column:1;text-align:left}.gcb-track{grid-column:1/-1;order:3}.gcb-under{grid-column:1/-1;order:4;margin-top:0}}

/* ¿qué pongo? chips de ejemplos concretos, dentro del bloque del hueco */
.ng-ejemplos{margin:16px 0}  /* margen propio AMBOS lados (L199): sin top quedaba pegado a .ng-huecos */
.ng-ejemplos .idx-chips{margin-bottom:0}
/* motor emprender: link 'ver todos los proyectos' */
.ng-vermas{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;color:var(--acink);text-decoration:none}
.ng-vermas:hover{text-decoration:underline}

/* ============================================================================
   PAGINA DE NICHO GENTE v2 (adaptacion del diseño Claude Design, 2026-07-01):
   hero-colision, desbalance, antes->ahora, cada-proyecto-agranda-el-hueco,
   competis-con-medidor, momento-con-SVG, de-donde-sacamos-3-card. Solo tokens.
   Azul = demanda/lo-que-entra; teal = positivo/oferta-tuya; --gap = tension/hueco.
   ============================================================================ */

/* --- #1 hero: caja-colision (lo que entra vs lo que hay para atenderlo) --- */
.ng-col{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin:4px 0 0}
.ng-col-box{border-radius:14px;padding:20px 22px;border:1px solid;display:flex;flex-direction:column}
.ng-col-box.entra{flex:5 1 300px;background:var(--ac-soft);border-color:rgba(var(--ac-rgb),.28)}
.ng-col-box.hay{flex:3 1 210px;background:var(--gap-soft);border-color:var(--gap-bd)}
.ng-col-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.ng-col-box.entra .ng-col-k{color:var(--acink)}
.ng-col-box.hay .ng-col-k{color:var(--gap)}
.ng-col-v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:clamp(30px,5vw,42px);font-weight:600;line-height:1}
.ng-col-box.entra .ng-col-v{color:var(--acink)}
.ng-col-box.hay .ng-col-v{color:var(--gap)}
.ng-col-s{font-size:var(--fs-body);line-height:1.45;color:var(--sec);margin-top:9px}
.ng-col-s .sello{margin-left:0}
.ng-col-lnk{margin-top:auto;padding-top:11px;font-family:var(--mono);font-size:11px;color:var(--acink);text-decoration:none}
.ng-col-lnk:hover{text-decoration:underline}
.ng-col-vs{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ng-col-vs span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
@media(max-width:560px){.ng-col-vs{display:none}}

/* tira de KPIs durables ADENTRO del hero (borde superior) */
.ng-herostats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 26px;margin-top:22px;padding-top:20px;border-top:1px solid var(--bd)}
.ng-hs-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.ng-hs-v{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:26px;font-weight:600;line-height:1;color:var(--teal)}
.ng-hs.acc .ng-hs-v{color:var(--acink)}
.ng-hs-un{font-size:var(--fs-sub);font-weight:500;color:var(--dim)}
.ng-hs-u{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-sub);line-height:1.45;color:var(--sec);margin-top:8px}

/* --- remate: caja de cierre de seccion. solido verde = hook fuerte; soft = con sello; amber = ilustrativo --- */
.ng-remate{background:var(--teal);color:#fff;border-radius:12px;padding:16px 20px;font-size:15.5px;line-height:1.5;margin-top:18px}
.ng-remate b{font-weight:800;color:#fff}
.ng-remate.soft{background:rgba(12,122,109,.08);border:1px solid rgba(12,122,109,.22);color:var(--sec)}
.ng-remate.soft b{color:var(--teal)}
.ng-remate.soft .sello{margin-left:0}
.ng-remate.amber{background:var(--soft);border:1px solid var(--bd2);color:var(--sec)}
.ng-remate.amber b{color:var(--ink)}

/* --- #2 el desbalance: barras Demanda (100%) vs Oferta formal (baja) --- */
.ng-db{display:flex;flex-direction:column;gap:12px;margin:0}
.ng-db-row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.ng-db-l{font-family:var(--mono);font-size:var(--fs-micro);color:var(--sec);text-align:right}
.ng-db-t{height:26px;background:var(--soft);border:1px solid var(--bd2);border-radius:7px;overflow:hidden}
.ng-db-t i{display:block;height:100%;border-radius:6px}
.ng-db-t i.dem{background:linear-gradient(90deg,var(--ac),var(--acink))}
.ng-db-t i.ofe{background:var(--gap)}
.ng-cap{margin:12px 0 0;display:flex;justify-content:flex-end}
.ng-cap:empty{display:none}
@media(max-width:560px){.ng-db-row{grid-template-columns:82px 1fr;gap:10px}}

/* --- #3 por que aca se gasta mas: etiqueta ADENTRO de la barra destacada --- */
.gcb-track{height:30px}
.gcb-fill{border-radius:7px 3px 3px 7px}
.gcb-fill.hi{display:flex;align-items:center;justify-content:flex-end;padding-right:9px}
.gcb-inl{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--acink);background:rgba(255,255,255,.93);border-radius:5px;padding:2px 8px;white-space:nowrap}

/* --- #4 ¿que cambio a tu favor? antes -> ahora --- */
.ng-cambio{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.ng-cb-col{flex:1 1 300px;border-radius:14px;padding:18px 20px;border:1px solid}
.ng-cb-col.antes{background:var(--gap-soft);border-color:var(--gap-bd)}
.ng-cb-col.ahora{background:rgba(12,122,109,.06);border-color:rgba(12,122,109,.22)}
.ng-cb-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.ng-cb-col.antes .ng-cb-k{color:var(--gap)}
.ng-cb-col.ahora .ng-cb-k{color:var(--teal)}
.ng-cb-row{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin-bottom:10px;font-size:var(--fs-body-lg);line-height:1.45;color:var(--sec)}
.ng-cb-row:last-child{margin-bottom:0}
.ng-cb-x{color:var(--gap);font-size:15px;font-weight:700;line-height:1.3;text-align:center}
.ng-cb-ck{width:18px;height:18px;border-radius:50%;background:rgba(12,122,109,.13);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-top:1px}
.ng-cb-ck svg{width:10px;height:10px}
.ng-cb-arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;color:var(--dim)}
@media(max-width:560px){.ng-cb-arrow{display:none}}
.ng-cb-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--bd)}
.ng-cb-foot>span{font-size:var(--fs-body);color:var(--sec);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ng-cb-foot b{color:var(--ink)}
.ng-cb-lnk{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--acink);text-decoration:none;white-space:nowrap}
.ng-cb-lnk:hover{text-decoration:underline}

/* --- #5 ¿de donde sale la plata? cards del motor (borde) --- */
.mh-grid.ng-cards{border-top:0;padding-top:0}
.mh.card{border:1px solid var(--bd);border-radius:12px;padding:16px 18px}

/* --- #6 cada proyecto agranda el hueco (ILUSTRATIVO, deriva de la cartera) --- */
.ng-grow-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px;font-size:var(--fs-micro);color:var(--sec)}
.ng-grow-legend .lg{display:inline-flex;align-items:center;gap:7px}
.ng-grow-legend .lg::before{content:"";width:11px;height:11px;border-radius:3px}
.ng-grow-legend .lg.dem::before{background:var(--teal)}
.ng-grow-legend .lg.cap::before{width:14px;height:0;border-radius:0;border-top:2px dashed var(--gap)}
.ng-grow{position:relative;height:236px;border-left:1px solid var(--bd2);border-bottom:1px solid var(--bd2);padding:0 6px;margin-bottom:4px}
.ng-grow-cap{position:absolute;left:0;right:0;bottom:15%;border-top:2px dashed var(--gap)}
.ng-grow-cap span{position:absolute;right:4px;top:-15px;font-family:var(--mono);font-size:10px;color:var(--gap)}
.ng-grow-hint{position:absolute;right:8px;top:6px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--teal)}
.ng-grow-bars{position:absolute;left:10px;right:10px;bottom:0;top:6px;display:flex;align-items:flex-end;gap:5%}
.ng-grow-bar{flex:1;background:linear-gradient(180deg,rgba(12,122,109,.72),var(--teal));border-radius:7px 7px 0 0;position:relative;min-height:8px}
.ng-grow-top{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--teal);white-space:nowrap}
.ng-grow-x{display:flex;gap:5%;padding:8px 10px 0;font-family:var(--mono);font-size:11px;color:var(--sec);text-align:center}
.ng-grow-x span{flex:1;min-width:0;overflow-wrap:break-word}
.ng-ilus{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--dim)}

/* --- #7 ¿contra quien competis? cards con medidor de amenaza --- */
.ng-lead{margin:0 0 16px;max-width:760px;font-size:16px;line-height:1.55;color:var(--sec)}
.ng-lead b{color:var(--ink);font-weight:700}
.ng-comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.ng-comp{border:1px solid var(--bd);border-radius:12px;padding:16px 18px}
.ng-comp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ng-comp-nm{font-size:16px;font-weight:800;color:var(--ink)}
.ng-comp-lvl{font-family:var(--mono);font-size:10.5px;font-weight:600;white-space:nowrap}
.ng-comp.alto .ng-comp-lvl{color:var(--gap)}
.ng-comp.medio .ng-comp-lvl{color:var(--pro)}
.ng-comp.bajo .ng-comp-lvl{color:var(--ver)}
.ng-comp-meter{display:flex;gap:5px;margin-bottom:11px}
.ng-comp-meter i{flex:1;height:7px;border-radius:3px;background:var(--bd2)}
.ng-comp.alto .ng-comp-meter i.on{background:var(--gap)}
.ng-comp.medio .ng-comp-meter i.on{background:var(--pro)}
.ng-comp.bajo .ng-comp-meter i.on{background:var(--ver)}
.ng-comp-n{font-size:var(--fs-body-sm);line-height:1.5;color:var(--sec)}

/* --- #8 ¿donde esta tu hueco? caja celeste + mapa con checks --- */
.ng-hueco-box{background:var(--ac-soft);border:1px solid rgba(var(--ac-rgb),.28);border-radius:14px;padding:18px 22px;margin-bottom:20px}
.ng-hueco-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acink);margin-bottom:9px}
.ng-hueco-box p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.ng-hueco-box b{font-weight:700}
.ng-mi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px 24px;padding-top:18px;margin-top:6px;border-top:1px solid var(--bd)}
.ng-mi{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.ng-mi-ck{width:22px;height:22px;border-radius:50%;background:rgba(12,122,109,.12);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-top:1px}
.ng-mi-ck svg{width:12px;height:12px}
.ng-mi-k{font-size:15px;font-weight:700;color:var(--ink);display:block}
.ng-mi-v{font-size:var(--fs-body);line-height:1.55;color:var(--sec);display:block;margin-top:2px}
.ng-mi-v b{color:var(--ink);font-weight:700}
.ng-reservado{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:start;background:rgba(12,122,109,.06);border:1px solid rgba(12,122,109,.22);border-radius:11px;padding:15px 18px;margin-top:18px}
.ng-res-k{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--teal)}
.ng-res-body p{font-size:var(--fs-body);line-height:1.6;color:var(--sec);margin:0 0 12px}
.ng-res-incl{margin:0 0 15px;padding:0;list-style:none;display:grid;gap:7px}
.ng-res-incl li{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink);padding-left:20px;position:relative}
.ng-res-incl li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}
.ng-res-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.02em;text-decoration:none;
  color:var(--on-ac);background:var(--ac);transition:.13s}
.ng-res-cta:hover{background:var(--acink)}
/* Los Cinco Huecos (diseno DesignSync, adaptado a tokens): frentes del nicho como tarjetas escaneables.
   La respaldada (.hi) resalta en verde con su cifra+sello; las demas quedan "Por dimensionar" (gris). */
.ng-huecos{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px;margin-top:2px}
.ng-hueco-c{border:1px solid var(--bd);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;min-height:148px;background:var(--card)}
.ng-hueco-c.hi{border-color:rgba(27,122,78,.34);background:rgba(27,122,78,.06)}
.ng-hueco-top{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;flex:1}
.ng-hueco-n{font-family:var(--mono);font-size:var(--fs-body);font-weight:600;color:var(--acink);background:var(--ac-soft);border-radius:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.ng-hueco-c.hi .ng-hueco-n{color:var(--ver);background:rgba(27,122,78,.13)}
.ng-hueco-t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.ng-hueco-d{font-size:var(--fs-body-sm);line-height:1.45;color:var(--sec);margin-top:3px}
.ng-hueco-tag{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.04em;color:var(--ver);background:rgba(27,122,78,.1);border:1px solid rgba(27,122,78,.28);border-radius:5px;padding:2px 7px;margin-left:7px;vertical-align:middle}
.ng-hueco-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--bd)}
.ng-hueco-tam{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ver)}
.ng-hueco-tam span{font-size:10px;color:var(--dim);margin-left:3px}
.ng-hueco-sll{margin-left:auto}
.ng-hueco-dim{display:inline-flex;align-items:center;gap:7px}
.ng-hueco-dim i{width:7px;height:7px;border-radius:50%;background:var(--dim);opacity:.5}
.ng-hueco-dim span{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--dim)}
.ng-huecos-nota{margin-top:14px;font-size:var(--fs-micro);line-height:1.5;color:var(--dim)}
@media(max-width:560px){.ng-mi-grid{grid-template-columns:1fr}.ng-reservado{grid-template-columns:1fr;gap:8px}}

/* --- #10 como se que es el momento v2: viz REAL (serie divergente desde eje 0 / hitos datados)
       + ventana + señal-a-seguir + vigilar. La curva ilustrativa murio (2026-07-05). --- */
.ng-mom-viz{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:2px}
.ng-mom-svg{flex:1 1 300px;min-width:260px}
.ng-mom-svg svg{display:block;width:100%;height:auto}
.ng-dv .ax{stroke:var(--bd);stroke-width:1}
.ng-dv .dv-a{fill:var(--teal)}
.ng-dv .dv-b{fill:var(--bd2)}
.ng-dv .dv-v{font-family:var(--mono);font-size:15px;font-weight:700;fill:var(--ink)}
.ng-dv .dv-l{font-size:11.5px;fill:var(--sec)}
.ng-hitos{display:flex;flex-direction:column;gap:14px;margin:4px 0 2px}
.ng-hito{display:flex;gap:12px;align-items:baseline}
.ng-hito-f{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--teal);flex:0 0 72px;white-space:nowrap}
.ng-hito-t{font-size:var(--fs-body-lg);color:var(--sec);line-height:1.5}
.ng-vent{margin-top:12px}
.ng-mirar{margin:12px 0 0;font-size:var(--fs-body-sm);line-height:1.55}
.ng-mirar-t{color:var(--sec)}
.ng-mirar .ng-seguir{display:inline;margin-top:0}
.ng-vigila{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--bd);font-size:var(--fs-body-sm);color:var(--sec);line-height:1.55}
.ng-vigila-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:6px}
.ng-mom-x{font-family:var(--mono);font-size:10px;color:var(--dim);text-align:right;margin-top:4px}
.ng-mom-mec{flex:1 1 240px;min-width:220px}
.ng-mom-mec .ng-mec{margin-top:0}
.ng-mom-mec .ng-seguir{margin-top:12px}

/* --- #11 ¿de donde sacamos esto? 3 tarjetas por grado de firmeza --- */
.ng-val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:6px}
.ng-val{border:1px solid var(--bd);border-radius:12px;padding:16px 18px}
.ng-val-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ng-val-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ng-val-k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ng-val-v{font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec)}
.ng-val-v b{color:var(--ink);font-weight:700}
.ng-val.ver{border-color:rgba(27,122,78,.32);background:rgba(27,122,78,.05)}
.ng-val.ver .ng-val-dot{background:var(--ver)}.ng-val.ver .ng-val-k{color:var(--ver)}
.ng-val.pro{border-color:rgba(143,100,0,.32);background:rgba(143,100,0,.05)}
.ng-val.pro .ng-val-dot{background:var(--pro)}.ng-val.pro .ng-val-k{color:var(--pro)}
.ng-val.est{border-color:rgba(109,79,196,.32);background:rgba(109,79,196,.06)}
.ng-val.est .ng-val-dot{background:var(--est)}.ng-val.est .ng-val-k{color:var(--est)}
.ng-val.tes{border-color:rgba(43,108,176,.32);background:rgba(43,108,176,.05)}
.ng-val.tes .ng-val-dot{background:var(--tes)}.ng-val.tes .ng-val-k{color:var(--tes)}