/* Datos y Voces · PLANEO — estilos
   Línea gráfica institucional (Región Metropolitana Bogotá–Cundinamarca / PLANEO):
   azul institucional, dorado y verde del PLANEO, Nunito Sans. Escena inmersiva en azul,
   secciones de lectura sobre fondos claros. */

@font-face { font-family: 'Nunito Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('../assets/fonts/nunito-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/nunito-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/nunito-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 800; font-style: normal; font-display: swap; src: url('../assets/fonts/nunito-sans-latin-800-normal.woff2') format('woff2'); }



:root {
  --navy: #173d62;
  --navy-2: #0d356d;
  --navy-d: #0a2b5c;
  --blue: #3366cc;
  --gold: #f6c62b;
  --lime: #8cc63f;
  --cyan: #3cc3dc;
  --orange: #f28c28;
  --t1: #f6c62b; --t1i: #a87800;
  --t2: #2bb4d3; --t2i: #0b7a93;
  --t3: #7cb82f; --t3i: #4a7d12;
  --tx: #173d62; --txi: #173d62;
  --bg: #ffffff;
  --bg-2: #eef3f9;
  --ink: #ffffff;
  --soft: rgba(255, 255, 255, .72);
  --faint: rgba(255, 255, 255, .5);
  --line: rgba(255, 255, 255, .2);
  /* variables de lectura (se invierten en bloques oscuros) */
  --fg: #173d62; --body: #343a40; --mut: rgba(23, 61, 98, .62); --ln: rgba(23, 61, 98, .16); --chip: rgba(23, 61, 98, .35); --bgc: #fff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gut: clamp(18px, 1.95vw, 28px);
  --seg: 85vh;
  --display: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  --body-font: 'Nunito Sans', Arial, Verdana, sans-serif;
  font-family: var(--body-font);
  color: #fff;
  background: var(--navy);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { overflow-anchor: none; scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.is-preloading { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============ Escena fija ============ */
.experience { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: linear-gradient(160deg, #173d62 0%, #0a2b5c 100%); min-height: 540px; }
.scene-canvas, .portal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-canvas { z-index: 0; }
.portal-canvas { z-index: 3; pointer-events: none; }
.shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 22, 46, .4) 0%, transparent 30%, transparent 50%, rgba(6, 22, 46, .94) 100%); }
.experience.is-away { visibility: hidden; }

.chrome { position: absolute; z-index: 4; transition: opacity .45s ease, filter .45s ease; }
.experience.is-transitioning .chrome { opacity: 0; filter: blur(8px); pointer-events: none; }
.experience.is-transitioning .axis-list { opacity: 1; filter: none; pointer-events: auto; }
.experience.is-committing .scene-canvas { transition: none !important; }

/* ============ Cabecera ============ */
.header { position: fixed; z-index: 50; left: var(--gut); right: var(--gut); top: clamp(18px, 3.1vh, 28px); display: flex; justify-content: space-between; align-items: center; pointer-events: none; min-height: 45px; }
.header > * { pointer-events: auto; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav { display: flex; align-items: center; height: 44px; padding: 4px 5px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 999px; transition: opacity .3s ease, background .3s, border-color .3s; }
.nav a { color: #fff; text-decoration: none; padding: 9px 17px; border-radius: 999px; line-height: 1; font-size: 14px; font-weight: 600; transition: background .3s ease, color .3s ease; }
.nav a:hover { background: rgba(255, 255, 255, .16); }
.nav a.active { background: var(--gold); color: var(--navy); }
.menu { height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gold); color: var(--navy); cursor: pointer; font-size: 14px; font-weight: 700; transition: background .3s, color .3s; }
body.on-light .nav { background: rgba(255, 255, 255, .92); border-color: rgba(23, 61, 98, .3); box-shadow: 0 2px 14px rgba(23, 61, 98, .08); }
body.on-light .nav a { color: var(--navy); }
body.on-light .nav a:hover { background: rgba(23, 61, 98, .08); }
body.on-light .nav a.active { background: var(--navy); color: #fff; }
body.on-light .menu { background: var(--navy); color: #fff; }
body.menu-open .nav { opacity: 0; pointer-events: none; }
body.menu-open .menu { background: var(--gold); color: var(--navy); }

.menu-panel { position: fixed; inset: 0; z-index: 45; overflow-y: auto; background: rgba(10, 43, 92, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; padding: 90px var(--gut) 24px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.menu-open .menu-panel { opacity: 1; visibility: visible; }
.menu-panel nav { display: flex; flex-direction: column; gap: 2px; width: min(720px, 100%); margin: 0 auto; }
.menu-panel a { display: flex; align-items: baseline; gap: 18px; font-weight: 800; font-size: clamp(24px, 4.2vw, 44px); line-height: 1.15; text-decoration: none; text-transform: uppercase; letter-spacing: -.01em; border-bottom: 1px solid var(--line); padding: 9px 0; transform: translateY(16px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), color .3s; }
.menu-panel a i { font-style: normal; font-weight: 300; font-size: 14px; color: var(--faint); min-width: 24px; letter-spacing: 0; }
.menu-panel a:hover { color: var(--gold); }
.menu-open .menu-panel a { transform: none; opacity: 1; }
.menu-open .menu-panel a:nth-child(2) { transition-delay: .04s; } .menu-open .menu-panel a:nth-child(3) { transition-delay: .08s; }
.menu-open .menu-panel a:nth-child(4) { transition-delay: .12s; } .menu-open .menu-panel a:nth-child(5) { transition-delay: .16s; }
.menu-open .menu-panel a:nth-child(6) { transition-delay: .2s; } .menu-open .menu-panel a:nth-child(7) { transition-delay: .24s; }

/* ============ Preloader y logo ============ */
.preloader { position: fixed; inset: 0; z-index: 40; background: linear-gradient(160deg, #0a2b5c, #173d62); overflow: hidden; transition: opacity 1.1s ease .2s; }
.preloader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.preloader-shade { position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(to bottom, transparent, rgba(6, 22, 46, .9)); }
.preloader.is-done { opacity: 0; pointer-events: none; }
.floating-logo { position: fixed; z-index: 62; left: 50%; top: 46%; width: min(300px, 68vw); transform: translate(-50%, -50%); will-change: left, top, width, transform; display: block; line-height: 0;
  transition: left 2s cubic-bezier(.16, 1, .3, 1), top 2s cubic-bezier(.16, 1, .3, 1), width 2s cubic-bezier(.16, 1, .3, 1), transform 2s cubic-bezier(.16, 1, .3, 1); }
.floating-logo img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 26px rgba(4, 16, 36, .35); transition: border-radius 2s; }
.floating-logo.is-docked { left: var(--gut); top: clamp(18px, 3.1vh, 28px); width: 124px; transform: none; }
.floating-logo.is-docked img { border-radius: 8px; }
.preloader-count { position: fixed; z-index: 62; left: 50%; bottom: clamp(22px, 3.1vh, 28px); display: flex; align-items: flex-end; gap: 4px; transform: translateX(-50%); line-height: 1; }
.preloader-count > span:first-child { font-size: 64px; font-weight: 300; }
.preloader-count .percent { font-size: 24px; padding-bottom: 4px; font-weight: 600; color: var(--gold); }
.preloader-count.is-leaving { animation: count-out .75s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes count-out { to { opacity: 0; filter: blur(7px); transform: translate(-50%, -34px); } }
body:not(.preload-complete) .header { opacity: 0; }
body:not(.preload-complete) .custom-cursor { opacity: 0 !important; }
.loading { position: absolute; z-index: 12; left: 50%; bottom: 30px; transform: translateX(-50%); opacity: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; transition: opacity .2s; }

/* ============ Lista de ejes ============ */
.axis-list { left: var(--gut); top: 50%; transform: translateY(-43%); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.axis-item { display: flex; align-items: center; gap: 0; min-height: 26px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--soft); font-weight: 600; transition: color .3s; }
.axis-item:hover { color: #fff; }
.axis-item .ai-n { display: inline-block; min-width: 26px; font-weight: 300; font-size: 12px; color: var(--faint); }
.axis-item.active { font-size: 16px; font-weight: 800; color: #fff; gap: 8px; }
.axis-item.active .ai-n { min-width: 0; font-size: 0; }
.axis-item.active::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--lime)); }

/* ============ Portal ============ */
.portal-wrap { left: 50%; top: 42%; width: min(320px, 31vw, 44vh); transform: translate(-50%, -54%); }
.portal-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 15px; opacity: 0; }
.portal-heading strong { font-size: 17px; margin-left: 8px; font-weight: 800; color: var(--gold); }
.portal { position: relative; display: block; width: 100%; aspect-ratio: 320 / 350; padding: 0; overflow: visible; border: 0; border-radius: 90px; background: transparent; cursor: pointer; box-shadow: none; transform: none !important; }
.portal-hint { margin: 14px 0 0; text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity .6s ease; font-weight: 600; }
.intro-ready .portal-hint { opacity: 1; }
.is-scrolled .portal-hint { opacity: 0; }
.mask-revealing .portal-heading { animation: portal-caption .85s var(--ease) both; }
.intro-ready .portal-heading { opacity: 1; }

/* ============ Contenido del eje ============ */
.stage-content { left: clamp(28px, 4vw, 58px); right: clamp(28px, 3vw, 44px); bottom: clamp(24px, 3vh, 30px); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: 0; display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ''; width: 34px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--lime)); flex: none; }
.stage-content h1 { font-weight: 800; font-size: clamp(40px, 7vw, 104px); line-height: .92; margin: 0 0 -.02em; letter-spacing: -.025em; text-transform: uppercase; transform: translateX(-3px); opacity: 0; }
.stage-content dl { width: min(500px, 36vw); margin: 0; font-size: 14px; line-height: 1.45; }
.fact { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .34); opacity: 0; }
.fact:last-child { border-bottom: 0; }
.fact dt { font-weight: 800; color: var(--gold); }
.fact dd { margin: 0; color: rgba(255, 255, 255, .92); }
.fact dd b { color: #fff; }

.intro-ready .header { animation: reveal-down .9s var(--ease) .1s both; }
.intro-ready .axis-list { animation: reveal-side .9s var(--ease) .65s both; }
.content-revealing .kicker { animation: fact-rise .72s var(--ease) both; }
.content-revealing h1 { animation: title-rise 1.05s cubic-bezier(.16, 1, .3, 1) both; }
.content-revealing .fact { animation: fact-rise .72s var(--ease) both; }
.content-revealing .fact:nth-child(1) { animation-delay: .52s; } .content-revealing .fact:nth-child(2) { animation-delay: .68s; }
.content-revealing .fact:nth-child(3) { animation-delay: .84s; } .content-revealing .fact:nth-child(4) { animation-delay: 1s; }
.axis-list.is-switching .axis-item { animation: menu-row .58s var(--ease) both; }
.axis-list.is-switching .axis-item:nth-child(1) { animation-delay: .02s; } .axis-list.is-switching .axis-item:nth-child(2) { animation-delay: .05s; }
.axis-list.is-switching .axis-item:nth-child(3) { animation-delay: .08s; } .axis-list.is-switching .axis-item:nth-child(4) { animation-delay: .11s; }
.axis-list.is-switching .axis-item:nth-child(5) { animation-delay: .14s; } .axis-list.is-switching .axis-item:nth-child(6) { animation-delay: .17s; }
.axis-list.is-switching .axis-item:nth-child(7) { animation-delay: .2s; }
.axis-list.is-switching .axis-item.active::before { animation: active-dot .55s var(--ease) .18s both; }

@keyframes reveal-down { from { opacity: 0; filter: blur(8px); transform: translateY(-18px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes reveal-side { from { opacity: 0; filter: blur(8px); transform: translate(-20px, -43%); } to { opacity: 1; filter: blur(0); transform: translate(0, -43%); } }
@keyframes title-rise { from { opacity: 0; filter: blur(12px); transform: translate(-3px, 42px); } to { opacity: 1; filter: blur(0); transform: translate(-3px, 0); } }
@keyframes fact-rise { from { opacity: 0; filter: blur(7px); transform: translateY(18px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes portal-caption { from { opacity: 0; filter: blur(7px); transform: translateY(22px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes menu-row { from { opacity: .35; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes active-dot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

body:not(.intro-ready) .axis-list, body:not(.intro-ready) .stage-content h1, body:not(.intro-ready) .fact, body:not(.intro-ready) .kicker { opacity: 0; }

/* ============ Cursor personalizado ============ */
.custom-cursor { display: none; position: fixed; left: 0; top: 0; z-index: 100; width: 1px; height: 1px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.has-cursor .custom-cursor { display: block; }
.has-cursor, .has-cursor * { cursor: none !important; }
.custom-cursor.is-visible { opacity: 1; }
.cursor-dot, .cursor-orbit { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 12px; height: 12px; background: var(--gold); }
.cursor-orbit { width: 36px; height: 36px; border: 1.5px solid var(--gold); background: rgba(246, 198, 43, .22); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.custom-cursor.is-enter .cursor-orbit { transform: translate(-50%, -50%) scale(1.16); }
.cursor-label { position: absolute; top: 26px; left: 0; transform: translateX(-50%) translateY(-4px); font: 700 15px/1.2 var(--body-font); white-space: nowrap; opacity: 0; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.custom-cursor.is-enter .cursor-label { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ Flujo de contenido ============ */
.scroll-track { position: relative; z-index: 2; height: calc(var(--seg) * 10.6 + 100vh); pointer-events: none; }
.track-anchor { position: absolute; top: var(--seg); left: 0; width: 1px; height: 1px; }
.flow { position: relative; z-index: 5; background: #fff; }
.wrap { width: min(1240px, 100% - 2 * var(--gut)); margin: 0 auto; }
.block { padding: clamp(84px, 13vh, 150px) 0; background: #fff; color: var(--body); }
.block.alt { background: var(--bg-2); }
.block.dark { background: linear-gradient(160deg, #173d62, #0a2b5c); color: rgba(255, 255, 255, .86);
  --fg: #fff; --body: rgba(255, 255, 255, .86); --mut: rgba(255, 255, 255, .66); --ln: rgba(255, 255, 255, .22); --chip: rgba(255, 255, 255, .4); --bgc: #173d62; }
.block-head { max-width: 860px; margin-bottom: clamp(36px, 6vh, 64px); }
.eyebrow { margin: 0 0 20px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); display: flex; align-items: center; gap: 14px; }
.eb-n { font-weight: 300; color: var(--mut); }
.eb-n::after { content: ''; display: inline-block; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--lime)); vertical-align: middle; margin-left: 14px; }
h2 { font-weight: 800; font-size: clamp(26px, 3.7vw, 54px); line-height: 1.06; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 22px; color: var(--fg); }
.lead { margin: 0; max-width: 640px; font-size: clamp(15px, 1.25vw, 18px); color: var(--body); }
.lead strong { color: var(--fg); }

.js .reveal { opacity: 0; filter: blur(7px); transform: translateY(18px); }
.js .reveal.in { animation: fact-rise .85s var(--ease) both; animation-delay: var(--d, 0s); }

/* Filtros */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip { height: 38px; padding: 0 17px; border-radius: 999px; border: 1.5px solid var(--chip); background: transparent; color: var(--fg); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bgc); border-color: var(--fg); }
.count { margin: 0 0 24px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); min-height: 18px; }

/* Situaciones */
.sr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 44px); }
.sr-card { position: relative; padding: 22px 0 30px; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 14px; }
.sr-card::before { content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--c, var(--navy)); transition: width .7s var(--ease); }
.sr-card:hover::before, .sr-card.flash::before { width: 100%; }
.sr-card.is-hidden { display: none; }
.sr-card.flash { background: linear-gradient(to bottom, rgba(51, 102, 204, .08), transparent); }
.sr-num { font-weight: 300; font-size: 46px; line-height: 1; letter-spacing: -.03em; color: var(--fg); }
.sr-text { margin: 0; font-size: 16px; line-height: 1.5; flex: 1; color: var(--body); }
.sr-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--mut); }
.sr-axis { letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; font-weight: 700; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 1px solid var(--ln); border-radius: 999px; background: none; color: var(--fg); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .25s, background .25s; }
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--navy)); }
.tag:hover { border-color: var(--fg); background: rgba(23, 61, 98, .07); }
.dark .tag:hover { background: rgba(255, 255, 255, .1); }

/* Transformaciones */
.tf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.tf { position: relative; padding-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.tf::before { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; border-radius: 2px; }
.tf.in::before { transform: scaleX(1); }
.tf-n { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.tf h3 { font-weight: 800; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.06; letter-spacing: -.02em; text-transform: uppercase; margin: 0; color: #fff; }
.tf-lead { margin: 0; color: var(--mut); font-size: 14px; font-weight: 600; }
.tf-text { margin: 0; font-size: 16px; color: var(--body); }
.tf-list { margin: 8px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ln); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--mut); font-weight: 700; }
.priority { margin: clamp(40px, 7vh, 72px) 0 0; padding-top: 22px; border-top: 1px solid var(--ln); font-size: 15px; font-weight: 700; color: #fff; display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.priority span { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--gold); }

/* Estrategias */
.st-group { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0 clamp(20px, 4vw, 60px); padding: 26px 0; border-top: 1px solid var(--ln); }
.st-group-head { position: sticky; top: 84px; align-self: start; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ci); }
.st-group-head b { display: block; margin-top: 6px; font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; color: var(--fg); }
.st { border-bottom: 1px solid var(--ln); }
.st:last-child { border-bottom: 0; }
.st-btn { width: 100%; display: grid; grid-template-columns: 56px 1fr 28px; gap: 12px; align-items: start; padding: 18px 0; background: none; border: 0; text-align: left; cursor: pointer; }
.st-n { font-weight: 800; font-size: 34px; line-height: .95; letter-spacing: -.03em; color: var(--ci); }
.st-t { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; color: var(--fg); font-weight: 600; }
.st-i { position: relative; width: 20px; height: 20px; margin-top: 4px; }
.st-i::before, .st-i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 1px; background: var(--fg); transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.st-i::after { transform: translate(-50%, -50%) rotate(90deg); }
.st.open .st-i::after { transform: translate(-50%, -50%) rotate(0); }
.st-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.st.open .st-panel { grid-template-rows: 1fr; }
.st-panel > div { overflow: hidden; padding-left: 68px; }
.st-sub { margin: 4px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.st-link { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 22px; padding: 0 18px; border-radius: 999px; background: var(--navy); color: #fff; border: 0; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .3s; }
.st-link:hover { background: var(--blue); }

/* Programas */
.pg-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(20px, 4vw, 60px); }
.pg { break-inside: avoid; display: grid; grid-template-columns: 46px 1fr; gap: 6px 12px; padding: 16px 0; border-top: 1px solid var(--ln); }
.pg.is-hidden { display: none; }
.pg.flash { background: linear-gradient(to bottom, rgba(51, 102, 204, .08), transparent); }
.pg-n { font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: var(--ci); }
.pg-t { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.pg-e { grid-column: 2; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* Ruta */
.route-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ln); }
.rs { position: relative; padding: 28px clamp(10px, 1.4vw, 24px) 10px 0; }
.rs + .rs { padding-left: clamp(10px, 1.4vw, 24px); border-left: 1px solid var(--ln); }
.rs-num { font-weight: 800; font-size: clamp(48px, 6.6vw, 104px); line-height: .9; letter-spacing: -.04em; }
.rs-name { margin: 14px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.rs-desc { margin: 0; font-size: 14px; color: var(--mut); }
.rs:nth-child(1) .rs-num { color: #fff; } .rs:nth-child(2) .rs-num { color: var(--t1); } .rs:nth-child(3) .rs-num { color: var(--t2); } .rs:nth-child(4) .rs-num { color: var(--t3); } .rs:nth-child(5) .rs-num { color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 7vh, 72px); }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--gold); color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 800; border: 1.5px solid var(--gold); transition: background .3s, color .3s; }
.btn:hover { background: transparent; color: var(--gold); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

.foot { padding: 48px 0 56px; font-size: 14px; color: rgba(255, 255, 255, .78); background: var(--navy); border-top: 4px solid; border-image: linear-gradient(90deg, var(--gold), var(--lime)) 1; }
.foot-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; }
.foot p { margin: 0 0 6px; }
.foot-title { color: #fff; font-size: 12px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px !important; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .sr-grid { grid-template-columns: repeat(2, 1fr); }
  .stage-content dl { width: min(500px, 42vw); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .portal-wrap { top: 29%; width: min(260px, 40vw, 36vh); }
  .stage-content { display: block; left: 28px; right: 28px; }
  .stage-content h1 { font-size: clamp(40px, 9vw, 76px); margin-bottom: 16px; }
  .stage-content dl { width: 100%; font-size: 13px; }
  .fact { grid-template-columns: 110px 1fr; }
  .axis-list { font-size: 13px; }
  .axis-item.active { font-size: 15px; }
  .tf-grid { grid-template-columns: 1fr; gap: 44px; }
  .st-group { grid-template-columns: 1fr; gap: 8px; }
  .st-group-head { position: static; }
  .pg-list { columns: 1; }
  .route-steps { grid-template-columns: 1fr; border-top: 0; }
  .rs { display: grid; grid-template-columns: 34% 1fr; align-items: center; gap: 0 16px; padding: 18px 0; border-top: 1px solid var(--ln); }
  .rs + .rs { padding-left: 0; border-left: 0; }
  .rs-num { grid-row: 1 / 3; font-size: clamp(48px, 14vw, 84px); }
  .rs-name { margin: 0 0 4px; align-self: end; }
  .rs-desc { align-self: start; }
  .foot-grid { grid-template-columns: 1fr; }
  .floating-logo.is-docked { width: 108px; }
}
@media (max-width: 640px) {
  .experience { min-height: 600px; }
  .axis-list { display: none; }
  .portal-wrap { top: 27%; width: min(210px, 54vw, 30vh); transform: translate(-50%, -50%); }
  .portal { border-radius: 70px; }
  .portal-heading { font-size: 13px; margin-bottom: 8px; } .portal-heading strong { font-size: 15px; }
  .portal-hint { display: none; }
  .stage-content { left: 18px; right: 18px; bottom: 18px; display: block; }
  .stage-content h1 { font-size: clamp(36px, 11vw, 56px); margin-bottom: 14px; }
  .kicker { font-size: 11px; margin-bottom: 10px; }
  .stage-content dl { width: 100%; font-size: 12px; line-height: 1.35; }
  .fact { grid-template-columns: 82px 1fr; gap: 10px; padding: 5px 0; }
  .menu { height: 40px; }
  .sr-grid { grid-template-columns: 1fr; }
  .st-btn { grid-template-columns: 40px 1fr 24px; }
  .st-n { font-size: 28px; }
  .st-panel > div { padding-left: 52px; }
  .floating-logo.is-docked { width: 92px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .stage-content h1 { font-size: clamp(36px, 5.6vw, 80px); }
  .portal-wrap { top: 38%; }
  .stage-content dl { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .js .reveal { opacity: 1; filter: none; transform: none; }
}

/* ============ Ruta de scroll (Situaciones → final) ============ */
.route-rail { --p: 0; --rr-ln: rgba(255, 255, 255, .26); --rr-bd: #fff; --rr-bg: #173d62; --rr-tx: #fff;
  position: fixed; z-index: 55; right: 18px; top: 50%; width: 16px; height: 52vh; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .5s ease, --rr-ln .3s; }
.route-rail.is-on { opacity: 1; pointer-events: auto; }
body.on-light .route-rail { --rr-ln: rgba(23, 61, 98, .18); --rr-bd: #173d62; --rr-bg: #fff; --rr-tx: #173d62; }
.rr-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--rr-ln); }
.rr-fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, var(--gold), var(--cyan) 50%, var(--lime));
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
.rr-fill::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .85) 0 3px, transparent 3px 18px);
  mix-blend-mode: overlay; animation: rr-flow 1.4s linear infinite; }
@keyframes rr-flow { to { background-position: 0 18px; } }
.rr-orb { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 0; height: 0; transition: top .18s linear; }
.rr-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--rr-bg), 0 0 14px rgba(246, 198, 43, .8); }
.rr-ring { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--gold); animation: rr-pulse 2s ease-out infinite; }
@keyframes rr-pulse { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.5); opacity: 0; } }
.rr-st { position: absolute; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; display: block; text-decoration: none; }
.rr-st i { position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--rr-bg); border: 2px solid var(--rr-bd); opacity: .55; transition: transform .3s, background .3s, opacity .3s, border-color .3s; }
.rr-st.is-done i { background: var(--cyan); border-color: var(--cyan); opacity: 1; }
.rr-st.is-active i { background: var(--gold); border-color: var(--gold); opacity: 1; transform: scale(1.35); }
.rr-st span { position: absolute; right: 24px; top: 50%; transform: translate(8px, -50%); white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px;
  background: var(--rr-bd); color: var(--rr-bg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.rr-st span b { color: var(--gold); margin-right: 4px; }
body.on-light .rr-st span b { color: var(--gold); }
.rr-st:hover span, .rr-st:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.rr-bar { display: none; }
@media (max-width: 900px) {
  .route-rail { right: 0; left: 0; top: 0; width: auto; height: 3px; transform: none; pointer-events: none; }
  .route-rail > :not(.rr-bar) { display: none; }
  .rr-bar { display: block; height: 3px; background: var(--rr-ln); }
  .rr-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--gold), var(--cyan), var(--lime)); }
}
@media (prefers-reduced-motion: reduce) { .rr-fill::after, .rr-ring { animation: none; } .rr-orb { transition: none; } }

/* ============ Geovisor embebido ============ */
.geo-block { padding: clamp(104px, 12vh, 132px) 0 clamp(48px, 7vh, 76px); border-top: 3px solid; border-image: linear-gradient(90deg, var(--gold), var(--lime)) 1; }
.geo-block .viewer { margin-top: 0; }
.viewer { margin: 56px 0 8px; }
.viewer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.viewer-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.viewer-head h3 { margin: 0; font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; line-height: 1.15; }
.viewer-frame { position: relative; height: clamp(420px, 72vh, 720px); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); box-shadow: 0 24px 60px rgba(4, 16, 36, .35); }
.viewer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 640px) { .viewer { margin-top: 40px; } .viewer-frame { height: 70vh; border-radius: 12px; } }

/* Geovisor a todo el ancho; el encabezado conserva la alineación del contenido */
.viewer { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; }
.viewer-head { width: min(1240px, 100% - 2 * var(--gut)); margin-left: auto; margin-right: auto; }
.viewer-frame { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; height: clamp(460px, 80vh, 820px); }
@media (max-width: 640px) { .viewer-frame { border-radius: 0; height: 75vh; } }

/* ============ Introducción interactiva ============ */
body.intro-on { overflow: hidden; }
body.intro-on .nav, body.intro-on .menu { opacity: 0; pointer-events: none; }
body.intro-on .route-rail { display: none; }
.intro { --ix: 0; position: fixed; inset: 0; z-index: 42; color: #fff; overflow: hidden; background: linear-gradient(160deg, #0a2b5c 0%, #173d62 100%);
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.intro[hidden] { display: none; }
.intro.is-on { opacity: 1; visibility: visible; }
.intro.is-leaving { opacity: 0; visibility: hidden; transition: opacity .9s ease .1s, visibility 0s linear 1s; }
.intro-bg { position: absolute; inset: -10%; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at calc(20% + var(--ix) * 12%) 30%, rgba(60, 195, 220, .16), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(246, 198, 43, .12), transparent 38%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 64px 64px;
  transition: background-position 1s; }
.intro-inner { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 72px); align-items: center;
  padding: 112px var(--gut) 112px; max-width: 1480px; margin: 0 auto; }
.intro-text { max-width: 560px; }
.intro-kicker { margin: 0 0 16px; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.intro-kicker::before { content: ""; width: 34px; height: 2px; background: var(--gold); }
.intro-title { margin: 0 0 20px; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; font-size: clamp(26px, 3.3vw, 50px); text-wrap: balance; }
.intro-title.is-long { font-size: clamp(21px, 2.35vw, 34px); line-height: 1.2; }
.intro-body p { margin: 0 0 14px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.intro-body a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.intro-body a:hover { color: #fff; }
.intro-body strong { color: #fff; }
.intro-hint { margin: 22px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); display: flex; align-items: center; gap: 10px; min-height: 18px; }
.intro-hint:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: rr-pulse 1.8s ease-out infinite; }
.intro-text > * { transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.intro.is-swapping .intro-text > * { opacity: 0; transform: translateY(14px); }

.intro-visual { position: relative; height: min(62vh, 640px); min-height: 280px; }
.iv { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(40px) scale(.98);
  transition: opacity .6s ease, transform .8s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .8s; }
.iv.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: .15s, .15s, 0s; }
.iv-card { position: relative; width: 100%; max-height: 100%; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(4, 16, 36, .5); transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; clip-path: inset(0 100% 0 0 round 22px); }
.iv.is-active .iv-card { clip-path: inset(0 0 0 0 round 22px); transition: transform .25s ease-out, clip-path 1.2s cubic-bezier(.65, 0, .25, 1) .25s; }
.iv-card img { display: block; width: 100%; height: auto; max-height: min(62vh, 640px); object-fit: contain; border-radius: 22px; }

/* puntos interactivos sobre los municipios */
.hot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 2; }
.hot::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: rgba(23, 61, 98, .88); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); transition: transform .25s; }
.hot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: rr-pulse 2.2s ease-out infinite; }
.hot:nth-child(3n)::after { border-color: var(--cyan); animation-delay: .5s; } .hot:nth-child(3n+1)::after { animation-delay: 1s; border-color: var(--lime); }
.hot:hover::before, .hot:focus-visible::before, .hot.is-open::before { transform: scale(1.55); background: var(--gold); }
.hot .tip, .hot-tip { position: absolute; }
.hot-tip { left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 6px); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: #173d62; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.hot:hover .hot-tip, .hot:focus-visible .hot-tip, .hot.is-open .hot-tip { opacity: 1; transform: translate(-50%, 0); }

/* brecha */
.gap-sweep, .gap-hot { position: absolute; left: 37%; top: 14%; width: 31.9%; height: 64.5%; }
.gap-sweep { border-radius: 6px; background: linear-gradient(90deg, rgba(214, 60, 60, 0) 0%, rgba(214, 60, 60, .16) 50%, rgba(214, 60, 60, 0) 100%); background-size: 60% 100%; background-repeat: no-repeat; background-position: -80% 0; opacity: 0; pointer-events: none; }
.iv-gap.is-active .gap-sweep { opacity: 1; animation: gap-sweep 2.6s ease-in-out 1.5s infinite; }
@keyframes gap-sweep { 0% { background-position: -80% 0; } 60%, 100% { background-position: 180% 0; } }
.gap-hot { padding: 0; border: 2px dashed transparent; background: transparent; cursor: help; border-radius: 6px; transition: border-color .3s, background .3s; }
.gap-hot:hover, .gap-hot:focus-visible { border-color: rgba(190, 40, 40, .7); background: rgba(214, 60, 60, .12); }
.gap-card { position: absolute; left: 53.5%; top: 46%; width: min(300px, 40%); transform: translate(-50%, -40%); padding: 14px 16px; border-radius: 14px; background: #173d62; color: #fff; font-size: 14px; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 14px 40px rgba(4, 16, 36, .4); }
.gap-card b { display: block; margin-bottom: 4px; color: var(--gold); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.gap-hot:hover ~ .gap-card, .gap-hot:focus-visible ~ .gap-card, .gap-card.is-open { opacity: 1; transform: translate(-50%, -50%); }

/* situaciones relevantes */
.iv-sr { flex-direction: column; gap: 26px; }
.sr-dots { display: grid; grid-template-columns: repeat(9, 1fr); gap: clamp(8px, 1.1vw, 16px); width: min(100%, 560px); }
.sr-dots i { aspect-ratio: 1; border-radius: 26%; background: var(--c); opacity: 0; transform: scale(.4) rotate(-12deg); }
.iv-sr.is-active .sr-dots i { animation: dot-in .6s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(var(--i) * 45ms + .3s); }
.iv-sr.is-active .sr-dots i:hover { transform: scale(1.18); }
@keyframes dot-in { to { opacity: 1; transform: none; } }
.iv-sr figcaption { font-size: clamp(15px, 1.3vw, 19px); color: rgba(255, 255, 255, .85); text-align: center; max-width: 460px; }
.iv-sr figcaption b { font-size: 1.6em; color: var(--gold); margin-right: 6px; font-weight: 800; }

/* punto de partida */
.st-flow { width: min(100%, 640px); display: grid; grid-template-columns: minmax(0, 1.2fr) 74px minmax(0, 1fr); align-items: center; gap: 0; grid-template-areas: "nodes join res"; }
.st-node { grid-area: auto; display: block; padding: 18px 20px; margin: 8px 0; border-radius: 16px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); transition: background .3s, transform .3s, border-color .3s; }
.st-node:hover { background: rgba(255, 255, 255, .16); border-color: var(--gold); transform: translateX(4px); }
.st-node i { display: block; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--gold); margin-bottom: 4px; }
.st-node span { display: block; font-size: clamp(17px, 1.6vw, 22px); font-weight: 800; line-height: 1.15; }
.st-node em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--cyan); font-weight: 700; }
.st-node:nth-of-type(1) { grid-column: 1; grid-row: 1; } .st-node:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.st-join { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; display: flex; align-items: center; }
.st-join svg { width: 100%; overflow: visible; } .st-join path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 160; stroke-dashoffset: 160; }
.iv-start.is-active .st-join path { animation: draw 1.2s ease .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.st-result { grid-column: 3; grid-row: 1 / span 2; text-align: center; padding: 24px 12px; border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(246, 198, 43, .12); border: 2px solid var(--gold); opacity: 0; transform: scale(.85); }
.iv-start.is-active .st-result { animation: dot-in .8s cubic-bezier(.22, 1, .36, 1) 1.1s forwards; }
.st-result strong { font-size: clamp(44px, 6vw, 80px); line-height: 1; font-weight: 800; color: var(--gold); }
.st-result strong::before { content: "+"; font-size: .5em; vertical-align: .55em; margin-right: 2px; }
.st-result span { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; margin-top: 6px; }
.st-result span { visibility: visible; }

/* controles */
.intro-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gut) clamp(20px, 3.4vh, 34px); max-width: 1480px; margin: 0 auto; }
.intro-dots { display: flex; gap: 10px; align-items: center; }
.intro-dots button { width: 34px; height: 5px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: background .3s, width .3s; }
.intro-dots button.is-active { width: 58px; background: var(--gold); }
.intro-dots button.is-done { background: var(--cyan); }
.intro-actions { display: flex; align-items: center; gap: 10px; }
.intro-skip { background: none; border: 0; color: rgba(255, 255, 255, .75); font: inherit; font-size: 13px; font-weight: 700; padding: 10px 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.intro-skip:hover { color: #fff; }
.intro-prev { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font-size: 18px; cursor: pointer; transition: background .3s, opacity .3s; }
.intro-prev:hover { background: rgba(255, 255, 255, .12); }
.intro[data-step="0"] .intro-prev { opacity: 0; pointer-events: none; }
.intro-next { cursor: pointer; font-family: inherit; }
.intro-next[data-last="1"] { animation: next-pulse 2s ease-in-out infinite; }
@keyframes next-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 198, 43, .5); } 50% { box-shadow: 0 0 0 12px rgba(246, 198, 43, 0); } }

@media (max-width: 900px) {
  .intro-inner { grid-template-columns: 1fr; align-content: start; gap: 22px; padding: 96px var(--gut) 100px; overflow-y: auto; }
  .intro-text { max-width: none; }
  .intro-title { font-size: clamp(22px, 6.2vw, 32px); } .intro-title.is-long { font-size: clamp(17px, 4.6vw, 22px); }
  .intro-visual { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .iv-card img { max-height: 40vh; }
  .st-flow { grid-template-columns: minmax(0, 1fr) 40px minmax(0, .7fr); }
  .st-node { padding: 12px 14px; } .st-node em { display: none; }
  .intro-skip { padding: 10px 4px; font-size: 12px; } .intro-actions .btn { padding: 0 18px; height: 44px; }
  .intro-dots button { width: 20px; } .intro-dots button.is-active { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .iv, .iv-card, .intro-text > *, .intro { transition-duration: .01ms !important; }
  .iv-card { clip-path: none !important; } .sr-dots i, .st-result { opacity: 1 !important; transform: none !important; animation: none !important; }
  .st-join path { stroke-dashoffset: 0; animation: none !important; }
}
.intro .intro-title { color: #fff; text-transform: none; font-family: inherit; }
.hot::before { inset: 13px; background: rgba(23, 61, 98, .12); box-shadow: none; border: 2.5px solid #173d62; }
.hot:hover::before, .hot:focus-visible::before, .hot.is-open::before { transform: scale(1.5); background: var(--gold); border-color: #173d62; }
@media (max-width: 900px) {
  .intro-inner { grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; }
  .intro-visual { width: 100%; }
}
@media (max-width: 900px) {
  .intro-inner { overflow-x: hidden; }
  .intro-visual { overflow: hidden; }
  .intro-text .intro-kicker::before { width: 22px; }
}
@media (max-width: 900px) {
  .intro-ui { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 18px; box-sizing: border-box; }
  .intro-dots { justify-content: center; }
  .intro-actions { justify-content: space-between; width: 100%; }
  .intro-actions .intro-next { margin-left: auto; }
  .intro-prev { width: 44px; height: 44px; }
  .intro-inner { padding-bottom: 130px; }
}

/* ============ Ilustraciones SVG nativas (sin fondo) ============ */
.iv-card { background: transparent; box-shadow: none; clip-path: none !important; border-radius: 0; }
.iv.is-active .iv-card { clip-path: none; }
.iv-terr .iv-card { --ar: 1.848; aspect-ratio: 1146 / 620; }
.iv-gap .iv-card { --ar: 2.42; aspect-ratio: 1680 / 694; }
.iv-terr .iv-card, .iv-gap .iv-card { width: min(100%, calc(min(62vh, 640px) * var(--ar))); }
.iv-svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: inherit; }
.iv-svg .shp { transform-box: fill-box; transform-origin: center; }
.iv.is-active .rio path, .iv.is-active .nube path, .iv.is-active .cv { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sv-draw 1.5s cubic-bezier(.65, 0, .25, 1) var(--d, 0ms) both; }
.iv.is-active .nube path { fill-opacity: 0; animation: sv-draw 1.6s cubic-bezier(.65, 0, .25, 1) var(--d, 0ms) both, sv-fill .8s ease calc(var(--d, 0ms) + 1.2s) both; }
.iv.is-active .rio g, .iv.is-active .rio > path { animation: none; }
.iv.is-active .lim path, .iv.is-active .ds, .iv.is-active .brecha, .iv.is-active .meta, .iv.is-active .scl, .iv.is-active .lbl { animation: sv-fade .9s ease var(--d, 300ms) both; }
.iv.is-active .brecha { --d: 1000ms; } .iv.is-active .meta { --d: 1700ms; } .iv.is-active .scl { --d: 2000ms; } .iv.is-active .lbl { --d: 200ms; }
.iv.is-active .shp, .iv.is-active .dt { animation: sv-pop .7s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) both; }
@keyframes sv-draw { to { stroke-dashoffset: 0; } }
@keyframes sv-fill { to { fill-opacity: 1; } }
@keyframes sv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-pop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
.iv-terr.is-active .shp:hover, .iv-gap.is-active .shp:hover { scale: 1.08; }
@media (prefers-reduced-motion: reduce) { .iv .iv-svg * { animation: none !important; stroke-dashoffset: 0 !important; fill-opacity: 1 !important; } }

/* puntos interactivos sobre fondo oscuro */
.hot::before { border: 2.5px solid #fff; background: rgba(255, 255, 255, .1); }
.hot:hover::before, .hot:focus-visible::before, .hot.is-open::before { background: var(--gold); border-color: #fff; }
.hot-tip { background: #fff; color: #173d62; box-shadow: 0 6px 20px rgba(4, 16, 36, .35); }
.gap-card { border: 1px solid rgba(255, 255, 255, .25); background: #0f3358; }

/* ============ Aviso permanente ============ */
.disclaimer { --disc-h: 30px; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding: 7px var(--gut); text-align: center; font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .8);
  background: rgba(6, 22, 46, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .14); transition: opacity .6s ease; }
.disclaimer a { color: var(--gold); font-weight: 700; text-underline-offset: 2px; }
.disclaimer a:hover { color: #fff; }
body:not(.preload-complete) .disclaimer { opacity: 0; pointer-events: none; }
:root { --disc-h: 30px; }
.stage-content { bottom: calc(clamp(24px, 3vh, 30px) + var(--disc-h)); }
.intro-inner { padding-bottom: calc(112px + var(--disc-h)); }
.intro-ui { padding-bottom: calc(clamp(20px, 3.4vh, 34px) + var(--disc-h)); }
.foot { padding-bottom: calc(56px + var(--disc-h)); }
.menu-panel { padding-bottom: calc(24px + var(--disc-h)); }
@media (max-width: 900px) { .intro-inner { padding-bottom: calc(130px + var(--disc-h)); } .intro-ui { padding-bottom: calc(14px + var(--disc-h)); } }
@media (max-width: 640px) { .stage-content { bottom: calc(18px + var(--disc-h)); } .disclaimer { font-size: 10.5px; padding: 6px 14px; } }

/* ============ Diagnóstico en 10 áreas ============ */
.stage-content h1.is-long { font-size: clamp(34px, 5.1vw, 78px); }
@media (max-width: 900px) { .stage-content h1.is-long { font-size: clamp(30px, 7.4vw, 58px); } }
@media (max-width: 640px) { .stage-content h1.is-long { font-size: clamp(26px, 8.6vw, 40px); line-height: 1; } }
.axis-list { gap: 1px; font-size: 13px; }
.axis-item { min-height: 24px; }
.axis-item.active { font-size: 15px; }
@media (max-height: 760px) { .axis-list { font-size: 12px; } .axis-item { min-height: 21px; } }

/* ============ Situaciones: leyenda y desplegables ============ */
.sr-legend { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 16px; border-radius: 14px; background: var(--chip, rgba(23, 61, 98, .06)); color: var(--body, #2b4766); font-size: 14px; line-height: 1.45; max-width: 760px; }
.sr-legend-k { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; }
.sr-legend b { color: var(--fg, var(--navy)); }
.sr-grid { align-items: start; }
.sr-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--c, var(--navy)); background: transparent; color: var(--fg, var(--navy)); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .25s, color .25s; }
.sr-more:hover { background: var(--c, var(--navy)); color: #fff; }
.sr-more i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s; }
.sr-card.is-open .sr-more i { transform: rotate(-135deg) translate(-2px, -2px); }
.sr-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1); }
.sr-card.is-open .sr-detail { grid-template-rows: 1fr; }
.sr-detail-in { overflow: hidden; min-height: 0; }
.sr-card.is-open .sr-detail-in { padding-top: 16px; }
.sr-frase { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--c, var(--navy)); font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--fg, var(--navy)); }
.sr-comp { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body, #2b4766); }
.sr-comp b { color: var(--fg, var(--navy)); }
@media (prefers-reduced-motion: reduce) { .sr-detail, .sr-more i { transition: none; } }
.sr-more { align-self: flex-start; margin-top: 2px; }

/* ---------- Árbol de conexiones ---------- */
.tree { margin-top: clamp(56px, 8vw, 110px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ln); }
.tree-head h3 { margin: 6px 0 0; font-size: clamp(28px, 4vw, 52px); color: #fff; text-transform: uppercase; letter-spacing: -.02em; }
.tree-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: 24px; }
.tree-svg-wrap { width: 100%; max-width: 760px; margin: 0 auto; }
#tree-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }
.t-ring { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 2 7; opacity: 0; transition: opacity .8s var(--d, 0s); }
.tree.grow .t-ring { opacity: 1; }
.t-link { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s ease var(--d, 0s), opacity .3s, stroke .3s, stroke-width .3s; }
.tree.grow .t-link { stroke-dashoffset: 0; }
.t-link.l-root { stroke: rgba(255,255,255,.16); }
.t-link.l-as { stroke: rgba(140,198,63,.55); }
.t-link.l-st { stroke-width: .8; opacity: .55; }
.t-link.l-st.t1, .t-link.l-te.t1, .t-link.l-ep.t1 { stroke: var(--t1); }
.t-link.l-st.t2, .t-link.l-te.t2, .t-link.l-ep.t2 { stroke: var(--t2); }
.t-link.l-st.t3, .t-link.l-te.t3, .t-link.l-ep.t3 { stroke: var(--t3); }
.t-link.l-ep { stroke-width: .9; }
.t-node { cursor: pointer; outline: none; opacity: 0; transition: opacity .5s var(--d, 0s); }
.tree.grow .t-node { opacity: 1; }
.t-in { transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: transform .7s cubic-bezier(.2,1.4,.4,1) var(--d, 0s); }
.tree.grow .t-in { transform: scale(1); }
.t-dot { fill: #173d62; stroke: #fff; stroke-width: 1.6; transition: fill .25s, stroke .25s; }
.t-node.ka .t-dot { stroke: #fff; fill: #1d4c7a; }
.t-node.ks .t-dot { stroke: var(--lime); }
.t-node.kt .t-dot { stroke-width: 2.4; }
.t-node.t1 .t-dot { stroke: var(--t1); } .t-node.t2 .t-dot { stroke: var(--t2); } .t-node.t3 .t-dot { stroke: var(--t3); }
.t-node.kp .t-dot { stroke: none; fill: #fff; }
.t-node.kp.t1 .t-dot { fill: var(--t1); } .t-node.kp.t2 .t-dot { fill: var(--t2); } .t-node.kp.t3 .t-dot { fill: var(--t3); }
.t-node.ke.t1 .t-dot { fill: var(--t1); } .t-node.ke.t2 .t-dot { fill: var(--t2); } .t-node.ke.t3 .t-dot { fill: var(--t3); }
.t-node.ke .t-lb { fill: #0f2c47; }
.t-lb { fill: #fff; font: 800 10px 'Nunito Sans', sans-serif; pointer-events: none; }
.t-node.ka .t-lb { font-size: 12px; } .t-node.kt .t-lb { font-size: 12px; } .t-node.ke .t-lb { font-size: 10.5px; } .t-node.ks .t-lb { font-size: 9px; }
.t-hit { fill: transparent; }
.t-node:hover .t-dot, .t-node:focus-visible .t-dot { stroke: #fff; stroke-width: 2.6; }
.t-core-bg { fill: #1d4c7a; stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.t-core-tx { fill: #fff; font: 800 15px 'Nunito Sans', sans-serif; letter-spacing: .1em; }
.t-core { animation: tcore 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tcore { 50% { transform: scale(1.05); } }
.t-pt { fill: #fff; filter: drop-shadow(0 0 3px #fff); pointer-events: none; }
.t-pt.t1 { fill: var(--t1); } .t-pt.t2 { fill: var(--t2); } .t-pt.t3 { fill: var(--t3); }
.t-direct { fill: none; stroke: #fff; stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tdraw .7s ease forwards; pointer-events: none; }
@keyframes tdraw { to { stroke-dashoffset: 0; } }
.tree.has-sel .t-node { opacity: .16; transition-delay: 0s; }
.tree.has-sel .t-node.on { opacity: 1; }
.tree.has-sel .t-link { opacity: .05; transition-delay: 0s; }
.tree.has-sel .t-link.on { opacity: 1; stroke-width: 1.8; transition-delay: 0s; }
.tree.has-sel .t-node.cur .t-dot { stroke: #fff; stroke-width: 3; }
.tree.has-sel .t-ring { opacity: .4; }
.tree-panel { min-height: 240px; padding: 26px 28px; border: 1px solid var(--ln); border-radius: 18px; background: rgba(255,255,255,.05); }
.tp-k { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.tp-k.tk-a { color: #fff; } .tp-k.tk-t { color: var(--t1); } .tp-k.tk-e { color: var(--t2); } .tp-k.tk-p { color: var(--t3); }
.tp-t { margin: 0 0 10px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.15; color: #fff; }
.tp-x { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); }
.tp-c, .tp-h { margin: 0; font-size: 13px; color: var(--mut); }
.tp-c { padding-top: 12px; border-top: 1px solid var(--ln); }
.tp-leg { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.tp-leg li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; color: #fff; font-weight: 600; }
.tp-leg i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: #1d4c7a; }
.tp-leg .lg-s i { border-color: var(--lime); } .tp-leg .lg-t i { border-color: var(--t1); background: var(--t1); } .tp-leg .lg-e i { border-color: var(--t2); background: var(--t2); } .tp-leg .lg-p i { border-color: var(--t3); background: var(--t3); width: 8px; height: 8px; margin-left: 2px; }
.tp-leg b { font-size: 20px; }
@media (max-width: 900px) { .tree-body { grid-template-columns: 1fr; } .tree-panel { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .t-core { animation: none; } .t-link, .t-node, .t-in, .t-ring { transition: none !important; } }
.t-link.l-st.tx, .t-link.l-te.tx, .t-link.l-ep.tx { stroke: #fff; }
.t-node.ke.tx .t-dot, .t-node.kp.tx .t-dot { fill: #fff; } .t-node.ke.tx .t-dot { stroke: var(--lime); stroke-width: 2.4; }
.t-pt.tx { fill: #fff; }
.tp-leg .lg-t i, .tp-leg .lg-e i, .tp-leg .lg-p i { border: 0; background: conic-gradient(var(--t1) 0 33%, var(--t2) 0 66%, var(--t3) 0); }
.tp-leg .lg-p i { width: 8px; height: 8px; margin-left: 2px; }
.tp-areas { list-style: none; margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--ln); display: grid; gap: 2px; }
.tp-areas button { all: unset; cursor: pointer; font-size: 13px; color: rgba(255,255,255,.85); padding: 2px 0; }
.tp-areas button:hover, .tp-areas button:focus-visible { color: #fff; text-decoration: underline; }
.tp-areas b { color: var(--lime); margin-right: 6px; }
.t-node.ka .t-lb { font-size: 11px; }