/* La base del blog de una landing: cómo se lee un artículo. Lo de la marca
   (colores, tipografías, cabecera y pie) va en el CSS de cada landing, que se
   carga después y pisa estas variables. No se edita en la landing: blog.py la
   copia del kit cada vez que arma el blog. */
:root {
  --b-ancho: 720px;
  --b-tinta: #151515;
  --b-gris: #555;
  --b-linea: #1515152e;
  --b-acento: #151515;
  --b-fondo: #fff;
  --b-fuente: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --b-fuente-tit: var(--b-fuente);
}
.b-pagina { margin: 0; background: var(--b-fondo); color: var(--b-tinta); font-family: var(--b-fuente); }
.b-main { width: min(100% - 40px, var(--b-ancho)); margin-inline: auto; padding: 28px 0 72px; }
.b-migas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--b-gris); }
.b-migas a { color: inherit; text-underline-offset: 3px; }
.b-cab { margin: 22px 0 30px; }
.b-meta { font-size: 14px; color: var(--b-gris); margin: 0 0 14px; }
.b-cab h1 { font-family: var(--b-fuente-tit); font-size: clamp(1.8rem, 6.4vw, 2.9rem); line-height: 1.08; margin: 0; text-wrap: balance; }
.b-resumen { font-size: 1.16rem; line-height: 1.45; color: var(--b-gris); margin: 16px 0 0; }

.b-indice { border-top: 1px solid var(--b-linea); border-bottom: 1px solid var(--b-linea); padding: 16px 0; margin-bottom: 30px; }
.b-indice p { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b-gris); margin: 0 0 8px; }
.b-indice ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.b-indice a { display: block; padding: 7px 0; color: var(--b-tinta); text-underline-offset: 4px; }

.b-cuerpo { font-size: 1.09rem; line-height: 1.65; }
.b-cuerpo p { margin: 0 0 1.1em; }
.b-cuerpo h2 { font-family: var(--b-fuente-tit); font-size: clamp(1.4rem, 4.8vw, 1.85rem); line-height: 1.15; margin: 2em 0 .7em; scroll-margin-top: 90px; text-wrap: balance; }
.b-cuerpo h3 { font-size: 1.16rem; line-height: 1.25; margin: 1.6em 0 .5em; }
.b-cuerpo ul { margin: 0 0 1.2em; padding-left: 1.2em; display: grid; gap: .45em; }
.b-cuerpo strong { font-weight: 700; }

.b-seguir { margin-top: 56px; }
.b-seguir h2 { font-family: var(--b-fuente-tit); font-size: 1.5rem; margin: 0 0 6px; }
.b-tarjetas { list-style: none; margin: 0; padding: 0; }
.b-tarjetas li { border-top: 1px solid var(--b-linea); }
.b-tarjetas li:last-child { border-bottom: 1px solid var(--b-linea); }
.b-tarjetas a { display: grid; gap: 6px; padding: 18px 0; color: inherit; text-decoration: none; }
.b-tarj__meta { font-size: 13.5px; color: var(--b-gris); }
.b-tarj__tit { font-family: var(--b-fuente-tit); font-size: 1.22rem; line-height: 1.2; margin: 0; font-weight: 700; }
.b-tarjetas--lista .b-tarj__tit { font-size: clamp(1.3rem, 4.6vw, 1.7rem); }
.b-tarj__res { color: var(--b-gris); line-height: 1.45; }
@media (hover: hover) { .b-tarjetas a:hover .b-tarj__tit { text-decoration: underline; text-underline-offset: 4px; } }