/* Estilos de las guías del blog y su índice */
.article-crumbs { font-size: .84rem; color: var(--ink-mute); margin-bottom: 1rem; }
.article-crumbs a { color: var(--orange-dark); font-weight: 600; }
.article-products { margin: 2.4rem 0 1rem; padding: 1.6rem; background: var(--bg-soft); border-radius: var(--radius-lg); }
.article-products h2 { font-size: 1.2rem; color: var(--navy); margin: 0 0 1.1rem; }
.ap-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ap-card { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: box-shadow .25s, transform .25s; }
.ap-card:hover, .ap-card:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ap-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.ap-name { font-size: .84rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.ap-meta { font-family: var(--mono); font-size: .72rem; color: var(--ink-mute); }
.ap-note { margin: 1rem 0 0; font-size: .8rem; color: var(--ink-mute); }
.ap-note a { color: var(--orange-dark); font-weight: 600; }
.article-faq { margin-top: 2.4rem; }
.article-faq h2 { font-size: 1.35rem; color: var(--navy); margin-bottom: 1rem; }
.article-faq h3 { font-size: 1rem; color: var(--navy); margin: 1.3rem 0 .4rem; }
.article-faq p { margin-bottom: .6rem; }
.blog-grid--index { grid-template-columns: repeat(3, 1fr); }
.blog-grid--index .blog-body h2 { font-size: 1.1rem; margin: .5rem 0; color: var(--navy); }
@media (max-width: 980px) { .blog-grid--index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid--index { grid-template-columns: 1fr; } }
.blog-all { margin-top: 1.8rem; text-align: center; }