/* ===== biblioteca: banner (sin cambios) ===== */
/* RSJ · banner-urgencia (franja de campaña) · v1.0 (validada por Miguel el 08/10/2026). Biblioteca de módulos.
   Libro FR1, M1 y CA1: una línea encima del header, sin cerrar, sin animación, texto blanco sobre el acento de la campaña.
   Requiere tokens.css y base.css. Sin JS. */
.m-banner-urgencia{--color-campaign:var(--color-campaign-sant-jordi);background:var(--color-campaign);color:var(--color-surface);font-size:var(--fs-aux);font-weight:var(--fw-semibold);line-height:1.3}
.m-banner-urgencia[data-campana=navidad]{--color-campaign:var(--color-campaign-navidad)}
.m-banner-urgencia[data-campana=san-valentin]{--color-campaign:var(--color-campaign-san-valentin)}
.m-banner-urgencia[data-campana=dia-madre]{--color-campaign:var(--color-campaign-dia-madre)}
.m-banner-urgencia[data-campana=ramos]{--color-campaign:var(--color-campaign-ramos)}
.m-banner-urgencia__in{display:flex;align-items:center;justify-content:center;gap:var(--s-16);min-height:var(--h-touch-min);max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter);white-space:nowrap}
.m-banner-urgencia__txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.m-banner-urgencia__largo{display:none}
.m-banner-urgencia a{flex:none;display:inline-flex;align-items:center;min-height:var(--h-touch-min);color:var(--color-surface);text-decoration:underline;text-underline-offset:3px}
.m-banner-urgencia a:hover{color:var(--color-surface);text-decoration-thickness:2px}
.m-banner-urgencia a:focus-visible{outline-color:var(--color-surface);outline-offset:-2px}
@media (min-width:768px){.m-banner-urgencia__largo{display:inline}.m-banner-urgencia__corto{display:none}}

/* ===== 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: confianza (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: masc (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: 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)}

/* filtrosReglas: las genera la plantilla a partir de las etiquetas (web/v3/home.php) */

/* ===== biblioteca: grid (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 (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: 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: calc (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: 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: como (sin cambios) ===== */
/* RSJ · como-comprar · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. D20 y D21: cuatro tarjetas cuadradas muy redondeadas unidas por
   una línea punteada y ondulada (horizontal desde 1024, vertical en móvil y tableta). Ajustes del libro: radio --radius-lg, sin sombra
   (aro de 2 px brand-100), corte de 1024 (antes 900), iconos de Lucide. El color de la línea (#E2A391) se pide al libro como token. */
.m-como{--m-como-linea:#E2A391}
.m-como__lista{position:relative;display:grid;gap:var(--s-24);margin:0;padding:0;list-style:none}
.m-como__linea{position:absolute;overflow:visible;pointer-events:none}
.m-como__linea path{fill:none;stroke:var(--m-como-linea);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 9;vector-effect:non-scaling-stroke}
.m-como__linea--h{display:none}
.m-como__linea--v{left:20px;top:40px;width:40px;height:calc(100% - 80px)}
.m-como__paso{position:relative;z-index:1;display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--s-16);align-items:center}
.m-como__ico{position:relative;display:grid;place-items:center;width:80px;height:80px;border:2px solid var(--color-brand-100);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-brand-600)}
.m-como__ico svg{width:36px;height:36px}
.m-como__num{position:absolute;top:calc(-1*var(--s-8));right:calc(-1*var(--s-8));display:grid;place-items:center;width:28px;height:28px;border:3px solid var(--color-surface-soft);border-radius:50%;background:var(--color-brand-600);color:var(--color-surface);font-size:var(--fs-aux);font-weight:var(--fw-bold)}
.m-como__paso h3{font-size:var(--fs-body)}
.m-como__paso p{margin-top:var(--s-4);font-size:var(--fs-aux);color:var(--color-text-muted)}
@media (min-width:1024px){
 .m-como__lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-32)}
 .m-como__linea--v{display:none}
 .m-como__linea--h{display:block;left:12.5%;top:30px;width:75%;height:40px}
 .m-como__paso{grid-template-columns:1fr;justify-items:center;align-content:start;text-align:center}
 .m-como__ico{width:100px;height:100px}
 .m-como__ico svg{width:44px;height:44px}
 .m-como__paso p{max-width:26ch;margin-inline:auto}
}

/* ===== biblioteca: formatos (sin cambios) ===== */
/* RSJ · tabla-comparativa, variante «tarjetas de formato» · v1.0 (validado por Miguel el 08/10/2026). Biblioteca de módulos. D20: tres tarjetas con
   icono, para quién es, precio «desde» (C10), cómo llega, unidades y botón que marca el filtro (data-filtro). Radio --radius-md
   (antes 20), iconos de Lucide. Sin JS propio: el botón lo atiende el módulo filtros. */
.m-formatos__lista{display:grid;gap:var(--s-16);margin:0;padding:0;list-style:none}
.m-formatos__t{display:flex;flex-direction:column;gap:var(--s-16);height:100%;padding:var(--s-24);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.m-formatos__cab{display:flex;gap:var(--s-12);align-items:center}
.m-formatos__ico{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:var(--radius-md);background:var(--color-brand-100);color:var(--color-brand-600)}
.m-formatos__ico svg{width:var(--s-32);height:var(--s-32)}
.m-formatos__t h3{font-size:var(--fs-h3)}
.m-formatos__para{font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-formatos__precio{margin:0;padding:var(--s-12) var(--s-16);border-radius:var(--radius-sm);background:var(--color-action-soft);font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-formatos__precio b{margin-inline:2px;font-size:var(--fs-price);color:var(--color-action);font-variant-numeric:tabular-nums}
.m-formatos__datos{display:grid;flex:1;gap:var(--s-8);margin:0}
.m-formatos__datos div{display:flex;justify-content:space-between;gap:var(--s-16);padding-bottom:var(--s-8);border-bottom:1px dashed var(--color-border)}
.m-formatos__datos dt{font-size:var(--fs-aux);color:var(--color-text-muted)}
.m-formatos__datos dd{margin:0;font-size:var(--fs-aux);font-weight:var(--fw-semibold);text-align:right}
.m-formatos__min{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-32);margin-top:var(--s-24);font-size:var(--fs-aux)}
@media (min-width:768px){.m-formatos__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24)}}

/* ===== biblioteca: tprod (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: 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: 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: capt (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: campanas (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 (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 (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 (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: 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 de la home (no es código de módulos): secciones, espacios para las mascotas y banda del prototipo ===== */
.home-gap{height:var(--s-64)}
.home-pt0{padding-top:0}
@media(min-width:1024px){.home-calc{padding-top:calc(var(--section-gap) + 112px)}}
.home-footer{margin-top:var(--s-48)}
@media(min-width:1024px){.home-footer{margin-top:calc(var(--s-48) + 128px)}}
@media(max-width:1023px){.home-footer{margin-top:calc(var(--s-48) + 128px)}}
/* Ajustes de Miguel (01/11/2026), no vienen de la biblioteca: pasar al «Gestor de módulos» */
/* 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}}
/* 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)}