/* ============================================================
   Haricode — guías (artículos largos).
   Tokens, base, navegación y pie vienen de tokens.css y site.css;
   portada, secciones y cierre de service-pages.css.
   ============================================================ */

.article{max-width:var(--measure);margin:0 auto}
.article>*+*{margin-top:var(--sp-5)}
.article h2{margin-top:var(--sp-9);font-size:var(--fs-2xl);line-height:var(--lh-heading)}
.article h3{margin-top:var(--sp-7);font-size:var(--fs-lg);line-height:var(--lh-heading)}
.article p,.article li{color:var(--text-2);line-height:1.7}
.article strong{color:var(--text);font-weight:var(--fw-medium)}
.article ul,.article ol{padding-left:1.25em}
.article li+li{margin-top:var(--sp-2)}
.article a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.2em;transition:text-decoration-color var(--dur)}
.article a:hover{text-decoration-color:var(--accent)}

/* Tabla de costos: desplaza dentro de su propio contenedor, nunca la página. */
.article .table-wrap{overflow-x:auto;margin-top:var(--sp-6);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface-1)}
.article table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
.article th,.article td{text-align:left;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);vertical-align:top;color:var(--text-2);line-height:1.5}
.article th{color:var(--text);font-weight:var(--fw-medium);border-top:0;background:var(--surface-2)}
.article td:first-child{color:var(--text)}
.article caption{caption-side:bottom;text-align:left;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);color:var(--text-3)}

/* Ficha de autoría: quién firma y cuándo se revisó. */
.byline{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border);
  color:var(--text-2);font-size:var(--fs-sm);
}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.byline strong{display:block;color:var(--text);font-weight:var(--fw-medium)}
.byline time{color:var(--text-3)}

/* Índice del artículo. */
.toc{
  margin-top:var(--sp-7);padding:var(--sp-5) var(--sp-6);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card);
}
.toc span{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-3);margin-bottom:var(--sp-3)}
.toc ol{padding-left:1.25em;margin:0}
.toc li{color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}
.toc li+li{margin-top:var(--sp-2)}
.toc a{color:var(--text-2);transition:color var(--dur)}
.toc a:hover{color:var(--text)}

/* Lecturas relacionadas al cierre del artículo. */
.related{margin-top:var(--sp-9);padding-top:var(--sp-6);border-top:1px solid var(--border)}
.related span{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-3);margin-bottom:var(--sp-3)}
.related a{display:block;color:var(--text-2);font-size:var(--fs-sm);margin-bottom:var(--sp-2);transition:color var(--dur)}
.related a:hover{color:var(--text)}

@media(max-width:680px){
  .article h2{font-size:var(--fs-xl)}
}