/* ============================================================
   279studio — BLOG (índice y artículos) · 2026-09-20
   Añadidos sobre css/renovacion.css. Solo tokens de tokens.css, sin efectos nuevos.
   Cargar después de renovacion.css:  <link rel="stylesheet" href="../css/blog.css?v=20260920c">
   ============================================================ */

/* ---------- Índice ---------- */
/* Mejora progresiva: sin JavaScript se ven todas las tarjetas y no aparecen controles que no funcionan. */
.no-js .blog-tools, .no-js .blog-count, .no-js .blog-more { display: none; }
.blog-intro { margin-top: 1.2rem; max-width: 60ch; color: var(--gris-text); line-height: 1.6; }
.blog-more .btn { min-height: 48px; }

/* Tarjetas alineadas: cabecera de metadatos, título y entradilla ocupan el mismo alto en todas las de una fila. */
@media (min-width: 640px) {
  .blog-grid .post-card-meta { min-height: 3.6em; align-content: flex-start; }
  .blog-grid .post-card h3 { min-height: 3.6em; }
}

/* ---------- Artículo ---------- */
.article-lead, .article-body { overflow-wrap: break-word; }
.article-body ol { list-style: decimal; }
.article-body li { padding-left: 0.2rem; }
.article-body li::marker { color: var(--acento-vivo); }
.article-body strong { color: var(--hueso); font-weight: 600; }
.article-body code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; padding: 0.1em 0.35em; border-radius: var(--radius-s); background: rgba(244,242,237,0.08); }
.article-body em { color: var(--gris-text); }

/* Precios de 279studio dentro de la prosa: fluyen con el texto y llevan «sin IVA» en pequeño */
.article-body .price, .article-faq .price, .article-cta .price, .article-summary .price { display: inline; }
.article-body .price .iva, .article-faq .price .iva, .article-cta .price .iva, .article-summary .price .iva { margin-left: 0.35em; }
.article-body td .price, .article-body th .price { display: inline-block; }

/* Fórmulas y cuentas destacadas */
.article-formula { max-width: none; margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border: 1px solid var(--linea); border-left: 3px solid var(--acento-vivo); border-radius: 0 var(--radius-m) var(--radius-m) 0; background: rgba(244,242,237,0.03); font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--hueso); }
.article-body .article-formula strong { font-weight: 500; }

/* Ejemplos de mensajes y respuestas */
.article-body blockquote { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-left: 3px solid var(--acento-suave); border-radius: 0 var(--radius-m) var(--radius-m) 0; background: rgba(244,242,237,0.03); }
.article-body blockquote p { margin: 0; max-width: none; font-size: 0.98rem; color: var(--gris-text); }

/* Tablas: se desplazan dentro de su caja, nunca ensanchan la página */
.article-body table { max-width: 100%; -webkit-overflow-scrolling: touch; }
.article-body th[scope="col"] { font-family: var(--label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento-suave); }
.article-body th[scope="row"] { font-weight: 600; color: var(--hueso); }
.article-body td, .article-body th { min-width: 7.5rem; vertical-align: top; line-height: 1.45; }
.article-body td { color: var(--gris-text); }

/* Pie: fuentes y autoría */
.article-sources { max-width: 68ch; line-height: 1.5; }
.article-sources strong { color: var(--hueso); font-weight: 600; }
.article-sources ul { margin: 0.6rem 0 0 1.1rem; display: grid; gap: 0.4rem; list-style: disc; }
.article-sources a { color: var(--acento-suave); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-sources a:hover, .article-sources a:focus-visible { color: var(--acento-vivo); }
.article-author { color: var(--acento-suave); }

/* Cabecera y resumen en pantallas estrechas (360–412 px) */
@media (max-width: 480px) {
  .article h1 { font-size: clamp(1.75rem, 8vw, 2.2rem); overflow-wrap: break-word; }
  .article-lead { font-size: 1.05rem; }
  .article-summary, .article-cta { padding-inline: 1.1rem; }
  .article-body th, .article-body td { padding: 0.65rem 0.6rem; font-size: 0.88rem; }
}

.article-intro { margin-top: 1.4rem; }
.article-intro + .article-toc { margin-top: 1.4rem; }

/* Aviso discreto «Articles are in Spanish»: solo se muestra con la web en inglés (lo activa un script en línea al cargar el diccionario) */
.blog-es-note { margin: 0.9rem 0 0; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--acento-suave); }
.blog-es-note[hidden] { display: none; }
.article .blog-es-note { margin: 0 0 1rem; }

/* Frase única bajo los precios del cuerpo: discreta, con enlace a las condiciones */
.article-body .price-cond { font-size: 0.88rem; color: var(--gris-text); }
.article-body .price-cond a { color: var(--acento-suave); text-decoration: underline; text-underline-offset: 3px; }
.article-body .price-cond a:hover, .article-body .price-cond a:focus-visible { color: var(--acento-vivo); }