/* ══════════════════════════════════════════════════════════════
   BASE — reset, §07 typography, §08 graphic system
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s3));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--texto);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  background: var(--ground);
  color: var(--ink-soft);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* §06: negro sobre ámbar es óptimo — so selection uses that pairing. */
::selection { background: var(--ambar); color: var(--negro); }

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

/* ───────────────────────  §07 · TIPOGRAFÍA  ─────────────────── */

/* Anton. §07: «Siempre en mayúsculas… Se limita a titulares breves,
   portadas, señalización y cifras destacadas. No se usa en texto
   corrido.» Never italic — §07 bars decorative italics outright. */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: var(--ink);
}
.t-display { font-size: var(--t-display); }
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }

/* Where a headline needs a second tone, §06 allows ámbar sobre negro
   for «titulares y destacados». On a light ground it is restricted to
   graphic forms only, so .display b becomes a barra underline instead
   of coloured text. */
.band--negro .display b,
.portada .display b { font-weight: inherit; color: var(--ambar); box-shadow: none; }
.display b { font-weight: inherit; box-shadow: inset 0 -0.14em 0 var(--ambar); }

h3, .t-h3 {
  font-family: var(--texto);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

p { max-width: var(--measure); }

.lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.prose { color: var(--ink-2); max-width: var(--measure); }
.prose + .prose { margin-top: var(--s2); }
.prose strong, .lead strong { color: var(--ink); font-weight: 600; }

/* IBM Plex Mono. §07: «etiquetas, fechas, cotas, numeración, códigos
   de proyecto y pies de foto, en mayúsculas y con interletrado
   abierto.» */
.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Ámbar sólo donde §06 lo permite: sobre Negro Obra. */
.mono--ambar { color: var(--ink); }
.band--negro .mono--ambar,
.portada .mono--ambar,
.footer .mono--ambar { color: var(--ambar); }
.tnum { font-variant-numeric: tabular-nums; }

.menor { font-size: var(--t-menor); color: var(--ink-2); }

/* ─────────────────────  §08 · SISTEMA VISUAL  ───────────────── */

/* 08.01 · LA LÍNEA DE COTA
   «Una línea horizontal con marca ámbar en el extremo y etiquetas en
   monoespaciada.» This replaces the eyebrow entirely.
   Límite: una línea de cota por bloque de contenido. */
.cota {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.cota__l, .cota__r {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
/* §06 restringe el ámbar sobre blanco a formas gráficas: no se aplica
   a texto. Por eso la etiqueta va en Negro sobre fondo claro y el
   ámbar queda en la marca del extremo, que sí es forma gráfica.
   Sobre Negro Obra el ámbar sí es «adecuado» para destacados, y la
   etiqueta lo recupera (ver .band--negro más abajo). */
.cota__l { color: var(--ink); }
.cota__r { color: var(--ink-2); }
.cota__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  min-width: var(--s4);
}
.cota__rule::before {          /* marca ámbar en el extremo */
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 2px;
  height: 7px;
  background: var(--ambar);
}
.band--negro .cota__rule,
.portada .cota__rule,
.footer .cota__rule,
.menu .cota__rule { background: var(--neg-line); }

.band--negro .cota__r,
.portada .cota__r,
.footer .cota__r,
.menu .cota__r { color: var(--neg-ink-2); }

/* §06: sobre Negro Obra el ámbar sí es adecuado para destacados. */
.band--negro .cota__l,
.portada .cota__l,
.footer .cota__l,
.menu .cota__l { color: var(--ambar); }

/* 08.03 · LAS BARRAS
   «Las dos barras horizontales ámbar… subrayado de titular, franja
   superior de documento o separador. Grosor constante, siempre en
   horizontal.» */
.barras {
  display: grid;
  gap: 3px;
  width: 56px;
  margin-bottom: var(--s2);
}
.barras span { height: var(--barra); background: var(--ambar); }
.barras span:last-child { width: 68%; }

.barra-top {                   /* franja superior de documento */
  height: var(--barra);
  background: var(--ambar);
  border: 0;
}

/* 08.04 · NUMERACIÓN
   «Se numera únicamente cuando el orden aporta información.»
   Formato 01 · 02 · 03 en IBM Plex Mono.

   §08 la describe «en ámbar», pero §06 restringe el ámbar sobre
   blanco a formas gráficas y prohíbe aplicarlo a texto; medido, el
   ámbar sobre Blanco Plano da 1,8:1 y resulta ilegible. Se resuelve
   por canal: Negro sobre fondo claro, ámbar sobre Negro Obra, que es
   donde §06 lo declara adecuado. Conviene confirmarlo con la
   responsable de marca en la próxima revisión del manual. */
.num {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.band--negro .num,
.portada .num,
.footer .num,
.menu .num { color: var(--ambar); }

/* 08.02 · LA FICHA
   «El rectángulo de esquinas redondeadas del logotipo, ampliado como
   marco de fotografía, contenedor de datos o recorte de imagen. No se
   aplica vacío como ornamento ni se rellena con degradados.» */
.ficha {
  border: 1px solid var(--line);
  border-radius: var(--r-ficha);
  background: var(--ground);
  overflow: hidden;
}
.ficha--humo { background: var(--ground-alt); }
.band--negro .ficha { background: var(--neg-surface); border-color: var(--neg-line); }

/* ───────────────────────  LAYOUT FIELD  ─────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); }
.band--humo { background: var(--ground-alt); }

/* Negro Obra band — the 30 % of the 60·30·10 ratio. */
.band--negro {
  background: var(--neg-ground);
  color: var(--neg-ink);
}
.band--negro .display,
.band--negro h3 { color: var(--neg-ink); }
.band--negro .lead,
.band--negro .prose { color: var(--neg-ink-2); }
.band--negro .prose strong,
.band--negro .lead strong { color: var(--neg-ink); }
.band--negro .mono { color: var(--neg-ink-2); }
.band--negro .ficha { border-color: var(--neg-line); }

.band-head { max-width: 760px; margin-bottom: var(--s7); }
.band-head .lead { margin-top: var(--s2); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ────────────────────────  ACCESIBILIDAD  ───────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--s1); left: var(--s1);
  z-index: 1000;
  padding: var(--s2) var(--s3);
  background: var(--ambar);
  color: var(--negro);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ────────────────────────  REVELADO  ────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ────────────────────────  §08 · ICONOS  ────────────────────────
   «Iconos de línea, grosor uniforme de 2 px, extremos rectos, sin
   relleno, en negro o ámbar.» Square caps, not round. */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.icon--lg { width: 32px; height: 32px; }
.icon--ambar { color: var(--ambar); }

/* ────────────────────────  LOGOTIPO  ────────────────────────────
   One traced SVG serves versions A and B; only the descriptor flips,
   via currentColor. §05 forbids recolouring, so the ficha stays Negro
   Obra and the barras stay Ámbar Señal on every ground. */
.brandmark { height: auto; }
.brandmark__desc { fill: currentColor; }
.band--negro .brandmark,
.footer .brandmark,
.menu .brandmark { color: var(--blanco); }