/* ============================================================================
   BLOG · lo que el núcleo pinta distinto de la librería
   ----------------------------------------------------------------------------
   Las tarjetas, la cabecera de artículo y los filtros usan las clases de la
   librería tal cual: los pintan bloques nuestros. Lo único que sale del núcleo
   con SU marcado es la paginación del bucle de consulta, y aquí se le da la
   pinta de `.c-pagination__link` sin tocar componentes.css.

   El núcleo escribe:
     <nav class="wp-block-query-pagination c-pagination">
       <a class="wp-block-query-pagination-previous">…</a>
       <div class="wp-block-query-pagination-numbers">
         <a class="page-numbers">1</a> <span class="page-numbers current">2</span>
         <span class="page-numbers dots">…</span>
       </div>
       <a class="wp-block-query-pagination-next">…</a>
     </nav>
   ========================================================================== */
.c-pagination.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  align-items: center;
  justify-content: center;
  margin-top: var(--wp--preset--spacing--60);
}

.c-pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

/* Cada enlace, como .c-pagination__link de la librería. Copiado, no heredado:
   CSS no tiene @extend, y un selector compartido con componentes.css se caería
   en la siguiente entrega de esa hoja. */
.c-pagination .page-numbers,
.c-pagination .wp-block-query-pagination-previous,
.c-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wp--custom--layout--tap);
  min-height: var(--wp--custom--layout--tap);
  padding: 0 var(--wp--preset--spacing--30);
  border: var(--wp--custom--border--width) solid transparent;
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--custom--typography--size--button);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.c-pagination a.page-numbers:hover,
.c-pagination .wp-block-query-pagination-previous:hover,
.c-pagination .wp-block-query-pagination-next:hover {
  background-color: var(--wp--custom--state--overlay-hover);
}

.c-pagination .page-numbers.current {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
}

.c-pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--muted);
}

/* La foto de portada del artículo, con la proporción de tarjeta. */
.c-post__media.wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Solo para lectores de pantalla: el título «Categorías» del filtro. La
   librería trae `.u-sr`; se repite aquí por si esa hoja cambia de nombre. */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Compartir el artículo (R52.1, 12-10-2026) ─────────────────────────────
   Botones de contorno pequeños, con icono de línea en el color del texto.
   Va entre el texto y «Sobre la autora». */
.c-share { margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent); }
.c-share__title { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted, currentColor); }
.c-share__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
.c-share__list li[hidden] { display: none; }
.c-share__btn {
	display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .45em 1em;
	border: 1px solid currentColor; border-radius: 999px; background: transparent;
	font: inherit; font-size: var(--wp--preset--font-size--small); line-height: 1.2;
	color: var(--wp--preset--color--primary); text-decoration: none; cursor: pointer;
}
/* Igual en los enlaces que en el botón «Copiar enlace»: `.cmp a:hover` (de la
   librería) y el :hover global de los enlaces ganaban a un selector de una
   sola clase y dejaban el texto azul oscuro sobre el fondo azul (13-10-2026). */
.c-share .c-share__btn:hover,
.c-share .c-share__btn:focus-visible { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); text-decoration: none; }
.c-share__icon { flex: none; width: 1.15em; height: 1.15em; }
.c-share__estado { min-height: 1.4em; margin: var(--wp--preset--spacing--20) 0 0; font-size: var(--wp--preset--font-size--small); }

/* ── Voy a la Psico al pie del artículo (R52.3) ───────────────────────────── */
.c-articulo-podcast__todos { margin: var(--wp--preset--spacing--50) 0 0; }

/* Versión solo iconos, debajo del índice lateral del artículo (escritorio).
   `.c-longread__index a` (plantilla.css) da a los enlaces del índice relleno y
   bloque: aquí se deshace. */
.c-share--compacto { margin: var(--wp--preset--spacing--50) 0 0; padding-block-start: var(--wp--preset--spacing--30); }
.c-share--compacto .c-share__title { margin-bottom: var(--wp--preset--spacing--20); }
.c-share--compacto .c-share__list { gap: var(--wp--preset--spacing--10); }
.c-longread__index .c-share--compacto .c-share__btn {
	display: inline-flex; justify-content: center; width: 40px; min-height: 40px; height: 40px; padding: 0;
	border-radius: 50%; border: 1px solid currentColor;
}
.c-longread__index .c-share--compacto .c-share__icon { width: 18px; height: 18px; }
.c-share--compacto .c-share__estado:empty { display: none; }
@container (max-width: 63.99rem) {
	.c-longread__index .c-share--compacto { display: none; }
}

/* Móvil: el índice es una barra pegada arriba; el relleno superior de la
   sección dejaba una franja blanca entre la cabecera y la barra (13-10-2026). */
@container (max-width: 63.99rem) {
	/* Tan específico como `main > .cmp:not(:first-child) > .cmp__inner` (libreria.css), que si no gana. */
	main > .cmp.c-longread > .c-longread__inner:has(> .c-longread__index) { padding-top: 0; }
}

/* ── Preguntas frecuentes dentro de un artículo (revisión del blog, 13-10-2026)
   El acordeón de las páginas va a sangre (acordeon.css); en la columna del
   artículo, las bandas se quedan dentro del texto y el «+» es más pequeño. */
.c-prose .wp-block-details.is-style-acordeon {
	--cds-faq-boton: 2.75rem;
	margin-inline: 0;
	padding-inline: var(--wp--preset--spacing--40);
}
.c-prose .c-accordion { margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
