/* ============================================================
   Dartel Solutions — Aprende page layout
   ============================================================ */

/* ---- Article grid ---- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.art-grid{grid-template-columns:1fr;gap:16px}}

.art-card .art-link{display:block;text-decoration:none;color:inherit;height:100%}
.art-body{padding:20px 22px 24px}
.art-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.art-tag{font-family:var(--font-body);font-weight:600;font-size:clamp(11px,2.8vw,12px);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.art-tag.cctv{background:rgba(24,169,87,.12);color:var(--green-deep)}
.art-tag.wifi{background:rgba(12,124,66,.1);color:var(--green-deep)}
.art-tag.ajax{background:rgba(124,226,160,.25);color:var(--green-deep)}
.art-date{font-size:12px;color:var(--ink-3)}
.art-title{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,4.5vw,1.125rem);color:var(--ink-1);margin:0 0 10px;line-height:1.3}
.art-excerpt{font-size:clamp(0.8125rem,3.5vw,0.875rem);color:var(--ink-2);line-height:1.6;margin:0 0 16px}
.more{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--green-deep);display:inline-flex;align-items:center;gap:6px;text-decoration:none;min-height:44px}
.more .ic{width:16px;height:16px;transition:transform .18s ease-out}
.art-card:hover .more .ic{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.more .ic{transition:none}.art-card:hover .more .ic{transform:none}}

@media (max-width:560px){
  .art-body{padding:16px 16px 20px}
  .art-title{font-size:1rem}
  .art-excerpt{font-size:0.8125rem}
}