:root{
  --um-font: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --um-text: #1b1b1b;
  --um-muted: #6b7280;
  --um-gap: 16px;
  --um-radius: 14px;
  --um-site-max: 1024px;
  --title-min-hard: 12.5px;
  --date-min: 12px;
}

/* Sección con el mismo ancho y padding lateral que hero */
.um-grid-section{
  font-family: var(--um-font);
  color: var(--um-text);
  margin: 24px auto;
  max-width: var(--um-site-max);
  padding-left: 16px;
  padding-right: 16px;
}

/* Chip centrado estilo burbuja */
.um-grid-header{ display:flex; justify-content:center; margin-bottom:18px; }
.um-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background: var(--chip-bg, #f3f4f6);
  border:1px solid #e5e7eb;
  color: var(--chip-text, #111827);
  font-weight:600; font-size:14px; letter-spacing:.2px; white-space:nowrap;
  text-decoration:none;
}
.um-chip:hover{ background: var(--chip-hover, #e5e7eb); }

/* Grid de cards: 1 columna en mobile, 2 columnas en tablet+ */
.um-grid{ display:grid; grid-template-columns: 1fr; gap: var(--um-gap); }
@media (min-width: 640px){
  .um-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card horizontal 35-65 con sombra (sin bordes) */
.um-grid-card{
  display:grid; grid-template-columns:35% 65%; gap:14px; align-items:stretch;
  background:#fff; border-radius:var(--um-radius);
  box-shadow: 0 6px 24px -12px rgba(0,0,0,.20), 0 2px 8px -4px rgba(0,0,0,.12);
  overflow:hidden; padding:12px;
}

/* Imagen: 16:9 móvil, 4:3 tablet, 16:9 desktop */
.um-card__media{ position:relative; display:block; width:100%; border-radius:calc(var(--um-radius) - 4px); overflow:hidden; background:#f3f4f6; aspect-ratio:16/9; }
.um-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:640px){ .um-card__media{ aspect-ratio:4/3; } }
@media (min-width:960px){ .um-card__media{ aspect-ratio:16/9; } }

/* Contenido: título (arriba), spacer (centro), fecha (abajo) */
.um-card__content{ display:grid; grid-template-rows:auto 1fr auto; align-content:stretch; gap:6px; min-width:0; height:100%; }
.um-card__title{ font-weight:600; line-height:1.2; margin:0; letter-spacing:-0.1px; overflow-wrap:anywhere; text-wrap:balance; font-size:16px; }
@media (min-width:640px){ .um-card__title{ font-size:18px; } }
.um-card__title a{ color:inherit; text-decoration:none; }
.um-card__spacer{ width:100%; }
.um-card__date{ font-weight:300; font-size:13.5px; line-height:1.2; color:var(--um-muted); margin:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; min-height:1.2em; }
@media (min-width:960px){ .um-card__date{ font-size:13px; } }