/* Fragua: acero frío y la escala de revenido como único gesto de color. */
:root {
  --acero: #e9edf0;
  --acero-hondo: #d8dee3;
  --pizarra: #1e2833;
  --pizarra-suave: #4a5866;
  --azul: #2f55a4;
  --pajizo: #e5cf8f;
  --bronce: #b9783a;
  --purpura: #6d4c80;

  --texto: 1.0625rem;
  --medida: 34rem;
  --borde: 1px solid #c4ccd3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acero: #1a222b;
    --acero-hondo: #232d38;
    --pizarra: #e4e9ee;
    --pizarra-suave: #a8b4bf;
    --azul: #8aa8e6;
    --borde: 1px solid #34414e;
  }
}
:root[data-theme="dark"] {
  --acero: #1a222b;
  --acero-hondo: #232d38;
  --pizarra: #e4e9ee;
  --pizarra-suave: #a8b4bf;
  --azul: #8aa8e6;
  --borde: 1px solid #34414e;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--acero);
  color: var(--pizarra);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--texto);
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
}

a { color: var(--azul); text-underline-offset: 0.18em; }
a:focus-visible, iframe:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

h1, h2, h3 { margin: 0; line-height: 1.05; }

/* ── cabecera ─────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}
.marca {
  font-weight: 800;
  font-size: 1.35rem;
  font-variation-settings: "wdth" 125;
  color: var(--pizarra);
  text-decoration: none;
}
.top nav { display: flex; gap: 1.5rem; }
.top nav a { color: var(--pizarra); text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

main { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }

/* ── portada ──────────────────────────────────────────────── */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
  padding: 3rem 0 4rem;
}
.portada h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 860;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.bajada {
  max-width: var(--medida);
  margin: 1.5rem 0 0;
  font-size: 1.15rem;
  color: var(--pizarra-suave);
}
.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 2rem 0 0;
}
.boton {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  background: var(--pizarra);
  color: var(--acero);
  font-weight: 650;
  text-decoration: none;
  border-radius: 6px;
}
.boton:hover { background: var(--azul); color: #fff; }

.portada-consola { margin: 0; }
.portada-consola iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: var(--borde);
  border-radius: 10px;
  background: var(--acero-hondo);
}
.portada-consola figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--pizarra-suave);
}

/* La escala de revenido: pajizo a azul, como una barra templada. */
.revenido {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg,
    var(--acero-hondo) 0%,
    var(--pajizo) 18%,
    var(--bronce) 42%,
    var(--purpura) 66%,
    var(--azul) 86%,
    #8fa3b6 100%);
}

/* ── secciones ────────────────────────────────────────────── */
section h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 780;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.01em;
}

.capas { padding: 4rem 0; }
.capas-grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}
.capas h3 {
  font-size: 1.3rem;
  font-weight: 720;
  padding-bottom: 0.6rem;
  border-bottom: var(--borde);
}
.capas p { max-width: var(--medida); margin: 1rem 0 0; }
.capas .estado {
  padding-left: 0.9rem;
  border-left: 3px solid var(--bronce);
  color: var(--pizarra-suave);
}

.contrato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding: 4rem 0;
  border-top: var(--borde);
}
.contrato-texto p { max-width: var(--medida); margin: 1rem 0 0; }
.codigo {
  margin: 0;
  padding: 1.5rem 1.6rem;
  overflow-x: auto;
  background: #1e2833;
  color: #dfe6ec;
  border-radius: 10px;
  font: 0.95rem/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.c-k { color: #9fb6e8; }
.c-s { color: #e5cf8f; }

.perfiles { padding: 4rem 0 5rem; border-top: var(--borde); }
.perfiles-bajada { max-width: var(--medida); margin: 1rem 0 2rem; }
.perfiles table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.perfiles th {
  text-align: left;
  font-weight: 650;
  padding: 0 1rem 0.6rem 0;
  border-bottom: 2px solid var(--pizarra);
}
.perfiles td {
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: var(--borde);
  vertical-align: top;
}
.perfiles td:first-child { font-weight: 650; }

.pie {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  color: var(--pizarra-suave);
  font-size: 0.95rem;
  border-top: var(--borde);
}
.pie p { margin: 0; max-width: 40rem; }

/* ── angosto ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .portada, .capas-grilla, .contrato { grid-template-columns: 1fr; gap: 2rem; }
  .portada { padding-top: 1.5rem; }
  .portada-consola iframe { aspect-ratio: 3 / 4; }
}
@media (max-width: 560px) {
  .top, main, .pie { padding-left: 16px; padding-right: 16px; }
  .top nav { gap: 1rem; }
  .perfiles table, .perfiles thead, .perfiles tbody, .perfiles tr, .perfiles td { display: block; }
  .perfiles thead { position: absolute; left: -9999px; }
  .perfiles tr { padding: 0.8rem 0; border-bottom: var(--borde); }
  .perfiles td { padding: 0.1rem 0; border: 0; }
}

/* Portada sin la consola al lado (páginas de texto como Seguridad). */
.portada-sola { grid-template-columns: 1fr; }
.top nav a[aria-current="page"] { text-decoration: underline; }
.perfiles h2 + table { margin-top: 2rem; }