/* Ajustes de noticias: imágenes siempre encuadradas en sus contenedores. */
img[src*="/uploads/news/"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #e9f2f8;
}

section[aria-label="Noticias destacadas"] {
  isolation: isolate;
}

section[aria-label="Noticias destacadas"] > div,
section[aria-label="Noticias destacadas"] > div > div:first-child {
  width: 100% !important;
}

section[aria-label="Noticias destacadas"] img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

section[aria-label="Noticias destacadas"] img[src*="/uploads/news/"] {
  height: 100% !important;
}

section[aria-label="Listado de noticias"] article,
section[aria-label="Listado de noticias"] article > div {
  overflow: hidden;
}

section[aria-label="Listado de noticias"] img {
  width: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

section[aria-label="Listado de noticias"] img[src*="/uploads/news/"] {
  height: 13rem !important;
  aspect-ratio: 16 / 10;
}

article.mx-auto.max-w-4xl > img {
  width: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

article.mx-auto.max-w-4xl > img[src*="/uploads/news/"] {
  height: clamp(300px, 45vw, 460px) !important;
}

@media (max-width: 640px) {
  section[aria-label="Listado de noticias"] img[src*="/uploads/news/"] {
    height: 12rem !important;
  }

  article.mx-auto.max-w-4xl > img[src*="/uploads/news/"] {
    height: 260px !important;
  }
}

/* ============================================================================
   HERO DE NOTICIAS — legibilidad del texto blanco

   El diseno original pone un degradado oscuro entre la foto y el texto:
       div.absolute.inset-0.bg-gradient-to-r from-[#2e2e2e]/90 ...
   pero hide-floating-icons.css lo apaga, porque su regla para ocultar overlays
   en las tarjetas de noticias usa selectores tan amplios
   (div[class*="absolute"][class*="inset-0"]) que se lleva puesto tambien este.

   Resultado: letras blancas directamente sobre una foto clara, ilegibles.

   Aca se restaura solo el degradado del hero. Las tarjetas de noticias siguen
   sin overlay, que es lo que aquella regla buscaba.
   ============================================================================ */

section[aria-label="Noticias destacadas"] > div > div[class*="absolute"][class*="inset-0"] {
  display: block !important;

  /* Dos capas: una horizontal que cubre la columna de texto, y una vertical
     al pie para que los puntos del carrusel y los controles no se pierdan
     sobre fotos claras. */
  background-image:
    linear-gradient(
      to right,
      rgba(17, 24, 31, 0.94) 0%,
      rgba(17, 24, 31, 0.86) 28%,
      rgba(17, 24, 31, 0.70) 58%,
      rgba(17, 24, 31, 0.40) 100%
    ),
    linear-gradient(
      to top,
      rgba(17, 24, 31, 0.55) 0%,
      rgba(17, 24, 31, 0.00) 42%
    ) !important;
}

/* Red de seguridad: si alguna vez entra una foto muy clara, la sombra sostiene
   el contraste aunque el degradado no alcance. */
section[aria-label="Noticias destacadas"] h1,
section[aria-label="Noticias destacadas"] .max-w-3xl > p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

/* El epigrafe y la fecha venian al 75-80% de opacidad: sobre foto quedaban
   flojos incluso con degradado. */
section[aria-label="Noticias destacadas"] .max-w-3xl > p[class*="uppercase"] {
  color: rgba(255, 255, 255, 0.95) !important;
}

section[aria-label="Noticias destacadas"] .max-w-3xl > p:last-of-type {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* En pantallas angostas el texto ocupa todo el ancho, asi que el degradado
   horizontal no alcanza: el extremo derecho, mas transparente, cae justo
   debajo de la bajada y la deja en 3,9:1, por debajo del minimo AA de 4,5:1.
   Aca se cambia por uno vertical, parejo, que cubre todo el ancho. */
@media (max-width: 767px) {
  section[aria-label="Noticias destacadas"] > div > div[class*="absolute"][class*="inset-0"] {
    background-image:
      linear-gradient(
        to bottom,
        rgba(17, 24, 31, 0.88) 0%,
        rgba(17, 24, 31, 0.76) 45%,
        rgba(17, 24, 31, 0.88) 100%
      ) !important;
  }
}