/* Blog index only. Shared by ES/CA/EN and retained by its generator. */
/* Keep the featured cover complete, including lettering at its edges. */
html body:has(.blog-grid) .card--destacada .card__img {
  height: auto;
  aspect-ratio: 1200 / 630;
}
html body:has(.blog-grid) .card--destacada .card__img img {
  width: 100%; height: 100%; object-fit: contain;
}
html body:has(.blog-grid) .card--destacada:hover .card__img img { transform: none; }
/* Portadas del paquete de imágenes (3:2): rellenan el marco sin barras. */
html body:has(.blog-grid) .card--destacada .card__img img[src*="/img/web/"] { object-fit: cover; }
/* Spacing and surfaces separate cards; no ornamental borders or filetes. */
html body:has(.blog-grid) .blog-grid { border: 0; background: transparent; }
html body:has(.blog-grid) .blog-grid .card { border: 0; }
html body:has(.blog-grid) .card__meta::before { display: none; }
html body:has(.blog-grid) .card__pie { border-top: 0; }
html body:has(.blog-grid) .art-podcast--ficha .art-podcast__barras i { min-width: 0; }
@media (max-width: 700px) {
  /* V4's main gutter and the container gutter used to accumulate. */
  html body:has(.blog-grid) main#contenido { width: 100%; max-width: none; margin-inline: 0; }
  html body:has(.blog-grid) { padding-bottom: calc(var(--v4-dock-clearance, 88px) + env(safe-area-inset-bottom, 0px)); }
  html body:has(.blog-grid) main#contenido > .blog-hero,
  html.v4-legacy body.bravo-v3:has(.blog-grid) main#contenido > .blog-hero:has(> .blog-hero__in) {
    width: 100%; max-width: none;
    padding: 24px 16px 20px;
  }
  html body:has(.blog-grid) .blog-hero__in { width: 100%; min-width: 0; }
  html body:has(.blog-grid) .blog-hero__desc { margin-top: 16px; font-size: 16px; line-height: 1.55; }
  html body:has(.blog-grid) .blog-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-top: 20px;
  }
  html body:has(.blog-grid) .blog-stat__lbl { letter-spacing: .08em; overflow-wrap: anywhere; }
  html body:has(.blog-grid) #contenido .blog-filtros {
    width: calc(100% - 32px); max-width: none; margin: 20px auto 0;
    padding: 0; display: flex; flex-wrap: wrap; gap: 6px;
    overflow: visible; box-shadow: none;
  }
  html body:has(.blog-grid) .blog-filtros button {
    flex: 1 1 auto; min-height: 44px; margin: 0; padding: 8px 12px;
    letter-spacing: .06em; border: 1px solid var(--c-border);
    border-radius: 6px; background: transparent;
  }
  html body:has(.blog-grid) .blog-filtros button[aria-pressed="true"] {
    border-color: currentColor; background: var(--c-gold-bg);
  }
  html body:has(.blog-grid) #contenido .blog-filtros + .container { width: 100%; max-width: none; margin-inline: 0; padding: 20px 12px 32px; }
  html body:has(.blog-grid) .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html body:has(.blog-grid) #contenido .blog-grid .card { min-width: 0; grid-column: auto; padding: 0; }
  html body:has(.blog-grid) #contenido .blog-grid .card__body { padding: 20px 16px; }
  html body:has(.blog-grid) .card__pie { flex-wrap: wrap; gap: 8px 16px; }
  html body:has(.blog-grid) .blog-cta { padding-inline: 16px; }
  html body:has(.blog-grid) .bravo-contact {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    left: 8px; right: 8px; width: auto; max-width: none;
    gap: 2px; padding: 4px;
  }
  html body:has(.blog-grid) .bravo-contact .bravo-clara-teaser { display: none; }
  html body:has(.blog-grid) .bravo-contact > a {
    min-width: 0; min-height: 52px; padding: 5px 2px;
    flex-direction: column; gap: 3px;
  }
  /* Staging inserts this inline fixed link. Keep it in document flow so it
     cannot sit on top of the WhatsApp action or any article. */
  html body:has(.blog-grid) > a[href="/versiones.php"] {
    position: relative !important; left: auto !important; bottom: auto !important;
    z-index: auto !important; display: table; margin: 16px;
  }
}

/* Rejilla real en tableta y escritorio (2026-11-07). Era flex con crecimiento: la fila incompleta se
   estiraba y la última ficha salía a todo el ancho con su portada de 640 px ampliada y recortada en una
   banda. Ahora las fichas miden lo mismo y js/v4-composicion.js reparte la última fila. */
@media (min-width: 701px) {
  html body:has(.blog-grid) .blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body:has(.blog-grid) #contenido .blog-grid .card--destacada { grid-column: span 2; }
}
@media (min-width: 1024px) {
  html body:has(.blog-grid) .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 2026-11-07 · Hueco de ~210 px entre la última fila de artículos y la banda final: se suma el
   padding del contenedor (80) y el margen de la banda (72). */
html body:has(.blog-grid) .container:has(+ .blog-cta) { padding-bottom: clamp(32px, 4vw, 48px); }
html body:has(.blog-grid) .container + .blog-cta { margin-top: 0; }