/* =====================================================================
   SEMANA 06 · TALLER DE ANÁLISIS DE RIESGOS · v6 (una sola página)
   Hoja propia de semana-06.html y semana-06-documento.html (styles.css es la del sitio).

   REGLAS
   · No hay acordeones: pestañas, exploradores de lista + detalle, panel lateral.
     Única excepción, pedida por Juli: las referencias, en un <details> nativo al final
     (igual que en semana-04), que el navegador imprime abierto.
   · De body.s6-js cuelgan todos los estados ocultos de partida: sin JS se lee
     todo el contenido.
   · Nada fijo encima del texto: la navegación del taller es una barra pegada
     bajo la cabecera, en el flujo de la página.
   · La escala de tolerancia (5 grados) es un trabajo de ESTADO: cada grado va
     siempre con número y nombre. Paleta validada con la skill dataviz sobre
     #12161b (CVD 14,7 · visión normal 18,8 · contraste ≥ 3:1). El amarillo
     vive solo dentro de la escala de riesgo.
   · La luz que sigue al cursor va DETRÁS del contenido (z-index -1 dentro de
     cada tarjeta, o el halo fijo bajo <main>): nunca encima del texto.
   · El documento (semana-06-documento.html) es la única pieza clara: sus
     tokens se redefinen dentro de .s6-doc, no en toda la página.
   ===================================================================== */

.s6 {
  --g1: #2eb87e;   /* tolerable   */
  --g2: #4a7ff5;   /* bajo        */
  --g3: #f2d04e;   /* moderado    */
  --g4: #f0802a;   /* alto        */
  --g5: #c2255c;   /* intolerable */
  --panel: #0e1216;
  --panel-2: #121820;
  --line: rgba(255,255,255,.07);
  --wrap: 1320px;
  --sub-h: 54px;
  --top: calc(var(--nav-h) + var(--sub-h));
  --ease: cubic-bezier(.16,1,.3,1);
  --cian-2: #7fdcf7;
}
.s6 [data-g="1"] { --gc: var(--g1); --gt: #06140e; }
.s6 [data-g="2"] { --gc: var(--g2); --gt: #050b1c; }
.s6 [data-g="3"] { --gc: var(--g3); --gt: #1c1603; }
.s6 [data-g="4"] { --gc: var(--g4); --gt: #1f0c02; }
.s6 [data-g="5"] { --gc: var(--g5); --gt: #ffffff; }

.s6-main { position: relative; z-index: 1; }
.s6-main p { max-width: none; }
.s6-wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.s6-wrap-x { width: min(100% - 40px, 1440px); margin-inline: auto; }
.s6-mute { color: var(--text-faint); font-size: .84em; }
.s6 b, .s6 strong { color: var(--text); font-weight: 600; }
.s6 svg { flex: none; }
.s6 [hidden] { display: none !important; }
.s6 code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; color: var(--text); background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 5px; }
.s6-mt { margin-top: 14px; }

/* iconos de trazo (estilo lineal, 24 × 24) */
.s6-ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.16em; }
.s6-ic.is-fill { fill: currentColor; stroke: none; }

/* ---------- tipografía ---------- */
.s6 .s6-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.06; letter-spacing: -.025em; color: var(--text); margin: 0; }
.s6 .s6-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.12rem, 1rem + .5vw, 1.36rem); letter-spacing: -.01em; color: var(--text); margin: 44px 0 10px; }
.s6-p { color: var(--text-muted); line-height: 1.72; max-width: 78ch; margin: 0 0 14px; }
.s6-lead { color: var(--text-muted); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); line-height: 1.66; max-width: 72ch; margin: 14px 0 0; }
.s6-fuente { font-size: .78rem; color: var(--text-faint); line-height: 1.6; margin: 12px 0 0; }
.s6-eyebrow, .s6-cab-n { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.s6-cab-n .s6-ic { width: 16px; height: 16px; }
.s6-cab { margin-bottom: 26px; }

/* ---------- secciones ---------- */
.s6-sec { padding: clamp(56px, 7vw, 92px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top) + 8px); }
.s6-sec.is-tight { padding: clamp(18px, 2.4vw, 30px) 0 clamp(44px, 5vw, 68px); border-top: 0; }
.s6-sec.is-sin-borde { padding-top: 0; }
.s6-main [id] { scroll-margin-top: calc(var(--top) + 8px); }

/* ---------- botones ---------- */
.s6-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,.02); color: var(--text);
  border-radius: 12px; padding: 10px 16px; font-family: var(--font-display); font-size: .88rem; font-weight: 500;
  cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease), box-shadow .25s;
}
.s6-btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.s6-btn:hover { border-color: var(--text-faint); transform: translateY(-1px); }
.s6-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.s6-btn.is-pri { background: var(--accent); color: #041017; border-color: var(--accent); font-weight: 600; }
.s6-btn.is-pri:hover { box-shadow: 0 10px 30px -10px rgba(23,184,230,.7); }
.s6-btn.is-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.s6-btn.is-glass { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.s6-btn.is-glass:hover { background: rgba(255,255,255,.1); }
.s6-btn[disabled] { opacity: .35; cursor: default; transform: none; }
.s6-link { border: 0; background: none; padding: 0; color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.s6-link:hover { text-decoration-color: var(--accent); }

/* «Ver ficha» */
.s6-vf { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: rgba(23,184,230,.06); color: var(--accent); border-radius: 999px; padding: 5px 11px; font-family: var(--font-display); font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.s6-vf span { transition: transform .25s var(--ease); }
.s6-vf:hover, .s6-vf:focus-visible { background: rgba(23,184,230,.16); border-color: var(--accent); outline: none; }
.s6-vf:hover span { transform: translate(2px,-2px); }

/* ---------- insignias ---------- */
.s6-g {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .03em;
  color: var(--text); padding: 3px 9px 3px 3px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent);
  background: color-mix(in srgb, var(--gc) 14%, transparent);
}
.s6-g i { font-style: normal; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--gc); color: var(--gt); font-size: .7rem; }
.s6-leyenda { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.s6-flecha { color: var(--text-faint); margin: 0 5px; }
.s6-mov { display: inline-flex; align-items: center; flex-wrap: nowrap; }
.s6-tt { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; }
.s6-tt svg { width: 14px; height: 14px; }
.s6-ag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px 2px 6px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text); white-space: nowrap; }
.s6-ag svg { width: 12px; height: 12px; }
.s6-ag[data-ag="interno"] { border-color: rgba(157,140,240,.55); color: #c9bff8; }
.s6-ag[data-ag="externo"] { border-color: rgba(224,166,63,.55); color: #f0c77e; }
.s6-ag[data-ag="mixto"]   { border-color: rgba(23,184,230,.55); color: #8fdcf4; }

/* =====================================================================
   LUZ QUE SIGUE AL CURSOR
   · .s6-halo: un resplandor fijo bajo <main> que acompaña al cursor por toda la página.
   · .s6-luz: capa que el JS añade a cada tarjeta (z-index -1, detrás del
     contenido): un brillo interior suave y un borde que se enciende cerca del cursor.
   ===================================================================== */
.s6-halo { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(640px circle at var(--hx, 50%) var(--hy, 30%), rgba(23,184,230,.07), transparent 62%); }
body.s6-luz-on .s6-halo { opacity: 1; }
.s6-glow { isolation: isolate; }
.s6-luz { position: absolute; inset: -1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(23,184,230,.1), transparent 58%); }
.s6-luz::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(127,220,247,.9), rgba(23,184,230,.28) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.s6-glow:hover > .s6-luz, .s6-glow:focus-visible > .s6-luz { opacity: 1; }

/* ---------- entradas por scroll (solo con JS) ---------- */
body.s6-js .s6-anim { opacity: 0; transform: translateY(16px); }
body.s6-js .s6-anim.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@keyframes s6entra { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.s6-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g1); flex: none; box-shadow: 0 0 0 0 rgba(46,184,126,.6); animation: s6live 2.2s ease-out infinite; }
@keyframes s6live { 0% { box-shadow: 0 0 0 0 rgba(46,184,126,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(46,184,126,0); } }

/* =====================================================================
   NAVEGACIÓN DEL TALLER · barra pegada bajo la cabecera, en el flujo
   ===================================================================== */
.s6-sub {
  position: sticky; top: var(--nav-h); z-index: 45; margin-top: var(--nav-h);
  height: var(--sub-h); background: rgba(9,12,15,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.s6-sub-in { height: 100%; width: min(100% - 24px, 1440px); margin-inline: auto; display: flex; align-items: center; gap: 14px; }
.s6-sub .s6-sub-home { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.1; text-decoration: none; padding: 4px 14px 4px 0; border-radius: 0; border-right: 1px solid var(--border); flex: none; background: none; }
.s6-sub-home b { font-family: var(--font-display); font-size: .84rem; color: var(--text); }
.s6-sub-home span { font-size: .68rem; color: var(--text-faint); }
.s6-sub ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.s6-sub-doc { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); text-decoration: none; font-family: var(--font-display); font-size: .78rem; white-space: nowrap; transition: border-color .2s, color .2s; }
.s6-sub-doc svg { width: 14px; height: 14px; }
.s6-sub-doc:hover { border-color: var(--accent); color: var(--text); }
.s6-sub-volver { margin-left: auto; flex: none; }
.s6-sub ol::-webkit-scrollbar { display: none; }
/* si la barra no cabe entera, sus bordes se desvanecen para indicar que se desliza */
.s6-sub ol.is-desliza { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); }
/* el botón de comentarios del sitio queda como icono para no tapar contenido; el texto aparece al señalarlo */
.s6 .fab-comment { padding: 10px; gap: 0; }
.s6 .fab-comment span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s var(--ease), opacity .25s, margin .35s var(--ease); }
.s6 .fab-comment:hover span, .s6 .fab-comment:focus-visible span { max-width: 120px; opacity: 1; margin-left: 8px; }
.s6-sub li { flex: none; }
.s6-sub a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; color: var(--text-muted); text-decoration: none; font-family: var(--font-display); font-size: .8rem; white-space: nowrap; transition: color .2s, background .2s; }
.s6-sub a .s6-ic { width: 15px; height: 15px; opacity: .8; }
.s6-sub a i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; border: 1px solid var(--border-strong); color: var(--text); }
.s6-sub a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.s6-sub a[aria-current="true"] { color: #041017; background: var(--accent); font-weight: 600; }
.s6-sub a[aria-current="true"] i { border-color: rgba(4,16,23,.35); color: #041017; }
.s6-sub a[aria-current="true"] .s6-ic { opacity: 1; }
/* barra de progreso de lectura, pegada al borde inferior de la navegación */
.s6-sub-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.s6-sub-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--cian-2)); transform-origin: left center; transform: scaleX(var(--prog, 0)); box-shadow: 0 0 10px rgba(23,184,230,.6); }

/* =====================================================================
   HERO · imagen a sangre con profundidad, luz del cursor y mapa en vivo
   ===================================================================== */
.s6-hub { position: relative; isolation: isolate; overflow: hidden; min-height: min(calc(100vh - var(--top)), 940px); display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 72px) 0 clamp(26px, 3vw, 40px); }
.s6-hub-fondo { position: absolute; top: -4%; bottom: -4%; right: -3%; left: 26%; z-index: -4;
  transform: translate3d(calc(var(--hx0, 0) * -16px), calc(var(--hy0, 0) * -10px + var(--hs, 0px)), 0); transition: transform .9s var(--ease); }
.s6-hub-fondo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; filter: saturate(1.1) contrast(1.05); animation: s6kb 26s ease-in-out infinite alternate; }
@keyframes s6kb { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
.s6-hub-velo { position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 20%, rgba(9,12,15,.9) 36%, rgba(9,12,15,.45) 58%, rgba(9,12,15,.12) 80%),
              linear-gradient(0deg, var(--bg) 0%, rgba(9,12,15,.6) 18%, transparent 42%),
              linear-gradient(180deg, rgba(9,12,15,.55), transparent 22%); }
.s6-hub-rej { position: absolute; inset: 0; z-index: -2; opacity: .35; pointer-events: none; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(70% 70% at 22% 40%, #000 10%, transparent 70%); mask-image: radial-gradient(70% 70% at 22% 40%, #000 10%, transparent 70%); }
.s6-hub-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .6s;
  background: radial-gradient(520px circle at var(--lx, 70%) var(--ly, 40%), rgba(23,184,230,.26), rgba(23,184,230,.06) 40%, transparent 65%); }
.s6-hub.is-luz .s6-hub-luz { opacity: 1; }
.s6-hub-in { position: relative; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.s6-hub-eye { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,14,18,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.s6 .s6-hub h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5.3rem); line-height: .98; letter-spacing: -.045em; margin: 0; color: var(--text); text-shadow: 0 10px 40px rgba(0,0,0,.5); }
.s6-l { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.s6-l > span { display: block; }
body.s6-js .s6-l > span { transform: translateY(108%); animation: s6linea 1.1s var(--ease) forwards; }
body.s6-js .s6-l:nth-child(2) > span { animation-delay: .1s; }
body.s6-js .s6-l:nth-child(3) > span { animation-delay: .2s; }
@keyframes s6linea { to { transform: none; } }
.s6-l-acc > span { background: linear-gradient(100deg, var(--cian-2), var(--accent) 35%, #4a7ff5 60%, var(--cian-2) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
body.s6-js .s6-l-acc > span { animation: s6linea 1.1s var(--ease) .2s forwards, s6brillo 7s ease-in-out 1.4s infinite; }
@keyframes s6brillo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.s6-hub .s6-lead { max-width: 58ch; color: #c3ccd4; }
.s6-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.s6-equipo { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--text-faint); margin: 22px 0 0; line-height: 1.6; }
.s6-equipo .s6-ic { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }

/* tarjetas flotantes (HUD): se desplazan con el cursor a distintas profundidades */
.s6-hud { position: relative; justify-self: end; width: min(100%, 430px); margin-right: clamp(0px, 2vw, 28px); }
.s6-hud-card { background: rgba(10,14,18,.6); border: 1px solid rgba(255,255,255,.13); border-radius: 20px; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translate3d(calc(var(--hx0, 0) * var(--prof, 10) * 1px), calc(var(--hy0, 0) * var(--prof, 10) * 1px), 0); transition: transform .7s var(--ease); }
.s6-hud-card.is-map { padding: 16px 16px 12px; }
.s6-hud-k { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.s6-hud-est { margin-left: auto; position: relative; display: grid; text-align: right; letter-spacing: .06em; color: var(--accent); }
.s6-hud-est span { grid-area: 1 / 1; }
.s6-hud-est .is-b { opacity: 0; }
body.s6-js .s6-hud-est .is-a { animation: s6hudA 7s var(--ease) infinite; }
body.s6-js .s6-hud-est .is-b { animation: s6hudB 7s var(--ease) infinite; }
@keyframes s6hudA { 0%, 36% { opacity: 1; } 44%, 88% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes s6hudB { 0%, 36% { opacity: 0; } 44%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.s6-hud-mx { position: relative; aspect-ratio: 1; }
.s6-hud-celdas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 4px; }
.s6-hud-celdas span { border-radius: 8px; background: color-mix(in srgb, var(--gc) 26%, rgba(10,14,18,.6)); border: 1px solid color-mix(in srgb, var(--gc) 38%, transparent); }
.s6-hud-dot { position: absolute; left: var(--x1); top: var(--y1); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 2px rgba(8,11,14,.9), 0 0 16px color-mix(in srgb, var(--c1) 80%, transparent); }
body.s6-js .s6-hud-dot { left: var(--x0); top: var(--y0); background: var(--c0); animation: s6hud 7s var(--ease) infinite; animation-delay: var(--d); }
@keyframes s6hud {
  0%, 34%  { left: var(--x0); top: var(--y0); background: var(--c0); }
  48%, 86% { left: var(--x1); top: var(--y1); background: var(--c1); }
  100%     { left: var(--x0); top: var(--y0); background: var(--c0); }
}
.s6-hud-ejes { display: flex; justify-content: space-between; margin: 10px 2px 0; font-family: var(--font-display); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.s6-hud-card.is-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; z-index: 2; animation: s6flota 6s ease-in-out infinite; }
.s6-hud-card.is-chip .s6-ic { width: 22px; height: 22px; color: var(--accent); }
.s6-hud-card.is-chip.is-a { left: -42px; top: 16%; }
.s6-hud-card.is-chip.is-a .s6-ic { color: var(--g4); }
.s6-hud-card.is-chip.is-b { right: -22px; bottom: 16%; animation-delay: -3s; }
.s6-hud-card.is-chip.is-b .s6-ic { color: var(--g1); }
.s6-hud-card.is-chip span { display: flex; flex-direction: column; font-size: .72rem; color: var(--text-muted); line-height: 1.2; }
.s6-hud-card.is-chip b { font-family: var(--font-display); font-size: 1.2rem; }
@keyframes s6flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* cifras del hero */
.s6-hub-kpis { margin-top: clamp(26px, 3.4vw, 44px); }
.s6-hero-kpi { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.s6-hero-kpi > div { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "ic b" "ic s"; align-items: center; gap: 2px 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(10,14,18,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.s6-hk-ic { grid-area: ic; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(23,184,230,.12); color: var(--accent); }
.s6-hk-ic .s6-ic { width: 22px; height: 22px; }
.s6-hero-kpi > div > b { grid-area: b; display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1; letter-spacing: -.02em; }
.s6-hero-kpi b i { font-style: normal; color: var(--text-faint); margin: 0 .12em; font-weight: 500; }
.s6-hero-kpi > div > span:last-child { grid-area: s; display: block; font-size: .74rem; color: var(--text-faint); line-height: 1.35; }
.s6-hero-kpi > div.has-gauge { grid-template-areas: "ic s"; }
.s6-hero-kpi > div.has-gauge .s6-gauge { grid-area: ic; }
.s6 .s6-hero-delta { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--g1); line-height: 1; margin-bottom: 4px; }

/* flecha para bajar */
.s6-hub-baja {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  border: 1px solid var(--border-strong); color: var(--text-faint); background: rgba(9,12,15,.5);
  transition: color .2s, border-color .2s; animation: s6-baja 2.4s ease-in-out infinite;
}
.s6-hub-baja svg { width: 18px; height: 18px; }
.s6-hub-baja:hover, .s6-hub-baja:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
@keyframes s6-baja { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* =====================================================================
   MEDIDOR RADIAL · dos anillos que nacen en las 12 y se dibujan al entrar
   en pantalla (reutiliza el observador de .s6-anim). El anillo base llega
   hasta el valor inherente; el de acento, por encima, hasta el residual.
   ===================================================================== */
.s6-gauge { position: relative; display: inline-block; flex: none; line-height: 0; }
.s6-gauge svg { display: block; transform: rotate(-90deg); overflow: visible; }
.s6-gauge circle { fill: none; }
.s6-gauge-pista { stroke: rgba(255,255,255,.08); stroke-width: 9; }
.s6-gauge-base { stroke: var(--text-faint); stroke-width: 9; opacity: .5; stroke-dashoffset: var(--c); transition: stroke-dashoffset 1s var(--ease); }
.s6-gauge-val { stroke: var(--accent); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(23,184,230,.55)); stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.1s var(--ease) .15s; }
.s6-gauge.is-in .s6-gauge-base { stroke-dashoffset: var(--o-base); }
.s6-gauge.is-in .s6-gauge-val { stroke-dashoffset: var(--o-val); }
.s6-gauge-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.s6-gauge-mid b { font-family: var(--font-display); font-size: 1.05rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.s6-gauge-mid span { font-size: .5rem; color: var(--text-faint); line-height: 1.2; margin-top: 2px; white-space: nowrap; }

/* =====================================================================
   EL TALLER EN SEIS PASOS
   ===================================================================== */
.s6-pasos { padding: 26px 0 34px; border-top: 1px solid var(--line); }
.s6-pasos-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--font-display); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.s6-pasos-k .s6-ic { width: 16px; height: 16px; }
.s6-pasos-k span { color: var(--text-faint); letter-spacing: .06em; text-transform: none; font-size: .82rem; }
.s6-ps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.s6-ps li { min-width: 0; }
.s6-p6 { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); text-decoration: none; color: inherit; transition: border-color .25s, transform .35s var(--ease); }
.s6-p6:hover, .s6-p6:focus-visible { border-color: rgba(23,184,230,.5); transform: translateY(-3px); outline: none; }
.s6-p6-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.s6-p6-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(23,184,230,.12); color: var(--accent); }
.s6-p6-ic .s6-ic { width: 19px; height: 19px; }
.s6-p6-n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(127,220,247,.55); }
.s6-p6 b { font-family: var(--font-display); font-size: .98rem; color: var(--text); line-height: 1.2; }
.s6-p6 em { font-style: normal; font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.s6-p6-go { margin-top: auto; padding-top: 6px; color: var(--accent); }
.s6-p6-go .s6-ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.s6-p6:hover .s6-p6-go .s6-ic { transform: translateX(4px); }

/* =====================================================================
   IMAGEN CON PROFUNDIDAD (inclinación 3D, reflejo, paralaje)
   --tx y --ty van de -1 a 1 según el cursor; --sy, según el scroll.
   ===================================================================== */
.s6-img { position: relative; margin: 0; aspect-ratio: var(--ar, 3/2); border-radius: 20px; overflow: hidden; background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  transform: perspective(1100px) rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 9deg));
  box-shadow: 0 30px 60px -32px rgba(0,0,0,.95), 0 0 0 1px rgba(23,184,230,.05);
  transition: transform .7s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.s6-img.is-tilt { transition: transform .15s linear, box-shadow .4s, border-color .4s; border-color: rgba(23,184,230,.45); box-shadow: 0 44px 80px -34px rgba(0,0,0,.95), 0 0 50px -18px rgba(23,184,230,.5); }
.s6-img-in { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.s6-img-in img { display: block; width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(calc(var(--tx, 0) * -14px), calc(var(--ty, 0) * -10px + var(--sy, 0) * 22px), 0) scale(1.12);
  transition: transform .8s var(--ease); }
.s6-img.is-tilt .s6-img-in img { transition: transform .15s linear; }
.s6-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -90px 80px -50px rgba(4,8,12,.75); }
.s6-img-luz { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light; opacity: 0; transition: opacity .45s;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 55%); }
.s6-img.is-tilt .s6-img-luz { opacity: 1; }
.s6-img-cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; max-width: calc(100% - 28px); padding: 7px 12px; border-radius: 14px; background: rgba(8,11,14,.66); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-display); font-size: .74rem; line-height: 1.3; color: var(--text);
  transform: translate3d(calc(var(--tx, 0) * 10px), calc(var(--ty, 0) * 8px), 0); transition: transform .7s var(--ease); }
.s6-img.is-tilt .s6-img-cap { transition: transform .15s linear; }
.s6-img.is-sq { --ar: 1/1; }

/* espacio para imagen con su prompt (solo si la imagen aún no existe) */
.s6-slot::before { content: ""; flex: none; width: 0; padding-bottom: calc(100% / (var(--ar, 3/2))); }
.s6-slot { margin: 0; border-radius: 18px; display: flex; border: 1px dashed rgba(23,184,230,.5);
  background: radial-gradient(120% 90% at 100% 0%, rgba(23,184,230,.1), transparent 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px), #0b1015; }
.s6-slot-in { display: flex; flex-direction: column; gap: 8px; padding: clamp(14px, 1.6vw, 20px); width: 100%; min-width: 0; }
.s6-slot-k { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.s6-slot-k svg { width: 18px; height: 18px; }
.s6-slot-k b { margin-left: auto; color: var(--text-faint); font-weight: 500; letter-spacing: .06em; }
.s6-slot-t { font-family: var(--font-display); font-size: 1rem; color: var(--text); margin: 0; }
.s6-slot-p { font-size: .8rem; line-height: 1.55; color: var(--text-muted); margin: 0; flex: 1; }
.s6-slot-e { font-size: .72rem; color: var(--text-faint); margin: 0; line-height: 1.45; }
.s6-slot-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.s6-copiar { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--accent); background: rgba(23,184,230,.12); color: var(--text); border-radius: 10px; padding: 7px 12px; font-family: var(--font-display); font-size: .78rem; cursor: pointer; transition: background .2s; }
.s6-copiar svg { width: 15px; height: 15px; color: var(--accent); }
.s6-copiar:hover { background: rgba(23,184,230,.24); }
.s6-copiar.is-ok { border-color: var(--g1); background: rgba(46,184,126,.16); }
.s6-slot-arch { font-size: .72rem; color: var(--text-faint); }
.s6-slot.is-sq { --ar: 1/1; }

/* =====================================================================
   EMPRESA
   ===================================================================== */
.s6-emp { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.s6-hechos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.s6-hecho { display: grid; grid-template-columns: 40px minmax(0,1fr); grid-template-areas: "ic b" "ic s"; align-items: center; gap: 2px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); padding: 12px 14px; }
.s6-hecho-ic { grid-area: ic; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(23,184,230,.1); color: var(--accent); align-self: start; }
.s6-hecho-ic .s6-ic { width: 20px; height: 20px; }
.s6-hecho b { grid-area: b; display: block; font-family: var(--font-display); font-size: 1.45rem; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.s6-hecho > span:last-child { grid-area: s; display: block; font-size: .74rem; color: var(--text-faint); line-height: 1.4; }
.s6-emp-ps { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 22px; }
.s6-emp-p { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.s6-emp-p > .s6-ic { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.s6-emp-k { font-family: var(--font-display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.s6-emp-p p:not(.s6-emp-k) { font-size: .9rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.s6-memis-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 34px 0 12px; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.s6-memis-k .s6-ic { color: var(--accent); }
.s6-memis-k span { font-family: var(--font-body); font-size: .82rem; color: var(--text-faint); }
.s6-memis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.s6-memini { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 10px 12px 10px 10px; text-decoration: none; color: inherit; transition: border-color .25s, transform .35s var(--ease); }
.s6-memini:hover, .s6-memini:focus-visible { border-color: rgba(23,184,230,.55); transform: translateY(-3px); outline: none; }
.s6-memini img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; display: block; transition: transform .5s var(--ease); }
.s6-memini:hover img { transform: scale(1.06) rotate(-1.5deg); }
.s6-memini-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s6-memini b { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); line-height: 1; }
.s6-memini-t > span { font-family: var(--font-display); font-size: .84rem; color: var(--text); line-height: 1.3; }
.s6-memini em { font-style: normal; font-size: .72rem; color: var(--text-faint); }

/* =====================================================================
   MATRIZ · mapa de calor (tablero, método y puntos 4 y 5)
   ===================================================================== */
.s6-mx { margin: 0; }
.s6-mx-grid { position: relative; display: grid; grid-template-columns: 20px 96px repeat(5, minmax(0,1fr)); gap: 4px; }
.s6-mx-ejey { grid-row: 1 / span 5; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.s6-mx-y { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 8px; text-align: right; border-radius: 8px; transition: background .2s; }
.s6-mx-y b { font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--text); }
.s6-mx-y span { font-size: .66rem; color: var(--text-faint); }
.s6-mx-esq { grid-column: 1 / span 2; }
.s6-mx-x { text-align: center; padding-top: 6px; border-radius: 8px; transition: background .2s; }
.s6-mx-x b { display: block; font-family: var(--font-display); font-size: .72rem; color: var(--text-faint); }
.s6-mx-x span { font-size: .74rem; color: var(--text); font-family: var(--font-display); }
.s6-mx-y.is-on, .s6-mx-x.is-on { background: rgba(23,184,230,.12); }
.s6-mx-y.is-on b, .s6-mx-x.is-on span { color: var(--accent); }
.s6-mx-ejex { text-align: right; font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-top: 8px; }
.s6-mx-c {
  position: relative; min-height: 74px; border-radius: 10px;
  background: color-mix(in srgb, var(--gc) 22%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--gc) 32%, transparent);
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; padding: 20px 5px 7px;
  transition: background .2s, box-shadow .2s, opacity .25s;
}
.s6-mx-gl { position: absolute; top: 5px; left: 7px; font-family: var(--font-display); font-size: .62rem; font-weight: 700; color: color-mix(in srgb, var(--gc) 85%, var(--text)); opacity: .8; }
.s6-mx.is-mira .s6-mx-c { opacity: .55; }
.s6-mx.is-mira .s6-mx-c.is-row, .s6-mx.is-mira .s6-mx-c.is-col { opacity: 1; }
.s6-mx.is-mira .s6-mx-c.is-cell { opacity: 1; background: color-mix(in srgb, var(--gc) 40%, var(--panel)); box-shadow: 0 0 0 2px var(--accent), 0 0 24px -4px rgba(23,184,230,.6); z-index: 2; }
.s6-mira { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .25s; }
.s6-mira svg { width: 100%; height: 100%; fill: none; stroke: #bdeefd; }
.s6-mira .an { transform-origin: 32px 32px; animation: s6gira 14s linear infinite; }
@keyframes s6gira { to { transform: rotate(360deg); } }
.s6-mx.is-mira .s6-mira { opacity: .9; }
.s6-mx.is-foco .s6-pin { opacity: .2; }
.s6-mx.is-foco .s6-pin.is-hl { opacity: 1; }
.s6-pin {
  font-family: var(--font-display); font-size: .74rem; font-weight: 600; line-height: 1;
  color: var(--text); background: #0a0e12; border: 1.5px solid var(--gc); border-radius: 6px;
  padding: 5px 7px; cursor: pointer; position: relative; z-index: 3;
  transition: transform .2s var(--ease), box-shadow .2s, opacity .3s;
}
.s6-pin::after { content: ""; position: absolute; inset: -6px; }
.s6-pin:hover, .s6-pin:focus-visible, .s6-pin.is-hl { transform: scale(1.16); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 45%, transparent), 0 6px 18px -6px var(--gc); outline: none; }
.s6-pin.is-sel { background: var(--gc); color: var(--gt); box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 26px -2px var(--gc); }
.s6-pin.is-off { opacity: .14; pointer-events: none; }
.s6-pin.is-ghost { background: rgba(8,11,14,.82); border-style: dashed; color: var(--text-faint); opacity: .85; pointer-events: none; z-index: 2; }
.s6-mx.is-mini .s6-mx-grid { grid-template-columns: 14px 76px repeat(5, minmax(0,1fr)); gap: 3px; }
.s6-mx.is-mini .s6-mx-c { min-height: 42px; border-radius: 7px; padding: 13px 3px 4px; }
.s6-mx.is-mini .s6-mx-y b { font-size: .7rem; }
.s6-mx.is-mini .s6-mx-y span { display: none; }
.s6-mx.is-mini .s6-mx-x span { font-size: .64rem; }
.s6-mx.is-mini .s6-pin { font-size: .64rem; padding: 4px 5px; }

/* tooltip único · el visor de la mira */
.s6-tip { position: fixed; z-index: 150; pointer-events: none; max-width: 300px; background: rgba(7,10,13,.94); border: 1px solid rgba(23,184,230,.4); border-radius: 12px; padding: 10px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.s6-tip strong { display: block; font-family: var(--font-display); font-size: .94rem; color: var(--text); margin-bottom: 3px; }
.s6-tip em { display: block; font-style: normal; color: var(--accent); font-size: .74rem; margin-top: 3px; }

/* =====================================================================
   TABLERO · aplicación con barra lateral, cifras y vistas
   ===================================================================== */
.s6-tbh-in { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px 32px; align-items: end; margin-bottom: 22px; }
.s6-tbh-in .s6-leer { margin: 0; }
.s6-app { position: relative; display: grid; grid-template-columns: 252px minmax(0,1fr); align-items: start; border: 1px solid var(--border); border-radius: 24px;
  background: linear-gradient(90deg, rgba(255,255,255,.022) 251px, var(--line) 251px, var(--line) 252px, transparent 252px), linear-gradient(180deg, rgba(14,18,22,.94), rgba(10,13,16,.97));
  box-shadow: 0 50px 110px -60px rgba(0,0,0,.95), 0 0 0 1px rgba(23,184,230,.04), 0 0 80px -40px rgba(23,184,230,.25); }
.s6-app-side { position: sticky; top: calc(var(--top) + 10px); display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 16px; min-width: 0; }
.s6-app-brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.s6-app-logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: linear-gradient(140deg, var(--cian-2), var(--accent) 45%, #2f62d6); color: #041017; box-shadow: 0 8px 22px -8px rgba(23,184,230,.7); }
.s6-app-logo .s6-ic { width: 20px; height: 20px; stroke-width: 2; }
.s6-app-brand b { display: block; font-family: var(--font-display); font-size: .96rem; }
.s6-app-brand small { display: block; font-size: .7rem; color: var(--text-faint); }
.s6-app-grp { margin: 10px 6px 4px; font-family: var(--font-display); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.s6-app-nav { display: grid; gap: 2px; }
.s6-app-nav button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--text-muted); font-family: var(--font-display); font-size: .88rem; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .2s, color .2s; }
.s6-app-nav button .s6-ic { width: 18px; height: 18px; }
.s6-app-nav button:hover { background: rgba(255,255,255,.04); color: var(--text); }
.s6-app-nav button[aria-selected="true"] { background: rgba(23,184,230,.12); color: var(--text); }
.s6-app-nav button[aria-selected="true"] .s6-ic { color: var(--accent); }
.s6-app-nav button[aria-selected="true"]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px rgba(23,184,230,.8); }
.s6-app-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.s6-fg { display: flex; flex-direction: column; gap: 6px; margin: 2px 4px 8px; }
.s6-fg > span { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .7rem; color: var(--text-muted); }
.s6-fg > span .s6-ic { width: 14px; height: 14px; color: var(--text-faint); }
.s6-fg > div { display: flex; flex-wrap: wrap; gap: 5px; }
.s6-chip { border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 5px 11px; font-size: .78rem; font-family: inherit; cursor: pointer; transition: all .2s; white-space: nowrap; }
.s6-chip:hover { color: var(--text); border-color: var(--text-faint); }
.s6-chip[aria-pressed="true"] { color: #041017; background: var(--text); border-color: var(--text); font-weight: 600; }
.s6-limpiar { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 4px; border: 0; background: none; color: var(--accent); font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.s6-app-foot { margin-top: 10px; padding: 14px 4px 0; border-top: 1px solid var(--line); }
.s6-app-foot .s6-csv { width: 100%; justify-content: center; font-size: .8rem; padding: 9px 12px; }
.s6-app-foot p { margin: 10px 0 0; font-size: .7rem; color: var(--text-faint); line-height: 1.45; }

.s6-app-main { min-width: 0; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.s6-app-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.s6-app-crumb { margin: 0 auto 0 0; font-family: var(--font-display); font-size: .88rem; color: var(--text-faint); }
.s6-app-crumb i { font-style: normal; margin: 0 6px; opacity: .6; }
.s6-app-buscar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: rgba(0,0,0,.28); min-width: 230px; color: var(--text-faint); transition: border-color .2s, box-shadow .2s; }
.s6-app-buscar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23,184,230,.15); color: var(--accent); }
.s6-app-buscar input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: .86rem; outline: none; }
.s6-app-buscar input::placeholder { color: var(--text-faint); }
.s6-seg, .s6-vistas { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); max-width: 100%; }
.s6-seg button, .s6-vistas button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--text-muted); font-family: var(--font-display); font-size: .84rem; padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: color .2s, background .2s; white-space: nowrap; }
.s6-vistas button .s6-ic { width: 15px; height: 15px; }
.s6-vistas { overflow-x: auto; scrollbar-width: none; }
.s6-vistas::-webkit-scrollbar { display: none; }
.s6-vistas button { flex: none; }
.s6-seg button:hover, .s6-vistas button:hover { color: var(--text); }
.s6-seg button[aria-checked="true"], .s6-vistas button[aria-selected="true"] { background: var(--accent); color: #041017; font-weight: 600; }
.s6-play svg { width: 13px; height: 13px; }
.s6-play:hover svg { transform: none; }
.s6-play.is-on { animation: s6pulso 1.2s ease-in-out infinite; }
@keyframes s6pulso { 50% { box-shadow: 0 0 0 6px rgba(23,184,230,.18); } }

.s6-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr 1fr; gap: 10px; }
.s6-kpi { position: relative; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); padding: 13px 15px 12px; min-width: 0; }
.s6-kpi-k { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-display); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); }
.s6-kpi-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(23,184,230,.12); color: var(--accent); flex: none; }
.s6-kpi-ic .s6-ic { width: 16px; height: 16px; }
.s6-kpi.is-warn .s6-kpi-ic { background: rgba(240,128,42,.14); color: var(--g4); }
.s6-kpi.is-ok .s6-kpi-ic { background: rgba(46,184,126,.14); color: var(--g1); }
.s6-kpi b { display: inline-block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s6-kpi > span:last-child { display: block; font-size: .74rem; color: var(--text-faint); margin-top: 7px; }
.s6-delta { display: inline-block; font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--g1); margin-left: 10px; vertical-align: 4px; }
.s6-delta:empty { display: none; }
.s6-kpi-bar { display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.s6-kpi-bar i { display: block; height: 100%; width: var(--w, 63%); border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--cian-2)); transition: width .7s var(--ease); }

.s6-pane { min-width: 0; }
body.s6-js .s6-pane:not([hidden]) { animation: s6entra .4s var(--ease) both; }
.s6-tb-main { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(330px,.78fr); gap: 12px; align-items: start; }
.s6-tb-comp { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: stretch; }
.s6-tb-comp .is-prio { grid-column: 1 / -1; }
/* en pantalla horizontal la prioridad se lee en dos columnas: del 1 al 6 y del 7 al 12 */
.s6-tb-comp .s6-prio { display: block; columns: 2; column-gap: 28px; }
.s6-tb-comp .s6-prio li { break-inside: avoid; margin-bottom: 3px; }
.s6-tb-g2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.s6-card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)); padding: 16px 18px; min-width: 0; }
.s6-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.s6 .s6-card-h h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.s6-card-h h3 .s6-ic { width: 17px; height: 17px; color: var(--accent); }
.s6-card-s { font-size: .74rem; color: var(--text-faint); }
.s6-dmap { position: relative; }
.s6-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.s6-arrows path { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.5; }
.s6-tb-zk { font-family: var(--font-display); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ficha junto al mapa */
.s6-dock { position: sticky; top: calc(var(--top) + 12px); max-height: calc(100vh - var(--top) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0; }
.s6-dock:focus { outline: none; }
.s6-dock-vacio { padding: 26px 22px; color: var(--text-muted); font-size: .92rem; }
.s6-dock .s6-ficha { padding: 18px 20px 64px; }
.s6-dock.is-nuevo .s6-ficha { animation: s6entra .4s var(--ease) both; }
.s6-dtabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; padding: 10px 12px; background: rgba(13,17,21,.97); border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.s6-dtabs button { flex: 1; border: 1px solid transparent; background: none; color: var(--text-muted); font-family: var(--font-display); font-size: .8rem; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.s6-dtabs button[aria-selected="true"] { color: var(--text); background: rgba(23,184,230,.12); border-color: rgba(23,184,230,.5); }
.s6-dock-volver { display: none; }
.s6-dock .s6-fx[hidden] { display: none; }

.s6-prio { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.s6-prio li { display: grid; grid-template-columns: 20px 36px minmax(0,1fr) auto; gap: 10px; align-items: center; line-height: 1.35; padding: 7px 8px; border-radius: 10px; cursor: pointer; transition: background .2s, opacity .3s; font-size: .82rem; }
.s6-prio li:hover, .s6-prio li:focus-visible { background: rgba(255,255,255,.05); outline: none; }
.s6-prio li.is-sel { background: rgba(23,184,230,.12); }
.s6-prio-r { font-family: var(--font-display); color: var(--text-faint); font-size: .74rem; }
.s6-prio-k { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.s6-prio-n { color: var(--text-muted); line-height: 1.35; }

.s6-zts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.s6-zt { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "n t" "d d"; gap: 2px 10px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); padding: 10px 12px; cursor: pointer; color: inherit; font-family: inherit; transition: border-color .2s, background .2s; }
.s6-zt:hover, .s6-zt:focus-visible { border-color: var(--accent); background: rgba(23,184,230,.06); outline: none; }
.s6-zt-n { grid-area: n; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.s6-zt-t { grid-area: t; font-family: var(--font-display); font-size: .78rem; color: var(--text); line-height: 1.25; }
.s6-zt-d { grid-area: d; font-size: .68rem; color: var(--text-faint); line-height: 1.35; margin-top: 4px; }
.s6-zt[data-z="atencion"] .s6-zt-n { color: var(--g4); }
.s6-mx-c.is-zona { box-shadow: 0 0 0 2px var(--accent); opacity: 1 !important; }
.s6-mx.is-zonas .s6-mx-c:not(.is-zona) { opacity: .3; }

/* barras */
.s6-hb { display: grid; grid-template-columns: minmax(0, 150px) minmax(0,1fr) 26px; gap: 10px; align-items: center; margin-bottom: 9px; font-size: .8rem; }
.s6-hb-l { color: var(--text-muted); line-height: 1.3; }
.s6-hb-t { height: 10px; background: rgba(255,255,255,.05); border-radius: 0 4px 4px 0; position: relative; }
.s6-hb-t i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: linear-gradient(90deg, rgba(23,184,230,.55), var(--accent)); border-radius: 0 4px 4px 0; transition: width .6s var(--ease); }
.s6-hb-v { font-family: var(--font-display); color: var(--text); text-align: right; }
.s6-hb.is-zero .s6-hb-l, .s6-hb.is-zero .s6-hb-v { color: var(--text-faint); }
.s6-st { margin-bottom: 14px; }
.s6-st-l { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-display); }
.s6-st-b { display: flex; gap: 2px; height: 28px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.04); }
.s6-st-b span { background: var(--gc); color: var(--gt); font-family: var(--font-display); font-size: .76rem; font-weight: 700; display: grid; place-items: center; min-width: 0; transition: flex-grow .6s var(--ease); }
.s6-db-row { display: grid; grid-template-columns: 38px minmax(0,1fr) 54px; gap: 10px; align-items: center; margin-bottom: 14px; font-size: .8rem; }
.s6-db-k { font-family: var(--font-display); color: var(--text); }
.s6-db-t { position: relative; height: 22px; }
.s6-db-t::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.08); }
.s6-db-line { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--accent); transition: left .6s var(--ease), width .6s var(--ease); }
.s6-db-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; transition: left .6s var(--ease); }
.s6-db-dot.is-a { border: 2px solid var(--text-faint); background: var(--panel); }
.s6-db-dot.is-b { background: var(--accent); box-shadow: 0 0 0 3px rgba(23,184,230,.2); }
.s6-db-v { font-family: var(--font-display); color: var(--text); text-align: right; white-space: nowrap; }
.s6-db-ley { display: flex; gap: 16px; font-size: .74rem; color: var(--text-faint); margin-top: 4px; }
.s6-db-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* semáforos */
.s6-sems { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.s6-sem { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) minmax(0,1fr) 72px; gap: 10px; align-items: start; text-align: left; border: 1px solid transparent; border-radius: 10px; background: none; padding: 8px 8px; cursor: pointer; color: inherit; font-family: inherit; transition: background .2s, border-color .2s; }
.s6-sem:hover, .s6-sem:focus-visible { background: rgba(255,255,255,.04); border-color: var(--line); outline: none; }
.s6-sem-k { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: .84rem; }
.s6-sem-n { font-size: .8rem; color: var(--text); line-height: 1.35; }
.s6-sem-n small { display: block; font-size: .7rem; color: var(--text-faint); margin-top: 2px; }
.s6-sem-b { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px; }
.s6-sem-b i { font-style: normal; font-size: .66rem; line-height: 1.3; color: var(--text-muted); padding: 4px 6px 4px; border-top: 3px solid; background: rgba(255,255,255,.025); overflow-wrap: anywhere; }
.s6-sem-b i[data-b="crit"] { border-color: var(--g5); } .s6-sem-b i[data-b="norm"] { border-color: var(--g3); } .s6-sem-b i[data-b="sat"] { border-color: var(--g1); }
.s6-sem-f { font-size: .72rem; color: var(--text-faint); text-align: right; }

/* calendario de medición */
.s6-cal { display: grid; gap: 3px; overflow-x: auto; }
.s6-cal-row, .s6-cal-r { display: grid; grid-template-columns: 124px repeat(12, minmax(18px,1fr)) 40px; gap: 3px; align-items: center; min-width: 470px; }
.s6-cal-r { border: 0; background: none; padding: 3px 0; border-radius: 8px; cursor: pointer; color: inherit; font-family: inherit; text-align: left; transition: background .2s; }
.s6-cal-r:hover, .s6-cal-r:focus-visible { background: rgba(255,255,255,.04); outline: none; }
.s6-cal-h { font-family: var(--font-display); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.s6-cal-m { font-family: var(--font-display); font-size: .66rem; color: var(--text-faint); text-align: center; }
.s6-cal-m b { color: var(--accent); }
.s6-cal-k { font-size: .74rem; color: var(--text-faint); padding-left: 4px; }
.s6-cal-k b { font-family: var(--font-display); color: var(--text); margin-right: 6px; }
.s6-cal-c { height: 16px; border-radius: 4px; background: rgba(255,255,255,.04); }
.s6-cal-c.is-on { background: radial-gradient(circle, var(--accent) 0 4px, rgba(23,184,230,.18) 4.5px); }
.s6-cal-t { font-family: var(--font-display); font-size: .8rem; color: var(--text); text-align: center; }
.s6-cal-pie { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 3px; }

/* tablas */
.s6-csv { font-size: .8rem; padding: 7px 12px; }
.s6-tabla-wrap { overflow-x: auto; max-width: 100%; }
.s6-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.s6-tabla th, .s6-tabla td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.5; color: var(--text-muted); }
.s6-tabla thead th { font-family: var(--font-display); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); border-top: 0; white-space: nowrap; }
.s6-tabla tbody th { font-family: var(--font-display); color: var(--text); font-weight: 600; }
.s6-tabla th[data-sort] { cursor: pointer; }
.s6-tabla th[data-sort]::after { content: " ↕"; opacity: .4; }
.s6-tabla th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--accent); }
.s6-tabla th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--accent); }
.s6-tabla td.num { font-family: var(--font-display); color: var(--text); }
.s6-tabla td p, .s6-tabla th p { margin: 4px 0 0; font-size: .82rem; color: var(--text-muted); font-weight: 400; font-family: var(--font-body); }
.s6-tabla ul { margin: 0; padding-left: 16px; }
.s6-tabla li { margin-bottom: 4px; }
.s6-reg { min-width: 1080px; }
.s6-reg tbody tr { cursor: pointer; transition: background .2s; }
.s6-reg tbody tr:hover { background: rgba(255,255,255,.03); }
.s6-reg tbody tr.is-sel { background: rgba(23,184,230,.08); }
.s6-reg td:nth-child(2) { color: var(--text); min-width: 240px; }

/* =====================================================================
   FICHA · el formato de la matriz de riesgos
   ===================================================================== */
.s6-ficha-k { font-family: var(--font-display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0; }
.s6 .s6-ficha-n { font-family: var(--font-display); font-size: 1.32rem; line-height: 1.22; color: var(--text); margin: 8px 0 12px; }
.s6-ficha-mov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.s6-fx { margin-top: 20px; }
.s6-fx-t { font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.s6-ff { display: grid; grid-template-columns: 158px minmax(0,1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.s6-ff-k { margin: 0; font-family: var(--font-display); font-size: .78rem; color: var(--text); }
.s6-ff-k span { display: inline-block; width: 26px; color: var(--accent); }
.s6-ff-v { color: var(--text-muted); line-height: 1.6; }
.s6-ff-v ul { margin: 0; padding-left: 16px; }
.s6-ff-v li { margin-bottom: 4px; }
.s6-ficha-src { margin: 14px 0 0; }
.s6-dl { margin: 0; display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 8px 12px; font-size: .86rem; }
.s6-dl dt { font-family: var(--font-display); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.s6-dl dd { margin: 0; color: var(--text-muted); line-height: 1.58; }
.s6-dl dd p { margin: 8px 0 0; }

/* indicador + simulador del semáforo */
.s6-ind { border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.24); padding: 13px 14px; }
.s6-ind-n { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .9rem; color: var(--text); margin: 0 0 6px; }
.s6-ind-n .s6-ic { width: 17px; height: 17px; color: var(--accent); }
.s6-ind-f { font-size: .8rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.s6-ind-f span, .s6-ind-meta i { display: block; font-style: normal; font-family: var(--font-display); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px; }
.s6-ind-bandas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.s6-ind-bandas div { padding: 7px 9px; font-size: .76rem; background: rgba(255,255,255,.03); border-top: 3px solid; transition: background .25s, box-shadow .25s; }
.s6-ind-bandas div[data-b="crit"] { border-color: var(--g5); }
.s6-ind-bandas div[data-b="norm"] { border-color: var(--g3); }
.s6-ind-bandas div[data-b="sat"]  { border-color: var(--g1); }
.s6-ind-bandas div.is-act[data-b="crit"] { background: color-mix(in srgb, var(--g5) 26%, transparent); }
.s6-ind-bandas div.is-act[data-b="norm"] { background: color-mix(in srgb, var(--g3) 22%, transparent); }
.s6-ind-bandas div.is-act[data-b="sat"]  { background: color-mix(in srgb, var(--g1) 24%, transparent); }
.s6-ind-bandas span { display: block; font-family: var(--font-display); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.s6-ind-bandas b { font-weight: 500; color: var(--text); font-size: .78rem; line-height: 1.35; }
.s6-ind-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.s6-sim { margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(23,184,230,.4); background: rgba(23,184,230,.04); }
.s6-sim-k { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.s6-sim-r { display: flex; align-items: center; gap: 12px; }
.s6-sim input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.s6-sim output { font-family: var(--font-display); font-size: .86rem; color: var(--text); white-space: nowrap; }
.s6-sim-bool { display: flex; gap: 6px; flex-wrap: wrap; }
.s6-sim-bool button { border: 1px solid var(--border-strong); background: none; color: var(--text-muted); border-radius: 8px; padding: 5px 10px; font-size: .78rem; cursor: pointer; font-family: inherit; }
.s6-sim-bool button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: rgba(23,184,230,.12); }
.s6-sim-est { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.s6-sim-est::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sc, var(--text-faint)); box-shadow: 0 0 10px var(--sc, transparent); }

/* =====================================================================
   PANEL LATERAL (fichas fuera del tablero)
   ===================================================================== */
.s6-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: #0b0f13; border-left: 1px solid var(--border-strong); z-index: 130; overflow-y: auto; overscroll-behavior: contain; padding: 22px 26px 60px; transform: translateX(100%); visibility: hidden; transition: transform .42s var(--ease), visibility 0s .42s; box-shadow: -30px 0 80px rgba(0,0,0,.6); }
.s6-panel.is-on { transform: none; visibility: visible; transition: transform .42s var(--ease); }
.s6-panel:focus { outline: none; }
.s6-velo { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 129; opacity: 0; pointer-events: none; transition: opacity .42s; }
.s6-velo.is-on { opacity: 1; pointer-events: auto; }
.s6-panel-x { position: sticky; top: 0; float: right; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); cursor: pointer; font-size: 1rem; z-index: 3; }
.s6-panel-x:hover { border-color: var(--accent); color: var(--accent); }
.s6-panel .s6-ficha-n { margin-right: 50px; }

/* =====================================================================
   APERTURA DE CADA PUNTO (capítulo) y guía de lectura
   ===================================================================== */
.s6-phead { position: relative; padding: clamp(46px, 5.6vw, 76px) 0 clamp(14px, 2vw, 22px); border-top: 1px solid var(--line); }
.s6-phead::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); opacity: .55; pointer-events: none; }
.s6-phead-in { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.s6-phead.has-img .s6-phead-in, #metodo .s6-phead-in.has-img { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.s6 .s6-phead h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); line-height: 1.02; letter-spacing: -.035em; margin: 0; color: var(--text); max-width: 28ch; }
.s6-phead:not(.has-img) .s6-lead { max-width: 96ch; }
.s6-cap { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); margin-bottom: clamp(14px, 1.8vw, 22px); }
.s6-cap-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 2.6rem + 3vw, 5.8rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--accent); text-shadow: 0 0 48px rgba(23,184,230,.25); flex: none; }
.s6-cap-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s6-cap-meta > span:first-child { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.s6-cap-meta > span:first-child .s6-ic { width: 16px; height: 16px; }
.s6-cap-meta b { font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--text); }
.s6-cap-dots { display: flex; gap: 6px; }
.s6-cap-dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); }
.s6-cap-dots i.is-on { background: var(--accent); box-shadow: 0 0 8px rgba(23,184,230,.5); }
.s6-pide { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0; padding: 12px 16px; border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.025); font-size: .86rem; color: var(--text-muted); line-height: 1.55; max-width: 70ch; }
.s6-pide > .s6-ic { width: 19px; height: 19px; color: var(--accent); margin-top: 2px; }
.s6-pide b { display: block; font-family: var(--font-display); font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }

/* cifras clave: la respuesta del punto antes de leer el texto */
.s6-claves { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.s6-clave { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 118px; flex: 1 1 118px; max-width: 220px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(23,184,230,.32); background: linear-gradient(160deg, rgba(23,184,230,.1), rgba(23,184,230,.02)); }
.s6-clave b { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s6-clave span { font-size: .76rem; line-height: 1.4; color: var(--text-muted); }
.s6-clave[data-g] { border-color: color-mix(in srgb, var(--gc) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 16%, transparent), transparent); }
.s6-clave[data-g] b { color: var(--gc); }
.s6-clave[data-g="5"] b { color: #ef5d93; }

/* guía de lectura: una franja compacta con los gestos de la sección */
.s6-leer { display: flex; align-items: flex-start; gap: 14px 18px; margin-top: 22px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(23,184,230,.28); background: linear-gradient(135deg, rgba(23,184,230,.08), rgba(23,184,230,.015)); }
.s6-leer-k { display: flex; align-items: center; gap: 8px; margin: 0; flex: none; padding-top: 2px; font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.s6-leer-k .s6-ic { width: 19px; height: 19px; animation: s6toque 2.6s var(--ease) infinite; }
@keyframes s6toque { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(2px) scale(.92); } }
.s6-leer ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; counter-reset: l; flex: 1; min-width: 0; }
.s6-leer li { counter-increment: l; position: relative; flex: 1 1 250px; padding-left: 27px; font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
.s6-leer li::before { content: counter(l); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: .66rem; font-weight: 600; background: rgba(23,184,230,.16); color: var(--accent); }

/* =====================================================================
   MÉTODO · paso a paso (R08) + escalas, matriz y zonas en pestañas
   ===================================================================== */
.s6-mapeo td:first-child { color: var(--text); font-family: var(--font-display); }
.s6-step { position: relative; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.s6-step-rail { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); border-bottom: 1px solid var(--line); background: rgba(0,0,0,.2); border-radius: 22px 22px 0 0; overflow: hidden; }
.s6-step-rail button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 12px 10px 14px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--text-faint); text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.s6-step-rail button:last-child { border-right: 0; }
.s6-step-rail button .s6-ic { width: 17px; height: 17px; }
.s6-step-rail b { font-family: var(--font-display); font-size: .78rem; color: inherit; }
.s6-step-rail span { display: block; width: 100%; font-size: .7rem; line-height: 1.25; }
.s6-step-rail i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.s6-step-rail button:hover { color: var(--text); background: rgba(255,255,255,.03); }
.s6-step-rail button.is-hecho { color: var(--text-muted); }
.s6-step-rail button.is-hecho i { transform: scaleX(1); opacity: .45; }
.s6-step-rail button[aria-selected="true"] { color: var(--text); background: rgba(23,184,230,.1); }
.s6-step-rail button[aria-selected="true"] .s6-ic { color: var(--accent); }
.s6-step-rail button[aria-selected="true"] i { transform: scaleX(1); box-shadow: 0 0 10px rgba(23,184,230,.8); }
.s6-step.is-play .s6-step-rail button[aria-selected="true"] i { transform: scaleX(0); animation: s6llena var(--dur, 5.5s) linear forwards; }
@keyframes s6llena { to { transform: scaleX(1); } }
.s6-step-rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.s6-step-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.s6-step-txt { display: flex; flex-direction: column; padding: clamp(20px, 2.8vw, 34px); min-height: 440px; }
.s6-step-m:not([hidden]) { animation: s6entra .45s var(--ease) both; }
.s6-step-r { display: flex; align-items: center; gap: 11px; margin: 0 0 10px; font-family: var(--font-display); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); }
.s6-step-r::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.s6 .s6-step-m h4 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 10px; color: var(--text); }
.s6-step-d { color: var(--text); font-size: 1.02rem; line-height: 1.6; margin: 0 0 14px; }
.s6-step-nota { display: flex; gap: 10px; color: var(--text-muted); font-size: .9rem; line-height: 1.62; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.s6-step-nota > .s6-ic { width: 18px; height: 18px; color: var(--g3); margin-top: 2px; }
.s6-step-v { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(23,184,230,.07); border: 1px solid rgba(23,184,230,.28); font-size: .88rem; color: var(--text-muted); line-height: 1.55; }
.s6-step-v > span:first-child { display: inline-block; margin-right: 8px; font-family: var(--font-display); color: var(--accent); font-weight: 700; }
.s6-step-v ul { margin: 6px 0 0; padding-left: 18px; }
.s6-step-ctl { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; }
.s6-step-b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--border-strong); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.s6-step-b:hover { border-color: var(--accent); color: var(--accent); }
.s6-step-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.s6-step-b .s6-ic { width: 18px; height: 18px; }
.s6-step-play { background: var(--accent); border-color: var(--accent); color: #041017; }
.s6-step-play:hover { color: #041017; transform: scale(1.06); }
.s6-step-play .s6-ic.is-fill { width: 15px; height: 15px; }
.s6-step.is-play .s6-step-play .is-play, .s6-step:not(.is-play) .s6-step-play .is-pausa { display: none; }
.s6-step-bar { flex: 1; height: 3px; margin-left: 8px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.s6-step-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--cian-2)); transform-origin: left; transform: scaleX(var(--sp, .1)); transition: transform .5s var(--ease); box-shadow: 0 0 10px rgba(23,184,230,.6); }
.s6-step-ficha { border-left: 1px solid var(--line); padding: 16px 20px 18px; background: rgba(0,0,0,.18); border-radius: 0 0 22px 0; min-width: 0; }
.s6-scr-cab-k { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.s6-scr-cab-k b { color: var(--accent); }
.s6-scr-cab-k span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); }
.s6-rf { display: grid; grid-template-columns: 136px minmax(0,1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .78rem; transition: opacity .35s, background .35s; }
.s6-rf-k { margin: 0; font-family: var(--font-display); font-size: .72rem; color: var(--text-faint); padding-top: 2px; }
.s6-rf-k span { display: inline-block; width: 22px; color: var(--accent); }
.s6-rf-v { color: var(--text-muted); line-height: 1.45; }
.s6-rf-v ul { margin: 0; padding-left: 16px; }
.s6-rf-v .s6-ag, .s6-rf-v .s6-g, .s6-rf-v .s6-tt { font-size: .64rem; }
body.s6-js .s6-rf.is-pend { opacity: .22; }
body.s6-js .s6-rf.is-pend .s6-rf-v { filter: blur(3px); }
body.s6-js .s6-rf.is-now { background: rgba(23,184,230,.08); }
body.s6-js .s6-rf.is-now .s6-rf-k { color: var(--accent); }
.s6-scr-mx { margin-top: 12px; transition: opacity .4s; }
body.s6-js .s6-scr-mx.is-pend { opacity: .3; }
body.s6-js .s6-scr-mx.is-pend .s6-pin { opacity: 0; }
.s6-rmap-k { font-family: var(--font-display); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }

.s6-tabs > [role="tablist"] { margin-bottom: 18px; }
.s6-sis-c { position: relative; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.018); padding: 16px 18px; min-width: 0; }
.s6-sis-k { font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.s6-sis-mx { max-width: 760px; }
.s6-sis-mx .s6-mute { display: block; margin-top: 12px; line-height: 1.55; }
.s6-esc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.s6-esc li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 8px 6px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--text-muted); line-height: 1.5; border-radius: 8px; transition: background .3s, box-shadow .3s; }
.s6-esc li b { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent); }
.s6-esc li strong { display: block; font-family: var(--font-display); font-size: .92rem; }
.s6-esc li em { font-style: normal; font-family: var(--font-display); font-size: .74rem; color: var(--text-faint); margin-left: 6px; }
.s6-esc li.is-on { background: rgba(23,184,230,.12); box-shadow: inset 3px 0 0 var(--accent); }
.s6-esc li.is-on strong { color: var(--accent); }
.s6-zonas { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 8px; }
.s6-zona { border-top: 2px solid var(--accent); padding-top: 12px; }
.s6-zona[data-z="atencion"] { border-color: var(--g4); }
.s6-zona[data-z="impacto"] { border-color: var(--g3); }
.s6-zona[data-z="seguimiento"] { border-color: var(--g2); }
.s6-zona[data-z="control"] { border-color: var(--g1); }
.s6-zona b { font-family: var(--font-display); font-size: .94rem; }
.s6-zona p { font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin: 6px 0 0; }

/* =====================================================================
   PUNTO 1 · macroestrategias en pestañas con imagen (componente 02)
   ===================================================================== */
.s6-pes { position: relative; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); }
.s6-pes-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 8px; background: var(--panel-2); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; border-radius: 22px 22px 0 0; }
.s6-pes-tabs::-webkit-scrollbar { display: none; }
.s6-pes-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; background: transparent; border: 1px solid transparent; border-radius: 12px; font-family: var(--font-display); color: var(--text-muted); cursor: pointer; text-align: left; transition: color .22s, background .22s, border-color .22s; min-width: 150px; }
.s6-pes-tab b { font-size: 1.05rem; color: inherit; }
.s6-pes-tab span { font-size: .78rem; }
.s6-pes-tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.s6-pes-tab[aria-selected="true"] { color: var(--text); background: rgba(23,184,230,.12); border-color: var(--accent); }
.s6-pes-tab[aria-selected="true"] b { color: var(--accent); }
.s6-pes-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.s6-pes-panel { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(20px, 3vw, 34px); }
.s6-pes-rot { font-family: var(--font-display); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.s6 .s6-pes-panel h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.8rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px; color: var(--text); }
.s6 .s6-pes-panel h3::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 12px; background: var(--accent); }
.s6-pes-txt > p:not(.s6-pes-rot) { color: var(--text-muted); font-size: .94rem; line-height: 1.6; margin: 0; }
.s6-mers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.s6-mer { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); padding: 10px 12px; transition: border-color .2s, background .2s; }
.s6-mer:hover { border-color: rgba(23,184,230,.5); background: rgba(23,184,230,.04); }
.s6-mer-k { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.s6-mer-n { font-size: .86rem; color: var(--text); line-height: 1.4; }
.s6-pes-txt > p.s6-pes-exp { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: .82rem; color: var(--text-faint); }
.s6-pes-exp .s6-ic { width: 16px; height: 16px; color: var(--accent); margin-top: 1px; }
.s6-pes-media { min-width: 0; }
.s6-pes-media .s6-slot, .s6-pes-media .s6-img { --ar: 1/1; }
@media (prefers-reduced-motion: no-preference) {
  body.s6-js .s6-pes-panel:not([hidden]) > * { animation: s6entra .45s var(--ease) both; }
  body.s6-js .s6-pes-panel:not([hidden]) > *:nth-child(2) { animation-delay: .08s; }
}
.s6-pes-puntos { display: flex; justify-content: center; gap: 8px; padding: 0 0 18px; }
.s6-pes-punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: width .3s, background .3s; }
.s6-pes-punto[aria-current="true"] { width: 26px; background: var(--accent); }

/* =====================================================================
   PUNTOS 2, 4 Y 6 · explorador (lista + detalle a la vista)
   ===================================================================== */
.s6-exp { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.6fr); gap: 18px; align-items: start; }
.s6-exp-l { display: grid; gap: 16px; }
.s6-exp-gk { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .72rem; color: var(--text-faint); margin: 0 0 6px; letter-spacing: .04em; }
.s6-exp-gk b { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); margin-right: 2px; }
.s6-exp-gk .s6-ic { width: 15px; height: 15px; }
.s6-exp-g { display: grid; gap: 5px; }
.s6-exp-b { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; grid-template-areas: "k n a"; gap: 2px 10px; align-items: center; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); padding: 9px 11px; color: inherit; font-family: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.s6-exp-b:hover { border-color: var(--text-faint); transform: translateX(3px); }
.s6-exp-b.is-on { border-color: var(--accent); background: rgba(23,184,230,.1); }
.s6-exp-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.s6-exp-bk { grid-area: k; font-family: var(--font-display); font-weight: 700; color: var(--text); }
.s6-exp-bn { grid-area: n; font-size: .8rem; color: var(--text-muted); line-height: 1.35; }
.s6-exp-b .s6-ag { grid-area: a; justify-self: end; font-size: .6rem; }
.s6-exp-d { position: sticky; top: calc(var(--top) + 16px); min-width: 0; }
.s6-exp-i { position: relative; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); padding: clamp(18px, 2.4vw, 28px); }
.s6-exp-i + .s6-exp-i { margin-top: 12px; }
body.s6-js .s6-exp-i { display: none; }
body.s6-js .s6-exp-i.is-on { display: block; animation: s6entra .4s var(--ease) both; }
body.s6-js .s6-exp-i + .s6-exp-i { margin-top: 0; }
.s6-exp-i header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.s6-exp-ik { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent); line-height: 1; }
.s6-exp-ime { font-size: .78rem; color: var(--text-faint); }
.s6 .s6-exp-i h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.2; color: var(--text); margin: 4px 0 16px; }
.s6-exp-i header h3 { margin: 0; flex: 1; min-width: 60%; }
.s6-exp-i footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.s6-idf { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.s6-idf-k { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 3px 0 0; align-self: start; }
.s6-idf-k .s6-ic { width: 16px; height: 16px; color: var(--accent); }
.s6-idf-v p { margin: 0; font-size: .92rem; color: var(--text-muted); line-height: 1.62; }
.s6-idf-v p + p { margin-top: 6px; }
.s6-idf-big { font-family: var(--font-display); font-size: 1.02rem !important; color: var(--text) !important; }
.s6-idf-big .s6-ag { font-size: .8rem; padding: 4px 12px 4px 9px; }
.s6-idf-big .s6-ag svg { width: 14px; height: 14px; }

.s6-g2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.s6-g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.s6-agbar { display: flex; gap: 3px; height: 58px; border-radius: 10px; overflow: hidden; }
.s6-agbar span { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; font-size: .76rem; color: #041017; font-family: var(--font-display); font-weight: 600; position: relative; }
.s6-agbar span .s6-ic { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; opacity: .55; }
.s6-agbar span b { font-size: 1.3rem; color: #041017; line-height: 1; }
.s6-agbar [data-ag="interno"] { background: #9d8cf0; }
.s6-agbar [data-ag="externo"] { background: #e0a63f; }
.s6-agbar [data-ag="mixto"] { background: #17b8e6; }
.s6-tipos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.s6-tipos li { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 5px 10px; border-radius: 999px; border: 1px dashed var(--border); color: var(--text-faint); }
.s6-tipos li.is-on { border: 1px solid var(--accent); color: var(--text); background: rgba(23,184,230,.08); }
.s6-tipos li b { font-family: var(--font-display); color: var(--accent); }

/* =====================================================================
   PUNTO 3 · causa → riesgo → efecto y causas raíz
   ===================================================================== */
.s6-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.s6-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); border-radius: 10px; padding: 7px 12px; font-family: var(--font-display); font-size: .84rem; cursor: pointer; transition: all .2s; }
.s6-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 8px color-mix(in srgb, var(--gc) 60%, transparent); }
.s6-pill:hover { color: var(--text); border-color: var(--text-faint); transform: translateY(-1px); }
.s6-pill[aria-pressed="true"] { background: var(--accent); color: #041017; border-color: var(--accent); font-weight: 600; }
/* en el punto 4 la píldora también es botón del explorador: manda su forma de píldora */
.s6-pill.s6-exp-b { display: inline-flex; width: auto; padding: 7px 12px; border-radius: 10px; border-color: var(--border-strong); background: transparent; }
.s6-pill.s6-exp-b:hover { transform: translateY(-1px); }
.s6-pill.s6-exp-b.is-on { background: var(--accent); color: #041017; border-color: var(--accent); font-weight: 600; }
.s6-flujo { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.62fr) minmax(0,1fr); gap: 0 56px; align-items: center; }
.s6-flujo-col { display: grid; gap: 9px; position: relative; z-index: 2; }
.s6-flujo-t { font-family: var(--font-display); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 4px; }
#s6-fe .s6-flujo-t { text-align: right; }
.s6-nodo { position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 12px 14px; font-size: .86rem; line-height: 1.5; color: var(--text-muted); transition: border-color .25s, color .25s, background .25s, transform .3s var(--ease); cursor: default; }
.s6-nodo:hover, .s6-nodo.is-hl { border-color: var(--accent); color: var(--text); background: rgba(23,184,230,.07); }
#s6-fc .s6-nodo:hover { transform: translateX(4px); }
#s6-fe .s6-nodo:hover { transform: translateX(-4px); }
@media (prefers-reduced-motion: no-preference) { body.s6-js .s6-nodo { animation: s6entra .45s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); } }
.s6-flujo-mid { position: relative; align-self: stretch; display: grid; place-items: center; }
.s6-flujo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s6-flujo-svg path { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.4; transition: stroke .25s, stroke-width .25s; }
.s6-flujo-svg path.is-hl { stroke: var(--accent); stroke-width: 2.2; }
.s6-centro { position: relative; z-index: 2; margin: 0; border: 1px solid var(--accent); border-radius: 18px; background: #0b1318; box-shadow: 0 0 0 6px rgba(23,184,230,.08), 0 20px 60px -20px rgba(23,184,230,.4); padding: 20px 16px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.s6-centro > span { font-family: var(--font-display); font-size: .82rem; letter-spacing: .12em; color: var(--accent); }
.s6-centro p { font-family: var(--font-display); font-size: 1rem; color: var(--text); line-height: 1.35; margin: 0; }
.s6-ce-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px,1fr)); gap: 12px; }
.s6-ce { position: relative; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); padding: 16px 18px; }
.s6-ce-k { font-family: var(--font-display); font-size: .94rem; color: var(--text); margin: 0 0 10px; }
.s6-ce-k b { color: var(--accent); margin-right: 6px; }
.s6-ce-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.s6-ce-t { font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.s6-ce ul { margin: 0; padding-left: 16px; }
.s6-ce li { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 5px; }
.s6-rzbs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 28px; margin: 6px 0 24px; }
.s6-rzb { display: grid; grid-template-columns: minmax(0,1fr) 70px; grid-template-areas: "l v" "t v"; gap: 8px 14px; align-items: center; }
.s6-rzb-l { grid-area: l; font-size: .78rem; color: var(--text-faint); line-height: 1.4; }
.s6-rzb-l b { display: block; font-family: var(--font-display); font-size: .94rem; color: var(--text); margin-bottom: 2px; }
.s6-rzb-t { grid-area: t; height: 8px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.s6-rzb-t i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, rgba(23,184,230,.55), var(--accent), var(--cian-2)); box-shadow: 0 0 12px rgba(23,184,230,.45); }
.s6-rzb-v { grid-area: v; text-align: right; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--text); }
.s6-rzb-v small { display: block; font-size: .7rem; color: var(--text-faint); margin-top: 3px; }
.s6-raiz { min-width: 820px; }
.s6-raiz thead th { white-space: normal; vertical-align: bottom; }
.s6-raiz thead th span { display: block; color: var(--text); letter-spacing: .06em; }
.s6-raiz thead th small { display: block; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .72rem; color: var(--text-faint); margin-top: 4px; line-height: 1.4; }
.s6-raiz tbody th { font-weight: 400; font-family: var(--font-body); color: var(--text-muted); font-size: .82rem; }
.s6-raiz tbody th b { font-family: var(--font-display); color: var(--text); margin-right: 6px; }
.s6-rz { text-align: center !important; color: var(--accent) !important; font-size: 1.1rem; }
.s6-rz.is-on { background: rgba(23,184,230,.07); }
.s6-raiz tbody tr { transition: background .2s; }
.s6-raiz tbody tr:hover { background: rgba(255,255,255,.035); }
.s6-rz-tot th, .s6-rz-tot td { border-top: 1px solid var(--border-strong) !important; }
.s6-rz-tot td { text-align: center !important; }

/* =====================================================================
   PUNTO 4 · escalas que marcan + histogramas
   ===================================================================== */
.s6-p4 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 16px; align-items: start; }
.s6-p4-esc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s6-p4-der { display: grid; gap: 12px; position: sticky; top: calc(var(--top) + 16px); }
.s6-p4-der .s6-exp-d { position: static; }
.s6-pij { display: grid; gap: 14px; margin-top: 14px; }
.s6-pij > div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.s6-pij-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 6px; }
.s6-pij-k .s6-ic { width: 16px; height: 16px; color: var(--accent); }
.s6-pij-k b { color: var(--accent); }
.s6-pij-k em { font-style: normal; color: var(--text-faint); letter-spacing: 0; text-transform: none; }
.s6-pij p:not(.s6-pij-k) { font-size: .9rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.s6-his { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; align-items: end; height: 170px; }
.s6-hi { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 4px; }
.s6-hi b { font-family: var(--font-display); font-size: .9rem; color: var(--text); }
.s6-hi i { align-self: end; height: var(--h); min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), rgba(23,184,230,.35)); }
.s6-hi[data-g] i { background: linear-gradient(180deg, var(--gc), color-mix(in srgb, var(--gc) 35%, transparent)); }
.s6-hi span { font-size: .68rem; color: var(--text-faint); line-height: 1.2; }
.s6-lv { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .86rem; color: var(--text); }
.s6-lv b { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: rgba(23,184,230,.14); color: var(--accent); font-size: .8rem; }
.s6-pi { min-width: 860px; }

/* =====================================================================
   PUNTO 5 · comparador antes / después (componente propio)
   ===================================================================== */
.s6-comp { position: relative; border: 1px solid var(--border); border-radius: 22px; background: #0d1115; padding: clamp(14px, 2vw, 24px); }
.s6-comp-cab { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 14px; margin-bottom: 16px; }
.s6-comp-eti { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.s6-comp-eti.is-b { text-align: right; align-items: flex-end; }
.s6-comp-eti span { font-family: var(--font-display); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.s6-comp-eti b { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.s6-comp-eti em { font-style: normal; font-size: .8rem; color: var(--text-muted); }
.s6-comp-eti.is-b b { color: var(--accent); }
.s6-comp-seg button[aria-pressed="true"] { background: var(--accent); color: #041017; font-weight: 600; }
.s6-comp-in { position: relative; }
.s6-comp-a, .s6-comp-b { background: #0d1115; }
.s6-comp-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.s6-comp-linea { position: absolute; top: -6px; bottom: -6px; left: var(--pos); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 18px rgba(23,184,230,.75); pointer-events: none; z-index: 8; }
.s6-comp-asa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #041017; box-shadow: 0 0 0 6px rgba(23,184,230,.18), 0 10px 26px rgba(0,0,0,.5); pointer-events: auto; cursor: ew-resize; touch-action: none; transition: transform .2s var(--ease); }
.s6-comp-asa:hover, .s6-comp.is-drag .s6-comp-asa { transform: translate(-50%, -50%) scale(1.1); }
.s6-comp-asa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s6-comp-rango { display: block; width: 100%; margin: 18px 0 4px; accent-color: var(--accent); cursor: ew-resize; }
.s6-comp .s6-leyenda { margin-top: 10px; }
.s6-mas { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.s6-mas .s6-ic { color: var(--accent); }
.s6-zt2 th[scope="row"] b { display: block; font-family: var(--font-display); color: var(--text); }
.s6-zt2 th[scope="row"] p { margin: 3px 0 0; font-size: .78rem; color: var(--text-faint); }
.s6-zt2 td b, .s6-gt2 td { font-size: 1.3rem; }
.s6-tabla td.num > span { display: block; font-family: var(--font-body); font-size: .76rem; color: var(--text-faint); margin-top: 3px; }
.s6-g2-w { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }

/* =====================================================================
   PUNTO 6 · tratamientos, planes y hoja de ruta
   ===================================================================== */
.s6-tcs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.s6-tc { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); padding: 16px 18px 16px; cursor: pointer; font-family: inherit; color: inherit; transition: border-color .2s, transform .3s var(--ease), background .2s; }
.s6-tc:hover { border-color: var(--text-faint); transform: translateY(-3px); }
.s6-tc[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(180deg, rgba(23,184,230,.14), rgba(23,184,230,.04)); }
.s6-tc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.s6-tc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(23,184,230,.12); color: var(--accent); margin-bottom: 4px; }
.s6-tc-ic .s6-ic { width: 22px; height: 22px; }
.s6-tc[data-t="ignorar"] .s6-tc-ic { background: rgba(255,255,255,.05); color: var(--text-faint); }
.s6-tc-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-display); font-size: 1.1rem; color: var(--text); }
.s6-tc-n { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--accent); }
.s6-tc[data-t="ignorar"] .s6-tc-n { color: var(--text-faint); }
.s6-tc-d { font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
.s6-tc-e { font-size: .78rem; color: var(--text-faint); line-height: 1.5; margin-top: 2px; font-style: italic; }
.s6-tc-r { font-family: var(--font-display); font-size: .74rem; color: var(--accent); margin-top: auto; padding-top: 6px; }
.s6-filtro { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; margin: 0 0 14px; border: 1px solid rgba(23,184,230,.35); border-radius: 14px; background: rgba(11,16,20,.95); }
.s6-filtro p { margin: 0; font-family: var(--font-display); font-size: .92rem; color: var(--text); }
.s6-plan { display: flex; flex-direction: column; gap: 12px; }
.s6-plan header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.s6-plan-k { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); margin-right: 2px; }
.s6-plan header .s6-mov { margin-left: auto; }
.s6 .s6-plan h3 { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.32; color: var(--text); margin: 0; }
.s6-plan-j { font-size: .88rem; color: var(--text-muted); line-height: 1.62; margin: 0; }
.s6-mini { grid-area: a; justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: .7rem; color: var(--text-faint); }
.s6-mini i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .66rem; background: var(--gc); color: var(--gt); }
.s6-exp-plan .s6-exp-g[hidden] { display: none !important; }
.s6-exp-plan .s6-exp-gk b { color: var(--text); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.s6-exp-plan .s6-exp-gk b .s6-ic { color: var(--accent); }
body.s6-js .s6-exp-plan .s6-exp-i.is-on { display: flex; flex-direction: column; }

/* hoja de ruta · por defecto una línea vertical; con JS y pantalla ancha, la
   sección se fija y la pista avanza de lado con el scroll (.is-pin) */
.s6-hr { position: relative; border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) 0; }
.s6-hr-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin-bottom: 26px; }
.s6-hr-cab .s6-cab-n { margin-bottom: 8px; }
.s6 .s6-hr-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.05; letter-spacing: -.03em; color: var(--text); margin: 0; }
.s6-hr-ayuda { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: 380px; font-size: .82rem; color: var(--text-faint); line-height: 1.5; }
.s6-hr-ayuda .s6-ic { width: 18px; height: 18px; color: var(--accent); }
.s6-hr-track { width: min(100% - 40px, var(--wrap)); margin: 0 auto; display: grid; gap: 22px; }
.s6-hr-img { position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 7; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -34px rgba(0,0,0,.95); }
.s6-hr-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s6-hr-img figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: rgba(8,11,14,.66); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .76rem; color: var(--text-muted); }
.s6-hr-img figcaption b { font-family: var(--font-display); font-size: 1.3rem; color: var(--text); }
.s6-hr-rail { position: relative; display: grid; gap: 14px; padding-left: 34px; }
.s6-hr-linea { position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.08); }
.s6-hr-linea i { display: block; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--cian-2)); box-shadow: 0 0 12px rgba(23,184,230,.6); }
.s6-hito { position: relative; }
.s6-hito-dot { position: absolute; left: -30px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(23,184,230,.18), 0 0 18px rgba(23,184,230,.8); }
.s6-hito-tallo { display: none; }
.s6-hito-c { position: relative; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,24,32,.96), rgba(12,16,20,.96)); }
.s6-hito-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.s6-hito-t b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; color: var(--text); }
.s6-hito-t span { font-family: var(--font-display); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.s6-hito ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.s6-hito li { display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 8px; align-items: start; font-size: .83rem; color: var(--text-muted); line-height: 1.45; }
.s6-hito li > .s6-ic { width: 16px; height: 16px; color: var(--accent); margin-top: 2px; }
.s6-hito-r { font-family: var(--font-display); font-size: .72rem; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 6px; border: 1.5px solid var(--gc); background: #0a0e12; color: var(--text); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.s6-hito-r:hover, .s6-hito-r:focus-visible { transform: scale(1.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 40%, transparent); outline: none; }
.s6-hr-pie { display: none; }

.s6-hr.is-pin { padding: 0; }
.s6-hr.is-pin .s6-hr-pin { position: sticky; top: var(--top); height: calc(100vh - var(--top)); display: flex; flex-direction: column; overflow: hidden; padding-top: clamp(16px, 2.4vh, 28px); }
.s6-hr.is-pin .s6-hr-cab { margin-bottom: 8px; flex: none; }
.s6-hr.is-pin .s6-hr-vp { position: relative; flex: 1; min-height: 0; }
.s6-hr.is-pin .s6-hr-track { position: absolute; left: 0; top: 0; bottom: 0; width: max-content; margin: 0; display: flex; align-items: center; gap: 70px; padding: 0 max(5vw, 24px); transform: translate3d(var(--hrx, 0px), 0, 0); will-change: transform; }
.s6-hr.is-pin .s6-hr-img { flex: none; width: clamp(260px, 24vw, 400px); height: 74%; aspect-ratio: auto; }
.s6-hr.is-pin .s6-hr-rail { display: flex; height: 100%; padding: 0 420px 0 0; gap: 0; }
.s6-hr.is-pin .s6-hr-linea { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; margin-top: -1px; }
.s6-hr.is-pin .s6-hr-linea i { transform-origin: left center; transform: scaleX(var(--hr, 0)); }
.s6-hr.is-pin .s6-hito { flex: none; width: 250px; height: 100%; }
.s6-hr.is-pin .s6-hito-dot { left: 0; top: 50%; margin: -7px 0 0 -7px; transform: scale(0); transition: transform .5s var(--ease); }
.s6-hr.is-pin .s6-hito-tallo { display: block; position: absolute; left: 0; width: 1px; background: linear-gradient(var(--accent), rgba(23,184,230,.25)); transform: scaleY(0); transition: transform .6s var(--ease) .1s; }
.s6-hr.is-pin .s6-hito[data-lado="arr"] .s6-hito-tallo { top: 2%; bottom: 50%; transform-origin: bottom; }
.s6-hr.is-pin .s6-hito[data-lado="aba"] .s6-hito-tallo { top: 50%; bottom: 2%; transform-origin: top; background: linear-gradient(rgba(23,184,230,.25), var(--accent)); }
.s6-hr.is-pin .s6-hito-c { position: absolute; left: 16px; width: min(450px, 32vw); }
.s6-hr.is-pin .s6-hito li { font-size: .8rem; }
.s6-hr.is-pin .s6-hito[data-lado="arr"] .s6-hito-c { top: 2%; }
.s6-hr.is-pin .s6-hito[data-lado="aba"] .s6-hito-c { bottom: 2%; }
.s6-hr.is-pin .s6-hito-c { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.s6-hr.is-pin .s6-hito.is-in .s6-hito-dot { transform: scale(1); }
.s6-hr.is-pin .s6-hito.is-in .s6-hito-tallo { transform: scaleY(1); }
.s6-hr.is-pin .s6-hito.is-in .s6-hito-c { opacity: 1; transform: none; }
.s6-hr.is-pin .s6-hr-pie { display: block; flex: none; padding: 10px 0 18px; }
.s6-hr-prog { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.s6-hr-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--cian-2)); transform-origin: left; transform: scaleX(var(--hr, 0)); }

/* =====================================================================
   ANÁLISIS DEL PUNTO · tres hallazgos en tarjetas
   ===================================================================== */
.s6-an { margin-top: 34px; }
.s6-an-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.s6-an-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: linear-gradient(140deg, rgba(242,208,78,.2), rgba(23,184,230,.1)); color: var(--g3); box-shadow: 0 0 30px -10px rgba(242,208,78,.5); }
.s6-an-ic .s6-ic { width: 23px; height: 23px; }
.s6-an-k { font-family: var(--font-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.s6 .s6-an h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); color: var(--text); margin: 0; line-height: 1.2; }
.s6-an-g { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.s6-an-c { position: relative; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(23,184,230,.06), rgba(255,255,255,.012) 55%); }
.s6-an-n { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: .72rem; letter-spacing: .12em; color: var(--accent); }
.s6-an-c p { margin: 0; font-size: .9rem; line-height: 1.66; color: var(--text-muted); }
.s6-an-c p strong { color: var(--text); font-weight: 600; }

/* =====================================================================
   CONCLUSIONES Y CIERRE
   ===================================================================== */
.s6-concs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.s6-conc { position: relative; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); padding: 22px; }
.s6-conc-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(23,184,230,.12); color: var(--accent); }
.s6-conc-ic .s6-ic { width: 23px; height: 23px; }
.s6-conc-n { position: absolute; top: 16px; right: 20px; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(127,220,247,.45); }
.s6 .s6-conc h3 { font-family: var(--font-display); font-size: 1.16rem; color: var(--text); margin: 16px 0 10px; line-height: 1.25; }
.s6-conc p { font-size: .9rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.s6-fin { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 22px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; border: 1px solid rgba(23,184,230,.35); background: radial-gradient(120% 160% at 0% 0%, rgba(23,184,230,.16), transparent 55%), var(--panel); }
.s6-fin-txt .s6-cab-n { margin-bottom: 8px; }
.s6 .s6-fin h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); color: var(--text); margin: 0 0 6px; }
.s6-fin-txt p:last-child { margin: 0; color: var(--text-muted); font-size: .92rem; }
.s6-fin-acc { display: flex; flex-wrap: wrap; gap: 10px; }

/* =====================================================================
   REFERENCIAS · desplegable nativo (<details>) al final de la página
   ===================================================================== */
.s6-refs-caja { position: relative; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.s6-refs-sum { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; border-radius: 18px; transition: background .25s; }
.s6-refs-sum::-webkit-details-marker { display: none; }
.s6-refs-sum:hover { background: rgba(23,184,230,.06); }
.s6-refs-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.s6-refs-sum-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(23,184,230,.12); color: var(--accent); }
.s6-refs-sum-ic .s6-ic { width: 21px; height: 21px; }
.s6-refs-sum-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.s6-refs-sum-t b { font-family: var(--font-display); font-size: 1.1rem; }
.s6-refs-sum-t small { font-size: .78rem; color: var(--text-faint); }
.s6-refs-sum-i { width: 11px; height: 11px; flex: none; margin-right: 6px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
.s6-refs-caja[open] .s6-refs-sum-i { transform: rotate(-135deg) translate(-2px, -2px); }
.s6-refs-caja[open] .s6-refs-sum { border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.s6-refs-caja[open] .s6-refs-in { animation: s6entra .4s var(--ease) both; }
.s6-refs-in { padding: 18px 22px 22px; }
.s6-refs-nota { margin: 0 0 16px; font-size: .84rem; line-height: 1.6; color: var(--text-muted); max-width: 110ch; }
/* en dos columnas que se leen de arriba abajo, como una lista alfabética impresa */
.s6-refs-caja .s6-refs { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.s6-refs-caja .s6-refs li { break-inside: avoid; margin-bottom: 12px; padding-left: 22px; text-indent: -22px; font-size: .84rem; line-height: 1.6; color: var(--text-muted); overflow-wrap: anywhere; }
.s6-refs-caja .s6-refs a { color: color-mix(in srgb, var(--accent) 88%, var(--text)); }
@media (max-width: 900px) { .s6-refs-caja .s6-refs { columns: 1; } }

/* =====================================================================
   DOCUMENTO · la versión que se imprime y se sube a Canvas
   ===================================================================== */
body.s6-pg-doc { background: #1a1f24; }
body.s6-pg-doc .s6-halo { display: none; }
.s6-doc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 0 18px; }
.s6-doc-bar p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.s6-doc {
  --text: #14181c; --text-muted: #353b41; --text-faint: #5b626a; --panel: #ffffff; --panel-2: #ffffff;
  --border: #cfd5da; --border-strong: #9aa2a9; --line: #e2e6e9; --accent: #0b6e8f;
  --g1: #1a8a5c; --g2: #2f62d6; --g3: #c89b0c; --g4: #cc5f14; --g5: #a01848;
  width: min(100% - 32px, 900px); margin: 0 auto 30px; background: #fff; color: var(--text);
  border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); padding: clamp(28px, 6vw, 72px);
  font-size: 15px;
}
.s6-doc [data-g="5"] { --gt: #ffffff; }
.s6-doc b, .s6-doc strong { color: var(--text); }
.s6-doc p { color: var(--text-muted); line-height: 1.68; }
.s6 .s6-doc h1 { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; color: var(--text); margin: 18px 0 12px; }
.s6 .s6-doc h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.s6 .s6-doc h3 { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); margin: 22px 0 8px; }
.s6-doc-portada { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.s6-doc-k { font-family: var(--font-display); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; margin: 0; }
.s6-doc-sub { font-size: 1.1rem; color: var(--text) !important; margin: 0 0 26px; }
.s6-doc-eq { font-size: .95rem; margin: 0 0 22px; }
.s6-doc-web { font-size: .82rem; color: var(--text-faint) !important; margin: 10px 0 0; }
.s6-doc-s { padding-top: 34px; }
.s6-doc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.s6-doc-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.s6-doc-4 figure { margin: 0; }
.s6-doc-4 img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.s6-doc-4 figcaption { font-family: var(--font-display); font-size: .72rem; color: var(--text-faint); margin-top: 5px; }
.s6-doc .s6-tabla { font-size: .8rem; }
.s6-doc .s6-tabla th, .s6-doc .s6-tabla td { padding: 8px 9px; border-top: 1px solid var(--line); color: var(--text-muted); }
.s6-doc .s6-tabla thead th { background: #f1f4f6; color: var(--text); letter-spacing: .06em; white-space: normal; }
.s6-doc .s6-tabla tbody th { color: var(--text); }
.s6-doc .s6-dt { margin: 12px 0; }
.s6-doc .s6-dsust { font-size: .92em; color: var(--text-faint); width: 22%; }
.s6-doc .s6-druta tbody th p { font-weight: 400; font-size: .9em; color: var(--text-faint); }
.s6-doc .s6-esc li { border-color: var(--line); }
.s6-doc .s6-mx-c { background: color-mix(in srgb, var(--gc) 26%, #fff); border-color: color-mix(in srgb, var(--gc) 50%, transparent); min-height: 58px; }
.s6-doc .s6-pin { background: #fff; color: var(--text); }
.s6-doc .s6-mx-grid { grid-template-columns: 16px 82px repeat(5, minmax(0,1fr)); }
.s6-doc .s6-g { color: var(--text); }
.s6-doc .s6-ag { color: var(--text); border-color: var(--border-strong); }
.s6-doc .s6-an { margin-top: 18px; padding: 18px 20px; border-radius: 10px; background: #f4f8fa; border: 1px solid var(--line); }
.s6-doc .s6-an-h { margin-bottom: 10px; }
.s6 .s6-doc .s6-an h3 { margin: 0; font-size: 1.05rem; }
.s6-doc .s6-an-ic { width: 34px; height: 34px; box-shadow: none; }
.s6-doc .s6-an-g { grid-template-columns: 1fr; gap: 8px; }
.s6-doc .s6-an-c { padding: 0; border: 0; background: none; }
.s6-doc .s6-an-n { display: none; }
.s6-doc .s6-ind { background: #f7f9fa; }
.s6-doc .s6-ind-bandas div { background: #fff; }
.s6-doc .s6-img.is-doc { aspect-ratio: auto; margin: 14px 0; border: 0; border-radius: 8px; box-shadow: none; transform: none; background: none; }
.s6-doc .s6-img.is-doc::after { display: none; }
.s6-doc .s6-img.is-doc img { display: block; width: 100%; height: auto; }
.s6-doc .s6-img.is-banda img { height: 240px; object-fit: cover; }
.s6-doc .s6-doc-cover img { height: 300px; object-fit: cover; }
.s6-doc .s6-doc-cover { margin: 0 0 26px; }
.s6-dplan { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.s6-dplan > * { grid-column: 1; }
.s6-dplan > .s6-ind { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
.s6-dplan-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text) !important; margin: 0 0 4px; grid-column: 1 / -1 !important; }
.s6-dplan p:not(.s6-dplan-h) { margin: 0 0 6px; font-size: .9em; }
.s6-dplan .s6-dl { margin: 4px 0 0; grid-template-columns: 92px minmax(0,1fr); gap: 5px 10px; font-size: .86em; }
.s6-dplan .s6-ind { padding: 10px 12px; font-size: .92em; }
.s6-dplan .s6-ind-meta { grid-template-columns: 1fr; gap: 6px; }
.s6-doc .s6-refs { list-style: none; padding: 0; margin: 12px 0 0; }
.s6-doc .s6-refs li { color: var(--text-muted); font-size: .88rem; line-height: 1.6; margin-bottom: 7px; padding-left: 22px; text-indent: -22px; }
.s6-refs cite { font-style: italic; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1500px) {
  .s6 .s6-sub .s6-sub-home { display: none; }
  .s6-sub-in { gap: 10px; }
  .s6-sub a { padding: 7px 8px; gap: 6px; }
}
@media (max-width: 1240px) {
  .s6-kpis { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .s6-tbh-in { grid-template-columns: 1fr; gap: 16px; }
  .s6-ps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .s6-tb-comp { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .s6-hub-in, .s6-emp { grid-template-columns: 1fr; }
  .s6-hub { min-height: 0; }
  .s6-hub-fondo { left: 0; top: 0; bottom: auto; height: 62%; }
  .s6-hub-velo { background: linear-gradient(180deg, rgba(9,12,15,.55) 0%, rgba(9,12,15,.72) 30%, var(--bg) 62%), linear-gradient(90deg, rgba(9,12,15,.6), transparent 70%); }
  .s6-hud { justify-self: center; margin: 0; }
  .s6-hero-kpi { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s6-app { grid-template-columns: 1fr; background: linear-gradient(180deg, rgba(14,18,22,.94), rgba(10,13,16,.97)); }
  .s6-app-side { position: static; flex-direction: column; padding: 14px 14px 4px; border-bottom: 1px solid var(--line); }
  .s6-app-brand { display: none; }
  .s6-app-grp { display: none; }
  .s6-app-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .s6-app-nav button { width: auto; flex: none; white-space: nowrap; }
  .s6-app-nav button[aria-selected="true"]::before { left: 10px; right: 10px; top: auto; bottom: -2px; width: auto; height: 2px; border-radius: 2px; }
  .s6-fg { flex-direction: row; align-items: center; margin: 4px 0; }
  .s6-fg > span { flex: none; min-width: 94px; }
  .s6-fg > div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .s6-app-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; padding: 10px 0; }
  .s6-app-foot .s6-csv { width: auto; }
  .s6-app-foot p { margin: 0; }
  .s6-tb-main { grid-template-columns: 1fr; }
  .s6-dock { position: relative; top: auto; max-height: none; overflow: visible; }
  .s6-dock-volver { display: inline-flex; margin: 0 20px 18px; }
  .s6-tb-g2 { grid-template-columns: 1fr; }
  .s6-memis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s6-concs { grid-template-columns: 1fr; }
  .s6-zonas { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s6-p4 { grid-template-columns: 1fr; }
  .s6-p4-der { position: static; }
  .s6-tcs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s6-an-g { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .s6-comp-cab { grid-template-columns: 1fr 1fr; }
  .s6-comp-seg { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .s6-phead.has-img .s6-phead-in, #metodo .s6-phead-in.has-img { grid-template-columns: 1fr; }
  .s6-step-rail { display: flex; overflow-x: auto; scrollbar-width: none; }
  .s6-step-rail button { flex: none; width: 92px; }
  .s6-step-rail span { display: block; }
  .s6-step-body { grid-template-columns: 1fr; }
  .s6-step-txt { min-height: 0; }
  .s6-step-ficha { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 22px 22px; }
  .s6-flujo { grid-template-columns: 1fr; gap: 14px; }
  .s6-flujo-svg { display: none; }
  .s6-flujo-mid { order: -1; }
  #s6-fe .s6-flujo-t { text-align: left; }
  .s6-ce-lista { grid-template-columns: 1fr; }
  .s6-exp { grid-template-columns: 1fr; }
  .s6-exp-l { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .s6-exp-g { display: flex; gap: 6px; flex: none; }
  .s6-exp-gk { display: none; }
  .s6-exp-b { width: 210px; flex: none; grid-template-columns: 34px minmax(0,1fr); grid-template-areas: "k n" "k a"; }
  .s6-exp-b .s6-ag, .s6-exp-b .s6-mini { justify-self: start; }
  .s6-exp-d { position: static; }
  .s6-g2, .s6-g2-w, .s6-g3, .s6-emp-ps, .s6-rzbs { grid-template-columns: 1fr; }
  .s6-pes-panel { grid-template-columns: 1fr; }
  .s6-pes-media { order: -1; }
  .s6-doc-2, .s6-dplan { grid-template-columns: 1fr; }
  .s6-dplan > .s6-ind { grid-column: 1; grid-row: auto; }
  .s6-zts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .s6 { --sub-h: 50px; }
  .s6-sub .s6-sub-home { display: none; }
  .s6-hub { padding-top: 30px; }
  .s6-hub-eye { font-size: .62rem; letter-spacing: .1em; }
  .s6-hud-card.is-chip { display: none; }
  .s6-hud { width: 100%; }
  .s6-hero-kpi { grid-template-columns: 1fr 1fr; gap: 8px; }
  .s6-hero-kpi > div { grid-template-columns: 1fr; grid-template-areas: "ic" "b" "s"; gap: 8px; padding: 12px; }
  .s6-hero-kpi > div.has-gauge { grid-template-areas: "ic" "s"; }
  .s6-hk-ic { width: 36px; height: 36px; }
  .s6-ps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .s6-ps li { flex: 0 0 72%; scroll-snap-align: start; }
  .s6-cap { flex-wrap: wrap; gap: 12px 16px; }
  .s6-cap-num { font-size: 3.4rem; }
  .s6-clave { flex: 1 1 calc(50% - 10px); max-width: none; min-width: 0; }
  .s6-comp-eti b { font-size: .92rem; }
  .s6-comp-seg button { padding: 7px 10px; font-size: .78rem; }
  .s6-hechos { grid-template-columns: 1fr 1fr; }
  .s6-hecho { grid-template-columns: 1fr; grid-template-areas: "ic" "b" "s"; gap: 6px; }
  .s6-memis { grid-template-columns: 1fr; }
  .s6-leer { flex-direction: column; gap: 10px; }
  .s6-app-main { padding: 14px 12px 16px; }
  .s6-app-top { flex-direction: column; align-items: stretch; }
  .s6-app-crumb { margin: 0; }
  .s6-app-buscar { min-width: 0; }
  .s6-seg { align-self: flex-start; }
  .s6-play { justify-content: center; }
  .s6-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s6-kpi.is-wide { grid-column: 1 / -1; order: 5; }
  .s6-tb-comp { grid-template-columns: 1fr; }
  .s6-tb-comp .s6-prio { columns: 1; }
  .s6-p4-esc { grid-template-columns: 1fr; }
  .s6-tcs, .s6-zonas { grid-template-columns: 1fr; }
  .s6-mx-grid, .s6-doc .s6-mx-grid { grid-template-columns: 12px 62px repeat(5, minmax(0,1fr)); gap: 3px; }
  .s6-mx-y span { display: none; }
  .s6-mx-x span { font-size: .56rem; }
  .s6-mx-c { min-height: 54px; padding: 13px 2px 4px; }
  .s6-pin { font-size: .6rem; padding: 4px 3px; }
  .s6-ce-cols, .s6-ind-meta { grid-template-columns: 1fr; }
  .s6-dl, .s6-ff, .s6-rf, .s6-idf { grid-template-columns: 1fr; gap: 4px; }
  .s6-panel { padding: 18px 16px 60px; }
  .s6-mer { grid-template-columns: 34px minmax(0,1fr); }
  .s6-mer .s6-g, .s6-mer .s6-vf { grid-column: 2; justify-self: start; }
  .s6-sem { grid-template-columns: 34px minmax(0,1fr); }
  .s6-sem-b, .s6-sem-f { grid-column: 2; text-align: left; }
  .s6-plan header .s6-mov { margin-left: 0; }
  .s6-hito li { grid-template-columns: auto minmax(0,1fr); }
  .s6-hito li > .s6-ic { display: none; }
  .s6-hr-img { aspect-ratio: 4 / 3; }
  .s6-fin-acc { width: 100%; }
  .s6-doc-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* =====================================================================
   MOVIMIENTO REDUCIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s6 *, .s6 *::before, .s6 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  body.s6-js .s6-anim { opacity: 1; transform: none; }
  body.s6-js .s6-l > span { transform: none; }
  body.s6-js .s6-hud-dot { left: var(--x1); top: var(--y1); background: var(--c1); animation: none; }
  body.s6-js .s6-hud-est .is-a { opacity: 0; animation: none; }
  body.s6-js .s6-hud-est .is-b { opacity: 1; animation: none; }
}

/* =====================================================================
   IMPRESIÓN · el documento es la versión que se entrega en PDF
   ===================================================================== */
@page { size: A4; margin: 16mm 15mm 18mm; }
@media print {
  html, body { background: #fff !important; }
  .site-header, .site-nav, .s6-sub, .grain, .s6-halo, .site-footer, .fab-comment, .cbox, .s6-tip,
  .s6-panel, .s6-velo, .s6-doc-bar, .s6-leer, .s6-copiar, .s6-slot, .s6-sim { display: none !important; }
  .s6-main { padding: 0; }
  body.s6-js .s6-anim { opacity: 1 !important; transform: none !important; }
  .s6-doc { width: auto; margin: 0; padding: 0; box-shadow: none; border-radius: 0; font-size: 10.5pt; }
  .s6-doc-portada { min-height: 245mm; display: flex; flex-direction: column; justify-content: center; border: 0; break-after: page; }
  .s6-doc .s6-doc-cover img { height: 95mm; }
  .s6-doc .s6-img.is-banda img { height: 58mm; }
  .s6-doc-s { break-before: page; padding-top: 0; }
  .s6-doc-s#doc-intro { break-before: auto; }
  .s6-doc .s6-tabla tr, .s6-dplan, .s6-ind, .s6-an-c, .s6-mx, .s6-esc li, .s6-img, .s6-doc-4 { break-inside: avoid; }
  .s6-doc h2, .s6-doc h3 { break-after: avoid; }
  .s6-mx-c, .s6-g i, .s6-g, .s6-ind-bandas div, .s6-doc .s6-tabla thead th, .s6-rz.is-on, .s6-an, .s6-an-ic { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .s6-tabla-wrap { overflow: visible; }
  .s6-doc a { color: inherit; text-decoration: none; }
  /* la página A4 mide ~720 px: las reglas de pantalla estrecha no deben apilar el documento */
  .s6-doc .s6-doc-2 { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .s6-doc .s6-doc-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  .s6-doc .s6-dplan { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr) !important; }
  .s6-doc .s6-dplan > .s6-ind { grid-column: 2 !important; grid-row: 2 / span 2 !important; }
  .s6-doc .s6-doc-2 .s6-mx-grid { grid-template-columns: 12px 66px repeat(5, minmax(0,1fr)) !important; gap: 3px; }
  .s6-doc .s6-doc-2 .s6-mx-y { padding-right: 5px; }
  .s6-doc .s6-doc-2 .s6-mx-y b { font-size: .6rem; }
  .s6-doc .s6-dplan .s6-ind-bandas span { font-size: .54rem; letter-spacing: .02em; }
  .s6-doc .s6-dplan .s6-ind-bandas div { padding: 5px 6px; }
  .s6-doc .s6-doc-2 .s6-mx-y span { display: none; }
  .s6-doc .s6-doc-2 .s6-mx-c { min-height: 46px; padding: 12px 2px 3px; }
  .s6-doc .s6-doc-2 .s6-pin { font-size: .58rem; padding: 3px 3px; }
  .s6-doc .s6-doc-2 .s6-mx-x span { font-size: .56rem; }
}