/* ============================================================
   plantilla-blog.css · VISIONLOVERS · el blog con plantilla propia (F4 · 26/09/2026, Claude Code en la nube)
   Solo se carga en el listado y en los artículos (inc/plantilla-blog.php). Tokens de tokens.css. Sin !important, sin @layer.
   Lectura cómoda: 720 px de columna (≈ 68 caracteres), 17 px, interlineado 1,6. Móvil primero.
   Woodmart imprime CSS por página con .single-post …: se gana con «html body.single-post …» donde hace falta.
   ============================================================ */

/* ---------- Artículo ---------- */
.vl-blog-articulo .vl-articulo__cabecera { padding: var(--vl-space-lg) 0 var(--vl-space-md); }
.vl-blog-articulo .vl-articulo__eyebrow { font-family: var(--font-titulos); font-size: var(--vl-font-eyebrow); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--vl-primary-dark); margin: 0 0 var(--vl-space-sm); display: flex; flex-wrap: wrap; gap: var(--vl-space-xs); align-items: center; }
.vl-blog-articulo .vl-articulo__eyebrow a { color: var(--vl-primary-dark); }
html body.single-post .vl-blog-articulo .vl-articulo__titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h1); line-height: var(--vl-lh-h1); font-weight: 800; color: var(--vl-text); margin: 0 0 var(--vl-space-md); letter-spacing: -.01em; }
.vl-blog-articulo .vl-articulo__meta { font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); margin: 0 0 var(--vl-space-sm); }
.vl-blog-articulo .vl-articulo__meta a { color: var(--vl-secondary-dark); font-weight: 600; }
.vl-blog-articulo .vl-articulo__figura { margin: 0 0 var(--vl-space-lg); }
.vl-blog-articulo .vl-articulo__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--vl-radius-xl); box-shadow: var(--vl-halo); }

/* Índice */
.vl-articulo__indice { background: var(--vl-bg-soft); border-radius: var(--vl-radius-lg); padding: var(--vl-space-md) var(--vl-space-lg); margin: 0 0 var(--vl-space-xl); box-shadow: inset 0 0 0 1px var(--vl-border-brand); }
.vl-articulo__indice-titulo { font-family: var(--font-titulos); font-weight: 700; font-size: var(--vl-font-body); margin: 0 0 var(--vl-space-sm); color: var(--vl-text); }
.vl-articulo__indice ol { margin: 0; padding: 0 0 0 1.4em; display: flex; flex-direction: column; gap: 6px; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); }
.vl-articulo__indice a { color: var(--vl-secondary-dark); display: inline-block; min-height: 44px; padding: 8px 0; }

/* Cuerpo: lo que pinta the_content (texto de los módulos SEO de Sergio: h2, h3, p, ul, tablas, imágenes) */
.vl-articulo__cuerpo { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text); }
.vl-articulo__cuerpo > * { max-width: 100%; }
.vl-articulo__cuerpo p, .vl-articulo__cuerpo ul, .vl-articulo__cuerpo ol { margin: 0 0 var(--vl-space-md); }
.vl-articulo__cuerpo h2 { font-family: var(--font-titulos); font-size: var(--vl-font-h2); line-height: var(--vl-lh-h2); font-weight: 700; margin: var(--vl-space-2xl) 0 var(--vl-space-md); scroll-margin-top: 140px; }
.vl-articulo__cuerpo h3 { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: var(--vl-lh-h3); font-weight: 600; margin: var(--vl-space-xl) 0 var(--vl-space-sm); }
.vl-articulo__cuerpo h4 { font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); font-weight: 600; margin: var(--vl-space-lg) 0 var(--vl-space-sm); }
.vl-articulo__cuerpo h2:first-child, .vl-articulo__cuerpo h3:first-child { margin-top: 0; }
.vl-articulo__cuerpo a { color: var(--vl-secondary-dark); text-decoration: underline; text-underline-offset: 3px; }
.vl-articulo__cuerpo a.vl-btn { text-decoration: none; } .vl-articulo__cuerpo a.vl-btn--primary { color: var(--vl-on-color); } /* F10 26/09: el botón «Ver la ficha» de las noticias (F9b) heredaba el azul del enlace sobre fondo azul (1,9:1 medido) */
.vl-articulo__cuerpo img { height: auto; border-radius: var(--vl-radius-lg); }
.vl-articulo__cuerpo figure { margin: var(--vl-space-lg) 0; }
.vl-articulo__cuerpo figcaption { font-size: var(--vl-font-small); color: var(--vl-text-muted); margin-top: var(--vl-space-xs); }
.vl-articulo__cuerpo blockquote { margin: var(--vl-space-lg) 0; padding: var(--vl-space-md) var(--vl-space-lg); border-left: 4px solid var(--vl-primary); background: var(--vl-bg-soft); border-radius: 0 var(--vl-radius-md) var(--vl-radius-md) 0; }
.vl-articulo__cuerpo table { width: 100%; border-collapse: collapse; font-size: var(--vl-font-small); margin: 0 0 var(--vl-space-lg); display: block; overflow-x: auto; }
.vl-articulo__cuerpo th, .vl-articulo__cuerpo td { padding: 10px 12px; border-bottom: 1px solid var(--vl-border); text-align: left; vertical-align: top; }
.vl-articulo__cuerpo th { background: var(--vl-bg-gray); font-weight: 600; }
.vl-articulo__cuerpo li { margin-bottom: 6px; }
.vl-articulo__cuerpo li::marker { color: var(--vl-primary-dark); }
.vl-articulo__cuerpo hr { border: 0; border-top: 1px solid var(--vl-border); margin: var(--vl-space-xl) 0; }
/* Preguntas frecuentes en <details> (si el módulo las escribe así) */
.vl-articulo__cuerpo details { border: 1px solid var(--vl-border); border-radius: var(--vl-radius-md); padding: var(--vl-space-sm) var(--vl-space-md); margin: 0 0 var(--vl-space-sm); }
.vl-articulo__cuerpo summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }

.vl-articulo__etiquetas { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); margin: var(--vl-space-lg) 0 0; }
.vl-articulo__etiquetas a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: var(--vl-radius-pill); background: var(--vl-bg-gray); color: var(--vl-text-muted); font-size: var(--vl-font-caption); font-weight: 500; text-decoration: none; }
.vl-articulo__etiquetas a:hover { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
.vl-articulo__pie { margin: var(--vl-space-xl) 0 0; padding-top: var(--vl-space-md); border-top: 1px solid var(--vl-border); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-articulo__pie p { margin: 0 0 var(--vl-space-sm); }
.vl-articulo__caja { margin: var(--vl-space-2xl) auto; }

/* Zonas de anuncio (apagadas hasta que Google apruebe): separadas del contenido y del botón, con su etiqueta */
.vl-anuncio { margin: var(--vl-space-xl) 0; padding: var(--vl-space-sm) 0; border-top: 1px solid var(--vl-border); border-bottom: 1px solid var(--vl-border); }
.vl-anuncio__etiqueta { display: block; font-size: var(--vl-font-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--vl-text-light); margin-bottom: var(--vl-space-xs); }

/* ---------- Listado ---------- */
.vl-blog-contador { font-size: var(--vl-font-small); color: var(--vl-text-muted); margin: 0 0 var(--vl-space-lg); }
.vl-blog-rejilla { display: grid; gap: var(--vl-space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vl-blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vl-blog-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vl-space-xl); } }
.vl-blog-rejilla__ancha { grid-column: 1 / -1; }
.vl-entrada-card { padding: 0; overflow: hidden; }
.vl-entrada-card > *:not(.vl-entrada-card__foto) { margin-left: var(--vl-space-lg); margin-right: var(--vl-space-lg); }
.vl-entrada-card .vl-entrada-card__sintoma { margin-top: var(--vl-space-lg); }
.vl-entrada-card .vl-card__title { margin-bottom: 0; }
.vl-entrada-card .vl-card__body { margin: 0 var(--vl-space-lg); } /* F11 diseño 26/09: con margin 0 el resumen tocaba el filo del halo */
.vl-entrada-card__foto { display: block; margin: 0; }
.vl-entrada-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vl-entrada-card__meta { font-size: var(--vl-font-caption); color: var(--vl-text-light); margin: 0; }
.vl-entrada-card__leer { display: inline-flex; align-items: center; min-height: var(--vl-touch); font-weight: 600; color: var(--vl-secondary-dark); margin-bottom: var(--vl-space-md); }
.vl-entrada-card__leer::after { content: "→"; margin-left: 6px; transition: transform var(--vl-transition-neon); }
.vl-entrada-card:hover .vl-entrada-card__leer::after { transform: translateX(3px); }
.vl-blog-relacionados { margin-top: var(--vl-space-xl); }
/* C4 (26/09/2026): a 375 salía una tarjeta por pantalla (≈ 680 px). Foto de 160 px y texto más corto: 2 por pantalla. */
@media (max-width: 480px) { .vl-entrada-card .vl-entrada-card__foto, .vl-entrada-card img { max-height: 160px; object-fit: cover; } .vl-entrada-card .vl-card__body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }