/* ===========================================================================
   Sistema base para sitios estáticos — "papel técnico"
   ---------------------------------------------------------------------------
   Se copia TAL CUAL en la raíz del sitio como `style.css`. Es el único
   fichero de estilo: no hay build, no hay dependencias, no se carga nada por
   red. Tipos del sistema únicamente.

   POR QUÉ ASÍ Y NO UN FRAMEWORK: estos sitios tienen que seguir siendo
   editables dentro de diez años. Un `node_modules` de hoy no instala en
   2031. El precio es repetir cabecera y pie en cada fichero, y es el precio
   correcto aquí.

   CÓMO SE USA: en `<html>` se pone el arquetipo —
       <html lang="en" data-archetype="shop">
   Los arquetipos son los mismos que el registro de ventures ya conoce
   (office|campus|port|newsroom|shop|lab), así que un sitio hereda el aspecto
   de lo que el venture ES, en vez de que alguien lo elija por su cuenta.

   LA IDEA: el vernáculo del informe técnico y el plano, no el del landing de
   SaaS. Fondo neutro FRÍO (no crema), una retícula que significa algo, y el
   color usado como dato y no como adorno. La audacia se gasta en un sitio
   —el bloque de ficha de la cabecera— y todo lo demás va disciplinado.
   =========================================================================== */

:root {
  /* --- Color. Neutro frío a propósito: el crema tostado con serif de
     display y acento terracota es el aspecto por defecto de una página
     generada, y se reconoce al instante. --- */
  --paper:      #FAFAF9;
  --paper-sunk: #F1F1EE;   /* bloques embebidos: ficha, cita, código */
  --ink:        #191A18;
  --ink-soft:   #5A5F5B;   /* metadatos, pies; cumple AA sobre --paper */
  --rule:       #DEDFDB;   /* la retícula */
  --rule-firm:  #B9BBB5;   /* reglas que separan de verdad */

  /* Un solo acento por sitio. Lo pisa cada arquetipo más abajo. */
  --accent:     #2F5D50;
  --accent-ink: #FFFFFF;

  /* --- Escala tipográfica, razón 1.250 (tercera mayor). Nombrada, no
     literal: ocho tamaños ad hoc sin jerarquía es justo lo que esto evita. --- */
  --t-micro: 0.8125rem;   /* 13px — metadatos del margen */
  --t-small: 0.875rem;    /* 14px — pies, notas */
  --t-body:  1rem;        /* 16px */
  --t-lead:  1.25rem;     /* 20px — entradilla */
  --t-h3:    1.5625rem;   /* 25px */
  --t-h2:    1.953rem;    /* 31px */
  --t-h1:    2.441rem;    /* 39px */

  /* --- Espaciado, escala de 4px. --- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4.5rem;

  /* --- Medida. Menos de 80 caracteres; el serif aguanta algo más. --- */
  --measure: 66ch;
  --gutter:  clamp(1.25rem, 5vw, 3rem);

  /* Familias del sistema. `ui-serif`/`ui-sans-serif` primero: en 2031
     seguirán resolviendo aunque los nombres concretos hayan cambiado. */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --face: var(--sans);
  --leading: 1.6;
}

/* ---------------------------------------------------------------------------
   Arquetipos. Cambian SOLO familia, interlineado y acento — nunca la
   estructura. Así un sitio se distingue de otro sin que dejen de ser
   reconociblemente la misma casa.
   --------------------------------------------------------------------------- */

/* Contenido largo para leer: serif, interlineado generoso, medida más ancha. */
[data-archetype="newsroom"] { --face: var(--serif); --leading: 1.72; --measure: 70ch; --accent: #7A3B2E; }

/* Obra e infraestructura: serif, azul de plano. */
[data-archetype="port"]     { --face: var(--serif); --leading: 1.72; --measure: 70ch; --accent: #1F4E79; }

/* Vender: sans, verde profundo. Legible y sin estridencia. */
[data-archetype="shop"]     { --face: var(--sans);  --accent: #2F5D50; }

/* Herramienta técnica: sans, violeta frío. */
[data-archetype="lab"]      { --face: var(--sans);  --accent: #4B3F8F; }

/* Plataforma con partes: sans, teal. */
[data-archetype="campus"]   { --face: var(--sans);  --accent: #1F5F6B; }

/* Interno/corporativo: sans, gris azulado casi neutro. */
[data-archetype="office"]   { --face: var(--sans);  --accent: #3A4A5C; }

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--t-body);
  line-height: var(--leading);
  /* Mejora el gris del texto en pantallas normales sin tocar el contraste. */
  text-rendering: optimizeLegibility;
}

/* La columna. En pantallas anchas se reserva un margen izquierdo para los
   metadatos: es la idea estructural del sistema — en un informe técnico el
   margen lleva anotaciones, y aquí lleva información real. */
.page {
  max-width: calc(var(--measure) + 15rem);
  margin: 0 auto;
  padding: var(--s7) var(--gutter) var(--s8);
}

@media (min-width: 60rem) {
  /* `max-content` y no `11rem` fijo: la columna se ajusta a la nota más
     larga en vez de reservar un hueco que casi siempre sobra. Con `1fr` a
     la derecha, el bloque queda ópticamente centrado — con anchos fijos,
     la rejilla centraba la SUMA y dejaba un vacío grande a la izquierda
     mientras el texto se pegaba al borde derecho. */
  .page {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, var(--measure)) 1fr;
    column-gap: var(--s6);
  }
  .page > * { grid-column: 2; }
  /* Sólo lo que pide margen se sale a la izquierda. */
  .page > .margin-note { grid-column: 1; text-align: right; }
}

/* ---------------------------------------------------------------------------
   Tipografía
   --------------------------------------------------------------------------- */

h1, h2, h3 { line-height: 1.22; text-wrap: balance; margin: 0; font-weight: 640; }
h1 { font-size: var(--t-h1); letter-spacing: -0.021em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.014em; margin-top: var(--s7); }
h3 { font-size: var(--t-h3); letter-spacing: -0.008em; margin-top: var(--s6); }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

/* Entradilla. Un grado por encima del cuerpo y en tono suave: separa sin
   necesidad de una etiqueta encima que no aporta nada. */
.lede {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: var(--s4) 0 var(--s6);
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.17em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 650; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin: var(--s2) 0; }
li::marker { color: var(--ink-soft); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--paper-sunk);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

pre {
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: 1.55;
  background: var(--paper-sunk);
  border-left: 2px solid var(--rule-firm);
  padding: var(--s4);
  overflow-x: auto;
  margin: var(--s5) 0;
}
pre code { background: none; padding: 0; }

/* ---------------------------------------------------------------------------
   La ficha técnica — donde se gasta la audacia
   ---------------------------------------------------------------------------
   Sustituye al hero centrado. Es una tabla de datos reales (estado, fecha,
   ámbito) maquetada como el cajetín de un plano. Sólo se pone si hay datos
   que de verdad merezcan la cabecera; si no, sobra.
   --------------------------------------------------------------------------- */

.spec {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0;
  /* Asimétrico a propósito: la ficha pertenece a la cabecera, así que va
     más pegada a la entradilla que al cuerpo que abre debajo. Con el mismo
     margen arriba y abajo flotaba entre los dos sin pertenecer a ninguno. */
  margin: var(--s5) 0 var(--s6);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule-firm);
  font-size: var(--t-micro);
}
.spec dt,
.spec dd {
  margin: 0;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}
.spec dt { color: var(--ink-soft); padding-right: var(--s5); white-space: nowrap; }
.spec dd { font-variant-numeric: tabular-nums; }
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: none; }

/* Nota al margen. En móvil cae en el flujo, separada por una regla. */
.margin-note {
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 var(--s5);
  padding-top: var(--s1);
}
@media (max-width: 59.99rem) {
  .margin-note { border-left: 2px solid var(--rule-firm); padding: var(--s1) 0 var(--s1) var(--s3); }
}

/* ---------------------------------------------------------------------------
   Piezas
   --------------------------------------------------------------------------- */

/* Bloque embebido para lo que hay que destacar sin gritar. */
.note {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.note > :first-child { margin-top: 0; }

/* Llamada a la acción. Una por página: si hay dos, ninguna es la principal. */
.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 620;
  font-size: var(--t-body);
  padding: var(--s3) var(--s5);
  border-radius: 3px;
}
.cta:hover { filter: brightness(1.12); }
.cta:focus-visible { filter: brightness(1.12); }

/* Precio junto al CTA: tabular para que no baile. */
.price { font-size: var(--t-h3); font-weight: 640; font-variant-numeric: tabular-nums; }

/* Precio y botón en la misma línea, alineados por su base óptica. Van
   juntos porque son UNA decisión, no dos: separarlos en dos párrafos
   obligaba a un titular encima para reagruparlos. */
.buy { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: var(--s6) 0 var(--s3); }

/* Índice de páginas. Una regla por fila, sin tarjetas: el contenido es una
   lista, no un mosaico, y fingir lo contrario es el kit de tarjetas. */
.index { list-style: none; padding: 0; margin: var(--s5) 0; }
.index li { margin: 0; border-bottom: 1px solid var(--rule); }
.index a { display: block; padding: var(--s3) 0; text-decoration: none; color: var(--ink); }
.index a:hover { color: var(--accent); }
.index .idx-desc { display: block; font-size: var(--t-small); color: var(--ink-soft); margin-top: var(--s1); }

/* ---------------------------------------------------------------------------
   Estado de una afirmación — `.tag`
   ---------------------------------------------------------------------------
   Salió del sitio de Bagamoyo, no de un catálogo: un dossier sobre obra
   anunciada necesita decir en cada línea si algo está confirmado, sólo
   anunciado, desmentido o sin verificar. Es la regla editorial de fallow
   ("lo no confirmado es el material") convertida en markup.

   El color NUNCA lleva el significado solo: cada etiqueta lleva su palabra.
   Por eso son `<strong>` y no un punto de color.
   --------------------------------------------------------------------------- */

.tag {
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: 0.005em;
  padding: 0.12em 0.45em;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.tag.confirmed  { color: #1F5F3F; }
.tag.announced  { color: #7A5A1E; }
.tag.denied     { color: #8A2E2E; }
.tag.unverified { color: var(--ink-soft); }

@media (prefers-color-scheme: dark) {
  .tag.confirmed  { color: #7FC49B; }
  .tag.announced  { color: #D6B168; }
  .tag.denied     { color: #E08E8E; }
}

/* Lista de afirmaciones fechadas. Sin viñeta: la etiqueta ya abre la línea,
   y un punto delante de ella compite con lo único que hay que leer. */
.status-list { list-style: none; padding: 0; margin: var(--s5) 0; }
.status-list > li {
  margin: 0 0 var(--s5);
  padding-left: var(--s4);
  border-left: 2px solid var(--rule);
}
.status-list > li > p { margin: var(--s2) 0 0; }

/* Entradilla de página interior. Mismo papel que `.lede`; se mantiene el
   nombre que el sitio ya usaba para no reescribir cinco páginas. */
.dek {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: var(--s4) 0 var(--s6);
  text-wrap: pretty;
}

/* Alias del `.note` con el nombre que ya usaba el sitio. */
.callout {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Contadores vivos — `.tiles`
   ---------------------------------------------------------------------------
   Hermano de `.spec`: mismo papel (datos reales en cabecera, no un hero) pero
   para cifras que CAMBIAN solas porque se calculan contra la fecha de hoy.
   El valor va servido en el HTML ya calculado, y el JS sólo lo refresca: sin
   JS la página sigue diciendo la verdad del día que se desplegó.
   --------------------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  margin: var(--s5) 0 var(--s6);
}
.tile { background: var(--paper); padding: var(--s3) var(--s4) var(--s4); }
.tile-value {
  display: block;
  font-size: var(--t-h2);
  line-height: 1.1;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.014em;
}
.tile-label { display: block; font-size: var(--t-small); margin-top: var(--s2); }
.tile-note { display: block; font-size: var(--t-micro); color: var(--ink-soft); margin-top: var(--s1); }

/* ---------------------------------------------------------------------------
   El registro filtrable — `.ledger`
   ---------------------------------------------------------------------------
   Las filas van COMPLETAS en el HTML; el JS sólo esconde las que no pasan el
   filtro. Sin JS se lee entero, que es el estado por defecto correcto para un
   documento cuya razón de ser es que se pueda consultar dentro de diez años.
   --------------------------------------------------------------------------- */

.controls {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  font-size: var(--t-small);
}
.controls fieldset { border: 0; margin: 0 0 var(--s4); padding: 0; }
.controls legend { padding: 0; font-weight: 650; font-size: var(--t-micro); color: var(--ink-soft); }
.control-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s2); }
.control-row label { display: flex; align-items: center; gap: var(--s2); }
.controls input[type="search"],
.controls select {
  font: inherit;
  font-family: var(--face);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  padding: var(--s2) var(--s3);
  max-width: 100%;
}
.controls input[type="search"] { width: 22ch; }
.controls > :last-child { margin-bottom: 0; }
.control-count { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.ledger { font-size: var(--t-small); }
.ledger th[scope="col"] { white-space: nowrap; }
.ledger td { vertical-align: top; }
.ledger .l-date { white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: var(--s4); }
.ledger .l-who { color: var(--ink-soft); }
.ledger tr[hidden] { display: none; }
.ledger-empty { color: var(--ink-soft); font-style: italic; }

/* Navegación y pie, con la misma regla superior. */
.nav {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  font-size: var(--t-small);
  padding-bottom: var(--s5);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
}
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 620; }

.foot {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Suelo de calidad
   --------------------------------------------------------------------------- */

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

/* Saltar al contenido: invisible hasta que el teclado la pide. */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s4); z-index: 10;
}
.skip:focus { left: var(--s4); top: var(--s4); }

img, svg { max-width: 100%; height: auto; }

table { border-collapse: collapse; width: 100%; font-size: var(--t-small); margin: var(--s5) 0; }
th, td { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 620; border-bottom-color: var(--rule-firm); }
td { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Modo oscuro: se invierte el papel, no el acento. Un acento aclarado por
   fórmula sale sucio; estos valores están elegidos a mano para mantener el
   contraste AA sobre el fondo oscuro. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131413; --paper-sunk: #1C1E1C;
    --ink: #E8E9E5; --ink-soft: #9DA29C;
    --rule: #2C2E2B; --rule-firm: #45483F;
    --accent: #7FB3A1;
  }
  [data-archetype="newsroom"] { --accent: #D99B86; }
  [data-archetype="port"]     { --accent: #7FA8D4; }
  [data-archetype="shop"]     { --accent: #7FB3A1; }
  [data-archetype="lab"]      { --accent: #A79CE0; }
  [data-archetype="campus"]   { --accent: #79BECB; }
  [data-archetype="office"]   { --accent: #93A7BD; }
  .cta { --accent-ink: #101110; }
}

@media print {
  .nav, .cta, .skip { display: none; }
  body { background: #fff; color: #000; }
  .page { display: block; max-width: none; }
}