/* ==========================================================================
   Tarjeta de noticia (inicio, listado del blog y relacionadas en la noticia)
   Esquinas rectas y sin sombras (CM-13). Toda la tarjeta es clicable con un solo enlace (el del título);
   «Leer más →» es solo visual. Variante --horizontal (listado): imagen al 44 % desde 992 px.
   ========================================================================== */
.tarjeta-noticia { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; background: var(--color-blanco); }
.tarjeta-noticia__imagen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gris-fondo); }
.tarjeta-noticia__imagen picture,
.tarjeta-noticia__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tarjeta-noticia__imagen img { object-fit: cover; transition: transform .6s ease; }

.tarjeta-noticia__texto { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 14px; }
.tarjeta-noticia__fecha { font-family: var(--fuente-ui); font-size: .8125rem; line-height: 1.4; color: var(--color-texto-secundario); }
.tarjeta-noticia__titulo {
  margin: 0; font-size: 1.125rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-noticia__enlace { color: var(--color-negro); text-decoration: none; padding-block: 12px; }   /* caja ≥ 44 px (en línea: no cambia el diseño) */
/* El enlace del título cubre toda la tarjeta (área táctil completa) */
.tarjeta-noticia__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta-noticia__enlace:focus-visible { outline: none; }
.tarjeta-noticia:has(.tarjeta-noticia__enlace:focus-visible) { outline: 2px solid var(--color-acento); outline-offset: 4px; }
.tarjeta-noticia__extracto {
  margin: 2px 0 0; font-size: .9375rem; line-height: var(--lh-texto); color: var(--color-texto-secundario);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-noticia__ver-mas {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; min-height: var(--tactil-min);
  font-family: var(--fuente-ui); font-size: .875rem; text-transform: uppercase; color: var(--color-negro);
}
.tarjeta-noticia__flecha { width: 16px; height: 16px; transition: transform var(--transicion); }

@media (hover: hover) and (pointer: fine) {
  .tarjeta-noticia:hover .tarjeta-noticia__imagen img { transform: scale(1.04); }
  .tarjeta-noticia:hover .tarjeta-noticia__enlace { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .tarjeta-noticia:hover .tarjeta-noticia__flecha { transform: translateX(4px); }
}

/* ---------- Variante horizontal (listado del blog) ---------- */
.tarjeta-noticia--horizontal { background: var(--gris-fondo); }
.tarjeta-noticia--horizontal .tarjeta-noticia__imagen { aspect-ratio: 16 / 11; min-height: 200px; background: var(--gris-linea); }
.tarjeta-noticia--horizontal .tarjeta-noticia__texto { gap: 10px; padding: 24px 20px 16px; }
.tarjeta-noticia--horizontal .tarjeta-noticia__titulo { font-size: 1.25rem; line-height: 1.25; }

@media (min-width: 576px) {
  .tarjeta-noticia--horizontal .tarjeta-noticia__imagen { aspect-ratio: 16 / 10; min-height: 220px; }
  .tarjeta-noticia--horizontal .tarjeta-noticia__texto { padding: 28px 28px 20px; }
}
@media (min-width: 992px) {
  .tarjeta-noticia--horizontal { flex-direction: row; min-height: 300px; }
  .tarjeta-noticia--horizontal .tarjeta-noticia__imagen { flex: 0 0 44%; aspect-ratio: auto; min-height: 0; }
  .tarjeta-noticia--horizontal .tarjeta-noticia__texto { flex: 1 1 56%; padding: 32px 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-noticia:hover .tarjeta-noticia__imagen img,
  .tarjeta-noticia:hover .tarjeta-noticia__flecha { transform: none; }
}

/* ---------- Esquinas redondeadas del original ---------- */
.tarjeta-noticia__imagen, .tarjeta-noticia__imagen img { border-radius: var(--radio-tarjeta); }
.tarjeta-noticia__imagen { overflow: hidden; }