/* =============================================================================
   Herramientas sueltas de Archiblocks — capa del kit de marca 1.2
   -----------------------------------------------------------------------------
   ⟲ 2026-10-21 — Kit de marca 1.2 (`orquestador-sistema:DIRECCION/MARKETING/
   KIT-MARCA/`, rama `marketing/kit-marca`): blanco y gris en lugar de crema y
   marfil. Se carga DESPUÉS de `/biblioteca/biblioteca.css` y sólo en
   `/herramientas/`: la Biblioteca sigue con su paleta hasta que se la pase al kit
   en su propio cambio.

   Reglas del kit que aplica esta hoja:
    · Fondos y superficies en blanco; el gris #8C8780 sólo en líneas, bordes,
      separadores y marcas de registro, nunca de fondo ni en texto chico.
    · Texto en grafito, rótulos en monoespaciada mayúscula con 0,2 em.
    · Logo principal (cara roja) desde el archivo original: `logo-archiblocks.svg`
      es copia byte a byte de `logos/logo-archiblocks-cara-roja.svg` del kit.
    · Marcas de registro en tres esquinas y el rótulo «Lámina N / total» abajo a
      la derecha, en la cabecera de cada herramienta.
   ============================================================================= */

:root {
  --crema: #fff;   /* el kit 1.2 retira la crema: lo que se pintaba de crema queda blanco con borde gris */
  --marfil: #fff;
  --gris: #8c8780;
  --linea: rgba(140, 135, 128, 0.5);
}

body { background: #fff; }

.cab { background: #fff; border-bottom: 1px solid var(--gris); }
.cab .logo img { display: block; height: 40px; width: auto; } /* 150 px de ancho: sobre el mínimo de 120 px */

/* Lo que antes separaba el fondo crema ahora lo separa un borde gris. */
.llamado,
.formula,
.sin-js,
.puente,
.elemento > .resultado { background: #fff; border: 1px solid var(--gris); }

/* Separadores y bordes de estructura en gris; los controles (campos, botones) siguen en grafito. */
.faq details:first-of-type,
.pie { border-top: 1.5px solid var(--gris); }

/* Titulares en Inter Tight 900, mayúsculas, interlineado 1,02 (el kit pide 0,85 a 0,95, pero con 0,95 la tilde de «TÉRMICA» se monta en la línea de arriba; medido el 21-10 en Chromium) y tracking −1 %; las palabras en <em> van en rojo. */
.titular h1.pregunta { text-transform: uppercase; font-size: clamp(30px, 8.2vw, 68px); line-height: 1.02; letter-spacing: -0.01em; }
.articulo h2,
.calc > h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -0.01em; word-spacing: 0.06em; }

/* Cabecera como lámina: cruces en tres esquinas y rótulo abajo a la derecha. */
.titular {
  position: relative;
  margin-top: 14px;
  padding: 26px 22px 44px;
  --cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0v16M0 8h16' stroke='%238c8780' stroke-width='1'/%3E%3C/svg%3E");
  background:
    var(--cruz) left top / 16px no-repeat,
    var(--cruz) right top / 16px no-repeat,
    var(--cruz) left bottom / 16px no-repeat;
}
.titular .lamina {
  position: absolute; right: 0; bottom: 0; margin: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grafito);
}

@media (max-width: 640px) {
  .titular { padding: 22px 14px 40px; }
  .cab .logo img { height: 34px; } /* 128 px de ancho */
}