/* Tarjetas de artículo (widget de últimos posts y listado del blog) */
.me-posts__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: var(--me-space-block); }
.me-posts__top .me-head { margin-bottom: 0; }
.me-posts__grid { display: grid; gap: var(--me-space-gap); }
@media (min-width: 768px)  { .me-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .me-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.me-post-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.me-post-card__media { aspect-ratio: 16 / 10; margin-bottom: 1.1rem; border-radius: var(--me-radius); }
.me-post-card__media img { height: 100%; transition: transform .6s var(--me-ease); }
.me-post-card:hover .me-post-card__media img { transform: scale(1.04); }
.me-post-card__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: .5rem; font-size: var(--me-fs-small); color: var(--me-color-muted); }
.me-post-card__cat { font-weight: var(--me-fw-semibold); color: var(--me-color-text); }
.me-post-card__title { margin: 0 0 .5rem; font-size: var(--me-fs-h3); line-height: 1.3; }
.me-post-card__title a { text-decoration: none; }
.me-post-card__title a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta es clicable */
.me-post-card__title a:hover { text-decoration: underline; text-decoration-color: var(--me-color-cta); text-decoration-thickness: 2px; }
.me-post-card__excerpt { margin: 0; color: var(--me-color-muted); font-size: .9375rem; }

/* Acento del isotipo bajo la imagen */
.me-post-card__media { border-bottom: 6px solid var(--me-acc, var(--me-color-cta)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Sobre fondo negro (Inicio, pedido del equipo 1-oct): textos en blanco */
.me-section--negro .me-post-card__title a,
.me-section--negro .me-post-card__cat { color: var(--me-color-blanco); }
.me-section--negro :is(.me-post-card__meta, .me-post-card__excerpt, .me-head__intro) { color: rgba(255, 255, 255, .75); }

/* Sobre el celeste del botón (19-oct): textos de las tarjetas en blanco */
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-post-card__title a,
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-post-card__cat { color: var(--me-color-blanco); }
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) :is(.me-post-card__meta, .me-post-card__excerpt) { color: var(--me-color-blanco); }
/* Sobre el verde claro del logo (19-oct): textos de las tarjetas en negro */
:is(.me-section--verde-cta, .me-section--rojo-cta) .me-post-card__title a,
:is(.me-section--verde-cta, .me-section--rojo-cta) .me-post-card__cat,
:is(.me-section--verde-cta, .me-section--rojo-cta) :is(.me-post-card__meta, .me-post-card__excerpt) { color: var(--me-color-negro); }
/* Negro translúcido, como en las tarjetas de colores (29-oct). */
:is(.me-section--verde-cta, .me-section--rojo-cta) :is(.me-post-card__title a, .me-post-card__cat) { color: rgb(0 0 0 / .78); }
:is(.me-section--verde-cta, .me-section--rojo-cta) :is(.me-post-card__meta, .me-post-card__excerpt) { color: rgb(0 0 0 / .7); }
/* Hover del título en las secciones de tarjeta celeste o verde (19-oct, pedido del equipo): en vez
   de subrayarse, el título se encierra en un recuadro blanco (solo el título). Con
   box-decoration-break cada línea lleva su recuadro. El relleno existe siempre (transparente) y se
   compensa con margen negativo, así el texto no salta ni se desalinea al aparecer el recuadro.
   En fondos blancos (página Recursos) se mantiene el subrayado: ahí un recuadro blanco no se vería. */
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-post-card__title { margin-inline: -.3em; }
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-post-card__title a {
  padding: .05em .3em; border-radius: 6px; background: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color var(--me-dur) var(--me-ease), color var(--me-dur) var(--me-ease);
}
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-post-card__title a:hover {
  background: var(--me-color-blanco); color: var(--me-color-negro); text-decoration: none;
}