/* ============================================
   LUXDENT — Estilos de landing de artículo (/blog/*.html)
   ============================================ */
.article-page{ padding-top: 120px; }

.breadcrumb{
  display:inline-block; margin-bottom: 20px;
  font-size: 13.5px; font-weight:600; color: var(--morado-diamante);
}

.article-head{ max-width: 760px; padding-bottom: 20px; }
.article-head h1{ font-size: clamp(1.9rem, 4vw, 2.7rem); }
.article-meta{ display:flex; gap:10px; font-size:13px; color: var(--gris-texto); }

.article-cover{ max-width: 980px; margin-bottom: 40px; }
.article-cover img{ width:100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); aspect-ratio: 21/9; object-fit: cover; }

.article-body{ max-width: 720px; padding-bottom: var(--section-pad); }
.article-body h3{ font-size: 1.3rem; margin-top: 1.4em; }
.article-body p{ color: var(--gris-texto); font-size: 16px; }
.article-body ul{ margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; color: var(--gris-texto); }
.article-body ul li{ margin-bottom: .5em; font-size: 16px; }

.article-cta{
  margin-top: 48px;
  background: var(--ivory-bg);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radius);
  padding: 28px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.article-cta h3{ margin-bottom:4px; font-size:1.1rem; }
.article-cta p{ margin:0; font-size:14px; }

.related-wrap{ max-width: 980px; padding-bottom: var(--section-pad); }
.related-wrap h3{ font-size:1.2rem; margin-bottom: 22px; }
.related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.related-card{ display:flex; flex-direction:column; }
.related-card img{ border-radius: var(--radius-sm); aspect-ratio:16/10; object-fit:cover; margin-bottom:12px; }
.related-card h4{ font-size: .95rem; margin:0; }

@media (max-width: 860px){
  .related-grid{ grid-template-columns: 1fr; }
  .article-cta{ flex-direction:column; align-items:flex-start; }
}