/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · blog.css — índice del blog (/blog)
   Figma «/blog — Índice Desktop 1440 [PROPUESTA — sin copy aprobado]» (nodo 322:2).

   Se carga SOLO en el índice del blog (enqueue condicional en functions.php, `is_home()`).
   Todo por token. Prefijo BEM `blog-`.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.blog {
  /* Misma columna de lectura que el resto de páginas de texto del proyecto. */
  --blog-texto: 62rem;
}

.blog-texto {
  max-width: var(--blog-texto);
  margin-inline: auto;
}

/* ── B1 · Hero ────────────────────────────────────────────────────────────────────────── */
.blog-hero {
  background: var(--c-crema-calida);
  border-bottom: 1px solid var(--c-borde-calido);
  padding-block: var(--e-8);
}

.blog-hero h1 {
  font-size: var(--t-h1);
  margin-bottom: var(--e-4);
}

/* Marcador de copy pendiente: solo lo ve quien puede editar (ver b1-hero.php). Se pinta en
   coral, como en el Figma, para que no se confunda nunca con texto publicado. */
.blog-hero__marcador {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border: 1px dashed var(--c-acento);
  border-radius: var(--r-sm);
  background: var(--c-error-fondo);
  color: var(--c-acento);
  font-size: var(--t-tarjeta);
}

/* ── Hueco de imagen ──────────────────────────────────────────────────────────────────
   Entrada sin imagen destacada: caja con la proporción correcta y la etiqueta del Figma.
   Es deliberado que se vea: falta un dato y hay que notarlo. */
.blog-foto__hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--c-crema-calida);
  color: var(--c-texto-suave);
  font-size: var(--t-muletilla);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
}

/* ── B2 · Entrada destacada ───────────────────────────────────────────────────────────── */
.blog-destacada {
  padding-block: var(--e-8);
}

.blog-destacada__cols {
  display: grid;
  grid-template-columns: minmax(0, 420fr) minmax(0, 548fr);   /* las medidas del Figma */
  gap: var(--e-8);
  align-items: center;
}

.blog-destacada__foto {
  display: block;
  aspect-ratio: 42 / 26;                                       /* 420 × 260 del Figma */
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-crema-calida);
}

.blog-destacada__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-destacada__etiqueta {
  margin: 0 0 var(--e-2);
  font-size: var(--t-muletilla);
  font-weight: var(--peso-extra);
  letter-spacing: 0.08em;
  color: var(--c-acento);
}

.blog-destacada__titulo {
  font-size: var(--t-h3);
  margin: 0 0 var(--e-4);
}

.blog-destacada__titulo a,
.blog-tarjeta__titulo a {
  color: var(--c-navy);
  text-decoration: none;
}

.blog-destacada__titulo a:hover,
.blog-tarjeta__titulo a:hover {
  color: var(--c-acento);
}

.blog-destacada__entradilla {
  color: var(--c-texto-suave);
  margin-bottom: var(--e-5);
}

.blog-leer {
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-extra);
  text-decoration: none;
}

.blog-leer:hover {
  text-decoration: underline;
}

/* ── B3 · Rejilla ─────────────────────────────────────────────────────────────────────── */
.blog-rejilla {
  padding-bottom: var(--e-8);
}

.blog-rejilla__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-5);
}

.blog-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: var(--e-4);
}

.blog-tarjeta__foto {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-crema-calida);
  margin-bottom: var(--e-4);
}

.blog-tarjeta__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-tarjeta__titulo {
  font-size: var(--t-h5);
  margin: 0 0 var(--e-3);
}

.blog-tarjeta__entradilla {
  font-size: var(--t-tarjeta);
  color: var(--c-texto-suave);
  /* Empuja el «Read →» al fondo: los enlaces de las tres tarjetas de una fila quedan a la
     misma altura aunque una entradilla ocupe una línea más. */
  flex: 1 1 auto;
  margin-bottom: var(--e-4);
}

.blog-tarjeta__leer {
  align-self: flex-start;
}

.blog-rejilla__vacio {
  color: var(--c-texto-suave);
}

/* ── Paginación ───────────────────────────────────────────────────────────────────────── */
.blog-paginacion {
  margin-top: var(--e-7);
}

.blog-paginacion .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: center;
}

.blog-paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding-inline: var(--e-3);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-sm);
  background: var(--c-superficie);
  color: var(--c-navy);
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-semi);
  text-decoration: none;
}

.blog-paginacion a.page-numbers:hover {
  border-color: var(--c-acento);
  color: var(--c-acento);
}

.blog-paginacion .page-numbers.current {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-blanco);
  font-weight: var(--peso-extra);
}

.blog-paginacion .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--c-texto-suave);
}

/* ── B4 · Conversión ──────────────────────────────────────────────────────────────────── */
.blog-cta {
  padding-block: var(--e-8);
  text-align: center;
}

.blog-cta h2 {
  margin-top: 0;
}

.blog-cta__texto {
  max-width: var(--blog-texto);
  margin-inline: auto;
  margin-bottom: var(--e-5);
  color: var(--c-texto-navy);
}

.blog-cta .boton {
  padding-block: var(--e-4);
}

/* ── Tablet ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 62rem) {
  .blog-rejilla__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .blog-destacada__cols {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }
}

/* ── Móvil ────────────────────────────────────────────────────────────────────────────
   Una columna. Las rejillas usan `minmax(0, 1fr)`, así que ninguna imagen ni título largo
   puede empujar el ancho: a 390 px no hay scroll horizontal. */
@media (max-width: 40rem) {
  .blog-hero,
  .blog-destacada,
  .blog-cta {
    padding-block: var(--e-7);
  }

  .blog-rejilla__grid {
    grid-template-columns: 1fr;
  }

  .blog-cta .boton {
    display: flex;
    width: 100%;
  }
}

/* ══ ENTRADA DE BLOG (single.php) ══════════════════════════════════════════════════════
   Artículo + barra lateral pegada. La barra se apoya en la cabecera sticky del sitio, que
   mide --altura-cabecera. */

.entrada { padding-block: var(--e-6) var(--e-8); }

.entrada__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--e-7);
  align-items: start;
}

/* El <aside> DEBE ocupar toda la altura de la fila. `position: sticky` solo se desplaza
   dentro de su padre: con `align-items: start` el aside medía lo mismo que su contenido, el
   hijo no tenía recorrido y la barra se marchaba con el scroll en vez de quedarse (medido:
   1.679 px fuera de pantalla). Estirándolo, el hijo tiene toda la columna por la que
   deslizarse. Es el fallo clásico del sticky y no se ve hasta que se mide. */
.entrada__lateral { align-self: stretch; }

.entrada__cabecera { margin-bottom: var(--e-5); }
.entrada__titulo { margin: 0 0 var(--e-3); }
.entrada__meta { margin: 0; color: var(--c-texto-suave); font-size: var(--t-muletilla); }

.entrada__portada { margin: 0 0 var(--e-6); }
.entrada__portada img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }

/* El cuerpo hereda de .articulo__cuerpo; aquí solo se suelta el ancho, porque la columna
   ya lo limita y encadenar los dos topes dejaría el texto en una tira estrecha. */
.entrada__cuerpo { max-width: none; }

/* ── Barra lateral ─────────────────────────────────────────────────────────────────────
   `sticky` va en el hijo, no en el <aside>: el aside es el ítem de la rejilla y con
   `align-items: start` ya tiene la altura de su contenido, que es lo que sticky necesita
   para tener recorrido.

   El `max-height` + `overflow-y: auto` son la red de seguridad que pediste: si algún día la
   barra crece más que la ventana, scrollea por dentro en vez de dejar el último bloque
   —el formulario— fuera de alcance para siempre. Con el contenido de hoy no llega a
   activarse en una pantalla normal; está por si crece. */
.lateral__pegado {
  position: sticky;
  top: calc(var(--altura-cabecera) + var(--e-4));
  max-height: calc(100vh - var(--altura-cabecera) - var(--e-6));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  /* Sitio para que el foco del teclado no quede pegado al borde al scrollear por dentro. */
  padding-right: 2px;
  scrollbar-width: thin;
}

.lateral__bloque {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  overflow: hidden;   /* para que la cabecera coral respete el radio de la caja */
}

/* Cabecera de cada bloque: banda coral a sangre, centrada, pegada al borde superior de la
   caja. En la primera versión el título era texto suelto dentro del padding y no se
   distinguía del contenido (Fernando: «ese titular no se nota»). Aquí manda como encabezado.
   Va en --c-acento y no en --c-coral: el de marca sobre blanco no llega al 4,5:1 que exige
   AA en texto pequeño; es la trampa del coral que documenta el mapa del proyecto. */
.lateral__cabecera {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  background: var(--c-acento);
  color: var(--c-blanco);
  font-size: var(--t-muletilla);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.02em;
}

.lateral__contenido { padding: var(--e-4); }

.lateral__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }

.lateral__lista a {
  display: block;
  padding-block: 4px;   /* caja táctil de 24 px (WCAG 2.2) sin abrir la lista */
  color: var(--c-tinta);
  text-decoration: none;
  font-weight: var(--peso-semi);
  line-height: 1.35;
}

.lateral__lista a:hover { color: var(--c-acento); text-decoration: underline; }

/* Hubs con icono: el SVG y el rótulo en fila, alineados por la primera línea. */
.lateral__lista--hubs a { display: flex; align-items: center; gap: var(--e-3); }
.lateral__icono { flex: 0 0 auto; color: var(--c-acento); }

.lateral__contacto { display: block; text-align: center; width: 100%; margin-top: var(--e-4); }

/* ── Caja de conversión ── */
.lateral__cta { background: var(--c-navy); border-color: var(--c-navy); }
.lateral__cta-texto {
  margin: 0 0 var(--e-4);
  color: var(--c-texto-navy);
  font-size: var(--t-muletilla);
  line-height: 1.5;
}
.lateral__cta-boton { display: block; text-align: center; width: 100%; }

@media (max-width: 1100px) {
  /* Una sola columna: la barra baja bajo el artículo y deja de pegarse. Un sticky en móvil
     robaría media pantalla al texto, que es lo que la persona vino a leer. */
  .entrada__cols { grid-template-columns: 1fr; gap: var(--e-6); }
  .lateral__pegado { position: static; max-height: none; overflow: visible; }
}

/* ── Relacionadas al final del artículo ────────────────────────────────────────────────── */
.relacionadas { margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--c-borde); }
.relacionadas__titulo { margin: 0 0 var(--e-5); font-size: var(--t-tarjeta); font-weight: 700; }
.relacionadas__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.relacionadas__enlace { display: block; text-decoration: none; color: var(--c-tinta); }
.relacionadas__enlace img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); margin-bottom: var(--e-3); display: block; }
.relacionadas__rotulo { font-weight: var(--peso-semi); line-height: 1.35; }
.relacionadas__enlace:hover .relacionadas__rotulo { color: var(--c-acento); text-decoration: underline; }

/* ── Listas de resultados: búsqueda y archivos ─────────────────────────────────────────── */
.busqueda { padding-block: var(--e-6) var(--e-8); }
.busqueda__titulo { margin: 0 0 var(--e-3); }
.busqueda__cuenta { margin: 0 0 var(--e-6); color: var(--c-texto-suave); }
.busqueda__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-5); max-width: var(--ancho-texto); }
.busqueda__item { padding-bottom: var(--e-5); border-bottom: 1px solid var(--c-borde); }
.busqueda__item-titulo { margin: 0 0 var(--e-2); font-size: var(--t-tarjeta); font-weight: 700; line-height: 1.3; }
.busqueda__item-titulo a { color: var(--c-navy); text-decoration: none; }
.busqueda__item-titulo a:hover { color: var(--c-acento); text-decoration: underline; }
.busqueda__item-texto { margin: 0; color: var(--c-texto-suave); line-height: 1.5; }
.busqueda__vacio { max-width: var(--ancho-texto); line-height: 1.6; }

@media (max-width: 700px) {
  .relacionadas__lista { grid-template-columns: 1fr; gap: var(--e-5); }
}