/* RSJ · plantillas v3 · hoja de la portada de campaña (plantilla home-campana v1, paquete rsj_portada_campana_v1 del «Gestor de módulos», 16/10/2026).
   Los módulos van TAL CUAL de la biblioteca (regla D9; versiones en docs/WEB-V3-MODULOS.md). tokens, base, header y footer están en comun.css.
   Las reglas de los filtros las genera la plantilla (web/v3/campana.php). Al final, lo propio de la plantilla. */

/* ===== biblioteca: hero (sin cambios) ===== */
/* RSJ · hero · v1.2-rc (15/10/2026: línea de estado; v1.1 validada el 09/10, v1.0 el 08/10). v1.1: variante «campaña» (portada de campaña), todo como dato. Biblioteca de módulos. Home v0.12 §3 (D18): título, entradilla, tres datos, dos botones
   y las mascotas asomando detrás del albarán de ejemplo. Ajustes del libro: botones de 48 px (el grande es solo el de la ficha,
   §8.2), albarán sin sombra, total en --fs-price, cortes 768/1024. Con otra campaña activa, sin albarán (regla 14). */
.m-hero{padding-block:var(--s-32) var(--s-48)}
.m-hero__in{display:grid;gap:var(--s-32);max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}
.m-hero h1{max-width:18ch}
.m-hero__lead{margin-top:var(--s-16);font-size:var(--fs-h3);line-height:1.45;color:var(--color-text-muted);max-width:38ch}
.m-hero__datos{display:grid;gap:var(--s-12);margin:var(--s-24) 0 0;padding:0;list-style:none}
.m-hero__datos li{display:flex;gap:var(--s-12);align-items:flex-start;font-weight:var(--fw-semibold)}
.m-hero__datos svg{width:var(--icon-md);height:var(--icon-md);flex:none;color:var(--color-action)}
.m-hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s-12);margin-top:var(--s-32)}
.m-hero__ctas .btn{flex:1 1 220px}
.m-hero__visual{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px;justify-self:center}
.m-hero__masc{position:relative;z-index:0;width:86%;margin-bottom:calc(-1*var(--s-48))}
.m-hero__masc img{width:100%;height:auto}
.m-hero[data-albaran=no] .m-hero__masc{margin-bottom:0}
.m-hero__albaran{position:relative;z-index:1;width:min(340px,100%);padding:var(--s-16) var(--s-24);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-hero__albaran::before,.m-hero__albaran::after{content:"";position:absolute;left:var(--s-16);right:var(--s-16);height:var(--s-8);background:radial-gradient(circle at 6px 4px,var(--color-surface) 3px,transparent 3.5px) 0 0/12px 8px repeat-x}
.m-hero__albaran::before{top:calc(-1*var(--s-4))}
.m-hero__albaran::after{bottom:calc(-1*var(--s-4))}
.m-hero__alb-t{font-size:var(--fs-aux);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.m-hero__albaran dl{margin:var(--s-4) 0 0}
.m-hero__albaran dl div{display:flex;justify-content:space-between;gap:var(--s-16);padding-block:var(--s-8);border-bottom:1px dashed var(--color-border-strong)}
.m-hero__albaran dt{font-size:var(--fs-aux)}
.m-hero__albaran dd{margin:0;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-hero__albaran .m-hero__total{border-bottom:0;align-items:baseline}
.m-hero__total dt{font-weight:var(--fw-semibold)}
.m-hero__total dd{font-size:var(--fs-price);font-weight:var(--fw-bold);color:var(--color-action)}
.m-hero__alb-nota{font-size:var(--fs-badge);color:var(--color-text-muted);line-height:1.4}
@media (min-width:768px){.m-hero__ctas .btn{flex:0 0 auto}}
@media (min-width:1024px){
 .m-hero{padding-block:var(--s-48) var(--s-64)}
 .m-hero__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-64);align-items:end}
 .m-hero__visual{justify-self:end}
 .m-hero__masc{align-self:flex-end;width:100%;margin-bottom:-150px}
 .m-hero[data-albaran=no] .m-hero__masc{margin-bottom:0}
 .m-hero__albaran{align-self:flex-start;margin-left:calc(-1*clamp(0px,(100vw - 1100px)*.6,120px))}
}
/* 1.2-rc (15/10/2026, petición 19 de la portada de campaña, D-HC8): línea de estado opcional encima del H1 (variante «campaña»).
   Luz de estado + texto 14/600; llena = abierta; círculo vacío = próximamente o cerrada. Sin color de acción. No es un encabezado. */
.m-hero__estado{display:inline-flex;align-items:center;gap:var(--s-8);margin:0 0 var(--s-12);font-size:var(--fs-aux);font-weight:var(--fw-semibold);color:var(--color-ink);line-height:1.3}
.m-hero__luz{flex:none;width:var(--status-dot);height:var(--status-dot);border-radius:50%;background:var(--color-status-on);box-shadow:0 0 0 var(--status-halo) var(--color-status-on-halo)}
.m-hero__estado[data-estado="proximamente"],.m-hero__estado[data-estado="cerrada"]{color:var(--color-text-muted)}
.m-hero__estado[data-estado="proximamente"] .m-hero__luz,.m-hero__estado[data-estado="cerrada"] .m-hero__luz{background:transparent;border:2px solid var(--color-text-muted);box-shadow:none}

/* ===== biblioteca: calendario-campana (sin cambios) ===== */
/* RSJ · calendario-campana · v1.0-rc (09/10/2026). Biblioteca de módulos. Pedido por la plantilla «Home de campaña» (sustituye a
   `contador`, bloqueado). Tres pasos: pedidos abiertos · último día para pedir (destacado) · entrega según zona; enlace a la entrega.
   Fuera de temporada: los tres pasos con lo que se sabe y enlace a «Avísame». Fechas: dato del calendario de la campaña. Sin JS. */
.m-calend__caja{padding:var(--s-24);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-calend__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-8) var(--s-24);margin-bottom:var(--s-16)}
.m-calend__cab h2{font-size:var(--fs-h3)}
.m-calend__cab a{font-size:var(--fs-aux);font-weight:var(--fw-semibold)}
.m-calend__pasos{display:grid;gap:var(--s-12);margin:0;padding:0;list-style:none}
.m-calend__p{display:flex;gap:var(--s-12);align-items:center;padding:var(--s-12) var(--s-16);border-radius:var(--radius-sm);background:var(--color-surface-soft)}
.m-calend__p svg{width:var(--icon-md);height:var(--icon-md);flex:none;color:var(--color-action)}
.m-calend__k{display:block;font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-calend__v{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.m-calend__p--clave{background:var(--color-action);color:var(--color-surface)}
.m-calend__p--clave svg,.m-calend__p--clave .m-calend__k{color:var(--color-surface)}
.m-calend__nota{margin-top:var(--s-12);font-size:var(--fs-aux);color:var(--color-text-muted)}
@media (min-width:768px){.m-calend__pasos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== biblioteca: confianza-logistica (sin cambios) ===== */
/* RSJ · confianza-logistica · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Un solo módulo para la franja de la home y el bloque
   de la ficha (M-B3). Icono Lucide de 24 px en cuadro de 48 px brand-100 con --radius-md (libro §5 y §8.8). Sin JS. */
.m-confianza__lista{display:grid;gap:var(--s-24);margin:0;padding:0;list-style:none}
.m-confianza__item{display:flex;gap:var(--s-24);align-items:flex-start}
.m-confianza__ico{display:grid;place-items:center;flex:none;width:var(--s-48);height:var(--s-48);border-radius:var(--radius-md);background:var(--color-brand-100);color:var(--color-brand-600)}
.m-confianza__ico svg{width:var(--icon-md);height:var(--icon-md)}
.m-confianza__t{display:block;font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-h3)}
.m-confianza__d{display:block;margin-top:var(--s-4);font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-confianza[data-variante=franja]{padding-block:var(--s-32);background:var(--color-surface-soft)}
.m-confianza[data-variante=bloque] h2{margin-bottom:var(--s-24)}
@media (min-width:768px){.m-confianza__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.m-confianza[data-variante=franja] .m-confianza__lista{grid-template-columns:repeat(4,minmax(0,1fr))}.m-confianza[data-variante=bloque] .m-confianza__lista{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== biblioteca: filtros (sin cambios) ===== */
/* RSJ · filtros · v1.1 (validado por Miguel el 08/10/2026; v1.0 el mismo día). Biblioteca de módulos. Libro §8.3: pastillas de una sola opción (radios),
   44 px, borde border-strong. Seleccionada en gris medio (text-muted, texto blanco 6,60:1), no en verde, para que no compita
   con los botones de compra (decisión de Miguel del 08/10/2026, excepción al libro §8.3 que se pide al libro). Va dentro de grid-productos. El filtrado es solo CSS:
   el servidor genera una regla por filtro activo (ver filtros-reglas.css). El JS solo actualiza el contador. */
.m-filtros{border:0;margin:0 0 var(--s-8);padding:0;min-width:0}
.m-filtros legend{padding:0;margin-bottom:var(--s-8);font-size:var(--fs-aux);font-weight:var(--fw-semibold)}
.m-filtros__fila{display:flex;gap:var(--s-8);overflow-x:auto;padding:var(--s-4) var(--s-4) var(--s-8);margin-inline:calc(-1*var(--s-4));scrollbar-width:thin}
.m-filtros__op{position:relative;flex:none;display:inline-flex;align-items:center;min-height:var(--h-touch-min);padding:0 var(--s-16);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink);font-size:var(--fs-aux);font-weight:var(--fw-semibold);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.m-filtros__op:hover{border-color:var(--color-ink)}
.m-filtros__op input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.m-filtros__op:has(input:checked){background:var(--color-text-muted);border-color:var(--color-text-muted);color:var(--color-surface)}
.m-filtros__op:has(input:focus-visible){outline:2px solid var(--color-action);outline-offset:2px}
.m-filtros__cuenta{margin:0 0 var(--s-16);font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
/* v1.1 · Filtro de la campaña activa (el primero, con data-campana): en el color de su campaña, sin marcar (borde y texto) y marcado
   (fondo y texto blanco). Solo ese filtro (Miguel, 08/10/2026; excepción a CA1 que se pide al libro). */
.m-filtros__op[data-campana]{border-color:var(--color-campaign);color:var(--color-campaign)}
.m-filtros__op[data-campana]:has(input:checked){background:var(--color-campaign);border-color:var(--color-campaign);color:var(--color-surface)}
.m-filtros__op[data-campana=navidad]{--color-campaign:var(--color-campaign-navidad)}
.m-filtros__op[data-campana=san-valentin]{--color-campaign:var(--color-campaign-san-valentin)}
.m-filtros__op[data-campana=dia-madre]{--color-campaign:var(--color-campaign-dia-madre)}
.m-filtros__op[data-campana=ramos]{--color-campaign:var(--color-campaign-ramos)}


/* Generado por el servidor a partir de la tabla de filtros: una línea por filtro activo (salvo «Todos»).
   Ejemplo con los filtros del prototipo de la home. */
.m-grid:has(.m-filtros input[value="mas-vendidos"]:checked) .m-card:not([data-tags~="mas-vendidos"]),
.m-grid:has(.m-filtros input[value="montadas"]:checked) .m-card:not([data-tags~="montadas"]),
.m-grid:has(.m-filtros input[value="granel"]:checked) .m-card:not([data-tags~="granel"]),
.m-grid:has(.m-filtros input[value="packs"]:checked) .m-card:not([data-tags~="packs"]),
.m-grid:has(.m-filtros input[value="accesorios"]:checked) .m-card:not([data-tags~="accesorios"]),
.m-grid:has(.m-filtros input[value="navidad"]:checked) .m-card:not([data-tags~="navidad"]){display:none}

/* ===== biblioteca: grid-productos (sin cambios) ===== */
/* RSJ · grid-productos · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Libro §4.3: 1 columna (tarjeta horizontal) en móvil,
   3 desde 768 y 4 desde 1024, con los tokens --grid-cols y --grid-gap. Todos los productos en el HTML. */
.m-grid__lista{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gap);margin:0;padding:0;list-style:none}

/* ===== 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: aviso-stock (sin cambios) ===== */
/* RSJ · aviso-stock (B02) · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. «Disponibilidad» y nivel a 12 px en text-muted;
   barra de 6 px con el color del nivel (tokens --color-avail-*); frase corta a 12 px. Nunca solo color. Sin JS. */
.m-stock__top{display:flex;justify-content:space-between;gap:var(--s-8);margin:0 0 var(--s-4);font-size:var(--fs-badge);line-height:1.4;color:var(--color-text-muted)}
.m-stock__pista{height:6px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface-soft);overflow:hidden}
.m-stock__pista span{display:block;height:100%;border-radius:inherit}
.m-stock[data-nivel="5"] .m-stock__pista span{width:100%;background:var(--color-avail-5)}
.m-stock[data-nivel="4"] .m-stock__pista span{width:80%;background:var(--color-avail-4)}
.m-stock[data-nivel="3"] .m-stock__pista span{width:60%;background:var(--color-avail-3)}
.m-stock[data-nivel="2"] .m-stock__pista span{width:40%;background:var(--color-avail-2)}
.m-stock[data-nivel="1"] .m-stock__pista span{width:15%;background:var(--color-avail-1)}
.m-stock[data-nivel="0"] .m-stock__pista{border-color:var(--color-avail-out)}
.m-stock[data-nivel="0"] .m-stock__pista span{width:0}
.m-stock__frase{margin:var(--s-4) 0 0;font-size:var(--fs-badge);line-height:1.4;color:var(--color-text-muted)}

/* ===== biblioteca: tabla-comparativa (sin cambios) ===== */
/* RSJ · tabla-comparativa, variante «productos» · v1.1 (validado por Miguel el 09/10/2026). Biblioteca de módulos. Pedida por la plantilla «Home de
   campaña»: una fila por producto (cómo se vende, precio por unidad, se suele revender a, recaudas por caja, aguanta, cómo se conserva).
   Tabla HTML real desde 1024 (buena para buscadores y asistentes); por debajo, cada fila es una tarjeta con la etiqueta a la izquierda
   (data-label). Cifras: dato de la ficha del producto (D-HC3); «recaudas por caja» se calcula. Sin JS. */
.m-tprod__marco{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-tprod table{width:100%;border-collapse:collapse;font-size:var(--fs-aux)}
.m-tprod caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.m-tprod th,.m-tprod td{padding:var(--s-12) var(--s-16);text-align:left;vertical-align:top}
.m-tprod thead th{background:var(--color-brand-100);color:var(--color-brand-700);font-size:var(--fs-badge);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em}
.m-tprod tbody tr+tr{border-top:1px solid var(--color-border)}
.m-tprod__prod{display:flex;gap:var(--s-12);align-items:center;font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.m-tprod__prod a{color:var(--color-ink);text-decoration:none}
.m-tprod__prod a:hover{color:var(--color-action);text-decoration:underline}
.m-tprod__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-brand-100);color:var(--color-action)}
.m-tprod__ico svg{width:var(--icon-sm);height:var(--icon-sm)}
.m-tprod .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.m-tprod__gana{color:var(--color-action);font-size:var(--fs-body);font-weight:var(--fw-bold)}
.m-tprod__nota{margin-top:var(--s-12);font-size:var(--fs-aux);color:var(--color-text-muted)}
@media (max-width:1023px){
 .m-tprod__marco{overflow:visible;border:0;background:none}
 .m-tprod thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .m-tprod table,.m-tprod tbody,.m-tprod tr,.m-tprod td{display:block}
 .m-tprod tbody{display:grid;gap:var(--s-16)}
 .m-tprod tr{padding:var(--s-8) 0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
 .m-tprod td{display:flex;justify-content:space-between;gap:var(--s-16);padding:var(--s-8) var(--s-16)}
 .m-tprod td::before{content:attr(data-label);flex:none;color:var(--color-text-muted)}
 .m-tprod td:first-child::before{content:none}
 .m-tprod td:first-child{margin-bottom:var(--s-4);padding-bottom:var(--s-12);border-bottom:1px solid var(--color-border)}
 .m-tprod td.m-tprod__txt{display:block}
 .m-tprod td.m-tprod__txt::before{display:block;margin-bottom:var(--s-4)}
}
@media (min-width:768px) and (max-width:1023px){.m-tprod tbody{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== biblioteca: mascota-seccion (sin cambios) ===== */
/* RSJ · mascota-seccion y separador-mascota · v1.1 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Mascotas como acento (D12, D16, D20;
   excepción M2 que se pide al libro): decorativas (aria-hidden), diferidas (loading=lazy), sin coste en la primera carga.
   La sección que la lleva necesita .m-masc-host (position:relative). Imágenes: recortes provisionales hasta los PNG transparentes
   (H18, H25); el diseño se aprueba aparte de la imagen (regla 13). */
.m-masc-host{position:relative}
/* Todas las mascotas al mismo alto: 176 px, entre el Draqui (198) y la princesa (158) de la home (Miguel, 08/10/2026).
   El contenedor ocupa el ancho de la columna y centra la imagen, sea cual sea su proporción. */
.m-masc{position:absolute;z-index:0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;--m-masc-h:176px}
.m-masc img{width:auto;height:var(--m-masc-h)}
.m-masc[data-espejo] img{transform:scaleX(-1)}
/* En la 4.ª columna de la rejilla de 4 columnas (24 px de hueco), asomando por encima de la sección */
.m-masc[data-pos=columna4]{top:calc(-1*var(--s-48));right:var(--gutter);width:calc((100% - 2*var(--gutter) - 3*var(--s-24))/4)}
/* De pie sobre el borde superior de una tarjeta, en su 4.ª columna */
.m-masc[data-pos=sobre-borde]{bottom:calc(100% - 2px);right:0;width:calc((100% - 3*var(--s-24))/4)}
/* Encima del footer, centrada */
.m-masc[data-pos=footer]{left:0;right:0;bottom:calc(100% - 2px)}
@media (max-width:1023px){.m-masc[data-pos=columna4],.m-masc[data-pos=sobre-borde]{display:none}}
/* Separador entre bloques: mascota dentro de un círculo con borde del mismo color que las líneas, que llegan a los bordes de la página
   (Miguel, 08/10/2026). Fondo del círculo: blanco o transparente (data-fondo="no"). */
.m-separador{display:flex;align-items:center;gap:0;margin:var(--s-32) 0 var(--s-48)}
.m-separador::before,.m-separador::after{content:"";flex:1;height:1px;background:var(--color-border)}
.m-separador__circ{display:grid;place-items:center;flex:none;width:var(--s-80);height:var(--s-80);border:1px solid var(--color-border);border-radius:50%;background:var(--color-surface);overflow:hidden}
.m-separador[data-fondo=no] .m-separador__circ{background:none}
.m-separador img{width:auto;height:56px}
/* v1.1 · Variante «footer con marca» (Miguel, 08/10/2026): encima del footer, «rosessantjordi.com» muy grande en gris suave y Sant
   Jordi a su derecha, de pie sobre el borde del footer. El dominio es TEXTO, no imagen (no pesa nada: usa la Montserrat que ya
   carga la página). Es decorativo (aria-hidden): el nombre de la marca ya está en el logo del footer. El tamaño del texto se adapta
   al ancho de la pantalla para caber en una línea; la mascota acompaña al texto (1,2 veces su tamaño de letra). */
.m-masc-marca{display:flex;align-items:flex-end;justify-content:center;gap:var(--s-16);max-width:var(--container-max);margin:var(--section-gap) auto 0;padding-inline:var(--gutter);font-size:clamp(26px,8.2vw,120px);pointer-events:none}
.m-masc-marca__txt{font-weight:var(--fw-bold);line-height:1.18;letter-spacing:-.02em;white-space:nowrap;color:color-mix(in srgb,var(--color-border-strong) 55%,var(--color-surface))}
.m-masc-marca img{flex:none;width:auto;height:1.2em;margin-bottom:-2px}

/* ===== biblioteca: bloque-entrega (sin cambios) ===== */
/* RSJ · bloque-entrega · v1.1 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Un objeto de datos, tres presentaciones:
   tarjetas (home), lista (ficha) y línea (carrito). Iconos de Lucide (sustituyen a los provisionales, H22). Sin el camión
   ilustrado (H25, provisional): cuando exista, entra como mascota-seccion. Sin JS. */
.m-entrega__tarjetas{display:grid;gap:var(--s-12);margin:var(--s-24) 0 0;padding:0;list-style:none}
.m-entrega__t{display:flex;gap:var(--s-16);align-items:flex-start;padding:var(--s-16) var(--s-16);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-entrega__ico{display:grid;place-items:center;flex:none;width:var(--s-48);height:var(--s-48);border-radius:var(--radius-md);background:var(--color-brand-100);color:var(--color-brand-600)}
.m-entrega__ico svg{width:var(--icon-md);height:var(--icon-md)}
.m-entrega__k{font-size:var(--fs-aux);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.m-entrega__v{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--color-ink)}
.m-entrega__notas{display:grid;gap:var(--s-12);margin-top:var(--s-24)}
.m-entrega__lista{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-8) var(--s-16);margin:var(--s-12) 0 0;font-size:var(--fs-aux)}
.m-entrega__lista dt{font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.m-entrega__lista dd{margin:0;color:var(--color-ink)}
.m-entrega[data-variante=lista]{padding:var(--s-16);border-radius:var(--radius-md);background:var(--color-surface-soft)}
.m-entrega[data-variante=lista] h2{font-size:var(--fs-h3)}
.m-entrega__linea{display:flex;gap:var(--s-8);align-items:center;margin:0;font-size:var(--fs-badge);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.m-entrega__linea svg{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--color-action)}
@media (min-width:768px){.m-entrega__tarjetas{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}}
@media (min-width:1024px){.m-entrega__tarjetas{grid-template-columns:repeat(3,minmax(0,1fr))}.m-entrega__t{padding:var(--s-24)}}
/* v1.1 · Variante «desplegable» para la ficha (Miguel, 08/10/2026): pequeña y cerrada; se abre al pulsar y se cierra al pulsar fuera
   o con Escape. Usa <details>: sin JS se abre y cierra igual; el JS solo añade el cierre al pulsar fuera. */
.m-entrega[data-variante=desplegable]{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.m-entrega[data-variante=desplegable] summary{display:flex;align-items:center;gap:var(--s-8);min-height:var(--h-touch-min);padding:var(--s-8) var(--s-12);font-size:var(--fs-aux);list-style:none;cursor:pointer}
.m-entrega[data-variante=desplegable] summary::-webkit-details-marker{display:none}
.m-entrega[data-variante=desplegable] summary>svg:first-child{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--color-action)}
.m-entrega__res{flex:1;min-width:0}
.m-entrega__res b{font-weight:var(--fw-semibold)}
.m-entrega__res span{color:var(--color-text-muted)}
.m-entrega__flecha{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--color-text-muted);transition:transform var(--dur-fast) var(--ease)}
.m-entrega[data-variante=desplegable][open] .m-entrega__flecha{transform:rotate(180deg)}
.m-entrega[data-variante=desplegable] .m-entrega__lista{margin:0;padding:0 var(--s-12) var(--s-12);font-size:var(--fs-badge)}
@media (prefers-reduced-motion:reduce){.m-entrega__flecha{transition:none}}

/* ===== biblioteca: calculadora (sin cambios) ===== */
/* RSJ · calculadora (B01) · v1.2 (validado por Miguel el 09/10/2026). v1.2: cantidad en unidades, cajas debajo; campo de 112 px. Biblioteca de módulos. Estilo «juego» (D13 de la home; aspecto que se
   pide al libro) con los ajustes del libro: tarjeta con --radius-md (antes 20), dos columnas desde 1024 (antes 900),
   botón de presupuesto sin sombra, colores solo de tokens. Modos: data-modo="multiple" (home), "unitaria" (ficha) y "resumida" (v1.1, portada de campaña). */
.m-calc{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--s-24) var(--s-16);background:var(--color-surface)}
.m-calc__grid{display:grid;gap:var(--s-24);align-items:start}
.m-calc__in{display:grid;gap:var(--s-24);text-align:center;min-width:0}
.m-calc__lbl{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold);margin-bottom:var(--s-8)}
.m-calc__hint{margin-top:var(--s-8);font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-calc__money{display:flex;align-items:baseline;justify-content:center;gap:var(--s-4);max-width:300px;margin:0 auto;padding:var(--s-8) var(--s-16);border:2px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);transition:border-color var(--dur-fast) var(--ease)}
.m-calc__money:focus-within{border-color:var(--color-action)}
.m-calc__money input{width:100%;min-width:0;border:0;outline:0;background:none;text-align:center;font-size:48px;font-weight:var(--fw-bold);line-height:1.15;color:var(--color-action);font-variant-numeric:tabular-nums}
.m-calc__money input::placeholder,.m-calc__val input::placeholder{color:var(--color-border-strong)}
.m-calc__money span{font-size:var(--s-32);font-weight:var(--fw-bold);color:var(--color-action)}
.m-calc__linea{display:grid;gap:var(--s-16);padding:var(--s-16);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-soft)}
.m-calc[data-modo=unitaria] .m-calc__linea{border:0;padding:0;background:none}
.m-calc__linea select{width:100%;min-height:var(--h-touch-min);padding:var(--s-8) var(--s-12);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);font-weight:var(--fw-semibold)}
.m-calc__fila{display:grid;gap:var(--s-16)}
.m-calc__step{display:flex;align-items:center;justify-content:center;gap:var(--s-12)}
.m-calc__step>button{width:var(--h-btn);height:var(--h-btn);flex:none;border-radius:50%;border:2px solid var(--color-action);background:var(--color-surface);color:var(--color-action);font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:1}
.m-calc__step>button:hover{background:var(--color-action-soft)}
.m-calc__val{display:flex;align-items:baseline;justify-content:center;gap:2px;min-width:96px}
.m-calc__val input{width:112px;border:0;border-bottom:2px solid var(--color-border-strong);outline:0;background:none;text-align:center;font-size:36px;font-weight:var(--fw-bold);color:var(--color-ink);font-variant-numeric:tabular-nums}
.m-calc__val input:focus{border-bottom-color:var(--color-action)}
.m-calc__val span{font-size:var(--fs-h3);font-weight:var(--fw-bold)}
.m-calc__pie{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-4) var(--s-16);font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-calc__pie b{color:var(--color-ink)}
.m-calc__link{min-height:var(--h-touch-min);padding:0 var(--s-4);border:0;background:none;color:var(--color-action);font-size:var(--fs-aux);font-weight:var(--fw-semibold);text-decoration:underline}
.m-calc__mas{justify-self:center;font-size:var(--fs-body)}
.m-calc__out{display:grid;gap:var(--s-16);padding:var(--s-24);border-radius:var(--radius-md);background:var(--color-action-soft);text-align:center;min-width:0}
.m-calc__k{font-size:var(--fs-aux);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--color-action)}
.m-calc__big{display:block;margin-top:calc(-1*var(--s-8));font-size:52px;font-weight:var(--fw-bold);line-height:1.1;color:var(--color-action);font-variant-numeric:tabular-nums}
.m-calc__big.is-neutro{font-size:var(--fs-h3);color:var(--color-ink)}
.m-calc__obj{display:grid;gap:var(--s-8);padding:var(--s-12) var(--s-16);border-radius:var(--radius-sm);background:var(--color-surface);font-size:var(--fs-aux);line-height:1.5}
.m-calc__barra{display:block;height:var(--s-8);border-radius:var(--radius-pill);background:var(--color-surface-soft);box-shadow:inset 0 0 0 1px var(--color-border);overflow:hidden}
.m-calc__barra>span{display:block;height:100%;width:0;border-radius:inherit;background:var(--color-action);transition:width var(--dur-base) var(--ease)}
.m-calc__obj .btn{min-height:var(--h-touch-min);padding:var(--s-4) var(--s-16);font-size:var(--fs-aux);margin:var(--s-4) auto 0}
.m-calc__ok{color:var(--color-action);font-weight:var(--fw-bold)}
.m-calc__casillas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);margin:0}
.m-calc__casillas>div{padding:var(--s-8);border-radius:var(--radius-sm);background:var(--color-surface)}
.m-calc__casillas dt{font-size:var(--fs-badge);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.m-calc__casillas dd{margin:0;font-size:var(--fs-body);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.m-calc__eq{display:grid;gap:var(--s-4);font-size:var(--fs-aux);line-height:1.5;text-align:left}
.m-calc__botones{display:grid;gap:var(--s-8)}
.m-calc__email-hint,.m-calc__nota{font-size:var(--fs-badge);color:var(--color-text-muted);line-height:1.4}
@media (prefers-reduced-motion:reduce){.m-calc__barra>span{transition:none}}
@media (min-width:768px){.m-calc__fila{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.m-calc{padding:var(--s-48)}.m-calc__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-48)}}
@media (max-width:767px){
 .m-calc{border:0;border-radius:0;padding:var(--s-8) 0;background:none}
 .m-calc__out{padding:var(--s-16);margin-inline:calc(-1*var(--gutter));border-radius:0}
 .m-calc__big,.m-calc__money input{font-size:44px}
}
.m-calc__head{display:grid;gap:var(--s-8);max-width:760px;margin-bottom:var(--s-24)}
.m-calc[data-modo=unitaria] .m-calc__head{max-width:640px;margin-inline:auto;text-align:center}
.m-calc__eyebrow{color:var(--color-brand-600)}
.m-calc__head p:last-child{color:var(--color-text-muted)}
.m-calc__lineas{display:grid;gap:var(--s-16)}
.m-calc [hidden]{display:none!important}

/* v1.1 · modo «resumida»: un producto, cajas y precio de venta, resultado y «Añadir»; sin objetivo, equilibrio ni email */
.m-calc[data-modo=resumida] .m-calc__linea{border:0;padding:0;background:none}
.m-calc[data-modo=resumida] .m-calc__casillas{grid-template-columns:1fr 1fr}

/* ===== 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: resenas (sin cambios) ===== */
/* RSJ · resenas (carrusel) · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. D20 y D21: scroll-snap nativo; avanza solo si está a la
   vista y la pestaña activa; espera = 2 s + palabras ÷ 180 ppm de la reseña más larga visible (mínimo 6 s); pausa obligatoria;
   para con ratón, toque o foco; sin avance con «reducir movimiento» (excepción al libro §10 que se pide al libro). Ajustes: tarjetas
   con --radius-md (antes 20). Estrellas #F2B400 / #E3E7E3: se piden al libro como tokens. NO se publica sin reseñas reales. */
.m-resenas{--m-estrella:#F2B400;--m-estrella-off:#E3E7E3}
.m-resenas__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-16);margin-bottom:var(--s-24)}
.m-resenas__ctl{display:flex;gap:var(--s-8)}
.m-resenas__btn{display:grid;place-items:center;width:var(--h-touch-min);height:var(--h-touch-min);border:1px solid var(--color-border-strong);border-radius:50%;background:var(--color-surface);color:var(--color-ink)}
.m-resenas__btn:hover{border-color:var(--color-ink)}
.m-resenas__btn svg{width:var(--icon-sm);height:var(--icon-sm)}
.m-resenas__btn .i-play{display:none}
.m-resenas__btn[aria-pressed=true] .i-play{display:block}
.m-resenas__btn[aria-pressed=true] .i-pause{display:none}
.m-resenas__pista{overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:var(--s-4) var(--gutter) var(--s-8);scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.m-resenas__pista::-webkit-scrollbar{display:none}
.m-resenas__pista:focus-visible{outline:2px solid var(--color-action);outline-offset:-2px}
.m-resenas__lista{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:var(--s-16);margin:0;padding:0;list-style:none}
.m-resenas__t{position:relative;display:flex;flex-direction:column;gap:var(--s-16);padding:var(--s-24);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);scroll-snap-align:start}
.m-resenas__t::before{content:"\201C";position:absolute;top:var(--s-4);right:var(--s-24);font-size:72px;font-weight:var(--fw-bold);line-height:1;color:var(--color-brand-100)}
.m-resenas__estrellas{display:flex;gap:2px}
.m-resenas__estrellas svg{width:18px;height:18px;fill:var(--m-estrella-off);stroke:none}
.m-resenas__estrellas svg.on{fill:var(--m-estrella)}
.m-resenas__t blockquote{flex:1;margin:0}
.m-resenas__t blockquote p{line-height:1.55}
.m-resenas__t footer{display:flex;gap:var(--s-12);align-items:center;padding-top:var(--s-12);border-top:1px solid var(--color-border)}
.m-resenas__av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-brand-100);color:var(--color-brand-700);font-size:var(--fs-aux);font-weight:var(--fw-bold)}
.m-resenas__t footer b{display:block;font-size:var(--fs-aux)}
.m-resenas__t footer span span{display:block;font-size:var(--fs-badge);line-height:1.4;color:var(--color-text-muted)}
.m-resenas__t .m-resenas__compra{color:var(--color-action);font-weight:var(--fw-semibold)}
@media (min-width:768px){.m-resenas__lista{grid-auto-columns:calc((100% - var(--s-16))/2)}}
@media (min-width:1024px){.m-resenas__lista{grid-auto-columns:calc((100% - 2*var(--s-24))/3);gap:var(--s-24)}.m-resenas__pista{margin-inline:0;padding-inline:0;scroll-padding-inline:0}}
@media (prefers-reduced-motion:reduce){.m-resenas__pista{scroll-behavior:auto}}

/* ===== biblioteca: faqs (sin cambios) ===== */
/* RSJ · faqs (B03, + acordeón) · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. <details>/<summary> nativos: sin JS, accesibles y
   todo el texto en el HTML (bueno para buscadores). Home v0.12: punto de marca a la izquierda, chevron-down de Lucide a la derecha,
   abierta con fondo surface-soft y filete de marca. Animación de 150 ms solo donde el navegador sabe animar la altura. */
.m-faqs{border-top:1px solid var(--color-border)}
.m-faqs__p{border-bottom:1px solid var(--color-border)}
.m-faqs__p summary{position:relative;min-height:var(--h-touch-min);padding:var(--s-16) var(--s-48) var(--s-16) var(--s-32);font-weight:var(--fw-semibold);list-style:none;cursor:pointer}
.m-faqs__p summary::-webkit-details-marker{display:none}
.m-faqs__p summary::before{content:"";position:absolute;left:var(--s-12);top:calc(var(--s-16) + .6em);width:var(--s-8);height:var(--s-8);border-radius:50%;background:var(--color-brand-600)}
.m-faqs__p summary svg{position:absolute;right:var(--s-12);top:calc(var(--s-16) + .1em);width:var(--icon-sm);height:var(--icon-sm);color:var(--color-brand-600);transition:transform 150ms var(--ease)}
.m-faqs__p[open]{background:var(--color-surface-soft);box-shadow:inset 3px 0 0 var(--color-brand-600)}
.m-faqs__p[open] summary svg{transform:rotate(180deg)}
.m-faqs__r{padding:0 var(--s-48) var(--s-16) var(--s-32)}
.m-faqs__r p{max-width:75ch}
@supports (interpolate-size:allow-keywords){.m-faqs{interpolate-size:allow-keywords}.m-faqs__p::details-content{block-size:0;overflow:hidden;transition:block-size 150ms var(--ease),content-visibility 150ms allow-discrete}.m-faqs__p[open]::details-content{block-size:auto}}
@media (prefers-reduced-motion:reduce){.m-faqs__p summary svg{transition:none}.m-faqs__p::details-content{transition:none}}

/* ===== biblioteca: contenido-seo (sin cambios) ===== */
/* RSJ · contenido-seo · v1.1 (validado por Miguel el 15/10/2026; v1.0 el 08/10/2026; v1.1 de la portada de campaña, MENOR: minmax(0,1fr) en la rejilla de móvil). Biblioteca de módulos. D20: texto largo en caja con imagen principal a la derecha
   (H26: imagen por confirmar). Ajustes: radios --radius-md. Dos columnas de texto desde 1024. Sin JS. */
.m-seo{padding:var(--s-24);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.m-seo__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-24);grid-template-areas:"h" "f" "t"} /* v1.1: minmax(0,1fr) para que una etiqueta larga no desborde en móvil */
.m-seo__grid>h2{grid-area:h}
.m-seo__fig{grid-area:f;display:grid;gap:var(--s-8);justify-items:center;align-self:start;margin:0;padding:var(--s-16);border-radius:var(--radius-md);background:var(--color-brand-100)}
.m-seo__fig img{width:100%;max-width:340px;height:auto;aspect-ratio:640/500}
.m-seo__fig figcaption{font-size:var(--fs-badge);color:var(--color-brand-700);text-align:center}
.m-seo__texto{grid-area:t}
.m-seo__texto>*+*{margin-top:var(--s-16)}
.m-seo__texto h3{margin-top:var(--s-24);font-size:var(--fs-body)}
.m-seo[data-variante=sin-imagen] .m-seo__grid{grid-template-areas:"h" "t"}
@media (min-width:1024px){
 .m-seo{padding:var(--s-48)}
 .m-seo__grid{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"h f" "t f";column-gap:var(--s-48)}
 .m-seo[data-variante=sin-imagen] .m-seo__grid{grid-template-columns:1fr;grid-template-areas:"h" "t"}
 .m-seo__texto{column-count:2;column-gap:var(--s-48)}
 .m-seo__texto h3{break-after:avoid}
 .m-seo__texto p{break-inside:avoid}
}

/* ===== 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) */

/* ===== biblioteca: selector-campana (sin cambios) ===== */
/* RSJ · selector-campana («También vendemos») · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. D20: tarjetas con icono, nombre,
   descripción y época de venta; «Campaña activa» en el color de su campaña (excepción a CA1 que se pide al libro). Época centrada en su recuadro
   y con --radius-sm (Miguel, 08/10/2026). Ajustes: sin el
   borde rosado al pasar el ratón (color sin token); iconos de Lucide. 2 columnas en móvil, 4 desde 768. Sin JS. */
.m-campanas__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);margin:0;padding:0;list-style:none}
.m-campanas__t{display:flex;flex-direction:column;gap:var(--s-8);height:100%;padding:var(--s-16);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-ink);text-decoration:none;transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.m-campanas__t:hover{border-color:var(--color-border-strong);color:var(--color-ink);transform:translateY(-2px)}
.m-campanas__ico{display:grid;place-items:center;width:var(--s-48);height:var(--s-48);margin-bottom:var(--s-4);border-radius:var(--radius-md);background:var(--color-brand-100);color:var(--color-brand-600)}
.m-campanas__ico svg{width:28px;height:28px}
.m-campanas__t strong{font-size:var(--fs-body)}
.m-campanas__d{flex:1;font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-campanas__cuando{align-self:stretch;padding:var(--s-4) var(--s-8);border:1px solid var(--color-border);border-radius:var(--radius-sm);text-align:center;background:var(--color-surface-soft);font-size:var(--fs-badge);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.m-campanas__cuando.is-activa{color:var(--color-campaign)}
@media (min-width:768px){.m-campanas__lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16)}.m-campanas__t{padding:var(--s-24)}}
@media (prefers-reduced-motion:reduce){.m-campanas__t:hover{transform:none}}
.m-campanas__t[data-campana=navidad]{--color-campaign:var(--color-campaign-navidad)}
.m-campanas__t[data-campana=san-valentin]{--color-campaign:var(--color-campaign-san-valentin)}
.m-campanas__t[data-campana=dia-madre]{--color-campaign:var(--color-campaign-dia-madre)}
.m-campanas__t[data-campana=ramos]{--color-campaign:var(--color-campaign-ramos)}

/* ===== biblioteca: carrito-lateral (sin cambios) ===== */
/* =====================================================================
   RSJ · carrito-lateral (minicart) · v1.6 (validado por Miguel el 15/10/2026; «Producto añadido» en success, sin WhatsApp al pie) · Biblioteca de módulos.
   Cambios frente a v1.2 (libro v0.9): pantalla completa por debajo de 768 px (antes 640); capas, velo y sombra con
   tokens (--z-overlay, --z-drawer, --overlay, --shadow-lg); duraciones --dur-base; selector de cajas y «Seguir
   comprando» a 44 px; tamaños solo de la escala del libro; iconos de Lucide; botón principal de 48 px (el grande
   de 56 es solo el de la ficha, libro §8.2)
   Depende de los tokens del libro de estilo (base de la ficha v0.2):
   --color-*, --font-ui, --radius-*, --s-*, --fs-*, y de las clases
   comunes .btn, .btn-primary, .btn-secondary, .btn-block, .num,
   .visually-hidden y .tbd-tag. En demo/index.html van copiados.
   Todas las clases propias empiezan por .mc- para no chocar con nada.
   ===================================================================== */

/* Variables propias del módulo */
.mc{--drawer-w:480px}
body.mc-lock{overflow:hidden}
.mc [hidden]{display:none!important}
.mc-scrim{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--overlay);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease),visibility 0s var(--dur-base)}
.mc-scrim.is-open{opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease)}
.mc{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);width:min(var(--drawer-w),100%);
  display:flex;flex-direction:column;background:var(--color-surface);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);box-shadow:var(--shadow-lg);
  transform:translateX(100%);visibility:hidden;transition:transform var(--dur-base) var(--ease),visibility 0s var(--dur-base)}
.mc.is-open{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease)}

/* Cabecera fija */
.mc-head{flex:none;display:flex;align-items:center;gap:var(--s-12);padding:var(--s-16) var(--s-16) var(--s-12) var(--s-24)}
.mc-head h2{font-size:var(--fs-h3);line-height:1.2;font-weight:700}
.mc-head h2:focus{outline:none}
.mc-head .count{font-size:var(--fs-aux);font-weight:500;color:var(--color-text-muted)}
.mc-close{margin-left:auto;flex:none;width:var(--h-touch-min);height:var(--h-touch-min);display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-sm);background:none}
.mc-close:hover{background:var(--color-surface-soft)}
.mc-close svg{width:var(--icon-md);height:var(--icon-md)}

/* Aviso de producto añadido (fijo, compacto) */
.mc-added{flex:none;display:flex;align-items:center;gap:var(--s-12);margin:0 var(--s-16) var(--s-12);padding:var(--s-12) var(--s-16);border-radius:var(--radius-md);background:var(--color-success-soft);color:var(--color-success)} /* v1.6: siempre verde, también con tema */
.mc-added svg{width:var(--icon-md);height:var(--icon-md);flex:none}
.mc-added b{display:block;font-size:var(--fs-body);font-weight:700;line-height:1.3}
.mc-added span{display:block;font-size:var(--fs-aux);font-weight:500;color:var(--color-ink)}

/* Lista: ÚNICA zona con scroll */
.mc-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border-block:1px solid var(--color-border);padding-inline:var(--s-16) var(--s-16)}
/* Scroll de la lista: fino y discreto, sobre fondo blanco */
.mc-list{background:var(--color-surface);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}
.mc-list::-webkit-scrollbar{width:6px}
.mc-list::-webkit-scrollbar-track{background:transparent}
.mc-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
.mc-list::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}
.mc-list::-webkit-scrollbar-button{display:none;height:0}
.mc-line{display:grid;grid-template-columns:var(--s-64) minmax(0,1fr) var(--h-touch-min);grid-template-areas:"img info del" "buy buy buy" "save save save";gap:var(--s-12);padding-block:var(--s-16);border-bottom:1px solid var(--color-border)}
.mc-line:last-child{border-bottom:0}
.mc-line.is-new{animation:flash 1.6s ease-out}
@media (prefers-reduced-motion:reduce){.mc-line.is-new{animation:none}}
@keyframes flash{from{background:var(--color-action-soft)}to{background:transparent}}
.mc-img{grid-area:img;width:var(--s-64);height:var(--s-64);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface)}
.mc-img img{width:100%;height:100%;object-fit:cover}
.mc-info{grid-area:info;display:flex;flex-direction:column;gap:2px;min-width:0}
.mc-name{font-size:var(--fs-aux);font-weight:700;line-height:1.35}
.mc-var{font-size:var(--fs-badge);font-weight:500;color:var(--color-text-muted)}
.mc-units{font-size:var(--fs-badge);font-weight:600;color:var(--color-ink)}
.mc-del{grid-area:del;width:var(--h-touch-min);height:var(--h-touch-min);display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-sm);background:none;color:var(--color-text-muted)}
.mc-del:hover{background:var(--color-brand-100);color:var(--color-error)}
.mc-del svg{width:var(--icon-sm);height:var(--icon-sm)}
.mc-buy{grid-area:buy;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:var(--s-12)}
.mc-lbl{display:block;font-size:var(--fs-badge);font-weight:500;color:var(--color-text-muted);margin-bottom:2px}
.mc-price s{font-size:var(--fs-badge);color:var(--color-text-muted);margin-right:var(--s-4)}
.mc-price b{font-size:var(--fs-body);font-weight:700;color:var(--color-action)}
.mc-price .per{font-size:var(--fs-badge);font-weight:500;color:var(--color-text-muted)}
.mc .stepper{display:inline-flex;align-items:stretch;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);overflow:hidden}
.mc .stepper button{width:var(--h-touch-min);min-height:var(--h-touch-min);border:0;background:var(--color-surface-soft);font-size:var(--fs-h3);font-weight:600;line-height:1}
.mc .stepper button:hover{background:var(--color-action-soft)}
.mc .stepper button:disabled{opacity:.4;cursor:not-allowed;background:var(--color-surface-soft)}
.mc .stepper input{width:var(--s-64);border:0;border-inline:1px solid var(--color-border-strong);text-align:center;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;background:var(--color-surface)}
.mc .stepper input::-webkit-inner-spin-button,.mc .stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mc-qty{text-align:center}
.mc-sub{text-align:right}
.mc-sub output{font-size:var(--fs-body);font-weight:700}
.mc-save{grid-area:save;margin-top:-4px;font-size:var(--fs-badge);font-weight:500;color:var(--color-text-muted)}
.mc-save b{color:var(--color-action);font-weight:700}

.mc-empty{padding:var(--s-48) var(--s-16);text-align:center;display:grid;gap:var(--s-12);justify-items:center;color:var(--color-text-muted)}
.mc-ship-inlist{display:none!important}

/* Pie fijo */
.mc-foot{flex:none;display:grid;gap:var(--s-12);padding:var(--s-16) var(--s-16) calc(var(--s-16) + env(safe-area-inset-bottom,0px))}
.mc-ship{display:flex;gap:var(--s-8);align-items:center;font-size:var(--fs-badge);font-weight:500;color:var(--color-text-muted)}
.mc-ship svg{width:var(--icon-sm);height:var(--icon-sm);flex:none;color:var(--color-action)}
.mc-savings{display:flex;align-items:center;gap:var(--s-12);padding:var(--s-12) var(--s-16);border-radius:var(--radius-md);background:var(--color-action-soft)}
.mc-savings svg{width:var(--s-32);height:var(--s-32);flex:none;color:var(--color-action)}
.mc-savings span{font-size:var(--fs-aux);font-weight:500}
.mc-savings output{margin-left:auto;font-size:var(--fs-h3);font-weight:700;color:var(--color-action)}
.mc-totals{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s-16);row-gap:var(--s-8)}
.mc-total-lbl b{font-weight:700}
.mc-total-lbl small{font-size:var(--fs-badge);font-weight:500;color:var(--color-text-muted)}
.mc-total-lbl .net{font-size:var(--fs-aux);font-weight:500;color:var(--color-text-muted)}
.mc-total-val{font-size:var(--fs-price);font-weight:700;line-height:1.15;text-align:right}
/* Recaudación estimada: bajo el botón principal, centrada */
.mc-earn{display:block;text-wrap:balance;padding-block:var(--s-4);text-align:center;font-size:var(--fs-aux);font-weight:500;line-height:1.35;color:var(--color-ink)}
.mc-earn svg{display:inline-block;width:var(--icon-sm);height:var(--icon-sm);margin-right:var(--s-8);vertical-align:-4px;color:var(--color-action)}
.mc-earn output{font-size:var(--fs-body);font-weight:700;color:var(--color-action)}
.mc-earn small{font-size:var(--fs-badge);font-weight:500;white-space:nowrap}
.mc-earn-short{display:none}
.mc-ctas{display:grid;gap:var(--s-8)}
.mc-ctas .btn-primary{min-height:var(--h-btn)}

/* Aviso de deshacer */
.mc-toast{position:absolute;left:var(--s-16);right:var(--s-16);bottom:calc(100% + var(--s-8));display:flex;align-items:center;gap:var(--s-8);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-16);border-radius:var(--radius-sm);background:var(--color-ink);color:var(--color-surface);box-shadow:var(--shadow-sm);font-size:var(--fs-aux);font-weight:500}
.mc-toast button{margin-left:auto;border:0;background:none;color:var(--color-surface);font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:var(--h-touch-min);padding:0 var(--s-8)}
.mc-toast button:focus-visible{outline-color:var(--color-surface);outline-offset:-2px}
.mc-foot{position:relative} /* para colocar el aviso de «deshacer» */


/* ===== Pantallas bajas (p. ej. iPhone SE con la barra del navegador): se compacta lo fijo para que la lista no quede en nada ===== */
@media (max-height:740px){
  .mc-added span{display:none}
  .mc-ship{display:none}
  .mc-ship-inlist{display:flex!important;margin-block:var(--s-8) var(--s-16)}
  .mc-savings{padding:var(--s-8) var(--s-12)}
  .mc-savings svg{display:none}
  .mc-savings output{font-size:var(--fs-body)}
  .mc-total-val{font-size:var(--fs-h3)}
  .mc-ctas .btn-secondary{min-height:var(--h-touch-min);border-color:transparent;text-decoration:underline}
}

/* ===== Móvil: 100 % de ancho y alto; solo la lista hace scroll ===== */
@media (max-width:767px){
  .mc-price s{display:block;margin-right:0}
  .mc{width:100%;border-radius:0;box-shadow:none}
  .mc-head{padding:var(--s-12) var(--s-8) var(--s-8) var(--s-16)}
  .mc-added{margin:0 var(--s-12) var(--s-8);padding:var(--s-8) var(--s-12)}
  .mc-added svg{width:var(--icon-sm);height:var(--icon-sm)}
  .mc-added span{font-size:var(--fs-badge)}
  .mc-list{padding-inline:var(--s-12)}
  .mc-line{grid-template-columns:var(--s-64) minmax(0,1fr) var(--h-touch-min);gap:var(--s-8) var(--s-12);padding-block:var(--s-12)}
  .mc-img{width:var(--s-64);height:var(--s-64)}
  .mc-foot{gap:var(--s-8);padding:var(--s-12) var(--s-12) calc(var(--s-12) + env(safe-area-inset-bottom,0px))}
  .mc-savings{padding:var(--s-8) var(--s-12)}
  .mc-savings svg{width:var(--icon-md);height:var(--icon-md)}
  .mc-savings output{font-size:var(--fs-body)}
  .mc-ctas .btn-secondary{min-height:var(--h-touch-min);padding-block:var(--s-8)}
  .mc-savings span{font-size:var(--fs-badge);line-height:1.3}
  .mc-earn-long{display:none}
  .mc-earn-short{display:inline}
}

/* ===== biblioteca: aviso-flotante (sin cambios) ===== */
/* RSJ · aviso-flotante · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Libro §8.6: fondo ink, texto blanco 14,
   4 s (6 s con acción), se pausa con ratón o foco, se puede cerrar, role=status, por encima del carrito (--z-toast).
   Abajo y centrado en móvil; abajo a la derecha desde 1024. Requiere tokens.css y base.css y aviso.js. */
.m-aviso{position:fixed;z-index:var(--z-toast);left:50%;bottom:calc(var(--s-16) + env(safe-area-inset-bottom,0px));transform:translate(-50%,var(--s-8));width:max-content;max-width:calc(100% - 2*var(--gutter));display:flex;align-items:center;gap:var(--s-8);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-16);border-radius:var(--radius-sm);background:var(--color-ink);color:var(--color-surface);box-shadow:var(--shadow-sm);font-size:var(--fs-aux);line-height:1.4;opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility var(--dur-base)}
.m-aviso.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.m-aviso__txt{padding-block:var(--s-8)}
.m-aviso__accion{min-height:var(--h-touch-min);padding:0 var(--s-8);border:0;background:none;color:var(--color-surface);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px}
.m-aviso__cerrar{display:grid;place-items:center;width:var(--h-touch-min);height:var(--h-touch-min);border:0;border-radius:var(--radius-sm);background:none;color:var(--color-surface)}
.m-aviso__cerrar svg{width:var(--icon-sm);height:var(--icon-sm)}
.m-aviso button:focus-visible{outline-color:var(--color-surface);outline-offset:-2px}
@media (min-width:1024px){.m-aviso{left:auto;right:var(--s-24);bottom:var(--s-24);transform:translateY(var(--s-8))}.m-aviso.is-on{transform:none}}

/* ===== biblioteca: barra-fija-movil (sin cambios) ===== */
/* RSJ · barra-fija-movil · v1.1 (validado por Miguel el 14/10/2026; v1.0 el 08/10). v1.1: la variante ficha sigue al selector y añade al carrito. Biblioteca de módulos. Solo por debajo de 768 px; capa --z-sticky.
   Variantes: data-variante="ficha" (añadir con total) y "home" (aparece solo con algo en el carrito: clase is-on). */
.m-barra{position:fixed;z-index:var(--z-sticky);left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);padding:var(--s-12) var(--gutter) calc(var(--s-12) + env(safe-area-inset-bottom,0px));background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease)}
.m-barra[data-variante=home]:not(.is-on){transform:translateY(110%);visibility:hidden}
.m-barra__dato{display:grid;line-height:1.3;min-width:0}
.m-barra__total{font-size:var(--fs-h3);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.m-barra__det{font-size:var(--fs-aux);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.m-barra .btn{flex:none}
@media (min-width:768px){.m-barra{display:none}}
.m-barra__det{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== biblioteca: boton-subir (sin cambios) ===== */
/* RSJ · boton-subir · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. Círculo de 44 px abajo a la derecha; flota: --shadow-sm.
   Aparece cuando el elemento marcado con data-subir-desde (el hero) sale por arriba. Por encima de la barra fija en móvil. */
.m-subir{position:fixed;z-index:var(--z-sticky);right:var(--s-16);bottom:calc(var(--s-16) + env(safe-area-inset-bottom,0px));display:grid;place-items:center;width:var(--h-touch-min);height:var(--h-touch-min);border:1px solid var(--color-border-strong);border-radius:50%;background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;transform:translateY(var(--s-8));transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility var(--dur-base),color var(--dur-fast),border-color var(--dur-fast)}
.m-subir.is-on{opacity:1;visibility:visible;transform:none}
.m-subir:hover{color:var(--color-action);border-color:var(--color-action)}
.m-subir svg{width:var(--icon-sm);height:var(--icon-sm)}
@media (max-width:767px){body:has(.m-barra.is-on,.m-barra[data-variante=ficha]) .m-subir{bottom:calc(var(--h-btn) + var(--s-24) + var(--s-16) + env(safe-area-inset-bottom,0px))}}
@media (min-width:1024px){.m-subir{right:var(--s-24);bottom:var(--s-24)}}

/* ===== PLANTILLA home-campana (no es código de módulos) ===== */
/* RSJ · plantilla home-campana (mayorista) v1 · CSS propio de la PLANTILLA (no es código de módulos). Del prototipo v0.8 aprobado (D-HC10). */
.camp-pt0{padding-top:0}
.camp-calend{padding-block:var(--s-32)}
.camp-pie{margin-top:var(--s-48)}
/* Ajustes de Miguel (25/10/2026), no vienen de la biblioteca: pasar al «Gestor de módulos» */
/* «Te avisamos cuando abramos…» con la imagen principal de la campaña a la derecha (debajo en móvil) */
.m-capt--img{grid-template-columns:minmax(0,1fr)}
.m-capt__txt{display:grid;gap:var(--s-16);min-width:0}
.m-capt__fig{margin:0;display:flex;justify-content:center;align-items:center}
.m-capt__fig img{width:auto;max-width:min(280px,100%);max-height:300px;height:auto} /* con su proporción; las verticales, hasta 300 px de alto */
@media (min-width:1024px){.m-capt--img{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:center;column-gap:var(--s-32)}.m-capt__fig img{max-width:min(400px,100%)}}
/* Entrega: la imagen (dragón con la caja de rosas) en la fila del título y la entradilla, alineada por abajo con la entradilla y
   asomando por arriba como lo hacía el camión; no baja a las tarjetas (Miguel, 01/11/2026). 150 px de alto, 22 KB, diferida */
.m-entrega__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-24)}
.m-entrega__cab .sec-head{flex:1 1 auto;min-width:0}
.m-entrega__img{flex:none;margin-top:calc(-1*var(--s-48));line-height:0;pointer-events:none}
.m-entrega__img img{display:block;width:auto;height:150px}
@media (max-width:1023px){.m-entrega__img{display:none}}
/* Imagen destacada del hero (Miguel, 01/11/2026): que todas pesen como la del Día de la Madre. El mismo alto máximo para todas (440 px) y,
   las apaisadas, hasta 560 px de ancho, en una columna más ancha que la de la biblioteca (440 px). El texto no cambia: le sobraban unos
   70 px. Cada una con su proporción (width y height en la etiqueta). En móvil, hasta 300 px de alto, para no empujar el contenido */
.m-hero[data-variante=campana] .m-hero__visual{max-width:none}
.m-hero[data-variante=campana] .m-hero__masc{width:100%}
.m-hero[data-variante=campana] .m-hero__masc img{display:block;width:auto;height:auto;max-width:100%;max-height:300px;margin-inline:auto}
@media (min-width:1024px){
 .m-hero[data-variante=campana] .m-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,min(560px,44%));gap:var(--s-48)}
 .m-hero[data-variante=campana] .m-hero__masc img{max-height:440px;margin-right:0}
}
/* La misma imagen junto al texto para buscadores: con su proporción (la biblioteca la fija a 640 × 500); las verticales, hasta 280 px */
.m-seo__fig img{width:auto;max-width:min(340px,100%);max-height:280px;aspect-ratio:auto}
/* Producto sin foto: la imagen de la campaña como foto provisional, hasta que tenga la suya (Miguel, 01/11/2026) */
.m-card__foto .m-card__provisional{padding:var(--s-8);background:var(--color-surface-soft)}