/* Agilizódromo — manual de marca de Fundación Pivotes (00-identidad/marca-y-estilo.md)
   Títulos: Sofia Sans Condensed en mayúsculas (Regular + Black) · Subtítulos: Lora Bold
   Párrafo: Lora Regular · Botones y etiquetas: Open Sans Bold.
   Composición editorial inspirada en The Economist y City Journal. */
:root {
  --navy: #0e1750;
  --celeste: #76cde4;
  --crema: #fcf8ee;          /* el crema del logo oficial (favicon de pivotes.cl) */
  --texto: #1a2230;
  --gris: #586274;
  --filete: #d9dee6;
  --celeste-texto: #1d6f8c;  /* celeste oscurecido para texto chico sobre blanco (contraste AA) */
  --estado: #f7d590;
  --economia: #c9e7ee;
  --educacion: #e27089;
  --empleo: #87c6ba;
  --dorado: #f2c21b;         /* el dorado de la pieza oficial del Agilizódromo */
  --azul-linea: #69a4de;
  --f-titulo: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --f-texto: "Lora", Georgia, serif;
  --f-ui: "Open Sans", system-ui, sans-serif;
  --ancho: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: #fff; color: var(--texto);
  font: 400 1.0625rem/1.7 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.cabecera__pivotes :focus-visible, .proyecto :focus-visible, .sumate :focus-visible, .pie :focus-visible,
.activo-chip:focus-visible, .arbol a.elegido:focus-visible, .boton:focus-visible { outline-color: var(--celeste); box-shadow: 0 0 0 3px var(--navy); }
h1, h2, h3 { margin: 0 0 0.5em; color: var(--navy); }
p { margin: 0 0 1em; }
.marco { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
.marco--angosto { width: min(720px, 100% - 32px); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--celeste); color: var(--navy); padding: 8px 12px; z-index: 10; font: 700 0.875rem var(--f-ui); }
.saltar:focus { left: 8px; }

/* ---------- botones y etiquetas */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 0.875rem/1.2 var(--f-ui); padding: 0.85em 1.3em;
  background: var(--navy); color: #fff; border: 2px solid var(--navy); border-radius: 0;
  text-decoration: none; cursor: pointer;
}
.boton:hover { background: #24306f; border-color: #24306f; color: #fff; }
.boton--borde { background: transparent; color: var(--navy); }
.boton--borde:hover { background: var(--crema); color: var(--navy); }
.boton--claro { background: var(--celeste); border-color: var(--celeste); color: var(--navy); }
.boton--claro:hover { background: #9adbec; border-color: #9adbec; color: var(--navy); }
.enlace-boton { background: none; border: 0; padding: 0; font: 700 0.8125rem var(--f-ui); color: var(--navy); text-decoration: underline; cursor: pointer; }

.et { display: inline-block; font: 700 0.75rem/1.2 var(--f-ui); padding: 0.35em 0.6em; white-space: nowrap; border: 1px solid var(--filete); color: var(--gris); background: #fff; }
.et--via-ley { background: var(--navy); border-color: var(--navy); color: #fff; }
.et--via-administrativa { background: var(--economia); border-color: var(--economia); color: var(--navy); }
.et--debate-bajo { border-color: var(--empleo); color: #24655a; }
.et--debate-alto { border-color: var(--educacion); color: #9b2843; }
.et--promulgada { background: var(--estado); border-color: var(--estado); color: var(--navy); }
.et--validada { background: var(--empleo); border-color: var(--empleo); color: var(--navy); }
.et--curso { background: var(--celeste); border-color: var(--celeste); color: var(--navy); }
.et--impacto-alto { background: var(--educacion); border-color: var(--educacion); color: var(--navy); }
.et--parcial { background: #fff; border-color: var(--estado); box-shadow: inset 4px 0 0 var(--estado); color: var(--navy); }
.et--por-confirmar { background: #fff; border: 1px dashed var(--gris); color: var(--gris); }

.antetitulo { font: 700 0.78rem/1.3 var(--f-ui); color: var(--celeste-texto); margin: 0 0 6px; }

/* Estilo para secciones del manual: «1. ESTILO PARA SECCIONES» */
.seccion {
  font: 900 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--f-titulo); text-transform: uppercase;
  letter-spacing: 0.005em; padding-bottom: 14px; border-bottom: 1px solid var(--filete); margin-bottom: 18px;
}
.seccion__n { font-weight: 400; color: var(--celeste); }
.subtitulo { font: 700 1.3rem/1.3 var(--f-texto); margin: 48px 0 12px; }
.bajada-seccion { color: var(--gris); max-width: 62ch; margin-bottom: 28px; }

/* ---------- cabecera de revista */
.cabecera__pivotes { background: var(--navy); color: var(--crema); }
.cabecera__pivotes-fila { display: flex; align-items: center; gap: 16px; min-height: 52px; font: 600 0.75rem var(--f-ui); }
.cabecera__logo { display: block; color: var(--crema); line-height: 0; }
.cabecera__logo svg { height: 34px; width: auto; }
.cabecera__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding: 22px 0 14px; }
.marca {
  font: 900 clamp(2.4rem, 5.2vw, 3.6rem)/0.9 var(--f-titulo); text-transform: uppercase;
  color: var(--navy); text-decoration: none; letter-spacing: -0.005em;
}
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding-bottom: 4px; }
.menu a { font: 600 0.875rem var(--f-ui); color: var(--navy); text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.menu .menu__accion { background: var(--navy); color: #fff; padding: 8px 14px; }
.menu .menu__accion:hover { background: #24306f; text-decoration: none; }
.cabecera__linea {
  display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap;
  border-top: 3px solid var(--navy); border-bottom: 1px solid var(--filete);
  padding: 8px 0; font: 400 0.8125rem var(--f-ui); color: var(--gris);
}

/* ---------- nota principal */
.principal { padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 56px); }
.principal__grilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.principal h1 { font-family: var(--f-titulo); text-transform: uppercase; margin-bottom: 22px; }
.h1__fuerte { display: block; font-weight: 900; font-size: clamp(3.6rem, 9vw, 7.25rem); line-height: 0.86; letter-spacing: -0.01em; }
.h1__suave { display: block; font-weight: 400; font-size: clamp(1.6rem, 3.3vw, 2.6rem); line-height: 1; margin-top: 10px; max-width: 24ch; }
.principal__bajada { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 54ch; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); margin: 32px 0 0; border-top: 1px solid var(--filete); }
.cifras div { padding: 14px 16px 0 0; }
.cifras div + div { padding-left: 16px; border-left: 1px solid var(--filete); }
.cifras dt { font: 900 2.75rem/1 var(--f-titulo); color: var(--navy); }
.cifras dd { margin: 4px 0 0; font: 400 0.8125rem/1.35 var(--f-ui); color: var(--gris); }
.principal__imagen { margin: 0; align-self: center; }
.principal__foto { display: block; width: 100%; height: auto; }
.principal__imagen figcaption { font: italic 400 0.9375rem/1.5 var(--f-texto); color: var(--gris); border-top: 1px solid var(--filete); padding-top: 10px; margin-top: 6px; }

/* Franja «Ya son norma» en el dorado de la pieza oficial */
.ya-es-norma { background: var(--dorado); color: var(--navy); }
.ya-es-norma__fila { display: grid; grid-template-columns: 240px 1fr; gap: 24px 40px; align-items: center; padding: 26px 0; }
.ya-es-norma h2 { font: 900 2.1rem/0.95 var(--f-titulo); text-transform: uppercase; margin-bottom: 6px; }
.ya-es-norma__cabeza p { font: 600 0.875rem/1.4 var(--f-ui); margin: 0; }
.ya-es-norma ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: ya; }
.ya-es-norma li { counter-increment: ya; position: relative; padding-left: 48px; border-left: 1px solid rgba(14, 23, 80, .25); padding-top: 2px; }
.ya-es-norma li::before { content: counter(ya); position: absolute; left: 12px; top: -4px; font: 900 2.4rem/1 var(--f-titulo); color: var(--navy); }
.ya-es-norma .antetitulo { color: var(--navy); }
.ya-es-norma li a { font: 700 1.05rem/1.3 var(--f-texto); color: var(--navy); text-decoration: none; }
.ya-es-norma li a:hover { text-decoration: underline; }

/* Banda celeste: «estilo usado como separador o como botón →» */
.banda { display: block; background: var(--celeste); color: var(--navy); text-decoration: none; }
.banda__texto { display: block; text-align: right; font: 900 clamp(1.4rem, 3vw, 2.2rem)/1 var(--f-titulo); text-transform: uppercase; padding: 14px 0; }
.banda:hover .banda__texto { text-decoration: underline; text-decoration-thickness: 3px; }

.bloque-portada { padding: clamp(48px, 6vw, 72px) 0; }

/* ---------- qué es el Agilizódromo: el navy y las líneas de velocidad de la pieza oficial */
.proyecto { background: #000f38; color: #dfe5f2; padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px); position: relative; overflow: hidden; }
.proyecto::before {
  content: ""; position: absolute; inset: 18% -10% auto -10%; height: 120px; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(105, 164, 222, .22) 9px 11px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, transparent 70%); mask-image: linear-gradient(90deg, transparent, #000 25%, transparent 70%);
}
.proyecto__grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; }
.proyecto__titulo { color: #fff; font: 900 clamp(2.6rem, 5.4vw, 4.4rem)/0.9 var(--f-titulo); text-transform: uppercase; }
.proyecto__titulo span { display: block; font-weight: 400; font-size: 0.55em; color: var(--celeste); }
.proyecto__bajada { font: 700 1.2rem/1.5 var(--f-texto); color: #fff; }
.proyecto__imagen { margin: 0; }
.proyecto__foto { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.ruta { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.ruta::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 3px; background: linear-gradient(90deg, var(--azul-linea) 0 55%, var(--dorado) 55%); transform-origin: left; }
.ruta__paso { position: relative; }
.ruta__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--azul-linea); background: #000f38; color: #fff; font: 900 1.5rem/1 var(--f-titulo); margin-bottom: 16px; }
.ruta__paso:nth-child(n+3) .ruta__n { border-color: var(--dorado); }
.ruta__paso:last-child .ruta__n { background: var(--dorado); color: var(--navy); }
.ruta h3 { color: #fff; font: 900 1.35rem/1.05 var(--f-titulo); text-transform: uppercase; margin-bottom: 8px; }
.ruta p { font-size: 0.95rem; line-height: 1.55; margin: 0; }
.aliados { margin-top: clamp(40px, 5vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.aliados__titulo { font: 700 0.8125rem var(--f-ui); color: var(--celeste); margin-bottom: 12px; }
.aliados__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 30px; }
.aliados__lista li { font: 900 1.25rem/1 var(--f-titulo); text-transform: uppercase; color: #fff; }

.cabeza-imagen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: end; }
.cabeza-imagen__foto { width: 100%; height: auto; mix-blend-mode: multiply; margin-bottom: 18px; }

/* ---------- tarjetas (City Journal): fondo gris, tarjeta blanca, firma en celeste,
   titular condensado, bajada en serif y pie con sección y fecha */
.bloque-portada--gris { background: #eef1f6; }
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tarjetas--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarjeta { background: #fff; display: flex; flex-direction: column; min-width: 0; }
.tarjeta:not(:has(.tarjeta__cubierta)) { border-top: 6px solid var(--economia); }
.tarjeta--estado:not(:has(.tarjeta__cubierta)) { border-top-color: var(--estado); }
.tarjeta--educacion:not(:has(.tarjeta__cubierta)) { border-top-color: var(--educacion); }
.tarjeta--empleo:not(:has(.tarjeta__cubierta)) { border-top-color: var(--empleo); }
.tarjeta__cubierta { display: block; line-height: 0; background: var(--economia); }
.tarjeta--estado .tarjeta__cubierta { background: var(--estado); }
.tarjeta--educacion .tarjeta__cubierta { background: var(--educacion); }
.tarjeta--empleo .tarjeta__cubierta { background: var(--empleo); }
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 14px; }
.firma { font: 600 0.8125rem/1.3 var(--f-ui); color: var(--celeste-texto); margin: 0 0 6px; }
.tarjeta__titulo { font: 700 1.5rem/1.04 var(--f-titulo); margin-bottom: 10px; letter-spacing: -0.005em; }
.tarjeta__titulo a { text-decoration: none; }
.tarjeta__titulo a:hover { text-decoration: underline; }
.tarjeta__bajada { font-size: 0.9375rem; line-height: 1.5; color: var(--texto); }
.tarjeta__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tarjeta__pie { display: flex; justify-content: space-between; gap: 10px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--filete); font: 400 0.78rem var(--f-ui); color: var(--gris); }
.tarjeta__pie a { color: var(--celeste-texto); text-decoration: none; font-weight: 600; }
.tarjeta__pie a:hover { text-decoration: underline; }

/* Portada tipográfica: las barras ascendentes del logo, en el color del desafío */
.cubierta { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.cubierta--foto { object-fit: cover; background: #fff; }
.tarjeta__cubierta { overflow: hidden; }
.tarjeta--principal .cubierta--foto { height: 100%; }
.cubierta__fondo, .arte__fondo { fill: var(--economia); }
.cubierta--estado .cubierta__fondo, .arte--estado .arte__fondo { fill: var(--estado); }
.cubierta--educacion .cubierta__fondo, .arte--educacion .arte__fondo { fill: var(--educacion); }
.cubierta--empleo .cubierta__fondo, .arte--empleo .arte__fondo { fill: var(--empleo); }
.cubierta__barras, .arte__barras { fill: var(--navy); }
.cubierta__sector { font: 900 26px var(--f-titulo); fill: var(--navy); letter-spacing: 0.01em; }

/* Mosaico: una nota grande y cuatro chicas */
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tarjeta--principal { grid-column: span 2; grid-row: span 2; }
.tarjeta--principal .tarjeta__cubierta { flex: 1 1 auto; min-height: 260px; }
.tarjeta--principal .cubierta { height: 100%; aspect-ratio: auto; }
.tarjeta--principal .tarjeta__cuerpo { flex: 0 0 auto; }
.tarjeta--principal .tarjeta__titulo { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.tarjeta--principal .tarjeta__bajada { font-size: 1.05rem; }
.ver-mas { margin: 18px 0 0; font: 600 0.875rem var(--f-ui); }
.ver-mas a { color: var(--celeste-texto); }

/* Cabeza de fila: «Recent Stories / See more» */
.cabeza-fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 16px; }
.cabeza-fila__titulo { font: 900 1.6rem/1 var(--f-titulo); text-transform: uppercase; margin: 0; }
.cabeza-fila__titulo[class*="--"]::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 9px; background: var(--economia); outline: 1px solid rgba(14, 23, 80, .15); }
.cabeza-fila__titulo--estado::before { background: var(--estado) !important; }
.cabeza-fila__titulo--educacion::before { background: var(--educacion) !important; }
.cabeza-fila__titulo--empleo::before { background: var(--empleo) !important; }
.cabeza-fila__mas { font: 600 0.875rem var(--f-ui); color: var(--celeste-texto); text-decoration: none; }
.cabeza-fila__mas:hover { text-decoration: underline; }
.carrusel__flechas { margin-left: auto; display: flex; gap: 6px; }
.flecha { width: 36px; height: 36px; border: 1px solid var(--navy); background: #fff; color: var(--navy); font: 700 1.3rem/1 var(--f-ui); cursor: pointer; }
.flecha:hover { background: var(--navy); color: #fff; }
.flecha:disabled { opacity: .35; cursor: default; background: #fff; color: var(--navy); }
.carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px;
}
.carrusel > * { scroll-snap-align: start; }
.recientes { background: #fff; }
.recientes .tarjeta { border: 1px solid var(--filete); }
.seccion-eje { margin-top: 44px; }

/* ---------- índice de propuestas */
.propuestas { background: var(--crema); }
.propuestas__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--filete); margin-bottom: 18px; }
.propuestas__cabeza .seccion { border: 0; margin: 0; }
.contador { font: 600 0.875rem var(--f-ui); color: var(--gris); margin: 0 0 16px; white-space: nowrap; }
.contador span { font: 900 1.75rem var(--f-titulo); color: var(--navy); }
.filtros { display: grid; grid-template-columns: 2fr repeat(6, minmax(0, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 14px; }
.filtro { display: flex; flex-direction: column; gap: 5px; font: 700 0.75rem var(--f-ui); color: var(--navy); min-width: 0; }
.filtro select, .filtro input, .destinatario input {
  font: 400 0.9375rem var(--f-ui); color: var(--texto); background: #fff;
  border: 1px solid #6b7689; border-radius: 0; padding: 9px 10px; width: 100%; min-width: 0;
}
.filtro select.activo { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.filtros .enlace-boton { grid-column: 1 / -1; justify-self: start; }
.herramientas { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 28px; flex-wrap: wrap; padding: 16px 0 22px; border-top: 1px solid var(--filete); }
.herramientas p { margin: 0; font: 400 0.875rem/1.5 var(--f-ui); color: var(--gris); max-width: 44ch; }
.herramientas__botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.destinatario { display: flex; flex-direction: column; gap: 5px; font: 700 0.75rem var(--f-ui); color: var(--navy); }
.destinatario input { width: 220px; }

.indice { list-style: none; margin: 0; padding: 0; background: #fff; border-top: 3px solid var(--navy); }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 20px 22px; border-bottom: 1px solid var(--filete); }
.fila[hidden] { display: none; }
.fila .antetitulo::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--economia); outline: 1px solid rgba(14, 23, 80, .15); }
.fila--estado .antetitulo::before { background: var(--estado); }
.fila--educacion .antetitulo::before { background: var(--educacion); }
.fila--empleo .antetitulo::before { background: var(--empleo); }
.fila__titulo { display: block; font: 700 1.2rem/1.3 var(--f-texto); text-decoration: none; margin-bottom: 6px; }
.fila__titulo:hover { text-decoration: underline; }
.fila__bajada { font-size: 0.9375rem; line-height: 1.55; color: var(--gris); margin: 0; max-width: 72ch; }
.fila__etiquetas { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin: 2px 0 0; }
.vacio { background: #fff; padding: 40px 22px; }
.vacio p { font: 700 1.2rem var(--f-texto); color: var(--navy); }

/* ---------- desafíos: los cuatro colores del manual */
.desafios__grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.desafio { display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 0 20px 18px; text-decoration: none; color: var(--navy); background: var(--economia); overflow: hidden; }
.desafio__foto { display: block; width: calc(100% + 40px); margin: 0 -20px 14px; height: 150px; object-fit: cover; mix-blend-mode: multiply; }
.desafio--estado { background: var(--estado); }
.desafio--educacion { background: var(--educacion); }
.desafio--empleo { background: var(--empleo); }
.desafio__nombre { font: 900 clamp(2rem, 3.6vw, 2.9rem)/0.9 var(--f-titulo); text-transform: uppercase; }
.desafio__n { font: 900 1.6rem/1 var(--f-titulo); margin-top: 8px; }
.desafio__n small { font: 700 0.8125rem var(--f-ui); }
.desafio:hover .desafio__nombre { text-decoration: underline; text-decoration-thickness: 3px; }
.sectores { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 56px; }
.sectores li { break-inside: avoid; }
.sectores a { display: grid; grid-template-columns: 200px 1fr 34px; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--filete); text-decoration: none; color: var(--texto); }
.sector__nombre { font: 600 0.9rem var(--f-ui); }
.sector__barra { height: 12px; background: #eef1f4; position: relative; }
.sector__barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); background: var(--economia); outline: 1px solid rgba(14, 23, 80, .12); outline-offset: -1px; }
.sector__barra--estado::after { background: var(--estado); }
.sector__barra--educacion::after { background: var(--educacion); }
.sector__barra--empleo::after { background: var(--empleo); }
.sector__n { font: 900 1.25rem var(--f-titulo); color: var(--navy); text-align: right; }
.sectores a:hover .sector__nombre { text-decoration: underline; }

/* ---------- súmate */
.sumate { background: var(--navy); color: var(--crema); padding: clamp(48px, 6vw, 72px) 0; }
.sumate__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sumate h2 { color: var(--crema); font: 900 clamp(2.2rem, 4.6vw, 3.6rem)/0.95 var(--f-titulo); text-transform: uppercase; }
.sumate p { font-size: 1.125rem; }

/* ---------- ficha como artículo (City Journal) */
.portada-ficha { background: var(--economia); }
.portada-ficha--estado { background: var(--estado); }
.portada-ficha--educacion { background: var(--educacion); }
.portada-ficha--empleo { background: var(--empleo); }
.portada-ficha__grilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.portada-ficha__texto { padding: 26px 0 34px; }
.portada-ficha .migas { margin-bottom: 26px; }
.portada-ficha .firma { color: var(--navy); }
.portada-ficha h1 { font: 900 clamp(2.2rem, 4.6vw, 3.9rem)/0.95 var(--f-titulo); text-transform: uppercase; max-width: 22ch; letter-spacing: -0.005em; }
/* sobre la banda de color, solo las etiquetas de contorno necesitan fondo blanco */
.portada-ficha .et--debate-bajo, .portada-ficha .et--debate-alto, .portada-ficha .et--parcial, .portada-ficha .et--por-confirmar { background: #fff; }
.portada-ficha .et--via-ley { background: var(--navy); }
.portada-ficha .et--curso { border-color: var(--navy); }
.arte { display: block; width: 100%; height: auto; }
.portada-ficha__arte { display: flex; }
.portada-ficha__foto { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; mix-blend-mode: multiply; }
/* las dos fotos reales no se multiplican: eso es para las ilustraciones sobre blanco */
img[src*="salmonicultura"], img[src*="plaza"] { mix-blend-mode: normal !important; }
.portada-ficha__grilla:has(.portada-ficha__foto) { align-items: stretch; }
.arte__fondo { fill: transparent !important; }
.arte__sector { display: none; }
.migas { font: 600 0.8125rem var(--f-ui); color: var(--navy); }
.migas a { color: var(--navy); }
.metadatos { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 24px; padding: 12px 0; border-bottom: 1px solid var(--filete); font: 400 0.8125rem var(--f-ui); color: var(--gris); }
.metadatos p { margin: 0; }
.metadatos__secciones a { color: var(--celeste-texto); font-weight: 600; text-decoration: none; }
.metadatos__fechas { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.metadatos .enlace-boton { color: var(--celeste-texto); text-decoration: none; }
.metadatos .enlace-boton:hover { text-decoration: underline; }
.ficha__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ficha__grilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 6vw, 88px); padding: 36px 0 64px; }
.ficha__texto { max-width: 66ch; }
.cita { margin: 0 0 26px; padding-left: 46px; position: relative; }
.cita::before { content: "“"; position: absolute; left: 0; top: -12px; font: 900 4.4rem/1 var(--f-titulo); color: var(--celeste); }
.cita p { font: 700 1.3rem/1.5 var(--f-texto); color: var(--navy); }
.contenido { background: var(--crema); padding: 14px 18px; margin-bottom: 34px; font: 400 0.875rem var(--f-ui); }
.contenido p { font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.contenido ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 24px; }
.contenido a { color: var(--celeste-texto); }
.apartado { margin-bottom: 40px; scroll-margin-top: 16px; }
.apartado .seccion { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.apartado ul { padding-left: 1.2em; }
.norma { background: var(--crema); border: 1px solid var(--filete); padding: 22px 26px; }
.norma p:last-child { margin-bottom: 0; }
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.balance__lado { border-top: 4px solid var(--empleo); padding-top: 14px; }
.balance__lado--arriesga { border-top-color: var(--educacion); }
.balance h3 { font: 700 1.15rem/1.3 var(--f-texto); }
.balance p { font-size: 0.98rem; }
.falta { font: 400 0.875rem/1.5 var(--f-ui); color: var(--gris); border-top: 1px solid var(--filete); padding-top: 16px; }
.ficha__lateral { align-self: start; }
.riel__titulo { font: 700 1.05rem var(--f-titulo); text-transform: uppercase; letter-spacing: 0.02em; color: var(--celeste-texto); padding-bottom: 8px; border-bottom: 3px solid var(--navy); margin-bottom: 0; }
.datos { margin: 0 0 20px; }
.datos div { padding: 11px 0; border-bottom: 1px solid var(--filete); }
.datos dt { font: 700 0.75rem var(--f-ui); color: var(--celeste-texto); margin-bottom: 2px; }
.datos dd { margin: 0; font: 400 0.9375rem/1.45 var(--f-ui); }
.ayuda { display: block; color: var(--gris); font-size: 0.8125rem; margin-top: 2px; }
.acciones { display: flex; flex-direction: column; gap: 10px; }
.riel { margin-top: 40px; }
.riel__lista { list-style: none; margin: 0; padding: 0; }
.riel__lista li { padding: 14px 0; border-bottom: 1px solid var(--filete); }
.relacionada__titulo { display: block; font: 700 1.2rem/1.08 var(--f-titulo); text-decoration: none; margin-bottom: 8px; }
.relacionada__titulo:hover { text-decoration: underline; }
.relacionada__pie { display: flex; justify-content: space-between; gap: 8px; margin: 0; font: 400 0.78rem var(--f-ui); color: var(--gris); }
.relacionada__pie span { color: var(--celeste-texto); font-weight: 600; }

/* ---------- páginas de texto */
.texto { padding: 36px 0 72px; }
.texto .migas { margin-bottom: 16px; }
.texto h1 { font: 900 clamp(2.6rem, 6vw, 4.2rem)/0.95 var(--f-titulo); text-transform: uppercase; }
.texto .seccion { font-size: 1.8rem; margin-top: 1.6em; }
.entrada { font: 700 1.25rem/1.5 var(--f-texto); color: var(--navy); }
.glosario div { padding: 12px 0; border-bottom: 1px solid var(--filete); }
.glosario dt { font: 700 1.05rem var(--f-texto); color: var(--navy); }
.glosario dd { margin: 0; }
.formulario { display: grid; gap: 16px; margin-top: 28px; background: var(--crema); padding: 24px; border-top: 3px solid var(--navy); }
.formulario label { display: grid; gap: 6px; font: 700 0.8125rem var(--f-ui); color: var(--navy); }
.formulario input, .formulario textarea { font: 400 1rem var(--f-ui); padding: 10px 12px; border: 1px solid #6b7689; border-radius: 0; width: 100%; background: #fff; }
.formulario .boton { justify-self: start; }
.opcional { font-weight: 400; color: var(--gris); }


/* ---------- navegación: submenú de desafíos, menú móvil y barra fija de secciones */
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.45em; text-decoration-color: var(--celeste); }
.menu .menu__accion[aria-current="page"] { text-decoration: none; }
.submenu { position: relative; }
.submenu summary { list-style: none; cursor: pointer; font: 600 0.875rem var(--f-ui); color: var(--navy); }
.submenu summary::-webkit-details-marker { display: none; }
.submenu summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.submenu[open] summary::after { transform: translateY(0) rotate(-135deg); }
.submenu__lista { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: calc(100% + 12px); left: -16px; min-width: 220px; background: #fff; border-top: 3px solid var(--navy); box-shadow: 0 12px 28px rgba(14, 23, 80, .16); z-index: 20; }
.submenu__lista a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font: 600 0.9rem var(--f-ui); color: var(--navy); text-decoration: none; }
.submenu__lista a:hover { background: var(--crema); }
.punto { width: 12px; height: 12px; background: var(--economia); outline: 1px solid rgba(14, 23, 80, .2); flex: none; }
.punto--estado { background: var(--estado); }
.punto--educacion { background: var(--educacion); }
.punto--empleo { background: var(--empleo); }
.menu-boton { display: none; align-items: center; gap: 10px; background: var(--navy); color: #fff; border: 0; padding: 10px 14px; font: 700 0.875rem var(--f-ui); cursor: pointer; }
.menu-boton__icono, .menu-boton__icono::before, .menu-boton__icono::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-boton__icono::before, .menu-boton__icono::after { content: ""; position: absolute; left: 0; }
.menu-boton__icono::before { top: -6px; }
.menu-boton__icono::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { top: 0; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after { top: 0; transform: rotate(-45deg); }

.barra { position: sticky; top: 0; z-index: 15; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--filete); backdrop-filter: blur(6px); }
.barra__fila { display: flex; align-items: center; gap: 18px; min-height: 48px; }
.barra__volver { flex: none; font: 700 0.8125rem var(--f-ui); color: var(--navy); text-decoration: none; padding-right: 18px; border-right: 1px solid var(--filete); }
.barra__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.barra__lista::-webkit-scrollbar { display: none; }
.barra__lista a { display: block; white-space: nowrap; padding: 13px 10px; font: 600 0.8125rem var(--f-ui); color: var(--gris); text-decoration: none; border-bottom: 3px solid transparent; }
.barra__lista a:hover { color: var(--navy); }
.barra__lista a.activo { color: var(--navy); border-bottom-color: var(--celeste); }
[id] { scroll-margin-top: 64px; }

/* ---------- portada: buscador y atajos */
.buscador__form { display: flex; gap: 10px; max-width: 760px; }
.buscador__form input { flex: 1; min-width: 0; font: 400 1.125rem var(--f-ui); padding: 14px 16px; border: 2px solid var(--navy); border-radius: 0; }
.atajos__titulo { font: 700 0.8125rem var(--f-ui); color: var(--celeste-texto); margin: 26px 0 10px; }
.atajos { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.atajos a, .pastilla { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--navy); font: 600 0.875rem var(--f-ui); color: var(--navy); text-decoration: none; background: #fff; }
.atajos a:hover, .pastilla:hover { background: var(--navy); color: #fff; }
.atajos b, .pastilla b { font: 900 1.05rem/1 var(--f-titulo); }
.boton--grande { font-size: 1rem; padding: 1em 1.6em; }
.boton--borde-claro { background: transparent; border-color: var(--crema); color: var(--crema); margin-left: 8px; }
.boton--borde-claro:hover { background: var(--crema); color: var(--navy); }

/* ---------- página de propuestas */
.listado__cabeza { background: var(--crema); padding: 26px 0 22px; border-bottom: 1px solid var(--filete); }
.listado__titulo-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 14px 0 16px; }
.listado h1 { font: 900 clamp(2.6rem, 6vw, 4.4rem)/0.9 var(--f-titulo); text-transform: uppercase; margin: 0; }
.listado .contador { margin: 0; }
.pastillas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { border-color: transparent; background: var(--economia); }
.pastilla--estado { background: var(--estado); }
.pastilla--educacion { background: var(--educacion); }
.pastilla--empleo { background: var(--empleo); }
.pastilla.activa { box-shadow: inset 0 0 0 2px var(--navy); }
.listado__grilla { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding: 28px 0 64px; align-items: start; }
.listado__lateral { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; padding-right: 4px; }
.panel-filtros { border-top: 3px solid var(--navy); }
.panel-filtros > summary { list-style: none; cursor: pointer; font: 900 1.2rem var(--f-titulo); text-transform: uppercase; color: var(--navy); padding: 12px 0; display: flex; align-items: center; gap: 8px; }
.panel-filtros > summary::-webkit-details-marker { display: none; }
.panel-filtros > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.panel-filtros[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.panel-bancada { margin-top: 18px; }
.panel-filtros__n:not(:empty) { font: 700 0.75rem var(--f-ui); background: var(--celeste); color: var(--navy); padding: 3px 8px; }
.listado__lateral .filtros, .listado__lateral .filtros:has(select) { display: grid; grid-template-columns: 1fr !important; gap: 14px; margin: 0 0 8px; }
.listado__lateral .filtro--buscar { grid-column: auto; }
.listado__lateral .herramientas { display: grid; gap: 10px; border: 0; padding: 0 0 8px; margin: 0; }
.listado__lateral .herramientas p { max-width: none; }
.herramientas__titulo { font: 900 1.2rem var(--f-titulo); text-transform: uppercase; margin: 0; }
.listado__lateral .destinatario input { width: 100%; }
.listado__barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; margin-bottom: 12px; }
.activos { display: flex; flex-wrap: wrap; gap: 8px; }
.activo-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; border: 0; padding: 7px 10px 7px 12px; font: 600 0.8125rem var(--f-ui); cursor: pointer; }
.activo-chip span { font-size: 1.05rem; line-height: 1; opacity: .8; }
.activo-chip:hover span { opacity: 1; }
.orden { display: flex; align-items: center; gap: 8px; font: 700 0.75rem var(--f-ui); color: var(--navy); margin-left: auto; }
.orden select { font: 400 0.875rem var(--f-ui); border: 1px solid #6b7689; padding: 7px 8px; border-radius: 0; background: #fff; }
.fila.fuera { display: none; }
.mas-resultados { text-align: center; margin: 24px 0 0; }

/* ---------- para qué sirve */
.pqs-portada { background: var(--crema); padding: 26px 0 0; overflow: hidden; }
.pqs-portada__grilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.pqs-portada h1 { font: 900 clamp(2.8rem, 7vw, 5.2rem)/0.9 var(--f-titulo); text-transform: uppercase; margin: 14px 0 18px; }
.pqs-portada .entrada { margin-bottom: 40px; max-width: 46ch; }
.pqs-portada__foto { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.argumentos { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.argumento { background: var(--crema); padding: 0 26px 22px; }
.argumento__foto { display: block; width: calc(100% + 52px); margin: 0 -26px 18px; height: 220px; object-fit: cover; mix-blend-mode: multiply; background: #fff; }
.argumento h3 { font: 900 1.9rem/1 var(--f-titulo); text-transform: uppercase; }
.proyecto--compacto { padding: clamp(48px, 6vw, 72px) 0; }
.proyecto--compacto .ruta { margin-top: 32px; }
.lectura { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.subtitulo--sin-margen { margin-top: 0; }
.partes { list-style: none; margin: 0; padding: 0; counter-reset: parte; background: #fff; }
.partes li { counter-increment: parte; display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--filete); }
.partes li::before { content: counter(parte); grid-row: span 2; font: 900 1.8rem/1 var(--f-titulo); color: var(--celeste); text-align: center; }
.partes b { font: 700 1.05rem var(--f-texto); color: var(--navy); }
.partes span { font-size: 0.95rem; color: var(--gris); }
.ejemplo { margin-top: 14px; font-size: 0.95rem; }
.glosario--etiquetas { background: #fff; padding: 4px 18px; margin: 0; }
.glosario--etiquetas div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.glosario--etiquetas dd { font-size: 0.95rem; }


/* ---------- menú de desafíos con imágenes */
.submenu summary.actual { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.45em; text-decoration-color: var(--celeste); }
.mega { display: grid; grid-template-columns: repeat(4, 150px); gap: 10px; padding: 12px; left: auto; right: -160px; min-width: 0; }
.mega li { list-style: none; }
.mega__item { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 0 !important; background: var(--economia); }
.mega__item--estado { background: var(--estado); }
.mega__item--educacion { background: var(--educacion); }
.mega__item--empleo { background: var(--empleo); }
.mega__foto { display: block; width: 100%; height: 86px; object-fit: cover; mix-blend-mode: multiply; }
.mega__item span { display: block; padding: 8px 10px 10px; font: 900 1.15rem/1 var(--f-titulo); text-transform: uppercase; }
.mega__item:hover span, .mega__item[aria-current] span { text-decoration: underline; }

/* ---------- desafíos: tarjetas con la frase de Pivotes */
.desafio__frase { display: block; font: 400 0.9rem/1.35 var(--f-texto); margin-top: 8px; color: var(--navy); }
.desafio__ir { margin-left: auto; font: 900 1.4rem/1 var(--f-titulo); }
.desafio__n { display: flex; align-items: baseline; gap: 6px; }
.desafios__grilla--tres { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.sumate__titulo { display: flex; flex-direction: column; gap: 14px; }
.sumate__foto { width: 180px; height: auto; border-radius: 0; }

/* ---------- página de un desafío */
.portada-desafio { background: var(--economia); padding: 26px 0 34px; overflow: hidden; }
.portada-desafio--estado { background: var(--estado); }
.portada-desafio--educacion { background: var(--educacion); }
.portada-desafio--empleo { background: var(--empleo); }
.portada-desafio__grilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.portada-desafio h1 { font: 900 clamp(3.2rem, 8vw, 6.4rem)/0.88 var(--f-titulo); text-transform: uppercase; margin: 16px 0 14px; }
.portada-desafio__frase { font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.3 var(--f-texto); color: var(--navy); max-width: 30ch; margin-bottom: 10px; }
.portada-desafio__bajada { font-size: 1rem; color: var(--navy); max-width: 52ch; }
.portada-desafio__bajada a { font-weight: 700; white-space: nowrap; }
.portada-desafio__foto { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.cifras--desafio { border-top-color: rgba(14, 23, 80, .25); margin-top: 22px; }
.cifras--desafio div + div { border-left-color: rgba(14, 23, 80, .25); }
.cifras--desafio dd { color: var(--navy); }
.pastillas--sectores { margin: 0 0 8px; }
.pastillas--sectores .pastilla { background: #fff; border-color: var(--navy); }
.pastillas--sectores .pastilla:hover { background: var(--navy); color: #fff; }
.ver-todo { margin: 40px 0 0; text-align: center; }

/* ---------- propuestas: árbol para explorar y resumen */
.arbol { list-style: none; margin: 0 0 12px; padding: 0; font: 600 0.9rem var(--f-ui); }
.arbol a { color: var(--navy); text-decoration: none; display: flex; justify-content: space-between; gap: 10px; flex: 1; }
.arbol b { font: 900 1rem var(--f-titulo); color: var(--gris); }
.arbol__todas a { padding: 8px 6px; border-bottom: 1px solid var(--filete); }
.arbol__eje summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--filete); cursor: pointer; }
.arbol__eje summary::-webkit-details-marker { display: none; }
.arbol__eje summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(-45deg); flex: none; margin-left: 4px; }
.arbol__eje details[open] summary::after { transform: rotate(45deg); }
.arbol__eje ul { list-style: none; margin: 0; padding: 4px 0 8px 26px; border-bottom: 1px solid var(--filete); }
.arbol__eje ul a { padding: 5px 6px; font-weight: 400; }
.arbol a:hover { background: var(--crema); }
.arbol a.elegido { background: var(--navy); color: #fff; }
.arbol a.elegido b { color: var(--celeste); }
.resumen { font: 600 0.9375rem/1.4 var(--f-ui); color: var(--navy); margin: 0 0 10px; }
.carrusel__posicion { font: 600 0.8125rem var(--f-ui); color: var(--gris); }


/* ---------- buscador visible, acciones de selección y árbol */
.buscador__form--principal { margin: 22px 0 6px; max-width: 620px; }
.buscador__form--principal input { font-size: 1rem; padding: 12px 14px; }
.buscar-lista { margin: 0 0 16px; }
.buscar-lista label { display: block; font: 900 1.2rem var(--f-titulo); text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.buscar-lista input { width: 100%; font: 400 1rem var(--f-ui); padding: 11px 12px; border: 2px solid var(--navy); border-radius: 0; }
.buscar-lista__estado { font: 400 0.8125rem/1.4 var(--f-ui); color: var(--gris); margin: 6px 0 0; }
.buscar-lista__estado:empty { display: none; }
.acciones-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.boton--chico { font-size: 0.8125rem; padding: 0.6em 1em; }
.boton--chico-borde { font-size: 0.8125rem; padding: 0.6em 1em; background: transparent; color: var(--navy); }
.boton--chico-borde:hover { background: var(--crema); color: var(--navy); }
.resumen:focus { outline: none; }
.resumen:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.arbol__nombre { flex: 1; font: 900 1.05rem var(--f-titulo); text-transform: uppercase; color: var(--navy); }
.arbol__todo { font-weight: 700 !important; }

/* ---------- pie */
.pie { background: var(--navy); color: #cdd3e4; padding: 44px 0 24px; font: 400 0.875rem/1.55 var(--f-ui); }
.pie a { color: var(--crema); }
.pie__fila { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 36px; }
.pie__logo { display: inline-block; color: var(--crema); margin-bottom: 14px; line-height: 0; }
.pie__logo svg { height: 48px; width: auto; }
.pie__titulo { font: 900 1.25rem var(--f-titulo); text-transform: uppercase; color: var(--crema); margin-bottom: 6px; }
.pie__menu { display: flex; flex-direction: column; gap: 6px; }
.pie__nota { font-size: 0.75rem; color: #8d96b6; border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; margin-top: 28px; }

.dossier { display: none; }

/* ---------- movimiento: aparece al hacer scroll, las barras crecen y la ruta se dibuja.
   Solo con JavaScript (clase .js) y nunca con movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
  .cubierta--foto, .desafio__foto { transition: transform .5s ease; }
  .tarjeta:hover .cubierta--foto { transform: scale(1.04); }
  .desafio:hover .desafio__foto { transform: scale(1.05); }
  .js:not(.revelado) .revelar { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .revelar.visible { opacity: 1; transform: none; }
  .js .tarjetas .revelar.visible:nth-child(2), .js .mosaico .revelar.visible:nth-child(2) { transition-delay: .08s; }
  .js .tarjetas .revelar.visible:nth-child(3), .js .mosaico .revelar.visible:nth-child(3) { transition-delay: .16s; }
  .js .tarjetas .revelar.visible:nth-child(4), .js .mosaico .revelar.visible:nth-child(4) { transition-delay: .24s; }
  .js .mosaico .revelar.visible:nth-child(5) { transition-delay: .32s; }
  .js .desafios__grilla .revelar.visible:nth-child(2) { transition-delay: .1s; }
  .js .desafios__grilla .revelar.visible:nth-child(3) { transition-delay: .2s; }
  .js .desafios__grilla .revelar.visible:nth-child(4) { transition-delay: .3s; }

  .js:not(.revelado) [data-barras] .sector__barra::after { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 45ms); }
  .js [data-barras].visible .sector__barra::after { transform: scaleX(1); }

  .js:not(.revelado) [data-ruta]::before { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); }
  .js [data-ruta].visible::before { transform: scaleX(1); }
  .js:not(.revelado) [data-ruta] .ruta__paso { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .js [data-ruta].visible .ruta__paso { opacity: 1; transform: none; }
  .js [data-ruta].visible .ruta__paso:nth-child(2) { transition-delay: .35s; }
  .js [data-ruta].visible .ruta__paso:nth-child(3) { transition-delay: .7s; }
  .js [data-ruta].visible .ruta__paso:nth-child(4) { transition-delay: 1.05s; }

  .principal__foto { animation: entrar-foto 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .banda__texto { position: relative; }
  .js .banda.visible .banda__texto { animation: velocidad .9s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes entrar-foto { from { opacity: 0; transform: scale(.94) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes velocidad { from { opacity: 0; transform: translateX(-60px); letter-spacing: .08em; } to { opacity: 1; transform: none; letter-spacing: normal; } }

/* ---------- responsive */
@media (max-width: 1100px) {
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtro--buscar { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .menu-listo .menu-boton { display: inline-flex; position: absolute; right: 16px; top: 22px; }
  .cabecera__fila { position: relative; }
  .menu-listo .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--filete); }
  .menu-listo .menu.abierto { display: flex; }
  .menu > a, .submenu summary { padding: 13px 0; border-bottom: 1px solid var(--filete); font-size: 1rem; }
  .menu .menu__accion { margin-top: 12px; text-align: center; padding: 13px; }
  .submenu__lista { position: static; box-shadow: none; border-top: 0; padding: 0 0 8px; min-width: 0; }
  .mega { grid-template-columns: 1fr 1fr; padding: 4px 0 12px; }
  .portada-desafio__grilla { grid-template-columns: 1fr; gap: 10px; }
  .portada-desafio__foto { max-width: 360px; order: -1; margin: 0 auto; }
  .desafios__grilla--tres { grid-template-columns: 1fr 1fr; }
  .listado__grilla { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .listado__lateral { position: static; max-height: none; overflow: visible; }
  .panel-filtros { border: 1px solid var(--navy); border-top-width: 3px; padding: 0 14px; }
  .panel-bancada { margin-top: 10px; }
  .pqs-portada__grilla, .argumentos, .lectura { grid-template-columns: 1fr; }
  .pqs-portada__foto { max-width: 260px; margin: 0 auto; }
  .pqs-portada .entrada { margin-bottom: 8px; }
  .principal__grilla, .ficha__grilla, .sumate__grilla, .pie__fila, .proyecto__grilla, .cabeza-imagen { grid-template-columns: 1fr; }
  .principal__imagen { max-width: 420px; }
  .cabeza-imagen__foto { display: none; }
  .ya-es-norma__fila { grid-template-columns: 1fr; }
  .ruta { grid-template-columns: 1fr 1fr; }
  .ruta::before { display: none; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifras div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cifras div:nth-child(n+3) { border-top: 1px solid var(--filete); margin-top: 12px; }
  .tarjetas, .tarjetas--cuatro, .mosaico { grid-template-columns: 1fr 1fr; }
  .tarjeta--principal { grid-column: span 2; grid-row: auto; }
  .carrusel { grid-auto-columns: calc((100% - 20px) / 2); }
  .portada-ficha__grilla { grid-template-columns: 1fr; }
  .portada-ficha__arte { display: none; }
  .fila { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; }
  .desafios__grilla { grid-template-columns: 1fr 1fr; }
  .sectores { columns: 1; }
  .ficha__lateral { position: static; }
  .cabecera__fila { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .filtros,   .tarjetas, .tarjetas--cuatro, .mosaico, .balance { grid-template-columns: 1fr; }
  .tarjeta--principal { grid-column: auto; }
  .carrusel { grid-auto-columns: 82%; }
  .contenido ol { columns: 1; }
  .buscador__form { flex-direction: column; }
  .glosario--etiquetas div { grid-template-columns: 1fr; gap: 6px; }
  .boton--borde-claro { margin: 10px 0 0; }
  .listado__titulo-fila { flex-wrap: wrap; }
  .ya-es-norma ol, .ruta { grid-template-columns: 1fr; }
  .desafio { min-height: 110px; padding: 0 14px 14px; }
  .desafio__foto { width: calc(100% + 28px); margin: 0 -14px 12px; height: 120px; }
  .desafio__nombre { font-size: 1.75rem; }
  .desafio__frase { font-size: 0.82rem; }
  .desafios__grilla--tres { grid-template-columns: 1fr; }
  .sumate__foto { width: 130px; }
  .sectores a { grid-template-columns: 1fr 70px 30px; }
  .menu { gap: 6px 16px; }
  .destinatario, .destinatario input { width: 100%; }
  .herramientas__botones { width: 100%; }
  .cabecera__pivotes-fila span { display: none; }
  .propuestas__cabeza { flex-wrap: wrap; }
  .cita { padding-left: 34px; }
  .cita::before { font-size: 3.4rem; }
  .cita p { font-size: 1.1rem; }
  .entrada { font-size: 1.1rem; }
}

/* ---------- impresión: ficha y dossier para bancadas */
@media print {
  @page { margin: 16mm 14mm; }
  body { font-size: 10.5pt; color: #000; }
  .cabecera__fila .menu, .cabecera__linea, .pie, .filtros, .herramientas, .acciones, .relacionadas,
  .saltar, .sumate, .desafios, .migas, .falta, .banda, .riel, .contenido, .portada-ficha__arte,
  .barra, .menu-boton, .portada-desafio__foto, .pastillas--sectores, .listado__lateral, .listado__barra, .mas-resultados, .pastillas,
  .metadatos .enlace-boton, .bloque-portada--gris, .proyecto, .ya-es-norma, .principal__imagen { display: none !important; }
  .portada-ficha { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .portada-ficha__grilla { display: block; }
  .portada-ficha__texto { padding: 10pt 0 12pt; }
  .portada-ficha h1 { font-size: 22pt; max-width: none; }
  .cabecera__pivotes { background: none; color: var(--navy); }
  .cabecera__logo { color: var(--navy); }
  .cabecera__fila { padding: 6pt 0; }
  .marca { font-size: 18pt; }
  .cita p { font-size: 12pt; }
  .ficha__grilla { display: block; padding: 8pt 0 0; }
  .ficha__lateral { position: static; }
  .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12pt; }
  .apartado { break-inside: avoid; margin-bottom: 12pt; }
  .apartado .seccion { font-size: 14pt; padding-bottom: 4pt; }
  .et { border: 1px solid #888 !important; background: none !important; color: #000 !important; }
  body.imprimiendo-dossier .cabecera, body.imprimiendo-dossier main > *:not(.dossier) { display: none !important; }
  body.imprimiendo-dossier .dossier { display: block; }
  .dossier__portada { break-after: page; padding-top: 24mm; }
  .dossier__logo { color: var(--navy); line-height: 0; }
  .dossier__logo svg { height: 40pt; width: auto; }
  .dossier__portada h1 { font: 900 34pt/0.95 var(--f-titulo); text-transform: uppercase; color: var(--navy); margin-top: 18pt; }
  .dossier__indice { font-size: 10pt; padding-left: 1.2em; }
  .dossier__ficha { break-before: page; }
  .dossier__eje { font: 900 11pt var(--f-titulo); text-transform: uppercase; color: var(--navy); padding: 3pt 6pt; display: inline-block; background: var(--economia); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dossier__eje--estado { background: var(--estado); }
  .dossier__eje--educacion { background: var(--educacion); }
  .dossier__eje--empleo { background: var(--empleo); }
  .dossier__ficha h2 { font: 900 19pt/1 var(--f-titulo); text-transform: uppercase; color: var(--navy); margin: 6pt 0; }
  .dossier__ficha h3 { font: 900 11pt var(--f-titulo); text-transform: uppercase; color: var(--navy); margin: 10pt 0 2pt; }
  .dossier__ficha .norma { padding: 8pt 10pt; }
  .dossier__pie { font: 8.5pt var(--f-ui); color: var(--gris); }
  a { color: #000; text-decoration: none; }
}