/*
Theme Name: Caracol Nocturno
Theme URI: https://caracolnocturno.com
Author: Tu nombre
Description: Tema de bloques a medida para la revista de poesía y cultura Caracol Nocturno.
Version: 1.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: caracol-nocturno
*/

/* Footer siempre al fondo de la ventana en páginas con poco contenido.
   El truco de margin-top:auto en el footer funciona dentro de un flex
   column aunque haya varios bloques hermanos antes (header + contenido),
   sin necesitar una única etiqueta <main> que envuelva todo. */
html {
  height: 100%;
}
body {
  min-height: 100%;
}
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wp-site-blocks footer.wp-block-template-part {
  margin-top: auto;
}
/* ===================================================================
   NAV DEL HEADER — rediseño completo
   Sustituye TODO el bloque anterior de:
     .nav-color-inicio a, .nav-color-poesia a, .nav-color-relatos a,
     .nav-color-cultura a, .nav-color-entrevistas a { ... píldoras ... }
   y sus estados :hover / .current-menu-item asociados.

   Concepto: texto neutro en crema (nunca cambia de color entre
   categorías) + una pequeña mancha de tinta con la forma de una gota,
   del color de la categoría, que aparece bajo la palabra al pasar el
   ratón o en la página actual. Sin píldora, sin fondo, sin borde.

   CORREGIDO (2 cambios sobre la versión que ya tenías pegada):
   1) Todas las reglas llevan el prefijo "header " para que apliquen
      SOLO al nav del Header — el footer reutiliza las mismas clases
      (nav-color-poesia, nav-color-relatos...) en su columna
      "Secciones", y sin este acotamiento el diseño se filtraba
      también ahí.
   2) Relatos y Cultura pasan a usar las variantes "-light"
      (--amaranth-light, --honey-bronze-light), igual que ya hacían
      Poesía y Entrevistas — con el valor REAL de --yale-blue
      (#006D77, un teal medio, no un azul marino oscuro), las 4
      categorías normales tenían contraste débil, no solo 2.
   =================================================================== */

header .wp-block-navigation-item__content {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 4px 14px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(253, 246, 238, 0.7);
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color 0.2s ease;
}

/* La mancha de tinta — oculta por defecto */
header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 6px;
  transform: translateX(-50%);
  background-color: var(--accent, var(--wp--preset--color--cream));
  border-radius: 60% 40% 55% 45% / 60% 50% 50% 40%;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Color de la mancha, por categoría — las 4 usan la variante "-light" */
header .nav-color-poesia .wp-block-navigation-item__content { --accent: var(--wp--preset--color--teal-light); }
header .nav-color-relatos .wp-block-navigation-item__content { --accent: var(--wp--preset--color--amaranth-light); }
header .nav-color-cultura .wp-block-navigation-item__content { --accent: var(--wp--preset--color--honey-bronze-light); }
header .nav-color-entrevistas .wp-block-navigation-item__content { --accent: var(--wp--preset--color--baltic-blue-light); }
header .nav-color-inicio .wp-block-navigation-item__content { --accent: var(--wp--preset--color--cream); }

/* Estado hover / foco de teclado */
header .wp-block-navigation-item__content:hover,
header .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--cream);
}
header .wp-block-navigation-item__content:hover::after,
header .wp-block-navigation-item__content:focus-visible::after {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.2);
}

/* Accesibilidad: contorno de foco visible al navegar con teclado */
header .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--wp--preset--color--cream);
  outline-offset: 4px;
  border-radius: 2px !important;
}

/* Página actual — misma mancha, siempre visible, sin necesitar hover */
header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--cream);
}
header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.2);
}

/* El icono de búsqueda del header es transparente, no lleva el Amaranth por defecto */
.search-icon-header .wp-block-search__button {
  background-color: transparent !important;
  color: var(--wp--preset--color--cream) !important;
}
.search-icon-header .wp-block-search__button:hover {
  background-color: rgba(237, 246, 249, 0.1) !important;
}

/* Fuerza el reparto equitativo de las 3 columnas del footer */
.footer-col {
  flex: 1 1 0px !important;
  min-width: 0;
}

.footer-col .wp-block-social-links {
  min-width: fit-content;
  flex-shrink: 0;
}

/* Separador y fila inferior del footer a ancho completo */
.footer-separator-full {
  width: 100% !important;
  max-width: none !important;
  border-top-width: 0.5px !important;
  opacity: 0.3;
}

.footer-bottom-row {
  width: 100% !important;
  max-width: none !important;
}
.footer-bottom-row > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
/* Fuerza que la fila de columnas del footer ocupe todo el ancho disponible,
   venciendo el límite de "ancho de contenido" que WordPress aplica por defecto */
footer .footer-row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.footer-bottom-row hr.wp-block-separator {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 1px !important;
  min-height: 1px !important;
  border: none !important;
  background-color: rgba(237, 246, 249, 0.12) !important;
}


/* Cabecera de sección (Lo último, Sección Poesía, Entrevistas&Relatos)
   Evita que la barra y el texto (bar + título/subtítulo) se separen
   por el justify-content:space-between que WordPress aplica por defecto
   a este contenedor interno */
.section-title-group {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 16px !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
}
.section-title-group > * {
  flex: 0 0 auto !important;
}

.section-bar {
  width: 3px;
  height: 24px !important;
  flex-shrink: 0;
  align-self: flex-start;
}

.section-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  width: fit-content;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none !important;
}
.section-link a {
  text-decoration: none !important;
  color: inherit;
}

/* Padding lateral + ancho máximo estándar para todas las secciones de la Home,
   replicando el "maxWidth: 1440px, padding: 0 80px" del diseño original de Figma Make */
.section-container {
  max-width: 1440px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Contenedor "de paso": neutraliza su propio padding/max-width para
   que los hijos (cabecera y grid) apliquen .section-container real
   sin duplicar el centrado cuando hay un Grupo intermedio envolviéndolos.
   Reutilizable en futuras secciones con la misma anidación
   (Entrevistas & Relatos, etc.) */
.section-passthrough {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fuerza la disposición en grid de 3 columnas para "Lo último",
   ya que el editor no expone el control de columnas para este bloque */
.lo-ultimo-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 900px) {
  .lo-ultimo-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-category-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  width: fit-content;
}
.card-category-tag a {
  text-decoration: none;
  color: inherit;
}

.category-poesia .card-category-tag {
  color: var(--wp--preset--color--teal);
  background-color: rgba(31, 110, 100, 0.1);
}
.category-relatos .card-category-tag {
  color: var(--wp--preset--color--amaranth);
  background-color: rgba(168, 83, 50, 0.1);
}
.category-cultura .card-category-tag {
  color: var(--wp--preset--color--honey-bronze);
  background-color: rgba(201, 143, 43, 0.12);
}
.category-entrevistas .card-category-tag {
  color: var(--wp--preset--color--baltic-blue);
  background-color: rgba(62, 92, 99, 0.1);
}

/* Fecha y autor en tarjetas — Gris texto, sin subrayado en el nombre */
.wp-block-post-date,
.wp-block-post-author-name {
  color: #5C6B6E;
}
.wp-block-post-author-name a {
  text-decoration: none;
  color: inherit;
}

/* Sección Poesía — fondo beige, padding vertical controlado por CSS */
.seccion-poesia {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Columna de título+subtítulo en Cabecera de sección (ajuste compacto) */
.section-title-text h2 {
  margin: 0 0 4px !important;
}
.section-title-text p {
  margin: 0 !important;
}

/* Grid de fragmentos de poema — Sección Poesía */
.seccion-poesia-grid {
  gap: 40px !important;
}
.poema-fragmento {
  border-left: 3px solid var(--wp--preset--color--teal);
  padding-left: 28px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.poema-fragmento-texto {
  font-family: "Lora", serif;
  font-style: italic;
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.025rem;
  line-height: 1.75;
  margin: 0 0 24px !important;
}
.poema-fragmento-autor {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--wp--preset--color--yale-blue);
  letter-spacing: 0.02em;
  margin: 0 0 3px !important;
}
.poema-fragmento-coleccion {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--wp--preset--color--text-muted);
  margin: 0 !important;
}

.poema-fragmento-coleccion strong {
  font-style: normal;
  font-weight: 400;
}

/* Línea fina bajo la cabecera de sección, contenida exactamente
   dentro del padding lateral (no se desborda hacia los bordes) */
.section-header {
  position: relative;
  padding-bottom: 20px !important;
}
.section-header::after {
  content: "";
  position: absolute;
  left: 80px;
  right: 80px;
  bottom: 0;
  border-bottom: 1px solid rgba(0, 109, 119, 0.12);
}

/* Poesía no lleva línea de separación bajo su cabecera */
.seccion-poesia .section-header::after {
  display: none;
}

/* Tarjetas de "Lo último" — fondo blanco + sombra sutil,
   igual que el diseño original de Figma Make (#fff, no el
   crema de fondo de la sección) */
.lo-ultimo-card {
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 109, 119, 0.06);
}
.lo-ultimo-card-content {
  padding: 20px 20px 24px;
}

/* Imagen destacada de las tarjetas de "Lo último" — fuerza aspect
   ratio 16:10 exacto (el panel de WordPress solo ofrece 3:2, que es
   ligeramente distinto), sin padding, a sangre en la tarjeta */
.lo-ultimo-card .wp-block-post-featured-image {
  margin: 0 !important;
  margin-bottom: 0 !important;
  display: block;
}

.lo-ultimo-card .wp-block-post-featured-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Tarjetas de "Lo último" — espaciado interno controlado por flex+gap,
   anulando los márgenes por defecto de WordPress en cada elemento hijo
   (categoría, título, fila fecha/autor), igual que el diseño original */
.lo-ultimo-card-content {
  padding: 20px 20px 24px;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lo-ultimo-card-content > * {
  margin: 0 !important;
}

/* La tarjeta en sí no lleva padding (para que la imagen vaya a sangre);
   solo el bloque de texto interior (.lo-ultimo-card-content) lo aplica */
.lo-ultimo-card {
  padding: 0 !important;
}

/* Contenedor de tarjetas Entrevistas & Relatos */
.entrevistas-relatos-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.entrevista-relato-card {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 109, 119, 0.06);
  gap: 0 !important;
}

/* La columna de la imagen se convierte en el contenedor de referencia
   para el posicionamiento absoluto de la imagen; por defecto en CSS
   Grid, los items ya se estiran (align-items: stretch) a la altura
   real de la fila, que ahora la decide solo el texto */
.entrevista-relato-card > .wp-block-column:first-child {
  position: relative !important;
  overflow: hidden !important;
}

/* La imagen se saca del flujo normal (position: absolute) para que
   NO participe en el cálculo de altura de la fila del grid — así la
   fila mide lo que mide el texto, y la imagen solo rellena ese hueco */
.entrevista-relato-imagen {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
}
.entrevista-relato-imagen img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

.entrevista-relato-categoria {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  width: fit-content;
  margin: 32px 36px 0 !important;
}
.entrevista-relato-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 12px 36px 0 !important;
}
.entrevista-relato-extracto {
  font-family: "Lora", serif;
  color: #4E6367;
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 12px 36px 0 !important;
}
.entrevista-relato-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 109, 119, 0.08);
  margin: 12px 36px 32px !important;
}

/* Color de categoría por tipo, en tarjetas de Entrevistas & Relatos */
.entrevista-relato-categoria {
  color: var(--wp--preset--color--baltic-blue);
  background-color: rgba(62, 92, 99, 0.1);
}
.entrevista-cat-relatos {
  color: var(--wp--preset--color--amaranth) !important;
  background-color: rgba(168, 83, 50, 0.1) !important;
}

/* Fecha y autor en tarjetas de "Lo último" — cada uno a un extremo */
.lo-ultimo-card-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  width: 100%;
}

/* Autor y fecha en tarjetas de Entrevistas & Relatos — mismo tratamiento
   de Gris texto que "Lo último", tamaño pequeño y consistente */
.entrevista-relato-autor,
.entrevista-relato-fecha {
  color: var(--wp--preset--color--text-muted);
  font-size: 0.82rem;
  font-family: "Manrope", sans-serif;
  margin: 0 !important;
}

/* ===== CTA Suscripción ===== */

.cta-suscripcion {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.cta-suscripcion-descripcion strong {
  font-style: normal !important;
  font-weight: 400 !important;
}

.cta-suscripcion-grid {
  align-items: center !important;
  gap: 64px !important;
}

/* Columna de texto */
.cta-suscripcion-etiqueta {
  color: rgba(237, 246, 249, 0.65) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-family: "Manrope", sans-serif !important;
  margin: 0 0 16px !important;
}
.cta-suscripcion-titulo {
  color: var(--wp--preset--color--cream) !important;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  font-family: "Manrope", sans-serif !important;
  margin: 0 0 16px !important;
}
.cta-suscripcion-descripcion {
  font-family: "Lora", serif !important;
  font-style: italic !important;
  color: rgba(237, 246, 249, 0.8) !important;
  font-size: 0.975rem !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}
/* Columna del formulario MailPoet — clases reales del plugin */
.cta-suscripcion-form-col .mailpoet_form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.cta-suscripcion-form-col .mailpoet_paragraph {
  margin: 0 !important;
}
.cta-suscripcion-form-col label {
  color: rgba(237, 246, 249, 0.8) !important;
  font-size: 0.8rem !important;
  font-family: "Manrope", sans-serif !important;
  letter-spacing: 0.03em !important;
}
.cta-suscripcion-form-col input.mailpoet_text {
  width: 100% !important;
  padding: 14px 18px !important;
  background-color: rgba(237, 246, 249, 0.1) !important;
  border: 1px solid rgba(237, 246, 249, 0.35) !important;
  color: var(--wp--preset--color--cream) !important;
  font-size: 0.9rem !important;
  font-family: "Manrope", sans-serif !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.cta-suscripcion-form-col input.mailpoet_text::placeholder {
  color: rgba(237, 246, 249, 0.5) !important;
}
.cta-suscripcion-form-col input.mailpoet_submit {
  width: 100% !important;
  background-color: var(--wp--preset--color--yale-blue) !important;
  color: var(--wp--preset--color--cream) !important;
  border: none !important;
  padding: 14px 28px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-family: "Manrope", sans-serif !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.cta-suscripcion-form-col input.mailpoet_submit:hover {
  background-color: #003A3E !important;
}
/* Botón de envío del newsletter contrasta mejor en Yale Blue que en un
   segundo tono de Amaranth apilado sobre el propio fondo Amaranth del
   bloque (evita "amaranth sobre amaranth"); si el bloque cambia de color
   en el editor de WP, revisar que este contraste se mantenga. */

.cta-suscripcion-nota {
  color: rgba(237, 246, 249, 0.5) !important;
  font-size: 0.72rem !important;
  font-family: "Manrope", sans-serif !important;
  margin: 8px 0 0 !important;
}

/* Footer: enlaces de Secciones atenuados por defecto, con un punto
   de color delante; el color completo solo aparece en hover
   (replica el comportamiento de Footer.tsx) */
.footer-col .nav-color-poesia a,
.footer-col .nav-color-relatos a,
.footer-col .nav-color-cultura a,
.footer-col .nav-color-entrevistas a {
  color: rgba(237, 246, 249, 0.72) !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-col .nav-color-poesia a::before,
.footer-col .nav-color-relatos a::before,
.footer-col .nav-color-cultura a::before,
.footer-col .nav-color-entrevistas a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.footer-col .nav-color-poesia a::before {
  background-color: var(--wp--preset--color--teal-light);
}
.footer-col .nav-color-relatos a::before {
  background-color: var(--wp--preset--color--amaranth-light);
}
.footer-col .nav-color-cultura a::before {
  background-color: var(--wp--preset--color--honey-bronze-light);
}
.footer-col .nav-color-entrevistas a::before {
  background-color: var(--wp--preset--color--baltic-blue-light);
}

/* Antes el hover coloreaba el texto con el color de categoría — Teal y
   Baltic Blue quedaban invisibles sobre el fondo Yale Blue del footer,
   igual que en el Header. El punto ya lleva el color; el texto en hover
   solo pasa a crema pleno (de 0.72 a 1 de opacidad), siempre legible. */
.footer-col .nav-color-poesia a:hover,
.footer-col .nav-color-relatos a:hover,
.footer-col .nav-color-cultura a:hover,
.footer-col .nav-color-entrevistas a:hover {
  color: var(--wp--preset--color--cream) !important;
}

/* Marca en el footer — antes era H1 (semánticamente incorrecto,
   duplicaba el H1 del Header); ahora es párrafo con el mismo estilo */
.footer-brand p:first-child {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 4px !important;
  color: var(--wp--preset--color--cream);
}

/* Placeholder del logo (pendiente el SVG real del caracol) — círculo +
   bloque de texto como 2 elementos en fila con flexbox simple. El
   bloque de texto (footer-brand-texto) agrupa las 2 frases, que siguen
   apiladas dentro de él con su flujo normal — así no dependemos de
   floats ni de calcular alturas a ciegas. */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-logo {
  flex-shrink: 0;
  width: 52px;  /* antes: 40px */
  height: 52px; /* antes: 40px */
  display: block;
}
.footer-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.footer-brand-texto {
  display: flex;
  flex-direction: column;
}

/* ===== Hero Carousel ===== */

.hero-carousel {
  position: relative;
  overflow: hidden;
  height: 600px;
  margin-top: 64px; /* header fijo */
}

.hero-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Cada diapositiva ocupa TODO el espacio del carrusel, apiladas
   unas sobre otras; solo la que tenga is-active se ve */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--wp--preset--color--yale-blue);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
/* Respaldo: mientras el JS no ha cargado (o si falla), muestra
   siempre la primera diapositiva por defecto */
.hero-carousel-track .hero-slide:first-child {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 46, 50, 0.85) 40%,
    rgba(0, 46, 50, 0.3) 100%
  );
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 72px;
  box-sizing: border-box;
}
.hero-slide-content > * {
  max-width: 620px;
}

.hero-slide-category {
  display: inline-block;
  color: var(--wp--preset--color--cream);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 20px;
  font-family: "Manrope", sans-serif;
  width: fit-content;
}

.hero-slide-title {
  color: var(--wp--preset--color--cream);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  font-family: "Manrope", sans-serif;
}

.hero-slide-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-slide-divider {
  width: 32px;
  height: 1px;
  flex-shrink: 0;
}
.hero-slide-author {
  color: rgba(237, 246, 249, 0.8);
  font-size: 0.875rem;
  font-family: "Manrope", sans-serif;
}
.hero-slide-excerpt {
  color: rgba(237, 246, 249, 0.4);
  font-size: 0.8rem;
  font-family: "Manrope", sans-serif;
}

/* ===== Hero Carousel — título y autor clicables ===== */
.hero-slide-title-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.hero-slide-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
a.hero-slide-author {
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: rgba(237, 246, 249, 0.8);
}
a.hero-slide-author:hover {
  color: var(--wp--preset--color--cream);
}

/* Flechas de navegación */
.hero-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(237, 246, 249, 0.12);
  border: 1px solid rgba(237, 246, 249, 0.2);
  color: var(--wp--preset--color--cream);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.hero-carousel-arrow:hover {
  background: rgba(237, 246, 249, 0.22);
}
.hero-carousel-prev {
  left: 32px;
}
.hero-carousel-next {
  right: 32px;
}

/* Puntos indicadores */
.hero-carousel-dots {
  position: absolute;
  bottom: 28px;
  right: 80px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}
.hero-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(237, 246, 249, 0.35);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.hero-carousel-dot.is-active {
  width: 24px;
  background: var(--wp--preset--color--teal);
}

/* Contador de slide */
.hero-carousel-counter {
  position: absolute;
  bottom: 28px;
  left: 80px;
  z-index: 3;
  color: rgba(237, 246, 249, 0.5);
  font-size: 0.75rem;
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.1em;
}

/* ===== Entrevistas & Relatos (tarjetas fijas) — tarjeta completa clicable ===== */
.entrevista-relato-card {
  position: relative; /* ya debería estar puesto por el gotcha del grid, confirma que sigue */
}
.entrevista-relato-titulo a {
  color: inherit;
  text-decoration: none;
}
.entrevista-relato-titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.entrevista-relato-card:hover {
  box-shadow: 0 8px 32px rgba(0, 109, 119, 0.11);
  transition: box-shadow 0.25s;
}

/* Autor por encima del overlay, para que su clic sea independiente */
.entrevista-relato-autor a {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}
.entrevista-relato-autor a:hover {
  color: var(--wp--preset--color--teal);
}

/* ===== Sección Poesía (Home) — autor clicable ===== */
.poema-fragmento-autor a {
  color: inherit;
  text-decoration: none;
}
.poema-fragmento-autor a:hover {
  color: var(--wp--preset--color--teal);
}

/* ===== Poema Individual — Cabecera (breadcrumb + compartir) ===== */
.poema-cabecera-barra {
  border-bottom: 1px solid rgba(0, 109, 119, 0.1);
  background-color: #FFDDD2;
}
.poema-cabecera-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.poema-cabecera-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}
.poema-cabecera-volver {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4E6367;
  text-decoration: none;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  transition: color 0.2s;
}
.poema-cabecera-volver:hover {
  color: #006D77;
}
.poema-cabecera-sep {
  color: #C9A895;
  font-size: 0.75rem;
}
.poema-cabecera-actual {
  color: #006D77;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poema-cabecera-compartir {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(0, 109, 119, 0.2);
  color: #006D77;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
  letter-spacing: 0.02em;
}
.poema-cabecera-compartir:hover,
.poema-cabecera-compartir.is-copied {
  border-color: #1F6E64;
  color: #1F6E64;
}

/* ===== Poema Individual — Cuerpo (autor+fecha, estrofas) ===== */
.poema-cuerpo-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 109, 119, 0.12);
}
.poema-cuerpo-divisor {
  width: 28px;
  height: 1.5px;
  background-color: var(--wp--preset--color--teal);
  flex-shrink: 0;
}
.poema-cuerpo-autor {
  position: relative;
  color: var(--wp--preset--color--yale-blue);
  font-size: 0.875rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  text-decoration: none;
}
.poema-cuerpo-autor:hover {
  color: var(--wp--preset--color--teal);
  text-decoration: underline;
}
.poema-cuerpo-fecha {
  color: #C9A895;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
}

.poema-cuerpo-texto {
  margin-bottom: 72px;
}
.poema-cuerpo-estrofa {
  margin-bottom: 36px;
}
.poema-cuerpo-estrofa-ultima {
  margin-bottom: 0;
}
.poema-cuerpo-texto p {
  font-family: "Lora", serif;
  font-size: 19px;
  line-height: 1.85;
  color: #0D3438;
  margin: 0;
  white-space: pre-wrap;
}
.poema-cuerpo-cita {
	display: block;
	font-size: 0.85em;
	font-style: italic;
	color: #5a7182;
	margin: 2px 0;
}
.poema-cuerpo-cita-derecha {
	text-align: right;
}
.poema-cuerpo-cita-centro {
	text-align: center;
}
 
.poema-cuerpo-texto-centrado,
.poema-cuerpo-texto-centrado p {
	text-align: center;
}
 
.poema-cuerpo-texto p del {
	text-decoration: line-through;
	opacity: 0.6;
}
/* ===== Poema Individual — esqueleto de página =====
   CAMBIO: .poema-contenido pasa de max-width 600px -> 720px
   para dar más espacio a los versos largos con sangría (>)
   y evitar que desborden verticalmente (caso "reglas para diferenciar
   entre un poema y el agua", Iria Fariñas, pero afecta a todos los poemas). */
.poema-pagina {
  background-color: var(--wp--preset--color--cream-deep);
  min-height: 100vh;
}
.poema-contenido {
  max-width: 720px; /* antes: 600px */
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.poema-categoria-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wp--preset--color--teal);
  background-color: rgba(0, 121, 140, 0.1);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  font-family: "Manrope", sans-serif;
  margin: 0 0 28px !important;
  width: fit-content;
}
.poema-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-family: "Manrope", sans-serif;
  margin: 0 0 24px !important;
}

/* Estas reglas no dependen del ancho en px (usan clamp/fit-content),
   así que no hace falta tocarlas — se listan solo para que veas que
   ya están revisadas y no hay nada más que ajustar en este bloque:
   .poema-cuerpo-meta, .poema-cuerpo-texto, .poema-cuerpo-texto p,
   .poema-autor-tarjeta, .poema-navegacion siguen igual. */

/* ===== Poema Individual — Tarjeta de autor ===== */
.poema-autor-tarjeta {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 32px;
  background-color: var(--wp--preset--color--yale-blue);
  border-left: 5px solid var(--wp--preset--color--amaranth);
  margin-top: 0;
}
.poema-separador {
  border-top: 1px solid rgba(0, 109, 119, 0.12);
  margin-bottom: 48px;
}
.poema-autor-tarjeta-avatar-wrap {
  flex-shrink: 0;
}
.poema-autor-tarjeta-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(237, 246, 249, 0.3);
  background-color: rgba(237, 246, 249, 0.15);
}
.poema-autor-tarjeta-etiqueta {
  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--teal-light);
  margin: 0 0 4px;
}
.poema-autor-tarjeta-nombre {
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wp--preset--color--cream);
  margin: 0 0 10px;
}
.poema-autor-tarjeta-bio {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(237, 246, 249, 0.8);
  margin: 0;
}
/* Separador antes de la tarjeta de autor */
.poema-cuerpo + .poema-autor-tarjeta {
  margin-top: 48px; /* ya cubierto arriba, pero si prefieres una línea visible en vez de solo espacio: */
}

/* ===== Poema Individual — Navegación Anterior/Siguiente ===== */
.poema-navegacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
  background-color: var(--wp--preset--color--amaranth);
}
.poema-navegacion-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  text-decoration: none;
  transition: background-color 0.2s;
}
.poema-navegacion-item:first-child {
  border-right: 3px solid var(--wp--preset--color--yale-blue);
}
.poema-navegacion-item:hover {
  background-color: rgba(237, 246, 249, 0.08);
}
.poema-navegacion-siguiente {
  text-align: right;
}
.poema-navegacion-etiqueta {
  color: rgba(237, 246, 249, 0.65);
  font-size: 0.7rem;
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.08em;
}
.poema-navegacion-titulo {
  color: var(--wp--preset--color--cream);
  font-size: 0.85rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  line-height: 1.35;
}
.poema-navegacion-autor {
  color: rgba(237, 246, 249, 0.75);
  font-size: 0.75rem;
  font-family: "Manrope", sans-serif;
}

/* ===== Archivo de Poesía — layout general ===== */
.archivo-poesia-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .archivo-poesia-layout {
    grid-template-columns: 1fr;
  }
}
.archivo-poesia-cargando,
.archivo-poesia-error {
  font-family: "Manrope", sans-serif;
  color: #4E6367;
  padding: 48px 0;
  text-align: center;
}

/* ===== Sidebar de filtros ===== */
.archivo-poesia-sidebar {
  position: sticky;
  top: 96px;
}
.archivo-poesia-sidebar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
.archivo-poesia-sidebar-titulo {
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--yale-blue);
}
.archivo-poesia-limpiar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--amaranth);
  font-size: 0.72rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  padding: 0;
}

.archivo-poesia-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.archivo-poesia-chip {
  border: none;
  font-size: 0.7rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
}
.archivo-poesia-chip-autor {
  background: rgba(31, 110, 100, 0.1);
  color: var(--wp--preset--color--teal);
}
.archivo-poesia-chip-anio {
  background: rgba(201, 143, 43, 0.15);
  color: #6B4A16;
}

.archivo-poesia-filtro-seccion {
  border-bottom: 1px solid rgba(0, 109, 119, 0.1);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.archivo-poesia-filtro-header {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 12px;
  text-align: left;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--yale-blue);
}
.archivo-poesia-filtro-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.archivo-poesia-filtro-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.archivo-poesia-filtro-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.archivo-poesia-filtro-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(0, 109, 119, 0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.archivo-poesia-filtro-checkbox.is-checked {
  border: none;
  background-color: var(--wp--preset--color--teal);
}
.archivo-poesia-filtro-checkbox.is-checked::after {
  content: "";
  width: 5px;
  height: 8px;
  border-right: 1.5px solid var(--wp--preset--color--cream);
  border-bottom: 1.5px solid var(--wp--preset--color--cream);
  transform: rotate(45deg) translate(-1px, -1px);
}
.archivo-poesia-filtro-checkbox-anio.is-checked {
  background-color: var(--wp--preset--color--honey-bronze);
}
.archivo-poesia-filtro-checkbox-anio.is-checked::after {
  border-color: #006D77;
}
.archivo-poesia-filtro-texto {
  font-family: "Manrope", sans-serif;
  font-size: 0.82rem;
  color: #4E6367;
  flex: 1;
  line-height: 1.4;
}
.archivo-poesia-filtro-texto.is-checked {
  color: var(--wp--preset--color--yale-blue);
  font-weight: 600;
}
.archivo-poesia-filtro-count {
  font-family: "Manrope", sans-serif;
  font-size: 0.7rem;
  color: #C9A895;
}

/* ===== Lista de resultados ===== */
.archivo-poesia-resultados-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 109, 119, 0.1);
}
.archivo-poesia-conteo {
  font-family: "Manrope", sans-serif;
  font-size: 0.82rem;
  color: #4E6367;
  margin: 0;
}
.archivo-poesia-pagina-actual {
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  color: #C9A895;
  margin: 0;
}
.archivo-poesia-vacio {
  text-align: center;
  padding: 80px 0;
}
.archivo-poesia-vacio p {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.archivo-poesia-btn-limpiar-vacio {
  background-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--cream);
  border: none;
  padding: 10px 24px;
  font-family: "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.archivo-poesia-lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== Tarjeta de poema ===== */
.archivo-poesia-tarjeta {
  position: relative;
  padding: 32px 36px;
  background-color: #fff;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 109, 119, 0.05);
  transition:
    border-color 0.2s,
    box-shadow 0.25s;
}
.archivo-poesia-tarjeta:hover {
  border-left-color: var(--wp--preset--color--teal);
  box-shadow: 0 6px 24px rgba(0, 109, 119, 0.09);
}
.archivo-poesia-tarjeta-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.archivo-poesia-tarjeta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.archivo-poesia-tag {
  display: inline-block;
  color: var(--wp--preset--color--teal);
  background-color: rgba(31, 110, 100, 0.1);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  font-family: "Manrope", sans-serif;
}
.archivo-poesia-tarjeta-fecha {
  color: #C9A895;
  font-size: 0.73rem;
  font-family: "Manrope", sans-serif;
}
.archivo-poesia-tarjeta-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
  font-family: "Manrope", sans-serif;
  margin: 0 0 6px;
}
.archivo-poesia-tarjeta-autor {
  position: relative;
  z-index: 2;
  display: block;
  color: #4E6367;
  font-size: 0.8rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  margin: 0 0 20px;
  text-decoration: none;
  width: fit-content;
}
a.archivo-poesia-tarjeta-autor:hover {
  color: var(--wp--preset--color--teal);
}
.archivo-poesia-tarjeta-fragmento {
  border-left: 2px solid rgba(31, 110, 100, 0.25);
  padding-left: 16px;
}
.archivo-poesia-tarjeta-fragmento p {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 0.925rem;
  line-height: 1.8;
  margin: 0;
}
.archivo-poesia-tarjeta-leer {
  margin-top: 20px;
  color: var(--wp--preset--color--teal);
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  width: fit-content;
  transition: color 0.2s;
}
.archivo-poesia-tarjeta:hover .archivo-poesia-tarjeta-leer {
  color: #163F39;
}

/* ===== Paginación ===== */
.archivo-poesia-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 56px;
}
.archivo-poesia-pag-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 109, 119, 0.2);
  background: none;
  font-family: "Manrope", sans-serif;
  font-size: 0.85rem;
  color: var(--wp--preset--color--yale-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.archivo-poesia-pag-btn:hover:not(:disabled) {
  background: rgba(31, 110, 100, 0.08);
}
.archivo-poesia-pag-btn.is-active {
  background-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--cream);
  border-color: var(--wp--preset--color--teal);
}
.archivo-poesia-pag-btn:disabled {
  color: #C9A895;
  cursor: not-allowed;
}

/* ===== Archivo de Poesía — cabecera fija ===== */
.archivo-poesia-cabecera {
  background-color: var(--wp--preset--color--yale-blue);
  padding: 56px 80px 52px;
}
.archivo-poesia-eyebrow {
  color: var(--wp--preset--color--teal);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: "Manrope", sans-serif;
  margin: 0;
}
.archivo-poesia-titulo {
  color: var(--wp--preset--color--cream);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 300;
  line-height: 1.2;
  font-family: "Manrope", sans-serif;
  margin: 0 0 12px; /* antes: 12px 0 12px — quitamos el margen superior duplicado */
  letter-spacing: -0.01em;
}
.archivo-poesia-descripcion {
  font-family: "Lora", serif;
  font-style: italic;
  color: rgba(237, 246, 249, 0.62);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
}

.archivo-poesia-contenedor {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 80px 96px;
  box-sizing: border-box;
}

.archivo-poesia-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.archivo-poesia-eyebrow-bar {
  width: 3px;
  height: 20px;
  background-color: var(--wp--preset--color--teal);
  flex-shrink: 0;
  display: block;
}

.archivo-poesia-cabecera-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.archivo-poesia-filtro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.archivo-poesia-filtro-chevron {
  color: #4E6367;
  font-size: 0.7rem;
}

/* ===== Búsqueda — cabecera editorial: crema + tarjeta Teal ===== */
.busqueda-cabecera {
  background-color: var(--wp--preset--color--cream);
  padding: 72px 80px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.busqueda-cabecera-card {
  width: 100%;
  max-width: 680px;
  background-color: var(--wp--preset--color--amaranth);
  padding: 44px 48px;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 109, 119, 0.12);
}
.busqueda-cabecera-eyebrow {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 0.875rem;
  color: rgba(237, 246, 249, 0.75);
  margin: 0 0 8px;
  text-align: center;
}
.busqueda-cabecera-titulo {
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.5vw, 1.7rem);
  color: var(--wp--preset--color--cream);
  margin: 0 0 26px;
  text-align: center;
  letter-spacing: -0.01em;
}

.busqueda-form {
  display: flex;
  gap: 0;
  background-color: var(--wp--preset--color--cream);
  border-radius: 100px;
  padding: 4px;
}
.busqueda-input-wrap {
  position: relative;
  flex: 1;
}
.busqueda-input-icono {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.85rem;
  color: var(--wp--preset--color--yale-blue);
  opacity: 0.5;
}
.busqueda-input {
  width: 100%;
  padding: 14px 40px 14px 44px;
  background-color: transparent;
  border: none;
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.05rem;
  font-family: "Manrope", sans-serif;
  outline: none;
  box-sizing: border-box;
}
.busqueda-input::placeholder {
  color: rgba(0, 109, 119, 0.45);
}
.busqueda-input:focus {
  background-color: rgba(0, 109, 119, 0.06);
}
.busqueda-input-limpiar {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0, 109, 119, 0.5);
  padding: 2px;
  font-size: 0.85rem;
}
.busqueda-boton {
  background-color: var(--wp--preset--color--yale-blue);
  color: var(--wp--preset--color--cream);
  border: none;
  padding: 14px 28px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: "Manrope", sans-serif;
  cursor: pointer;
  border-radius: 100px;
  transition: background 0.2s;
  white-space: nowrap;
}
.busqueda-boton:hover {
  background-color: #003A3E;
}
.busqueda-conteo-linea {
  margin-top: 18px;
  color: rgba(237, 246, 249, 0.75);
  font-size: 0.82rem;
  font-family: "Manrope", sans-serif;
  text-align: center;
}

.busqueda-espectro {
  margin-top: 28px;
  width: 100%;
  max-width: 680px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--wp--preset--color--teal) 0%,
    var(--wp--preset--color--teal) 22%,
    var(--wp--preset--color--amaranth) 22%,
    var(--wp--preset--color--amaranth) 47%,
    var(--wp--preset--color--baltic-blue) 47%,
    var(--wp--preset--color--baltic-blue) 72%,
    var(--wp--preset--color--honey-bronze) 72%,
    var(--wp--preset--color--honey-bronze) 100%
  );
  opacity: 0.6;
}

/* ===== Pills de categoría ===== */
.busqueda-pills-strip {
  background-color: #F5E9E3;
  border-bottom: 1px solid rgba(0, 109, 119, 0.1);
}
.busqueda-pills-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}
.busqueda-pill {
  padding: 6px 14px;
  border: 1px solid rgba(0, 109, 119, 0.2);
  background-color: transparent;
  color: #4E6367;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: "Manrope", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.busqueda-pill.is-active-todo {
  border: none;
  background-color: var(--wp--preset--color--yale-blue);
  color: var(--wp--preset--color--cream);
}
.busqueda-pill-count {
  opacity: 0.7;
  font-weight: 400;
}
.busqueda-pill.is-active-todo .busqueda-pill-count {
  opacity: 0.65;
}
.busqueda-pill-separador {
  width: 1px;
  height: 20px;
  background-color: rgba(0, 109, 119, 0.12);
  flex-shrink: 0;
}
.busqueda-pill-x {
  margin-left: 2px;
  font-size: 0.68rem;
}

.busqueda-pill-poesia {
  border-color: rgba(31, 110, 100, 0.25);
  background-color: rgba(31, 110, 100, 0.08);
  color: var(--wp--preset--color--teal);
}
.busqueda-pill-poesia.is-active {
  border: none;
  background-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--cream);
}

.busqueda-pill-relatos {
  border-color: rgba(168, 83, 50, 0.25);
  background-color: rgba(168, 83, 50, 0.08);
  color: var(--wp--preset--color--amaranth);
}
.busqueda-pill-relatos.is-active {
  border: none;
  background-color: var(--wp--preset--color--amaranth);
  color: var(--wp--preset--color--cream);
}

.busqueda-pill-entrevistas {
  border-color: rgba(62, 92, 99, 0.25);
  background-color: rgba(62, 92, 99, 0.08);
  color: var(--wp--preset--color--baltic-blue);
}
.busqueda-pill-entrevistas.is-active {
  border: none;
  background-color: var(--wp--preset--color--baltic-blue);
  color: var(--wp--preset--color--cream);
}

.busqueda-pill-cultura {
  border-color: rgba(201, 143, 43, 0.25);
  background-color: rgba(201, 143, 43, 0.1);
  color: var(--wp--preset--color--honey-bronze);
}
.busqueda-pill-cultura.is-active {
  border: none;
  background-color: var(--wp--preset--color--honey-bronze);
  color: #006D77;
}

/* ===== Zona de resultados ===== */
.busqueda-resultados-zona {
  width: 100%;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 80px 96px;
}
.busqueda-marca {
  background-color: rgba(31, 110, 100, 0.18);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ===== Sin query todavía ===== */
.busqueda-sin-query {
  text-align: center;
  padding: 24px 0 0;
}
.busqueda-sin-query-texto {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}
.busqueda-sugerencias {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.busqueda-sugerencia {
  padding: 6px 16px;
  border: 1px solid rgba(0, 109, 119, 0.2);
  background: none;
  color: var(--wp--preset--color--yale-blue);
  font-size: 0.82rem;
  font-family: "Manrope", sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.busqueda-sugerencia:hover {
  background-color: rgba(0, 109, 119, 0.06);
}

.busqueda-en-archivo {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 109, 119, 0.1);
}
.busqueda-en-archivo-titulo {
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4E6367;
  margin: 0 0 20px;
}
.busqueda-en-archivo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .busqueda-en-archivo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.busqueda-categoria-card {
  padding: 20px;
  background-color: #fff;
  border: 1px solid rgba(0, 109, 119, 0.15);
  border-top: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s;
}
.busqueda-categoria-card:hover {
  box-shadow: 0 4px 16px rgba(0, 109, 119, 0.08);
}
.busqueda-categoria-card-poesia {
  border-top-color: var(--wp--preset--color--teal);
}
.busqueda-categoria-card-relatos {
  border-top-color: var(--wp--preset--color--amaranth);
}
.busqueda-categoria-card-entrevistas {
  border-top-color: var(--wp--preset--color--baltic-blue);
}
.busqueda-categoria-card-cultura {
  border-top-color: var(--wp--preset--color--honey-bronze);
}
.busqueda-categoria-card-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.busqueda-categoria-card-poesia .busqueda-categoria-card-dot {
  background-color: var(--wp--preset--color--teal);
}
.busqueda-categoria-card-relatos .busqueda-categoria-card-dot {
  background-color: var(--wp--preset--color--amaranth);
}
.busqueda-categoria-card-entrevistas .busqueda-categoria-card-dot {
  background-color: var(--wp--preset--color--baltic-blue);
}
.busqueda-categoria-card-cultura .busqueda-categoria-card-dot {
  background-color: var(--wp--preset--color--honey-bronze);
}
.busqueda-categoria-card-nombre {
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wp--preset--color--yale-blue);
  margin: 0 0 4px;
}
.busqueda-categoria-card-count {
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  color: #4E6367;
  margin: 0;
}

/* ===== Estado vacío ===== */
.busqueda-vacio {
  text-align: center;
  padding: 80px 0;
}
.busqueda-vacio-icono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(0, 109, 119, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 1.1rem;
}
.busqueda-vacio-titulo {
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  color: var(--wp--preset--color--yale-blue);
  font-weight: 500;
  margin-bottom: 10px;
}
.busqueda-vacio-texto {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 360px;
  margin: 0 auto;
}

/* ===== Grupos por categoría ===== */
.busqueda-grupo {
  margin-bottom: 56px;
}
.busqueda-grupo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 109, 119, 0.1);
}
.busqueda-grupo-barra {
  width: 3px;
  height: 18px;
  flex-shrink: 0;
}
.busqueda-grupo-barra-poesia {
  background-color: var(--wp--preset--color--teal);
}
.busqueda-grupo-barra-relatos {
  background-color: var(--wp--preset--color--amaranth);
}
.busqueda-grupo-barra-entrevistas {
  background-color: var(--wp--preset--color--baltic-blue);
}
.busqueda-grupo-barra-cultura {
  background-color: var(--wp--preset--color--honey-bronze);
}
.busqueda-grupo-titulo {
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.busqueda-grupo-titulo-poesia {
  color: var(--wp--preset--color--teal);
}
.busqueda-grupo-titulo-relatos {
  color: var(--wp--preset--color--amaranth);
}
.busqueda-grupo-titulo-entrevistas {
  color: var(--wp--preset--color--baltic-blue);
}
.busqueda-grupo-titulo-cultura {
  color: var(--wp--preset--color--honey-bronze);
}
.busqueda-grupo-count {
  color: #C9A895;
  font-size: 0.72rem;
  font-family: "Manrope", sans-serif;
}

.busqueda-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== Tarjeta de resultado ===== */
.busqueda-tarjeta {
  padding: 28px 32px;
  background-color: #fff;
  border-left: 3px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 109, 119, 0.05);
  transition:
    border-color 0.2s,
    box-shadow 0.25s;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  text-decoration: none;
}
.busqueda-tarjeta-poesia:hover {
  border-left-color: var(--wp--preset--color--teal);
}
.busqueda-tarjeta-relatos:hover {
  border-left-color: var(--wp--preset--color--amaranth);
}
.busqueda-tarjeta-entrevistas:hover {
  border-left-color: var(--wp--preset--color--baltic-blue);
}
.busqueda-tarjeta-cultura:hover {
  border-left-color: var(--wp--preset--color--honey-bronze);
}
.busqueda-tarjeta:hover {
  box-shadow: 0 6px 24px rgba(0, 109, 119, 0.09);
}
.busqueda-tarjeta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.busqueda-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  font-family: "Manrope", sans-serif;
}
.busqueda-tag-poesia {
  color: var(--wp--preset--color--teal);
  background-color: rgba(31, 110, 100, 0.08);
}
.busqueda-tag-relatos {
  color: var(--wp--preset--color--amaranth);
  background-color: rgba(168, 83, 50, 0.08);
}
.busqueda-tag-entrevistas {
  color: var(--wp--preset--color--baltic-blue);
  background-color: rgba(62, 92, 99, 0.08);
}
.busqueda-tag-cultura {
  color: var(--wp--preset--color--honey-bronze);
  background-color: rgba(201, 143, 43, 0.1);
}
.busqueda-tarjeta-fecha {
  color: #C9A895;
  font-size: 0.73rem;
  font-family: "Manrope", sans-serif;
}
.busqueda-tarjeta-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  font-family: "Manrope", sans-serif;
  margin: 0 0 6px;
}
.busqueda-tarjeta-autor {
  color: #4E6367;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  margin: 0 0 14px;
  font-weight: 500;
}
.busqueda-tarjeta-extracto {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0;
}
.busqueda-tarjeta-flecha {
  color: #C9A895;
  font-size: 1.1rem;
  line-height: 1;
  transition:
    color 0.2s,
    transform 0.2s;
  margin-top: 2px;
  flex-shrink: 0;
}
.busqueda-tarjeta:hover .busqueda-tarjeta-flecha {
  transform: translateX(3px);
}
.busqueda-tarjeta-poesia:hover .busqueda-tarjeta-flecha {
  color: var(--wp--preset--color--teal);
}
.busqueda-tarjeta-relatos:hover .busqueda-tarjeta-flecha {
  color: var(--wp--preset--color--amaranth);
}
.busqueda-tarjeta-entrevistas:hover .busqueda-tarjeta-flecha {
  color: var(--wp--preset--color--baltic-blue);
}
.busqueda-tarjeta-cultura:hover .busqueda-tarjeta-flecha {
  color: var(--wp--preset--color--honey-bronze);
}

/* ===== Header — enlace a la página real de Búsqueda ===== */
.header-busqueda-link {
  display: flex;
  align-items: center;
  color: rgba(237, 246, 249, 0.78);
  transition: color 0.2s;
}
.header-busqueda-link:hover {
  color: var(--wp--preset--color--cream);
}

/* ===== Header — mini-buscador desplegable ===== */
.header-busqueda-wrap {
  display: flex;
  align-items: center;
}
.header-busqueda-icono {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(237, 246, 249, 0.78);
  padding: 0;
  transition: color 0.2s;
}
.header-busqueda-icono:hover {
  color: var(--wp--preset--color--cream);
}
.header-busqueda-form {
  align-items: center;
  gap: 8px;
}
.header-busqueda-input {
  background: rgba(237, 246, 249, 0.1);
  border: 1px solid rgba(237, 246, 249, 0.3);
  border-radius: 2px;
  color: var(--wp--preset--color--cream);
  padding: 5px 10px;
  font-size: 0.875rem;
  outline: none;
  width: 180px;
  font-family: "Manrope", sans-serif;
  transition: border-color 0.2s;
}
.header-busqueda-input:focus {
  border-color: rgba(237, 246, 249, 0.6);
}
.header-busqueda-input::placeholder {
  color: rgba(237, 246, 249, 0.55);
}
.header-busqueda-ir {
  background: var(--wp--preset--color--amaranth);
  border: none;
  color: var(--wp--preset--color--cream);
  padding: 5px 12px;
  font-size: 0.8rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  cursor: pointer;
  border-radius: 2px;
  white-space: nowrap;
}
.header-busqueda-ir:hover {
  background: #7E3D24;
}
.header-busqueda-cerrar {
  color: rgba(237, 246, 249, 0.7);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  font-size: 0.85rem;
}

/* ===== Búsqueda — paginación ===== */
.busqueda-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 48px;
}
.busqueda-pag-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 109, 119, 0.2);
  background: none;
  font-family: "Manrope", sans-serif;
  font-size: 0.85rem;
  color: var(--wp--preset--color--yale-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.busqueda-pag-btn:hover:not(:disabled) {
  background: rgba(31, 110, 100, 0.08);
}
.busqueda-pag-btn.is-active {
  background-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--cream);
  border-color: var(--wp--preset--color--teal);
}
.busqueda-pag-btn:disabled {
  color: #C9A895;
  cursor: not-allowed;
}

/* ===== Archivo de Categoría — cabecera con color din. vía body class ===== */
.categoria-cabecera {
  background-color: var(--wp--preset--color--section-beige);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--section-beige);
  clip-path: inset(0 -100vmax);
  padding: 56px 80px 48px;
  border-bottom: 3px solid transparent;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
.categoria-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.categoria-eyebrow-bar {
  width: 3px;
  height: 20px;
  flex-shrink: 0;
}
.categoria-eyebrow-texto {
  font-family: "Manrope", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.categoria-eyebrow-bar.categoria-eyebrow-neutro {
	background-color: var(--wp--preset--color--yale-blue);
}
.categoria-eyebrow-texto.categoria-eyebrow-neutro {
	color: var(--wp--preset--color--yale-blue);
}
.categoria-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 300;
  line-height: 1.2;
  font-family: "Manrope", sans-serif;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.categoria-descripcion {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0;
}

body.category-relatos .categoria-cabecera {
  border-bottom-color: var(--wp--preset--color--amaranth);
}
body.category-relatos .categoria-eyebrow-bar,
body.category-relatos .categoria-eyebrow-texto {
  color: var(--wp--preset--color--amaranth);
}
body.category-relatos .categoria-eyebrow-bar {
  background-color: var(--wp--preset--color--amaranth);
}

body.category-cultura .categoria-cabecera {
  border-bottom-color: var(--wp--preset--color--honey-bronze);
}
body.category-cultura .categoria-eyebrow-bar {
  background-color: var(--wp--preset--color--honey-bronze);
}
body.category-cultura .categoria-eyebrow-texto {
  color: var(--wp--preset--color--honey-bronze);
}

body.category-entrevistas .categoria-cabecera {
  border-bottom-color: var(--wp--preset--color--baltic-blue);
}
body.category-entrevistas .categoria-eyebrow-bar {
  background-color: var(--wp--preset--color--baltic-blue);
}
body.category-entrevistas .categoria-eyebrow-texto {
  color: var(--wp--preset--color--baltic-blue);
}

.categoria-lista {
  width: 100%;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 80px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.categoria-post-card {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 109, 119, 0.06);
  transition:
    box-shadow 0.25s,
    border-color 0.2s;
  border-left: 3px solid transparent;
}
.categoria-post-card:hover {
  box-shadow: 0 8px 32px rgba(0, 109, 119, 0.11);
}
body.category-relatos .categoria-post-card:hover {
  border-left-color: var(--wp--preset--color--amaranth);
}
body.category-cultura .categoria-post-card:hover {
  border-left-color: var(--wp--preset--color--honey-bronze);
}
body.category-entrevistas .categoria-post-card:hover {
  border-left-color: var(--wp--preset--color--baltic-blue);
}

/* Ancho fijo aproximado de la columna de imagen, proporción constante 4:3 */
.categoria-post-card > .wp-block-column:first-child {
  flex: 0 0 280px;
  max-width: 280px;
}
.categoria-post-card > .wp-block-column:last-child {
  flex: 1;
}
.categoria-post-imagen {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.categoria-post-imagen figure {
  height: 100%;
  margin: 0;
}
.categoria-post-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.categoria-post-autor a {
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
body.category-relatos .categoria-post-autor a {
  color: var(--wp--preset--color--amaranth);
}
body.category-cultura .categoria-post-autor a {
  color: var(--wp--preset--color--honey-bronze);
}
body.category-entrevistas .categoria-post-autor a {
  color: var(--wp--preset--color--baltic-blue);
}

.categoria-post-titulo a {
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.1rem;
  font-weight: 500;
  font-family: "Manrope", sans-serif;
  text-decoration: none;
}
.categoria-post-extracto {
  font-family: "Lora", serif;
  color: #4E6367;
  font-size: 0.9rem;
  line-height: 1.75;
}
.categoria-post-fecha {
  color: #C9A895;
  font-size: 0.73rem;
  font-family: "Manrope", sans-serif;
}

/* ===== Archivo de Categoría — Pieza Destacada (1ª entrada) ===== */
.categoria-destacada {
  width: 100%;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 80px 0;
}
.categoria-destacada-card {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 109, 119, 0.06);
}
.categoria-destacada-card > .wp-block-column:first-child {
  flex: 0 0 55%;
  max-width: 55%;
}
.categoria-destacada-card > .wp-block-column:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 40px;
}
.categoria-destacada-imagen {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
}
.categoria-destacada-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.categoria-destacada-eyebrow {
  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.categoria-destacada-titulo a {
  font-family: "Lora", serif;
  color: var(--wp--preset--color--yale-blue);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  margin: 0 0 12px;
  display: block;
}
.categoria-destacada-meta {
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  color: var(--wp--preset--color--gris-verdoso);
  margin: 0;
}

body.category-relatos .categoria-destacada-eyebrow {
  color: var(--wp--preset--color--amaranth);
}
body.category-cultura .categoria-destacada-eyebrow {
  color: var(--wp--preset--color--honey-bronze);
}
body.category-entrevistas .categoria-destacada-eyebrow {
  color: var(--wp--preset--color--baltic-blue);
}

/* ===== Archivo de Categoría — separador "Más en esta sección" ===== */
.categoria-zigzag-separador {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 1440px;
  margin: 40px auto 24px;
  padding: 0 80px;
}
.categoria-zigzag-separador-texto {
  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--beige-terracota);
  white-space: nowrap;
  text-align: center;
}
.categoria-zigzag-separador-linea {
  width: 100%;
  height: 1px;
  background: rgba(0, 109, 119, 0.12);
}

/* ===== Archivo de Categoría — tarjetas en Zigzag (resto de entradas) =====
   Cada tarjeta es un bloque Columnas normal (imagen + texto). La clase
   .categoria-zigzag-lista alterna el orden automáticamente en las
   tarjetas pares con row-reverse — no hace falta invertir las columnas
   a mano en el editor, solo repetir siempre la misma estructura. */
.categoria-zigzag-lista {
  width: 100%;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.categoria-zigzag-card {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 109, 119, 0.06);
  transition: box-shadow 0.25s;
}
.categoria-zigzag-card:hover {
  box-shadow: 0 8px 28px rgba(0, 109, 119, 0.1);
}
.categoria-zigzag-lista .wp-block-post-template > li:nth-child(even) .categoria-zigzag-card {
  flex-direction: row-reverse;
}
.categoria-zigzag-card > .wp-block-column:first-child {
  flex: 0 0 42%;
  max-width: 42%;
}
.categoria-zigzag-card > .wp-block-column:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 30px;
}
.categoria-zigzag-imagen {
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  margin: 0;
}
.categoria-zigzag-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.categoria-zigzag-eyebrow {
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  width: fit-content;
  margin: 0 0 8px;
  color: var(--wp--preset--color--teal);
  background-color: rgba(31, 110, 100, 0.1);
}
.categoria-zigzag-eyebrow a {
  text-decoration: none;
  color: inherit;
}
.categoria-zigzag-titulo a {
  font-family: "Lora", serif;
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  margin: 0 0 8px;
  display: block;
}
.categoria-zigzag-extracto {
  font-family: "Lora", serif;
  font-style: italic;
  color: var(--wp--preset--color--gris-verdoso);
  font-size: 0.85rem;
  line-height: 1.65;
  margin: 0 0 10px;
}
.categoria-zigzag-meta {
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  color: var(--wp--preset--color--beige-terracota);
  margin: 0;
}

body.category-relatos .categoria-zigzag-eyebrow {
  color: var(--wp--preset--color--amaranth);
  background-color: rgba(168, 83, 50, 0.1);
}
body.category-cultura .categoria-zigzag-eyebrow {
  color: var(--wp--preset--color--honey-bronze);
  background-color: rgba(201, 143, 43, 0.12);
}
body.category-entrevistas .categoria-zigzag-eyebrow {
  color: var(--wp--preset--color--baltic-blue);
  background-color: rgba(62, 92, 99, 0.1);
}

/* Responsive — apila imagen+texto en pantallas estrechas, cancela el zigzag */
@media (max-width: 780px) {
  .categoria-destacada-card,
  .categoria-zigzag-card,
  .categoria-zigzag-lista .wp-block-post-template > li:nth-child(even) .categoria-zigzag-card {
    flex-direction: column !important;
  }
  .categoria-destacada-card > .wp-block-column:first-child,
  .categoria-destacada-card > .wp-block-column:last-child,
  .categoria-zigzag-card > .wp-block-column:first-child,
  .categoria-zigzag-card > .wp-block-column:last-child {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

.wp-block-query-pagination {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 80px 64px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.wp-block-query-pagination a,
.wp-block-query-pagination span {
  font-family: "Manrope", sans-serif;
  font-size: 0.85rem;
  color: var(--wp--preset--color--yale-blue);
  padding: 8px 12px;
  border: 1px solid rgba(0, 109, 119, 0.2);
  text-decoration: none;
}
.wp-block-query-pagination .current {
  background-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--cream);
  border-color: var(--wp--preset--color--teal);
}

/* ===== Contacto — Cabecera ===== */
/* ===== Contacto — Cabecera: tarjeta Amaranth flotante sobre crema ===== */
.contacto-cabecera {
  background-color: var(--wp--preset--color--cream);
  padding: 72px 80px 64px;
  display: flex;
  justify-content: center;
}
.contacto-cabecera-card {
  width: 100%;
  max-width: 680px;
  background-color: var(--wp--preset--color--amaranth);
  padding: 40px 48px;
  box-shadow: 0 12px 40px rgba(0, 109, 119, 0.12);
  text-align: center;
}
.contacto-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.contacto-eyebrow-bar {
  width: 3px;
  height: 20px;
  background-color: rgba(237, 246, 249, 0.7);
}
.contacto-eyebrow-texto {
  color: rgba(237, 246, 249, 0.75);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: "Manrope", sans-serif;
}
.contacto-titulo {
  color: var(--wp--preset--color--cream);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  font-family: "Manrope", sans-serif;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.contacto-subtitulo {
  font-family: "Lora", serif;
  font-style: italic;
  color: rgba(237, 246, 249, 0.75);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 480px;
}

/* ===== Cuerpo: 2 columnas ===== */
.contacto-cuerpo {
  width: 100%;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 80px 96px;
}
.contacto-columnas.wp-block-columns {
  gap: 80px;
}

/* ===== Formulario (Contact Form 7) ===== */
.contacto-formulario label.contacto-label {
  display: block;
  margin-bottom: 8px;
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--yale-blue);
}
.contacto-formulario .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 24px;
}
.contacto-input,
.contacto-textarea {
  width: 100%;
  padding: 12px 14px;
  background-color: #fff;
  border: 1.5px solid rgba(0, 109, 119, 0.18);
  color: var(--wp--preset--color--yale-blue);
  font-size: 0.9rem;
  font-family: "Manrope", sans-serif;
  outline: none;
  box-sizing: border-box;
  border-radius: 0;
  transition: border-color 0.2s;
}
.contacto-input:focus,
.contacto-textarea:focus {
  border-color: var(--wp--preset--color--teal);
}
.contacto-textarea {
  resize: vertical;
  line-height: 1.7;
  min-height: 160px;
}
.contacto-input.wpcf7-not-valid,
.contacto-textarea.wpcf7-not-valid {
  border-color: var(--wp--preset--color--amaranth);
}
.contacto-formulario .wpcf7-not-valid-tip {
  display: block;
  color: var(--wp--preset--color--amaranth);
  font-size: 0.75rem;
  font-family: "Manrope", sans-serif;
  margin-top: 5px;
}
input.contacto-submit,
input[type="submit"].contacto-submit {
  background-color: var(--wp--preset--color--amaranth);
  color: var(--wp--preset--color--cream);
  border: none;
  border-radius: 0;
  padding: 14px 36px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "Manrope", sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
input.contacto-submit:hover,
input[type="submit"].contacto-submit:hover {
  background-color: #7E3D24;
}
.contacto-formulario .wpcf7-spinner {
  margin-left: 10px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.contacto-formulario .wpcf7-response-output {
  font-family: "Manrope", sans-serif;
  font-size: 0.8rem;
  border-radius: 0;
  margin-top: 16px !important;
}
.contacto-formulario form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--teal) !important;
  color: var(--wp--preset--color--teal);
}
.contacto-formulario form.invalid .wpcf7-response-output,
.contacto-formulario form.spam .wpcf7-response-output,
.contacto-formulario form.aborted .wpcf7-response-output {
  border-color: var(--wp--preset--color--amaranth) !important;
  color: var(--wp--preset--color--amaranth);
}

/* ===== Estado de éxito personalizado ===== */
.contacto-success {
  padding: 48px 40px;
  background-color: #fff;
  border-left: 3px solid var(--wp--preset--color--teal);
  text-align: center;
}
.contacto-success-icono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(31, 110, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.contacto-success-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.contacto-success-texto {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 340px;
  margin: 0 auto 28px;
}
.contacto-success-reset {
  background: none;
  border: 1px solid rgba(0, 109, 119, 0.2);
  color: var(--wp--preset--color--yale-blue);
  padding: 9px 22px;
  font-family: "Manrope", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s;
}
.contacto-success-reset:hover {
  border-color: var(--wp--preset--color--yale-blue);
}

/* ===== Columna derecha: información ===== */
.contacto-info-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.contacto-info-eyebrow-bar {
  width: 3px;
  height: 20px;
  background-color: var(--wp--preset--color--amaranth);
  flex-shrink: 0;
}
.contacto-info-eyebrow-texto {
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--amaranth);
}
.contacto-info-parrafo-principal {
  font-family: "Lora", serif;
  font-style: italic;
  color: #0D3438;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 16px;
}
.contacto-info-parrafo-secundario {
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  font-size: 0.92rem;
  line-height: 1.8;
  margin: 0;
}
.contacto-divisor.wp-block-separator {
  border-top: 1px solid rgba(0, 109, 119, 0.12);
  margin: 36px 0;
}
.contacto-info-etiqueta {
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4E6367;
  margin-bottom: 10px;
}
.contacto-email-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wp--preset--color--yale-blue);
  text-decoration: none;
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}
.contacto-email-link:hover {
  color: var(--wp--preset--color--teal);
}
.contacto-social-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 12px 16px;
  background-color: #fff;
  border: 1px solid rgba(0, 109, 119, 0.1);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.contacto-social-card:hover {
  border-color: rgba(0, 109, 119, 0.3);
  box-shadow: 0 2px 12px rgba(0, 109, 119, 0.07);
}
.contacto-social-card svg {
  color: var(--wp--preset--color--yale-blue);
  flex-shrink: 0;
}
.contacto-social-card-texto {
  flex: 1;
}
.contacto-social-card-nombre {
  font-family: "Manrope", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wp--preset--color--yale-blue);
  margin: 0;
  line-height: 1.3;
}
.contacto-social-card-sub {
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  color: #4E6367;
  margin: 0;
}
.contacto-social-card-flecha {
  margin-left: auto;
  color: #C9A895;
  font-size: 0.9rem;
}
.contacto-info-respuesta {
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  color: #4E6367;
  line-height: 1.6;
}
.contacto-info-respuesta strong {
  color: var(--wp--preset--color--yale-blue);
  font-weight: 600;
}

/* ===== Entrada individual — Cabecera (breadcrumb + compartir) ===== */
.entrada-cabecera-barra {
  border-bottom: 1px solid rgba(0, 109, 119, 0.1);
  background-color: #FFDDD2;
}
.entrada-cabecera-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.entrada-cabecera-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}
.entrada-cabecera-volver {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4E6367;
  text-decoration: none;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  transition: color 0.2s;
}
.entrada-cabecera-volver:hover {
  color: #006D77;
}
.entrada-cabecera-sep {
  color: #C9A895;
  font-size: 0.75rem;
}
.entrada-cabecera-actual {
  color: #006D77;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entrada-cabecera-compartir {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(0, 109, 119, 0.2);
  color: #006D77;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
  letter-spacing: 0.02em;
}
.entrada-cabecera-compartir:hover,
.entrada-cabecera-compartir.is-copied {
  border-color: #1F6E64;
  color: #1F6E64;
}

/* ===== Entrada individual — esqueleto de página ===== */
.entrada-pagina {
  background-color: var(--wp--preset--color--cream-deep);
  min-height: 100vh;
  margin-top: 0 !important;
}
.entrada-contenido {
  max-width: 700px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

/* Etiqueta de categoría con color dinámico por body class */
.entrada-categoria-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  font-family: "Manrope", sans-serif;
  text-decoration: none;
  margin: 0 0 28px;
}
body.category-relatos .entrada-categoria-tag {
  color: var(--wp--preset--color--amaranth);
  background-color: rgba(168, 83, 50, 0.1);
}
body.category-cultura .entrada-categoria-tag {
  color: var(--wp--preset--color--honey-bronze);
  background-color: rgba(201, 143, 43, 0.12);
}
body.category-entrevistas .entrada-categoria-tag {
  color: var(--wp--preset--color--baltic-blue);
  background-color: rgba(62, 92, 99, 0.1);
}

.entrada-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-family: "Manrope", sans-serif;
  margin: 0 0 24px;
}

/* Meta: autor + fecha */
.entrada-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 109, 119, 0.12);
}
.entrada-meta-divisor {
  width: 28px;
  height: 1.5px;
  flex-shrink: 0;
}
body.category-relatos .entrada-meta-divisor {
  background-color: var(--wp--preset--color--amaranth);
}
body.category-cultura .entrada-meta-divisor {
  background-color: var(--wp--preset--color--honey-bronze);
}
body.category-entrevistas .entrada-meta-divisor {
  background-color: var(--wp--preset--color--baltic-blue);
}

.entrada-meta-autor {
  color: var(--wp--preset--color--yale-blue);
  font-size: 0.875rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  text-decoration: none;
}
.entrada-meta-autor:hover {
  text-decoration: underline;
}
.entrada-meta-fecha {
  color: #C9A895;
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
}

/* Imagen destacada */
.entrada-contenido .wp-block-post-featured-image {
  margin-bottom: 40px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #F5E9E3;
}
.entrada-contenido .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cuerpo del artículo — tipografía de lectura larga */
.entrada-cuerpo {
  margin-bottom: 56px;
}
.entrada-cuerpo p {
  font-family: "Lora", serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #0D3438;
  margin: 0 0 28px;
}
.entrada-cuerpo h2 {
  font-family: "Manrope", sans-serif;
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 48px 0 20px;
}
.entrada-cuerpo h3 {
  font-family: "Manrope", sans-serif;
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 36px 0 16px;
}
.entrada-cuerpo blockquote {
  border-left: 3px solid var(--wp--preset--color--teal);
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: #4E6367;
}
.entrada-cuerpo img {
  max-width: 100%;
  height: auto;
  margin: 32px 0;
}

/* Navegación Anterior/Siguiente (idéntica a la de Poema, mismo patrón visual) */
.entrada-navegacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 109, 119, 0.1);
}
.entrada-navegacion-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 109, 119, 0.08);
  text-decoration: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
  border-bottom: 3px solid transparent;
}
.entrada-navegacion-item:hover {
  box-shadow: 0 6px 20px rgba(0, 109, 119, 0.16);
  border-bottom-color: var(--wp--preset--color--teal);
}
.entrada-navegacion-siguiente {
  text-align: right;
}
.entrada-navegacion-etiqueta {
  color: #C9A895;
  font-size: 0.7rem;
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.08em;
}
.entrada-navegacion-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: 0.85rem;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  line-height: 1.35;
}

/* ===== Archivo de Autor — Cabecera ===== */
.autor-cabecera {
  background-color: var(--wp--preset--color--yale-blue);
  padding: 56px 80px;
}
.autor-cabecera-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.autor-cabecera-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid rgba(237, 246, 249, 0.2);
}
.autor-cabecera-eyebrow {
  color: var(--wp--preset--color--teal);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: "Manrope", sans-serif;
  margin: 0 0 8px;
}
.autor-cabecera-nombre {
  color: var(--wp--preset--color--cream);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 300;
  line-height: 1.2;
  font-family: "Manrope", sans-serif;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.autor-cabecera-bio {
  font-family: "Lora", serif;
  font-style: italic;
  color: rgba(237, 246, 249, 0.7);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  max-width: 600px;
}

/* ===== Lista de contenido del autor ===== */
.autor-lista {
  width: 100%;
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 80px 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.autor-lista-vacio {
  width: 100%;
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 80px 96px;
  font-family: "Lora", serif;
  font-style: italic;
  color: #4E6367;
  text-align: center;
}
.autor-lista-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid rgba(0, 109, 119, 0.1);
  text-decoration: none;
  transition: padding-left 0.2s;
}
.autor-lista-tarjeta:hover {
  padding-left: 12px;
}
.autor-lista-tarjeta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  width: 160px;
}
.autor-lista-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  font-family: "Manrope", sans-serif;
}
.autor-lista-tag-poesia {
  color: var(--wp--preset--color--teal);
  background-color: rgba(31, 110, 100, 0.08);
}
.autor-lista-tag-relatos {
  color: var(--wp--preset--color--amaranth);
  background-color: rgba(168, 83, 50, 0.08);
}
.autor-lista-tag-cultura {
  color: var(--wp--preset--color--honey-bronze);
  background-color: rgba(201, 143, 43, 0.1);
}
.autor-lista-tag-entrevistas {
  color: var(--wp--preset--color--baltic-blue);
  background-color: rgba(62, 92, 99, 0.08);
}
.autor-lista-fecha {
  color: #C9A895;
  font-size: 0.72rem;
  font-family: "Manrope", sans-serif;
  white-space: nowrap;
}
.autor-lista-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: 1rem;
  font-weight: 500;
  font-family: "Manrope", sans-serif;
  margin: 0;
  flex: 1;
}

/* ===== Páginas de contenido genéricas (Sobre nosotros, Política editorial, etc.) ===== */
.pagina-cabecera {
  background-color: var(--wp--preset--color--section-beige);
  padding: 56px 80px 40px;
}

/* ANTES: .pagina-eyebrow existía con el texto "Página" — se elimina el
   USO (borra el bloque de texto "Página" en el editor), pero se deja la
   regla por si en el futuro se reutiliza esta clase para otra cosa. */
.pagina-eyebrow {
  display: none;
}

.pagina-titulo {
  color: var(--wp--preset--color--yale-blue);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  font-family: "Manrope", sans-serif;
  margin: 0;
  letter-spacing: -0.01em;
}
.pagina-contenido {
  width: 100%;
  box-sizing: border-box;
  max-width: 700px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.pagina-cuerpo p {
  font-family: "Lora", serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #0D3438;
  margin: 0 0 28px;
}

/* CAMBIO: la negrita ya NO recolorea el texto — solo sube el peso.
   Antes: color: var(--wp--preset--color--yale-blue); font-weight: 600;
   Esto es lo que creaba el efecto de "manchas de color" irregulares
   bajando por el texto. Ahora la negrita se ve como énfasis discreto,
   no como un evento de color aparte. */
.pagina-cuerpo strong {
  font-weight: 600;
}

.pagina-cuerpo h2 {
  font-family: "Manrope", sans-serif;
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 40px 0 16px;
}

/* NUEVO — cita destacada (pull quote). La clase puede acabar puesta
   directamente en el <p> (caso real observado en el sitio) o en un
   Grupo que envuelva un <p> — por eso cubrimos ambos casos con el
   selector de abajo. Todo con !important porque .pagina-cuerpo p
   tiene la misma o mayor especificidad y si no, gana ella. */
.pagina-cita,
.pagina-cita p {
  display: block;
  font-family: "Lora", serif !important;
  font-style: italic !important;
  font-size: 1.25rem !important;
  line-height: 1.55 !important;
  color: var(--wp--preset--color--yale-blue) !important;
  border-left: 3px solid var(--wp--preset--color--honey-bronze) !important;
  padding: 2px 0 2px 20px !important;
  margin: 34px 0 !important;
}
.pagina-cita strong {
  font-style: normal !important;
  font-weight: 400 !important;
}
/* Si la clase envuelve un Grupo con el <p> dentro, el <p> interior no
   necesita su propio margen/borde (ya lo lleva el contenedor) */
.pagina-cita > p {
  border-left: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== Página Convocatoria ===== */

.convocatoria-apartado {
  display: flex;
  gap: 28px;
  margin: 0 0 34px;
  align-items: flex-start;
}
.convocatoria-numeral {
  font-family: "Lora", serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 2.4rem !important;
  line-height: 1 !important;
  flex-shrink: 0;
  width: 40px;
  margin-top: 6px !important; /* truco para que el numeral quede alineado con el primer renglón del texto, no con la línea base del bloque */
  text-align: right;
}
/* Un color de acento por apartado — los mismos que ya asociáis a
   Poesía / Relatos / Entrevistas en el resto del sitio */
.convocatoria-apartado-poesia .convocatoria-numeral {
  color: var(--wp--preset--color--teal);
}
.convocatoria-apartado-relato .convocatoria-numeral {
  color: var(--wp--preset--color--amaranth);
}
.convocatoria-apartado-traduccion .convocatoria-numeral {
  color: var(--wp--preset--color--baltic-blue);
}

.convocatoria-apartado-texto {
  padding-top: 8px;
  flex: 1;
  min-width: 0;
}

.convocatoria-apartado-texto > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.convocatoria-apartado-texto h2 {
  font-family: "Manrope", sans-serif;
  color: var(--wp--preset--color--yale-blue);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 10px;
}
.convocatoria-apartado-texto p {
  font-family: "Lora", serif;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #0D3438;
  margin: 0;
}

.convocatoria-info {
  border-top: 1px solid rgba(0, 109, 119, 0.15);
  padding-top: 30px;
  margin-bottom: 24px;
}
.convocatoria-info-eyebrow {
  font-family: "Manrope", sans-serif;
  color: var(--wp--preset--color--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.convocatoria-info p {
  font-family: "Lora", serif;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #0D3438;
  margin: 0 0 18px;
}
.convocatoria-info a {
  color: var(--wp--preset--color--yale-blue);
}

/* Aviso importante — mismo lenguaje visual que la cita destacada de
   "Sobre nosotros" (barra lateral + cursiva), pero en amaranth y sin
   agrandar el tamaño, para que se lea como advertencia, no como
   declaración de identidad */
.convocatoria-aviso {
  border-left: 3px solid var(--wp--preset--color--amaranth);
  padding: 2px 0 2px 16px;
  margin: 0 0 24px;
}
.convocatoria-aviso p {
  font-family: "Lora", serif !important;
  font-style: italic !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #993C1D !important;
  margin: 0 !important;
}

/* NUEVO — firma final (autores + lugar/fecha), mismo lenguaje visual
   que las citas/epígrafes de los poemas: cursiva, alineada a la
   derecha, separada por una línea fina. */
.pagina-firma {
  border-top: 1px solid rgba(0, 109, 119, 0.15);
  padding-top: 22px;
  margin-top: 40px;
  text-align: right;
}
.pagina-firma p {
  font-family: "Lora", serif;
  font-style: italic;
  margin: 0 0 4px !important;
}
.pagina-firma p:first-child {
  font-size: 0.92rem;
  color: var(--wp--preset--color--teal);
}
.pagina-firma p:last-child {
  font-size: 0.85rem;
  color: #5f8a8a;
  margin-bottom: 0 !important;
}

/* ===== Página 404 ===== */
.pagina-404 {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 64px 32px;
	background-color: var(--wp--preset--color--cream);
}
.pagina-404-eyebrow {
	color: var(--wp--preset--color--amaranth);
	background-color: rgba(168, 83, 50, 0.1);
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 3px 12px;
	font-family: 'Manrope', sans-serif;
	margin-bottom: 24px;
}
.pagina-404-titulo {
	color: var(--wp--preset--color--yale-blue);
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-weight: 300;
	line-height: 1.2;
	font-family: 'Manrope', sans-serif;
	margin-bottom: 20px;
	letter-spacing: -0.01em;
}
.pagina-404-texto {
	font-family: 'Lora', serif;
	font-style: italic;
	color: #4E6367;
	font-size: 1.05rem;
	line-height: 1.75;
	max-width: 440px;
	margin: 0 0 40px;
}
.pagina-404 .wp-block-buttons {
	justify-content: center;
	gap: 12px;
}
.pagina-404 .wp-block-button__link {
	font-family: 'Manrope', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 11px 28px;
	border-radius: 0;
}

.poema-cuerpo-texto strong {
	font-weight: 700;
	color: var(--wp--preset--color--yale-blue);
}
.entrevista-relato-categoria a {
	color: inherit;
	text-decoration: none;
}
.entrevista-relato-autor a {
	color: inherit;
	text-decoration: none;
}

/* === Color por categoría en "Todas las entradas" === 
   Mismo sistema de color que Home/Archivo de categoría,
   pero con selector .wp-block-post.category-X porque esta
   página no añade la clase category-X al <body> */

.wp-block-post.category-relatos .entrevista-relato-categoria a {
  color: var(--wp--preset--color--amaranth);
}
.wp-block-post.category-cultura .entrevista-relato-categoria a {
  color: var(--wp--preset--color--honey-bronze);
}
.wp-block-post.category-entrevistas .entrevista-relato-categoria a {
  color: var(--wp--preset--color--baltic-blue);
}

.wp-block-post.category-relatos .entrevista-relato-autor a {
  color: var(--wp--preset--color--amaranth);
}
.wp-block-post.category-cultura .entrevista-relato-autor a {
  color: var(--wp--preset--color--honey-bronze);
}
.wp-block-post.category-entrevistas .entrevista-relato-autor a {
  color: var(--wp--preset--color--baltic-blue);
}

.categoria-cabecera,
.wp-block-query:has(.entrevistas-relatos-list) {
  max-width: 1440px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
  width: 100% !important;
  box-sizing: border-box;
}
.categoria-cabecera {
  border-bottom-color: var(--wp--preset--color--yale-blue);
}

/* ===== Footer 2a — masthead + nav agrupada ===== */

.footer-masthead {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-bottom: 1px solid rgba(237, 246, 249, 0.12);
  padding-bottom: 24px;
}

.footer-nav {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 88px !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.footer-nav .footer-col {
  flex: 0 0 auto !important;
  min-width: 0;
}

.footer-muted {
  color: rgba(237, 246, 249, 0.55) !important;
}



.footer-masthead .footer-brand p:first-child {
  margin-bottom: 4px !important;
}
.footer-masthead .footer-brand p:last-child {
  margin: 0 !important;
}

.footer-bottom-row p.footer-muted {
  text-align: left !important;
}

.numero-fecha {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.85rem;
	font-family: "Manrope", sans-serif;
	margin: 0 0 20px;
}
.numero-pdf-acciones {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}
.numero-pdf-boton {
	font-family: "Manrope", sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 10px 22px;
	cursor: pointer;
	text-decoration: none;
	border: none;
	transition: background 0.2s, color 0.2s;
}
.numero-pdf-boton-primario {
	background-color: var(--wp--preset--color--yale-blue);
	color: var(--wp--preset--color--cream);
}
.numero-pdf-boton-primario:hover {
	background-color: #003A3E;
	color: var(--wp--preset--color--cream);
}
.numero-pdf-boton-secundario {
	background: none;
	border: 1px solid rgba(0, 109, 119, 0.25);
	color: var(--wp--preset--color--yale-blue);
}
.numero-pdf-boton-secundario:hover,
.numero-pdf-boton-secundario[aria-expanded="true"] {
	background-color: rgba(0, 109, 119, 0.06);
}
.numero-pdf-visor {
	margin-bottom: 20px;
}
.numero-pdf-visor iframe {
	width: 100%;
	height: 80vh;
	border: 1px solid rgba(0, 109, 119, 0.15);
	display: block;
}
.numero-pdf-fallback {
	font-family: "Manrope", sans-serif;
	font-size: 0.78rem;
	color: var(--wp--preset--color--text-muted);
	margin: 8px 0 0;
}
.numero-cabecera {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--wp--preset--color--section-beige);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--section-beige);
  clip-path: inset(0 -100vmax);
  padding: 56px 80px 48px;
  border-bottom: 3px solid var(--wp--preset--color--yale-blue);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
.numero-cabecera .categoria-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.numero-cabecera .categoria-titulo {
  margin-bottom: 16px;
}

.numero-poemas-lista {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 80px 64px;
}

.poema-capsula {
  position: relative;
  background: #ffffff;
  border-radius: 100px 24px 24px 100px;
  padding: 24px 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
}
.poema-capsula::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 100px 0 0 100px;
  background: var(--wp--preset--color--teal);
}
.poema-capsula::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  background: var(--wp--preset--color--teal);
  opacity: 0.16;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.4s, opacity 0.4s;
  pointer-events: none;
}
.poema-capsula:hover {
  transform: translateX(6px);
  box-shadow: 0 10px 30px rgba(0, 109, 119, 0.1);
}
.poema-capsula:hover::after {
  transform: translateY(-50%) rotate(45deg) scale(1.6);
  opacity: 0.3;
}

.poema-capsula-titulo a {
  font-family: "Lora", serif;
  font-size: 1.05rem;
  color: var(--wp--preset--color--yale-blue);
  text-decoration: none;
}
.poema-capsula-autor {
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  color: var(--wp--preset--color--text-muted);
}
.poema-capsula-autor a {
  color: inherit;
  text-decoration: none;
}

.poema-capsula-fragmento {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 0.85rem;
  color: #4E6367;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s, opacity 0.3s 0.05s, margin-top 0.4s;
}
.poema-capsula:hover .poema-capsula-fragmento {
  max-height: 60px;
  opacity: 1;
  margin-top: 6px;
}

@media (max-width: 700px) {
  .poema-capsula-fragmento {
    max-height: 60px;
    opacity: 1;
    margin-top: 6px;
  }
}

.numero-mosaico-blob {
  width: 100%;           /* NUEVO */
  box-sizing: border-box; /* NUEVO */
  position: relative;
  background: #ffffff;
  border-radius: 36% 64% 60% 40% / 65% 58% 42% 35%;
  padding: 13rem 13rem;
  box-shadow: 0 24px 60px rgba(0, 109, 119, 0.09);
  max-width: 1440px;
  margin: 56px auto 80px;
}

.numero-mosaico-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 22px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

.numero-chip {
  position: relative;
  width: 190px;
  height: 68px; /* antes: 60px */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
}
.numero-chip:hover,
.numero-chip:focus-visible {
  z-index: 5;
}

.numero-chip-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 68px; /* antes: 60px */
  box-sizing: border-box;
  background: var(--wp--preset--color--cream);
  border-radius: 50px 14px 14px 50px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s;
}
.numero-chip-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 50px 0 0 50px;
  background: var(--acc);
}

/* ANTES: min-height: 60px
   AHORA: */
.numero-chip:hover .numero-chip-inner,
.numero-chip:focus-visible .numero-chip-inner {
  width: 250px;
  height: auto;
  min-height: 68px; /* antes: 60px */
  padding: 15px 20px;
  box-shadow: 0 12px 28px rgba(0, 109, 119, 0.16);
}

/* ANTES: line-height: 1.3 (sin margen para descendentes)
   AHORA: */
.numero-chip-tit {
  font-family: "Lora", serif;
  font-size: 14.5px;
  line-height: 1.45; /* antes: 1.3 — evita que p/g/q/y se recorten abajo */
  color: var(--wp--preset--color--yale-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.numero-chip:hover .numero-chip-tit,
.numero-chip:focus-visible .numero-chip-tit {
  white-space: normal;
}
.numero-chip-aut {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: var(--wp--preset--color--text-muted);
  opacity: 0.85;
  white-space: nowrap;   /* NUEVO */
  overflow: hidden;      /* NUEVO */
  text-overflow: ellipsis; /* NUEVO */
  max-width: 100%;       /* NUEVO */
}
.numero-chip:hover .numero-chip-aut,
.numero-chip:focus-visible .numero-chip-aut {
  white-space: normal;   /* NUEVO — igual que ya hace .numero-chip-tit en hover */
}

.numero-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 109, 119, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 999;
}
.numero-modal-overlay[hidden] {
  display: none !important;
}
.numero-modal-card {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
}
.numero-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--wp--preset--color--text-muted);
  line-height: 1;
  padding: 6px;
}
.numero-modal-close:hover {
  color: var(--wp--preset--color--yale-blue);
}
.numero-modal-cat {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--teal);
  margin: 0 0 6px;
}
.numero-modal-tit {
  font-family: "Lora", serif;
  font-size: 1.3rem;
  color: var(--wp--preset--color--yale-blue);
  margin: 0 0 4px;
}
.numero-modal-aut {
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
  margin-bottom: 20px;
}
.numero-modal-aut:hover {
  color: var(--wp--preset--color--teal);
  text-decoration: underline;
}
.numero-modal-estrofa {
  margin-bottom: 20px;
}
.numero-modal-estrofa:last-child {
  margin-bottom: 0;
}
.numero-modal-texto p {
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #0D3438;
  margin: 0;
}

@media (max-width: 900px) {
  .numero-mosaico-blob {
    padding: 4.5rem 3.5rem; /* antes: 4rem 2.5rem */
    border-radius: 32px;
  }
  .numero-mosaico-grid {
    max-width: 100%;
  }
}

/* Espaciado generoso a propósito: las islas usan coordenadas absolutas
   fijas (top/left en px) pensadas para exactamente 4 números. Cuando se
   añada un 5º número, este layout habrá que revisarlo entero (recalcular
   posiciones), no solo el espaciado — ver nota ya existente en el
   histórico del proyecto sobre este mismo bloque. */
.numeros-espiral-wrap {
	position: relative;
	max-width: 640px;
	height: 460px;
	margin: 0 auto;
}
/* El espaciado va en el padre (entry-content), no en el propio wrap:
   un margin en el wrap colapsaba con el padre/hermanos y se perdía casi
   entero en el renderizado final (confirmado visualmente con un fondo
   rojo de depuración). padding en el padre nunca colapsa, y como el
   padre no es el elemento de referencia para las islas position:absolute
   de dentro, esta vez el espacio extra sí empuja el bloque completo. */
.entry-content:has(> .numeros-espiral-wrap) {
	padding-top: 200px;
	padding-bottom: 260px;
}
.numeros-espiral-linea {
	position: absolute;
	inset: 0;
}
.numeros-espiral-isla {
	position: absolute;
	border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
	width: 150px;
	height: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
	box-shadow: 0 10px 26px rgba(0, 109, 119, 0.1);
}
.numeros-espiral-isla:hover {
	transform: scale(1.06);
	box-shadow: 0 16px 36px rgba(0, 109, 119, 0.18);
	z-index: 5;
}
.numeros-espiral-num {
	font-family: "Lora", serif;
	font-size: 30px;
	font-weight: 700;
	color: var(--wp--preset--color--cream);
	line-height: 1;
}
.numeros-espiral-lab {
	font-family: "Manrope", sans-serif;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(237, 246, 249, 0.85);
	margin-top: 4px;
}
.numeros-espiral-isla.proximo {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 700px) {
	.numeros-espiral-wrap {
		height: auto;
		max-width: 320px;
	}
	.numeros-espiral-linea {
		display: none;
	}
	.numeros-espiral-isla {
		position: relative;
		left: auto !important;
		top: auto !important;
		width: 100%;
		height: 90px;
		margin-bottom: 14px;
	}
}

/* ===== Número - Padrinos ===== */
.numero-padrinos {
  width: 100%;           /* NUEVO — esto es lo único que hace falta */
  box-sizing: border-box; /* NUEVO — para que el padding no sume por encima del 100% */
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 80px 56px;
}
.numero-padrinos-titulo-row {
  padding-top: 56px; /* separación generosa respecto a numero-cabecera, arriba */
  margin-bottom: 28px;
}
.numero-padrinos-titulo-texto {
  font-family: "Manrope", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--wp--preset--color--yale-blue);
}

.numero-padrinos-lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.numero-padrinos-tarjeta {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 32px;
  background-color: rgba(237, 174, 73, 0.07);
  border-left: 3px solid var(--wp--preset--color--honey-bronze);
}

.numero-padrinos-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(237, 174, 73, 0.3);
}

.numero-padrinos-texto {
  flex: 1;
  min-width: 0;
}

.numero-padrinos-etiqueta {
  font-family: "Manrope", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--honey-bronze);
  margin: 0 0 6px;
}

.numero-padrinos-nombre {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wp--preset--color--yale-blue);
  text-decoration: none;
  margin: 0 0 10px;
}
a.numero-padrinos-nombre:hover {
  color: var(--wp--preset--color--honey-bronze);
  text-decoration: underline;
}

.numero-padrinos-bio {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4a5d6a;
  margin: 0 0 14px;
  max-width: 100%; /* antes: 640px fijo — ahora se adapta al ancho real de .numero-padrinos-texto */
}

.numero-padrinos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Modificador sobre .numero-chip (definido en el CSS de numero-mosaico):
   mismo componente visual, pero algo más compacto para que quepan varias
   cápsulas por fila dentro de la tarjeta de padrino. Ajusta el tamaño si
   al verlo en vivo no coincide con las proporciones reales de .numero-chip. */
.numero-chip-padrino {
  font-size: 0.9em;
}
.numero-chip-padrino .numero-chip-inner {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}

@media (max-width: 640px) {
  .numero-padrinos {
    padding: 8px 24px 40px;
  }
  .numero-padrinos-tarjeta {
    flex-direction: column;
    gap: 16px;
  }
}

/* Nuevo — el Header no tenía logo, solo el texto "CARACOL NOCTURNO" */
.header-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-logo {
  width: 48px;  /* antes: 36px */
  height: 48px; /* antes: 36px */
  flex-shrink: 0;
  display: block;
}
.header-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ===================================================================
   ARCHIVO DE CATEGORÍA — Destacada y Zigzag: tarjeta completa clicable
   Requiere haber activado antes "Enlazar al artículo" en el bloque
   Título de la entrada (categoria-destacada-titulo y
   categoria-zigzag-titulo) — sin eso, no hay ningún <a> al que
   engancharle este truco.

   Mismo patrón que ya usáis en Entrevistas & Relatos de la Home
   (.entrevista-relato-titulo a::after) y en Archivo de Poesía.
   =================================================================== */

/* Los contenedores necesitan position:relative para que el ::after
   con inset:0 se ancle a ELLOS, no a otro ancestro más arriba */
.categoria-destacada-card {
  position: relative;
}
.categoria-zigzag-card {
  position: relative;
}

/* El título, una vez sea un <a> real, se comporta como enlace normal... */
.categoria-destacada-titulo a,
.categoria-zigzag-titulo a {
  color: inherit;
  text-decoration: none;
}

/* ...y su ::after se estira para cubrir TODA la tarjeta (imagen incluida) */
.categoria-destacada-titulo a::after,
.categoria-zigzag-titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Ligero feedback visual al pasar el ratón por cualquier parte de la tarjeta */
.categoria-destacada-card:hover,
.categoria-zigzag-card:hover {
  box-shadow: 0 8px 32px rgba(0, 109, 119, 0.11);
  transition: box-shadow 0.25s;
}

/* El nombre del autor y las etiquetas de categoría (Relatos, Cultura...)
   deben seguir siendo clicables de forma independiente — si no, el
   ::after de arriba (z-index:1) los tapa y solo se podría ir a la
   entrada, nunca al autor ni a la categoría por separado */
.categoria-destacada-meta .wp-block-post-author-name a,
.categoria-zigzag-meta .wp-block-post-author-name a,
.categoria-zigzag-eyebrow a {
  position: relative;
  z-index: 2;
}

/* Interruptor temporal para ocultar tarjetas sin borrarlas —
   quitar la clase "temporal-oculto" en el bloque cuando haya
   contenido real para rellenar el hueco */
.temporal-oculto {
  display: none !important;
}

.categoria-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px 24px;
  max-width: 1440px;
  margin: 0 auto;
  gap: 28px;
}
.categoria-vacio img {
  width: 220px;
  height: 220px;
  opacity: 0.5;
}
.categoria-vacio p {
  font-family: "Lora", serif;
  font-style: italic;
  color: var(--wp--preset--color--text-muted);
  font-size: 1.3rem;
  line-height: 1.7;
  max-width: 480px;
  margin: 0;
}

/* Oculta "MÁS EN ESTA SECCIÓN" + su línea cuando no hay resultados */
.categoria-zigzag-separador:has(+ .categoria-zigzag-lista .categoria-vacio) {
  display: none;
}

/* ===================================================================
   CAPA RESPONSIVA CONSOLIDADA  (añadida en auditoría móvil)
   -------------------------------------------------------------------
   El tema es "desktop first": casi todos los contenedores de ancho
   completo llevan un padding lateral fijo de 80px pensado para 1440px.
   En un móvil de 375px eso deja ~215px útiles (80+80 = 160px comidos
   solo por el padding). Este bloque, al final de la hoja, sobreescribe
   ESE padding y unos pocos layouts de rejilla/columnas fijas que nunca
   llegaban a apilarse. No toca ninguna regla de escritorio: solo actúa
   por debajo de los breakpoints indicados.

   Breakpoints:
     <= 900px  (tablet)  gutters 80px -> 48px
     <= 780px  (apila tarjetas de columna fija)
     <= 600px  (móvil)   gutters -> 20px + ajustes de componentes
   Se usa !important donde la regla base también lo usa (p.ej.
   .section-container, .categoria-cabecera, .wp-block-query:has(...)),
   para poder ganarle sin subir especificidad artificialmente.
   =================================================================== */

/* ---------- TABLET: reduce los gutters de 80px a 48px ---------- */
@media (max-width: 900px) {
  .section-container,
  .hero-slide-content,
  .archivo-poesia-cabecera,
  .archivo-poesia-contenedor,
  .busqueda-cabecera,
  .busqueda-pills-inner,
  .busqueda-resultados-zona,
  .categoria-cabecera,
  .categoria-lista,
  .categoria-destacada,
  .categoria-zigzag-separador,
  .categoria-zigzag-lista,
  .contacto-cabecera,
  .contacto-cuerpo,
  .autor-cabecera,
  .autor-lista,
  .autor-lista-vacio,
  .pagina-cabecera,
  .numero-cabecera,
  .numero-poemas-lista,
  .numero-padrinos,
  .wp-block-query-pagination,
  .wp-block-query:has(.entrevistas-relatos-list) {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* La sidebar de filtros deja de ser sticky cuando el layout ya es
     de una sola columna (regla base a 900px), o queda flotando */
  .archivo-poesia-sidebar {
    position: static;
  }
}

/* ---------- Apila tarjetas con columna de imagen de ancho fijo ----------
   .entrevista-relato-card (grid 280px 1fr) y .categoria-post-card
   (columna imagen flex:0 0 280px) nunca se apilaban: en móvil dejaban
   la imagen a 280px y el texto espachurrado en el hueco restante.
   Las tarjetas destacada/zigzag ya se apilaban en su propio bloque 780px. */
@media (max-width: 780px) {
  .entrevista-relato-card {
    grid-template-columns: 1fr !important;
  }
  /* La imagen va en position:absolute dentro de su columna; al apilar,
     la columna necesita una altura propia o colapsaría a 0 */
  .entrevista-relato-card > .wp-block-column:first-child {
    aspect-ratio: 16 / 9;
  }

  .categoria-post-card {
    flex-direction: column !important;
  }
  .categoria-post-card > .wp-block-column:first-child,
  .categoria-post-card > .wp-block-column:last-child {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }

  /* Footer (rediseño móvil): centrado y simétrico en vez de todo pegado a
     la izquierda. El masthead se apila y se centra; la marca coloca el
     logo ENCIMA del nombre; los iconos sociales y los dos menús se centran.
     (El comportamiento de "sin hamburguesa" va en el bloque de 600px.) */
  .footer-masthead {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 24px;
  }
  .footer-brand {
    flex-direction: column;   /* logo arriba, texto debajo */
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer-masthead .wp-block-social-links {
    justify-content: center !important;
    width: 100%;
  }
  .footer-nav {
    justify-content: center !important;
    gap: 56px !important;
    flex-wrap: wrap;
    text-align: center;
  }
  .footer-nav .footer-col {
    text-align: center;
  }
  .footer-bottom-row p.footer-muted {
    text-align: center !important;
  }
}

/* ---------- MÓVIL: gutters mínimos + ajustes de componentes ---------- */
@media (max-width: 600px) {
  .section-container,
  .hero-slide-content,
  .archivo-poesia-cabecera,
  .archivo-poesia-contenedor,
  .busqueda-cabecera,
  .busqueda-pills-inner,
  .busqueda-resultados-zona,
  .categoria-cabecera,
  .categoria-lista,
  .categoria-destacada,
  .categoria-zigzag-separador,
  .categoria-zigzag-lista,
  .contacto-cabecera,
  .contacto-cuerpo,
  .autor-cabecera,
  .autor-lista,
  .autor-lista-vacio,
  .pagina-cabecera,
  .numero-cabecera,
  .numero-poemas-lista,
  .numero-padrinos,
  .wp-block-query-pagination,
  .wp-block-query:has(.entrevistas-relatos-list) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* La línea fina bajo la cabecera de sección estaba insetada 80px por
     lado; con gutters de 20px se quedaba flotando en el centro */
  .section-header::after {
    left: 0 !important;
    right: 0 !important;
  }

  /* "Lo último": 3 -> 2 (base 900px) -> 1 columna */
  .lo-ultimo-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  /* Márgenes internos de las tarjetas Entrevistas & Relatos: 36px por
     lado es demasiado en un móvil estrecho */
  .entrevista-relato-categoria { margin-left: 20px !important; margin-right: 20px !important; }
  .entrevista-relato-titulo,
  .entrevista-relato-extracto { margin-left: 20px !important; margin-right: 20px !important; }
  .entrevista-relato-meta { margin-left: 20px !important; margin-right: 20px !important; }

  /* Navegación anterior/siguiente (poema y entrada): 2 -> 1 columna */
  .poema-navegacion,
  .entrada-navegacion {
    grid-template-columns: 1fr !important;
  }
  .poema-navegacion-item:first-child {
    border-right: none;
    border-bottom: 3px solid var(--wp--preset--color--yale-blue);
  }
  .poema-navegacion-siguiente,
  .entrada-navegacion-siguiente {
    text-align: left !important;
  }

  /* Hero: alto y controles pensados para desktop. Bajamos alto, acercamos
     puntos/contador a los bordes y ocultamos las flechas (los puntos
     bastan para navegar y despejan la vista en pantallas pequeñas) */
  .hero-carousel {
    height: 460px;
  }
  .hero-slide-content {
    padding-bottom: 44px !important;
  }
  .hero-carousel-prev,
  .hero-carousel-next {
    display: none;
  }
  .hero-carousel-dots {
    right: 20px !important;
    bottom: 20px;
  }
  .hero-carousel-counter {
    left: 20px !important;
    bottom: 20px;
  }

  /* Barras de cabecera de poema/entrada (breadcrumb + compartir) */
  .poema-cabecera-inner,
  .entrada-cabecera-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 12px;
  }
  .poema-cabecera-actual,
  .entrada-cabecera-actual {
    max-width: 120px;
  }

  /* Tarjetas flotantes de búsqueda y contacto: padding interior más ajustado */
  .busqueda-cabecera-card {
    padding: 28px 22px !important;
  }
  .contacto-cabecera-card {
    padding: 30px 24px !important;
  }
  .busqueda-boton {
    padding: 14px 18px !important;
  }

  /* Cabecera de autor: avatar + texto apilados */
  .autor-cabecera-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  /* Filas de la lista de autor: dejan de forzar la columna de 160px */
  .autor-lista-tarjeta {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .autor-lista-tarjeta-top {
    width: auto;
  }

  /* CTA de suscripción: menos aire vertical y menos separación entre columnas */
  .cta-suscripcion {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .cta-suscripcion-grid {
    gap: 32px !important;
  }

  /* Columnas de contacto (form + info): reduce el gap de 80px al apilar */
  .contacto-columnas.wp-block-columns {
    gap: 40px !important;
  }

  /* Blob del mosaico de números: 13rem de padding es inviable en móvil */
  .numero-mosaico-blob {
    padding: 3rem 1.5rem !important;
  }
}

/* ===================================================================
   MENÚ MÓVIL (hamburguesa) — desplegable EN LÍNEA, no a pantalla completa
   -------------------------------------------------------------------
   Por defecto el bloque de navegación de WordPress (overlayMenu: mobile)
   abre un diálogo modal a pantalla completa:
       .wp-block-navigation__responsive-container {
         position: fixed; top:0; left:0; right:0; bottom:0;
       }
   y bloquea el scroll con  html.has-modal-open { overflow:hidden }.

   Aquí lo convertimos en un panel que se despliega dentro de la propia
   página, distinto para cada contexto:
     · HEADER  → el header vive en un grupo "sticky" (is-position-sticky),
                 que ya es bloque contenedor posicionado. El panel se
                 ancla a él con position:absolute; top:100%, cayendo a
                 todo el ancho justo debajo de la barra (como un dropdown).
     · FOOTER  → sin posicionar: el menú se expande en el flujo normal
                 (position:static) empujando el contenido del footer.

   Solo actúa por debajo de 600px, que es donde WP muestra la hamburguesa;
   .is-menu-open no existe en escritorio, así que no afecta al desktop.
   =================================================================== */
@media (max-width: 600px) {
  /* No bloquear el scroll de la página: es un desplegable, no un modal */
  html.has-modal-open,
  html.has-modal-open body {
    overflow: auto !important;
  }

  /* Neutraliza el overlay a pantalla completa en el estado abierto */
  .wp-block-navigation__responsive-container.is-menu-open {
    inset: auto !important;
    height: auto !important;
    width: auto !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  }
  /* Reduce el padding-top gigante (pensado para dejar sitio a la X del modal) */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-top: 8px !important;
    align-items: flex-start !important;
  }
  /* La X de cerrar deja de centrarse como en el modal */
  .has-modal-open .wp-block-navigation__responsive-close {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  /* --- HEADER: panel que baja desde arriba, a todo el ancho ---
     Se ancla con position:fixed al viewport (determinista) en vez de
     depender del grupo sticky del header, cuyo bloque contenedor no era
     fiable. Mismo fondo yale-blue que la barra: se lee como si el header
     se expandiera. Altura automática (no ocupa toda la pantalla) y con
     scroll propio si hubiera muchos ítems. */
  header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 100000;
    padding: 16px 24px 24px !important;
    background-color: var(--wp--preset--color--yale-blue) !important;
  }
  /* Legibilidad: enlaces en crema sobre el fondo teal del panel */
  header .wp-block-navigation__responsive-container.is-menu-open a,
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    color: var(--wp--preset--color--cream) !important;
  }
  /* La "mancha de tinta" no se muestra en el desplegable (solo tiene
     sentido en el nav horizontal de escritorio). display:none anula sus
     estados por defecto, :hover y .current-menu-item de una vez. */
  header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content::after {
    display: none !important;
  }

  /* --- FOOTER: menús como lista, sin hamburguesa ---
     IMPORTANTE: requiere poner "Menú superpuesto = Desactivado" (overlay
     off) en CADA bloque de navegación del footer desde el editor del sitio.
     Con el overlay ACTIVO, el bloque no renderiza sus enlaces en móvil
     salvo dentro de un modal a pantalla completa (Interactivity API), y eso
     no se puede rescatar de forma fiable solo con CSS.
     Con el overlay DESACTIVADO el <nav> muestra el <ul> directamente; aquí
     lo colocamos en columna centrada bajo su título. Ocultamos también el
     botón hamburguesa y la X por si quedara algún resto. */
  footer .wp-block-navigation__responsive-container-open,
  footer .wp-block-navigation__responsive-container-close,
  footer .wp-block-navigation__responsive-close {
    display: none !important;
  }
  footer .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;   /* enlaces centrados bajo su título */
  }

  /* --- HAMBURGUESA DEL HEADER: 3 líneas en vez de 2 ---
     El SVG del bloque solo trae 2 trazos (M4 7.5 y M4 15). Lo ocultamos y
     dibujamos 3 líneas con gradientes en un ::before, conservando el área
     de pulsación del botón. */
  header .wp-block-navigation__responsive-container-open svg {
    display: none !important;
  }
  header .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  header .wp-block-navigation__responsive-container-open::before {
    content: "";
    width: 26px;
    height: 16px;
    color: var(--wp--preset--color--cream);
    background:
      linear-gradient(currentColor, currentColor) center top / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center center / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center bottom / 100% 2px no-repeat;
  }
}

/* ===================================================================
   ARCHIVO DE POESÍA — arreglo responsive (scroll horizontal + filtros)
   -------------------------------------------------------------------
   1) SCROLL HORIZONTAL / HUECOS BLANCOS: el layout usaba
      grid-template-columns: 1fr, que en realidad es minmax(auto, 1fr).
      El min-content de la barra de filtros (la lista de autores) hacía
      crecer la pista hasta ~624px y desbordaba el viewport en móvil, con
      scroll horizontal y franjas blancas al hacer scroll/zoom. Con
      minmax(0, 1fr) la pista se limita al ancho real del contenedor y el
      contenido envuelve; el desbordamiento desaparece (verificado a 390px:
      scrollWidth pasa de 644 a 390).
   2) FILTROS: la lista de autores (decenas) dejaba de ser un volcado
      infinito arriba del todo. Ahora es una caja compacta con scroll
      propio, así los poemas quedan a la vista sin bajar una eternidad.
   3) La paginación (13 botones) envuelve en pantallas muy estrechas.
   =================================================================== */
@media (max-width: 900px) {
  .archivo-poesia-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .archivo-poesia-layout > * {
    min-width: 0 !important;
  }
  .archivo-poesia-filtro-lista {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .archivo-poesia-paginacion {
    flex-wrap: wrap !important;
  }
}