/* NEXT 0.5.208 · Popular central: lecturas alineadas y columnas 3/4 automaticas.
   Solo presenta el HTML del modulo existente. No altera su logica ni su exclusion contextual. */
.pg-next .pg-home-popular { min-width: 0; container-type: inline-size; }
.pg-next .pg-home-popular > .pg-home-section-title {
  margin: 0 0 18px; padding: 0 0 10px;
  border-bottom: 1px solid var(--pg-border, #dce4e7);
  color: #174d40; font-size: 1.125rem; font-weight: 700; line-height: 1.3;
}
.pg-next .pg-home-popular .pg-popular__heading { margin: 0 0 12px; color: #174d40; font-size: 1rem; }
.pg-next .pg-home-popular .pg-popular__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; list-style: none; margin: 0; padding: 0;
}
/* Cuatro tarjetas: una sola fila de cuatro cuando hay espacio suficiente.
   Con tres se mantiene la distribución de tres columnas. */
@container (min-width: 820px) {
  .pg-next .pg-home-popular .pg-popular__list:has(> .pg-popular__item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.pg-next .pg-home-popular .pg-popular__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid var(--pg-border, #dce4e7); border-radius: 10px;
  background: var(--pg-surface, #fff);
}
/* El HTML del modulo sitúa el enlace de imagen antes del contenido.
   Grid lo presenta debajo, en una segunda fila alineada entre tarjetas. */
.pg-next .pg-home-popular .pg-popular__image-link {
  display: block; grid-row: 2; align-self: end; width: auto;
  margin: 0 12px 12px;
}
.pg-next .pg-home-popular .pg-popular__image { display: block; width: 100%; }
.pg-next .pg-home-popular .pg-popular__image { aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.pg-next .pg-home-popular .pg-popular__content {
  grid-row: 1; display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 12px;
}
.pg-next .pg-home-popular .pg-popular__text {
  display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0;
}
/* Lecturas al pie del texto, justo encima de todas las imagenes. */
.pg-next .pg-home-popular .pg-popular__meta {
  margin-top: auto; padding-top: 12px; text-align: right;
}
.pg-next .pg-home-popular .pg-popular__hits {
  color: var(--pg-editorial-title-link, #155b95);
  font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pg-next .pg-home-popular .pg-popular__title { color: var(--pg-editorial-title-link, #155b95); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
/* Hover/foco del enlace real de Popular: supera el hover genérico de
   .pg-module en presentations.css, sin afectar a otros módulos. */
.pg-next .pg-home-popular .pg-module .pg-popular__item a.pg-popular__title:is(:hover, :focus-visible) {
  color: #a94f00;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
/* El numero de columnas depende del ancho real del bloque central,
   no del viewport: la portada conserva una barra lateral. */
@container (max-width: 690px) {
  .pg-next .pg-home-popular .pg-popular__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 460px) {
  .pg-next .pg-home-popular .pg-popular__list { grid-template-columns: minmax(0, 1fr); }
}
/* Respaldo responsive para navegadores sin container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .pg-next .pg-home-popular .pg-popular__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .pg-next .pg-home-popular .pg-popular__list { grid-template-columns: minmax(0, 1fr); }
  }
}