/* assets/css/pages/blog.css — el blog: índice, artículo y listas filtradas.
 *
 * UNA HOJA PARA LAS CINCO VISTAS
 *
 * Todas comparten cascarón (blog.html) y la Function solo cambia el <main>,
 * así que también comparten hoja. Lo que separa una vista de otra son dos
 * cosas: `.bl-ancho--articulo` estrecha la columna para leer, y el artículo
 * destacado (`.bl-heroe`) se pinta a lo ancho, con el texto sobre la foto.
 *
 * NI FECHA NI FIRMA
 *
 * Las tarjetas y la cabecera del artículo ya no las enseñan (el porqué, en
 * functions/_lib/blog-html.ts). Por eso aquí no hay `.bl-firma`: si vuelve el
 * marcado sin estilo, se ve roto, que es exactamente lo que debe pasar.
 *
 * LA MEDIDA DE LÍNEA MANDA
 *
 * Un artículo se lee, no se mira. La columna de texto va a 68 caracteres
 * (`--medida`), que es lo que un ojo sigue sin perder el renglón; lo que
 * necesita más aire —imágenes, tablas, código— se sale de esa columna con
 * `.bl-cuerpo > figure` y compañía. La alternativa, texto a 1200 px de ancho,
 * es la razón por la que tantos blogs se leen mal aunque estén bien escritos.
 *
 * LOS RECUADROS EDITORIALES
 *
 * `.bl-tip`, `.bl-ojo`, `.bl-ahorra`, `.bl-imprescindible` y `.bl-checklist`
 * son las clases que la lista blanca del servidor deja pasar
 * (functions/_lib/blog-sanitizar.ts). Están aquí y no en el editor a
 * propósito: si el HTML guardado lleva la clase, el estilo existe siempre,
 * también cuando el artículo se pinta desde el servidor sin que el panel
 * intervenga.
 */

.bl-pagina {
  background: var(--color-brand-cream);
  color: var(--color-brand-ink);
  padding: var(--sp-6) var(--sp-3) var(--sp-12);
}

.bl-ancho {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* La columna de lectura: estrecha, centrada y con sitio para respirar. */
.bl-ancho--articulo {
  --medida: 68ch;
  max-width: 820px;
}

/* ── Portadas de sección ────────────────────────────────────────────────── */

.bl-kicker {
  display: inline-block;
  margin: 0 0 var(--sp-1);
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-coral);
  text-decoration: none;
}
a.bl-kicker:hover { text-decoration: underline; }

.bl-portada {
  max-width: 760px;
  margin: 0 0 var(--sp-6);
}
.bl-portada__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--texto-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-brand-blue);
}
.bl-portada__entradilla {
  margin: 0;
  font-size: var(--texto-destacado);
  line-height: 1.5;
  color: var(--color-mudo);
}
.bl-portada__cuenta {
  margin: var(--sp-2) 0 0;
  font-size: var(--texto-etiqueta);
  color: var(--color-mudo);
}
.bl-portada--autor { display: flex; flex-direction: column; align-items: flex-start; }
.bl-portada__retrato {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--sp-2);
}

/* ── Chips de categoría ─────────────────────────────────────────────────── */

.bl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-5);
}
.bl-chip {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--color-linea);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-brand-ink);
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-rapida), color var(--dur-rapida);
}
.bl-chip:hover { border-color: var(--color-brand-coral); color: var(--color-brand-coral); }
.bl-chip--activa {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: var(--color-brand-cream);
}
.bl-chip--activa:hover { color: var(--color-brand-cream); }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.bl-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
}

.bl-carta {
  background: var(--color-white);
  border: 1px solid var(--color-linea);
  border-radius: var(--radius-medium);
  overflow: hidden;
  transition: transform var(--dur-media), box-shadow var(--dur-media);
}
.bl-carta:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.bl-carta__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* LA PROPORCIÓN ES LA DEL RECORTE, no un 16/9 redondo.
   `npm run blog:portadas` recorta las siete fotografías a 1600×840, así que
   ese es el marco. Con otra proporción y `object-fit: cover` el navegador
   vuelve a recortar por su cuenta y el punto de interés que decidió el
   generador deja de valer para nada. */
.bl-carta__foto {
  position: relative;
  aspect-ratio: 1600 / 840;
  background: var(--color-brand-mist);
  overflow: hidden;
}
/* `height: auto` ANTES que `aspect-ratio`: el atributo `height` del HTML se
   traduce a píxeles en la hoja del navegador y ganaría, dejando la foto
   estirada. Ver la nota larga en assets/css/blog-portada.css. */
.bl-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La categoría, sobre la foto y pequeña: es una etiqueta, no un titular. */
.bl-carta__cat,
.bl-heroe__cat span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 27, 53, .82);
  color: var(--color-brand-cream, #FAF7F1);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bl-carta__cat { position: absolute; top: 12px; left: 12px; }

.bl-carta__texto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--sp-3);
}
.bl-carta__titulo {
  margin: 0 0 var(--sp-1);
  font-size: var(--texto-h3);
  line-height: 1.22;
  color: var(--color-brand-blue);
}
.bl-carta__entradilla {
  margin: 0 0 var(--sp-2);
  color: var(--color-mudo);
  line-height: 1.55;
}
/* El pie queda abajo aunque las entradillas midan distinto: si no, en una fila
   de tres el «Leer artículo» aparece a tres alturas. */
.bl-carta__pie {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--texto-etiqueta);
  color: var(--color-mudo);
}
.bl-carta__min::after { content: '·'; margin-left: 10px; opacity: .5; }
.bl-carta__leer { color: var(--color-brand-coral-oscuro); font-weight: 700; }
.bl-carta:hover .bl-carta__leer { text-decoration: underline; }

/* ── El destacado ────────────────────────────────────────────────────────
   Una sola pieza ancha, con el texto SOBRE la fotografía. Es la única de la
   página que puede permitírselo: en las demás el titular iría encima de una
   imagen de 360 px y no se leería.
   El velo es un degradado del azul de marca y vive AQUÍ, no en el píxel de la
   foto: las portadas son CC BY-SA y quemarles encima nuestra tipografía las
   convertiría en obra derivada (ver functions/_lib/fotos-blog.ts). */
.bl-heroe {
  position: relative;
  margin: 0 0 var(--sp-6);
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--color-brand-night);
  transition: transform var(--dur-media), box-shadow var(--dur-media);
}
.bl-heroe:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.bl-heroe__enlace { display: block; color: inherit; text-decoration: none; }
.bl-heroe .bl-foto { aspect-ratio: 1600 / 840; height: auto; }
.bl-heroe__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 27, 53, .93) 0%,
    rgba(0, 27, 53, .78) 34%,
    rgba(0, 27, 53, .28) 62%,
    rgba(0, 27, 53, .08) 100%);
}
/* El logotipo, discreto y decorativo: la marca ya está en la cabecera. */
.bl-sello {
  position: absolute;
  top: 18px;
  right: 20px;
  width: auto;
  height: 22px;
  opacity: .85;
}
.bl-heroe__texto {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--sp-4);
  color: var(--color-brand-cream, #FAF7F1);
}
.bl-heroe__cat {
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-heroe__marca {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-brand-coral);
}
.bl-heroe__titulo {
  margin: 0 0 var(--sp-1);
  max-width: 22ch;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  color: inherit;
}
.bl-heroe__entradilla {
  margin: 0 0 var(--sp-2);
  max-width: 62ch;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.bl-heroe__pie {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--texto-etiqueta);
  color: rgba(255, 255, 255, .78);
}
.bl-heroe__pie .bl-carta__leer { color: var(--color-brand-cream, #FAF7F1); }

@media (prefers-reduced-motion: reduce) {
  .bl-carta, .bl-heroe { transition: none; }
  .bl-carta:hover, .bl-heroe:hover { transform: none; }
}

/* ── Estado vacío y paginación ──────────────────────────────────────────── */

.bl-vacio {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border: 1px dashed var(--color-linea);
  border-radius: var(--radius-medium);
  text-align: center;
  color: var(--color-mudo);
}

.bl-pag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-linea);
  font-size: var(--texto-etiqueta);
}
.bl-pag__salto { color: var(--color-brand-blue); font-weight: 600; text-decoration: none; }
.bl-pag__salto:hover { color: var(--color-brand-coral); }
.bl-pag__salto--mudo { color: var(--color-linea); }
.bl-pag__cuenta { color: var(--color-mudo); }

/* ── El artículo ────────────────────────────────────────────────────────── */

.bl-migas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--sp-3);
  font-size: var(--texto-etiqueta);
  color: var(--color-mudo);
}
.bl-migas a { color: var(--color-mudo); text-decoration: none; }
.bl-migas a:hover { color: var(--color-brand-coral); }

.bl-aviso {
  margin: 0 0 var(--sp-3);
  padding: 10px var(--sp-2);
  border-radius: var(--radius-small);
  background: #FFF4E5;
  border: 1px solid #F0A030;
  color: #7A4409;
  font-size: var(--texto-etiqueta);
  font-weight: 600;
}

.bl-cabecera { margin: 0 0 var(--sp-4); }
.bl-cabecera__titulo {
  margin: var(--sp-1) 0 var(--sp-2);
  font-size: var(--texto-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-brand-blue);
}
.bl-cabecera__entradilla {
  margin: 0 0 var(--sp-3);
  font-size: var(--texto-destacado);
  line-height: 1.5;
  color: var(--color-mudo);
}
.bl-cabecera__foto { margin: 0 0 var(--sp-5); }
.bl-cabecera__foto img {
  width: 100%;
  /* `height: auto` antes que `aspect-ratio`: el `height` del atributo HTML se
     traduce a píxeles en la hoja del navegador y ganaría. Ver la nota larga en
     assets/css/blog-portada.css. */
  height: auto;
  aspect-ratio: 1600 / 840;
  object-fit: cover;
  border-radius: var(--radius-medium);
  display: block;
}
.bl-cabecera__foto figcaption {
  margin-top: var(--sp-1);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--texto-etiqueta);
  color: var(--color-mudo);
}
/* La autoría de la foto, más apagada que el pie: es un requisito de la
   licencia, no parte del artículo. Pero está, y con enlace a la licencia. */
.bl-credito { opacity: .8; }
.bl-credito a { color: inherit; }

.bl-cabecera__min {
  margin: 0 0 var(--sp-3);
  font-size: var(--texto-etiqueta);
  color: var(--color-mudo);
}

/* El cuerpo: medida de línea corta, y lo que necesita aire se sale. */
.bl-cuerpo {
  font-size: var(--texto-cuerpo);
  line-height: 1.75;
}
.bl-cuerpo > * { max-width: var(--medida); }
.bl-cuerpo > figure,
.bl-cuerpo > table,
.bl-cuerpo > pre,
.bl-cuerpo > .bl-video { max-width: 100%; }

.bl-cuerpo h2 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--texto-h2);
  line-height: 1.15;
  color: var(--color-brand-blue);
}
.bl-cuerpo h3 {
  margin: var(--sp-5) 0 var(--sp-1);
  font-size: var(--texto-h3);
  line-height: 1.2;
  color: var(--color-brand-blue);
}
.bl-cuerpo p { margin: 0 0 var(--sp-2); }
.bl-cuerpo a { color: var(--color-brand-coral-oscuro); }
.bl-cuerpo ul, .bl-cuerpo ol { margin: 0 0 var(--sp-3); padding-left: 1.3em; }
.bl-cuerpo li { margin-bottom: 6px; }
.bl-cuerpo img { max-width: 100%; height: auto; border-radius: var(--radius-small); }
.bl-cuerpo figure { margin: var(--sp-4) 0; }
.bl-cuerpo figure img { width: 100%; }
.bl-cuerpo figcaption {
  margin-top: 6px;
  font-size: var(--texto-etiqueta);
  color: var(--color-mudo);
}
.bl-cuerpo blockquote {
  margin: var(--sp-4) 0;
  padding: 0 0 0 var(--sp-3);
  border-left: 3px solid var(--color-brand-coral);
  font-size: var(--texto-destacado);
  line-height: 1.5;
  color: var(--color-brand-blue);
}
.bl-cuerpo hr {
  margin: var(--sp-6) auto;
  border: 0;
  border-top: 1px solid var(--color-linea);
}
.bl-cuerpo table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  font-size: 0.95rem;
}
.bl-cuerpo th, .bl-cuerpo td {
  padding: 10px 12px;
  border: 1px solid var(--color-linea);
  text-align: left;
  vertical-align: top;
}
.bl-cuerpo th { background: var(--color-brand-mist); font-weight: 700; }
.bl-cuerpo code {
  background: var(--color-brand-mist);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Los vídeos, con su marco proporcional. */
.bl-video { margin: var(--sp-4) 0; }
.bl-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-medium);
  display: block;
}

/* ── Recuadros editoriales ──────────────────────────────────────────────── */

.bl-tip, .bl-ojo, .bl-ahorra, .bl-imprescindible, .bl-checklist {
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  border-radius: var(--radius-medium);
  border-left: 4px solid;
  background: var(--color-white);
}
.bl-tip { border-color: var(--color-brand-coral); }
.bl-ojo { border-color: #F0A030; background: #FFF8EE; }
.bl-ahorra { border-color: #157F4C; background: #F1FAF5; }
.bl-imprescindible { border-color: var(--color-brand-blue); background: var(--color-brand-sky); }
.bl-checklist { border-color: var(--color-brand-blue); }
.bl-tip > :first-child, .bl-ojo > :first-child,
.bl-ahorra > :first-child, .bl-imprescindible > :first-child,
.bl-checklist > :first-child { margin-top: 0; }
.bl-tip > :last-child, .bl-ojo > :last-child,
.bl-ahorra > :last-child, .bl-imprescindible > :last-child,
.bl-checklist > :last-child { margin-bottom: 0; }
.bl-checklist ul { list-style: none; padding-left: 0; }
.bl-checklist li { padding-left: 1.6em; position: relative; }
.bl-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-brand-coral);
  font-weight: 700;
}

/* ── Etiquetas, recomendaciones y cierre ────────────────────────────────── */

.bl-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-linea);
}

.bl-recomienda, .bl-relacionados { margin-top: var(--sp-8); }
.bl-recomienda h2, .bl-relacionados h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--texto-h3);
  color: var(--color-brand-blue);
}
.bl-recomienda__lista { display: grid; gap: var(--sp-2); }
.bl-recurso {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2);
  border: 1px solid var(--color-linea);
  border-radius: var(--radius-medium);
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-rapida);
}
.bl-recurso:hover { border-color: var(--color-brand-coral); }
.bl-recurso img { width: 64px; height: 90px; object-fit: contain; flex: none; }
.bl-recurso__texto { display: flex; flex-direction: column; gap: 2px; }
.bl-recurso__tipo {
  font-size: var(--texto-etiqueta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-coral);
}
.bl-recurso__titulo { font-weight: 600; color: var(--color-brand-blue); }
.bl-recurso__pie { font-size: var(--texto-etiqueta); color: var(--color-mudo); }

.bl-registro {
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  border-radius: var(--radius-large);
  background: var(--color-brand-night);
  color: var(--color-brand-cream);
}
.bl-registro h2 { margin: 0 0 var(--sp-1); font-size: var(--texto-h3); color: var(--color-brand-cream); }
.bl-registro p { margin: 0 0 var(--sp-3); color: rgb(250 247 241 / 78%); }

.bl-boton {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--color-brand-coral);
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  line-height: 20px;
}
.bl-boton:hover { background: var(--color-brand-coral-oscuro); }

/* ── Adaptación ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .bl-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bl-pagina { padding: var(--sp-4) var(--sp-2) var(--sp-8); }
  .bl-rejilla { grid-template-columns: minmax(0, 1fr); }
  /* En móvil un chip se toca con el dedo, no con un ratón: 32 px de alto
     dejaban las etiquetas por debajo del área táctil mínima. */
  .bl-chip { padding: 12px 16px; }
  .bl-pag { flex-direction: column; align-items: stretch; text-align: center; }
  .bl-recurso img { width: 48px; height: 68px; }
  /* El destacado deja de llevar el texto encima de la foto: a 400 px de ancho
     el titular taparía la mitad de la imagen y se leería peor que debajo. */
  .bl-heroe__texto { position: static; background: var(--color-brand-night); }
  .bl-heroe__velo { display: none; }
  .bl-heroe__titulo { max-width: none; font-size: var(--texto-h2); }
}

/* El botón de compartir lo añade pages/blog.js, y solo cuando el navegador
   trae `navigator.share`. Su estilo vive aquí para que no haga falta ni una
   línea de CSS en línea (ver la política de /blog en `_headers`). */
.bl-compartir {
  margin-top: var(--sp-2);
  padding: 9px 18px;
  min-height: 44px;
  border: 1px solid var(--color-linea);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-brand-blue);
  font: inherit;
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  cursor: pointer;
}
.bl-compartir:hover { border-color: var(--color-brand-coral); color: var(--color-brand-coral); }

/* La marca invisible que mide «ha llegado a la mitad». No ocupa ni pinta. */
.bl-marca-lectura { display: block; height: 1px; }


/* ── Los e-books y las guías, al final del índice ─────────────────────────
   Solo en /blog y solo en la primera página (lo decide `vistaListado`). Aquí
   están sus estilos, que es lo único que hace falta para que no parezcan un
   anuncio pegado: mismo ancho, mismo aire y ningún borde de más. */

.bl-ebooks {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-5);
  align-items: center;
  border-radius: var(--radius-medium);
  background: var(--color-brand-mist);
}
.bl-ebooks__intro h2 { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--texto-h2); color: var(--color-brand-blue); }
.bl-ebooks__intro p { margin: 0 0 var(--sp-3); color: var(--color-mudo); line-height: 1.55; }
.bl-ebooks__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.bl-ebooks__lista a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
/* `height: auto` otra vez: los atributos del `<img>` mandan sobre el
   `aspect-ratio` si no se neutraliza el alto. Sin esto, las portadas de los
   e-books salen estiradas — y estirar una portada es de las cosas que más
   cantan en una página. */
.bl-ebooks__lista img {
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 340;
  object-fit: cover;
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-soft);
}
.bl-ebooks__titulo { font-weight: 700; line-height: 1.25; color: var(--color-brand-blue); }
.bl-ebooks__pie { font-size: var(--texto-etiqueta); color: var(--color-mudo); line-height: 1.4; }
.bl-ebooks__lista a:hover .bl-ebooks__titulo { color: var(--color-brand-coral-oscuro); }

.bl-boton--linea {
  background: none;
  border: 1px solid var(--color-brand-blue);
  color: var(--color-brand-blue);
}
.bl-boton--linea:hover { background: var(--color-brand-blue); color: var(--color-brand-cream, #FAF7F1); }

.bl-guias {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5);
  border-radius: var(--radius-medium);
  background: var(--color-brand-night);
  color: var(--color-brand-cream, #FAF7F1);
  text-align: center;
}
.bl-guias h2 { margin: 0 0 var(--sp-2); font-size: var(--texto-h2); color: inherit; }
.bl-guias p {
  margin: 0 auto var(--sp-3);
  max-width: 56ch;
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
}

@media (max-width: 900px) {
  .bl-ebooks { grid-template-columns: 1fr; padding: var(--sp-4); }
  .bl-heroe__texto { padding: var(--sp-3); }
  .bl-sello { height: 18px; top: 12px; right: 14px; }
}
@media (max-width: 560px) {
  /* Con tres portadas de e-book a 560 px cada una mide 90 px y no se lee el
     título. Dos, y la tercera espera a la siguiente pantalla. */
  .bl-ebooks__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-ebooks__lista li:nth-child(3) { display: none; }
  .bl-guias { padding: var(--sp-4); }
}