/* ═══════════════════════════════════════════════════════════════
   El acto 2 de las secciones (/infraestructura, /seguridad) — va SOBRE
   site.css y DEBAJO de la hoja de cada página. Son las piezas que se
   repiten: los números, el bloque texto + pieza animada, la ficha
   técnica, las fichas en fila y las apariciones al entrar en pantalla.
   ═══════════════════════════════════════════════════════════════ */

/* lo que aparece al entrar en pantalla. Sólo si corre el JS: sin él,
   todo queda visible de entrada. */
html[data-motion] [data-reveal] {
  opacity: 0; translate: 0 1.5rem;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0s);
}
html[data-motion] [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ── Los números ── */

.nums {
  position: relative; z-index: 5;
  border-top: 1px solid var(--line);
  padding-inline: var(--gutter);
}

/* separaciones con box-shadow y overflow clip: ver .caps__grid en site.css */
.nums__grid {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  /* seis, siempre en filas parejas: 3 × 2, 2 × 3 o de a uno */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: clip;
}
@media (max-width: 1000px) { .nums__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .nums__grid { grid-template-columns: 1fr; } }

.num {
  background: var(--ink);
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
  padding: clamp(2.5rem, 6vh, 3.75rem) clamp(1.25rem, 2.5vw, 2.5rem);
}

.num__big {
  margin: 0;
  display: flex; align-items: baseline; gap: .125rem;
  font-size: clamp(3.25rem, 5.6vw, 5rem);
  font-weight: 600; line-height: .95;
  letter-spacing: -.05em;
  color: var(--amber-hot);
  font-variant-numeric: tabular-nums;
}
.num__big small {
  margin-left: .5rem;
  font: 500 .875rem/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber);
}
.num__tilde { color: var(--amber); font-weight: 400; }
.num__big--word { letter-spacing: -.04em; }

.num__k {
  margin: 1.25rem 0 0;
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper);
}
.num__b {
  margin: .625rem 0 0; max-width: 28ch;
  font-size: .9375rem; line-height: 1.55;
  color: var(--fog);
}

/* ── Los bloques: texto a la izquierda, la pieza animada a la derecha ── */

.block {
  position: relative; z-index: 5;
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.block__text .display { max-width: 16ch; }
.block__text .lede { max-width: 40ch; }
/* lo que no es el texto ni la pieza (fichas, listas) va a todo el ancho */
.block > :not(.block__text):not(.block__art) { grid-column: 1 / -1; }
.art {
  display: block; width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(240,149,74,.05), transparent 60%),
    var(--ink-soft);
}

.art__cap {
  margin: .875rem 0 0;
  font: 500 .6875rem/1.4 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fog);
}

/* ── La ficha técnica: el término y, al lado, qué significa ── */

.spec { margin: clamp(1rem, 4vh, 3rem) 0 0; }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem clamp(2rem, 5vw, 5rem);
  padding: 1.375rem 0;
  border-top: 1px solid var(--line);
}
.spec__row:last-child { border-bottom: 1px solid var(--line); }
.spec dt {
  font: 500 .8125rem/1.4 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-hot);
}
.spec dd {
  margin: 0; max-width: 56ch;
  font-size: 1.0625rem; line-height: 1.55;
  color: var(--fog);
}

/* ── Fichas en fila: clave, título y una línea ── */

.feats {
  margin: clamp(1rem, 4vh, 3rem) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1px;
  overflow: clip;
}
.feat {
  background: var(--ink);
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
  padding: 2rem clamp(1rem, 2vw, 1.75rem) 2.25rem;
}
.feat__k {
  margin: 0 0 1.25rem;
  font: 500 .6875rem/1.3 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber);
}
.feat__h {
  margin: 0;
  font-size: 1.25rem; font-weight: 600;
  line-height: 1.15; letter-spacing: -.02em;
  text-wrap: balance;
}
.feat__b {
  margin: .75rem 0 0;
  font-size: .9375rem; line-height: 1.55;
  color: var(--fog);
}

/* ── Columnas a una sola ── */

@media (max-width: 860px) {
  .block { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; gap: .5rem; }
  .art { aspect-ratio: 4 / 3; }
}