/* ═══════════════════════════════════════════════════════════════════════════
   Consultoría Nam Nam
   Paleta: p-03 "Warm Beige" re-acentuada  ·  Tipografía: serif display + sans
   Un solo acento (sienna). Sin degradados. 4 colores dominantes + neutros.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── color · la paleta de la presentación ────────────────────────────
     Extraída de Evaluacion_Nam_Nam_Colores.pdf pesando el área pintada.
     Regla dura de contraste, medida, no supuesta:
       · amarillo SOBRE azul  = 6.54:1  → sirve de texto
       · amarillo SOBRE claro = 1.39:1  → NUNCA de texto; sólo de relleno,
         y con texto azul encima (6.54:1 al revés).                        */
  --brand:       #124BA5;   /* 55 % del área del deck */
  --brand-deep:  #123F87;
  --brand-vivid: #1456B8;
  --brand-mute:  #476486;
  --brand-abyss: #0D2F66;
  --accent:      #FFC928;
  --pale:        #D9E5F5;
  --pale-2:      #EDF4FC;

  /* contexto azul — el predeterminado de la página */
  --ground:      var(--brand-deep);
  --surface:     var(--brand);
  --ink:         #ffffff;              /* 10.06:1 */
  --ink-2:       var(--pale);          /*  7.90:1 */
  --ink-3:       rgba(217,229,245,.82);  /* 5.9:1 / 4.9:1 */
  --rule:        rgba(217,229,245,.22);
  --accent-ink:  var(--accent);        /*  6.54:1 */
  --accent-wash: rgba(255,201,40,.16);
  --on-accent:   var(--brand-deep);    /* texto encima del amarillo */

  /* aliases heredados, para que ninguna propiedad quede sin definir */
  --dark: var(--brand-abyss);
  --dark-2: var(--brand);
  --on-dark: #ffffff;
  --on-dark-2: var(--pale);
  --on-dark-3: rgba(217,229,245,.82);
  --rule-dark: rgba(217,229,245,.22);
  --accent-lift: var(--accent);

  /* ── tipografía ──────────────────────────────────────────────────────── */
  --display: "Instrument Serif", Iowan Old Style, Georgia, serif;
  --sans:    "Inter", system-ui, -apple-system, Segoe UI, sans-serif;

  --fs-display: clamp(3.5rem, 13vw, 10.5rem);
  --fs-h2:      clamp(2rem, 4.6vw, 3.9rem);
  --fs-h3:      clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-body:    1rem;
  --fs-sm:      .8125rem;
  --fs-label:   .6875rem;

  /* ── espacio ─────────────────────────────────────────────────────────── */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;   --s10: 8rem;  --s11: 12rem;
  --pad: clamp(1.25rem, 4vw, 4.5rem);

  /* ── movimiento (4 niveles, no uno) ──────────────────────────────────── */
  --t-fast:      160ms;
  --t-standard:  320ms;
  --t-medium:    520ms;
  --t-slow:      900ms;
  --e-out:       cubic-bezier(.16, 1, .3, 1);
  --e-inout:     cubic-bezier(.76, 0, .24, 1);
  --e-spring:    linear(0, .32 8%, .79 20%, 1.03 30%, 1.01 46%, 1);
}

/* ── bandas: cambian el contexto de color, no sólo el fondo ───────────── */
.band--light {
  --ground:      var(--pale-2);
  --surface:     #ffffff;
  --ink:         var(--brand-deep);    /* 9.08:1 */
  --ink-2:       var(--brand-mute);    /* 5.52:1 */
  --ink-3:       var(--brand-mute);      /* 5.52:1 */
  --rule:        rgba(18,63,135,.16);
  --accent-ink:  var(--brand);         /* 7.36:1 — el amarillo no se lee aquí */
  --accent-wash: rgba(255,201,40,.34); /* pero sí carga como relleno */
  background: var(--ground);
  color: var(--ink);
}
.band--lift {
  --ground: var(--brand);
  background: var(--ground);
}

/* ── reset mínimo ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);          /* el body pinta su propio suelo */
  color: var(--ink);
  font: 400 var(--fs-body)/1.65 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 50;
  background: var(--accent); color: var(--on-accent);
  padding: var(--s3) var(--s5); border-radius: 2px;
  font-size: var(--fs-sm); text-decoration: none;
  transition: top var(--t-fast) var(--e-out);
}
.skip:focus { top: var(--s4); }

/* ── primitivas de tipo ────────────────────────────────────────────────── */
.label {
  font: 500 var(--fs-label)/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.label--accent { color: var(--accent-ink); }

.h2 {
  font: 400 var(--fs-h2)/1.02 var(--display);
  letter-spacing: -.02em;
  max-width: 22ch;
  margin-top: var(--s4);
}
.num, .n { font-variant-numeric: tabular-nums; }

/* marcador de relleno — visible a propósito */
.ph {
  color: var(--accent-ink);
  text-decoration: underline dotted currentColor 1.5px;
  text-underline-offset: 3px;
}
.band--light .ph { background: var(--accent-wash); padding: 0 .15em; }

/* banner de muestra */
.muestra {
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--s3) var(--pad);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.muestra .ph { color: var(--on-accent); background: rgba(18,63,135,.12); }
.muestra code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: rgba(0,0,0,.22);
  padding: .1em .4em; border-radius: 2px;
}

/* ═══ 1 · HERO ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  padding: var(--s9) var(--pad) var(--s6);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero__field { position: absolute; inset: 0; pointer-events: none; }
.hero__field .sx {
  position: absolute;
  left: 0; top: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .3em .85em;
  white-space: nowrap;
  will-change: transform;
}

.hero__type { align-self: end; position: relative; z-index: 2; }
.hero__h1 {
  /* .86 encimaba la virgulilla de la Ñ de la 2ª línea sobre la 1ª: la Ñ sube
     0.928em sobre la base y la caja de línea medía 0.86em. La tensión del
     titular la sostiene el tracking, no un interlineado imposible. */
  font: 400 var(--fs-display)/1 var(--display);
  letter-spacing: -.035em;
  margin: var(--s5) 0 var(--s5);
  display: grid;
  width: max-content;
  max-width: 100%;
}
.hero__h1 .ln {
  display: block;
  /* La máscara del revelado recortaba la virgulilla de la Ñ: con
     line-height .86 la caja de línea es más baja que el glifo. El padding
     agranda la zona de recorte hacia arriba y el margen negativo devuelve
     la posición, así la Ñ cabe y el enmascarado sigue funcionando. */
  /* El texto entra deslizándose desde ABAJO, así que la máscara sólo tiene
     que cerrar el borde inferior. clip-path con inset superior negativo deja
     el techo abierto y la virgulilla de la Ñ cabe entera. */
  clip-path: inset(-0.4em 0 0 0);
}
.hero__h1 .ln:nth-child(2) { margin-left: .38em; }
.hero__h1 .ln > span { display: block; }

.hero__sub {
  max-width: 34ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__foot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; gap: var(--s4);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
  margin-top: var(--s8);
}

/* ═══ 2 · FICHA — rail de datos, 6 celdas. Banda deliberadamente quieta ══ */
.ficha { padding: 0 var(--pad); border-bottom: 1px solid var(--rule); }
.ficha__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule);
  margin: 0;
}
.ficha__cell {
  background: var(--ground);
  padding: var(--s5) var(--s4) var(--s6);
}
.ficha__cell dd {
  font: 400 1.35rem/1.25 var(--display);
  margin-top: var(--s3);
  letter-spacing: -.01em;
}
.ficha__note { display: block; font: 400 var(--fs-sm)/1.4 var(--sans); color: var(--ink-3); }

/* ═══ 3 · DIAGNÓSTICO — banda invertida, sticky + escenario ══════════════ */
.diag {
  display: grid;
  grid-template-columns: minmax(300px, 34%) 1fr;
  gap: var(--s8);
  padding: var(--s10) var(--pad);
  align-items: start;
}
.diag__sticky { position: sticky; top: var(--s7); min-width: 0; }
.diag__h2 {
  font: 400 var(--fs-h2)/.98 var(--display);
  letter-spacing: -.025em;
  margin: var(--s4) 0 var(--s6);
}
.diag__h2 em { color: var(--accent-ink); font-style: italic; }
.diag__lead { color: var(--ink-2); max-width: 36ch; }
.diag__lead strong { color: var(--ink); font-weight: 500; }
.diag__hint {
  margin-top: var(--s6);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  transition: opacity var(--t-medium) var(--e-out);
}
.diag__hint[data-done] { opacity: 0; }

.diag__stage {
  position: relative;
  min-height: 80svh;
  min-width: 0;
  overflow: clip;              /* el escenario es un escenario: nada se sale de él */
}

.diag__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transition: opacity var(--t-medium) var(--e-out);
}
.diag__stage[data-resolved] .diag__cols { opacity: 1; }
.diag__col {
  font: 500 var(--fs-label)/1.3 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: var(--s2);
}
.diag__col i {
  font-style: normal;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  width: 1.5em; height: 1.5em; border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
}

/* el campo de síntomas */
.field { position: relative; }
.field .sx {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .45em .8em;
}
/* sin JS: lista legible en columnas */
.field:not([data-live]) {
  columns: 3 16rem;
  column-gap: var(--s5);
  padding-top: var(--s5);
}
.field:not([data-live]) .sx { margin-bottom: var(--s2); break-inside: avoid; }

/* con JS: posicionamiento absoluto */
.field[data-live] { padding-top: var(--s6); }
.field[data-live] .sx {
  position: absolute;
  left: 0; top: 0;
  width: max-content;
  max-width: min(22ch, 90%);
  white-space: normal;
  will-change: transform, color;
  transition: color var(--t-standard) var(--e-out),
              border-color var(--t-standard) var(--e-out),
              background-color var(--t-standard) var(--e-out);
}
.sx b { color: var(--accent-ink); font-weight: 500; margin-right: .35em;
         font-variant-numeric: tabular-nums; }
.sx--out { opacity: .5; }
.diag__out-label {
  font: 500 var(--fs-label)/1.3 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  position: absolute; left: 0; top: 0;
  opacity: 0;
  transition: opacity var(--t-medium) var(--e-out);
}
.diag__stage[data-resolved] .diag__out-label { opacity: 1; }
.field:not([data-live]) ~ .diag__out-label { position: static; opacity: 1;
  margin-top: var(--s5); }

.field[data-live] .sx[data-settled] {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-wash);
}

/* ═══ 4 · PLANO 3D ══════════════════════════════════════════════════════ */
.plano {
  padding: var(--s10) var(--pad) var(--s11);
  border-top: 1px solid var(--rule);
}
.plano__lead { margin-top: var(--s4); color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }

/* el control y la figura sólo existen si el motor arrancó */
.plano__tool, .plano__figure { display: none; }
.plano-live .plano__tool {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5);
  align-items: center; margin-top: var(--s7);
}
.plano-live .plano__figure { display: block; margin: var(--s5) 0 0; }

.seg {
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}
.seg__b {
  min-height: 44px; padding: 0 var(--s5);
  font: 500 var(--fs-sm)/1 var(--sans);
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.seg__b:hover { background: var(--accent-wash); }
.seg__b[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-radius: 999px; }
.seg__b[aria-pressed="true"]:hover { background: var(--accent); }

.plano__drag {
  font-size: var(--fs-sm); color: var(--ink-3);
  display: flex; align-items: center; gap: var(--s2);
  transition: opacity var(--t-medium) var(--e-out);
}
.plano__drag::before { content: "↔"; color: var(--accent-ink); font-size: 1.1em; }
.plano__drag[data-seen] { opacity: .35; }

.plano__stage {
  cursor: grab;
  touch-action: pan-y;             /* el arrastre gira, pero no secuestra el scroll */
  user-select: none;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 3px;
}
.plano__stage[data-dragging] { cursor: grabbing; }
.plano__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.plano__stage { aspect-ratio: 3 / 2; max-height: 72svh; }
.plano__svg { width: 100%; height: 100%; display: block; }
.plano__svg polygon { stroke: rgba(13,47,102,.35); stroke-width: .6; stroke-linejoin: round; }
.plano__zona {
  fill: var(--accent-wash);
  stroke: var(--accent) !important;
  stroke-width: 1.5 !important;
  stroke-dasharray: 7 5;
}
.plano__label {
  font: 500 var(--lf, 11px)/1 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
  fill: var(--ink); text-anchor: middle;
  paint-order: stroke; stroke: var(--surface);
  stroke-width: calc(var(--lf, 11px) * .38); stroke-linejoin: round;
  pointer-events: none;
}
.plano__label--zona { fill: var(--accent); }
/* si el plano se ve pequeño, sólo los rótulos que cargan la idea */
.plano__svg[data-dense] .plano__label--2 { display: none; }

.plano__cap {
  margin-top: var(--s4);
  font-size: var(--fs-sm); color: var(--ink-2); max-width: 62ch;
}

/* la misma información, legible sin el plano */
.cambios {
  margin-top: var(--s8);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.cambios__i {
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  padding-left: var(--s4);
  transition: border-color var(--t-standard) var(--e-out),
              background-color var(--t-standard) var(--e-out);
}
.cambios__i[data-on] { border-left-color: var(--accent); background: var(--accent-wash); }
.cambios__i dt { font: 500 var(--fs-sm)/1.3 var(--sans); }
.cambios__i dd {
  margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: 34ch;
}
.cambios__i dd b { color: var(--ink); font-weight: 500; }

/* ═══ 5 · OBJETIVOS SMART — bandas asimétricas ══════════════════════════ */
.smart { padding: var(--s11) var(--pad) var(--s10); }
.smart__list { margin-top: var(--s8); border-top: 1px solid var(--rule); }
.smart__row {
  display: grid;
  grid-template-columns: minmax(12rem, 30%) 1fr;
  gap: var(--s6) var(--s8);
  padding: var(--s8) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.smart__fig { display: grid; gap: var(--s2); }
.smart__n {
  font: 400 clamp(3rem, 7vw, 5.5rem)/.88 var(--display);
  letter-spacing: -.035em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  display: block;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-slow) var(--e-out);
}
.smart__n i { font-style: normal; font-size: .5em; letter-spacing: 0; }
.smart__row[data-in] .smart__n { clip-path: inset(0 0 0 0); }
.smart__h {
  font: 400 clamp(1.4rem, 2.4vw, 2rem)/1.14 var(--display);
  letter-spacing: -.015em; max-width: 26ch;
}
.smart__cond {
  margin-top: var(--s5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s4) var(--s6);
}
.smart__cond li { font-size: var(--fs-sm); color: var(--ink-2); }
.smart__cond .label { margin-bottom: var(--s1); }
.smart__caveat {
  margin-top: var(--s7);
  font-size: var(--fs-sm); color: var(--ink-2); max-width: 60ch;
  padding-left: var(--s4); border-left: 2px solid var(--accent-ink);
}
.smart__caveat strong { color: var(--ink); font-weight: 500; }

/* ═══ 6 · PLAN — gantt ══════════════════════════════════════════════════ */
.plan { padding: var(--s10) var(--pad) var(--s11); }
.plan__lead { margin-top: var(--s4); color: var(--ink-2); max-width: 48ch; }
.gantt { margin-top: var(--s8); }
.gantt__axis,
.gantt__row { display: grid; grid-template-columns: minmax(10rem, 22%) 1fr; gap: var(--s4); }
.gantt__axis {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.gantt__ticks { position: relative; display: block; height: 1.1em; }
.gantt__ticks i {
  position: absolute; top: 0; font-style: normal;
  transform: translateX(-50%);
  font: 500 var(--fs-label)/1 var(--sans);
  letter-spacing: .1em; color: var(--ink-3);
}
.gantt__ticks i:first-child { transform: none; }
.gantt__ticks i:last-child  { transform: translateX(-100%); }
.gantt__axis > span {
  font: 500 var(--fs-label)/1 var(--sans);
  letter-spacing: .1em;
  color: var(--ink-3);
}

.gantt__row {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.gantt__name { font-size: var(--fs-sm); }
.gantt__name i {
  display: block; font-style: normal;
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 2px;
}
.gantt__track {
  position: relative;
  height: 10px;
  background: linear-gradient(to right, var(--rule) 1px, transparent 1px) 0 0 / 22.58% 100%;   /* una línea por semana */
}
.gantt__bar {
  position: absolute;
  top: 0; height: 100%;
  background: var(--ink-2);
  border-radius: 1px;
  transform-origin: left center;
  transform: scaleX(0);
  display: block;
}
.gantt__row--mark .gantt__bar { background: var(--accent); }
.gantt__row--mark .gantt__name { color: var(--accent-ink); }

/* ═══ 7 · INDICADORES — tabla ═══════════════════════════════════════════ */
.kpi {
  padding: var(--s10) var(--pad);
  border-top: 1px solid var(--rule);
}
.kpi__scroll { overflow-x: auto; margin-top: var(--s7); }
.kpi__table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.kpi__table th, .kpi__table td {
  text-align: left;
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.kpi__table thead th {
  font: 500 var(--fs-label)/1.3 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--ink);
}
.kpi__table tbody th { font-weight: 500; }
.kpi__table .n { font-variant-numeric: tabular-nums; }
.kpi__note {
  margin-top: var(--s5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  max-width: 56ch;
}

/* ═══ 8 · FOOTER — 2 columnas ═══════════════════════════════════════════ */
.foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s7);
  align-items: end;
  padding: var(--s9) var(--pad) var(--s6);
  background: var(--brand-abyss);
}
.foot__big {
  font: 400 clamp(2.5rem, 7vw, 5.5rem)/1 var(--display);
  letter-spacing: -.03em;
}
.foot__meta { margin-top: var(--s5); font-size: var(--fs-sm); color: var(--ink-2); }

.foot__b { display: grid; gap: var(--s3); justify-items: end; }
.foot__b a {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  padding: var(--s2) 0;
  min-height: 44px; display: flex; align-items: center;
  transition: color var(--t-fast) var(--e-out);
}
.foot__b a:hover { color: var(--accent-ink); }

/* ═══ MÓVIL — un diseño distinto, no el mismo más chico ═════════════════ */
@media (max-width: 1000px) {
  .diag { grid-template-columns: 1fr; gap: var(--s7); padding-block: var(--s10); }
  .diag__sticky { position: static; }
  .prop { grid-template-columns: 1fr; gap: var(--s8); }
  .prop__side { position: static; }
  .ficha__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .ficha__grid { grid-template-columns: repeat(2, 1fr); }
  /* las tres causas se leen como leyenda apilada, no como tres columnas */
  .diag__cols { grid-template-columns: 1fr; gap: var(--s2); }
  .hero__h1 .ln:nth-child(2) { margin-left: .2em; }
  .plano__stage { aspect-ratio: 1 / 1; }   /* en pantalla angosta, más alto = más grande */
  .smart__row { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s7) 0; }
  .smart__cond { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .gantt__axis, .gantt__row { grid-template-columns: 1fr; gap: var(--s2); }
  .gantt__axis { grid-template-columns: 1fr; }
  .gantt__spacer { display: none; }
  .foot { grid-template-columns: 1fr; align-items: start; }
  .foot__b { justify-items: start; }
  /* en móvil el campo no se dispersa: se lee como lista */
  .hero__field { display: none; }
}

/* ═══ REDUCED MOTION — el estado final es el estado por defecto ═════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .find__n { clip-path: inset(0 0 0 0) !important; }
  .gantt__bar { transform: scaleX(1) !important; }
  .diag__cols { opacity: 1 !important; }
  .diag__hint { display: none; }
  /* el campo se dibuja igual: colocado y quieto. El movimiento era el extra,
     no el contenido. */
}

@media print {
  .muestra, .skip, .hero__field { display: none; }
  body, .diag, .foot { background: #fff; color: #000; }
}