/* RSJ · plantillas v3 · hoja del blog (plantillas blog-home, blog-categoria y blog-post v1.0-rc, paquete rsj_plantilla_blog_v1.0-rc del chat
   «Blog», 20/10/2026). Primero, los módulos validados de la biblioteca tal cual (copias de contacto.css y campana.css: breadcrumbs, card-producto,
   cta y captacion-email); después, los módulos del blog (blog.css del paquete, tal cual, prefijo .b-); al final, lo propio de la plantilla. */
/* ===== biblioteca: breadcrumbs (sin cambios) ===== */
/* RSJ · breadcrumbs (migas de pan) · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Ficha v0.4. Texto 14 en text-muted, la página actual
   en ink; separador «/» decorativo. Si no cabe en móvil, pasa a la línea siguiente. El JSON-LD BreadcrumbList lo genera el servidor. */
.m-migas{padding-block:var(--s-16);font-size:var(--fs-aux)}
.m-migas ol{display:flex;flex-wrap:wrap;gap:var(--s-8);margin:0;padding:0;list-style:none}
.m-migas li{display:flex;gap:var(--s-8);color:var(--color-text-muted)}
.m-migas li+li::before{content:"/";color:var(--color-border-strong)}
.m-migas a{display:inline-flex;align-items:center;min-height:var(--h-touch-min);margin-block:calc(-1*var(--s-12));color:var(--color-text-muted)}
.m-migas a:hover{color:var(--color-ink)}
.m-migas [aria-current]{color:var(--color-ink);font-weight:var(--fw-medium)}

/* ===== biblioteca: card-producto (sin cambios) ===== */
/* RSJ · card-producto · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Libro §8.1 (K1, maqueta validada): móvil horizontal
   con foto de 96 px; vertical desde 768. Foto, nombre, formato, precio por unidad (cantidad mínima), precio por envase,
   aviso de tramos (si los hay), botón de 48 px a todo el ancho y disponibilidad (aviso-stock) debajo. Sin sombra. */
.m-card{display:grid;grid-template-columns:var(--card-thumb) minmax(0,1fr);gap:var(--s-12);align-items:start;padding:var(--s-12);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-card__foto{display:block;text-decoration:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface)}
.m-card__foto img{width:100%;aspect-ratio:1;object-fit:contain}
.m-card__sinfoto{aspect-ratio:1;display:grid;place-items:center;padding:var(--s-4);background:var(--color-surface-soft);color:var(--color-text-muted);font-size:var(--fs-badge);font-weight:var(--fw-semibold);text-align:center;line-height:1.3}
.m-card__datos{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.m-card__nombre{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-h3)}
.m-card__nombre a{color:var(--color-ink);text-decoration:none}
.m-card__nombre a:hover{color:var(--color-ink);text-decoration:underline}
.m-card__fmt,.m-card__envase{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.m-card__precio{margin-top:var(--s-4);font-size:var(--fs-price);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--color-action);font-variant-numeric:tabular-nums}
.m-card__precio small{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.m-card__tramo{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-action)}
.m-card__accion{margin-top:var(--s-8)}
.m-card__accion .btn{width:100%;padding-inline:var(--s-12)}
.m-card__off{margin-top:var(--s-8);font-size:var(--fs-aux);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.m-card .m-stock{margin-top:var(--s-12)}
@media (min-width:768px){
 .m-card{display:flex;flex-direction:column;height:100%}
 .m-card__foto{width:100%}
 .m-card__datos{flex:1}
 .m-card__accion{margin-top:auto;padding-top:var(--s-12)}
}
/* v1.1 (validado por Miguel el 09/10/2026; portada de campaña): línea «Se suele vender a X €/unidad» con el precio sugerido (PDC-H2), solo si la plantilla la pide */
.m-card__reventa{margin-top:var(--s-4);padding:var(--s-4) var(--s-8);border-radius:var(--radius-sm);background:var(--color-action-soft);font-size:var(--fs-aux);color:var(--color-ink)}
.m-card__reventa b{color:var(--color-action)}

/* ===== biblioteca: cta (sin cambios) ===== */
/* RSJ · cta (pedidos grandes y entidades) · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Caja con título, texto y botón secundario.
   El enlace es un dato (PDC-MOD1: /presupuesto/ recomendado). Sin JS. */
.m-cta{display:grid;gap:var(--s-16);align-items:center;padding:var(--s-24);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-cta p{max-width:60ch;margin-top:var(--s-8);color:var(--color-text-muted)}
@media (min-width:768px){.m-cta{grid-template-columns:1fr auto;padding:var(--s-32)}}

/* ===== biblioteca: captacion-email (sin cambios) ===== */
/* RSJ · captacion-email · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Caja con borde verde de 2 px, campo de correo, casilla de
   consentimiento obligatoria (texto legal por confirmar, PDC-H5) y botón. Usa el campo y los mensajes de la hoja base. Sin JS:
   el formulario lo envía el servidor y responde con .msg--ok o .msg--error. */
.m-capt{display:grid;gap:var(--s-16);padding:var(--s-24);border:2px solid var(--color-action);border-radius:var(--radius-md)}
.m-capt form{display:grid;gap:var(--s-12);max-width:560px}
.m-capt__check{display:flex;gap:var(--s-8);align-items:flex-start;font-size:var(--fs-aux)}
.m-capt__check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--color-action)}
.m-capt .btn{justify-self:stretch}
@media (min-width:768px){.m-capt .btn{justify-self:start}} /* en móvil, botón a todo el ancho (Miguel, 08/10/2026) */
/* ===== módulos del blog (blog.css v1.0-rc2 del paquete, sin cambios) ===== */
/* RSJ · blog.css · v1.0-rc2 (chat «Blog», área de Miguel, 20/10/2026).
   Cambios desde v1.0-rc (pedidos por Miguel tras verlo en su entorno con datos reales):
   - .b-cat: fondo suave del color de su campaña (12 % sobre blanco) en todos los pesos; el peso 3 sigue con el color lleno; el peso 0 deja el gris.
   - .b-head h1: desde 1024 px sin límite de 22ch, 40 px de 1024 a 1279 y 44 px desde 1280 (en móvil sigue partiéndose).
   Módulos del blog programados en este chat (el «Gestor de módulos» está congelado desde el 20/10/2026: cada chat programa los suyos).
   Requiere tokens.css (libro §15) y base 1.1. Solo tokens; prefijo .b-. Sin librerías. Móvil primero; cortes 768 y 1024.
   Módulos que contiene (cada uno con su comentario):
   hero-blog 1.0-rc · categorias-blog 1.0-rc · listado-posts 1.0-rc · card-post 1.0-rc · filtro-temas 1.0-rc · paginacion 1.0-rc
   articulo (cuerpo) 1.0-rc · indice 1.0-rc · productos-post 1.0-rc (usa card-producto 1.1 tal cual) · cta-campana 1.0-rc (variante de cta 1.0)
   autor-post 1.0-rc · faq-post (usa faqs 1.0 si encaja; si no, .b-faq) · posts-relacionados (usa listado-posts en carril) */
/* ---------- hero-blog 1.0-rc: H1 + texto propio, sin imagen (portada y categoría) ---------- */
.b-head{padding-block:var(--s-24) var(--s-32)}
.b-head h1{max-width:22ch}
@media(min-width:1024px){.b-head h1{max-width:none;font-size:40px}}
@media(min-width:1280px){.b-head h1{font-size:44px}}
.b-head p{margin-top:var(--s-12);max-width:62ch;color:var(--color-text-muted)}
/* ---------- categorias-blog 1.0-rc: tarjetas con peso 0-3 (data-peso) que pone el servidor según el calendario ---------- */
.b-cats{display:grid;gap:var(--s-12);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){.b-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16)}}
.b-cat{--c:var(--color-campaign-sant-jordi);display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-16);border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--color-ink);text-decoration:none;min-height:120px;position:relative;overflow:hidden}
.b-cat:hover{border-color:var(--c)}
.b-cat__ico{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.b-cat__ico svg{width:var(--icon-md);height:var(--icon-md)}
.b-cat__nom{font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:1.25}
.b-cat__n{font-size:var(--fs-aux);color:var(--color-text-muted);margin-top:auto}
.b-estado{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-badge);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.b-estado i{width:var(--status-dot);height:var(--status-dot);border-radius:50%;border:1.5px solid var(--color-text-muted)}
.b-estado[data-e=actual] i,.b-estado[data-e=abierta] i{background:var(--color-status-on);border-color:var(--color-status-on);box-shadow:0 0 0 var(--status-halo) var(--color-status-on-halo)}
.b-estado[data-e=actual],.b-estado[data-e=abierta]{color:var(--color-ink)}
/* categoría con peso: la de la campaña actual ocupa dos columnas y lleva su color */
.b-cat[data-peso="3"]{grid-column:1/-1;background:var(--c);color:#fff;border-color:var(--c);min-height:168px;padding:var(--s-24)}
.b-cat[data-peso="3"] .b-cat__ico{background:rgba(255,255,255,.18);color:#fff}
.b-cat[data-peso="3"] .b-cat__nom{font-size:var(--fs-h3)}
.b-cat[data-peso="3"] .b-cat__n,.b-cat[data-peso="3"] .b-estado{color:#fff}
.b-cat[data-peso="3"] .b-estado i{border-color:#fff}
.b-cat__claim{font-size:var(--fs-aux);max-width:46ch}
@media(min-width:768px){.b-cat[data-peso="3"]{grid-column:span 2;grid-row:span 2}.b-cat[data-peso="2"]{grid-column:span 2}}
.b-cat[data-peso="0"]{min-height:96px}
.b-cat[data-peso="0"] .b-cat__ico{width:32px;height:32px}
/* ---------- listado-posts 1.0-rc: bucle por categoría (carril en móvil, 3 columnas desde 768) y rejilla ---------- */
.b-loop{padding-top:var(--s-48)}
.b-loop__head{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-16);align-items:baseline;justify-content:space-between;margin-bottom:var(--s-16)}
.b-loop__head h2{display:flex;gap:var(--s-12);align-items:center}
.b-loop__head h2::before{content:"";width:6px;height:28px;border-radius:3px;background:var(--c)}
.b-loop__mas{font-weight:var(--fw-semibold);text-decoration:none;min-height:var(--h-touch-min);display:inline-flex;align-items:center}
.b-rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--s-12);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-8);margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.b-rail>*{scroll-snap-align:start}
@media(min-width:768px){.b-rail{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0;gap:var(--s-24)}}
.b-grid{display:grid;gap:var(--s-16)}
@media(min-width:768px){.b-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24)}}
/* ---------- card-post 1.0-rc: tarjeta de entrada, toda la tarjeta enlaza (un solo <a>) ---------- */
.b-post{--c:var(--color-campaign-sant-jordi);display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface);height:100%}
.b-post__img{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 6%,#fff));color:var(--c)}
.b-post__img svg{width:48px;height:48px;opacity:.7}
.b-post__body{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-16);flex:1}
.b-post__cat{font-size:var(--fs-badge);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--c)}
.b-post__t{font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:1.3}
.b-post__t a{color:var(--color-ink);text-decoration:none}
.b-post__t a::after{content:"";position:absolute;inset:0}
.b-post{position:relative}
.b-post:hover{border-color:var(--c)}
.b-post__t a:focus-visible{outline:none}
.b-post:focus-within{outline:2px solid var(--color-action);outline-offset:2px}
.b-post__ent{font-size:var(--fs-aux);color:var(--color-text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-post__meta{margin-top:auto;padding-top:var(--s-8);font-size:var(--fs-badge);color:var(--color-text-muted);display:flex;gap:var(--s-12);flex-wrap:wrap}
.b-post__prod{font-size:var(--fs-badge);font-weight:var(--fw-semibold);color:var(--color-action)}
.b-post--dest{display:grid}
@media(min-width:768px){.b-post--dest{grid-template-columns:1.2fr 1fr}.b-post--dest .b-post__img{aspect-ratio:auto;min-height:280px}.b-post--dest .b-post__t{font-size:var(--fs-h3)}}
/* ---------- filtro-temas 1.0-rc: filtra en la página, sin URL (T-08); necesita blog.js ---------- */
.b-chips{display:flex;gap:var(--s-8);flex-wrap:wrap;margin-bottom:var(--s-24)}
.b-chips button{min-height:var(--h-touch-min);padding:0 var(--s-16);border-radius:var(--radius-pill);border:1px solid var(--color-border-strong);background:var(--color-surface);font-size:var(--fs-aux);font-weight:var(--fw-semibold);color:var(--color-ink)}
.b-chips button[aria-pressed=true]{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}
/* ---------- paginacion 1.0-rc: ?pagina=N, enlaces <a href> ---------- */
.b-pag{display:flex;gap:var(--s-8);justify-content:center;margin-top:var(--s-32)}
.b-pag a,.b-pag span{min-width:var(--h-touch-min);min-height:var(--h-touch-min);display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);text-decoration:none;font-weight:var(--fw-semibold)}
.b-pag [aria-current]{background:var(--color-ink);color:#fff;border-color:var(--color-ink)}
/* ---------- articulo 1.0-rc: cabecera, cuerpo de una columna (760 px), tablas con scroll; indice 1.0-rc (details) ---------- */
.b-art{max-width:760px;margin-inline:auto}
.b-art__cat{display:inline-block;font-size:var(--fs-badge);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--c);text-decoration:none;margin-bottom:var(--s-12)}
.b-art h1{font-size:var(--fs-h1)}
.b-art__ent{margin-top:var(--s-16);font-size:18px;line-height:1.55}
.b-art__meta{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-16);margin-top:var(--s-16);font-size:var(--fs-aux);color:var(--color-text-muted)}
.b-art__meta a{color:var(--color-ink)}
.b-art__hero{margin-block:var(--s-24);aspect-ratio:16/9;border-radius:var(--radius-md)}
.b-toc{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--s-16) var(--s-24);margin-block:var(--s-24);background:var(--color-surface-soft)}
.b-toc summary{font-weight:var(--fw-bold);cursor:pointer;min-height:var(--h-touch-min);display:flex;align-items:center}
.b-toc ol{margin:var(--s-8) 0 0;padding-left:var(--s-24)}
.b-toc li{padding-block:4px}
.b-cuerpo>*+*{margin-top:var(--s-16)}
.b-cuerpo h2{margin-top:var(--s-48)}
.b-cuerpo h3{margin-top:var(--s-24)}
.b-cuerpo table{border-collapse:collapse;width:100%;font-size:var(--fs-aux)}
.b-cuerpo th,.b-cuerpo td{border-bottom:1px solid var(--color-border);padding:var(--s-8);text-align:left}
.b-tw{overflow-x:auto}
/* ---------- productos-post 1.0-rc: 1 a 3 card-producto 1.1; carril en móvil con los mismos 3 (T-10) ---------- */
.b-prods{margin-block:var(--s-32);padding:var(--s-24) 0;border-block:1px solid var(--color-border)}
.b-prods__h{font-size:var(--fs-h3);margin-bottom:var(--s-4)}
.b-prods__sub{font-size:var(--fs-aux);color:var(--color-text-muted);margin-bottom:var(--s-16)}
.b-prods .b-rail{grid-auto-columns:78%}
@media(min-width:768px){.b-prods .b-rail{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.b-prods .m-card__precio{font-size:22px}
.b-avisa{display:flex;gap:var(--s-8);align-items:center;font-size:var(--fs-aux);color:var(--color-text-muted)}
/* ---------- cta-campana 1.0-rc (sobre .m-cta 1.0) · autor-post 1.0-rc · faq-post ---------- */
.b-ctac{--c:var(--color-campaign-sant-jordi);border-left:6px solid var(--c)}
.b-autor{display:flex;gap:var(--s-16);align-items:center;margin-top:var(--s-48);padding:var(--s-16);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.b-autor__av{width:56px;height:56px;border-radius:50%;background:var(--color-brand-100);color:var(--color-brand-700);display:grid;place-items:center;font-weight:var(--fw-bold);flex:none}
.b-faq details{border-bottom:1px solid var(--color-border);padding-block:var(--s-12)}
.b-faq summary{font-weight:var(--fw-semibold);cursor:pointer;min-height:var(--h-touch-min);display:flex;align-items:center}
.sec-s{padding-top:var(--s-48)}
[data-temas][hidden]{display:none!important}
.b-vacio{padding:var(--s-24);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-muted)}
/* ===== PLANTILLAS del blog (no es código de módulos) ===== */
/* Texto propio de la categoría debajo del H1 (formato limitado), con el mismo ancho que la frase; tarjetas de producto dentro del carril del blog */
.b-head__txt{margin-top:var(--s-12);max-width:62ch}
.b-head__txt>*+*{margin-top:var(--s-8)}
.b-prods .m-card{height:100%}
.b-cuerpo img{max-width:100%;height:auto;border-radius:var(--radius-md)}
.b-cuerpo blockquote{border-left:4px solid var(--c,var(--color-border));padding-left:var(--s-16);color:var(--color-text-muted)}
/* Fotos reales (20/10/2026, Miguel): la foto llena el hueco que fija el módulo (16:9 en las tarjetas y la entrada; en la destacada, el alto de
   su texto con 280 px como mínimo) y se recorta sin deformarse; nunca lo agranda. Sin esto, una foto vertical estiraba la tarjeta */
.b-post__img,.b-art__hero{position:relative;overflow:hidden}
.b-art__hero{margin-inline:0} /* es un <figure>: sin su margen lateral */
.b-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Captación al final de la página: el mismo hueco por debajo que por encima, para que no se pegue al footer */
.b-capt-sec{padding-bottom:var(--s-48)}