/* QHM v1.44 · «Guías»: índice (/guias/) y artículos. Se suma a qhm-municipio.css y qhm-guides.css (mismo diseño). */

/* ---------- Tarjetas de artículo ---------- */
.qhm-page .qhm-agrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.qhm-page .qhm-acard .qhm-card__media{aspect-ratio:16/9;min-height:0;background:var(--qhm-sand)}
.qhm-page .qhm-acard .qhm-card__body{gap:8px;padding:16px 18px 18px}
.qhm-page .qhm-acard .qhm-card__cat{color:var(--qhm-olive-d)}
.qhm-page .qhm-acard .qhm-card__title{font-size:20px;line-height:1.2}
.qhm-page .qhm-acard .qhm-card__title a::after{content:"";position:absolute;inset:0}
.qhm-page .qhm-acard__ex{margin:0;font-size:15px;line-height:1.5;color:var(--qhm-text)}
.qhm-page .qhm-acard .qhm-card__meta{flex-direction:row;flex-wrap:wrap;gap:4px 14px;margin-top:2px;font-size:13.5px;color:var(--qhm-soft)}
.qhm-page .qhm-acard .qhm-card__meta li{display:inline-flex;align-items:center;gap:6px}
.qhm-page .qhm-acard .qhm-card__meta .qhm-ico{width:16px;height:16px}
.qhm-page .qhm-agrid + .qhm-zones{margin-top:28px}
@media (min-width:640px){.qhm-page .qhm-agrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.qhm-page .qhm-agrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* ---------- Índice ---------- */
.qhm-page .qhm-art-temas{margin-top:20px}
.qhm-page .qhm-art-temas .qhm-pill[aria-current="page"]{background:var(--qhm-deep);border-color:var(--qhm-deep);color:#FFFFFF}
.qhm-page .qhm-art-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;margin-top:28px;font-size:15px;color:var(--qhm-soft)}
.qhm-page .qhm-art-pager a{font-weight:700;color:var(--qhm-blue)}

/* ---------- Artículo ---------- */
.qhm-page .qhm-art-head h1{max-width:900px}
.qhm-page .qhm-art-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:14px;font-size:14px;color:var(--qhm-soft)}
.qhm-page .qhm-art-meta span+span::before{content:"·";margin:0 8px;color:var(--qhm-mute)}
.qhm-page .qhm-art-meta span:first-child{font-weight:700;color:var(--qhm-ink)}
@media (max-width:599px){.qhm-page .qhm-art-meta{flex-direction:column;gap:2px}.qhm-page .qhm-art-meta span+span::before{content:none}}
.qhm-page .qhm-art-figure{margin:24px 0 0}
.qhm-page .qhm-art-figure img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:20px}
.qhm-page .qhm-art-figure figcaption{margin-top:8px;font-size:13.5px;color:var(--qhm-soft)}
.qhm-page .qhm-art-layout{display:grid;gap:24px}
.qhm-page .qhm-art-toc{padding:16px 18px;background:var(--qhm-white);border:1px solid var(--qhm-line);border-radius:16px}
.qhm-page .qhm-art-toc h2{margin:0 0 8px;font-family:var(--qhm-fb);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--qhm-soft)}
.qhm-page .qhm-art-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.qhm-page .qhm-art-toc a{display:block;font-size:15px;line-height:1.35;font-weight:600;color:var(--qhm-ink)}
.qhm-page .qhm-art-toc a:hover{color:var(--qhm-blue)}
.qhm-page .qhm-art-body{min-width:0}
.qhm-page .qhm-art-body h2{scroll-margin-top:96px}
.qhm-page .qhm-art-body img{max-width:100%;height:auto;border-radius:16px}
.qhm-page .qhm-art-body figure{margin:20px 0}
.qhm-page .qhm-art-body figcaption{margin-top:6px;font-size:13.5px;color:var(--qhm-soft)}
.qhm-page .qhm-art-body blockquote{margin:20px 0;padding:4px 0 4px 18px;border-left:4px solid var(--qhm-terra);font-size:18px;color:var(--qhm-ink)}
.qhm-page .qhm-art-body ol{margin:0 0 16px;padding-left:22px}
.qhm-page .qhm-art-body .has-small-font-size{margin-top:28px;font-size:14px;line-height:1.55;color:var(--qhm-soft)}
.qhm-page .qhm-art-more{margin-top:16px}
.qhm-page .qhm-art-more a{font-weight:700;color:var(--qhm-blue);text-decoration:underline;text-underline-offset:2px}
@media (min-width:768px){.qhm-page .qhm-art-more{display:none}}
@media (min-width:1024px){
  .qhm-page .qhm-art-layout.has-toc{grid-template-columns:260px minmax(0,760px);gap:56px;align-items:start}
  .qhm-page .qhm-art-toc{position:sticky;top:96px}
  .qhm-page .qhm-art-figure img{border-radius:24px}
}
