/* blog.css — estilos del blog (índice + artículos) de Verificación de carga.
   Se carga DESPUÉS de verificacion-styles.css (shell si-* + tokens DS 2026).
   ⚠️ CACHE-BUSTING: enlazar SIEMPRE como blog.css?v=AAAAMMDD y SUBIR la fecha
   al cambiar este archivo (nginx cachea CSS 30 días; tras un CDN el ?v= es la
   única purga fiable — lección del blog APLEX 09-jun). */

/* ── Migas de pan ── */
.crumbs { max-width: 1100px; margin: 0 auto; padding: var(--space-5) var(--space-5) 0; font-size: 13.5px; color: var(--ink-500); }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--brand-700); }
.crumbs .sep { margin: 0 8px; color: var(--ink-300); }

/* ── Índice ── */
.blog-intro { max-width: 1100px; margin: 0 auto; padding: var(--space-7) var(--space-5) 0; }
.blog-intro h1 { font: 700 clamp(30px, 4.5vw, 44px)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink-900); }
.blog-intro h1 em { font-style: normal; color: var(--brand-700); }
.blog-intro > p { margin-top: var(--space-3); font-size: 16.5px; color: var(--ink-500); max-width: 70ch; }

.post-grid { max-width: 1100px; margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-9); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.post-card .body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.post-card .cat { font: 600 11.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); }
.post-card h2 { font: 650 19px/1.3 var(--font-display); color: var(--ink-900); }
.post-card .desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-500); }
.post-card .meta { margin-top: auto; padding-top: var(--space-3); font-size: 12.5px; color: var(--ink-500); }

/* Estado vacío (aún sin artículos) */
.post-empty { max-width: 720px; margin: 0 auto; padding: var(--space-9) var(--space-5) var(--space-9); text-align: center; }
.post-empty .ico { width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: 16px; background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; }
.post-empty .ico svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.post-empty h2 { font: 650 22px var(--font-display); color: var(--ink-900); margin-bottom: var(--space-2); }
.post-empty p { color: var(--ink-500); }

/* ── Artículo ── */
.post-main { max-width: 840px; margin: 0 auto; padding: 0 var(--space-5); }
.post-main .crumbs { padding-left: 0; padding-right: 0; }
.post-head { padding: var(--space-6) 0 var(--space-5); }
.post-head .cat { font: 600 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); }
.post-head h1 { margin-top: var(--space-2); font: 700 clamp(28px, 4vw, 40px)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink-900); }
.post-head .meta { margin-top: var(--space-3); font-size: 13.5px; color: var(--ink-500); }
.post-cover { margin: 0 0 var(--space-6); }
.post-cover img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border); display: block; }

.lg-doc { padding-bottom: var(--space-8); }
.lg-doc h2 { font: 650 26px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink-900); margin: var(--space-7) 0 var(--space-3); }
.lg-doc h3 { font: 650 20px/1.3 var(--font-display); color: var(--ink-900); margin: var(--space-5) 0 var(--space-2); }
.lg-doc p, .lg-doc li { max-width: 75ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-700); }
.lg-doc p { margin-bottom: var(--space-4); }
.lg-doc ul, .lg-doc ol { margin: 0 0 var(--space-4); padding-left: 1.3em; }
.lg-doc li { margin-bottom: var(--space-2); }
.lg-doc a { color: var(--brand-700); text-decoration: underline; }
.lg-doc strong { color: var(--ink-900); }
.lg-doc table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-5) 0; font-size: 14.5px; }
.lg-doc th, .lg-doc td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.lg-doc th { background: var(--brand-50); font-weight: 650; color: var(--ink-900); }
.lg-doc tr:last-child td { border-bottom: none; }
.lg-doc blockquote { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--brand-500); background: var(--brand-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.lg-doc blockquote p { margin: 0; }

/* ── FAQ del artículo (acordeón nativo, crawlable) ── */
.post-faq { max-width: 840px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-9); }
.post-faq h2 { font: 650 24px var(--font-display); color: var(--ink-900); margin-bottom: var(--space-4); }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 15px 18px; font: 600 15.5px var(--font-body); color: var(--ink-900); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: 0 0 auto; font: 700 18px/1 var(--font-mono); color: var(--brand-700); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-a { padding: 0 18px 16px; font-size: 15px; line-height: 1.65; color: var(--ink-700); max-width: 75ch; }