/* TÓNICA · Blog (blog.html y blog/<slug>.html) · diseño TonicaBlog / TonicaBlogMobile */
.bl-hero { padding: 96px var(--pad) 56px; }
.bl-index { padding: 0 var(--pad); display: flex; flex-direction: column; gap: 2px; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.post-grid .post { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.post-grid .post-img { aspect-ratio: auto; min-height: 220px; height: 100%; }
.post-grid .post-body { padding: 28px; gap: 20px; }
.post-grid .post-meta .post-read { display: none; }
.bl-cta { margin-top: 120px; }
/* artículo */
.art-head { padding: 56px var(--pad) 0; display: flex; flex-direction: column; gap: 40px; }
.art-back { align-self: flex-start; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.art-back:hover { color: var(--ink); }
.art-head-txt { display: flex; flex-direction: column; gap: 24px; max-width: 1000px; }
.art-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.art-meta .tag { font-size: 10px; padding: 4px 8px; }
.art-meta .mono { font-size: 12px; white-space: nowrap; }
.art-title { font-size: 72px; font-weight: 500; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.art-dek { font-size: 22px; line-height: 1.5; color: var(--sub); max-width: 760px; text-wrap: pretty; }
.art-cover { aspect-ratio: 21 / 8; background: var(--s4); overflow: hidden; }
.art-cover img { width: 100%; height: 100%; object-fit: cover; }
.art-grid { padding: 72px var(--pad) 0; display: grid; grid-template-columns: 260px minmax(0, 680px) minmax(0, 1fr); gap: 56px; }
.art-side { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 110px; }
.art-author { display: flex; align-items: center; gap: 10px; }
.art-author .iso { width: 28px; height: 28px; }
.art-author > div { display: flex; flex-direction: column; gap: 2px; }
.art-author-n { font-size: 14px; font-weight: 500; }
.art-author .mono { font-size: 10px; }
.art-share { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
.art-share > span:last-child { color: var(--ink); }
.art-share a:hover, .art-copy:hover { color: var(--lime); }
.art-copy { font: inherit; }
.art-body { display: flex; flex-direction: column; gap: 22px; }
.art-h { font-size: 32px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; padding-top: 22px; }
.art-p { font-size: 19px; line-height: 1.65; color: #D9D6CF; text-wrap: pretty; }
.art-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.art-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.5; color: #D9D6CF; }
.art-list .mono { font-size: 12px; padding-top: 4px; }
.art-quote { margin: 16px 0; padding: 28px 0; border-top: 2px solid var(--lime); border-bottom: 1px solid var(--line); font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; color: var(--lime); text-wrap: balance; }
.art-more { margin: 96px var(--pad) 0; padding-top: 40px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; }
.art-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
@media (max-width: 1023px) {
  .bl-hero { padding: 40px var(--pad) 28px; }
  .bl-index { padding: 0 var(--pad-card); }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-grid .post { grid-template-columns: 112px minmax(0, 1fr); }
  .post-grid .post-img { min-height: 136px; }
  .post-grid .post-body { padding: 14px; gap: 10px; }
  .post-grid .post-title { font-size: 17px; }
  .bl-cta { margin-top: 64px; }
  .art-head { padding: 24px var(--pad) 0; gap: 20px; }
  .art-back { min-height: 44px; display: flex; align-items: center; font-size: 11px; }
  .art-head-txt { gap: 20px; }
  .art-meta { gap: 10px; } .art-meta .tag { font-size: 9px; padding: 4px 7px; } .art-meta .mono { font-size: 11px; }
  .art-title { font-size: 38px; letter-spacing: -.045em; line-height: 1; }
  .art-dek { font-size: 17px; }
  .art-cover { aspect-ratio: 4 / 3; margin: 4px calc(-1 * var(--pad)) 0; }
  .art-grid { padding: 32px var(--pad) 0; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .art-side { position: static; gap: 0; }
  .art-author { padding-bottom: 16px; border-bottom: 1px solid var(--line); } .art-author .iso { width: 24px; height: 24px; } .art-author-n { font-size: 13px; }
  .art-share { display: none; }
  .art-body { gap: 18px; }
  .art-h { font-size: 24px; letter-spacing: -.025em; line-height: 1.15; padding-top: 14px; }
  .art-p { font-size: 17px; }
  .art-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 12px 0; font-size: 16px; } .art-list .mono { font-size: 11px; }
  .art-quote { margin: 8px 0; padding: 20px 0; font-size: 24px; letter-spacing: -.025em; line-height: 1.2; }
  .art-more { margin: 56px var(--pad-card) 0; padding-top: 0; border-top: 0; gap: 12px; }
  .art-more .label { padding: 0 8px; }
  .art-more-grid { grid-template-columns: minmax(0, 1fr); }
}