/* ==========================================================================
   El Mundo Jurídico — hoja de estilos única del sitio.
   Todo el diseño vive aquí: no hay estilos inline ni bloques <style>.

   Identidad tomada de la plantilla de referencia "Lawyer":
   azul marino profundo + dorado, titulares serif, botones píldora dorados,
   secciones centradas con antetítulo dorado en versalitas.

   Índice:
     1. Variables y base
     2. Tipografía
     3. Botones y utilidades
     4. Header y navegación
     5. Portada: héroe, banda, áreas, cita, cierre
     6. Encabezados de sección y rejillas
     7. Tarjetas de entrada
     8. Archivos: categoría, búsqueda, autor
     9. Entrada individual y páginas
    10. 404
    11. Paginación
    12. Footer
    13. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables y base
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --emj-navy: #1e2a47;
  --emj-navy-2: #16203a;
  --emj-navy-3: #0f172c;
  --emj-gold: #c6a15b;          /* dorado decorativo (iconos, filetes, fondos) */
  --emj-gold-soft: #e3cfa4;
  --emj-gold-ink: #8a6620;      /* dorado legible: 4.5:1 sobre blanco */
  --emj-gold-ink-alt: #7d5c1c;  /* dorado legible sobre fondo crema */

  /* Neutros.
     El sitio se apoya en PAPEL cálido, no en blanco puro: las tarjetas y los
     paneles van en blanco encima, y esa diferencia es la que da profundidad
     y hace que el conjunto lea como una publicación, no como un documento. */
  --emj-bg: #f1eee7;            /* papel: fondo general */
  --emj-bg-alt: #e7e2d7;        /* papel oscuro: bandas alternas */
  --emj-surface: #ffffff;       /* tarjetas y paneles */
  --emj-ink: #171b24;
  --emj-ink-2: #2b3242;
  --emj-muted: #5b6272;         /* 6.0:1 sobre blanco */
  --emj-muted-alt: #575e6e;     /* 6.1:1 sobre el crema */
  --emj-border: #e6e2da;
  --emj-border-strong: #d5cfc3;
  /* Borde de campo sobre fondo blanco: 3.61:1, cumple WCAG 1.4.11 para
     el contorno de un control de formulario (los bordes decorativos de
     arriba no llegan, y no necesitan llegar). */
  --emj-field-line: #7f8798;
  --emj-on-dark: #ffffff;
  --emj-on-dark-muted: #c3cadb; /* 8.6:1 sobre el azul marino */

  /* Tipos: solo fuentes del sistema, sin peticiones externas */
  --emj-serif: Georgia, "Iowan Old Style", "Times New Roman", "Liberation Serif", serif;
  --emj-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --emj-container: 1180px;
  --emj-radius: 4px;
  --emj-radius-pill: 999px;
  --emj-shadow: 0 1px 2px rgba(15, 23, 44, 0.05), 0 10px 30px rgba(15, 23, 44, 0.07);
  --emj-shadow-lg: 0 2px 6px rgba(15, 23, 44, 0.08), 0 22px 50px rgba(15, 23, 44, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--emj-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--emj-ink);
  background-color: var(--emj-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

.emj-container {
  width: 100%;
  max-width: var(--emj-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* La portada va a sangre completa.
   GeneratePress en modo "contenido contenido" limita el ancho en el envoltorio
   .site.grid-container; hay que neutralizarlo ahí, no solo en .site-content. */
.emj-wide .site.grid-container,
.emj-wide .site-content,
.emj-wide #content,
.emj-wide .content-area,
.emj-wide .site-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.emj-wide .inside-article,
.emj-wide .entry-content {
  padding: 0;
  margin: 0;
}

/* GeneratePress (modo "contenedores separados") pone margin-bottom: 50px a cada
   hijo directo de .site-main. Con secciones del color del fondo no se notaba;
   con bandas a sangre completa aparecen como franjas de papel entre bloques. */
.emj-wide .site-main > * {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--emj-serif);
  color: var(--emj-ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

a {
  color: var(--emj-gold-ink);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover,
a:focus {
  color: var(--emj-navy);
}

:focus-visible {
  outline: 3px solid var(--emj-gold-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Botones y utilidades
   -------------------------------------------------------------------------- */
.emj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: var(--emj-radius-pill);
  font-family: var(--emj-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.emj-btn:hover,
.emj-btn:focus {
  transform: translateY(-2px);
}

.emj-btn--gold {
  background-color: var(--emj-gold);
  border-color: var(--emj-gold);
  color: #2a1f08; /* 7.4:1 sobre el dorado */
}

.emj-btn--gold:hover,
.emj-btn--gold:focus {
  background-color: var(--emj-gold-soft);
  border-color: var(--emj-gold-soft);
  color: #2a1f08;
}

.emj-btn--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--emj-on-dark);
}

.emj-btn--ghost:hover,
.emj-btn--ghost:focus {
  background-color: var(--emj-on-dark);
  border-color: var(--emj-on-dark);
  color: var(--emj-navy);
}

.emj-btn--outline {
  background-color: transparent;
  border-color: var(--emj-border-strong);
  color: var(--emj-navy);
  padding: 10px 22px;
}

.emj-btn--outline:hover,
.emj-btn--outline:focus {
  background-color: var(--emj-navy);
  border-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

/* --------------------------------------------------------------------------
   4. Header y navegación

   Estructura editorial de dos niveles, lograda solo con flex `order` y
   `flex-basis` (GeneratePress mete marca, menú y widget en una MISMA fila,
   y con 11 entradas el menú se partía en tres líneas):

     [ marca + lema ]                        [ botón café ]
     ──────────────── filete dorado ────────────────────────
     [           menú centrado en una sola línea           ]
   -------------------------------------------------------------------------- */

/* --- Barra superior --- */
.top-bar {
  background-color: var(--emj-navy-3);
  color: var(--emj-on-dark-muted);
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.top-bar .inside-top-bar {
  padding-block: 6px;
}

.top-bar a {
  color: var(--emj-gold-soft);
}

.top-bar a:hover,
.top-bar a:focus {
  color: var(--emj-on-dark);
}

/* --- Cabecera --- */
.site-header {
  background-color: var(--emj-navy);
  border-bottom: 3px solid var(--emj-gold);
}

.site-header .inside-header {
  max-width: var(--emj-container);
  margin-inline: auto;
  padding: 22px 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0;
}

/* Fila 1: marca a la izquierda, botón de apoyo a la derecha. */
.site-header .site-branding {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.site-header .header-widget {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* Fila 2: el menú ocupa el ancho completo y baja de línea. */
.site-header #site-navigation {
  order: 3;
  flex: 0 0 100%;
  margin-top: 18px;
  border-top: 1px solid rgba(198, 161, 91, 0.35);
}

/* --- Marca --- */
.main-title,
.site-title {
  margin: 0;
  line-height: 1.1;
}

.site-title a,
.main-title a {
  font-family: var(--emj-serif);
  color: var(--emj-on-dark);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-title a:hover,
.main-title a:hover,
.site-title a:focus,
.main-title a:focus {
  color: var(--emj-gold-soft);
}

.site-description {
  color: var(--emj-gold-soft);
  font-family: var(--emj-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 6px 0 0;
  opacity: 0.95;
}

/* --- Botón de apoyo (widget del header) --- */
.site-header .header-widget .widget {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.site-header .header-widget p {
  margin: 0;
  font-size: 0;          /* oculta el separador "|" sin borrar los enlaces */
  line-height: 1;
  display: flex;
  gap: 10px;
  align-items: center;
}

.site-header .header-widget a {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emj-gold-soft);
  border: 1px solid rgba(198, 161, 91, 0.55);
  border-radius: var(--emj-radius-pill);
  padding: 9px 18px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* `.site-header a:hover` del personalizador tambien es terracota. */
.site-header a:hover,
.site-header a:focus {
  color: var(--emj-gold-soft);
}

.site-header .header-widget a:hover,
.site-header .header-widget a:focus {
  background-color: var(--emj-gold);
  border-color: var(--emj-gold);
  color: #2a1f08;
}

/* --- Navegación ---
   El fondo va en .main-navigation (no `transparent`): en móvil GeneratePress
   Premium pinta una cabecera APARTE, .mobile-header-navigation, con su propia
   marca dentro; si se deja transparente, esa barra se ve blanca. */
.main-navigation {
  background-color: var(--emj-navy);
}

.main-navigation .inside-navigation {
  background-color: transparent;
  padding: 0;
}

/* Marca de la cabecera móvil: GeneratePress le da un color propio más
   específico que .main-title, hay que ganarle explícitamente. */
.mobile-header-navigation .navigation-branding .main-title a,
.main-navigation .navigation-branding .main-title a {
  color: var(--emj-on-dark);
  font-family: var(--emj-serif);
  font-weight: 700;
}

.mobile-header-navigation .navigation-branding .main-title a:hover,
.mobile-header-navigation .navigation-branding .main-title a:focus {
  color: var(--emj-gold-soft);
}

.main-navigation .menu-toggle,
.mobile-header-navigation .menu-toggle {
  color: var(--emj-on-dark);
  background-color: transparent;
}

/* Menu justificado: los items se reparten de borde a borde del contenedor.
   Antes ocupaban 1032 de los 1132 disponibles y quedaban amontonados a la
   izquierda con un hueco al final. Al primero se le quita el padding
   izquierdo y al ultimo el derecho, para que el TEXTO cuadre con el borde
   del contenedor y no su relleno. */
/* `#primary-menu` es el DIV .main-nav, no la lista: si no se estira el, la
   lista al 100% sigue midiendo lo que su contenido. */
.main-navigation .inside-navigation > .main-nav {
  flex: 1 1 auto;
}

.main-navigation .main-nav > ul {
  width: 100%;
}

.main-navigation .main-nav ul li a {
  font-family: var(--emj-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--emj-on-dark);
  padding: 15px 9px;
  line-height: 1;
  position: relative;
  white-space: nowrap;
  background-color: transparent;
}

/* Subrayado dorado en lugar del recuadro por defecto de GeneratePress. */
.main-navigation .main-nav ul li a::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 2px;
  background-color: var(--emj-gold);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}

/* El personalizador de GeneratePress conserva el acento del tema ANTERIOR
   (#a83f19, terracota) y lo aplica al hover de los menus como texto rojizo
   sobre pastilla blanca. Sus selectores llevan `:not([class*="current-menu-"])`,
   que suma especificidad, asi que una regla normal pierde: hay que repetir el
   mismo `:not(...)` para recuperar la paleta. Los menus son navy, de modo que
   el color de paso tiene que leerse sobre navy, no sobre blanco. */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li[class*="current-menu"] > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]) > a:focus,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: transparent;
  color: var(--emj-gold-soft);
}

/* La pagina en la que ya estas: pasa a blanco, para que tambien responda. */
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a:focus {
  color: var(--emj-on-dark);
}

/* Submenus: el desplegable venia en terracota, fondo incluido. */
.main-navigation ul ul {
  background-color: var(--emj-navy-2);
}

.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]) > a:focus,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
  color: var(--emj-on-dark);
  background-color: var(--emj-navy);
}

.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li a:focus::after,
.main-navigation .main-nav ul li[class*="current-menu"] > a::after {
  transform: scaleX(1);
}

/* Submenús */
.main-navigation .main-nav ul ul {
  background-color: var(--emj-navy-2);
  box-shadow: var(--emj-shadow-lg);
  border-top: 2px solid var(--emj-gold);
}

.main-navigation .main-nav ul ul li a {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  padding: 11px 16px;
}

.main-navigation .main-nav ul ul li a::after {
  display: none;
}

/* Menú horizontal SOLO en escritorio: en móvil colapsa al hamburguesa. */
@media (min-width: 769px) {
  .main-navigation .main-nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Justificado de borde a borde, pero SOLO cuando los once items caben en una
   linea: los suyos suman 1014px y por debajo de ~1100px de ventana el menu se
   parte en dos filas; con `space-between` la ultima quedaria coja, con un
   item suelto a la izquierda y el resto de la fila vacia. Ahi sigue centrado.
   El primero pierde el relleno izquierdo y el ultimo el derecho para que
   cuadre el TEXTO con el borde del contenedor, no su relleno. */
@media (min-width: 1100px) {
  .main-navigation .main-nav > ul {
    justify-content: space-between;
  }

  .main-navigation .main-nav > ul > li:first-child > a {
    padding-left: 0;
  }

  .main-navigation .main-nav > ul > li:last-child > a {
    padding-right: 0;
  }
}

/* --- Buscador Ajax Search Lite: se trae a la paleta del sitio.
   El plugin pinta con background-image (degradado), así que hay que anularlo
   además del background-color, o el degradado tapa el color nuevo. --- */
div.asl_w,
.asl_w_container {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

div.asl_w .probox {
  background-color: var(--emj-navy-2) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--emj-radius-pill) !important;
  box-shadow: none !important;
}

div.asl_w .probox .promagnifier,
div.asl_w .probox .prosettings {
  background-color: var(--emj-gold) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--emj-radius-pill) !important;
  box-shadow: none !important;
}

div.asl_w .probox .promagnifier .innericon svg,
div.asl_w .probox .prosettings .innericon svg {
  fill: #2a1f08 !important;
}

div.asl_w .probox .proinput input.orig,
div.asl_w .probox .proinput input.autocomplete {
  color: var(--emj-on-dark) !important;
  font-family: var(--emj-sans) !important;
  text-shadow: none !important;
}

div.asl_w .probox .proinput input.orig::placeholder {
  color: var(--emj-on-dark-muted) !important;
}

/* --------------------------------------------------------------------------
   5. Portada
   -------------------------------------------------------------------------- */

/* --- Héroe --- */
.emj-hero {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: var(--emj-navy-3);
  overflow: hidden;
}

/* La imagen destacada de la última entrada actúa como TEXTURA, no como motivo:
   desaturada y oscurecida, cualquier foto del archivo funciona sin competir
   con el titular. */
.emj-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(78%) contrast(88%);
  z-index: -2;
}

.emj-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 16, 32, 0.94) 0%, rgba(11, 16, 32, 0.82) 45%, rgba(11, 16, 32, 0.42) 100%),
    linear-gradient(0deg, rgba(11, 16, 32, 0.55), rgba(11, 16, 32, 0.55));
}

/* El bloque de texto se alinea a la IZQUIERDA dentro del contenedor,
   como en la referencia. No se estrecha el contenedor: se limita el texto. */
.emj-hero__inner {
  padding-block: 96px 120px;
}

.emj-hero__eyebrow,
.emj-hero__title,
.emj-hero__lead,
.emj-hero__actions {
  max-width: 640px;
}

.emj-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emj-gold-soft);
  margin: 0 0 18px;
}

.emj-hero__title {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--emj-on-dark);
  margin: 0 0 20px;
  line-height: 1.05;
  text-wrap: balance;
}

.emj-hero__title em {
  font-style: normal;
  color: var(--emj-gold-soft);
  display: block;
}

.emj-hero__lead {
  font-size: 1.06rem;
  color: var(--emj-on-dark-muted);
  max-width: 46ch;
  margin: 0 0 30px;
}

.emj-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

/* --- Banda del buscador ---
   Va PEGADA al heroe y de lado a lado. Fondo navy oscuro con filete dorado:
   el buscador de ASL ya esta pintado para fondo oscuro mas abajo, asi que
   sobre papel habria que rehacer todo su tematizado. */
.emj-search {
  background-color: var(--emj-surface);
  border-top: 2px solid var(--emj-gold);
  border-bottom: 1px solid var(--emj-border);
}

.emj-search__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-block: 16px;
}

.emj-search__label {
  flex: none;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emj-gold-ink);
  padding-right: 20px;
  border-right: 1px solid var(--emj-border);
}

/* Sobre banda blanca el buscador se invierte: campo claro con borde en vez
   de la pastilla navy, que sobre blanco se lee como una barra negra. Solo
   dentro de .emj-search; en el resto del sitio sigue en su version oscura. */
.emj-search .asl_w .probox {
  background-color: var(--emj-surface) !important;
  border-color: var(--emj-field-line) !important;
}

/* OJO con la especificidad: ASL imprime en la pagina una regla propia
   `#ajaxsearchlite1 .probox .proinput input` con ID. Un selector de clases no
   le gana por mucho !important que lleve (el !important solo desempata entre
   iguales). Hay que repetir el ID. El sufijo es el numero de instancia del
   widget; solo hay una, pero se cubren dos por si se anade otra. */
.emj-search #ajaxsearchlite1 .probox .proinput input,
.emj-search #ajaxsearchlite2 .probox .proinput input {
  color: var(--emj-navy) !important;
}

.emj-search #ajaxsearchlite1 .probox .proinput input.autocomplete,
.emj-search #ajaxsearchlite2 .probox .proinput input.autocomplete {
  color: var(--emj-muted) !important;
}

.emj-search #ajaxsearchlite1 .probox .proinput input::placeholder,
.emj-search #ajaxsearchlite2 .probox .proinput input::placeholder {
  color: var(--emj-muted) !important;
}

/* El campo es blanco como la banda: lo que lo delimita es el borde. */

/* El widget trae anchos propios: aqui manda la banda. */
.emj-search__box {
  flex: 1 1 auto;
  min-width: 0;
}

.emj-search__box .asl_w_container,
.emj-search__box div.asl_w {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* --- Áreas del derecho --- */
/* Banda de navegación por materia: las NUEVE áreas en una sola fila, de lado
   a lado y pegada al abridor. Funciona como índice del archivo, no como una
   rejilla de tarjetas: por eso es compacta y sin descripciones. */
.emj-areas {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  background-color: var(--emj-surface);
  border-bottom: 1px solid var(--emj-border);
}

.emj-area {
  padding: 20px 8px 18px;
  text-align: center;
  border-right: 1px solid var(--emj-border);
  color: inherit;
  transition: background-color 0.22s ease, color 0.22s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}

.emj-areas .emj-area:last-child {
  border-right: 0;
}

.emj-area:hover,
.emj-area:focus {
  background-color: var(--emj-bg);
}

.emj-area__icon {
  display: inline-flex;
  color: var(--emj-gold-ink);
}

.emj-icon {
  width: 26px;
  height: 26px;
}

.emj-area__title {
  font-size: 0.82rem;
  line-height: 1.25;
  margin: 0;
  color: var(--emj-navy);
  hyphens: auto;
}

.emj-area:hover .emj-area__title,
.emj-area:focus .emj-area__title {
  color: var(--emj-gold-ink);
}

/* La banda va pegada a su abridor: forman una sola unidad. */
.emj-section--areas .emj-shero {
  margin-bottom: 0;
}

/* --- Banda de cita --- */
/* --- Epigrafe de seccion --- */
/* Corona el abridor de cada seccion. Va en navy oscuro con filete dorado
   arriba, como la banda "Lo mas reciente": apoyado sobre el navy del abridor
   se lee como una franja propia y no como parte de el. Tipografia mas
   contenida que un bloque de cita suelto: aqui es un apunte, no un
   protagonista, y no debe competir con el titulo de la seccion. */
.emj-epi {
  background-color: var(--emj-navy-3);
  color: var(--emj-on-dark);
  border-top: 2px solid var(--emj-gold);
  padding-block: 26px;
}

.emj-epi__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 18px;
  text-align: center;
}

.emj-epi__text {
  font-family: var(--emj-serif);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  font-style: italic;
  margin: 0;
  border: 0;
  padding: 0;
  line-height: 1.45;
  text-wrap: balance;
}

.emj-epi__source {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emj-gold-soft);
  margin: 0;
  white-space: nowrap;
}

.emj-epi__source cite {
  font-style: normal;
}

/* --- Banda de cierre --- */
.emj-cta {
  background-color: var(--emj-bg-alt);
  border-top: 2px solid var(--emj-gold);
  padding-block: 48px;
}

.emj-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.emj-cta__title {
  font-size: 1.7rem;
  margin: 0 0 6px;
  color: var(--emj-navy);
}

.emj-cta__sub {
  margin: 0;
  color: var(--emj-muted-alt);
}

/* --------------------------------------------------------------------------
   6. Encabezados de sección y rejillas
   -------------------------------------------------------------------------- */
/* Sin padding arriba: TODA sección empieza por su abridor a sangre completa,
   que debe ir pegado al bloque anterior. El aire lo pone el propio abridor
   con su margin-bottom. */
.emj-section {
  padding-block: 0 54px;
}

/* La banda de areas cierra su seccion a sangre: sin el padding inferior queda
   pegada al abridor siguiente, sin franja de papel de por medio. Va con doble
   clase para ganarle tambien a las media queries que reajustan .emj-section. */
.emj-section.emj-section--areas {
  padding-bottom: 0;
}

/* El epigrafe y su abridor son un solo bloque: el margen inferior del shero
   solo debe separar del contenido, no meterse entre cita y titular. */
.emj-epi + .emj-shero {
  border-top: 0;
}

.emj-section--alt {
  background-color: var(--emj-bg-alt);
  border-block: 1px solid var(--emj-border-strong);
}

/* --------------------------------------------------------------------------
   Abridor de sección: texto izquierda + imagen derecha, fundidos.

   La clave de la "fusión" es que el degradado arranca en el MISMO azul del
   panel (opaco) sobre el borde izquierdo de la imagen y se desvanece a
   transparente hacia la derecha. Al coincidir el color de partida con el
   fondo del texto, no existe una costura visible entre ambos.
   -------------------------------------------------------------------------- */
.emj-shero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background-color: var(--emj-navy);
  overflow: hidden;
  min-height: 300px;
  margin-bottom: 40px;
}

/* Va de lado a lado, pero el TEXTO se alinea con el contenedor del sitio
   para que su margen izquierdo coincida con el de las tarjetas de abajo.
   `max()` mantiene el margen mínimo en pantallas estrechas. */
.emj-shero__text {
  position: relative;
  z-index: 2;
  padding-block: 44px;
  padding-inline-end: 40px;
  padding-inline-start: max(24px, calc((100vw - var(--emj-container)) / 2 + 24px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.emj-shero__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--emj-gold-soft);
  margin: 0 0 12px;
}

.emj-shero__title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--emj-on-dark);
  margin: 0;
  padding-bottom: 16px;
  position: relative;
  text-wrap: balance;
}

.emj-shero__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 2px;
  background-color: var(--emj-gold);
}

.emj-shero__sub {
  margin: 16px 0 0;
  color: var(--emj-on-dark-muted);
  font-size: 1rem;
  max-width: 44ch;
}

.emj-shero__actions {
  margin: 24px 0 0;
}

.emj-shero__media {
  position: relative;
  min-height: 220px;
}

.emj-shero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturada para que ninguna foto del archivo compita con el titular:
     en el archivo hay carteles con cifras y viñetas que, a plena saturación,
     se leerían como contenido en vez de como fondo. */
  filter: grayscale(78%) contrast(88%);
}

/* El velo que funde imagen y texto. */
.emj-shero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--emj-navy) 0%,
      rgba(30, 42, 71, 0.96) 16%,
      rgba(30, 42, 71, 0.72) 42%,
      rgba(30, 42, 71, 0.5) 70%,
      rgba(30, 42, 71, 0.4) 100%);
}

.emj-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}

.emj-head__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--emj-gold-ink);
  margin: 0 0 12px;
}

.emj-head__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 0;
  color: var(--emj-navy);
  position: relative;
  padding-bottom: 18px;
}

/* Filete dorado bajo el título, como en la referencia. */
.emj-head__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 66px;
  height: 2px;
  background-color: var(--emj-gold);
}

.emj-head__sub {
  margin: 14px 0 0;
  color: var(--emj-muted);
  font-size: 0.98rem;
}

/* Variante alineada a la izquierda con botón a la derecha. */
.emj-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  max-width: none;
  flex-wrap: wrap;
}

.emj-head--row .emj-head__title::after {
  left: 0;
  transform: none;
}

.emj-grid {
  display: grid;
  gap: 30px;
}

.emj-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.emj-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* --- "4": ocho piezas pequenas en cuatro columnas (Lo ultimo) --- */
/* A ~260px de ancho la tarjeta se queda sin sitio: cuerpo mas apretado,
   titular mas chico y recortado a tres lineas para que las ocho filas
   queden a la misma altura sin depender del largo del titulo. */
.emj-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 20px;
}

.emj-grid--4 > .emj-card .emj-card__body {
  padding: 14px 16px 16px;
}

.emj-grid--4 > .emj-card .emj-card__title {
  font-size: 0.98rem;
  line-height: 1.32;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.emj-grid--4 > .emj-card .emj-card__meta {
  font-size: 11px;
  padding-top: 9px;
}

/* ==========================================================================
   Variantes de presentación de tarjetas.
   Cada sección de la portada usa una, para que la página no sea la misma
   rejilla repetida. El marcado de la tarjeta es SIEMPRE el mismo: solo
   cambia la clase del contenedor.
   ========================================================================== */

/* --- A) "feature": una entrada grande + cuatro apiladas al lado --- */
/* Sin `align-items: start`: las cuatro piezas de la derecha se estiran a filas
   iguales, si no los huecos entre ellas quedan desiguales al dimensionarse
   cada fila por su propio contenido. */
/* Altura FIJA de fila, no `1fr`.
   La destacada abarca `grid-row: span 4`, asi que su alto es la suma de las
   cuatro filas de la derecha. Con `1fr` esas filas las dimensionaba el
   titular mas largo y, como las entradas salen aleatorias, la seccion media
   distinto en cada carga: un titular de cuatro lineas estiraba la destacada
   y le abria un hueco enorme entre el extracto y la fecha.
   Con la fila fija la seccion mide siempre 4x152 + 3x16 = 656px. */
.emj-grid--feature {
  grid-template-columns: 1.4fr 1fr;
  grid-auto-rows: 152px;
  gap: 16px 26px;
}

/* El destacado abarca las cuatro filas de la columna derecha. */
.emj-grid--feature > .emj-card:first-child {
  grid-row: span 4;
}

/* La imagen absorbe el sobrante en vez de dejar un vacio bajo el texto: el
   cuerpo ocupa lo que necesita y la foto se queda con el resto de la altura.
   El 16/10 pasa a ser el MINIMO, no una medida exacta. */
.emj-grid--feature > .emj-card:first-child .emj-card__media {
  aspect-ratio: 16 / 10;
  flex: 1 1 auto;
  min-height: 0;
}

.emj-grid--feature > .emj-card:first-child .emj-card__body {
  flex: 0 0 auto;
}

.emj-grid--feature > .emj-card:first-child .emj-card__title {
  font-size: 1.45rem;
}

.emj-grid--feature > .emj-card:first-child .emj-card__body {
  padding: 26px 28px 28px;
}

.emj-grid--feature > .emj-card:not(:first-child) {
  flex-direction: row;
}

/* La imagen ocupa el 40% del ancho de la tarjeta. `aspect-ratio: auto` anula
   el 16/10 de la tarjeta base para que la imagen llene el alto de la fila. */
.emj-grid--feature > .emj-card:not(:first-child) .emj-card__media {
  flex: 0 0 40%;
  aspect-ratio: auto;
}

.emj-grid--feature > .emj-card:not(:first-child) .emj-card__body {
  padding: 12px 16px;
  justify-content: center;
}

/* Tres lineas como tope: es lo que cabe en la fila fija. Sin el recorte, un
   titular de cuatro lineas se saldria de su tarjeta. */
.emj-grid--feature > .emj-card:not(:first-child) .emj-card__title {
  font-size: 0.92rem;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* En las piezas pequeñas la fecha sobra: hay cuatro y compiten con el titular. */
.emj-grid--feature > .emj-card:not(:first-child) .emj-card__meta {
  display: none;
}

.emj-grid--feature > .emj-card:not(:first-child) .emj-card__excerpt {
  display: none;
}

/* --- B) "list": filas horizontales en DOS columnas --- */
.emj-grid--list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
}

.emj-grid--list > .emj-card {
  flex-direction: row;
}

/* Ancho proporcional, no fijo: a dos columnas los 260px se comian la mitad
   de la tarjeta. `aspect-ratio: auto` deja que la imagen llene el alto. */
.emj-grid--list > .emj-card .emj-card__media {
  flex: 0 0 38%;
  aspect-ratio: auto;
}

.emj-grid--list > .emj-card .emj-card__body {
  padding: 16px 20px;
  justify-content: center;
}

/* Filas bajas: el titular y el extracto se recortan a dos lineas. Sin este
   tope una entrada de titulo largo estiraba toda la fila. */
.emj-grid--list > .emj-card .emj-card__title {
  font-size: 1.08rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.emj-grid--list > .emj-card .emj-card__excerpt {
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.emj-grid--list > .emj-card .emj-card__meta {
  border-top: 0;
  padding-top: 0;
  margin-top: 10px;
}

/* --- C) "overlay": el texto va sobre la imagen --- */
.emj-grid--overlay {
  grid-template-columns: repeat(3, 1fr);
}

.emj-grid--overlay > .emj-card {
  position: relative;
  min-height: 330px;
  border: 0;
}

.emj-grid--overlay > .emj-card .emj-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* La cuarta pieza cierra la seccion a lo ancho de las tres columnas. Es mas
   baja porque en formato panoramico una altura de tarjeta la volveria un
   bloque enorme. */
.emj-grid--overlay > .emj-card:nth-child(4) {
  grid-column: 1 / -1;
  min-height: 260px;
}

.emj-grid--overlay > .emj-card:nth-child(4) .emj-card__title {
  font-size: 1.7rem;
  max-width: 34ch;
}

.emj-grid--overlay > .emj-card:nth-child(4) .emj-card__body {
  padding: 70px 32px 26px;
}

.emj-grid--overlay > .emj-card .emj-card__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  flex: none;
  /* Velo denso: el texto blanco debe ser legible sobre CUALQUIER foto. */
  background: linear-gradient(
    180deg,
    rgba(15, 23, 44, 0) 0%,
    rgba(15, 23, 44, 0.82) 32%,
    rgba(15, 23, 44, 0.97) 100%);
  padding: 60px 22px 22px;
}

.emj-grid--overlay > .emj-card .emj-card__title a {
  color: var(--emj-on-dark);
}

.emj-grid--overlay > .emj-card .emj-card__title a:hover,
.emj-grid--overlay > .emj-card .emj-card__title a:focus {
  color: var(--emj-gold-soft);
}

.emj-grid--overlay > .emj-card .emj-kicker a {
  color: var(--emj-gold-soft);
}

/* Sin esto el kicker heredaba el hover general del kicker (navy), que sobre
   el velo oscuro de esta variante desaparece. El color de paso tambien tiene
   que mirar el fondo sobre el que cae. */
.emj-grid--overlay > .emj-card .emj-kicker a:hover,
.emj-grid--overlay > .emj-card .emj-kicker a:focus {
  color: var(--emj-on-dark);
}

.emj-grid--overlay > .emj-card .emj-card__excerpt {
  display: none;
}

.emj-grid--overlay > .emj-card .emj-card__meta {
  color: var(--emj-on-dark-muted);
  border-top-color: rgba(255, 255, 255, 0.22);
}

/* --- D) "mini": piezas chicas en horizontal, tres por fila ---
   La quinta manera de presentar tarjetas, distinta de las otras cuatro: no
   es vertical con la imagen arriba (esa es "3"/"4"), ni una destacada con
   satelites ("feature"), ni dos columnas anchas ("list"), ni texto sobre la
   foto ("overlay"). Aqui la pieza es pequena y horizontal: miniatura
   cuadrada a la izquierda, titular al lado y nada mas. Sin extracto ni
   fecha, que a este tamano solo estiran. Plano, con filete de 1px: el
   volumen lo ponen las otras secciones. */

.emj-grid--mini {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}

.emj-grid--mini > .emj-card {
  flex-direction: row;
  align-items: stretch;
  box-shadow: none;
}

.emj-grid--mini > .emj-card:hover,
.emj-grid--mini > .emj-card:focus-within {
  box-shadow: none;
  transform: none;
  border-color: var(--emj-gold);
}

/* Cuadrada y fija: con un porcentaje, los titulares de distinto largo
   cambiaban el alto de la fila y la miniatura de cada pieza salia de otro
   tamano. */
.emj-grid--mini > .emj-card .emj-card__media {
  flex: 0 0 78px;
  width: 78px;
  aspect-ratio: 1;
  align-self: center;
  margin: 10px 0 10px 10px;
  border-radius: 3px;
}

.emj-grid--mini > .emj-card .emj-card__body {
  padding: 12px 14px;
  justify-content: center;
}

.emj-grid--mini > .emj-card .emj-kicker {
  font-size: 9px;
  margin-bottom: 5px;
}

.emj-grid--mini > .emj-card .emj-card__title {
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.emj-grid--mini > .emj-card .emj-card__meta {
  display: none;
}

/* La septima cierra la seccion a lo ancho de las tres columnas: misma pieza,
   con la imagen mas grande y con extracto, que ahi si cabe. */
.emj-grid--mini > .emj-card:nth-child(7) {
  grid-column: 1 / -1;
  border-top: 2px solid var(--emj-gold);
}

.emj-grid--mini > .emj-card:nth-child(7) .emj-card__media {
  flex: 0 0 168px;
  width: 168px;
  aspect-ratio: 16 / 10;
  margin: 12px 0 12px 12px;
}

.emj-grid--mini > .emj-card:nth-child(7) .emj-card__body {
  padding: 14px 18px;
}

.emj-grid--mini > .emj-card:nth-child(7) .emj-card__title {
  font-size: 1.2rem;
  margin-bottom: 8px;
  -webkit-line-clamp: 2;
}

.emj-grid--mini > .emj-card:nth-child(7) .emj-card__excerpt {
  margin-bottom: 0;
  max-width: 78ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Tarjetas de entrada
   -------------------------------------------------------------------------- */
/* Las tarjetas llevan sombra SIEMPRE, no solo al pasar el cursor: sobre el
   papel deben tener presencia por sí solas. */
.emj-card {
  position: relative;
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-radius: var(--emj-radius);
  box-shadow: var(--emj-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

/* TODA la tarjeta entra al titular.
   El enlace del titular es un elemento EN LINEA: solo son pulsables las
   letras. En un titular de dos renglones, el hueco entre lineas no lleva a
   ningun sitio, y el resto de la tarjeta -- el margen, la fecha, el aire de
   abajo -- tampoco. Quien pulsa un poco de lado no entra a la entrada.

   Esta capa invisible estira el area del enlace a la tarjeta completa sin
   anadir marcado ni una segunda parada de tabulador: el enlace sigue siendo
   uno solo, y lo que crece es su zona sensible. */
.emj-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* El antetitulo (la materia) lleva su PROPIO enlace y va a otro sitio: tiene
   que quedar por encima de la capa o dejaria de ser pulsable. */
.emj-card .emj-kicker a {
  position: relative;
  z-index: 2;
}

.emj-card:hover,
.emj-card:focus-within {
  box-shadow: var(--emj-shadow-lg);
  border-color: var(--emj-border-strong);
  transform: translateY(-3px);
}

.emj-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--emj-bg-alt);
  overflow: hidden;
}

.emj-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.emj-card:hover .emj-card__media img {
  transform: scale(1.04);
}

.emj-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.emj-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.emj-kicker a {
  color: var(--emj-gold-ink);
}

.emj-kicker a:hover,
.emj-kicker a:focus {
  color: var(--emj-navy);
}

.emj-card__title {
  font-size: 1.13rem;
  line-height: 1.35;
  margin: 0 0 10px;
}

.emj-card__title a {
  color: var(--emj-navy);
}

.emj-card__title a:hover,
.emj-card__title a:focus {
  color: var(--emj-gold-ink);
}

.emj-card__excerpt {
  font-size: 0.93rem;
  color: var(--emj-muted);
  margin: 0 0 16px;
  line-height: 1.62;
}

.emj-card__meta {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emj-muted);
  border-top: 1px solid var(--emj-border);
  padding-top: 12px;
}

.emj-section--alt .emj-card__excerpt,
.emj-section--alt .emj-card__meta {
  color: var(--emj-muted-alt);
}



/* --------------------------------------------------------------------------
   8. Archivos: categoría, búsqueda, autor
   -------------------------------------------------------------------------- */
.emj-archive-head {
  background-color: var(--emj-navy);
  color: var(--emj-on-dark);
  padding-block: 62px;
  text-align: center;
  border-bottom: 3px solid var(--emj-gold);
}

.emj-archive-head__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--emj-gold-soft);
  margin: 0 0 12px;
}

.emj-archive-head__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--emj-on-dark);
  margin: 0;
}

.emj-archive-head__desc {
  margin: 14px auto 0;
  max-width: 62ch;
  color: var(--emj-on-dark-muted);
}

.emj-archive-body {
  padding-block: 48px;
}

.emj-empty {
  text-align: center;
  padding-block: 40px;
  color: var(--emj-muted);
}

.emj-searchform {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 26px auto 0;
}

.emj-searchform input[type="search"] {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--emj-border-strong);
  border-radius: var(--emj-radius);
  font-size: 1rem;
  font-family: inherit;
  color: var(--emj-ink);
  background-color: var(--emj-surface);
}

.emj-searchform input[type="search"]:focus {
  border-color: var(--emj-gold-ink);
  outline: none;
}

/* --------------------------------------------------------------------------
   9. Entrada individual y páginas
   -------------------------------------------------------------------------- */
.single .entry-title,
.page .entry-title {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--emj-navy);
  line-height: 1.15;
  margin-bottom: 14px;
}

.single .entry-meta,
.page .entry-meta {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emj-muted);
}

/* --- Pie de la entrada: materias, etiquetas y navegacion ---
   Venia como cuatro renglones sueltos de versalitas, todos del mismo peso y
   sin separacion del cuerpo del texto. Ahora: un filete lo separa del
   articulo, las taxonomias son fichas y anterior/siguiente son dos piezas
   gemelas con su rotulo. */

/* SOLO el pie: la cabecera de la entrada (fecha y autor) usa la misma clase
   `.entry-meta`, asi que sin `footer.` le caia tambien el filete y el margen. */
footer.entry-meta {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--emj-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

footer.entry-meta .cat-links,
footer.entry-meta .tags-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

footer.entry-meta .cat-links .gp-icon,
footer.entry-meta .tags-links .gp-icon {
  color: var(--emj-gold-ink);
  margin-right: 2px;
}

/* El rotulo existe en el marcado como screen-reader-text: aqui se muestra.
   Un icono de carpeta y otro de etiqueta, solos, no dicen que es cada fila. */
/* GeneratePress fija `position: absolute !important` en .screen-reader-text,
   asi que hay que devolverlo al flujo tambien con !important; si no, el
   rotulo se queda encima de la ficha. */
footer.entry-meta .cat-links > .screen-reader-text,
footer.entry-meta .tags-links > .screen-reader-text {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--emj-muted);
}

/* Fichas: la categoria en navy porque manda, la etiqueta en papel. */
footer.entry-meta .cat-links a,
footer.entry-meta .tags-links a {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  border-radius: var(--emj-radius-pill);
  padding: 5px 12px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

footer.entry-meta .cat-links a {
  background-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

footer.entry-meta .cat-links a:hover,
footer.entry-meta .cat-links a:focus {
  background-color: var(--emj-gold);
  color: #2a1f08;
}

footer.entry-meta .tags-links a {
  background-color: var(--emj-bg-alt);
  border: 1px solid var(--emj-border-strong);
  color: var(--emj-gold-ink-alt);
  text-transform: lowercase;
}

footer.entry-meta .tags-links a:hover,
footer.entry-meta .tags-links a:focus {
  background-color: var(--emj-navy);
  border-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

/* --- Anterior / siguiente --- */
.post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-radius: var(--emj-radius);
  padding: 12px 14px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover,
.post-navigation .nav-previous:focus-within,
.post-navigation .nav-next:focus-within {
  border-color: var(--emj-gold);
  background-color: var(--emj-bg);
}

/* Si solo hay una de las dos (primera o ultima entrada), ocupa su columna y
   no se estira a lo ancho: las dos piezas siempre miden lo mismo. */
.post-navigation .nav-next {
  grid-column: 2;
  text-align: right;
}

.emj-nav__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--emj-muted);
}

/* El titulo recupera caja baja: el `text-transform: uppercase` del pie lo
   dejaba gritando en cuatro renglones. */
.post-navigation .prev a,
.post-navigation .next a {
  font-family: var(--emj-serif);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: normal;
  text-transform: none;
  color: var(--emj-navy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.post-navigation .prev a:hover,
.post-navigation .prev a:focus,
.post-navigation .next a:hover,
.post-navigation .next a:focus {
  color: var(--emj-gold-ink);
}

/* Las flechas de GeneratePress sobran: el rotulo ya dice hacia donde va. */
.post-navigation .gp-icon {
  display: none;
}


/* `.entry-meta a:hover` del personalizador es el azul por defecto de
   GeneratePress (#1e73be): pasa el contraste pero no es del sitio. */
.entry-meta a {
  color: var(--emj-muted);
}

.entry-meta a:hover,
.entry-meta a:focus {
  color: var(--emj-gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Y el titulo de entrada en los listados del padre. */
.entry-title a:hover,
.entry-title a:focus {
  color: var(--emj-gold-ink);
}

.single .entry-content,
.page .entry-content {
  font-size: 1.06rem;
  line-height: 1.78;
}

.single .entry-content h2,
.page .entry-content h2 {
  font-size: 1.65rem;
  color: var(--emj-navy);
  margin-top: 2em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--emj-gold);
  display: inline-block;
}

.single .entry-content h3,
.page .entry-content h3 {
  font-size: 1.3rem;
  color: var(--emj-navy);
  margin-top: 1.7em;
}

.single .entry-content a,
.page .entry-content a {
  color: var(--emj-gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single .entry-content blockquote,
.page .entry-content blockquote {
  border-left: 3px solid var(--emj-gold);
  background-color: var(--emj-bg-alt);
  margin: 1.8em 0;
  padding: 20px 26px;
  font-family: var(--emj-serif);
  font-style: italic;
  color: var(--emj-ink-2);
}

.single .entry-content table,
.page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.95rem;
}

.single .entry-content th,
.single .entry-content td,
.page .entry-content th,
.page .entry-content td {
  border: 1px solid var(--emj-border);
  padding: 10px 12px;
  text-align: left;
}

.single .entry-content th,
.page .entry-content th {
  background-color: var(--emj-bg-alt);
  font-family: var(--emj-sans);
  font-weight: 700;
}

/* La tarjeta es el <article>: así la imagen destacada, que GeneratePress
   imprime FUERA de .inside-article, queda contenida por el mismo borde.
   El padding vive solo en .inside-article (una única fuente, sin duplicar). */
body.single .site-main > article,
body.page .site-main > article {
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-radius: var(--emj-radius);
  overflow: hidden;
}

body.single .inside-article,
body.page .inside-article {
  padding: 36px 44px 40px;
}

/* Imagen destacada: recorte controlado, no un mural que empuja el título.
   440px deja respirar la foto sin que el titular se vaya bajo el pliegue. */
body.single .featured-image img,
body.single .post-image img,
body.page .featured-image img,
body.page .post-image img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: cover;
}

/* Barra lateral */
.widget-area .widget {
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-radius: var(--emj-radius);
  padding: 22px;
  margin-bottom: 26px;
}

.widget-area .widget-title {
  font-size: 1.05rem;
  color: var(--emj-navy);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--emj-gold);
}

/* --------------------------------------------------------------------------
   9 bis. Pagina del autor (/nestor-parisi/)
   --------------------------------------------------------------------------
   Plantilla propia por slug, asi que este bloque no toca ninguna otra pagina.
   Antes era la imagen destacada recortada a lo ancho -- que le cortaba la
   cabeza --, el titular y un parrafo suelto sobre papel. */

.emj-autor__hero {
  background-color: var(--emj-navy-3);
  border-top: 2px solid var(--emj-gold);
  padding-block: 56px 58px;
}

.emj-autor__grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* Retrato cuadrado: la foto de origen ya es 960x960, asi que se ve entera.
   El filete dorado la separa del azul sin ponerle un marco pesado. */
.emj-autor__retrato {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--emj-radius);
  border: 1px solid rgba(198, 161, 91, 0.55);
  box-shadow: var(--emj-shadow-lg);
}

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

.emj-autor__kicker {
  color: var(--emj-gold-soft);
  margin: 0 0 10px;
}

.emj-autor__nombre {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.1;
  color: var(--emj-on-dark);
  margin: 0 0 18px;
  padding-bottom: 16px;
  position: relative;
}

.emj-autor__nombre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 2px;
  background-color: var(--emj-gold);
}

/* La biografia la escribe el usuario desde el escritorio y viene envuelta en
   los <div> del editor clasico: se le da medida de lectura y color legible
   sobre el azul, sin depender de como este maquetada por dentro. */
.emj-autor__bio {
  color: var(--emj-on-dark-muted);
  max-width: 68ch;
  font-size: 1.04rem;
  line-height: 1.7;
}

.emj-autor__bio p:last-child,
.emj-autor__bio div:last-child {
  margin-bottom: 0;
}

/* Cifras del archivo. Se cuentan al vuelo en la plantilla: no hay ni un
   numero escrito a mano. */
.emj-autor__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
}

.emj-autor__datos li {
  margin: 0;
}

.emj-autor__cifra {
  display: block;
  font-family: var(--emj-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--emj-gold-soft);
}

.emj-autor__rotulo {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--emj-on-dark-muted);
}

.emj-autor__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

/* --- Su trabajo --- */
.emj-autor__block {
  background-color: var(--emj-bg-alt);
  padding-block: 46px 54px;
}

.emj-autor__h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--emj-navy);
  margin: 0 0 22px;
  padding-bottom: 12px;
  position: relative;
}

.emj-autor__h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background-color: var(--emj-gold);
}

.emj-autor__mas {
  margin: 28px 0 0;
  text-align: center;
}

/* Sobre el papel oscuro el dorado normal se queda en 4,06:1: aqui va la
   variante alt (4,75:1). */
.emj-autor__mas a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--emj-gold-ink-alt);
}

.emj-autor__mas a:hover,
.emj-autor__mas a:focus {
  color: var(--emj-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Por debajo de 860px las dos columnas dejan el texto en una tira estrecha:
   el retrato se pone arriba y se achica, que aqui es un dato de identidad y
   no la pieza principal. */
@media (max-width: 860px) {
  .emj-autor__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .emj-autor__retrato {
    width: 156px;
  }

  .emj-autor__hero {
    padding-block: 40px 44px;
  }

  .emj-autor__datos {
    gap: 14px 30px;
  }

  .emj-autor__acciones .emj-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   9 ter. Pagina de contacto (/contacto/)
   --------------------------------------------------------------------------
   Plantilla propia por slug: este bloque no toca ninguna otra pagina. Antes
   era un dibujo animado a toda anchura, el titular y dos direcciones sueltas
   separadas por parrafos vacios. */

.emj-contacto__hero {
  background-color: var(--emj-navy-3);
  border-top: 2px solid var(--emj-gold);
  padding-block: 56px 54px;
}

.emj-contacto__inner {
  text-align: center;
}

.emj-contacto__titulo {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  color: var(--emj-on-dark);
  margin: 0 0 18px;
  padding-bottom: 18px;
  position: relative;
}

/* El filete va centrado bajo el titular, no a la izquierda: aqui el bloque
   entero esta centrado y un filete a un lado lo descuadraria. */
.emj-contacto__titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 52px;
  height: 2px;
  background-color: var(--emj-gold);
}

.emj-contacto__lead {
  color: var(--emj-on-dark-muted);
  max-width: 52ch;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* --- Reparto: ilustracion a la izquierda, fichas a la derecha --- */
/* Dos columnas iguales. La ilustracion es 1,26:1, asi que a ~530px de columna
   mide unos 420 de alto, que es justo lo que suman las dos fichas apiladas
   con su hueco: las dos columnas terminan a la misma altura sin forzarlas. */
.emj-contacto__reparto--dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
  max-width: 1060px;
  margin-inline: auto;
}

/* --- Ilustracion de la pagina --- */
/* La imagen destacada se muestra ENTERA: es un dibujo y recortarlo a lo ancho
   le corta medio motivo. Se enmarca como una tarjeta mas del sitio. */
.emj-contacto__ilustracion {
  margin: 0;
  padding: 10px;
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-top: 2px solid var(--emj-gold);
  border-radius: var(--emj-radius);
  box-shadow: var(--emj-shadow);
}

.emj-contacto__ilustracion img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* --- Fichas --- */
.emj-contacto__block {
  padding-block: 46px 56px;
}

/* auto-fit con un minimo: dos fichas se reparten la fila, y si algun dia se
   anade una tercera desde el escritorio la rejilla la coloca sola. */
.emj-contacto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}

/* Dentro del reparto las fichas se apilan: la mitad de la fila no da para dos
   en horizontal, y apiladas cuadran con el alto de la ilustracion.

   El `margin-inline: 0` no es cosmetico: la regla de arriba centra la rejilla
   con margenes AUTOMATICOS, y un margen automatico anula el estirado del
   elemento dentro de su columna. Con el heredado, la columna de fichas se
   encogia a su ancho de contenido (362px de 513) y quedaba descentrada
   respecto a la ilustracion. */
.emj-contacto__reparto--dos .emj-contacto__grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin-inline: 0;
}

.emj-contacto__ficha {
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-top: 2px solid var(--emj-gold);
  border-radius: var(--emj-radius);
  padding: 30px 30px 32px;
  text-align: center;
  box-shadow: var(--emj-shadow);
}

.emj-contacto__icono {
  display: inline-flex;
  color: var(--emj-gold-ink);
  margin-bottom: 14px;
}

.emj-contacto__icono .emj-icon {
  width: 30px;
  height: 30px;
}

.emj-contacto__h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--emj-navy);
  margin: 0 0 14px;
}

.emj-contacto__nota {
  color: var(--emj-muted);
  font-size: 0.95rem;
  margin: 0 0 14px;
}

/* La direccion es la accion de la ficha: se trata como tal, con area de
   pulsacion propia y no como una linea de texto mas. Rompe por cualquier
   sitio porque un correo largo no cabe en 280px. */
.emj-contacto__correo {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--emj-border-strong);
  border-radius: var(--emj-radius-pill);
  font-family: var(--emj-sans);
  font-size: 0.95rem;
  color: var(--emj-navy);
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.emj-contacto__correo:hover,
.emj-contacto__correo:focus {
  background-color: var(--emj-navy);
  border-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

/* Salvavidas del contenido sin forma de fichas. */
.emj-contacto__crudo {
  max-width: 72ch;
  margin-inline: auto;
}

.emj-contacto__pie {
  margin: 34px 0 0;
  text-align: center;
}

.emj-contacto__pie a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--emj-gold-ink);
}

.emj-contacto__pie a:hover,
.emj-contacto__pie a:focus {
  color: var(--emj-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Por debajo de 860px las dos columnas dejan la ilustracion en una tira
   estrecha: pasa arriba, a lo ancho, y las fichas debajo. */
@media (max-width: 860px) {
  .emj-contacto__reparto--dos {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    max-width: 620px;
  }

  .emj-contacto__reparto--dos .emj-contacto__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 640px) {
  .emj-contacto__hero {
    padding-block: 38px 36px;
  }

  .emj-contacto__ficha {
    padding: 24px 20px 26px;
  }

  .emj-contacto__ilustracion {
    padding: 6px;
  }
}

/* --------------------------------------------------------------------------
   10. Página 404
   --------------------------------------------------------------------------
   Antes era un bloque centrado sobre papel que terminaba a media pantalla y
   dejaba el pie flotando. Ahora son tres bandas -- error, materias y ultimo
   publicado -- con el mismo lenguaje que el resto del sitio. */

/* La banda del error usa el navy y el filete dorado de las demas cabeceras:
   el visitante entiende que sigue en el mismo sitio, no en una pagina rota. */
.emj-404__banner {
  background-color: var(--emj-navy-3);
  border-top: 2px solid var(--emj-gold);
  padding-block: 66px 60px;
}

.emj-404__inner {
  text-align: center;
}

.emj-404__code {
  font-family: var(--emj-serif);
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--emj-gold);
  margin: 0;
}

.emj-404__title {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  color: var(--emj-on-dark);
  margin: 8px 0 16px;
}

.emj-404__text {
  color: var(--emj-on-dark-muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* Buscador sobre navy. El campo se queda blanco -- es lo que se pulsa -- pero
   su contorno tiene que verse contra el AZUL, no contra el papel: el borde
   claro de la version normal desaparecia aqui. */
.emj-searchform--dark {
  margin-top: 30px;
}

.emj-searchform--dark input[type="search"] {
  border-color: rgba(255, 255, 255, 0.42);
}

.emj-searchform--dark input[type="search"]:focus {
  border-color: var(--emj-gold);
  outline: 2px solid rgba(198, 161, 91, 0.5);
  outline-offset: 1px;
}

.emj-404__back {
  margin: 20px 0 0;
}

/* --- Bandas inferiores --- */
/* Sin relleno abajo: la banda de materias cierra a sangre, igual que en la
   portada, y encaja con la banda siguiente sin franja de papel de por medio. */
.emj-404__block {
  padding-block: 44px 0;
}

.emj-404__block--alt {
  background-color: var(--emj-bg-alt);
  padding-block: 44px 56px;
}

.emj-404__h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--emj-navy);
  margin: 0 0 22px;
  padding-bottom: 12px;
  position: relative;
}

.emj-404__h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background-color: var(--emj-gold);
}

/* Fichas de categoria. Solo las usa la pagina de busqueda sin resultados. */
.emj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.emj-chips a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--emj-border-strong);
  border-radius: var(--emj-radius-pill);
  font-size: 13px;
  color: var(--emj-navy);
}

.emj-chips a:hover,
.emj-chips a:focus {
  background-color: var(--emj-navy);
  border-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

/* --------------------------------------------------------------------------
   11. Paginación
   -------------------------------------------------------------------------- */
.emj-pagination {
  margin-top: 46px;
  display: flex;
  justify-content: center;
}

.emj-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  margin: 0 4px;
  border: 1px solid var(--emj-border-strong);
  border-radius: var(--emj-radius);
  color: var(--emj-navy);
  font-size: 14px;
  font-weight: 600;
}

.emj-pagination .page-numbers.current,
.emj-pagination .page-numbers:hover {
  background-color: var(--emj-navy);
  border-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

/* --------------------------------------------------------------------------
   11 ter. Contenido relacionado
   --------------------------------------------------------------------------
   Piezas pequenas y de trazo fino: filete de 1px, radio corto, miniatura
   cuadrada y titulo a dos lineas. Van DENTRO de .inside-article, asi que se
   alinean solas con el texto de la entrada. Nada de sombras ni de bloques
   grandes: es un pie de lectura, no otra seccion. */

.emj-related {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--emj-border);
}

.emj-related__kicker {
  color: var(--emj-gold-ink);
  margin-bottom: 4px;
}

.emj-related__title {
  font-family: var(--emj-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--emj-navy);
  margin: 0 0 18px;
}

.emj-related__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.emj-related__item {
  margin: 0;
}

.emj-related__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-radius: var(--emj-radius);
  padding: 8px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.emj-related__link:hover,
.emj-related__link:focus-visible {
  border-color: var(--emj-gold);
  background-color: var(--emj-bg);
}

.emj-related__thumb {
  flex: 0 0 58px;
  width: 58px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--emj-bg-alt);
}

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

.emj-related__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Dos lineas como tope: con titulares de este archivo, sin recorte una pieza
   crecia al triple que su vecina y la rejilla se descuadraba. */
.emj-related__name {
  font-family: var(--emj-serif);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--emj-navy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color 0.18s ease;
}

.emj-related__link:hover .emj-related__name,
.emj-related__link:focus-visible .emj-related__name {
  color: var(--emj-gold-ink);
}

.emj-related__date {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emj-muted);
}

/* --------------------------------------------------------------------------
   11 bis. Comentarios
   --------------------------------------------------------------------------
   El marcado es el de GeneratePress (con sus datos schema.org): aqui solo se
   viste. Idea: la conversacion se lee como una lista, no como una pila de
   cajas. Cada comentario se separa con un filete, no con un borde completo;
   el avatar ancla la columna izquierda y el texto respira a su derecha. */

/* El personalizador de GeneratePress deja 70px por lado en `.comments-area`.
   Se igualan a los 44px de `.inside-article` para que el texto de los
   comentarios caiga en la MISMA columna que el de la entrada: los dos paneles
   estan uno debajo del otro y con medidas distintas se notaba el escalon. */
.separate-containers .comments-area {
  margin-top: 40px;
  padding: 36px 44px 40px;
}

.emj-comments__kicker {
  color: var(--emj-gold-ink);
  margin-bottom: 8px;
}

.comments-title {
  font-family: var(--emj-serif);
  font-size: 1.6rem;
  color: var(--emj-navy);
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--emj-gold);
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list li.comment {
  list-style: none;
  border-top: 1px solid var(--emj-border);
  padding-top: 26px;
  margin-top: 26px;
}

.comment-list > li.comment:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 22px;
}

/* El avatar se saca del flujo y el cuerpo se desplaza: asi la cabecera y el
   texto quedan alineados en la misma columna. En la version por defecto la
   cabecera colgaba fuera de la caja del texto. */
.comment-body {
  position: relative;
  padding-left: 62px;
  background: none;
  border: 0;
}

.comment-meta {
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border: 0;
}

.comment-meta .avatar {
  position: absolute;
  left: 0;
  top: 2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--emj-border-strong);
  background-color: var(--emj-bg-alt);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-author cite.fn {
  font-family: var(--emj-serif);
  font-style: normal;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--emj-navy);
}

/* Cuando el visitante deja su web, el nombre es un enlace: heredaba el dorado
   oscuro del enlace general, que sobre el papel del panel de autor se queda
   en 4,06:1. Va en navy, como los nombres que no son enlace, y el dorado
   (variante alt, 4,75:1 sobre ese papel) se reserva para el hover. */
.comment-author cite.fn a {
  color: var(--emj-navy);
}

.comment-author cite.fn a:hover,
.comment-author cite.fn a:focus {
  color: var(--emj-gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.comment-list li.bypostauthor .comment-author cite.fn a:hover,
.comment-list li.bypostauthor .comment-author cite.fn a:focus {
  color: var(--emj-gold-ink-alt);
}

.comment-metadata,
.comment-metadata a {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emj-muted);
}

.comment-metadata a:hover,
.comment-metadata a:focus {
  color: var(--emj-gold-ink);
}

/* El contenido venia dentro de una caja con borde, separada de su cabecera:
   la agrupacion visual quedaba rota. Aqui es texto corrido. */
.comment-content {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.97rem;
  line-height: 1.72;
}

.comment-content p {
  margin: 0 0 12px;
}

.comment-content p:last-of-type {
  margin-bottom: 14px;
}

/* Responder: con forma de accion, no un texto suelto de 11px. */
.comment-body .reply {
  display: block;
}

.comment-reply-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emj-gold-ink);
  border: 1px solid var(--emj-border-strong);
  border-radius: var(--emj-radius-pill);
  padding: 6px 16px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.comment-reply-link:hover,
.comment-reply-link:focus {
  background-color: var(--emj-navy);
  border-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

/* Respuestas anidadas: un filete a la izquierda en vez de una sangria grande,
   que a partir del tercer nivel dejaba el texto en una columna estrecha. */
.comment-list .children {
  list-style: none;
  margin: 0;
  padding-left: 30px;
  border-left: 2px solid var(--emj-border);
}

.comment-list .children li.comment {
  border-top: 1px dashed var(--emj-border);
}

/* Las respuestas del autor de la entrada se distinguen: panel de papel,
   filete dorado y una etiqueta junto al nombre. */
.comment-list li.bypostauthor > .comment-body {
  background-color: var(--emj-bg-alt);
  border-left: 3px solid var(--emj-gold);
  border-radius: 0 var(--emj-radius) var(--emj-radius) 0;
  padding: 20px 22px 20px 78px;
}

.comment-list li.bypostauthor > .comment-body .avatar {
  left: 22px;
  top: 20px;
}

.comment-list li.bypostauthor .comment-author cite.fn::after {
  content: "Autor";
  font-family: var(--emj-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emj-on-dark);
  background-color: var(--emj-navy);
  border-radius: var(--emj-radius-pill);
  padding: 3px 9px;
  margin-left: 10px;
  vertical-align: 2px;
  white-space: nowrap;
}

.comment-list li.bypostauthor > .comment-body .comment-metadata,
.comment-list li.bypostauthor > .comment-body .comment-metadata a {
  color: var(--emj-muted-alt);
}

/* Los tres colores juntos: en el panel del autor el reposo va sobre papel
   oscuro (dorado alt, 4,75:1) y el hover sobre navy, asi que ahi el texto
   tiene que pasar a blanco (17,81:1). Redefinir solo el reposo dejaba el
   dorado sobre navy en 2,31:1. */
.comment-list li.bypostauthor > .comment-body .comment-reply-link {
  color: var(--emj-gold-ink-alt);
  border-color: var(--emj-field-line);
}

.comment-list li.bypostauthor > .comment-body .comment-reply-link:hover,
.comment-list li.bypostauthor > .comment-body .comment-reply-link:focus {
  background-color: var(--emj-navy);
  border-color: var(--emj-navy);
  color: var(--emj-on-dark);
}

/* --- Formulario --- */
#respond {
  margin-top: 40px;
  background-color: var(--emj-bg);
  border: 1px solid var(--emj-border);
  border-top: 3px solid var(--emj-gold);
  border-radius: var(--emj-radius);
  padding: 24px 20px 22px;
}

#reply-title {
  font-family: var(--emj-serif);
  font-size: 1.3rem;
  color: var(--emj-navy);
  margin: 0 0 6px;
}

#respond .comment-notes,
#respond .logged-in-as {
  font-size: 0.86rem;
  color: var(--emj-muted);
  margin: 0 0 20px;
}

#respond .required {
  color: var(--emj-gold-ink);
}

#respond label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emj-navy);
  margin-bottom: 6px;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
  width: 100%;
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-field-line);
  border-radius: var(--emj-radius);
  color: var(--emj-ink);
  padding: 10px 14px;
  font-size: 0.95rem;
}

#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond input[type="url"]:focus,
#respond textarea:focus {
  border-color: var(--emj-navy);
  outline: 2px solid var(--emj-gold);
  outline-offset: 1px;
}

/* Nombre, correo y web en una fila: el formulario deja de ser una columna
   larga de campos anchos. Va por rejilla sobre el propio formulario, no por
   anchos en porcentaje: el marcado lo genera WordPress como una serie de <p>
   hermanos y no se pueden envolver en un contenedor propio. */
.comment-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
}

.comment-form > * {
  grid-column: 1 / -1;
}

.comment-form > .comment-form-author,
.comment-form > .comment-form-email,
.comment-form > .comment-form-url {
  grid-column: auto;
}

/* El boton: el personalizador de GeneratePress pinta
   `input[type="submit"]` en blanco, y ese selector (elemento + atributo) le
   gana a la clase `.emj-btn--gold`. Hay que nombrar el input. */
#respond input[type="submit"] {
  background-color: var(--emj-gold);
  border-color: var(--emj-gold);
  color: #2a1f08;
}

#respond input[type="submit"]:hover,
#respond input[type="submit"]:focus {
  background-color: var(--emj-gold-soft);
  border-color: var(--emj-gold-soft);
  color: #2a1f08;
}

#respond .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 4px 18px;
}

#respond .comment-form-cookies-consent label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--emj-muted);
  margin: 0;
}

#respond .form-submit {
  margin-bottom: 0;
}

.no-comments {
  color: var(--emj-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .comment-form {
    grid-template-columns: 1fr;
  }

  .comment-form > .comment-form-author,
  .comment-form > .comment-form-email,
  .comment-form > .comment-form-url {
    grid-column: 1 / -1;
  }

  .comment-list .children {
    padding-left: 16px;
  }

  .comment-body {
    padding-left: 52px;
  }

  .comment-meta .avatar {
    width: 38px;
    height: 38px;
  }

  .comment-list li.bypostauthor > .comment-body {
    padding: 16px 16px 16px 64px;
  }

  .comment-list li.bypostauthor > .comment-body .avatar {
    left: 16px;
    top: 16px;
  }
}

/* --------------------------------------------------------------------------
   11 quater. Barra lateral
   --------------------------------------------------------------------------
   No tenia estilo propio: eran los valores por defecto de GeneratePress
   -- paneles blancos sin borde y una lista de enlaces dorados pegados unos a
   otros, sin jerarquia ni separacion. Aqui los paneles se igualan a las
   tarjetas del sitio y la lista pasa a ser una lista de verdad. */

.sidebar .widget {
  background-color: var(--emj-surface);
  border: 1px solid var(--emj-border);
  border-radius: var(--emj-radius);
  padding: 20px 20px 22px;
  margin-bottom: 22px;
}

.sidebar .widget:last-child {
  margin-bottom: 0;
}

/* Mismo tratamiento que los titulos del pie: serif con filete corto. El
   filete no cruza el panel entero, se corta a 36px. */
.sidebar .widget-title {
  font-family: var(--emj-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--emj-navy);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 0;
  position: relative;
}

.sidebar .widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background-color: var(--emj-gold);
}

/* El panel del buscador no lleva titulo: sin esto quedaba con el mismo
   relleno que los demas y se veia hueco por arriba. */
.sidebar .widget_search {
  padding: 12px;
}

/* --- Entradas recientes --- */
.sidebar .widget_recent_entries ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar .widget_recent_entries li {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--emj-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebar .widget_recent_entries li:first-child {
  border-top: 0;
  padding-top: 0;
}

.sidebar .widget_recent_entries li:last-child {
  padding-bottom: 0;
}

/* Navy y no dorado: cinco enlaces dorados seguidos pesaban demasiado y ya no
   se distinguia cual era el titulo y cual el rotulo. El dorado se reserva
   para el color de paso. */
.sidebar .widget_recent_entries li a {
  font-family: var(--emj-serif);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--emj-navy);
}

.sidebar .widget_recent_entries li a:hover,
.sidebar .widget_recent_entries li a:focus {
  color: var(--emj-gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sidebar .widget_recent_entries .post-date {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emj-muted);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
/* El bloque propio y la barra de GeneratePress son un solo pie: mismo fondo,
   sin costura entre ellos. El filete dorado va arriba del todo, una sola vez. */
.emj-footer,
.site-footer,
.site-footer .site-info,
.site-footer .footer-widgets {
  background-color: var(--emj-navy-3);
  color: var(--emj-on-dark-muted);
}

.emj-footer {
  border-top: 3px solid var(--emj-gold);
  padding-block: 54px 44px;
}

/* Reparto: materias / sitio / apoyo. La de materias vale por dos porque su
   lista va partida en dos columnas, asi las tres pesan lo mismo en pantalla. */
.emj-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

/* Titulos de columna: mismo tamano y mismo filete, para que ninguna cabecera
   pese mas que las otras. El filete no cruza la columna entera: se corta a
   36px, si no la de materias (el doble de ancha) parecia el bloque principal. */
.emj-footer__title {
  font-family: var(--emj-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--emj-on-dark);
  margin: 0 0 18px;
  padding-bottom: 12px;
  position: relative;
}

.emj-footer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background-color: var(--emj-gold);
}

.emj-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.emj-footer__list li {
  margin-bottom: 9px;
}

.emj-footer__list a {
  font-size: 0.92rem;
}

/* Diez materias en dos columnas: cinco filas, para que la columna no sea el
   doble de alta que sus vecinas. */
.emj-footer__list--split {
  columns: 2;
  column-gap: 30px;
}

/* --- Columna de apoyo --- */
.emj-footer__supporttext {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 32ch;
}

/* Apilados y del MISMO ancho: `stretch` los iguala al de la columna. Con
   `flex-start` cada uno media lo que su texto y quedaban escalonados. En
   fila no caben: a lo ancho de una columna del pie romperian el renglon. */
.emj-footer__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}

.emj-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 11px;
}

/* Los botones se salen de la regla general de enlaces del pie.
   `.emj-footer a` (clase + elemento) le gana a `.emj-btn--gold` (una clase),
   asi que el texto del boton dorado salia en dorado suave sobre dorado:
   1,59:1. Aqui se le devuelve su color, y al de contorno el suyo en cada
   estado, porque al pasar el cursor su FONDO cambia a blanco. */
.emj-footer a.emj-btn--gold {
  color: #2a1f08;
}

.emj-footer a.emj-btn--gold:hover,
.emj-footer a.emj-btn--gold:focus {
  color: #2a1f08;
  text-decoration: none;
}

.emj-footer a.emj-btn--ghost {
  color: var(--emj-on-dark);
}

.emj-footer a.emj-btn--ghost:hover,
.emj-footer a.emj-btn--ghost:focus {
  color: var(--emj-navy);
  text-decoration: none;
}

.emj-footer__icon {
  display: inline-flex;
}

/* El icono hereda el color del texto del boton, asi que acompana al hover
   sin necesidad de una regla propia. */
.emj-footer__icon svg {
  width: 16px;
  height: 16px;
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* OJO: el bloque propio es .emj-footer, no .site-footer. Sin nombrarlo aqui
   sus enlaces heredaban el dorado oscuro del enlace global (#8a6620, pensado
   para fondo blanco): 3,39:1 sobre el navy del pie, por debajo de AA. Y el
   hover global (navy sobre navy) no cambiaba nada.
   Los tres colores van juntos a proposito: enlace, hover y fondo. */
.emj-footer a,
.site-footer a {
  color: var(--emj-gold-soft); /* 11,64:1 sobre --emj-navy-3 */
}

.emj-footer a:hover,
.emj-footer a:focus,
.site-footer a:hover,
.site-footer a:focus {
  color: var(--emj-on-dark); /* 17,81:1 sobre --emj-navy-3 */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer .widget-title {
  color: var(--emj-on-dark);
  font-family: var(--emj-serif);
  border-bottom: 2px solid var(--emj-gold);
  padding-bottom: 8px;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Materias arriba a lo ancho y las otras dos debajo, una al lado de otra:
     sigue habiendo simetria, con otro reparto. */
  .emj-footer__grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 34px 40px;
  }

  .emj-footer__block--wide {
    grid-column: 1 / -1;
  }

  .emj-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .emj-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .emj-grid--mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .emj-grid--list {
    grid-template-columns: 1fr;
  }

  .emj-grid--list > .emj-card .emj-card__media {
    flex: 0 0 30%;
  }

  /* La fila de nueve no cabe: pasa a dos filas de cinco y cuatro. */
  .emj-areas {
    grid-template-columns: repeat(5, 1fr);
  }

  .emj-areas .emj-area:nth-child(5n) {
    border-right: 0;
  }

  .emj-areas .emj-area:nth-child(-n + 5) {
    border-bottom: 1px solid var(--emj-border);
  }

  .emj-hero__inner {
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .site-header .inside-header {
    padding: 8px 16px;
  }

  .site-header .site-logo img {
    height: 30px;
    width: auto;
    max-height: none;
  }

  /* La barra móvil necesita respiro lateral o la hamburguesa toca el borde. */
  .mobile-header-navigation .inside-navigation,
  .main-navigation .inside-navigation {
    padding-inline: 16px;
  }

  .mobile-header-navigation .navigation-branding .main-title a {
    font-size: 1.15rem;
  }

  .main-navigation .menu-toggle {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--emj-radius-pill);
    padding: 8px 16px;
    margin: 6px 0;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .main-navigation.toggled .menu-toggle {
    background-color: var(--emj-gold);
    border-color: var(--emj-gold);
    color: #2a1f08;
  }

  .main-navigation.toggled .main-nav > ul {
    box-shadow: var(--emj-shadow-lg);
    border-radius: 0 0 var(--emj-radius) var(--emj-radius);
    overflow: hidden;
  }

  .emj-hero {
    min-height: 440px;
  }

  .emj-hero__inner {
    padding-block: 64px 84px;
  }

  .emj-hero__veil {
    background: linear-gradient(0deg, rgba(11, 16, 32, 0.9), rgba(11, 16, 32, 0.78));
  }

  /* Igual que en escritorio: sin padding arriba, el abridor va pegado. */
  .emj-section {
    padding-block: 0 40px;
  }

  .emj-head {
    margin-bottom: 34px;
  }

  .emj-head--row {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Abridor apilado: la imagen pasa arriba y el degradado gira a vertical,
     para que siga fundiéndose con el texto que ahora queda debajo. */
  .emj-shero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .emj-shero__text {
    order: 2;
    padding: 30px 24px 34px;
  }

  .emj-shero__media {
    order: 1;
    min-height: 190px;
  }

  .emj-shero__media::after {
    background:
      linear-gradient(180deg,
        rgba(30, 42, 71, 0.15) 0%,
        rgba(30, 42, 71, 0.5) 45%,
        rgba(30, 42, 71, 0.92) 82%,
        var(--emj-navy) 100%);
  }

  .emj-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  body.single .inside-article,
  body.page .inside-article {
    padding: 26px 20px;
  }

  /* Los comentarios siguen al articulo en cada escalon: si no, a 768px el
     panel de arriba quedaba a 20px y el de abajo a 44. */
  .separate-containers .comments-area {
    padding: 26px 20px 28px;
  }

  #respond {
    padding: 20px 16px 18px;
  }
}

@media (max-width: 640px) {
  .emj-container {
    padding-inline: 16px;
  }

  /* En móvil todas las variantes colapsan a una columna vertical: las
     disposiciones laterales no tienen ancho para sostenerse. */
  .emj-grid--3,
  .emj-grid--2,
  .emj-grid--feature,
  .emj-grid--overlay,
  .emj-grid--mini {
    grid-template-columns: 1fr;
  }

  /* En una columna la ancha vuelve a ser una pieza chica como las demas. */
  .emj-grid--mini > .emj-card:nth-child(7) .emj-card__media {
    flex: 0 0 78px;
    width: 78px;
    aspect-ratio: 1;
    margin: 10px 0 10px 10px;
  }

  .emj-grid--mini > .emj-card:nth-child(7) .emj-card__title {
    font-size: 0.95rem;
  }

  .emj-grid--mini > .emj-card:nth-child(7) .emj-card__excerpt {
    display: none;
  }

  .emj-footer {
    padding-block: 38px 30px;
  }

  .emj-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* A un ancho de movil, dos columnas de enlaces dejan lineas de tres
     caracteres: la lista de materias vuelve a una sola. */
  .emj-footer__list--split {
    columns: 1;
  }

  .emj-search__label {
    display: none;
  }

  .emj-search__inner {
    padding-block: 12px;
  }

  /* En movil la cita se parte en tres lineas: se aprieta para que no se
     coma media pantalla antes del titulo de la seccion. */
  .emj-epi {
    padding-block: 18px;
  }

  .emj-epi__text {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .emj-epi__source {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  /* Estas si aguantan dos columnas: son pequenas y a una sola la seccion
     se convertiria en ocho pantallas de scroll. */
  .emj-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .emj-grid--4 > .emj-card .emj-card__body {
    padding: 12px 13px 14px;
  }

  /* En una sola columna la fila fija de 152px aplastaba las cinco tarjetas y
     el contenido se salia: aqui manda el contenido otra vez. */
  .emj-grid--feature {
    grid-auto-rows: auto;
  }

  .emj-grid--feature > .emj-card:first-child {
    grid-row: auto;
  }

  .emj-grid--feature > .emj-card:first-child .emj-card__media {
    flex: none;
  }

  .emj-grid--feature > .emj-card:not(:first-child),
  .emj-grid--list > .emj-card {
    flex-direction: column;
  }

  .emj-grid--feature > .emj-card:not(:first-child) .emj-card__media,
  .emj-grid--list > .emj-card .emj-card__media {
    flex: none;
    aspect-ratio: 16 / 10;
  }

  .emj-grid--list > .emj-card .emj-card__body {
    padding: 20px 18px 22px;
  }

  /* En móvil, tres columnas: los nombres siguen legibles y la banda no se
     convierte en una lista larga que empuje el contenido. */
  .emj-areas {
    grid-template-columns: repeat(3, 1fr);
  }

  .emj-areas .emj-area:nth-child(3n) {
    border-right: 0;
  }

  .emj-areas .emj-area:not(:nth-last-child(-n + 3)) {
    border-bottom: 1px solid var(--emj-border);
  }

  .emj-area {
    padding: 16px 6px 14px;
    gap: 7px;
  }

  .emj-area__title {
    font-size: 0.74rem;
  }

  .emj-grid {
    gap: 22px;
  }

  body.single .inside-article,
  body.page .inside-article {
    padding: 22px 16px;
  }

  /* Aqui, no en el bloque de 640 de mas arriba: aquel se declara ANTES que el
     de 768 y el de 768 lo pisaba a anchos de movil. */
  .post-navigation {
    grid-template-columns: 1fr;
  }

  .post-navigation .nav-next {
    grid-column: 1;
    text-align: left;
  }

  .emj-related__list {
    grid-template-columns: 1fr;
  }

  .separate-containers .comments-area {
    padding: 22px 16px 24px;
  }

  #respond {
    padding: 18px 14px 16px;
  }

  .site-main {
    padding: 18px 12px;
  }

  .emj-front .site-main {
    padding: 0;
  }

  /* En el telefono la destacada no debe crecer: con 390px de ancho, 440 de
     alto la vuelve un bloque vertical que empuja el titular fuera de vista. */
  body.single .featured-image img,
  body.single .post-image img,
  body.page .featured-image img,
  body.page .post-image img {
    max-height: 300px;
  }
}

/* --------------------------------------------------------------------------
   Menu desplegable en movil
   --------------------------------------------------------------------------
   Va al FINAL del archivo a proposito: asi gana por orden a los bloques de
   768 y 640 de mas arriba sin tener que subir la especificidad a pulso.

   Lo que habia, medido a 390px: el panel salia flotando de 16 a 374 en vez de
   ocupar los 390 (heredaba el relleno lateral de la barra), era transparente
   -- se veia el mismo azul de la cabecera detras y todo leia como una sola
   masa --, los renglones median 42px (por debajo de los 44 minimos para el
   dedo), no habia separadores, y el item activo se marcaba con un filete
   dorado de 340px de ancho que parecia un divisor y no un "estas aqui". */

@media (max-width: 768px) {
  /* A sangre: el margen negativo cancela el relleno de .inside-navigation,
     que es quien dejaba el panel flotando dentro de la barra. */
  #mobile-header .main-nav > ul,
  .main-navigation.toggled .main-nav > ul {
    /* El margen negativo por si solo no basta: la regla de escritorio deja
       la lista en width:100%, o sea el 100% del padre YA con relleno, y el
       panel se quedaba en 358 de 390. Hay que devolverle los 32px. */
    margin-inline: -16px;
    width: calc(100% + 32px);
    padding-bottom: 8px;
    background-color: var(--emj-navy-3);
    border-top: 2px solid var(--emj-gold);
    box-shadow: 0 18px 40px rgba(5, 8, 18, 0.45);
    border-radius: 0;
  }

  #mobile-header .main-nav > ul > li,
  .main-navigation.toggled .main-nav > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #mobile-header .main-nav > ul > li:last-child,
  .main-navigation.toggled .main-nav > ul > li:last-child {
    border-bottom: 0;
  }

  /* 48px de alto util: 15px de relleno arriba y abajo mas la linea. Por
     debajo de 44 el renglon es incomodo de acertar con el pulgar. */
  #mobile-header .main-nav ul li a,
  .main-navigation.toggled .main-nav ul li a {
    display: block;
    padding: 15px 20px;
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: var(--emj-on-dark);
    white-space: normal;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  /* El subrayado de escritorio ocupa el renglon entero aqui y se lee como un
     divisor. En movil el "estas aqui" es un filete VERTICAL a la izquierda,
     que es donde empieza a leerse la linea. */
  #mobile-header .main-nav ul li a::after,
  .main-navigation.toggled .main-nav ul li a::after {
    content: none;
  }

  #mobile-header .main-nav > ul > li > a,
  .main-navigation.toggled .main-nav > ul > li > a {
    border-left: 3px solid transparent;
    padding-left: 17px;
  }

  #mobile-header .main-nav > ul > li[class*="current-menu-"] > a,
  .main-navigation.toggled .main-nav > ul > li[class*="current-menu-"] > a {
    border-left-color: var(--emj-gold);
    color: var(--emj-gold-soft);
    background-color: rgba(255, 255, 255, 0.04);
  }

  /* En una pantalla tactil no hay cursor: el estado que importa es el de
     pulsacion y el del foco por teclado. */
  #mobile-header .main-nav ul li a:hover,
  #mobile-header .main-nav ul li a:focus,
  #mobile-header .main-nav ul li a:active,
  .main-navigation.toggled .main-nav ul li a:hover,
  .main-navigation.toggled .main-nav ul li a:focus,
  .main-navigation.toggled .main-nav ul li a:active {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--emj-gold-soft);
  }

  /* Submenus: sangrados y con un filete tenue, para que se vea que cuelgan
     del item de arriba y no son hermanos suyos. */
  #mobile-header .main-nav ul ul,
  .main-navigation.toggled .main-nav ul ul {
    background-color: rgba(0, 0, 0, 0.22);
  }

  #mobile-header .main-nav ul ul li a,
  .main-navigation.toggled .main-nav ul ul li a {
    padding-left: 36px;
    font-size: 12px;
    color: var(--emj-on-dark-muted);
  }

  /* --- La marca en la barra movil ---
     Medía 18,4px en una barra de 65 y quedaba como una linea de texto mas,
     sin peso de marca. Se sube de tamano y se parte en dos tonos, igual que
     el titular del heroe: "El Mundo" en blanco y la ultima palabra en dorado.
     El envoltorio del dorado lo pone un filtro de PHP y existe tambien en
     escritorio, pero solo se colorea aqui: la cabecera grande no cambia.

     ESTO ES UN ARREGLO, NO SOLO ESTILO. GeneratePress imprime en linea, dentro
     de su propio @media (max-width: 768px):

       .navigation-branding .main-title a,
       .navigation-branding .main-title a:hover,
       .navigation-branding .main-title a:visited { color: #0a0a0a; }

     Ese #0a0a0a es del tema anterior (cabecera blanca) y aqui cae casi negro
     sobre el azul: el nombre se volvia ilegible. Lo delicado es que solo
     pasaba con `:visited`, o sea a quien YA hubiera entrado a la portada;
     en un navegador recien abierto salia blanco y no se reproducia. Por eso
     se declaran los CUATRO estados y se antepone el ID: `a:visited` sin ID
     empata en especificidad con un selector de tres clases, y la hoja de
     GeneratePress se imprime despues, asi que ganaba el empate. */
  #mobile-header .navigation-branding .main-title a,
  #mobile-header .navigation-branding .main-title a:link,
  #mobile-header .navigation-branding .main-title a:visited,
  #mobile-header .navigation-branding .main-title a:hover,
  #mobile-header .navigation-branding .main-title a:focus,
  .main-navigation .navigation-branding .main-title a,
  .main-navigation .navigation-branding .main-title a:link,
  .main-navigation .navigation-branding .main-title a:visited {
    color: var(--emj-on-dark);
    font-size: 21px;
    line-height: 1.2;
  }

  /* La ultima palabra en dorado, como el titular del heroe. El envoltorio lo
     pone un filtro de PHP y existe tambien en escritorio, pero solo se
     colorea aqui: la cabecera grande no cambia. */
  #mobile-header .navigation-branding .main-title a .emj-marca__acento,
  #mobile-header .navigation-branding .main-title a:visited .emj-marca__acento,
  .main-navigation .navigation-branding .main-title a .emj-marca__acento,
  .main-navigation .navigation-branding .main-title a:visited .emj-marca__acento {
    color: var(--emj-gold-soft);
  }

  /* La barra necesita apoyarse en algo o el nombre flota sobre el fondo del
     contenido. Con el menu abierto sobra: ese filete lo pone ya el panel. */
  #mobile-header:not(.toggled) {
    border-bottom: 2px solid var(--emj-gold);
  }

  /* --- La barra: alto propio y margenes iguales a los dos lados ---
     Al fijarle altura al boton, la barra se quedo en 42px de alto -- era el
     boton quien la levantaba -- y el boton pasaba a tocar el borde de arriba
     y el de abajo. La barra necesita su propia altura, no heredarla de lo que
     lleve dentro.

     Y los huecos laterales estaban descompensados: 36px a la izquierda del
     nombre contra 16 a la derecha del boton, porque GeneratePress mete
     margin-left de 10px DOS veces, en .navigation-branding y otra vez en
     .main-title. Se anulan los dos y manda el relleno de la barra. */
  #mobile-header .inside-navigation {
    min-height: 60px;
    align-items: center;
  }

  #mobile-header .navigation-branding,
  #mobile-header .navigation-branding .main-title {
    margin-left: 0;
  }

  /* La altura se le da a la MARCA, no a la barra. .inside-navigation es flex
     con envoltura y tres hijos: marca, boton y la lista del menu, que
     GeneratePress manda a una segunda linea (flex: 0 0 100%). Poniendo el
     min-height en la barra, la primera linea se quedaba en 52 de 60 y el
     sobrante caia entero debajo: el boton salia con 5px arriba y 14 abajo.
     Con la altura en la marca, la primera linea mide 60 exactos y el boton
     se centra de verdad. */
  #mobile-header .navigation-branding {
    display: flex;
    align-items: center;
    min-height: 60px;
  }

  /* GeneratePress deja line-height: 65px en el titulo, que era el alto viejo
     de la barra. Con la barra en 60 descuadra el centrado vertical. */
  #mobile-header .navigation-branding .main-title {
    line-height: 1.2;
  }

  /* El boton medía 51x83 dentro de una barra de 95: desproporcionado. Se le
     da la altura de un control normal y se deja de estirar con la barra: con
     60 de barra le quedan 9px de aire arriba y abajo. */
  #mobile-header .menu-toggle,
  .main-navigation .menu-toggle {
    height: 42px;
    padding: 0 16px;
    margin: 0;
    align-self: center;
    line-height: 1;
  }
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}