/* RIAEJ — mejoras visuales (misma paleta: solo tokens existentes). */

/* M1 · Menú en una sola línea ("La Red", "Ejes temáticos" partían en 2) */
@media (width >= 64rem) {
  .nav__enlace { white-space: nowrap; padding-inline: var(--esp-3); }
  .cabecera__interior { gap: var(--esp-4); }
  .cabecera .buscador input { width: 11rem; }
}

/* M2 · Móvil: barra institucional de 1 línea (la Secretaría ya está en el pie) */
@media (width < 48rem) {
  .barra-institucional__secretaria { display: none; }
  .barra-institucional .fila--entre { justify-content: flex-end; }
}

/* M3 · Móvil: marca compacta y buscador que no aprieta el logo */
@media (width < 40rem) {
  .marca__nombre { display: none; }
  .marca__logo { width: 2.75rem; }
  .cabecera__interior { min-height: 4rem; gap: var(--esp-3); }
  .cabecera .buscador { flex: 1; max-width: 12rem; }
  .cabecera .buscador input { width: 100%; }
}

/* M4 · Portada: el lado derecho vacío del héroe muestra el emblema de la Red */
@media (width >= 64rem) {
  .heroe::after {
    content: ""; position: absolute; z-index: -1;
    right: max(2rem, calc((100vw - 76rem) / 2)); top: 50%;
    width: 26rem; aspect-ratio: 1; transform: translateY(-58%);
    background: url(/images/logo/riaej-logo.png) center / contain no-repeat;
    filter: brightness(0) invert(1); opacity: 0.09;
  }
}

/* M5 · Móvil: cifras 2×2 en vez de 4 filas */
@media (width < 40rem) {
  .cifras { grid-template-columns: 1fr 1fr; gap: var(--esp-5) var(--esp-4); margin-block-start: var(--esp-10); }
  .cifra__valor { font-size: var(--texto-2xl); }
}

/* M6 · Móvil: accesos 2×2 compactos */
@media (width < 40rem) {
  .rejilla--4:has(> .acceso) { grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
  .acceso { padding: var(--esp-4); }
  .acceso__texto { display: none; }
  .acceso__titulo { font-size: var(--texto-base); }
}

/* M7 · Noticias sin imagen: portada institucional en lugar del bloque gris */
.tarjeta__medio:not(:has(img)) {
  position: relative;
  background:
    url(/images/logo/riaej-logo.png) center / 34% no-repeat,
    linear-gradient(140deg, var(--riaej-azul-50), var(--riaej-azul-100));
}
.tarjeta__medio:not(:has(img))::after {
  content: "RIAEJ"; position: absolute; left: var(--esp-4); bottom: var(--esp-3);
  font-family: var(--fuente-display); font-weight: var(--peso-bold);
  font-size: var(--texto-xs); letter-spacing: var(--tracking-etiqueta); color: var(--riaej-azul-600);
}

/* M8 · Destacado principal: la foto de otra noticia ya no compite con el título */
.destacados__item--principal img { filter: grayscale(1) contrast(1.05); opacity: 0.28; }
.destacados__item--principal::before {
  background: linear-gradient(0deg, rgba(0,27,51,0.95) 0%, rgba(0,27,51,0.7) 60%, rgba(0,27,51,0.45) 100%);
}

/* M9 · Móvil: fecha de la actividad arriba, el texto usa todo el ancho */
@media (width < 40rem) {
  .actividad { grid-template-columns: 1fr; gap: var(--esp-3); padding: var(--esp-4); }
  .actividad__fecha-col, .actividad > div:first-child:has(.actividad__fecha) { flex-direction: row; justify-content: flex-start; }
  .actividad__fecha { display: inline-flex; gap: var(--esp-2); min-width: 0; padding: var(--esp-2) var(--esp-3); }
  .actividad__dia { font-size: var(--texto-lg); }
}