/* ══════════ Blog — pieza del molde ══════════
   Va DESPUÉS de sales-page.css, que ya resuelve los colores (:root), la nav y el pie de esta
   vertical. Aquí solo vive la lectura. Ningún color está escrito a mano: todo es var(--…), así
   que la misma hoja viste a cualquier vertical. La copia en website/assets/blog.css la escribe
   _MOLDE/blog/construir.py en cada corrida: edita ESTA, no la copia.

   El modo visual sigue la guía de diseño de las verticales: el cuerpo largo se lee en claro
   (papel y tinta), la nav y el pie se quedan en el oscuro de la marca. */

.blog-main{
  position:relative; z-index:1;
  padding:calc(var(--nav-h, 62px) + clamp(1.5rem, 5vw, 3rem)) clamp(1rem, 4vw, 2rem) clamp(3rem, 8vw, 5rem);
}

/* ── el artículo ── */
.articulo{
  max-width:46rem; margin:0 auto;
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius, 14px); box-shadow:var(--shadow);
  padding:clamp(1.5rem, 6vw, 3.5rem) clamp(1.25rem, 6vw, 3.5rem);
  overflow-wrap:break-word;
}
.articulo__cabeza{ margin-bottom:2rem; }
.articulo__miga{ font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 .9rem; }
.articulo__miga a{ color:var(--primary-deep); }
.articulo h1{
  color:var(--ink); font-size:clamp(1.85rem, 5.5vw, 2.8rem); line-height:1.15;
  font-weight:700; margin:0 0 1rem; padding-bottom:.08em;
}
.articulo__meta{ color:var(--ink-soft); font-size:.92rem; margin:0; }
.articulo__portada{ width:100%; height:auto; border-radius:calc(var(--radius, 14px) * .7); margin:0 0 2rem; }

.articulo__cuerpo{ font-size:1.06rem; line-height:1.8; }
.articulo__cuerpo h2{
  color:var(--ink); font-size:clamp(1.4rem, 3.6vw, 1.85rem); line-height:1.25;
  margin:2.6rem 0 .9rem; padding-bottom:.08em;
}
.articulo__cuerpo h3{ color:var(--ink); font-size:clamp(1.12rem, 2.8vw, 1.3rem); line-height:1.35; margin:2rem 0 .5rem; }
.articulo__cuerpo p{ margin:0 0 1.15rem; }
.articulo__cuerpo a{
  color:var(--primary-deep); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.18em; overflow-wrap:anywhere;
}
.articulo__cuerpo a:hover{ color:var(--primary); }
.articulo__cuerpo strong{ font-weight:600; }
.articulo__cuerpo ul, .articulo__cuerpo ol{ margin:0 0 1.25rem; padding-left:1.4rem; }
.articulo__cuerpo ol{ list-style:decimal; }
.articulo__cuerpo ul{ list-style:disc; }
.articulo__cuerpo li{ margin-bottom:.55rem; padding-left:.2rem; }
.articulo__cuerpo li::marker{ color:var(--primary-deep); font-weight:600; }
.articulo__cuerpo blockquote{
  margin:0 0 1.3rem; padding:.9rem 1.2rem; background:var(--paper-2);
  border-left:3px solid var(--primary); border-radius:0 8px 8px 0;
}
.articulo__cuerpo code{ font-family:var(--mono); font-size:.88em; background:var(--paper-2); padding:.1em .35em; border-radius:4px; }
.articulo__cuerpo pre{ background:var(--paper-2); padding:1rem; border-radius:8px; overflow-x:auto; margin:0 0 1.3rem; }
.articulo__cuerpo hr{ border:none; border-top:1px solid var(--paper-2); margin:2.4rem 0; }

/* Las tablas anchas se deslizan dentro de su caja: la página nunca se arrastra de lado. */
.articulo__cuerpo .tabla{ overflow-x:auto; margin:0 0 1.5rem; border:1px solid var(--paper-2); border-radius:8px; }
.articulo__cuerpo table{ border-collapse:collapse; width:100%; font-size:.92rem; line-height:1.55; }
.articulo__cuerpo th{
  background:var(--paper-2); color:var(--ink); font-family:var(--display); font-weight:600;
  text-align:left; padding:.7rem .85rem; vertical-align:bottom;
}
.articulo__cuerpo td{ padding:.65rem .85rem; border-top:1px solid var(--paper-2); vertical-align:top; }
/* Solo las tablas de 3 columnas o más necesitan ancho mínimo; una de 2 cabe entera en el teléfono. */
@media (max-width:720px){
  .articulo__cuerpo table:has(th:nth-child(3)){ min-width:36rem; }
}

/* ── el índice ── */
.blog-indice{ max-width:var(--maxw, 1180px); margin:0 auto; }
.blog-indice h1{ font-size:clamp(2rem, 6vw, 3rem); margin:0 0 1.75rem; }
.blog-grilla{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.blog-tarjeta{
  display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius, 14px); padding:1.35rem; color:var(--text);
  transition:border-color .2s ease, transform .2s ease;
}
.blog-tarjeta:hover{ border-color:var(--primary-soft); transform:translateY(-2px); }
.blog-tarjeta time{ font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:var(--text-muted); }
.blog-tarjeta h3{ font-size:1.2rem; line-height:1.3; margin:.55rem 0 .5rem; }
.blog-tarjeta p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--text-muted); }