/* ══════════════════════════════════════════════════════════════
   AGP · Páginas de empresa
   Páginas: /quien-somos.html · /nuestra-historia.html

   SE CARGA DESPUÉS DE css/agentes.css, NO EN SU LUGAR.

   Por qué así, en tres frases:
     · La portada tiene su paleta oscura en un <style> de 750 líneas
       dentro del propio index.html. Reutilizarla obliga a copiarla o a
       tocar la portada entera. Las dos cosas son peores que esto.
     · `agentes.css` ya resolvió ese problema para las páginas sueltas:
       trae los tokens, las tres tipografías, la barra, el envoltorio,
       `.bloque`, `.lista`, `.entradilla`, `.etiqueta`, `.boton` y el pie.
       Todo eso vale igual aquí y no se vuelve a escribir.
     · Este fichero SÓLO añade lo que no existía: el mapa de capas, las
       cicatrices con fecha, la línea de tiempo y un par de rejillas.

   ⚠️ Si cambia la paleta de la portada, cambia en agentes.css — y por
   herencia, aquí. Este fichero no redefine ni un solo color.
   ══════════════════════════════════════════════════════════════ */

/* ── Cabecera de página ─────────────────────────────────────── */
.pagina { padding: 76px 0 40px; }
/* El h1 de agentes.css llega a 76px y se corta a 20ch porque allí los titulares
   son de tres palabras («Alguien se lee el BOE por ti»). Aquí son FRASES de
   setenta y tantos caracteres: a ese tamaño salen cuatro renglones y se leen
   como un muro. Se baja el techo y se ensancha la caja — sigue siendo el
   elemento más grande de la página, pero se lee de un vistazo. */
.pagina h1 {
  margin: 18px 0 24px;
  max-width: 26ch;
  font-size: clamp(32px, 5.2vw, 58px);
  line-height: 1.08;
}
/* El nombre de la disciplina, en inglés y en mono, pegado SIEMPRE a una
   frase llana. La norma del repo: si el cliente no entiende qué es AGP,
   no sabe qué compra. Ver context/negocio/ENFOQUE_COMERCIAL_JULIO2026.md */
.disciplina {
  font-family: var(--mono); font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-2); margin: 0 0 10px;
}

/* ── Dos columnas de texto ──────────────────────────────────── */
.dos { display: grid; gap: 46px; grid-template-columns: 1.15fr 1fr; align-items: start; }
@media (max-width: 900px) { .dos { grid-template-columns: 1fr; gap: 34px; } }
.dos p { color: var(--tenue); font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }
.dos p:last-child { margin-bottom: 0; }
.dos p b, .dos p strong { color: var(--paper); font-weight: 600; }

/* ── El mapa de capas ───────────────────────────────────────────
   Cuatro bandas apiladas. Es el mismo dibujo conceptual que el
   portfolio (portfolio/index.html, sección «Cómo se monta»), traído
   aquí con los tokens de la web. Sin WebGL y sin dependencias: la
   profundidad la dan el borde y el desplazamiento. ── */
.capas { display: flex; flex-direction: column; gap: 14px; margin: 34px 0 28px; }
.capa {
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  border-radius: 14px;
  padding: 18px 20px;
  background: var(--black-2);
}
.capa__nombre {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tenue-2);
}
.capa__cajas { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 10px; }
.caja {
  font-family: var(--mono); font-size: 13px; color: var(--paper);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 14px; background: rgba(242, 239, 233, 0.03);
}
.caja--acento { border-color: rgba(232, 68, 46, 0.42); }
.capa__nota { font-size: 14.5px; color: var(--tenue); line-height: 1.55; }
.capa__nota em { color: var(--paper); font-style: normal; font-weight: 600; }
.capas__pie {
  font-size: 15.5px; color: var(--tenue); line-height: 1.65;
  border-left: 2px solid var(--line); padding-left: 18px; margin: 0;
}
.capas__pie b { color: var(--paper); }
/* En móvil las cajas van en columna: en fila se parten por la mitad. */
@media (max-width: 620px) {
  .capa__cajas { flex-direction: column; align-items: flex-start; }
  .caja { width: 100%; }
}

/* ── Rejilla de tarjetas de texto ───────────────────────────── */
.rejilla-cajas {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 30px;
}
.caja-texto {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px; background: var(--black-2);
}
.caja-texto h3 { font-family: var(--sans); font-size: 17px; font-weight: 600;
  letter-spacing: 0; margin-bottom: 10px; }
.caja-texto p { margin: 0; color: var(--tenue); font-size: 14.5px; line-height: 1.65; }

/* ── Tabla sobria (el stack) ────────────────────────────────── */
.tabla-envoltorio { overflow-x: auto; margin: 26px 0 0; }
table.tabla {
  width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px;
}
table.tabla th, table.tabla td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
table.tabla th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tenue-2); background: var(--black-2);
}
table.tabla td { color: var(--tenue); }
table.tabla td b { color: var(--paper); font-weight: 600; }

/* ── Línea de tiempo ────────────────────────────────────────── */
.tiempo { display: grid; gap: 0; margin-top: 30px; }
.momento {
  display: grid; gap: 8px 26px; grid-template-columns: 180px 1fr;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.momento:last-child { border-bottom: 0; }
@media (max-width: 700px) { .momento { grid-template-columns: 1fr; } }
.momento__cuando {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red); padding-top: 3px;
}
.momento h3 { font-family: var(--sans); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 10px; }
.momento p { margin: 0 0 12px; color: var(--tenue); font-size: 15.5px; line-height: 1.7; }
.momento p:last-child { margin-bottom: 0; }
.momento p b { color: var(--paper); font-weight: 600; }
/* Lo que esa escena explica de la empresa. Sin esto sería una biografía. */
.momento__saca {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  color: var(--paper); border-left: 2px solid var(--red);
  padding-left: 13px; margin-top: 14px;
}

/* ── Cicatrices: los fallos con fecha ───────────────────────── */
.cicatrices { display: grid; gap: 14px; margin-top: 30px; }
.cicatriz {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 24px; background: var(--black-2);
}
.cicatriz__que { font-weight: 600; font-size: 15.5px; margin-bottom: 8px; color: var(--paper); }
.cicatriz__fecha {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--tenue-2); display: block; margin-bottom: 8px;
}
.cicatriz p { margin: 0; color: var(--tenue); font-size: 15px; line-height: 1.65; }
.cicatriz__regla {
  font-family: var(--mono); font-size: 13px; color: var(--red); margin-top: 14px;
}

/* ── Cita ───────────────────────────────────────────────────── */
.cita {
  margin: 34px 0; padding-left: 22px; border-left: 2px solid var(--red);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.6vw, 24px); line-height: 1.4; color: var(--paper);
}
.cita cite {
  display: block; margin-top: 14px; font-family: var(--mono);
  font-style: normal; font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tenue-2);
}

/* ── Cierre con llamada ─────────────────────────────────────── */
.cierre { padding: 56px 0 84px; border-top: 1px solid var(--line); }
.cierre h2 { margin-bottom: 20px; }
.cierre .boton { margin-top: 26px; }