/*
 * Blog · SOLO lo que es del blog.
 *
 * Antes esta hoja era autónoma: repetía toda la paleta del manual y volvía a
 * montar la barra, el conmutador y el pie por su cuenta. De ahí salieron los
 * tres fallos que se arreglaron el 2026-08-01 —dos de contraste y el logotipo
 * blanco sobre fondo claro— y de ahí salía también que el blog se viera
 * distinto al resto del sitio: otra barra, otras medidas, otra clave de tema.
 *
 * Ahora carga `sistema.css` (paleta, escalas, anchos) y `comun.css` (barra,
 * conmutador, pie) como la portada y las fichas, y aquí queda únicamente lo
 * que el blog tiene y nadie más: migas, cuerpo de artículo, tarjetas de
 * entrada y la rejilla de la portada del blog.
 *
 * Regla que sigue en pie: ningún color se escribe a mano. Si hace falta uno
 * que no esté en `sistema.css`, se añade allí, con su comprobación.
 */

/* ── Contenido ──────────────────────────────────────────────────────── */
/* Los anchos y el margen lateral son los del sistema, no números propios: el
   `46rem` de antes coincidía con `--ancho-texto` por casualidad y el `1.4rem`
   de padding no coincidía con nada, así que el blog respiraba distinto que el
   resto del sitio en cuanto la ventana crecía. */
main { max-width: var(--ancho-texto); margin: 0 auto; padding: var(--e6) var(--margen-lateral) var(--e7); }
main.ancho { max-width: var(--ancho-pagina); }

.miga { font-size: .85rem; margin-bottom: 1.2rem; }
.miga a { color: var(--acento); text-decoration: none; font-weight: 600; }

h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin-bottom: .6rem; }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.08rem; margin: 1.6rem 0 .4rem; font-family: "Inter", sans-serif; font-weight: 700; }
p, li { margin-bottom: 1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .5rem; }
a { color: var(--acento); }
.fecha { font-size: .85rem; color: var(--texto-suave); margin-bottom: 1.8rem; }
.rol { font-family: "Chakra Petch", sans-serif; color: var(--acento); font-size: .95rem; margin-bottom: .4rem; }

blockquote {
  margin: 2rem 0; padding: 1.2rem 1.6rem;
  border-left: 4px solid var(--acento-fondo);
  background: var(--superficie); border-radius: 0 12px 12px 0;
  font-family: "Chakra Petch", "Inter", sans-serif;
  font-size: 1.2rem;
}

figure { margin: 1.8rem 0; }
figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
figcaption { font-size: .82rem; color: var(--texto-suave); margin-top: .5rem; text-align: center; }
.dos-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .dos-fotos { grid-template-columns: 1fr; } }

.marcas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.6rem; list-style: none; padding: 0; }
.marcas li {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 999px; padding: .35rem .9rem; font-size: .88rem;
  font-weight: 500; margin: 0;
}

details {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: .8rem;
}
details summary { font-weight: 600; cursor: pointer; }
details p { margin: .8rem 0 0; }

.cierre {
  margin-top: 3rem; padding: 1.8rem; background: var(--superficie);
  border-radius: 16px; border: 2px solid var(--acento-fondo); text-align: center;
}
.cierre h2 { margin-top: 0; }
.cierre .boton {
  display: inline-block; margin-top: .6rem; font-weight: 600;
  text-decoration: none; padding: .85rem 1.7rem; border-radius: 999px;
  background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo);
}

/* ── Portada: DOS columnas ──────────────────────────────────────────── */
.lista-posts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;
  margin-top: 2rem;
}
@media (max-width: 760px) { .lista-posts { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--sombra-1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.tarjeta .foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--borde); }
/* `cover` recorta por el centro, y casi todo el archivo es vertical: en un
   marco apaisado eso cortaba la cabeza de los retratos. Se ancla el encuadre
   ARRIBA DEL TODO —cero recorte superior— porque en este archivo el sujeto
   siempre está en el tercio alto. Con un 22% aún se comía un 11% por arriba,
   que en un retrato es justo la frente. */
.tarjeta .foto img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
}
.tarjeta .texto { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta h2 { font-size: 1.18rem; margin: .35rem 0 .5rem; }
.tarjeta h2 a { color: inherit; text-decoration: none; }
.tarjeta h2 a:hover { color: var(--acento); }
.tarjeta .fecha { font-size: .78rem; margin: 0; }
.tarjeta .resumen { font-size: .93rem; color: var(--texto-suave); margin-bottom: .9rem; }
.tarjeta .leer { margin-top: auto; font-weight: 600; color: var(--acento); text-decoration: none; font-size: .92rem; }

/* Accesibilidad: salto al contenido para quien navega con teclado. */
.saltar {
  position: absolute; left: -9999px; top: 0; padding: .6rem 1rem;
  background: var(--acento-fondo); color: var(--acento-texto-sobre-fondo);
  z-index: 50; border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }