/* ==========================================================================
   KRAVITTAL — pages/noticias.css
   Archivo de noticias. Medidas del frame «Noticias 20260916» (1920×4498).
   En WordPress esta rejilla pasa a ser un Loop Grid de Elementor Pro sobre
   entradas reales, con la tarjeta como Loop Item; la paginación es la
   nativa del widget. Ver ELEMENTOR-MAPPING.md.
   ========================================================================== */

/* --- 1. Rejilla ----------------------------------------------------------- */
/*  Figma: dos columnas de 639 px, calle de 135 px y 112 px entre filas,
    con la rejilla metida 90 px respecto al contenedor.                     */

.noticias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 7.03vw, 135px);
  row-gap: clamp(2.5rem, 5.83vw, 112px);
  padding-inline: clamp(0px, 4.69vw, 90px);
}


/* --- 2. Tarjeta ----------------------------------------------------------- */

.noticia { display: flex; flex-direction: column; }

.noticia__media {
  position: relative;
  aspect-ratio: 639 / 320;
  overflow: hidden;
}

.noticia__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.noticia:hover .noticia__media img { transform: scale(1.04); }

/* Fecha: caja de 119×35 apoyada en la base de la imagen */
.noticia__fecha {
  position: absolute;
  left: 0;
  bottom: 0;
  min-width: 119px;
  padding: 0.5rem 1.0625rem;
  background: var(--kv-azul-petroleo);
  color: var(--kv-white);
  font-size: var(--kv-fs-base);
  line-height: 1.25;
}

.noticia__titulo {
  padding-top: clamp(1rem, 1.04vw, 20px);
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--kv-champagne-arena);
  transition: color .4s var(--kv-ease);
}

.noticia:hover .noticia__titulo { color: var(--kv-champagne-oscuro); }

.noticia__extracto {
  padding-top: clamp(0.75rem, 1.09vw, 21px);
  max-width: 568px;
}

.noticia__cta { padding-top: clamp(1.25rem, 2.19vw, 42px); }
.noticia__cta .button { min-width: 200px; min-height: 61px; }


/* --- 3. Paginación -------------------------------------------------------- */

.paginacion {
  margin-top: clamp(2.5rem, 6.98vw, 134px);
  text-align: center;
}

.paginacion__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 0.94vw, 18px);
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
}

.paginacion a,
.paginacion span {
  color: var(--kv-azul-petroleo);
  transition: color var(--kv-dur) var(--kv-ease);
}

.paginacion a:hover,
.paginacion a:focus-visible { color: var(--kv-champagne-arena); }

.paginacion [aria-current="page"] { color: var(--kv-champagne-arena); }

.paginacion__sep { color: var(--kv-champagne-arena); }


/* --- 4. Responsive -------------------------------------------------------- */

@media (max-width: 1199px) {
  .noticias { padding-inline: 0; }
}

@media (max-width: 767px) {
  .noticias { grid-template-columns: minmax(0, 1fr); }
  .noticia__cta .button { width: 100%; }
  .paginacion__lista { font-size: var(--kv-fs-h4); }
}