/* lo común de los módulos del artículo «Identidad corporativa e imagen corporativa»: la cabecera de las láminas de BRND® (en Mono, el
   nombre a la izquierda, la serie al centro y el número a la derecha) y la escala que falta en comun.css. Se diseñan como las láminas
   PH-01 a PH-03 de laminas-fuente/ph.py, pero en HTML: en la computadora leen como la lámina; en el teléfono, en una columna */
:root { --c34: 34px; --lh-34: 40px; --c89: 89px; --lh-89: 89px; --lh-marca: 0.9; --lh-titular: 1.04; }
.lamina { display: grid; gap: var(--e34); padding: var(--e34); border-radius: var(--radio-continuo); background: var(--hoja); color: var(--tinta); }
.lamina.oscura { background: var(--tinta); color: var(--hoja); }
.lamina.lima { background: var(--lima); color: var(--tinta); }
@container (max-width: 640px) { .lamina { padding: var(--e21); gap: var(--e21); } }
.cabecera { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--e13); font-family: var(--mono); font-size: var(--c13); line-height: var(--lh-13);
  letter-spacing: var(--l13); font-variation-settings: "wght" 500; }
.cabecera .serie { color: var(--tinta-2); text-align: center; }
.oscura .cabecera .serie { color: var(--punto); }
.lima .cabecera .serie { color: var(--tinta); }   /* sobre lima, nunca gris */
.cabecera .numero { text-align: right; }
.cabecera .nombre::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: var(--e8); border-radius: 50%; background: var(--lima); vertical-align: 1px; }
.lima .cabecera .nombre::before { background: var(--tinta); }
@container (max-width: 820px) { .cabecera { grid-template-columns: 1fr auto; } .cabecera .serie { display: none; } }   /* en el artículo (740) no cabe la serie */
.peso-4 { font-variation-settings: "wght" 400, "wdth" 100; }
.peso-5 { font-variation-settings: "wght" 500, "wdth" 100; }
.peso-6 { font-variation-settings: "wght" 600, "wdth" 100; }
.peso-7 { font-variation-settings: "wght" 700, "wdth" 100; }