/* ============================================================================
   Highsupply · BLOG (ph_simpleblog)
   Portada /blog · tema /blog/[tema] · artículo /blog/[tema]/[slug]

   Reglas del proyecto respetadas:
   - Solo tokens --hs-*: funciona en claro y oscuro sin una sola regla duplicada.
   - Todo en px: iqitthemeeditor pone html{font-size:14px}, así que rem miente.
   - custom_s_1.css pinta `a:link:not(.nav-link):not(.btn)` en #555 con
     especificidad (0,3,1). El reset de abajo va a (0,3,2) para ganarle sin
     recurrir a !important en cada enlace.
   - Warehouse mete 'Lato' en body y en algunos spans: la familia se fuerza
     en el contenedor y en los elementos de texto que heredan mal.
   ========================================================================== */

/* ── Ámbito y reset ───────────────────────────────────────────────────────

   NADA aquí depende del módulo de blog. El ámbito son las clases propias:

   · Los componentes se enganchan por `.hs-blog …`, y para ganarle al gris de
     custom_s_1.css (`a:link:not(.nav-link):not(.btn)`, 0,3,1) se repite su misma
     cadena de :not(), que sube a (0,4,1). Antes esto colgaba del id del body del
     módulo y se caía entero al cambiar de motor de blog.
   · Los reseteos que tocan el LAYOUT (breadcrumb de Warehouse, .page-heading y
     el #inner-wrapper.container) no pueden colgar de `.hs-blog` porque están
     fuera de él, así que se marcan con `body:has(.hs-blog-list|single)`.
     Se usan esas dos clases y no `.hs-blog` a secas a propósito: el buscador
     también pinta tarjetas del blog dentro de un `.hs-blog` y NO debe perder su
     propio breadcrumb ni su contenedor.
*/

.hs-blog a:link:not(.nav-link):not(.btn),
.hs-blog a:visited:not(.nav-link):not(.btn) {
  color: inherit;
  text-decoration: none;
}

.hs-blog {
  font-family: var(--hs-font-body);
  color: var(--hs-text);
  background: var(--hs-bg);
}

/* Warehouse ataca `body p/span/div/a/li` DIRECTAMENTE (0,0,2), así que gana a la
   herencia y mete Inter donde no toca. Hay que devolver la herencia a mano, pero
   SOLO dentro del cuerpo del artículo: si se hace para todo .hs-blog, esta regla
   (0,1,1) le gana a las de los propios componentes, que son de una sola clase
   (0,1,0), y deja sin Archivo Black el precio de la tarjeta de producto, los
   números del índice y el título del estado vacío. Pasó. */
.hs-blog-prose :is(p, span, strong, em, ul, ol, li, td, th, div, a) {
  font-family: inherit;
}

.hs-blog img { max-width: 100%; display: block; }

/* Texto sólo para lectores de pantalla (regiones vivas de "Copiado" y "cargar más") */
.hs-blog-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* El módulo hereda .page-heading / .page-footer / breadcrumb de Warehouse: fuera.
   Ojo con la especificidad: theme.css trae `#wrapper .breadcrumb{display:block}`
   (1,1,0), así que hay que entrar por #wrapper o la regla no gana. La miga de
   pan del artículo la pinta la propia plantilla, con su estilo. */
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #wrapper .breadcrumb,
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #wrapper .page-heading,
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #wrapper .page-footer,
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) .page-heading,
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) .page-footer { display: none; }

:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #content-wrapper,
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #main { padding: 0; margin: 0; }

/* El layout mete un `#inner-wrapper.container` (1280 + 32 de padding) alrededor
   del contenido. Si no se anula, .hs-blog-wrap suma SU gutter encima y la página
   sale a 1216 con el texto a 556px: 64px más estrecha que el resto del sitio.
   Aquí el contenedor único es .hs-blog-wrap, así que el de fuera va a cero.
   El !important no es pereza: highsupply.css trae
   `body:not(#product) .container{padding-left:var(--hs-gutter)!important}`
   para alinear todo el sitio a 1280/32, y sin !important no hay especificidad
   que lo gane. */
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #wrapper > .container,
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #inner-wrapper.container,
:is(body:has(.hs-blog-list), body:has(.hs-blog-single)) #wrapper {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Contenedor ─────────────────────────────────────────────────────────── */

.hs-blog-wrap {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter-mobile);
}
@media (min-width: 768px) {
  .hs-blog-wrap { padding: 0 var(--hs-gutter); }
}

/* ============================================================================
   1 · PORTADA
   ========================================================================== */

.hs-blog-head { padding: 44px 0 28px; }

.hs-blog-head-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

.hs-blog-head-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-bottom: 14px;
}

.hs-blog-h1 {
  font-family: var(--hs-font-display);
  font-size: 72px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  margin: 0;
  text-transform: none;
}

.hs-blog-head-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hs-text-mute);
  max-width: 380px;
  margin: 0;
  padding-bottom: 6px;
}

/* ── Filtros por tema ───────────────────────────────────────────────────── */

.hs-blog-filters {
  margin-top: 32px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hs-blog-filter {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* objetivo táctil: regla del proyecto */
  padding: 9px 15px;
  border-radius: var(--hs-radius-pill);
  border: 1px solid var(--hs-border);
  background: transparent;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text);
  white-space: nowrap;
  transition: border-color var(--hs-dur-fast) var(--hs-ease-out),
              background var(--hs-dur-fast) var(--hs-ease-out),
              color var(--hs-dur-fast) var(--hs-ease-out);
}

.hs-blog-filter:hover { border-color: var(--hs-text); }

.hs-blog .hs-blog-filter.is-active,
.hs-blog .hs-blog-filter.is-active:link:not(.nav-link):not(.btn),
.hs-blog .hs-blog-filter.is-active:visited:not(.nav-link):not(.btn) {
  background: var(--hs-text);
  color: var(--hs-bg);
  border-color: var(--hs-text);
}

/* ── Destacado ──────────────────────────────────────────────────────────── */

.hs-blog-featured { padding: 12px 0 56px; }

.hs-blog-featured-link {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: center;
}

.hs-blog-featured-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--hs-radius-lg);
  background: var(--hs-surface-soft);
  overflow: hidden;
  position: relative;
}

.hs-blog-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hs-dur-slow) var(--hs-ease-out);
}
.hs-blog-featured-link:hover .hs-blog-featured-media img { transform: scale(1.02); }

.hs-blog-featured-h2 {
  font-family: var(--hs-font-display);
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--hs-text);
  margin: 12px 0 0;
}

.hs-blog-featured-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--hs-text-mute);
  max-width: 480px;
  margin: 14px 0 0;
}

.hs-blog-featured-cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text);
}
.hs-blog-featured-cta span { transition: transform var(--hs-dur-fast) var(--hs-ease-out); }
.hs-blog-featured-link:hover .hs-blog-featured-cta span { transform: translateX(4px); }

/* ── Meta de artículo (compartido) ──────────────────────────────────────── */

.hs-blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--hs-text-mute);
  line-height: 1.2;
}
.hs-blog-meta--lg { font-size: 12px; }

.hs-blog-meta-topic {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  font-size: 10px;
}
.hs-blog-meta--lg .hs-blog-meta-topic { font-size: 11px; }

.hs-blog-meta-sep { color: var(--hs-text-mute); }

/* ── Tarjeta de artículo (compartido) ───────────────────────────────────── */

.hs-blog-grid {
  border-top: 1px solid var(--hs-border-soft);
  padding: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 32px;
}

.hs-blog-card { display: block; }

.hs-blog-card-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--hs-radius);
  background: var(--hs-surface-soft);
  overflow: hidden;
  position: relative;
}
.hs-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hs-dur-slow) var(--hs-ease-out);
}
.hs-blog-card:hover .hs-blog-card-media img { transform: scale(1.03); }

.hs-blog-card-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 10px;
  padding: 3px 7px 3px 6px;
}

.hs-blog-card .hs-blog-meta { margin-top: 14px; }

.hs-blog-card-h3 {
  font-family: var(--hs-font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hs-text);
  margin: 8px 0 0;
}
.hs-blog-card:hover .hs-blog-card-h3 { color: var(--hs-accent-text); }

.hs-blog-card-lead {
  font-size: 13px;
  line-height: 1.55;
  color: var(--hs-text-mute);
  margin: 8px 0 0;
}

/* Marcador visual cuando el artículo aún no tiene portada cargada */
.hs-blog-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hs-font-display);
  color: var(--hs-text);
  opacity: 0.10;
  letter-spacing: -0.02em;
  user-select: none;
}
.hs-blog-card-media .hs-blog-ph { font-size: 40px; }
.hs-blog-featured-media .hs-blog-ph { font-size: 76px; }
.hs-blog-hero .hs-blog-ph { font-size: 92px; }

/* ── Cargar más ─────────────────────────────────────────────────────────── */

.hs-blog-more { margin-top: 56px; text-align: center; padding-bottom: 8px; }

.hs-blog-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--hs-radius-pill);
  border: 1px solid var(--hs-border);
  background: transparent;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-text);
  cursor: pointer;
  transition: border-color var(--hs-dur-fast) var(--hs-ease-out),
              background var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-blog-more-btn:hover { border-color: var(--hs-text); background: var(--hs-surface-soft); }
.hs-blog-more-btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ── Estado vacío ───────────────────────────────────────────────────────── */

.hs-blog-empty {
  border-top: 1px solid var(--hs-border-soft);
  padding: 72px 0 96px;
  text-align: center;
}
.hs-blog-empty-title {
  font-family: var(--hs-font-display);
  font-size: 28px;
  line-height: 1.1;
  color: var(--hs-text);
  margin: 0 0 10px;
}
.hs-blog-empty-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hs-text-mute);
  margin: 0 auto;
  max-width: 420px;
}

/* ── Cabecera de tema (/blog/[tema]) ────────────────────────────────────── */

.hs-blog-topic-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hs-text-mute);
  max-width: 560px;
  margin: 18px 0 0;
}

/* ============================================================================
   2 · ARTÍCULO
   ========================================================================== */

.hs-blog-article-head { padding: 40px 0 0; }

.hs-blog-crumbs {
  font-size: 12px;
  color: var(--hs-text-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hs-blog .hs-blog-crumbs a:not(.nav-link):not(.btn) {
  /* Misma altura táctil que el breadcrumb del resto del sitio */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.hs-blog .hs-blog-crumbs a:hover:not(.nav-link):not(.btn) { color: var(--hs-text); }

.hs-blog-title-block { max-width: 860px; margin-top: 28px; }

.hs-blog-article-h1 {
  font-family: var(--hs-font-display);
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  margin: 12px 0 0;
  text-wrap: pretty;
}

.hs-blog-article-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--hs-text-mute);
  margin: 18px 0 0;
  text-wrap: pretty;
}

/* ── Fila de autor ──────────────────────────────────────────────────────── */

.hs-blog-byline {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hs-border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}

.hs-blog-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hs-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hs-font-display);
  font-size: 14px;
  color: var(--hs-text);
  flex: none;
  letter-spacing: 0;
}

.hs-blog-byline-name { font-size: 13px; font-weight: 600; color: var(--hs-text); line-height: 1.3; }
.hs-blog-byline-sub { font-size: 12px; color: var(--hs-text-mute); line-height: 1.4; margin-top: 2px; }

.hs-blog-share { margin-left: auto; display: flex; gap: 8px; flex: none; }

.hs-blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--hs-radius-pill);
  border: 1px solid var(--hs-border);
  background: transparent;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-blog-share-btn:hover { border-color: var(--hs-text); }
/* COLORIZE: --hs-success sobre crema da 3,88:1 en 11px, por debajo de AA.
   El estado se comunica con el texto ("Copiado") y un borde, no con el color. */
.hs-blog-share-btn.is-done { border-color: var(--hs-text); color: var(--hs-text); }

/* Botón de compartir nativo: solo móvil */
.hs-blog-share-native { display: none; }

/* ── Imagen principal ───────────────────────────────────────────────────── */

.hs-blog-hero {
  margin-top: 32px;
  aspect-ratio: 21 / 9;
  border-radius: var(--hs-radius-lg);
  background: var(--hs-surface-soft);
  overflow: hidden;
  position: relative;
}
.hs-blog-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ── Cuerpo · 3 columnas ────────────────────────────────────────────────── */

.hs-blog-body {
  padding: 56px 0 72px;
  display: grid;
  /* El brief pide 200 / 680 / 300 con gap 56. En el ancho de sitio (1280/32)
     eso no cabe, y el resto de páginas manda: mantenemos la rejilla de 1280 y
     el texto se queda en ~620px (≈64 caracteres), dentro del rango bueno. */
  grid-template-columns: 200px minmax(0, 680px) 300px;
  gap: 48px;
  justify-content: space-between;
  align-items: start;
}

/* Columna 1 · Índice */
.hs-blog-toc { position: sticky; top: 96px; align-self: start; }

.hs-blog-toc-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 16px;
}

.hs-blog-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.hs-blog-toc li { display: flex; gap: 8px; align-items: baseline; }

.hs-blog-toc-num {
  font-family: var(--hs-font-display);
  font-size: 11px;
  color: var(--hs-accent-text);
  width: 18px;
  flex: none;
  letter-spacing: 0;
}

.hs-blog .hs-blog-toc-link:not(.nav-link):not(.btn) {
  font-size: 13px;
  line-height: 1.4;
  color: var(--hs-text-mute);
  transition: color var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-blog .hs-blog-toc-link:hover:not(.nav-link):not(.btn) { color: var(--hs-text); }
.hs-blog li.is-current .hs-blog-toc-link:not(.nav-link):not(.btn) {
  color: var(--hs-text);
  font-weight: 600;
}

/* Columna 2 · Texto */
.hs-blog-prose { min-width: 0; }

.hs-blog-prose > p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--hs-text);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.hs-blog-prose h2 {
  font-family: var(--hs-font-display);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--hs-text);
  margin: 40px 0 16px;
  scroll-margin-top: 120px;
}
.hs-blog-prose > *:first-child { margin-top: 0; }

.hs-blog-prose strong { font-weight: 700; color: var(--hs-text); }
.hs-blog-prose em { font-style: italic; }

.hs-blog-prose ul,
.hs-blog-prose ol {
  font-size: 18px;
  line-height: 1.7;
  color: var(--hs-text);
  margin: 0 0 22px;
  padding-left: 22px;
}
.hs-blog-prose li { margin-bottom: 8px; }
.hs-blog-prose li::marker { color: var(--hs-text-mute); }

.hs-blog-prose blockquote {
  margin: 32px 0;
  padding: 28px 32px;
  background: var(--hs-surface-alt);
  border-radius: var(--hs-radius);
  border: 0;
  font-family: var(--hs-font-display);
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hs-text);
}
.hs-blog-prose blockquote p { margin: 0; font: inherit; color: inherit; }

.hs-blog-prose table {
  margin: 28px 0;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 14px;
  color: var(--hs-text);
  background: var(--hs-surface);
}
.hs-blog-prose thead th,
.hs-blog-prose tr:first-child th {
  background: var(--hs-surface-alt);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  text-align: left;
  padding: 12px 16px;
}
.hs-blog-prose td { padding: 12px 16px; border-top: 1px solid var(--hs-border-soft); vertical-align: top; }
.hs-blog-prose tbody td:first-child { font-weight: 700; }
.hs-blog-prose tbody tr:first-child td { border-top: 1px solid var(--hs-border-soft); }

/* Columna 3 · En este artículo */
.hs-blog-aside { position: sticky; top: 96px; align-self: start; min-width: 0; }

.hs-blog-picks {
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  overflow: hidden;
  background: var(--hs-surface);
}

.hs-blog-picks-head {
  padding: 12px 16px;
  background: var(--hs-surface-alt);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}

.hs-blog-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--hs-border-soft);
  min-height: 44px;
  transition: background var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-blog-pick:hover { background: var(--hs-surface-soft); }

.hs-blog-pick-img {
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--hs-surface-soft);
  border-radius: var(--hs-radius-sm);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-blog-pick-img img { width: 100%; height: 100%; object-fit: contain; }

.hs-blog-pick-txt { min-width: 0; flex: 1; }
.hs-blog-pick-brand {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  line-height: 1.2;
}
.hs-blog-pick-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-text);
  line-height: 1.3;
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hs-blog-pick-price {
  font-family: var(--hs-font-display);
  font-size: 15px;
  color: var(--hs-text);
  flex: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.hs-blog-picks-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--hs-border-soft);
  font-size: 11px;
  line-height: 1.5;
  color: var(--hs-text-mute);
}

/* ── Seguir leyendo ─────────────────────────────────────────────────────── */

.hs-blog-next {
  border-top: 1px solid var(--hs-border-soft);
  padding: 64px 0 80px;
}
.hs-blog-next-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 28px;
}
.hs-blog-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* ============================================================================
   3 · MÓVIL (< 768px)
   ========================================================================== */

@media (max-width: 991px) {
  .hs-blog-body {
    /* La tarjeta adelgaza a 260 y el hueco a 32: con 300+40 el texto se quedaba
       en 396px (≈40 caracteres) en una tablet de 800, demasiado corto para leer. */
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
  }
  /* Los dos fuera: el índice y el hueco que lo sustituye cuando el artículo no
     tiene secciones. Si el hueco se queda, ocupa la primera columna y el texto
     cae en la de 300px. */
  .hs-blog-toc,
  .hs-blog-toc-hueco { display: none; }
}

@media (max-width: 767px) {
  /* Portada */
  .hs-blog-head { padding: 28px 0 22px; }
  .hs-blog-head-top { display: block; }
  .hs-blog-h1 { font-size: 40px; line-height: 1; }
  .hs-blog-head-lead { font-size: 13px; max-width: none; margin-top: 16px; padding-bottom: 0; }

  /* Filtros: una fila con scroll, sin padding derecho para que se vea que sigue */
  .hs-blog-filters {
    margin-top: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(var(--hs-gutter-mobile) * -1);
    margin-right: calc(var(--hs-gutter-mobile) * -1);
    padding-left: var(--hs-gutter-mobile);
    padding-right: 0;
  }
  .hs-blog-filters::-webkit-scrollbar { display: none; }
  .hs-blog-filter { flex: none; }
  /* El carril recorta por overflow: sin este respiro el anillo de foco se come
     el borde superior e inferior de la píldora enfocada */
  .hs-blog-filters { padding-top: 4px; padding-bottom: 4px; }

  .hs-blog-featured { padding: 8px 0 36px; }
  .hs-blog-featured-link { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hs-blog-featured-media { aspect-ratio: 4 / 3; }
  .hs-blog-featured-h2 { font-size: 28px; line-height: 1.08; margin-top: 10px; }
  .hs-blog-featured-lead { font-size: 13px; margin-top: 10px; }
  .hs-blog-featured-cta { margin-top: 18px; }

  .hs-blog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-top: 32px;
  }
  .hs-blog-card-h3 { font-size: 20px; }

  .hs-blog-more { margin-top: 36px; }
  .hs-blog-more-btn { width: 100%; }

  .hs-blog-topic-desc { font-size: 13px; margin-top: 14px; }

  /* Artículo */
  .hs-blog-article-head { padding: 24px 0 0; }
  .hs-blog-title-block { margin-top: 18px; }
  .hs-blog-article-h1 { font-size: 34px; line-height: 1.02; }
  .hs-blog-article-lead { font-size: 15px; margin-top: 14px; }

  .hs-blog-byline { margin-top: 22px; padding-top: 18px; gap: 10px; }
  .hs-blog-avatar { width: 28px; height: 28px; font-size: 11px; }
  .hs-blog-share { display: none; }
  .hs-blog-share-native {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--hs-border);
    background: transparent;
    color: var(--hs-text);
    cursor: pointer;
  }
  .hs-blog-share-native svg { width: 17px; height: 17px; }

  .hs-blog-hero { margin-top: 22px; aspect-ratio: 4 / 3; }

  .hs-blog-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 32px 0 48px;
  }
  .hs-blog-prose > p,
  .hs-blog-prose ul,
  .hs-blog-prose ol { font-size: 16px; line-height: 1.7; }
  .hs-blog-prose h2 { font-size: 26px; margin: 32px 0 14px; scroll-margin-top: 90px; }
  .hs-blog-prose blockquote { font-size: 20px; padding: 20px 22px; margin: 26px 0; }
  .hs-blog-prose table { font-size: 13px; display: block; overflow-x: auto; }
  .hs-blog-prose td,
  .hs-blog-prose th { padding: 10px 12px; }

  /* La tarjeta de producto baja debajo del texto, sin el pie de garantía */
  .hs-blog-aside { position: static; margin-top: 36px; }
  .hs-blog-picks-foot { display: none; }

  .hs-blog-next { padding: 44px 0 56px; }
  .hs-blog-next-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hs-blog-next-eyebrow { margin-bottom: 22px; }
}

/* Tablet: la rejilla de 3 cae a 2 antes de caer a 1 */
@media (min-width: 768px) and (max-width: 991px) {
  .hs-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .hs-blog-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-blog-h1 { font-size: 56px; }
  .hs-blog-article-h1 { font-size: 46px; }
  .hs-blog-featured-h2 { font-size: 34px; }
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hs-blog * { transition: none !important; animation: none !important; }
  .hs-blog-card:hover .hs-blog-card-media img,
  .hs-blog-featured-link:hover .hs-blog-featured-media img { transform: none; }
}