:root { --navy:#0B2545; --azul:#1B4DE4; --teal:#10C8A8; --linea:#e3ecf8; --gris:#5b6b85; --fondo:#f4f7fc; --amar:#b06a00; --rojo:#d6453c; }
* { box-sizing:border-box; }
.st-body { margin:0; font-family:Inter,system-ui,sans-serif; color:var(--navy); background:var(--fondo); line-height:1.55; }
h1,h2,h3,h4 { font-family:Sora,Inter,sans-serif; }
a { color:var(--azul); text-decoration:none; }

/* Cabecera */
.st-top { position:sticky; top:42px; z-index:30; display:flex; align-items:center; gap:1rem; background:linear-gradient(120deg,#0d2c52,var(--navy)); color:#fff; padding:.7rem 1.2rem; }
.st-brand { display:flex; align-items:center; gap:.6rem; color:#fff; }
.st-iso { width:36px; height:36px; border-radius:9px; background-image:linear-gradient(180deg,var(--azul),var(--teal)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; }
.st-marca { display:flex; flex-direction:column; line-height:1.1; }
.st-mark { font-family:Sora,sans-serif; font-weight:800; }
.st-by { font-size:.7rem; color:#aebdd2; }
.st-otros { margin-left:auto; color:#c9d7ec; font-size:.85rem; }
.st-descargo { background:#fff7e6; border-bottom:1px solid #f0e2bb; color:#6b5a1f; font-size:.8rem; padding:.5rem 1.2rem; }

/* Shell con sidebar izquierdo */
.st-shell { display:flex; align-items:flex-start; gap:0; max-width:1500px; margin:0 auto; }
/* Panel izquierdo congelado: alto de ventana, pegado bajo la cabecera y con scroll propio;
   así no se estira con el contenido (evita la columna azul infinita). */
.st-side { flex:0 0 236px; align-self:flex-start; background:linear-gradient(180deg,#0d2c52,var(--navy));
  position:sticky; top:102px; height:calc(100vh - 102px); overflow-y:auto; padding:1rem .6rem; }
.st-nav { display:flex; flex-direction:column; gap:.1rem; }
.st-side-g { color:#7f93b3; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:.7rem .6rem .2rem; }
.st-tab { display:block; text-align:left; color:#aebdd2; font-weight:600; font-size:.88rem; padding:.5rem .7rem; border-radius:9px; cursor:pointer; }
.st-tab:hover { background:rgba(255,255,255,.08); color:#fff; }
.st-tab.activa { color:#fff; background:rgba(16,200,168,.16); box-shadow:inset 3px 0 0 var(--teal); }
.st-main { flex:1 1 auto; max-width:1180px; padding:1.6rem 1.4rem 2rem; min-width:0; }
@media (max-width:900px){
  .st-shell { flex-direction:column; }
  .st-side { flex-basis:auto; width:100%; height:auto; min-height:0; overflow:visible; position:static; padding:.5rem; }
  .st-nav { flex-direction:row; flex-wrap:wrap; }
  .st-side-g { display:none; }
}

.st-sec { display:none; }
.st-sec.activa { display:block; animation:st-in .25s ease; }
@keyframes st-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Landing */
.st-hero { background:linear-gradient(125deg,#0d2c52,var(--navy)); color:#fff; border-radius:18px; padding:2rem 1.8rem; }
.st-hero h1 { margin:0 0 .6rem; font-size:2rem; line-height:1.15; }
.st-hero p { color:#c9d7ec; max-width:66ch; margin:0 0 1rem; }
.st-hero-cta { display:flex; gap:.6rem; flex-wrap:wrap; }
.st-btn { display:inline-block; background-image:linear-gradient(180deg,var(--azul),var(--teal)); color:#fff; border:0; border-radius:10px; padding:.6rem 1.2rem; font-weight:700; font-family:inherit; font-size:.92rem; cursor:pointer; }
.st-btn:hover { filter:brightness(1.05); }
.st-btn.sec { background:#fff; color:var(--navy); border:1px solid var(--linea); }
.st-btn.mini { padding:.4rem .8rem; font-size:.82rem; }
.st-lineas, .st-casos { margin-top:1.6rem; }
.st-lineas h2, .st-casos h2 { font-size:1.3rem; }
.st-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.st-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:820px){ .st-grid3,.st-grid2 { grid-template-columns:1fr; } }
.st-card { background:#fff; border:1px solid var(--linea); border-radius:14px; padding:1rem 1.1rem; }
.st-card h3 { margin:.2rem 0 .4rem; font-size:1.05rem; }
.st-card p { margin:0; color:var(--gris); font-size:.9rem; }
.st-n { display:inline-flex; width:28px; height:28px; border-radius:50%; background-image:linear-gradient(180deg,var(--azul),var(--teal)); color:#fff; font-weight:800; align-items:center; justify-content:center; font-size:.85rem; }
.st-caso { display:block; background:#fff; border:1px solid var(--linea); border-radius:12px; padding:.8rem 1rem; font-weight:600; }
.st-caso:hover { border-color:var(--azul); }
.st-cred { color:var(--gris); font-size:.86rem; margin-top:.8rem; }

/* ===== Portada llamativa: héroe con autopista ===== */
.st-hero2 { display:grid; grid-template-columns:1.1fr .9fr; gap:1.4rem; align-items:center; overflow:hidden; position:relative; }
.st-eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; color:#8ee7d3; background:rgba(16,200,168,.14); border:1px solid rgba(16,200,168,.3); border-radius:999px; padding:.25rem .7rem; margin-bottom:.7rem; }
.st-hero-art { min-width:0; }
.st-mark { width:100%; height:auto; max-width:420px; margin:0 auto; display:block;
  background:linear-gradient(160deg,#0d2c52,var(--navy)); border-radius:16px; box-shadow:0 10px 30px rgba(4,16,38,.35); padding:.5rem; }
@media (max-width:820px){ .st-hero2 { grid-template-columns:1fr; } .st-hero-art { order:-1; } }
/* animaciones del emblema: anillo que gira y nodos que laten */
.st-mark-ring { transform-origin:200px 180px; animation:st-spin 26s linear infinite; }
@keyframes st-spin { to { transform:rotate(360deg); } }
.st-mark-nodes { transform-origin:200px 180px; animation:st-breathe 4s ease-in-out infinite; }
@keyframes st-breathe { 0%,100% { opacity:.85; } 50% { opacity:1; } }

/* ===== Franja de cifras ===== */
.st-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:14px; overflow:hidden; margin-top:1.4rem; }
.st-stat { background:#fff; padding:1.1rem 1rem; text-align:center; }
.st-stat-n { display:block; font-family:Sora,sans-serif; font-weight:800; font-size:2.1rem; line-height:1; background-image:linear-gradient(180deg,var(--azul),var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.st-stat-txt { font-size:1.5rem; }
.st-stat-k { display:block; color:var(--gris); font-size:.8rem; margin-top:.45rem; }
@media (max-width:820px){ .st-stats { grid-template-columns:1fr 1fr; } }

/* ===== Tarjetas con icono ===== */
.st-card-ico { transition:transform .18s ease, box-shadow .18s ease; }
.st-card-ico:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(11,37,69,.12); }
.st-ico { display:inline-flex; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; color:#fff; margin-bottom:.5rem; }
.st-ico svg { width:24px; height:24px; }
.st-ico-azul { background-image:linear-gradient(180deg,#1B4DE4,#3a6bff); }
.st-ico-teal { background-image:linear-gradient(180deg,#0eb897,#10C8A8); }
.st-ico-violeta { background-image:linear-gradient(180deg,#6d4bff,#7c5cff); }

/* ===== Banda oscura + teaser ===== */
.st-band { background:linear-gradient(125deg,#0d2c52,var(--navy)); color:#fff; border-radius:18px; padding:1.6rem 1.6rem; margin-top:1.6rem; }
.st-band h2 { color:#fff; }
.st-band p { color:#c9d7ec; }
.st-teaser { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:center; }
.st-teaser-txt h2 { margin:.1rem 0 .5rem; font-size:1.5rem; }
.st-teaser-art { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.4rem; }
@media (max-width:820px){ .st-teaser { grid-template-columns:1fr; } }

/* ===== Método como carretera ===== */
.st-road3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; position:relative; }
@media (max-width:820px){ .st-road3 { grid-template-columns:1fr; } }
.st-step { position:relative; transition:transform .18s ease, box-shadow .18s ease; border-top:3px solid transparent; }
.st-step:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(11,37,69,.12); }
.st-step:nth-child(1) { border-top-color:#1B4DE4; }
.st-step:nth-child(2) { border-top-color:#10C8A8; }
.st-step:nth-child(3) { border-top-color:#7c5cff; }
.st-step-n { position:absolute; top:.7rem; right:1rem; font-family:Sora,sans-serif; font-weight:800; font-size:1.7rem; color:#e3ecf8; line-height:1; }

/* Cohesión visual en secciones con tarjetas generadas por JS */
#st-formacion .st-card { border-left:3px solid var(--teal); transition:transform .18s ease, box-shadow .18s ease; }
#st-formacion .st-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(11,37,69,.1); }
#st-glosario .st-card { border-left:3px solid var(--azul); }

/* ===== Reveal al hacer scroll ===== */
.st-reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.st-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .st-mark-ring,.st-mark-nodes { animation:none; }
  .st-reveal { opacity:1; transform:none; transition:none; }
}

/* Cabeceras de sección y formularios */
.st-head h1 { margin:0 0 .3rem; font-size:1.6rem; }
.sub, .st-min { color:var(--gris); font-size:.86rem; }
.st-min { margin:.5rem 0; }
.st-sector, .st-actions { margin:.8rem 0; }
.st-sector select, .st-preg select, .st-ref-pick select, .st-ref-in input, .st-caso-in input, .st-sim, select, input[type=number], input[type=text] { font-family:inherit; }
.st-dim { background:#fff; border:1px solid var(--linea); border-radius:12px; padding:.8rem 1rem; margin:.7rem 0; }
.st-dim h3 { margin:.1rem 0 .5rem; font-size:1rem; }
.st-preg { margin:.5rem 0; }
.st-preg p { margin:0 0 .3rem; font-size:.9rem; font-weight:600; }
.st-preg select, .st-sector select, .st-ref-pick select { width:100%; max-width:640px; border:1px solid var(--linea); border-radius:9px; padding:.45rem .6rem; font-size:.88rem; }

/* Bloques de resultado y tarjetas */
.st-res { background:#fff; border:1px solid var(--linea); border-radius:14px; padding:1rem 1.1rem; margin-top:1rem; }
.st-panel { background:#fff; border:1px solid var(--linea); border-radius:14px; padding:1rem 1.1rem; margin-top:1rem; }
.st-panel > h3:first-child { margin-top:.1rem; }
.st-h { margin:1rem 0 .4rem; font-size:1.05rem; }
.st-carril { background:linear-gradient(120deg,#eef4ff,#eafaf6); border:1px solid #dbe7fb; border-left:3px solid var(--teal); border-radius:12px; padding:.9rem 1.1rem; }
.st-carril-n { display:inline-block; background:var(--navy); color:#fff; border-radius:999px; padding:.1rem .6rem; font-size:.75rem; font-weight:800; margin-right:.5rem; }
.st-2col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
@media (max-width:820px){ .st-2col { grid-template-columns:1fr; } }
.st-chart { width:100%; min-height:40px; }

/* Escalera de carriles (idea 3) */
.st-ladder { display:flex; flex-direction:column-reverse; gap:.3rem; margin:.4rem 0; }
.st-rung { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--linea); border-radius:10px; background:var(--fondo); }
.st-rung.act { background:linear-gradient(120deg,#eef4ff,#eafaf6); border-color:var(--teal); box-shadow:inset 3px 0 0 var(--teal); }
.st-rung.done { opacity:.75; }
.st-rung .lv { flex:0 0 34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; color:#fff; background:linear-gradient(180deg,#7f93b3,#5b6b85); }
.st-rung.act .lv { background:linear-gradient(180deg,var(--azul),var(--teal)); }
.st-rung .tt { font-weight:700; font-size:.92rem; }
.st-rung .dd { color:var(--gris); font-size:.8rem; }
.st-rung .you { margin-left:auto; background:var(--navy); color:#fff; font-size:.68rem; font-weight:800; border-radius:999px; padding:.1rem .5rem; }

/* Tramo/benchmark */
.st-tier { display:inline-block; border-radius:999px; padding:.12rem .7rem; font-size:.76rem; font-weight:800; }
.st-tier.pionero { background:#e6f7f1; color:#0a7c54; }
.st-tier.retador { background:#eaf0ff; color:#1B4DE4; }
.st-tier.seguidor { background:#fff3df; color:#8a5a00; }
.st-tier.rezagado { background:#fdecec; color:#8a2b23; }

/* KPIs y barras */
.st-kpis { display:flex; gap:.8rem; flex-wrap:wrap; margin:.6rem 0; }
.st-kpi { background:var(--fondo); border:1px solid var(--linea); border-radius:11px; padding:.6rem .9rem; min-width:150px; flex:1 1 150px; }
.st-kpi .v { display:block; font-size:1.15rem; font-weight:800; color:var(--navy); }
.st-kpi .k { font-size:.76rem; color:var(--gris); }
.st-bar-row { display:grid; grid-template-columns:1fr 2fr auto; gap:.6rem; align-items:center; margin:.3rem 0; font-size:.85rem; }
.st-bar { background:#eef2f8; border-radius:6px; height:9px; overflow:hidden; }
.st-bar i { display:block; height:100%; background-image:linear-gradient(90deg,var(--azul),var(--teal)); }

/* Hoja de ruta / timeline (idea 5) */
.st-fases { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
@media (max-width:820px){ .st-fases { grid-template-columns:1fr; } }
.st-fase { background:var(--fondo); border:1px solid var(--linea); border-radius:10px; padding:.6rem .8rem; position:relative; }
.st-fase h4 { margin:0 0 .3rem; color:var(--azul); display:flex; align-items:center; gap:.4rem; }
.st-fase h4 .st-step { flex:0 0 22px; height:22px; border-radius:50%; background:linear-gradient(180deg,var(--azul),var(--teal)); color:#fff; font-size:.72rem; display:flex; align-items:center; justify-content:center; font-weight:800; }
.st-fase ul { margin:0; padding-left:1.1rem; font-size:.85rem; }
.st-nota { background:linear-gradient(180deg,#f7fbff,#eef5ff); border:1px solid #dbe7fb; border-radius:11px; padding:.7rem .9rem; margin:.6rem 0; font-size:.92rem; line-height:1.55; }

/* Gobernanza / prácticas */
.st-gov-row, .st-prac-row { display:grid; grid-template-columns:1.4fr 2fr auto; gap:.6rem; align-items:center; margin:.3rem 0; font-size:.85rem; }
.st-chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; border-radius:999px; padding:.1rem .55rem; }
.st-chip.ok { background:#e6f7f1; color:#0a7c54; }
.st-chip.no { background:#fdecec; color:#8a2b23; }
.st-fasechip { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--gris); background:#eef2f8; border-radius:6px; padding:.05rem .4rem; }

/* Modelo operativo */
.st-op { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
@media (max-width:820px){ .st-op { grid-template-columns:1fr; } }
.st-op-c { border:1px solid var(--linea); border-radius:11px; padding:.7rem .8rem; background:var(--fondo); }
.st-op-c.sel { background:linear-gradient(120deg,#eef4ff,#eafaf6); border-color:var(--teal); box-shadow:inset 0 -3px 0 var(--teal); }
.st-op-c h4 { margin:.1rem 0 .3rem; font-size:.95rem; }
.st-op-c p { margin:.1rem 0; font-size:.82rem; color:var(--gris); }
.st-op-c .rec { font-size:.68rem; font-weight:800; color:#0a7c54; text-transform:uppercase; letter-spacing:.03em; }

/* Simulador / caso */
.st-sim { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.5rem 0; }
.st-chk { font-size:.85rem; }
.st-caso-in, .st-ref-in { display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; }
.st-caso-in label, .st-ref-in label { display:flex; flex-direction:column; gap:.2rem; font-size:.8rem; font-weight:600; }
.st-caso-in input, .st-ref-in input { border:1px solid var(--linea); border-radius:9px; padding:.45rem .6rem; font-size:.88rem; }

/* Concepto (estilo Brújula FIC) */
.st-aca { background:#f7faff; border:1px solid #dbe7fb; border-radius:11px; padding:.2rem .9rem; margin:.7rem 0; }
.st-aca > summary { cursor:pointer; font-weight:700; font-size:.9rem; color:var(--azul); padding:.5rem 0; list-style:none; }
.st-aca > summary::-webkit-details-marker { display:none; }
.st-aca > summary::before { content:"Concepto · "; color:var(--gris); font-weight:800; }
.st-aca[open] > summary { border-bottom:1px solid #dbe7fb; margin-bottom:.5rem; }
.st-aca p { margin:.35rem 0; font-size:.86rem; }
.st-aca .st-form { background:#fff; border:1px solid var(--linea); border-radius:8px; padding:.4rem .6rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; color:var(--navy); }
.st-aca .st-ref { color:var(--gris); font-size:.78rem; }

/* Vigencia / supuestos */
.st-vig { background:#eef4ff; border:1px solid #dbe7fb; border-radius:10px; padding:.6rem .9rem; font-size:.86rem; margin:.6rem 0; }
.st-vig.susp { background:#fdecec; border-color:#f3c0bb; color:#8a2b23; }
.st-ref-in { margin:.6rem 0; }
.st-ref-in > div { flex:1 1 260px; }
.st-ref-in h4 { margin:.2rem 0 .4rem; }
.st-sup { margin:.3rem 0; padding-left:1.1rem; font-size:.85rem; }
.st-ref-pick { margin:.4rem 0; }

/* Comparar reevaluación (idea 10) */
.st-cmp { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:.4rem 0; }
.st-cmp-tabla { width:100%; border-collapse:collapse; font-size:.86rem; margin-top:.5rem; }
.st-cmp-tabla th, .st-cmp-tabla td { padding:.4rem .5rem; border-bottom:1px solid var(--linea); text-align:left; }
.st-cmp-tabla td.num { text-align:right; font-variant-numeric:tabular-nums; }
.st-up { color:#0a7c54; font-weight:700; } .st-down { color:#8a2b23; font-weight:700; }

/* Glosario */
.st-glos { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:820px){ .st-glos { grid-template-columns:1fr; } }
.st-glos dt { font-weight:800; font-size:.92rem; }
.st-glos dd { margin:.1rem 0 0; color:var(--gris); font-size:.86rem; }
.st-glos .st-card { margin:0; }

.st-foot { border-top:1px solid var(--linea); padding:1.2rem; text-align:center; margin-top:1.4rem; }
.st-foot p { color:var(--gris); font-size:.8rem; max-width:80ch; margin:0 auto; }

/* Impresión: reporte descargable (idea 8) */
/* Cotización / propuesta a la medida (4º servicio) */
.st-side .st-tab-cta { color:#8ee7d3; box-shadow:inset 3px 0 0 var(--teal); }
.st-cotiza .st-fld { display:flex; flex-direction:column; gap:.3rem; margin:.55rem 0; }
.st-cotiza .st-fld > span { font-size:.85rem; font-weight:600; }
.st-cotiza .st-fld > span b { color:var(--rojo,#d6453c); }
.st-cotiza input, .st-cotiza textarea { font-family:inherit; border:1px solid var(--linea); border-radius:9px; padding:.55rem .7rem; font-size:.9rem; width:100%; color:var(--navy); }
.st-cotiza input:focus, .st-cotiza textarea:focus { outline:2px solid var(--azul); outline-offset:1px; }
.st-cotiza textarea { resize:vertical; }
.st-fld-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:560px){ .st-fld-row { grid-template-columns:1fr; } }
.st-chk-lg { display:flex; gap:.5rem; align-items:flex-start; font-size:.82rem; color:var(--gris); margin:.7rem 0; }
.st-chk-lg input { margin-top:.15rem; flex:none; }

/* Análisis avanzado colapsable (P3: organizar sin perder nada) */
.st-more { background:#fff; border:1px solid var(--linea); border-radius:14px; margin-top:1rem; padding:.1rem 1rem; }
.st-more > summary { cursor:pointer; font-family:Sora,sans-serif; font-weight:800; color:var(--azul); padding:.85rem .2rem; list-style:none; display:flex; align-items:center; gap:.6rem; }
.st-more > summary::-webkit-details-marker { display:none; }
.st-more > summary::before { content:"+"; display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border:1.5px solid var(--azul); border-radius:6px; font-weight:800; line-height:1; }
.st-more[open] > summary::before { content:"\2013"; }
.st-more[open] > summary { border-bottom:1px solid var(--linea); margin-bottom:.6rem; }

@media print {
  .st-top, .st-descargo, .st-side, .st-otros, .st-actions, .st-sim, .st-cmp, .st-hero-cta, .st-noprint, .st-aca { display:none !important; }
  .st-more > summary { display:none !important; }
  .st-shell { display:block; }
  .st-sec { display:none !important; }
  .st-sec.activa { display:block !important; }
  .st-body { background:#fff; }
  .st-main { max-width:100%; padding:0; }
  .st-res, .st-panel, .st-card { break-inside:avoid; box-shadow:none; }
}