/*
 * theme.css — estilos propios del theme SOLEM Blog.
 *
 * Consume SOLO las custom properties --solem-* de tokens.css (generado
 * desde @solem/ui-kit). No importa CSS de componentes del kit: cada clase
 * de acá (solem-blog-*) se define desde cero, a propósito, para que quede
 * claro que este theme no comparte código en ejecución con Astro — solo
 * comparte los valores de marca (ver sección 5 de la propuesta de
 * arquitectura, "Sincronía visual con Astro").
 *
 * Color de marca: solem-500 SIEMPRE al natural en links/CTA/botones — no
 * se oscurece a solem-700 "por contraste" (decisión de MKT, 2026-07-08).
 */

/* ---------- Fuentes auto-hospedadas (mismos archivos que Astro) ---------- */

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/overpass-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/overpass-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hind-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/hind-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/hind-latin-600-normal.woff2") format("woff2");
}

/* ---------- Reset mínimo ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font: var(--solem-font-text-regular);
  color: var(--solem-color-gray-dark-900);
  background-color: var(--solem-color-white);
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--solem-color-solem-500);
}
a:hover {
  color: var(--solem-color-solem-600);
}
a:focus-visible {
  outline: 2px solid var(--solem-color-solem-700);
  outline-offset: 2px;
  border-radius: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: "Overpass", sans-serif;
  font-weight: 600;
  color: var(--solem-color-gray-dark-900);
  margin: 0 0 0.5em;
}

/* line-height explícito por nivel — SIN esto, el h1-h4 hereda el
   line-height de párrafo (21px) y a 34-47px las líneas casi se pisan. Cada
   regla de abajo debe traer el line-height del mismo nivel, nunca solo el
   font-size (bug real encontrado 2026-08-26: pasaba en el H1 y en el título
   del destacado del home, no en las cards porque esas ya usaban el
   shorthand `font: var(--solem-font-h5)` que sí trae line-height incluido). */
h1 {
  font-size: var(--solem-font-size-h1);
  line-height: var(--solem-line-height-h1);
  letter-spacing: -2px;
}
h2 {
  font-size: var(--solem-font-size-h2);
  line-height: var(--solem-line-height-h2);
}
h3 {
  font-size: var(--solem-font-size-h3);
  line-height: var(--solem-line-height-h3);
}
h4 {
  font-size: var(--solem-font-size-h4);
  line-height: var(--solem-line-height-h4);
}

/* Mismo patrón que .hero__title en Astro (Hero.astro): el kit no tiene un
   tamaño de H1 fluido propio — cada lugar donde se usa un H1 grande lo baja
   a tamaño de H2 bajo 768px. Se generaliza acá al <h1> del theme completo
   (título del artículo, "Blog" de la portada, título de categoría/búsqueda)
   en vez de repetirlo página por página. */
@media (max-width: 768px) {
  h1 {
    font-size: var(--solem-font-size-h2);
    line-height: var(--solem-line-height-h2);
  }
}

p {
  font: var(--solem-font-text-regular);
  color: var(--solem-color-gray-dark-800);
  margin: 0 0 1em;
}

/* ---------- Skip link (WCAG 2.4.1) ---------- */

.solem-blog-skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--solem-color-gray-dark-900);
  color: var(--solem-color-white);
  font: var(--solem-font-link);
  text-decoration: none;
  transition: top 0.15s ease;
}
.solem-blog-skip-link:focus {
  top: 8px;
  outline: 2px solid var(--solem-color-white);
  outline-offset: 2px;
}

/* ---------- Layout base ---------- */

.solem-blog-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.solem-blog-page-header__desc {
  color: var(--solem-color-gray-dark-600);
  max-width: 60ch;
  margin: 0 0 32px;
}
.solem-blog-results-count {
  font-size: var(--solem-font-size-text-small);
  color: var(--solem-color-gray-dark-500);
  margin: 0 0 12px;
}
.solem-blog-empty-state {
  font-size: var(--solem-font-size-h3);
  line-height: var(--solem-line-height-h3);
  font-weight: 600;
  color: var(--solem-color-gray-dark-900);
  max-width: none;
  margin: 0 0 8px;
}

/* ---------- Hero del blog (portada / categoría / búsqueda) ----------
 * Mismo degradado, tipografía y chips que la vieja versión Astro (rama
 * claude/perf-material-symbols-subset, Hero.astro variante "compact") —
 * valores extraídos de ahí, no copiados: acá es CSS propio. Diferencia de
 * fondo: los chips son links reales a archive.php, no filtros por JS (ver
 * template-parts/blog-hero.php). */

/* El nav es transparente y sticky, pero vive en el flujo normal ANTES del
   hero — sin esto, "transparente" solo deja ver el blanco del <body> detrás,
   no el degradado (bug real: el usuario mandó captura mostrándolo). Se tira
   el hero hacia arriba con margin-top negativo (altura real medida del nav,
   61px: padding 16px + logo 28px + borde 1px) para que su fondo quede
   DETRÁS del nav, y se compensa sumando esos mismos 61px al padding-top de
   __inner para que el contenido no se mueva de lugar. Si el nav cambia de
   alto (logo, padding), volver a medir y actualizar ambos valores. */
.solem-blog-hero {
  position: relative;
  background: var(--solem-hero-gradient);
  margin-top: -61px;
  text-align: center;
}

/* Círculos de colores difuminados de fondo — réplica de HeroBackdrop.astro
   del kit (ver template-parts/hero-backdrop.php). Van DETRÁS del contenido:
   position:absolute + z-index:0, mientras que breadcrumb-row/inner/split de
   abajo llevan z-index:1 explícito (si no, un position:absolute con
   z-index:0 pinta ENCIMA del contenido normal sin position, tapándolo). */
.solem-blog-hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.solem-blog-hero-backdrop__circle {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--size, 48px);
  height: var(--size, 48px);
  border-radius: 50%;
  background: var(--color, var(--solem-color-solem-300));
  opacity: var(--op, 0.5);
  filter: blur(var(--blur, 0px));
  transform: translate(-50%, -50%);
  animation: solem-blog-hero-backdrop-float var(--dur, 16s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes solem-blog-hero-backdrop-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
  33% {
    transform: translate(-50%, -50%) translate(var(--dx, 14px), var(--dy, -12px));
  }
  66% {
    transform: translate(-50%, -50%)
      translate(calc(var(--dx, 14px) * -0.6), calc(var(--dy, -12px) * 0.7));
  }
}
@media (prefers-reduced-motion: reduce) {
  .solem-blog-hero-backdrop__circle {
    animation: none;
  }
}
/* Fila propia y más ancha (mismo max-width + padding horizontal que
   .solem-blog-nav__inner, 1180px/24px) para que el breadcrumb quede
   alineado bajo el logo — el bloque centrado de abajo (título/lead/
   buscador) es más angosto (720px) a propósito, son dos anchos de columna
   distintos, como en el original. El padding horizontal vive en estos dos
   bloques y no en .solem-blog-hero para que el "corte" curvo de abajo
   (.solem-blog-divider, position:absolute;left:0;right:0) quede realmente
   pegado a los bordes, no inset. */
.solem-blog-hero__breadcrumb-row {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 101px 24px 0;
  text-align: left;
}
/* Título/lead — vive dentro de .solem-blog-hero, entre el breadcrumb y el
   buscador: el H1 tiene que orientar (SEO/lectores de pantalla) antes de
   mostrar contenido, no después. text-align:center declarado acá mismo
   igual (no depende de heredar el de .solem-blog-hero). Sin padding-bottom:
   el margin-top del buscador (.solem-blog-search) ya da el aire.
   display:grid + width:fit-content (en vez de un block de 720px fijo): el
   ancho de la columna pasa a ser el del contenido más ancho entre sus filas
   (normalmente la bajada, en una sola línea) — cualquier fila que se estire
   al 100% (el buscador) queda tan ancha como ese texto, no como un
   contenedor arbitrario de 720px que puede ser más ancho que el texto real. */
.solem-blog-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: stretch;
  width: fit-content;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
/* Post destacado — ya NO vive dentro del hero: va debajo, en el área
   blanca, después del "corte" curvo. Mismo tratamiento visual (sin card,
   texto alineado a la izquierda: ver __body más abajo), solo cambia su
   posición en el documento. Mismo ancho que el breadcrumb (1180px), más
   amplio que __inner (720px) porque el layout es horizontal. */
.solem-blog-hero__featured {
  max-width: 1180px;
  margin: 48px auto 0;
  padding: 0 24px 48px;
}
.solem-blog-hero__breadcrumb {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  font-size: var(--solem-font-size-text-small);
  color: var(--solem-color-gray-dark-700);
  margin-bottom: 24px;
}
.solem-blog-hero__breadcrumb a {
  color: var(--solem-color-gray-dark-700);
  text-decoration: none;
}
.solem-blog-hero__breadcrumb a:hover {
  color: var(--solem-color-solem-600);
}
.solem-blog-hero__breadcrumb span[aria-hidden],
.solem-blog-hero__breadcrumb span[aria-current] {
  color: var(--solem-color-orange-500);
}
.solem-blog-hero__breadcrumb span[aria-current] {
  font-weight: 600;
}
.solem-blog-hero__inner h1 {
  font-size: var(--solem-font-size-h1);
  font-weight: 700;
  letter-spacing: -1.5px;
  margin: 0;
}
.solem-blog-hero__lead {
  font-size: var(--solem-font-size-h4);
  line-height: var(--solem-line-height-h4);
  font-weight: 400;
  color: var(--solem-color-gray-dark-700);
  margin: 16px 0 0;
}

/* Envuelve el buscador dentro del hero: es el último contenido antes del
   "corte" curvo (.solem-blog-divider, position:absolute) y necesita aire
   propio abajo. padding-bottom, no margin-bottom en .solem-blog-search
   mismo — un margin ahí colapsaría hacia afuera de .solem-blog-hero (sin
   padding/borde propio que lo contenga) y el buscador quedaría pegado al
   borde real de la sección, donde lo pisa el corte curvo (z-index:2). */
.solem-blog-hero__search {
  padding-bottom: 48px;
}
/* El buscador del hero comparte columna con el H1/lead (.solem-blog-hero__inner,
   720px) — se estira a ese mismo ancho en vez del 340px fijo que usa
   .solem-blog-search en otros contextos (ej. 404.php), para quedar tan ancho
   como la bajada "Novedades, alianzas y casos de SOLEM.". */
.solem-blog-hero__search .solem-blog-search {
  width: 100%;
}
.solem-blog-search {
  /* "flex" (no "inline-block") + width:max-content + margin:auto: un
     inline-block comparte línea con cualquier otro elemento inline-level
     que lo siga sin salto de línea entre medio (ej. el botón de 404.php,
     inline-flex), y el navegador centra el PAR completo en vez del
     buscador solo, corriéndolo visiblemente hacia la izquierda. Bug real,
     encontrado al agregar el buscador a 404.php. Un flex container genera
     la misma caja de bloque hacia afuera que "block" — queda inmune a lo
     que venga después en el DOM. */
  display: flex;
  align-items: stretch;
  width: 340px;
  max-width: 100%;
  margin: 32px auto 0;
  /* El borde+radio vive acá, no en el input — así el input y el botón se
     ven como UN solo componente. overflow:hidden recorta la esquina
     cuadrada del botón para que respete la curva del contenedor. Radio
     10px (no píldora 999px): la píldora completa está reservada para
     botones/CTA en este sistema, y usarla en un campo de texto se leía
     como un botón raro en vez de un buscador. */
  border: 1px solid var(--solem-color-gray-dark-100);
  border-radius: 10px;
  background: var(--solem-color-white);
  overflow: hidden;
  transition: border-color 0.15s;
}
.solem-blog-search:focus-within {
  outline: 2px solid var(--solem-color-solem-700);
  outline-offset: 2px;
  /* El outline pinta afuera del propio overflow:hidden (no lo recorta),
     pero igual sacamos el borde gris para no duplicar el foco. */
  border-color: transparent;
}
.solem-blog-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 13px 4px 13px 20px;
  font: var(--solem-font-text-small);
  color: var(--solem-color-gray-dark-900);
  text-align: left;
}
.solem-blog-search__input:focus {
  outline: none;
}
/* Botón real (submit del form), no un ícono decorativo — llena todo el
   alto de la píldora, mismo color de marca que el resto del sitio. */
.solem-blog-search__submit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: none;
  background: var(--solem-color-solem-500);
  color: var(--solem-color-white);
  cursor: pointer;
  transition: background-color 0.15s;
}
.solem-blog-search__submit:hover {
  background: var(--solem-color-solem-600);
}
.solem-blog-search__submit:focus-visible {
  outline: none;
}

/* El "corte" curvo — componente real del kit (.solem-section-divider),
   valores exactos incluido el path del SVG. */
.solem-blog-divider {
  pointer-events: none;
  z-index: 2;
  width: 100%;
  line-height: 0;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}
.solem-blog-divider svg {
  width: 100%;
  height: 90px;
  display: block;
}
.solem-blog-divider__fill {
  fill: var(--solem-color-white);
}

.solem-blog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 0;
}
.solem-blog-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--solem-color-gray-dark-100);
  background: var(--solem-color-white);
  color: var(--solem-color-gray-dark-700);
  font-size: var(--solem-font-size-text-small);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.solem-blog-chip:hover {
  border-color: var(--solem-color-solem-500);
  color: var(--solem-color-solem-600);
}
.solem-blog-chip.is-active {
  background: var(--solem-color-solem-500);
  border-color: var(--solem-color-solem-500);
  color: var(--solem-color-white);
}
.solem-blog-chip.is-active:hover {
  color: var(--solem-color-white);
}

/* Mismo quiebre que Astro (Hero.astro: 768px) para el título del hero —
   el genérico `h1 { }` de la base tipográfica no alcanza a pisar esto por
   especificidad (.solem-blog-hero__inner h1 es más específico). */
@media (max-width: 768px) {
  .solem-blog-hero__inner h1 {
    font-size: var(--solem-font-size-h2);
    line-height: var(--solem-line-height-h2);
  }
}

@media (max-width: 640px) {
  .solem-blog-hero__breadcrumb-row {
    padding-top: 93px;
  }
  .solem-blog-divider svg {
    height: 48px;
  }
  .solem-blog-search {
    width: 100%;
  }
}

/* ---------- Hero del artículo (single.php) ---------- */

/* Layout "split": imagen destacada (izq.) + título/meta (der.), mismo
   degradado/breadcrumb/divisor que .solem-blog-hero. Replica
   Hero.astro (variante hero--split) del blog headless viejo. */
.solem-blog-hero__split {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 88px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  /* Centrado vertical a propósito (pedido explícito): título+meta quedan
     centrados contra la imagen. En el rango 769–1024px, donde un título
     largo puede envolver a varias líneas, el @media de abajo ya achica el
     H1 para que la columna de texto no se dispare mucho más alta que la
     imagen. */
  align-items: center;
  text-align: left;
}
.solem-blog-hero__media {
  display: flex;
  justify-content: center;
}
.solem-blog-hero__media img {
  display: block;
  /* Ocupa el 100% de su columna del grid (antes topeaba en 380px y quedaba
     chica y flotando en medio del espacio muerto del degradado). */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
}
.solem-blog-hero__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.solem-blog-hero__col h1 {
  margin: 0 0 20px;
}
/* Sin imagen destacada: cae al layout centrado (.solem-blog-hero__inner,
   igual que blog-hero.php) — el título ya viene centrado por herencia.
   padding-bottom propio (no de .solem-blog-hero__inner, que en blog-hero.php
   NO es el último elemento antes del "corte" curvo — ahí lo sigue el
   buscador): acá sí lo es, mismo valor que .solem-blog-hero__split para
   que ambas variantes del hero de artículo respiren igual antes del corte. */
.solem-blog-hero__col--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 88px;
}
.solem-blog-hero__col--centered h1 {
  margin: 0 0 20px;
}

/* Fecha / categoría / tiempo de lectura, con íconos naranjos (igual que el
   acento del resto del hero — breadcrumb activo, separadores). */
.solem-blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.solem-blog-hero__col--centered .solem-blog-hero__meta {
  justify-content: center;
}
.solem-blog-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--solem-font-text-regular);
  color: var(--solem-color-gray-dark-700);
}
.solem-blog-hero__meta-icon {
  flex: none;
  color: var(--solem-color-orange-500);
}

/* El layout split sigue a 2 columnas hasta los 768px, pero el H1 recién
   achica ahí también — entre 769 y ~1024px cada columna de texto ya es
   angosta (la mitad de un viewport de, digamos, 800px) mientras el título
   sigue al tamaño grande de escritorio: un título largo envuelve a 4-5
   líneas y queda más alto que la imagen al lado. Se lo achica un poco antes
   que al resto de heroes (que son centrados a 720px y no tienen este
   problema de columna angosta). */
@media (min-width: 769px) and (max-width: 1024px) {
  .solem-blog-hero__split .solem-blog-hero__col h1 {
    font-size: var(--solem-font-size-h2);
    line-height: var(--solem-line-height-h2);
  }
}

@media (max-width: 768px) {
  .solem-blog-hero__split {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 8px;
    text-align: center;
  }
  .solem-blog-hero__col {
    align-items: center;
  }
}

/* Oculta visualmente pero deja accesible para lectores de pantalla —
   utilidad estándar de WordPress, el theme no la traía. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---------- Nav ---------- */

/* Transparente por defecto (se integra con el degradado del hero en
   portada/categoría/búsqueda) — al hacer scroll, JS agrega .is-scrolled y
   pasa a blanco sólido con sombra. Mismo patrón que .solem-navbar del kit
   (transparente + --scrolled), reimplementado a mano. */
.solem-blog-nav {
  border-bottom: 1px solid transparent;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 40;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.solem-blog-nav.is-scrolled {
  background: var(--solem-color-white);
  border-bottom-color: var(--solem-color-gray-dark-100);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .solem-blog-nav {
    transition: none;
  }
}
.solem-blog-nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.solem-blog-nav__logo {
  display: block;
  height: 28px;
  width: auto;
}
.solem-blog-nav__menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.solem-blog-nav__link {
  font: var(--solem-font-link);
  color: var(--solem-color-gray-dark-800);
  text-decoration: none;
  transition:
    color 0.2s,
    font-weight 0.2s;
}
.solem-blog-nav__link:hover {
  color: var(--solem-color-solem-500);
}
.solem-blog-nav__link[aria-current="page"] {
  color: var(--solem-color-solem-500);
  font-weight: 600;
}

/* Toggle (hamburguesa): oculto en desktop, el menú se ve siempre en línea. */
.solem-blog-nav__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 44px;
  color: var(--solem-color-gray-dark-900);
  font: var(--solem-font-link);
}
.solem-blog-nav__toggle-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.solem-blog-nav__toggle-icon::before,
.solem-blog-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.solem-blog-nav__toggle-icon::before {
  top: -7px;
}
.solem-blog-nav__toggle-icon::after {
  top: 7px;
}
.solem-blog-nav__toggle[aria-expanded="true"] .solem-blog-nav__toggle-icon {
  background: transparent;
}
.solem-blog-nav__toggle[aria-expanded="true"] .solem-blog-nav__toggle-icon::before {
  transform: translateY(7px) rotate(45deg);
}
.solem-blog-nav__toggle[aria-expanded="true"] .solem-blog-nav__toggle-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .solem-blog-nav__toggle-icon::before,
  .solem-blog-nav__toggle-icon::after {
    transition: none;
  }
}

/* 900px, no 640: con los 6 links del menú + logo, el nav deja de entrar en
   una sola fila alrededor de los ~750px (depende del texto real de cada
   link) — bajo eso y hasta acá el <ul> hacía flex-wrap a una 2ª línea sin
   que el hamburger todavía existiera, y el nav (más alto de lo que asume
   el margin-top negativo del hero de abajo, fijo en -61px) terminaba
   tapando su propio link "Blog" contra el hero. Se sube el umbral con
   margen de sobra en vez de afinarlo al pixel exacto, que puede variar
   según fuente/zoom real del usuario. */
@media (max-width: 900px) {
  .solem-blog-nav__toggle {
    display: inline-flex;
  }

  /* El menú pasa a desplegable: oculto por defecto, el JS agrega .is-open.
     Sin JS (o con él desactivado), sigue siendo un <nav> normal — solo que
     empieza colapsado y no hay forma de abrirlo; se prioriza que nunca deje
     el header roto por sobre un fallback sin JS para este caso puntual. */
  .solem-blog-nav__primary {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--solem-color-white);
    border-bottom: 1px solid var(--solem-color-gray-dark-100);
    box-shadow: 0 12px 24px -8px rgba(20, 33, 29, 0.18);
  }
  .solem-blog-nav__primary.is-open {
    display: block;
  }
  .solem-blog-nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 12px;
  }
  .solem-blog-nav__menu li {
    border-bottom: 1px solid var(--solem-color-gray-dark-100);
  }
  .solem-blog-nav__menu li:last-child {
    border-bottom: 0;
  }
  .solem-blog-nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
  }
}

/* ---------- Grid de tarjetas ---------- */

.solem-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.solem-blog-grid--related {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .solem-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .solem-blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tarjeta ----------
 * Misma receta que .solem-feature-card del kit (casos/artículos en Astro):
 * caja blanca con borde, radio 8px, media 16:10, cuerpo con padding 24px.
 * No se importa la clase del kit — se replican los valores a mano (ver
 * cabecera del archivo), extraídos de solem-ui-kit/dist/style.css. */

.solem-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--solem-color-white);
  border: 1px solid var(--solem-color-gray-dark-100);
  border-radius: 8px;
  overflow: hidden;
}
.solem-blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--solem-color-gray-dark-100);
}
.solem-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.solem-blog-card:hover .solem-blog-card__media img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .solem-blog-card__media img {
    transition: none;
  }
  .solem-blog-card:hover .solem-blog-card__media img {
    transform: none;
  }
}
.solem-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 24px;
}
.solem-blog-card__category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: var(--solem-font-size-text-xsmall);
  font-weight: 600;
  color: var(--solem-color-gray-dark-700);
  background: var(--solem-color-gray-dark-50);
  border: 1px solid var(--solem-color-gray-dark-100);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  margin: 0;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.solem-blog-card__category:hover {
  color: var(--solem-color-solem-600);
  border-color: var(--solem-color-solem-500);
  background: var(--solem-color-white);
}
.solem-blog-card__title {
  font: var(--solem-font-h5);
  margin: 0;
}
.solem-blog-card__title a {
  color: var(--solem-color-gray-dark-900);
  text-decoration: none;
}
.solem-blog-card__title a:hover {
  color: var(--solem-color-solem-500);
}
.solem-blog-card__excerpt {
  color: var(--solem-color-gray-dark-700);
  font: var(--solem-font-text-small);
  margin: 0;
}
.solem-blog-card__meta {
  font: var(--solem-font-text-xsmall);
  color: var(--solem-color-gray-dark-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.solem-blog-card__cta {
  font: var(--solem-font-link);
  font-size: var(--solem-font-size-text-small);
  color: var(--solem-color-solem-500);
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
}
.solem-blog-card__cta:hover {
  color: var(--solem-color-solem-600);
}
.solem-blog-card__cta-arrow {
  transition: transform 0.2s ease;
}
.solem-blog-card__cta:hover .solem-blog-card__cta-arrow,
.solem-blog-card__cta:focus-visible .solem-blog-card__cta-arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .solem-blog-card__cta-arrow {
    transition: none;
  }
  .solem-blog-card__cta:hover .solem-blog-card__cta-arrow,
  .solem-blog-card__cta:focus-visible .solem-blog-card__cta-arrow {
    transform: none;
  }
}

/* ---------- Destacado (home.php, página 1) ----------
 * Sin card: vive directo sobre el degradado del hero, sin borde/sombra/
 * fondo propio — solo la foto circular (mismo tratamiento que HeroMedia.astro
 * del kit) + el texto, alineado a la izquierda (ver __body más abajo). */

.solem-blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
/* La card destacada ahora vive dentro del hero (ver blog-hero.php): su foto
   pasa a usar el mismo tratamiento que la foto del hero principal de Astro
   — circular, con anillo punteado y dots de colores — en vez del recorte
   rectangular que tenía cuando vivía suelta en el grid blanco. */
.solem-blog-featured__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* --- Foto circular + anillo punteado + dots (réplica de HeroMedia.astro /
   hero-media.css del kit) --- */
.solem-blog-hero-media {
  --hm-ring-color: var(--solem-color-blue-200);
  position: relative;
  width: 100%;
  /* Tope de tamaño: sin él, la foto llena entera su columna del grid
     (.solem-blog-featured__media) y en pantallas anchas domina la card,
     dejando el texto chico en comparación. */
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.solem-blog-hero-media__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  animation: solem-blog-hero-media-spin 90s linear infinite;
}
.solem-blog-hero-media__ring circle {
  fill: none;
  stroke: var(--hm-ring-color);
  stroke-width: 1.2;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
.solem-blog-hero-media__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  /* cover, no contain: nuestra imagen es un recorte 16:9 (solem-hero), no un
     asset cuadrado pre-preparado — contain dejaría aire muerto visible. */
  object-fit: cover;
  display: block;
  z-index: 2;
}
.solem-blog-hero-media__dot {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--size, 10px);
  height: var(--size, 10px);
  border-radius: 50%;
  background: var(--color, var(--solem-color-solem-300));
  z-index: 3;
  transform: translate(-50%, -50%);
  animation: solem-blog-hero-media-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}
.solem-blog-hero-media__dot--drift {
  animation-name: solem-blog-hero-media-drift;
}
.solem-blog-hero-media__dot--pulse {
  animation-name: solem-blog-hero-media-pulse;
}
@keyframes solem-blog-hero-media-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes solem-blog-hero-media-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}
@keyframes solem-blog-hero-media-drift {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
  50% {
    transform: translate(-50%, -50%) translate(6px, -6px);
  }
}
@keyframes solem-blog-hero-media-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .solem-blog-hero-media__ring,
  .solem-blog-hero-media__dot {
    animation: none;
  }
}
.solem-blog-featured__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  text-align: left;
}
.solem-blog-featured__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.solem-blog-featured__badge {
  display: inline-flex;
  background: var(--solem-color-solem-500);
  color: var(--solem-color-white);
  font-size: var(--solem-font-size-text-xsmall);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.solem-blog-featured__eyebrow-category {
  display: inline-flex;
  align-items: center;
  color: var(--solem-color-gray-dark-700);
  background: var(--solem-color-gray-dark-50);
  border: 1px solid var(--solem-color-gray-dark-100);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--solem-font-size-text-xsmall);
  font-weight: 600;
}
.solem-blog-featured__title {
  font-size: var(--solem-font-size-h3);
  line-height: var(--solem-line-height-h3);
  font-weight: 700;
  color: var(--solem-color-gray-dark-900);
  margin: 0;
}
.solem-blog-featured:hover .solem-blog-featured__title {
  color: var(--solem-color-solem-500);
}
.solem-blog-featured__excerpt {
  color: var(--solem-color-gray-dark-700);
  font-size: var(--solem-font-size-text-regular);
  max-width: 52ch;
  margin: 0;
}
.solem-blog-featured__meta {
  color: var(--solem-color-gray-dark-500);
  font-size: var(--solem-font-size-text-xsmall);
  line-height: var(--solem-line-height-text-xsmall);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.solem-blog-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--solem-color-solem-500);
  font-size: var(--solem-font-size-text-small);
  font-weight: 600;
  margin-top: 4px;
  transition: color 0.2s;
}
/* Mismo hover que .solem-blog-card__cta (grid normal): el CTA es un <span>,
   no un link propio (toda la card es un <a>), así que el color se dispara
   desde el hover de la card, no del span mismo. */
.solem-blog-featured:hover .solem-blog-featured__cta {
  color: var(--solem-color-solem-600);
}
.solem-blog-featured:hover .solem-blog-card__cta-arrow {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .solem-blog-featured {
    grid-template-columns: 1fr;
  }
  .solem-blog-featured__body {
    padding: 24px;
  }
}

/* ---------- Barra de progreso de lectura ---------- */

.solem-blog-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
}
.solem-blog-reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--solem-color-solem-500);
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .solem-blog-reading-progress__bar {
    transition: none;
  }
}

/* ---------- Artículo ---------- */

.solem-blog-article__header {
  max-width: 76ch;
  margin: 0 0 32px;
  text-align: left;
}
.solem-blog-article__header h1 {
  margin-top: 8px;
  /* Mismo tracking que el resto de los H1 grandes del sitio
     (.solem-blog-hero h1) — sin esto cae al -2px genérico de la base
     tipográfica, más apretado que en cualquier otra página. */
  letter-spacing: -1.5px;
}

.solem-blog-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.solem-blog-article__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 96px;
}

/* Ahora es el cierre de TODO el artículo (después de la grid de dos
   columnas y de anterior/siguiente), no parte de la columna angosta de
   lectura — centrado, a todo el ancho del container. */
.solem-blog-article__back {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--solem-color-gray-dark-100);
  text-align: center;
}
.solem-blog-article__back a {
  color: var(--solem-color-solem-500);
  font-weight: 600;
  text-decoration: none;
}
.solem-blog-article__back a:hover {
  text-decoration: underline;
}

.solem-blog-prose {
  max-width: 76ch;
  font: var(--solem-font-text-regular);
  color: var(--solem-color-gray-dark-800);
}
/* Sin ">": algunos posts viejos vienen con contenido armado en Elementor
   (desactivado, pero el HTML guardado en post_content quedó envuelto en
   varios <div class="elementor..."> anidados) — un combinador directo acá
   nunca llega a los párrafos reales, varios niveles adentro, y se pierde
   todo el ritmo vertical. El lado izquierdo queda "*" a propósito (no
   importa qué tipo de elemento precede); el derecho se acota a bloques
   reales para no meterle margen a elementos inline (strong/em/a) que
   vengan pegados uno al lado del otro dentro de un párrafo. */
.solem-blog-prose * + :is(p, ul, ol, h2, h3, h4, blockquote, pre, table, figure, img, .wp-block-embed, .wp-block-buttons) {
  margin-top: 1.1em;
}
.solem-blog-prose h2,
.solem-blog-prose h3 {
  scroll-margin-top: 96px;
}
.solem-blog-prose h2 {
  font-size: var(--solem-font-size-h3);
  line-height: var(--solem-line-height-h3);
  margin-top: 1.6em;
}
.solem-blog-prose h3 {
  /* No usa el token --solem-font-size-h4 (22px) a propósito: junto al H2 de
     acá arriba (24px, token h3) queda un salto de solo 1.09× — casi plano,
     se lee como el mismo nivel con distinto peso, no dos niveles distintos.
     19px da 1.26×, sobre el mínimo de ~1.25× para que la jerarquía se
     perciba. No se toca el token compartido con el kit — esto es una
     excepción puntual de este contexto (subtítulos dentro de la prosa). */
  font-size: 19px;
  line-height: 24px;
  margin-top: 1.4em;
}
.solem-blog-prose img {
  /* max-width/height:auto pisa los atributos width/height fijos en HTML
     que traen las imágenes de posts viejos (ej. width="602" height="265")
     — sin esto, el navegador respeta ese tamaño fijo en vez de escalar la
     imagen al ancho real del contenido. */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin: 1.6em 0;
}
.solem-blog-prose a {
  color: var(--solem-color-solem-500);
  text-decoration: underline;
}
.solem-blog-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--solem-color-solem-500);
  color: var(--solem-color-gray-dark-700);
  font-style: italic;
}
.solem-blog-prose pre {
  background: var(--solem-color-gray-dark-900);
  color: var(--solem-color-gray-dark-50);
  padding: 16px 20px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13px;
}
.solem-blog-prose code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
}
.solem-blog-prose .wp-block-table {
  overflow-x: auto;
}
.solem-blog-prose table {
  width: 100%;
  border-collapse: collapse;
  font: var(--solem-font-text-small);
}
.solem-blog-prose th,
.solem-blog-prose td {
  padding: 10px 14px;
  border: 1px solid var(--solem-color-gray-dark-100);
  text-align: left;
}
.solem-blog-prose th {
  background: var(--solem-color-gray-dark-50);
  font-weight: 600;
}
.solem-blog-prose .wp-block-button__link {
  text-decoration: none;
  padding: 12px 24px;
  transition: background-color 0.15s ease;
}
.solem-blog-prose .wp-block-button__link:hover {
  background-color: var(--solem-color-solem-600) !important;
}
.solem-blog-prose .wp-block-embed {
  margin: 1.6em 0;
}
.solem-blog-prose .wp-block-embed iframe {
  width: 100%;
  border-radius: 12px;
}

/* ---------- Anterior / siguiente artículo ---------- */

.solem-blog-adjacent {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--solem-color-gray-dark-100);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.solem-blog-adjacent__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--solem-color-gray-dark-100);
  border-radius: 12px;
  text-decoration: none;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.solem-blog-adjacent__link:not(.solem-blog-adjacent__link--empty):hover {
  border-color: var(--solem-color-solem-500);
  background: var(--solem-color-gray-dark-50);
}
.solem-blog-adjacent__link--empty {
  border-color: transparent;
}
.solem-blog-adjacent__link--next {
  justify-content: flex-end;
  text-align: right;
}
.solem-blog-adjacent__arrow {
  flex: none;
  font-size: 20px;
  color: var(--solem-color-solem-500);
}
.solem-blog-adjacent__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.solem-blog-adjacent__label {
  font-size: var(--solem-font-size-text-xsmall);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--solem-color-gray-dark-500);
}
.solem-blog-adjacent__title {
  font: var(--solem-font-text-regular);
  font-weight: 600;
  color: var(--solem-color-gray-dark-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .solem-blog-adjacent {
    grid-template-columns: 1fr;
  }
  .solem-blog-adjacent__link--empty {
    display: none;
  }
}

/* ---------- Sidebar del artículo: bloque compartido ----------
 * Mismo patrón de caja (radio 16px, padding, borde) para TOC / compartir /
 * relacionados / CTA — da consistencia visual entre bloques distintos sin
 * duplicar la receta en cada uno. */

.solem-blog-aside-block {
  border: 1px solid var(--solem-color-gray-dark-100);
  border-radius: 16px;
  padding: 20px 22px;
}
.solem-blog-aside-block__title {
  font-size: var(--solem-font-size-text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--solem-color-gray-dark-600);
  margin: 0 0 14px;
}

/* ---------- Tabla de contenidos ---------- */

.solem-blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.solem-blog-toc__item--h3 {
  padding-left: 12px;
}
.solem-blog-toc__link {
  display: block;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font: var(--solem-font-text-small);
  color: var(--solem-color-gray-dark-600);
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}
.solem-blog-toc__link:hover {
  background: var(--solem-color-gray-dark-50);
  color: var(--solem-color-gray-dark-900);
}
.solem-blog-toc__link.is-active {
  border-left-color: var(--solem-color-solem-500);
  color: var(--solem-color-solem-600);
  font-weight: 600;
}
.solem-blog-toc__top {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 10px;
  font: var(--solem-font-text-small);
  font-weight: 600;
  color: var(--solem-color-gray-dark-500);
  text-decoration: none;
}
.solem-blog-toc__top:hover {
  color: var(--solem-color-solem-600);
}

/* ---------- Compartir ---------- */

.solem-blog-share__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.solem-blog-share__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--solem-color-gray-dark-100);
  background: var(--solem-color-white);
  color: var(--solem-color-gray-dark-700);
  cursor: pointer;
  padding: 0;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.solem-blog-share__button:hover {
  color: var(--solem-color-solem-500);
  border-color: var(--solem-color-solem-500);
}
.solem-blog-share__copy {
  position: relative;
}
.solem-blog-share__copy.is-copied {
  color: var(--solem-color-solem-600);
  border-color: var(--solem-color-solem-600);
}
.solem-blog-share__copy-check {
  font-size: 15px;
  font-weight: 700;
}

/* ---------- Relacionados (sidebar, compacto) ---------- */

.solem-blog-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.solem-blog-related__item {
  display: flex;
  gap: 12px;
}
.solem-blog-related__thumb {
  flex-shrink: 0;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--solem-color-gray-dark-100);
}
.solem-blog-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solem-blog-related__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.solem-blog-related__title {
  font: var(--solem-font-text-small);
  font-weight: 600;
  color: var(--solem-color-gray-dark-900);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.solem-blog-related__title:hover {
  color: var(--solem-color-solem-500);
}
.solem-blog-related__date {
  font: var(--solem-font-text-xsmall);
  color: var(--solem-color-gray-dark-500);
}

/* ---------- CTA del sidebar ---------- */

/* Card blanca + borde de marca, igual que sus vecinas del sidebar (TOC,
   compartir, relacionados) — antes era una plancha sólida solem-500 con
   botón blanco encima, y toda la tarjeta se leía como "un botón gigante"
   en vez de una tarjeta con un botón adentro. El color de marca queda
   solo en el borde y en el botón real. */
.solem-blog-aside-cta {
  border-color: var(--solem-color-solem-500);
}
.solem-blog-aside-cta__title {
  font-size: var(--solem-font-size-h5);
  line-height: var(--solem-line-height-h5);
  font-weight: 600;
  color: var(--solem-color-gray-dark-900);
  margin: 0 0 8px;
}
.solem-blog-aside-cta__text {
  font: var(--solem-font-text-small);
  color: var(--solem-color-gray-dark-700);
  margin: 0 0 16px;
}

/* ---------- Banner de contacto (fin del listado) ---------- */

.solem-blog-cta-banner {
  text-align: center;
  background: var(--solem-color-white);
  border: 1.5px solid var(--solem-color-solem-500);
  border-radius: 16px;
  padding: 48px 24px;
  margin-top: 56px;
}
.solem-blog-cta-banner__title {
  font-size: var(--solem-font-size-h3);
  line-height: var(--solem-line-height-h3);
  color: var(--solem-color-gray-dark-900);
  margin: 0 0 8px;
}
.solem-blog-cta-banner__text {
  color: var(--solem-color-gray-dark-700);
  max-width: 46ch;
  margin: 0 auto 24px;
}

@media (max-width: 960px) {
  .solem-blog-article__layout {
    grid-template-columns: 1fr;
  }
  .solem-blog-article__aside {
    position: static;
  }
  /* La tabla de contenidos pierde sentido angosta y apilada bajo el
     artículo — se prioriza no repetir la navegación in-page dos veces
     (el usuario ya scrollea linealmente en mobile). */
  .solem-blog-toc {
    display: none;
  }
}

/* ---------- Paginación ---------- */

.solem-blog-pagination {
  margin-top: 48px;
}
.solem-blog-pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.solem-blog-pagination a,
.solem-blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--solem-color-gray-dark-100);
  font: var(--solem-font-text-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--solem-color-gray-dark-700);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.solem-blog-pagination a:hover {
  border-color: var(--solem-color-solem-500);
  color: var(--solem-color-solem-600);
}
.solem-blog-pagination .current {
  background: var(--solem-color-solem-500);
  border-color: var(--solem-color-solem-500);
  color: var(--solem-color-white);
}

/* ---------- Cargar más ---------- */

.solem-blog-load-more {
  margin-top: 48px;
  text-align: center;
}
.solem-blog-load-more__button {
  border: 0;
  cursor: pointer;
}
.solem-blog-load-more__button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Botón ----------
 * Misma receta que .solem-button del kit: pastilla completa (radio 100px),
 * padding asimétrico (ajuste óptico del label) y sombra suave. */

.solem-blog-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 11.5px 24px 8.5px;
  border-radius: 100px;
  background: var(--solem-color-solem-500);
  color: var(--solem-color-white) !important;
  font: var(--solem-font-link);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 3px 5px rgba(79, 79, 79, 0.25);
  transition: all 0.2s;
}
.solem-blog-button:hover {
  background: var(--solem-color-solem-600);
}
/* ---------- 404 ---------- */

.solem-blog-404 {
  text-align: center;
  padding-top: 96px;
  padding-bottom: 64px;
}
.solem-blog-404 h1 {
  /* Mismo tracking que el resto de los H1 grandes del sitio
     (.solem-blog-hero h1) — sin esto cae al -2px genérico. */
  letter-spacing: -1.5px;
}
.solem-blog-404 p {
  margin-bottom: 32px;
  color: var(--solem-color-gray-dark-600);
}
.solem-blog-404 .solem-blog-404__code {
  font-family: "Overpass", sans-serif;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  color: var(--solem-color-solem-600);
  margin-bottom: 16px;
}
.solem-blog-404 .solem-blog-button {
  margin-top: 8px;
}

/* ---------- Recientes (404 sin resultado, búsqueda sin resultado) ---------- */

.solem-blog-recent-posts {
  margin-top: 32px;
  padding-top: 48px;
  border-top: 1px solid var(--solem-color-gray-dark-100);
}
.solem-blog-recent-posts__title {
  font-size: var(--solem-font-size-text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--solem-color-gray-dark-500);
  margin: 0 0 20px;
}
/* Cards más chicas que el grid principal: es una sugerencia secundaria
   (404 / sin resultados), no el contenido que vino a ver. Mismo componente
   .solem-blog-card, solo más compacto — sin duplicar el template-part. */
.solem-blog-recent-posts .solem-blog-grid {
  gap: 20px;
}
.solem-blog-recent-posts .solem-blog-card__body {
  padding: 16px;
  gap: 8px;
}
.solem-blog-recent-posts .solem-blog-card__title {
  font-size: var(--solem-font-size-text-regular);
  line-height: 1.3;
  font-weight: 700;
}
.solem-blog-recent-posts .solem-blog-card__excerpt {
  display: none;
}

/* ---------- Footer ----------
 * Misma receta que .solem-footer del kit: padding 64/48/32, grid
 * 1.6fr+3×1fr con gap 48px, logo a 120px, títulos de columna en mayúscula
 * con tracking, legal centrado, social como botones 32×32. */

.solem-blog-footer {
  background: var(--solem-color-gray-dark-900);
  color: var(--solem-color-gray-dark-300);
  margin-top: 64px;
}
.solem-blog-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 48px 32px;
}
.solem-blog-footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 40px;
}
.solem-blog-footer__logo {
  width: 120px;
  height: auto;
  margin-bottom: 8px;
}
.solem-blog-footer__address {
  font-style: normal;
  font: var(--solem-font-text-small);
  color: var(--solem-color-gray-dark-300);
  margin: 0;
}
.solem-blog-footer__phone {
  display: inline-block;
  margin-top: 4px;
  color: var(--solem-color-white);
  font: var(--solem-font-text-regular);
  text-decoration: none;
  transition: color 0.2s;
}
.solem-blog-footer__phone:hover {
  color: var(--solem-color-solem-300);
}
.solem-blog-footer__column-title {
  font: var(--solem-font-text-xsmall);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--solem-color-white);
  margin: 0 0 4px;
}
.solem-blog-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solem-blog-footer__link {
  font: var(--solem-font-text-small);
  color: var(--solem-color-gray-dark-300);
  text-decoration: none;
  transition:
    color 0.2s,
    font-weight 0.2s;
}
.solem-blog-footer__link:hover {
  color: var(--solem-color-white);
}
.solem-blog-footer__divider {
  border: 0;
  border-top: 1px solid var(--solem-color-gray-dark-700);
  margin: 0 0 24px;
}
.solem-blog-footer__legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0 0 24px;
  padding: 0;
}
.solem-blog-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.solem-blog-footer__copyright {
  font: var(--solem-font-text-small);
  color: var(--solem-color-gray-dark-400);
  margin: 0;
}
.solem-blog-footer__social {
  display: flex;
  gap: 12px;
}
.solem-blog-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--solem-color-gray-dark-300);
  transition: color 0.2s;
}
.solem-blog-footer__social-link:hover {
  color: var(--solem-color-white);
}
.solem-blog-footer__social-icon {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) no-repeat center / contain;
  mask: var(--icon-url) no-repeat center / contain;
}

@media (max-width: 900px) {
  .solem-blog-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .solem-blog-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .solem-blog-footer {
    margin-top: 48px;
  }
  .solem-blog-footer__inner {
    padding: 48px 24px 24px;
  }
  .solem-blog-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}