/* Veeduría contra el Narco y los Corruptos · sistema visual
   Colores y tipografía del manual de marca: tinta #262629, rojo #C0272D, amarillo #EAAA09,
   azul #03458A y Rubik. La franja tricolor del membrete separa la cabecera del contenido.
   El amarillo funciona como resaltador: marca lo que importa. */
:root {
  --paper: #FFFFFF;
  --paper-2: #F3F3F4;
  --ink: #262629;
  --ink-2: #45454B;
  --muted: #6B6B70;
  --rule: #DCDCDF;
  --mark: #EAAA09;
  --mark-ink: #262629;
  --marca-top: 58%;
  --rojo: #C0272D;
  --azul: #03458A;
  --amarillo: #EAAA09;
  --signal: #03458A;
  --line: #262629;
  --tip-bg: #262629;
  --tip-fg: #FFFFFF;

  --f-display: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-body: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-xs: 0.78rem;
  --t-sm: 0.9rem;
  --t-md: 1.06rem;
  --t-lg: 1.3rem;
  --t-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  --t-2xl: clamp(2.35rem, 1.4rem + 4vw, 4.3rem);

  --ancho: 1180px;
  --gutter: 16px;
  color-scheme: light;
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: var(--t-2xl); font-weight: 700; line-height: 0.98; letter-spacing: -0.015em; }
h2 { font-size: var(--t-xl); font-weight: 650; line-height: 1.08; letter-spacing: -0.01em; }
h3 { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
p { margin: 0; }
.prosa > * + * { margin-top: 1em; }
.prosa h2 { margin-top: 2.2rem; font-size: 1.55rem; }
.prosa h3 { margin-top: 1.6rem; }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li + li { margin-top: 0.35em; }
.prosa { max-width: 68ch; }

.wrap {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

.marca {
  background: linear-gradient(transparent var(--marca-top), var(--mark) var(--marca-top), var(--mark) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.08em;
}

.etiqueta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.estado {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px dashed var(--ink-2); color: var(--ink-2);
  padding: 0.2em 0.6em; border-radius: 2px; white-space: nowrap;
}
.estado::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; border: 1px solid currentColor; }
.estado.activo { border-style: solid; }
.estado.activo::before { background: var(--mark); border-color: var(--mark); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--f-body); font-weight: 700; font-size: 1rem;
  background: var(--rojo); color: var(--paper); border: 2px solid var(--rojo);
  padding: 0.62em 1.1em; border-radius: 2px; cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--paper); color: var(--rojo); }
.boton.sec { background: transparent; color: var(--ink); border-color: var(--ink); }
.boton.sec:hover { background: var(--ink); color: var(--paper); }

/* ---------- cabecera */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper);
}
.cabecera::after { content: ""; display: block; height: 4px;
  background: linear-gradient(to right, #EAAA09 0 33.34%, #03458A 33.34% 66.67%, #C0272D 66.67% 100%); }
.cabecera .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; text-decoration: none; margin-block: 0.4rem; border-radius: 6px; }
.logo img { height: 60px; width: auto; display: block; }
.logo .logo-oscuro { display: none; }
/* En modo oscuro el logo va sobre una placa blanca para conservar sus colores originales */
.nav { margin-left: auto; min-width: 0; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 0.97rem; padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--rojo); font-weight: 600; }
@media (max-width: 860px) {
  .cabecera .wrap { gap: 0; padding-block: 0.5rem 0; }
  .nav { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav ul { gap: 1.2rem; padding-block: 0.35rem 0.5rem; }
  .nav a { white-space: nowrap; }
}

/* ---------- banner de portada: claro, con el logo completo sobre blanco */
.banner { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.banner .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.8rem, 6vw, 5rem); }
.banner-texto { display: grid; gap: 1.3rem; min-width: 0; }
.banner-texto h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.8rem); line-height: 1.02; }
.banner-texto .lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.3rem; }
.banner-logo { background: #FFFFFF; border-radius: 4px; padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1.1rem; justify-items: center; box-shadow: 0 1px 0 var(--rule); }
.banner-logo img { width: 100%; max-width: 26rem; height: auto; display: block; }
.banner-logo p { color: #45454B; font-size: var(--t-sm); text-align: center; max-width: 32ch; }
.franja { display: block; height: 6px; width: 100%; max-width: 26rem; background: linear-gradient(to right, #EAAA09 0 33.34%, #03458A 33.34% 66.67%, #C0272D 66.67% 100%); }
@media (max-width: 860px) { .banner .wrap { grid-template-columns: minmax(0, 1fr); } .banner-logo { max-width: 30rem; } }

.nota-fuente { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.nota-fuente a { color: inherit; }

/* ---------- pilares: qué somos, qué queremos, cómo trabajamos */
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pilar { display: grid; gap: 0.6rem; align-content: start; padding-top: 1rem; border-top: 4px solid var(--acento, var(--rojo)); }
.pilar h3 { font-size: 1.25rem; }
.pilar p { color: var(--ink-2); }
.pilar a { font-weight: 600; }
@media (max-width: 820px) { .pilares { grid-template-columns: minmax(0, 1fr); } }
.c-amarillo { --acento: #EAAA09; }
.c-azul { --acento: #03458A; }
.c-rojo { --acento: #C0272D; }

/* ---------- tarjetas de proyecto */
.proyectos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.tarjeta { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.7rem; background: var(--paper); border: 1px solid var(--rule); border-top: 6px solid var(--acento, var(--rojo)); border-radius: 3px; padding: 1.3rem 1.3rem 1.2rem; min-width: 0; }
.tarjeta:hover { border-color: var(--ink-2); border-top-color: var(--acento); }
.tarjeta .tema { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tarjeta h3 { font-size: 1.3rem; }
.tarjeta h3 a { color: var(--ink); text-decoration: none; }
.tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.tarjeta p { color: var(--ink-2); }
.tarjeta .pie-tarjeta { display: grid; gap: 0.35rem; font-size: var(--t-xs); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.etapa { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.etapa .puntos { display: inline-flex; gap: 3px; }
.etapa .puntos i { width: 14px; height: 6px; border-radius: 2px; background: var(--rule); }
.etapa .puntos i.on { background: var(--acento, var(--rojo)); }

/* ---------- carrusel: crece con el número de proyectos o noticias */
.carrusel { position: relative; display: grid; gap: 0.9rem; }
.carrusel-controles { display: flex; justify-content: flex-end; gap: 0.5rem; }
.carrusel-controles[hidden] { display: none; }
.flecha { width: 44px; height: 44px; display: grid; place-items: center; font: inherit; font-size: 1.2rem; font-weight: 700; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.flecha:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.flecha:disabled { opacity: 0.3; cursor: default; }
.carrusel-pista { list-style: none; margin: 0; padding: 0 0 0.8rem; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.25rem) / 2.4); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: thin; }
.carrusel-pista > li { scroll-snap-align: start; }
.carrusel-pista:focus-visible { outline-offset: 4px; }
@media (max-width: 960px) { .carrusel-pista { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (max-width: 620px) { .carrusel-pista { grid-auto-columns: 86%; } }
@media (prefers-reduced-motion: reduce) { .carrusel-pista { scroll-behavior: auto; } }
.tarjeta-noticia { display: grid; gap: 0.5rem; align-content: start; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 1.2rem 1.3rem; min-width: 0; }
.tarjeta-noticia time { font-size: var(--t-sm); color: var(--rojo); font-weight: 600; }
.tarjeta-noticia h3 { font-size: 1.15rem; }
.tarjeta-noticia p { color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- filtro por etapa */
.filtro-etapas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.chip { font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: var(--paper); border: 2px solid var(--rule); border-radius: 999px; padding: 0.35em 0.95em; cursor: pointer; display: inline-flex; gap: 0.45em; align-items: center; }
.chip span { font-weight: 400; color: var(--muted); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] span { color: var(--paper); opacity: 0.75; }
.vacio-filtro { color: var(--muted); margin-top: 1rem; }
@media (max-width: 960px) { .proyectos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .proyectos-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- noticias */
.noticias { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.noticia { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 2rem; padding-block: 1.3rem; border-bottom: 1px solid var(--rule); }
.noticia time { font-size: var(--t-sm); color: var(--rojo); font-weight: 600; }
.noticia h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.noticia p { color: var(--ink-2); max-width: 68ch; }
@media (max-width: 620px) { .noticia { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cinta de contacto */
.cinta { background: #FDF3D6; color: var(--ink); border-top: 4px solid var(--amarillo); }
.cinta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding-block: clamp(2.2rem, 4vw, 3rem); }
.cinta h2 { color: var(--ink); }
.cinta p { color: var(--ink-2); max-width: 52ch; margin-top: 0.5rem; }

@media (max-width: 720px) { .cinta .wrap { grid-template-columns: minmax(0, 1fr); } }

.buscador { display: grid; gap: 0.5rem; max-width: 30rem; }
.buscador label { font-weight: 700; font-size: 1rem; }
.buscador .fila { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.buscador input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; padding: 0.55em 0.75em; }
.buscador input::placeholder { color: var(--muted); }
.buscador .aviso { font-size: var(--t-sm); color: var(--ink-2); min-height: 1.4em; }
.cifras-red { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-size: var(--t-sm); color: var(--ink-2); }
.cifras-red b { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-right: 0.25em; }

/* ---------- plano */
.plano { position: relative; margin: 0; min-width: 0; }
.plano-marco { border: 1px solid var(--rule); background: var(--paper-2); padding: 0.5rem; }
.plano-svg { display: block; width: 100%; height: auto; }
.plano-svg .via { fill: none; stroke: var(--line); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.82; transition: stroke 0.15s, opacity 0.15s; }
.plano-svg .flujo { fill: none; stroke: var(--rojo); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1.2 26; animation: flujo 5s linear infinite; }
.plano-svg .troncal:hover .via { stroke: var(--signal); opacity: 1; }
@keyframes flujo { to { stroke-dashoffset: -54.4; } }
.plano-svg .est circle { fill: var(--paper); stroke: var(--line); stroke-width: 1.4; transition: r 0.12s, fill 0.12s; }
.plano-svg .est.portal circle { fill: var(--mark); stroke: var(--line); stroke-width: 1.6; }
.plano-svg .est:hover circle, .plano-svg .est:focus-visible circle, .plano-svg .est.activa circle { fill: var(--mark); r: 6; }
.plano-svg .est:focus { outline: none; }
.plano-svg .rotulos text { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper-2); stroke-width: 3px; }
.plano-svg .escala path, .plano-svg .norte path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.plano-svg .escala text, .plano-svg .norte text { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-2); }
.plano figcaption { margin-top: 0.6rem; }
.plano-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--tip-bg); color: var(--tip-fg);
  font-family: var(--f-mono); font-size: 0.78rem; line-height: 1.4;
  padding: 0.45em 0.65em; border-radius: 2px; max-width: 16rem;
  transform: translate(-50%, calc(-100% - 12px));
}
.plano-tip b { font-family: var(--f-body); font-size: 0.9rem; display: block; }
@media (prefers-reduced-motion: reduce) {
  .plano-svg .flujo { animation: none; display: none; }
  * { transition: none !important; }
}

/* ---------- secciones */
.seccion { padding-block: clamp(2.8rem, 5vw, 4.2rem); }
.seccion + .seccion { border-top: 1px solid var(--rule); }
.seccion-cab .mas { font-weight: 600; }
.seccion-cab { display: grid; gap: 0.6rem; margin-bottom: 2rem; max-width: 50rem; }
.seccion-cab p { color: var(--ink-2); font-size: var(--t-md); }

.modulos { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rojo); }
.modulo {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 0.6rem 2rem;
  align-items: baseline; padding-block: 1.4rem; border-bottom: 1px solid var(--rule);
}
.modulo h3 a { color: var(--ink); text-decoration: none; }
.modulo h3 a:hover { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 3px; }
.modulo .desc { display: grid; gap: 0.35rem; min-width: 0; }
.modulo .desc p:first-child { font-size: var(--t-md); }
.modulo .fuente { font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 720px) {
  .modulo { grid-template-columns: minmax(0, 1fr); }
  .modulo .estado { justify-self: start; }
}

.reglas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin: 0; }
.regla { display: grid; gap: 0.4rem; align-content: start; border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.regla dt { font-family: var(--f-display); font-weight: 650; font-size: 1.2rem; }
.regla dd { margin: 0; color: var(--ink-2); }
@media (max-width: 720px) { .reglas { grid-template-columns: minmax(0, 1fr); } }

.contacto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.contacto p { color: var(--ink-2); max-width: 46ch; }
.correo { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.correo code { font-family: var(--f-mono); font-size: 1.05rem; background: var(--paper-2); border: 1px solid var(--rule); padding: 0.45em 0.7em; user-select: all; }
@media (max-width: 720px) { .contacto { grid-template-columns: minmax(0, 1fr); } }

/* ---------- banner de páginas interiores: claro, con barra de color de la sección */
.cab-pagina { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.cab-pagina .wrap { display: grid; gap: 0.9rem; padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.cab-pagina h1 { max-width: 22ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); line-height: 1.05; padding-left: 1rem; border-left: 6px solid var(--acento, var(--rojo)); }
.cab-pagina .lead { font-size: var(--t-lg); color: var(--ink-2); max-width: 52ch; line-height: 1.5; }
.migas { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.migas a { color: inherit; }
.cuerpo { padding-block: clamp(2rem, 4vw, 3.5rem); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 3rem; align-items: start; }
@media (max-width: 900px) { .dos-col { grid-template-columns: minmax(0, 1fr); } }
.ficha { border: 1px solid var(--rule); background: var(--paper-2); padding: 1.2rem 1.3rem; display: grid; gap: 0.8rem; font-size: var(--t-sm); }
.ficha h2 { font-size: 1.1rem; }
.ficha dl { margin: 0; display: grid; gap: 0.7rem; }
.ficha dt { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ficha dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; }

.proximo { border: 1px dashed var(--ink-2); padding: 1.3rem 1.4rem; display: grid; gap: 0.7rem; max-width: 68ch; }
.proximo ul { margin: 0; padding-left: 1.2em; }
.proximo .estado, .vacio .estado { justify-self: start; }

/* ---------- directorio de estaciones */
.red-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.red-grid .plano { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); }
@media (max-width: 900px) { .red-grid { grid-template-columns: minmax(0, 1fr); } .red-grid .plano { position: relative; top: 0; } }
.filtro { display: grid; gap: 0.4rem; margin-bottom: 1.5rem; }
.filtro label { font-weight: 700; }
.filtro input { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; padding: 0.55em 0.75em; width: 100%; }
.filtro .conteo { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); }
.troncal-bloque + .troncal-bloque { margin-top: 2rem; }
.troncal-cab { display: flex; align-items: baseline; gap: 0.7rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.4rem; }
.letra {
  display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding-inline: 0.3rem;
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem;
  background: var(--rojo); color: var(--paper);
}
.troncal-cab h3 { font-size: 1.2rem; }
.troncal-cab .n { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); }
.lista-est { list-style: none; margin: 0; padding: 0; }
.lista-est li {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 0.2rem 1rem; align-items: baseline;
  padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 110px;
}
.lista-est .cod { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.lista-est .nom { font-weight: 700; min-width: 0; }
.lista-est .ubi { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); text-align: right; }
.lista-est .tag { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--mark); color: var(--mark-ink); padding: 0.05em 0.35em; margin-left: 0.4em; vertical-align: 0.1em; }
.lista-est li:target, .lista-est li.activa { background: var(--paper-2); box-shadow: inset 4px 0 0 var(--mark); }
@media (max-width: 520px) {
  .lista-est li { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .lista-est .ubi { grid-column: 2; text-align: left; }
}

.tabla-scroll { overflow-x: auto; }
.tabla { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.tabla th, .tabla td { text-align: left; padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tabla th { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom: 2px solid var(--ink); }

.vacio { border: 1px dashed var(--ink-2); padding: 2rem 1.5rem; display: grid; gap: 0.6rem; max-width: 46rem; }

/* ---------- pie */
.pie { padding-block: 2.5rem 3rem; font-size: var(--t-sm); color: var(--ink-2); border-top: 1px solid var(--rule); }
.pie .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.pie .pie-logo { height: 54px; width: auto; display: block; margin-bottom: 0.8rem; }
.pie h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pie a { color: var(--ink-2); }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 1.2rem; font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 860px) { .pie .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pie .wrap { grid-template-columns: minmax(0, 1fr); } }

.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--mark); color: var(--mark-ink); padding: 0.5rem 0.8rem; }


/* ======================================================================
   Movimiento: portada con video, titulares animados, botones, tarjetas
   con video al pasar el cursor, aparición al hacer scroll y transiciones
   entre páginas. Todo se apaga con prefers-reduced-motion.
   ====================================================================== */

/* ---------- portada con videos de Colombia */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(30rem, 78vh, 44rem); display: grid; grid-template-rows: 1fr auto; background: #E9ECEA; }
.hero-videos { position: absolute; inset: 0; z-index: -2; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 9s linear; }
.hero-video.activo { opacity: 1; transform: scale(1); }
.hero-velo { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 38%, rgba(255,255,255,0.35) 64%, rgba(255,255,255,0) 82%),
              linear-gradient(0deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 22%); }
.hero-contenido { align-self: center; display: grid; gap: 1.8rem; padding-block: clamp(3rem, 8vw, 6rem) 1rem; }
.hero .titular { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.2rem); line-height: 1; max-width: 13ch; letter-spacing: -0.02em; }
.hero-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 0 1.6rem; }
.hero-lugar { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: rgba(255,255,255,0.85); padding: 0.35em 0.8em; border-radius: 999px; backdrop-filter: blur(6px); }
.hero-lugar .pin { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 rgba(192,39,45,0.5); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(192,39,45,0); } 100% { box-shadow: 0 0 0 0 rgba(192,39,45,0); } }
.hero-progreso { display: flex; gap: 6px; }
.hero-progreso i { width: 28px; height: 4px; border-radius: 2px; background: rgba(38,38,41,0.18); overflow: hidden; position: relative; }
.hero-progreso i.on::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; animation: avance var(--dur, 8s) linear forwards; }
@keyframes avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 720px) {
  .hero { min-height: 34rem; }
  .hero-velo { background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.78) 55%, rgba(255,255,255,0.35) 100%); }
  .hero-progreso { display: none; }
}

/* ---------- titulares: cada palabra sube en cascada; el resaltador se dibuja */
.con-js .titular .p { display: inline-block; opacity: 0; transform: translateY(0.45em) rotate(2deg); filter: blur(6px); animation: palabra 0.75s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes palabra { to { opacity: 1; transform: none; filter: none; } }
.con-js .titular .marca { background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 94%, transparent 94%) left / 0% 100% no-repeat; animation: resaltar 0.9s cubic-bezier(.6,0,.2,1) forwards; animation-delay: calc(var(--n, 6) * 70ms + 450ms); }
@keyframes resaltar { to { background-size: 100% 100%; } }

/* ---------- aparición al hacer scroll */
.con-js .revelar, .con-js .revelar-grupo > * { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.7,.2,1); }
.con-js .revelar.visto, .con-js .revelar-grupo.visto > * { opacity: 1; transform: none; }
.con-js .revelar-grupo.visto > *:nth-child(2) { transition-delay: 0.12s; }
.con-js .revelar-grupo.visto > *:nth-child(3) { transition-delay: 0.24s; }
.con-js .revelar-grupo.visto > *:nth-child(4) { transition-delay: 0.36s; }

/* ---------- botones: barrido de color, flecha que avanza y leve elevación */
.boton { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s, color 0.35s; }
.boton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(.7,0,.2,1); }
.boton:hover::before, .boton:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.boton:hover, .boton:focus-visible { background: var(--rojo); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(38,38,41,0.55); }
.boton.sec:hover, .boton.sec:focus-visible { background: transparent; color: #FFFFFF; }
.boton i { font-style: normal; display: inline-block; transition: transform 0.3s cubic-bezier(.2,.7,.2,1); }
.boton:hover i, .boton:focus-visible i { transform: translateX(5px); }
.boton:active { transform: translateY(0) scale(0.98); }

/* ---------- tarjetas: video que se reproduce al pasar el cursor */
.tarjeta { overflow: hidden; transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s; }
.tarjeta:hover, .tarjeta:focus-within { transform: translateY(-6px); box-shadow: 0 22px 40px -24px rgba(38,38,41,0.5); }
.tarjeta-medio { margin: -1.3rem -1.3rem 0.4rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); max-width: none; }
.tarjeta-medio video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); filter: saturate(0.9); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 0.6s; }
.tarjeta:hover .tarjeta-medio video, .tarjeta:focus-within .tarjeta-medio video { transform: scale(1.12); filter: saturate(1.15); }
.tarjeta h3 a { background: linear-gradient(var(--acento), var(--acento)) left 100% / 0% 3px no-repeat; transition: background-size 0.4s; }
.tarjeta:hover h3 a { background-size: 100% 3px; }

/* ---------- carrusel automático */
.carrusel-pista { scroll-padding-inline: 0; }
.carrusel.auto .carrusel-controles::before { content: ""; align-self: center; margin-right: auto; height: 3px; width: 6rem; background: linear-gradient(var(--rojo), var(--rojo)) left / var(--prog, 0%) 100% no-repeat, var(--rule); border-radius: 2px; }

/* ---------- transiciones entre páginas (View Transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.35s cubic-bezier(.4,0,.2,1) both salir; }
::view-transition-new(root) { animation: 0.5s cubic-bezier(.2,.7,.2,1) both entrar; }
@keyframes salir { to { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(18px); } }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; transform: none; }
  .con-js .titular .p, .con-js .titular .marca { animation: none; opacity: 1; transform: none; filter: none; background-size: 100% 100%; }
  .con-js .revelar, .con-js .revelar-grupo > * { opacity: 1; transform: none; transition: none; }
  .boton, .boton::before, .boton i, .tarjeta, .tarjeta-medio video { transition: none; }
  .hero-lugar .pin { animation: none; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Reportes */
.reportes { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.reporte { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.reporte-meta { display: grid; gap: 0.4rem; align-content: start; }
.reporte-meta time { font-size: var(--t-sm); color: var(--rojo); font-weight: 600; }
.reporte-proyecto { font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); text-decoration: none; border-left: 3px solid var(--acento, var(--rojo)); padding-left: 0.5rem; }
.reporte h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.reporte h3 a { color: inherit; text-decoration: none; }
.reporte h3 a:hover { text-decoration: underline; }
.reporte p { color: var(--ink-2); max-width: 68ch; }
.reporte-corte { font-size: var(--t-sm); color: var(--muted); margin-top: 0.4rem; }
.reporte-archivos { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
@media (max-width: 620px) { .reporte { grid-template-columns: minmax(0, 1fr); } }