/* ===== LA LETRA Y EL COLOR DE LA MARCA, una sola hoja para todo el sitio =====
   Es la hoja 1 de la lámina de marca llevada a la web: marfil #F5F3F0, la escala de
   seis tamaños (52, 34, 23, 17, 14 y 12), titulares en Manrope 800 con mayúscula
   inicial y −0,03 em, texto corrido en Arimo con interlínea 1,35 y rótulos en
   Manrope 700, caja alta y 0,04 em.
   Se carga la última en cada página, así que manda sobre las hojas de cada zona
   (aprende.css, transitos.css, articulo.css, el <style> de cada fuente). Por eso sus
   reglas llevan !important: es la capa que iguala, y lo que cada zona añada encima
   de ella tiene que respetar estos valores.
   Solo pinta dentro de la hoja marfil de las páginas (.cb-hoja). La carta, el carril,
   la cabecera y el pie no se tocan desde aquí.
   En el teléfono los dos titulares grandes bajan a 36 y 27, que a 52 y 34 se partían
   en tres renglones; en la computadora quedan como en la lámina. */
:root{
  --marfil:#F5F3F0;
  --t1:clamp(36px,1.6rem + 2.4vw,52px);
  --t2:clamp(27px,1.3rem + 1.2vw,34px);
  --t3:clamp(20px,1.1rem + .5vw,23px);
  --tx:17px; --tp:14px; --tr:12px;
  --e1:4px; --e2:8px; --e3:12px; --e4:24px; --e5:48px;
  --tit-ls:-.03em;
}

/* Titulares. El de los artículos (la portada con foto de blog, Aprende, astrocartografía
   y revolución solar) va en Manrope 400 y caja alta por decisión de Mafe, y se queda. */
.cb-hoja :is(h1,h2,h3):not(.portada:has(.portada-interior) h1){
  font-family:'Manrope',Arial,Helvetica,sans-serif!important;font-weight:800!important;
  text-transform:none!important;letter-spacing:var(--tit-ls)!important}
.cb-hoja h1:not(.portada:has(.portada-interior) h1){font-size:var(--t1)!important;line-height:1.05!important}
.cb-hoja h2{font-size:var(--t2)!important;line-height:1.1!important}
.cb-hoja h3{font-size:var(--t3)!important;line-height:1.15!important}
/* el h2 de una ficha lateral es un titular de bloque */
.cb-hoja aside h2{font-size:var(--t3)!important;line-height:1.15!important}

/* Texto corrido. El tamaño de lectura solo se impone fuera de las tarjetas, que llevan
   su letra de ficha medida para caber en una captura del teléfono. */
.cb-hoja :is(p,li){line-height:1.35!important;letter-spacing:0!important}
.cb-hoja :is(p,li):not(:is(.port-tarjeta,.port-panel,.pf-modo,.crt-hoja,aside,nav,.wx-rejilla,[class*="tarjeta"],[class*="card"]) *){
  font-size:var(--tx)!important}

/* Aprende: la firma es letra pequeña en gris, y la fila de datos de cada ficha lleva el
   dato como titular de bloque y su nombre como rótulo. */
.cb-hoja .firma{font-size:var(--tp)!important;color:#70706A!important}
.cb-hoja .bajada{color:#021212!important}
.cb-hoja .wx-rejilla.ficha span{font-family:'Manrope',Arial,Helvetica,sans-serif!important;font-weight:800!important;
  font-size:var(--t3)!important;text-transform:none!important;letter-spacing:var(--tit-ls)!important;line-height:1.1!important}
.cb-hoja .wx-rejilla.ficha small{font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:var(--tr)!important;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:#70706A;margin-top:-4px}

/* Rótulos: los del carril y los de las fichas */
.cb-rot,.cb-hoja .dato .k{font-family:'Manrope',Arial,Helvetica,sans-serif!important;font-size:var(--tr)!important;
  font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important}