/* =====================================================================
   LegalTech · Sistema de identidad «Estratos»
   Fuente: LegalTech_Manual_de_Marca_v1 (septiembre 2026).
   Todos los colores salen de estos tokens. No escribir hex sueltos
   fuera de :root.
   ===================================================================== */

:root {
  /* Niveles normativos y voz humana */
  --barro: #F0603A;       /* nivel 1 · constitucional */
  --anil: #2B44D9;        /* nivel 2 · ordinario */
  --jade: #12A37F;        /* nivel 3 · reglamentario */
  --maiz: #F4B92E;        /* nivel 4 · individualizado */
  --buganvilia: #F0508C;  /* la voz humana · acción principal */

  /* Base */
  --obsidiana: #0F172A;
  --papel: #F6F1E7;
  --piedra: #E6DFD0;

  /* Tenues */
  --barro-tenue: #FBD9CD;
  --anil-tenue: #D5DBFA;
  --jade-tenue: #CDEEE4;
  --maiz-tenue: #FCECC0;
  --buganvilia-tenue: #FCD6E5;

  /* Estado normativo (color de texto, nunca de banda) */
  --estado-vigente: #0A6B53;
  --estado-reformado: #8A5A00;
  --estado-derogado: #B3261E;

  /* Apoyos del manual HTML */
  --sutil: #55607A;
  --filete-suave: #D8CFBD;
  --superficie: #FFFDF8;

  /* Enlaces */
  --enlace-claro: #2B44D9;
  --enlace-oscuro: #94A2FF;

  /* Tema (claro por defecto) */
  --fondo: var(--papel);
  --tinta: var(--obsidiana);
  --tinta-suave: var(--sutil);
  --descanso: var(--piedra);
  --tarjeta: var(--superficie);
  --linea: var(--filete-suave);
  --enlace: var(--enlace-claro);
  --st-vigente: var(--estado-vigente);
  --st-pendiente: var(--estado-reformado);
  --st-derogado: var(--estado-derogado);
  --esqueleto: var(--piedra);
  --esqueleto-brillo: var(--papel);

  /* Retícula de estratos: módulo 4 px */
  --m: 40px;              /* margen lateral en escritorio */
  --banda: 104px;         /* banda con palabra */
  --banda-min: 64px;
  --t: 200ms;             /* movimiento: solo horizontal, 200 ms */
  --escalon: 60ms;

  --f-marca: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-norma: "Newsreader", Georgia, serif;
  --f-dato: "IBM Plex Mono", Menlo, monospace;

  color-scheme: light;
}

/* Tema oscuro: fondo obsidiana, tinta papel. Los colores de identidad no cambian. */
:root[data-theme="oscuro"] {
  --fondo: var(--obsidiana);
  --tinta: var(--papel);
  --tinta-suave: #A9B1C4;
  --descanso: #1A2338;
  --tarjeta: #151E33;
  --linea: #2C3752;
  --enlace: var(--enlace-oscuro);
  --st-vigente: #5CD6B0;
  --st-pendiente: var(--maiz);
  --st-derogado: #FF8A80;
  --esqueleto: #1A2338;
  --esqueleto-brillo: #2C3752;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --fondo: var(--obsidiana);
    --tinta: var(--papel);
    --tinta-suave: #A9B1C4;
    --descanso: #1A2338;
    --tarjeta: #151E33;
    --linea: #2C3752;
    --enlace: var(--enlace-oscuro);
    --st-vigente: #5CD6B0;
    --st-pendiente: var(--maiz);
    --st-derogado: #FF8A80;
    --esqueleto: #1A2338;
    --esqueleto-brillo: #2C3752;
    color-scheme: dark;
  }
}

@media (max-width: 720px) {
  :root { --m: 24px; --banda: 80px; }
}

/* ---------- Zonas: color de banda y regla de texto ----------
   Sobre color, obsidiana. Sobre añil y obsidiana, papel. */
.z-barro      { --zc: var(--barro);      --zt: var(--obsidiana); }
.z-anil       { --zc: var(--anil);       --zt: var(--papel); }
.z-jade       { --zc: var(--jade);       --zt: var(--obsidiana); }
.z-maiz       { --zc: var(--maiz);       --zt: var(--obsidiana); }
.z-buganvilia { --zc: var(--buganvilia); --zt: var(--obsidiana); }
.z-obsidiana  { --zc: var(--obsidiana);  --zt: var(--papel); }
.z-piedra     { --zc: var(--piedra);     --zt: var(--obsidiana); }
.z-fondo      { --zc: var(--fondo);      --zt: var(--tinta); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-marca);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--enlace); text-underline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--buganvilia); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salto { position: absolute; left: var(--m); top: -80px; z-index: 100; background: var(--obsidiana); color: var(--papel); padding: 12px 24px 12px 16px; font-weight: 600; }
.salto:focus { top: 8px; }

.contenedor { padding-inline: var(--m); max-width: 1440px; }
.seccion { padding-block: 104px; }
@media (max-width: 720px) { .seccion { padding-block: 64px; } }
.descanso { background: var(--descanso); }

/* Piezas del logo según tema */
.solo-oscuro { display: none !important; }
:root[data-theme="oscuro"] .solo-claro { display: none !important; }
:root[data-theme="oscuro"] .solo-oscuro { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .solo-claro { display: none !important; }
  :root:not([data-theme="claro"]) .solo-oscuro { display: block !important; }
}

/* ---------- Tres voces tipográficas ---------- */
.indice {
  font-family: var(--f-dato); font-weight: 500; font-size: 12px; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
}
.titular {
  font-weight: 900; font-stretch: 110%; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(36px, 5.2vw, 64px); margin-top: 12px; max-width: 18ch;
}
@media (max-width: 480px) {
  /* «Acompañamiento» no cabe a 36 px en pantallas angostas. */
  .titular { font-size: clamp(27px, 8.4vw, 36px); overflow-wrap: break-word; }
}
.subtitular { font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.01em; }
.cuerpo { max-width: 66ch; }
.cuerpo + .cuerpo { margin-top: 16px; }
.intro { max-width: 62ch; margin-top: 24px; color: var(--tinta-suave); font-size: 18px; }
.tesis { font-family: var(--f-norma); font-style: italic; font-weight: 300; letter-spacing: -.015em; line-height: 1.05; }
.norma { font-family: var(--f-norma); font-weight: 400; font-size: 19px; line-height: 1.6; }
.cifra { font-family: var(--f-dato); font-weight: 500; font-size: clamp(32px, 3.4vw, 40px); line-height: 1; letter-spacing: -.02em; }
.dato { font-family: var(--f-dato); font-weight: 500; font-size: 13px; line-height: 1.4; }

/* Filete doble: 16 + 4 con 8 entre ellos */
.filete { border-top: 16px solid var(--tinta); position: relative; height: 28px; }
.filete::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 4px solid var(--tinta); }

/* ---------- Banda ---------- */
.banda {
  --w: 84%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: var(--w); min-height: var(--banda);
  padding: 0 24px 0 var(--m);
  background: var(--zc); color: var(--zt);
  text-decoration: none; overflow: hidden;
  transition: width var(--t) ease-out;
}
.banda__palabra {
  font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  letter-spacing: -.03em; line-height: .9; white-space: nowrap;
  font-size: clamp(34px, 6.4vw, 96px);
}
.banda__rotulo {
  font-family: var(--f-dato); font-weight: 500; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; flex: none;
}
a.banda:hover, a.banda:focus-visible { width: min(100%, calc(var(--w) + 8%)); }
a.banda:focus-visible { outline-offset: -3px; }
.banda--corta { min-height: var(--banda-min); }
@media (max-width: 1400px) {
  /* Sin ancho para ponerlos en fila, el rótulo sube sobre la palabra y ambos pueden partir línea: nada se recorta. */
  .banda { flex-direction: column-reverse; align-items: flex-start; justify-content: center; gap: 8px; padding-block: 14px; }
  .banda__palabra, .banda__rotulo { white-space: normal; max-width: 100%; overflow-wrap: break-word; }
  .banda__palabra { line-height: .95; }
}
@media (max-width: 720px) {
  .banda__rotulo { font-size: 11px; }
}
@media (max-width: 480px) {
  .banda__palabra { font-size: clamp(24px, 8.4vw, 34px); }
}
.banda--todo { background: transparent; color: var(--tinta); outline: 2px dashed var(--tinta-suave); outline-offset: -2px; }
.banda--corta .banda__palabra { font-size: clamp(26px, 3.4vw, 44px); }

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--obsidiana); color: var(--papel);
  border-bottom: 4px solid var(--barro);
}
.cabecera__fila { display: flex; align-items: center; gap: 24px; height: 64px; padding-inline: var(--m); }
.cabecera__logo { display: flex; align-items: center; flex: none; }
.cabecera__logo img { height: 28px; width: auto; }
.cabecera__nav { margin-left: auto; }
.cabecera__nav ul { display: flex; gap: 24px; }
.cabecera__nav a {
  color: var(--papel); text-decoration: none;
  font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .82; white-space: nowrap;
}
.cabecera__nav a:hover, .cabecera__nav a:focus-visible { opacity: 1; color: var(--maiz); }
.cabecera__tema, .cabecera__menu {
  background: transparent; color: var(--papel); border: 0; cursor: pointer; padding: 8px 0;
  font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; flex: none;
}
.cabecera__menu { display: none; margin-left: auto; }
@media (max-width: 1400px) {
  .cabecera .cabecera__accion { display: none; }
}
@media (max-width: 400px) {
  /* Logo y dos botones en una sola fila hasta 320 px. */
  .cabecera__fila { gap: 12px; }
  .cabecera__logo img { height: 22px; }
  .cabecera__tema, .cabecera__menu { letter-spacing: .04em; font-size: 11px; }
}
@media (max-width: 1120px) {
  .cabecera__menu { display: block; }
  .cabecera__nav { position: absolute; left: 0; right: 0; top: 68px; margin: 0; display: none; }
  .cabecera__nav.abierto { display: block; }
  .cabecera__nav ul { flex-direction: column; gap: 0; }
  .cabecera__nav li a {
    display: block; padding: 20px var(--m); background: var(--obsidiana); opacity: 1;
    border-top: 1px solid var(--linea); font-size: 13px;
  }
  .cabecera__nav li:nth-child(1) a { width: 75%; }
  .cabecera__nav li:nth-child(2) a { width: 80%; }
  .cabecera__nav li:nth-child(3) a { width: 85%; }
  .cabecera__nav li:nth-child(4) a { width: 90%; }
  .cabecera__nav li:nth-child(5) a { width: 95%; }
  .cabecera__nav li:nth-child(n+6) a { width: 100%; }
}

/* ---------- Botones: bandas cortas, flecha al final, verbo primero ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 40px 16px 24px;
  background: var(--obsidiana); color: var(--papel);
  font-family: var(--f-marca); font-weight: 600; font-size: 14px; line-height: 1.3;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
}
:root[data-theme="oscuro"] .boton:not(.boton--accion) { background: var(--papel); color: var(--obsidiana); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) .boton:not(.boton--accion) { background: var(--papel); color: var(--obsidiana); } }
.boton--accion { background: var(--buganvilia); color: var(--obsidiana); }
.boton--linea { background: transparent; color: var(--tinta); padding: 16px 24px 16px 0; box-shadow: inset 0 -4px 0 currentColor; }
:root[data-theme="oscuro"] .boton--linea { background: transparent; color: var(--tinta); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) .boton--linea { background: transparent; color: var(--tinta); } }
.cabecera .boton--accion { padding-block: 10px; }
.acciones { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 32px; }

/* ---------- Estado ---------- */
.estado { font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.estado--vigente, .estado--respaldo { color: var(--st-vigente); }
.estado--pendiente { color: var(--st-pendiente); }
.estado--derogado { color: var(--st-derogado); }

/* ---------- Cita: cada afirmación cita su fuente ---------- */
.cita { background: var(--tarjeta); border-top: 16px solid var(--zc, var(--barro)); color: var(--tinta); }
.cita__cabecera, .cita__pie {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 24px 0; font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em;
}
.cita__cabecera { color: var(--tinta-suave); text-transform: uppercase; }
.cita__epigrafe { font-weight: 800; font-size: 15px; padding: 16px 24px 0; }
.cita__texto { padding: 8px 24px; }
.cita__pie { padding: 8px 24px 24px; font-size: 13px; letter-spacing: 0; }
.cita__pie a { color: var(--enlace); text-decoration: none; }
.cita__pie a:hover, .cita__pie a:focus-visible { text-decoration: underline; }
.cita__pendiente { margin: 0 24px 24px; padding: 12px 16px; background: var(--descanso); font-size: 15px; }
.cita__pendiente .estado { display: block; margin-bottom: 4px; }
.pregunta { font-family: var(--f-dato); font-weight: 500; font-size: 13px; color: var(--tinta-suave); margin-bottom: 12px; }
.llamadas { font-family: var(--f-dato); font-size: 13px; background: var(--descanso); padding: 12px 16px; margin-bottom: 16px; color: var(--tinta); overflow-x: auto; white-space: pre; }

/* ---------- Ficha: banda corta con filete superior de 16 px ---------- */
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 48px; }
.ficha { background: var(--tarjeta); border-top: 16px solid var(--zc); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ficha__nombre { font-weight: 800; font-size: 24px; line-height: 1.15; }
.ficha__sub { font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.ficha__muestra { font-family: var(--f-dato); font-size: 12.5px; background: var(--descanso); padding: 12px 16px; line-height: 1.7; overflow-x: auto; }
.ficha__muestra span { display: block; white-space: pre; }
.ficha--todo { background: transparent; outline: 2px dashed var(--linea); outline-offset: -2px; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.etiquetas li { font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.etiquetas li::before { content: "["; } .etiquetas li::after { content: "]"; }

.lista-filete li { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.lista-filete li:first-child { border-top: 4px solid var(--tinta); }

.todo {
  font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .06em;
  background: var(--maiz-tenue); color: var(--obsidiana); padding: 2px 8px; display: inline-block;
}

/* ---------- Portada ---------- */
.portada { position: relative; padding-top: 0; }
.portada__vacio { position: absolute; top: 40px; left: 58%; right: var(--m); z-index: 1; }
.portada__vacio h1 { font-size: clamp(40px, 4.6vw, 64px); }
.portada__vacio .indice { margin-top: 20px; line-height: 1.7; }
.portada__bandas { display: flex; flex-direction: column; }
.portada__bandas .banda { min-height: 120px; }
.portada__bandas .banda:nth-child(1) { --w: 36%; }
.portada__bandas .banda:nth-child(2) { --w: 52%; }
.portada__bandas .banda:nth-child(3) { --w: 68%; }
.portada__bandas .banda:nth-child(4) { --w: 84%; }
.portada__bandas .banda:nth-child(1) .banda__palabra { font-size: clamp(22px, 2.6vw, 34px); }
.portada__bandas .banda:nth-child(2) .banda__palabra,
.portada__bandas .banda:nth-child(3) .banda__palabra { font-size: clamp(34px, 5.4vw, 80px); }
.portada__bandas .banda:nth-child(4) .banda__palabra { font-size: clamp(40px, 7vw, 104px); }
.portada__base { position: relative; display: flex; align-items: center; min-height: 168px; padding-left: var(--m); padding-right: calc(16% + 24px); }
.portada__base img { height: clamp(56px, 8.6vw, 128px); width: auto; }
.portada__base::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 16%; background: var(--buganvilia); }
@media (max-width: 1000px) {
  .portada__vacio { position: static; padding: 48px var(--m) 40px; }
  .portada__bandas .banda { min-height: 88px; }
  .portada__bandas .banda:nth-child(1) { --w: 70%; }
  .portada__bandas .banda:nth-child(2) { --w: 80%; }
  .portada__bandas .banda:nth-child(3) { --w: 90%; }
  .portada__bandas .banda:nth-child(4) { --w: 100%; }
  .portada__bandas .banda:nth-child(4):hover, .portada__bandas .banda:nth-child(4):focus-visible { width: 100%; }
  .portada__bandas .banda:nth-child(1) .banda__palabra { font-size: clamp(18px, 5vw, 34px); }
  /* «REGLAMENTOS» debe caber entero en su banda del 90 %. */
  .portada__bandas .banda:nth-child(n+2) .banda__palabra { font-size: clamp(22px, 7.2vw, 72px); }
  .portada__base { min-height: 120px; }
}

/* ---------- Corpus / cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); gap: 32px 24px; margin-top: 40px; }
.cifras div { border-top: 4px solid var(--tinta); padding-top: 16px; }
.cifras dt { order: 2; font-size: 14px; color: var(--tinta-suave); margin-top: 8px; }
.cifras div { display: flex; flex-direction: column; }
.cifras dd { order: 1; margin: 0; }
.fuente { margin-top: 16px; }
.aliados { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 48px; align-items: baseline; }
.aliados li { font-weight: 600; }

/* ---------- Zonas de producto ---------- */
.linea-cabecera { padding-inline: var(--m); }
.zona { margin-top: 104px; }
.zona > .banda { --w: 84%; }
.zona__cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding: 48px var(--m) 0; }
.zona__cuerpo .subtitular { margin-bottom: 16px; }
@media (max-width: 900px) {
  .zona > .banda { --w: 100%; }
  .zona__cuerpo { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Cadena documentos → grafo → MCP → agente ---------- */
.cadena { margin-top: 8px; }
.cadena__paso + .cadena__paso { margin-top: 8px; }
.cadena__paso {
  --w: 40%;
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: var(--w); min-height: var(--banda-min); padding: 12px 24px 12px var(--m);
  background: var(--zc); color: var(--zt); overflow: hidden;
}
.cadena__paso:nth-child(1) { --w: 40%; }
.cadena__paso:nth-child(2) { --w: 55%; }
.cadena__paso:nth-child(3) { --w: 70%; }
.cadena__paso:nth-child(4) { --w: 85%; }
.cadena__nombre { font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(18px, 2.2vw, 28px); line-height: 1; }
.cadena__nota { font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.cadena__pulso { position: absolute; left: 0; bottom: 0; height: 4px; width: 64px; background: currentColor; opacity: .9; transform: translateX(-64px); }
@media (max-width: 900px) {
  .cadena__paso:nth-child(1) { --w: 70%; }
  .cadena__paso:nth-child(2) { --w: 80%; }
  .cadena__paso:nth-child(3) { --w: 90%; }
  .cadena__paso:nth-child(4) { --w: 100%; }
  .cadena__nota { display: none; }
}

/* Bandas protagonistas de la línea */
.linea-bandas { margin-top: 56px; display: flex; flex-direction: column; }
.linea-bandas .banda:nth-child(1) { --w: 52%; }
.linea-bandas .banda:nth-child(2) { --w: 62%; }
.linea-bandas .banda:nth-child(3) { --w: 72%; }
.linea-bandas .banda:nth-child(4) { --w: 82%; }
.linea-bandas .banda:nth-child(n+5) { --w: 92%; }
@media (max-width: 900px) {
  .linea-bandas .banda:nth-child(1) { --w: 76%; }
  .linea-bandas .banda:nth-child(2) { --w: 84%; }
  .linea-bandas .banda:nth-child(3) { --w: 92%; }
  .linea-bandas .banda:nth-child(n+4) { --w: 100%; }
}

.caso { margin-top: 56px; padding-inline: var(--m); }
.caso .ficha { max-width: 760px; }

/* Detalle de producto */
.detalle { margin-top: 104px; }
.detalle > .banda { --w: 68%; }
/* Nombres largos («Protocolo de Inteligencia Jurisprudencial») parten línea en vez de recortarse. */
.detalle > .banda { padding-block: 14px; }
.detalle > .banda .banda__palabra { white-space: normal; line-height: .95; }
@media (max-width: 900px) { .detalle > .banda { --w: 100%; } }
.detalle__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 40px var(--m) 0; }
@media (max-width: 900px) { .detalle__cuerpo { grid-template-columns: 1fr; gap: 40px; } }
.ficha-tecnica { margin-top: 32px; }
.ficha-tecnica > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.ficha-tecnica > div:first-child { border-top: 4px solid var(--tinta); }
.ficha-tecnica dt { font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); padding-top: 3px; }
.ficha-tecnica dd ul li { display: inline; }
.ficha-tecnica dd ul li:not(:last-child)::after { content: " · "; color: var(--tinta-suave); }
@media (max-width: 520px) { .ficha-tecnica > div { grid-template-columns: 1fr; gap: 4px; } }

.ilustracion { background: var(--descanso); padding: 24px; margin-bottom: 24px; }
.ilustracion svg { width: 100%; height: auto; }
.ilustracion figcaption { margin-top: 12px; }

/* ---------- Formación e institucional ---------- */
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding: 48px var(--m) 0; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; gap: 40px; } }
.sectores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 24px; margin-top: 24px; }
.sectores li { padding: 16px 0; border-bottom: 1px solid var(--linea); font-weight: 600; }

/* ---------- Contacto ---------- */
.contacto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; }
@media (max-width: 900px) { .contacto__grid { grid-template-columns: 1fr; gap: 48px; } }
.datos { margin-top: 32px; }
.datos > div { padding: 16px 0; border-bottom: 1px solid var(--linea); }
.datos > div:first-child { border-top: 4px solid var(--tinta); }
.datos dt { font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.datos dd { font-weight: 600; margin-top: 4px; }
.datos a { color: var(--tinta); }
.formulario { background: var(--tarjeta); border-top: 16px solid var(--anil); padding: 32px; position: relative; }
@media (max-width: 520px) { .formulario { padding: 24px; } }
.campo { margin-bottom: 20px; }
.campo label { display: block; font-family: var(--f-dato); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 16px/1.4 var(--f-marca); color: var(--tinta);
  background: var(--fondo); border: 0; border-bottom: 4px solid var(--tinta);
  padding: 12px 16px; border-radius: 0; appearance: none;
}
.campo select { background-image: none; }
.campo textarea { resize: vertical; min-height: 128px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-suave); }
.campo .error { display: block; margin-top: 6px; font-family: var(--f-dato); font-size: 12px; color: var(--st-derogado); }
.campo--error input, .campo--error select, .campo--error textarea { border-bottom-color: var(--st-derogado); }
.contador { font-family: var(--f-dato); font-size: 12px; color: var(--tinta-suave); margin-top: 6px; }
.trampa { position: absolute; left: -9999px; top: -9999px; }
.aviso { margin-top: 20px; padding: 16px 20px; border-top: 4px solid currentColor; background: var(--descanso); display: none; }
.aviso.visible { display: block; }
.aviso--ok { color: var(--st-vigente); }
.aviso--error { color: var(--st-derogado); }
.aviso p { color: var(--tinta); margin-top: 4px; }

/* ---------- Pie ---------- */
.pie { background: var(--obsidiana); color: var(--papel); padding: 64px 0 32px; margin-top: 0; }
.pie a { color: var(--papel); }
.pie .indice { color: #A9B1C4; }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .pie__grid { grid-template-columns: 1fr; gap: 40px; } }
.pie__logo { height: 56px; width: auto; margin-bottom: 20px; }
.pie li { padding: 6px 0; }
.pie__barra { margin-top: 56px; padding-top: 24px; border-top: 1px solid #2C3752; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }

/* =====================================================================
   Movimiento: solo horizontal. Sin animación con movimiento reducido.
   ===================================================================== */

/* Intro: isotipo al centro; las barras entran desde la izquierda,
   la base primero y el vértice al final. */
.intro-logo { display: none; }
.js .intro-logo {
  display: flex; position: fixed; inset: 0; z-index: 90;
  background: var(--fondo); align-items: center; justify-content: center; flex-direction: column; gap: 28px;
  animation: intro-sale 400ms ease-in 3.6s forwards; /* salida de respaldo si falla el JS */
}
.intro-logo svg { width: min(38vw, 180px); height: auto; overflow: visible; }
.intro-logo .barra { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: barra-entra 420ms cubic-bezier(.2,.7,.2,1) forwards; }
.intro-logo .barra--1 { animation-delay: 540ms; }
.intro-logo .barra--2 { animation-delay: 420ms; }
.intro-logo .barra--3 { animation-delay: 300ms; }
.intro-logo .barra--5 { animation-delay: 180ms; }
.intro-logo .barra--4 { animation-delay: 760ms; }
.intro-logo__palabra { width: min(52vw, 240px); height: auto; clip-path: inset(0 100% 0 0); animation: palabra-entra 420ms ease-out 1s forwards; }
.intro-logo .intro-tinta { fill: var(--tinta); }
.intro-logo .intro-acento { fill: var(--barro); }
.intro-logo.sale { animation: intro-sale 400ms ease-in forwards; }
@keyframes barra-entra { to { transform: scaleX(1); } }
@keyframes palabra-entra { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-sale { to { transform: translateX(-100%); visibility: hidden; } }

/* Entrada de estratos de la portada */
.js .portada__bandas .banda { transform: translateX(-101%); }
.js .listo .portada__bandas .banda { animation: estrato-entra var(--t) ease-out forwards; }
.js .listo .portada__bandas .banda:nth-child(4) { animation-delay: 0ms; }
.js .listo .portada__bandas .banda:nth-child(3) { animation-delay: calc(var(--escalon) * 1); }
.js .listo .portada__bandas .banda:nth-child(2) { animation-delay: calc(var(--escalon) * 2); }
.js .listo .portada__bandas .banda:nth-child(1) { animation-delay: calc(var(--escalon) * 3); }
@keyframes estrato-entra { from { transform: translateX(-101%); } to { transform: translateX(0); } }

/* Esqueleto «Kelsen»: bandas escalonadas mientras la sección no se ha revelado */
.js [data-esqueleto] { position: relative; }
/* El brillo recorre más allá del borde derecho: se recorta mientras dura el esqueleto. */
.js [data-esqueleto]:not(.revelado) { overflow: hidden; }
.js [data-esqueleto]:not(.revelado) > * { visibility: hidden; }
.js [data-esqueleto]:not(.revelado)::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--sk-top, 104px); height: 280px; z-index: 1;
  background-image:
    linear-gradient(var(--esqueleto), var(--esqueleto)),
    linear-gradient(var(--esqueleto), var(--esqueleto)),
    linear-gradient(var(--esqueleto), var(--esqueleto)),
    linear-gradient(var(--esqueleto), var(--esqueleto)),
    linear-gradient(var(--esqueleto), var(--esqueleto));
  background-repeat: no-repeat;
  background-size: 24% 16px, 36% 40px, 52% 40px, 68% 40px, 84% 40px;
  background-position: var(--m) 0, 0 48px, 0 104px, 0 160px, 0 216px;
}
.js [data-esqueleto]:not(.revelado)::after {
  content: ""; position: absolute; left: 0; top: var(--sk-top, 104px); height: 256px; width: 12%; z-index: 2;
  background: var(--esqueleto-brillo); opacity: .55; mix-blend-mode: normal;
  animation: esqueleto-barre 1.1s linear infinite;
}
@keyframes esqueleto-barre { from { transform: translateX(-100%); } to { transform: translateX(900%); } }
.js [data-esqueleto].revelado > * { animation: contenido-entra var(--t) ease-out both; }
@keyframes contenido-entra { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Pulso de la cadena: recorre cada eslabón en orden */
.cadena.activa .cadena__pulso { animation: pulso 4s linear infinite; }
.cadena.activa .cadena__paso:nth-child(2) .cadena__pulso { animation-delay: 1s; }
.cadena.activa .cadena__paso:nth-child(3) .cadena__pulso { animation-delay: 2s; }
.cadena.activa .cadena__paso:nth-child(4) .cadena__pulso { animation-delay: 3s; }
@keyframes pulso { 0% { transform: translateX(-64px); } 25% { transform: translateX(calc(100vw)); } 100% { transform: translateX(calc(100vw)); } }

/* SVG animados de producto: solo traslación horizontal */
.anim .desliza { animation: desliza var(--dur, 6s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes desliza {
  0%, 12% { transform: translateX(0); }
  22%, 70% { transform: translateX(var(--dx, 200px)); }
  80%, 100% { transform: translateX(var(--dx, 200px)); opacity: 0; }
}
.anim .crece { transform-box: fill-box; transform-origin: left center; animation: crece var(--dur, 6s) ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes crece { 0%, 20% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
.anim .viaje { animation: viaje var(--dur, 5s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes viaje {
  0%, 8% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  40% { transform: translateX(var(--dx, 200px)); opacity: 1; }
  48%, 100% { transform: translateX(var(--dx, 200px)); opacity: 0; }
}
.anim .aparece { animation: aparece var(--dur, 5s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes aparece { 0%, 45% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .intro-logo { display: none; }
  .js .portada__bandas .banda { transform: none; }
  .js [data-esqueleto]:not(.revelado) > * { visibility: visible; }
  .js [data-esqueleto]:not(.revelado)::before, .js [data-esqueleto]:not(.revelado)::after { display: none; }
  .anim .desliza, .anim .viaje { transform: translateX(var(--dx, 0)); opacity: 1; }
  .anim .crece { transform: none; }
  .anim .aparece { opacity: 1; }
}

@media (max-width: 400px) {
  /* «CONSTITUCIÓN» entera en una línea hasta 320 px. */
  .portada__bandas .banda:nth-child(1) { --w: 76%; }
  .portada__bandas .banda:nth-child(2) { --w: 84%; }
  .portada__bandas .banda:nth-child(3) { --w: 92%; }
}