/* ==========================================================================
   Archivo de Novedades. Medidas de §3 del spec y §6–9 del inventario de componentes.
   La grilla y la tarjeta viven en components.css: acá solo va lo propio del archivo.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   350px de alto en el original, sin imagen de fondo: es un bloque de texto. */

.nov-hero {
  background-color: var(--color-slate);
  color: var(--color-surface);
  padding-block: var(--space-10);
}

.nov-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nov-hero__eyebrow {
  color: var(--color-primary);
  font-size: var(--text-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-section);
}

.nov-hero__title {
  color: var(--color-surface);
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
}

.nov-hero__lead {
  max-width: 60ch;
  font-size: var(--text-hero-sub);
  font-weight: var(--fw-medium);
  line-height: var(--lh-hero-sub);
}

@media (max-width: 767px) {
  .nov-hero__title {
    /* 44px no entra a 375px. */
    font-size: 32px;
    line-height: 34px;
  }
}

/* --- Archivo ---------------------------------------------------------------
   Fondo #f5f5f5, que es lo que distingue esta página del resto (§6 del spec). */

.nov-archive {
  padding-block: var(--space-9) var(--space-10);
}

.nov-categories {
  margin-bottom: var(--space-9);
}

.nov-categories__title {
  margin-bottom: var(--space-7);
  color: var(--color-ink);
  font-size: var(--text-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-subhead);
}

.nov-empty {
  padding-block: var(--space-9);
  color: var(--color-text);
}

/* --- Cargar más ------------------------------------------------------------- */

.nov-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-9);
}

.nov-more .btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}