/* ============================================================================
   MDPI · SISTEMA DE DISEÑO GLOBAL v2 — Industrial Premium + Catálogo Técnico
   Dirección: Epilog + McMaster · antracita + ámbar quemado · IBM Plex
   v2.0 — 2026-06-03 · REORGANIZADO Y COHERENTE (Ola E · Carril 2)
   Skills: frontend-design (escala/spacing/estados) + mdpi-design-system (tokens α)
   Reemplaza mdpi-global.css. Render del cuerpo: shortcode [mdpi_cat_body] -> .mdpi-cat-body
   Scope #brx-content (1,1,1) -> GANA a #brxe-xxx (1,0,0) sin !important.
   ============================================================================ */

/* ======================= 1 · TOKENS ======================= */
:root{
  /* — Antracita / charcoal (base dominante) — */
  --mdpi-ink-900:#0E1417; --mdpi-ink-800:#161D21; --mdpi-ink-700:#1F2937; --mdpi-ink-600:#374151;
  /* — Texto (AA+ sobre blanco) — */
  --mdpi-text:#111827; --mdpi-text-2:#3F4955; --mdpi-text-3:#6B7280;
  --mdpi-text-on-dark:#F4F6F7; --mdpi-text-on-dark-2:#C2CCD3;
  /* — Ámbar quemado (acento restringido) — */
  --mdpi-amber:#DC6B2F;          /* iconos/bordes/acento (NO texto sobre blanco) */
  --mdpi-amber-cta:#B05423;      /* fondo botón · blanco 5.1:1 AA */
  --mdpi-amber-cta-hover:#8F4017;/* hover botón · blanco 6.6:1 AA */
  --mdpi-amber-ink:#9A4519;      /* texto ámbar sobre blanco 6.5:1 AA */
  --mdpi-amber-bg:#FBF1EA; --mdpi-amber-border:#F0C6A2;
  /* — WhatsApp — */
  --mdpi-wa:#157F40; --mdpi-wa-hover:#10632F; --mdpi-wa-brand:#25D366;
  /* — Superficies / bordes — */
  --mdpi-white:#FFFFFF; --mdpi-surface:#F7F8F9; --mdpi-surface-2:#EEF1F3;
  --mdpi-border:#E2E6E9; --mdpi-border-strong:#CDD3D8;
  /* — Estados — */
  --mdpi-success:#15803D; --mdpi-warning:#B45309; --mdpi-error:#B91C1C; --mdpi-info:#1E40AF;

  /* — Tipografía — */
  --mdpi-font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mdpi-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* ESCALA FLUIDA en PX (root-independiente). CLAVE: produccion tiene html font-size:62.5%
     (1rem=10px); con tokens en rem el sistema nuevo se encogia al 62.5% (H1 27.5px en vez de 44).
     En px coincide con el preview en cualquier root. NO tocar los --mdpi-fs-12..46 legacy. */
  --mdpi-fs-micro:12px;                                  /* labels mono/técnicos */
  --mdpi-fs-small:14px;                                  /* secundario (mínimo legible) */
  --mdpi-fs-body:16px;                                   /* cuerpo B2B legible */
  --mdpi-fs-lead:18px;          /* 17-19px · leads/intro */
  --mdpi-fs-h3:22px;         /* 19-22px */
  --mdpi-fs-h2:clamp(22px,18px + .9vw,28px);            /* 24-32px */
  --mdpi-fs-h1:clamp(28px,20px + 1.6vw,38px);              /* 30-40px (skill H1=38, hero equilibrado) */
  --mdpi-fs-display:clamp(32px,24px + 2vw,48px);
  /* line-heights — que respiren */
  --mdpi-lh-tight:1.18; --mdpi-lh-snug:1.35; --mdpi-lh:1.65; --mdpi-lh-loose:1.78;
  --mdpi-ls-tight:-.02em; --mdpi-ls-wide:.12em;

  /* — Spacing (ritmo vertical coherente) — */
  --mdpi-s1:4px; --mdpi-s2:8px; --mdpi-s3:12px; --mdpi-s4:16px; --mdpi-s5:24px;
  --mdpi-s6:32px; --mdpi-s7:48px; --mdpi-s8:64px; --mdpi-s9:96px; --mdpi-s10:128px;
  /* — Radios / sombras / layout — */
  --mdpi-r-xs:2px; --mdpi-r:4px; --mdpi-r-md:6px; --mdpi-r-lg:10px; --mdpi-r-pill:999px;
  --mdpi-sh-1:0 1px 2px rgba(14,20,23,.06),0 1px 1px rgba(14,20,23,.04);
  --mdpi-sh-2:0 8px 24px rgba(14,20,23,.10);
  --mdpi-maxw:1280px; --mdpi-maxw-text:760px;
  /* — LEY DE MÁRGENES (15-sep-2026 · docs: data/ejecucion/MARGENES-02-MAPA-CON-EMISOR-Y-LEY-2026-09-15.md) —
     LA retícula de la casa. Nadie escribe un ancho de marco o de lectura en px: se lee de aquí.
     Lote 0 = sólo se DECLARAN (nadie las lee aún → nada visible cambia). El alias de --mdpi-maxw llega en el lote 1. */
  --mdpi-gutter:clamp(16px,5vw,72px);   /* 1280→64 · 1440→72 */
  --mdpi-marco:1440px;                  /* tope del marco (decisión Javier 15-sep) */
  --mdpi-medio:880px;                   /* tablas, comparadores, vídeo, figuras */
  --mdpi-lectura:72ch;                  /* texto corrido (decisión Javier 15-sep) */
  --mdpi-dur:.18s; --mdpi-ease:cubic-bezier(.2,.6,.2,1);
  /* — LEGACY COMPAT · tokens numerados que usan los componentes prod-only
     preservados al final (spec-card, trust, buybox, breadcrumb, cat249, cat-hero E.4).
     NO usar en el sistema nuevo (usa --mdpi-fs-micro/small/body/h1..). — */
  --mdpi-fs-12:12px; --mdpi-fs-13:13px; --mdpi-fs-14:14px;
  --mdpi-fs-15:15px; --mdpi-fs-16:16px; --mdpi-fs-18:18px;
  --mdpi-fs-22:22px; --mdpi-fs-28:28px; --mdpi-fs-36:36px; --mdpi-fs-46:46px;
  --mdpi-hairline:#D8DDE1;

}

/* ======================= 2 · BASE (.mdpi-scope / cuerpo) ======================= */
.mdpi-scope{font-family:var(--mdpi-font);color:var(--mdpi-text);font-size:var(--mdpi-fs-body);line-height:var(--mdpi-lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.mdpi-scope *{box-sizing:border-box;}

/* Tipografía del cuerpo de categoría (scope #brx-content -> gana a #brxe) */
#brx-content .mdpi-cat-body{font-family:var(--mdpi-font);color:var(--mdpi-text);font-size:var(--mdpi-fs-body);line-height:var(--mdpi-lh);
  /* FIX LAYOUT: en prod el cuerpo iba 1399px edge-to-edge (max-width:none). El #brx-content{max-width:1280px}
     era SOLO del preview. Constrenir + centrar el cuerpo MDPI (no se toca el contenedor Bricks ni plugins). */
  max-width:var(--mdpi-maxw);margin-inline:auto;padding-inline:var(--mdpi-s5);box-sizing:border-box;}
#brx-content .mdpi-cat-body h1,#brx-content .mdpi-cat-body h2,#brx-content .mdpi-cat-body h3,#brx-content .mdpi-cat-body h4{font-family:var(--mdpi-font);color:var(--mdpi-text);font-weight:600;line-height:var(--mdpi-lh-tight);letter-spacing:var(--mdpi-ls-tight);margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body h1{font-size:var(--mdpi-fs-h1);font-weight:700;}
/* RITMO vertical para contenido fluido (no en .mdpi-cat-section): margen-top en h2/h3 */
#brx-content .mdpi-cat-body h2{margin-top:var(--mdpi-s8);}
#brx-content .mdpi-cat-body h3{margin-top:var(--mdpi-s6);}
#brx-content .mdpi-cat-body>.mdpi-scope>*:first-child,#brx-content .mdpi-cat-body>*:first-child{margin-top:0;}
#brx-content .mdpi-cat-body .mdpi-cat-hero+*{margin-top:var(--mdpi-s7);}
#brx-content .mdpi-cat-body h2{font-size:var(--mdpi-fs-h2);}
#brx-content .mdpi-cat-body h3{font-size:var(--mdpi-fs-h3);}
#brx-content .mdpi-cat-body p{font-size:var(--mdpi-fs-body);line-height:var(--mdpi-lh);color:var(--mdpi-text-2);margin:0 0 var(--mdpi-s4);max-width:72ch;}
#brx-content .mdpi-cat-body ul,#brx-content .mdpi-cat-body ol{margin:0 0 var(--mdpi-s4);padding-left:var(--mdpi-s5);}
#brx-content .mdpi-cat-body li{font-size:var(--mdpi-fs-body);line-height:var(--mdpi-lh);color:var(--mdpi-text-2);margin:0 0 var(--mdpi-s2);}
#brx-content .mdpi-cat-body strong,#brx-content .mdpi-cat-body li strong{color:var(--mdpi-text);font-weight:600;}
/* CONFLICTO RESUELTO: el color de enlace ámbar SOLO en prosa (p/li), NO en botones/cards
   -> evita el bug "botón naranja sin texto al hover" */
#brx-content .mdpi-cat-body p a,#brx-content .mdpi-cat-body li a{color:var(--mdpi-amber-ink);text-decoration:underline;text-underline-offset:2px;font-weight:500;}
#brx-content .mdpi-cat-body p a:hover,#brx-content .mdpi-cat-body li a:hover{color:var(--mdpi-amber-cta-hover);}

/* IMÁGENES — responsive, sin desbordar, sin upscale agresivo */
#brx-content .mdpi-cat-body img{max-width:100%;height:auto;display:block;}

/* Eyebrow técnico (mono) */
.mdpi-eyebrow{display:inline-block;font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-micro);font-weight:500;letter-spacing:var(--mdpi-ls-wide);text-transform:uppercase;color:var(--mdpi-amber-ink);}
.mdpi-data{font-family:var(--mdpi-mono);font-variant-numeric:tabular-nums;}

/* ======================= 3 · BOTONES (todos los estados · texto SIEMPRE visible) ======================= */
/* Alta especificidad bajo scope para ganar a la regla genérica de enlaces y a #brxe */
.mdpi-btn,#brx-content .mdpi-cat-body a.mdpi-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mdpi-s2);font-family:var(--mdpi-font);font-size:var(--mdpi-fs-body);font-weight:600;line-height:1.1;padding:13px 20px;border-radius:var(--mdpi-r);border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--mdpi-dur) var(--mdpi-ease),border-color var(--mdpi-dur),color var(--mdpi-dur),transform .1s var(--mdpi-ease);}
/* primario ámbar — texto blanco en TODOS los estados */
.mdpi-btn--primary,#brx-content .mdpi-cat-body a.mdpi-btn--primary{background:var(--mdpi-amber-cta);color:#fff;border-color:var(--mdpi-amber-cta);}
.mdpi-btn--primary:hover,#brx-content .mdpi-cat-body a.mdpi-btn--primary:hover{background:var(--mdpi-amber-cta-hover);border-color:var(--mdpi-amber-cta-hover);color:#fff;}
/* WhatsApp verde — texto blanco en TODOS los estados */
.mdpi-btn--wa,#brx-content .mdpi-cat-body a.mdpi-btn--wa{background:var(--mdpi-wa);color:#fff;border-color:var(--mdpi-wa);}
.mdpi-btn--wa:hover,#brx-content .mdpi-cat-body a.mdpi-btn--wa:hover{background:var(--mdpi-wa-hover);border-color:var(--mdpi-wa-hover);color:#fff;}
/* secundario outline (contexto claro) */
.mdpi-btn--secondary,#brx-content .mdpi-cat-body a.mdpi-btn--secondary{background:transparent;color:var(--mdpi-text);border-color:var(--mdpi-border-strong);}
.mdpi-btn--secondary:hover,#brx-content .mdpi-cat-body a.mdpi-btn--secondary:hover{background:var(--mdpi-surface);border-color:var(--mdpi-ink-700);color:var(--mdpi-text);}
/* on-dark (sobre hero antracita) */
.mdpi-btn--on-dark,#brx-content .mdpi-cat-body a.mdpi-btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
.mdpi-btn--on-dark:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff;}
.mdpi-btn--lg{font-size:var(--mdpi-fs-body);padding:15px 26px;}
.mdpi-btn:active{transform:translateY(1px);}
.mdpi-btn:focus-visible{outline:2px solid var(--mdpi-amber);outline-offset:2px;}

/* ======================= 4 · BADGES / CHIPS ======================= */
.mdpi-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-micro);font-weight:500;letter-spacing:.02em;padding:5px 10px;border-radius:var(--mdpi-r-xs);border:1px solid var(--mdpi-border-strong);background:var(--mdpi-surface);color:var(--mdpi-text-2);}
.mdpi-badge--amber{background:var(--mdpi-amber-bg);border-color:var(--mdpi-amber-border);color:var(--mdpi-amber-ink);}
.mdpi-badge--ink{background:var(--mdpi-ink-700);border-color:var(--mdpi-ink-700);color:#fff;}
.mdpi-badge--stock{color:var(--mdpi-success);border-color:#BBE6CC;background:#F0FAF3;}

/* ======================= 5 · CUERPO DE CATEGORÍA · SECCIONES ======================= */
#brx-content .mdpi-cat-body>*{margin-left:auto;margin-right:auto;}
#brx-content .mdpi-cat-body .mdpi-cat-section{margin:0 0 var(--mdpi-s9);}
#brx-content .mdpi-cat-body .mdpi-cat-section__head{max-width:var(--mdpi-maxw-text);margin:0 0 var(--mdpi-s6);}
#brx-content .mdpi-cat-body .mdpi-cat-section__head>span:first-child,
#brx-content .mdpi-cat-body .mdpi-cat-section__head .mdpi-eyebrow{display:block;font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-micro);font-weight:500;letter-spacing:var(--mdpi-ls-wide);text-transform:uppercase;color:var(--mdpi-amber-ink);margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-section__head h2{margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-section__head p{font-size:var(--mdpi-fs-lead);color:var(--mdpi-text-2);}

/* HERO 2-col */
#brx-content .mdpi-cat-body .mdpi-cat-hero{background:var(--mdpi-ink-900);color:var(--mdpi-text-on-dark);border-radius:var(--mdpi-r-lg);padding:clamp(24px,3.2vw,44px);margin:0 0 var(--mdpi-s8);}
/* max-width:none -> anula el max-width:760px del bloque E.4 standalone (colision que estrujaba el grid a 760px y disparaba la altura del hero a 822px) */
#brx-content .mdpi-cat-body .mdpi-cat-hero .mdpi-cat-hero__inner{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--mdpi-s7);align-items:center;max-width:none;}
#brx-content .mdpi-cat-body .mdpi-cat-hero .mdpi-eyebrow{color:var(--mdpi-amber);margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-hero h1{color:#fff;font-size:var(--mdpi-fs-h1);margin:0 0 var(--mdpi-s4);}
#brx-content .mdpi-cat-body .mdpi-cat-hero strong,#brx-content .mdpi-cat-body .mdpi-cat-hero b{color:#fff;}
#brx-content .mdpi-cat-body .mdpi-cat-hero__content>p{color:var(--mdpi-text-on-dark-2);font-size:var(--mdpi-fs-lead);line-height:var(--mdpi-lh);margin:0 0 var(--mdpi-s5);max-width:60ch;}
#brx-content .mdpi-cat-body .mdpi-cat-hero__chips{display:flex;flex-wrap:wrap;gap:var(--mdpi-s2);margin:0 0 var(--mdpi-s5);}
#brx-content .mdpi-cat-body .mdpi-cat-hero__chips .mdpi-badge{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#E8EDF0;}
#brx-content .mdpi-cat-body .mdpi-cat-hero__cta{display:flex;flex-wrap:wrap;gap:var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-hero__panel{display:flex;flex-direction:column;gap:var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-hero__metric{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--mdpi-amber);border-radius:var(--mdpi-r);padding:var(--mdpi-s4);}
#brx-content .mdpi-cat-body .mdpi-cat-hero__metric strong{display:block;font-size:var(--mdpi-fs-h3);color:#fff;margin:0 0 2px;}
#brx-content .mdpi-cat-body .mdpi-cat-hero__metric span{font-size:var(--mdpi-fs-small);color:var(--mdpi-text-on-dark-2);}
@media(max-width:860px){#brx-content .mdpi-cat-body .mdpi-cat-hero .mdpi-cat-hero__inner{grid-template-columns:1fr;gap:var(--mdpi-s6);}}

/* DECISION GRID */
#brx-content .mdpi-cat-body .mdpi-cat-decision-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--mdpi-s5);}
#brx-content .mdpi-cat-body a.mdpi-cat-decision{display:block;background:var(--mdpi-white);border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);padding:var(--mdpi-s6);text-decoration:none;transition:transform var(--mdpi-dur) var(--mdpi-ease),border-color var(--mdpi-dur),box-shadow var(--mdpi-dur);}
#brx-content .mdpi-cat-body a.mdpi-cat-decision:hover{transform:translateY(-3px);border-color:var(--mdpi-amber);box-shadow:var(--mdpi-sh-2);}
#brx-content .mdpi-cat-body a.mdpi-cat-decision>span:first-child{font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-small);font-weight:600;color:var(--mdpi-amber-ink);}
#brx-content .mdpi-cat-body a.mdpi-cat-decision h3{margin:var(--mdpi-s2) 0;color:var(--mdpi-text);}
#brx-content .mdpi-cat-body a.mdpi-cat-decision p{margin:0 0 var(--mdpi-s3);font-size:var(--mdpi-fs-small);color:var(--mdpi-text-2);}
#brx-content .mdpi-cat-body a.mdpi-cat-decision strong{font-size:var(--mdpi-fs-small);color:var(--mdpi-amber-ink);font-weight:600;}

/* SOLUTIONS (imagen | texto, alterna por clase --reverse) — SIMPLE Y ROBUSTO
   Imagen = bloque normal en su columna (width:100%; height:auto). SIN position:absolute,
   SIN aspect-ratio, SIN order. Columnas por grid-column explícito -> solape imposible. */
#brx-content .mdpi-cat-body .mdpi-cat-solutions{display:flex;flex-direction:column;gap:var(--mdpi-s8);}
#brx-content .mdpi-cat-body .mdpi-cat-solution{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--mdpi-s7);row-gap:var(--mdpi-s4);align-items:center;}
#brx-content .mdpi-cat-body .mdpi-cat-solution__media{grid-column:1;grid-row:1;min-width:0;margin:0;}
#brx-content .mdpi-cat-body .mdpi-cat-solution__media img{display:block;width:100%;height:auto;margin:0;border-radius:var(--mdpi-r-md);border:1px solid var(--mdpi-border);background:var(--mdpi-surface-2);}
#brx-content .mdpi-cat-body .mdpi-cat-solution__content{grid-column:2;grid-row:1;min-width:0;}
/* alternar: imagen a la derecha (clase --reverse del HTML) — sin order, por grid-column */
#brx-content .mdpi-cat-body .mdpi-cat-solution--reverse .mdpi-cat-solution__media{grid-column:2;}
#brx-content .mdpi-cat-body .mdpi-cat-solution--reverse .mdpi-cat-solution__content{grid-column:1;}
#brx-content .mdpi-cat-body .mdpi-cat-solution__tag{display:inline-flex;font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-micro);letter-spacing:.04em;color:var(--mdpi-amber-ink);background:var(--mdpi-amber-bg);border:1px solid var(--mdpi-amber-border);border-radius:var(--mdpi-r-xs);padding:4px 10px;margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-solution__content h2{margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-solution__actions{margin-top:var(--mdpi-s4);}
/* MÓVIL: 1 columna apilada — imagen (fila 1) arriba, texto (fila 2) abajo, normal y --reverse */
@media(max-width:860px){
  #brx-content .mdpi-cat-body .mdpi-cat-solution{grid-template-columns:1fr;}
  #brx-content .mdpi-cat-body .mdpi-cat-solution__media,
  #brx-content .mdpi-cat-body .mdpi-cat-solution--reverse .mdpi-cat-solution__media{grid-column:1;grid-row:1;}
  #brx-content .mdpi-cat-body .mdpi-cat-solution__content,
  #brx-content .mdpi-cat-body .mdpi-cat-solution--reverse .mdpi-cat-solution__content{grid-column:1;grid-row:2;}
}

/* LISTA con check ámbar */
#brx-content .mdpi-cat-body ul.mdpi-cat-list{list-style:none;padding:0;margin:0 0 var(--mdpi-s4);}
#brx-content .mdpi-cat-body ul.mdpi-cat-list li{position:relative;padding-left:var(--mdpi-s5);margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body ul.mdpi-cat-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-right:2px solid var(--mdpi-amber);border-bottom:2px solid var(--mdpi-amber);transform:rotate(45deg);}

/* COMPARATIVA (tabla CSS-grid) */
#brx-content .mdpi-cat-body .mdpi-cat-ctable{border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);overflow:hidden;}
#brx-content .mdpi-cat-body .mdpi-cat-trow{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--mdpi-border);}
#brx-content .mdpi-cat-body .mdpi-cat-trow:last-child{border-bottom:0;}
#brx-content .mdpi-cat-body .mdpi-cat-trow>*{padding:13px 16px;font-size:var(--mdpi-fs-small);line-height:var(--mdpi-lh-snug);border-right:1px solid var(--mdpi-border);}
#brx-content .mdpi-cat-body .mdpi-cat-trow>*:last-child{border-right:0;}
#brx-content .mdpi-cat-body .mdpi-cat-trow--head{background:var(--mdpi-ink-700);}
#brx-content .mdpi-cat-body .mdpi-cat-trow--head>strong{color:#fff;font-size:var(--mdpi-fs-micro);text-transform:uppercase;letter-spacing:.04em;}
#brx-content .mdpi-cat-body .mdpi-cat-trow:not(.mdpi-cat-trow--head):nth-child(even){background:var(--mdpi-surface);}
#brx-content .mdpi-cat-body .mdpi-cat-trow span{color:var(--mdpi-text-2);}
@media(max-width:720px){#brx-content .mdpi-cat-body .mdpi-cat-trow{grid-template-columns:1fr;gap:0;}#brx-content .mdpi-cat-body .mdpi-cat-trow>*{border-right:0;}#brx-content .mdpi-cat-body .mdpi-cat-trow>*:first-child{background:var(--mdpi-surface-2);font-weight:600;}}

/* PROCESO (pasos) */
#brx-content .mdpi-cat-body .mdpi-cat-process__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--mdpi-s5);}
#brx-content .mdpi-cat-body .mdpi-cat-step{background:var(--mdpi-white);border:1px solid var(--mdpi-border);border-top:3px solid var(--mdpi-amber);border-radius:var(--mdpi-r-md);padding:var(--mdpi-s6);}
#brx-content .mdpi-cat-body .mdpi-cat-step>span:first-child{font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-h3);font-weight:700;color:var(--mdpi-border-strong);}
#brx-content .mdpi-cat-body .mdpi-cat-step h3{margin:var(--mdpi-s3) 0 var(--mdpi-s2);}
#brx-content .mdpi-cat-body .mdpi-cat-step p{font-size:var(--mdpi-fs-small);margin:0;}

/* BUSINESS (split content|box) */
#brx-content .mdpi-cat-body .mdpi-cat-business .mdpi-cat-section__inner{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--mdpi-s7);align-items:start;}
#brx-content .mdpi-cat-body .mdpi-cat-business__box{background:var(--mdpi-ink-900);color:var(--mdpi-text-on-dark);border-radius:var(--mdpi-r-md);padding:var(--mdpi-s7);}
#brx-content .mdpi-cat-body .mdpi-cat-business__box h3{color:#fff;margin:0 0 var(--mdpi-s3);}
#brx-content .mdpi-cat-body .mdpi-cat-business__box p{color:var(--mdpi-text-on-dark-2);}
@media(max-width:860px){#brx-content .mdpi-cat-body .mdpi-cat-business .mdpi-cat-section__inner{grid-template-columns:1fr;}}

/* FINAL CTA */
#brx-content .mdpi-cat-body .mdpi-cat-final{text-align:center;background:var(--mdpi-surface);border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);padding:var(--mdpi-s8);}
#brx-content .mdpi-cat-body .mdpi-cat-final .mdpi-cat-section__inner{max-width:var(--mdpi-maxw-text);margin:0 auto;}

/* TABLAS HTML genéricas + FAQ details */
#brx-content .mdpi-cat-body table{width:100%;border-collapse:collapse;font-size:var(--mdpi-fs-small);margin:0 0 var(--mdpi-s5);border:1px solid var(--mdpi-border);}
#brx-content .mdpi-cat-body th,#brx-content .mdpi-cat-body td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--mdpi-border);}
#brx-content .mdpi-cat-body thead th{background:var(--mdpi-ink-700);color:#fff;font-weight:600;font-size:var(--mdpi-fs-micro);}
#brx-content .mdpi-cat-body tbody tr:nth-child(even){background:var(--mdpi-surface);}
#brx-content .mdpi-cat-body details{border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r);padding:var(--mdpi-s4) var(--mdpi-s5);margin:0 0 var(--mdpi-s3);background:var(--mdpi-white);}
#brx-content .mdpi-cat-body summary{font-weight:600;cursor:pointer;color:var(--mdpi-text);font-size:var(--mdpi-fs-body);}
#brx-content .mdpi-cat-body details[open] summary{margin-bottom:var(--mdpi-s3);}

/* ======================= 6 · SPEC-CARDS (grid de productos, body.mdpi-cat-v2) ======================= */
/* GRID productos: centrar a 1280 + gutter skill 24 (alinea con .mdpi-cat-body) */
#brx-content body.mdpi-cat-v2 ul.products,body.mdpi-cat-v2 ul.products{max-width:var(--mdpi-maxw);margin-left:auto;margin-right:auto;padding-left:var(--mdpi-s5);padding-right:var(--mdpi-s5);box-sizing:border-box;gap:var(--mdpi-s5) !important;}
body.mdpi-cat-v2 ul.products{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--mdpi-s5);margin:0 0 var(--mdpi-s7);padding:0;list-style:none;}
body.mdpi-cat-v2 ul.products::before,body.mdpi-cat-v2 ul.products::after{display:none !important;}
body.mdpi-cat-v2 ul.products li.product{float:none !important;width:auto !important;margin:0 !important;clear:none !important;background:#fff;border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);overflow:hidden;display:flex;flex-direction:column;padding:0;font-family:var(--mdpi-font);transition:transform var(--mdpi-dur) var(--mdpi-ease),border-color var(--mdpi-dur),box-shadow var(--mdpi-dur);}
body.mdpi-cat-v2 ul.products li.product:hover{transform:translateY(-3px);border-color:var(--mdpi-amber);box-shadow:var(--mdpi-sh-2);}
body.mdpi-cat-v2 li.product>a img,body.mdpi-cat-v2 li.product img{margin:0 !important;border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
body.mdpi-cat-v2 li.product .mdpi-loop-brand{display:block;font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--mdpi-text-3);padding:14px 16px 0;}
body.mdpi-cat-v2 li.product .woocommerce-loop-product__title{font-size:var(--mdpi-fs-body) !important;font-weight:600;line-height:var(--mdpi-lh-snug);color:var(--mdpi-text);padding:4px 16px 6px !important;}
body.mdpi-cat-v2 li.product .price{padding:0 16px !important;font-family:var(--mdpi-font) !important;font-weight:700;font-size:var(--mdpi-fs-h3) !important;color:var(--mdpi-text) !important;}
body.mdpi-cat-v2 li.product .price del,body.mdpi-cat-v2 li.product .price ins{font-size:var(--mdpi-fs-body);}
body.mdpi-cat-v2 li.product .mdpi-loop-iva{padding:3px 16px 0;font-size:var(--mdpi-fs-micro);color:var(--mdpi-text-2);}
body.mdpi-cat-v2 li.product .mdpi-loop-finance{padding:7px 16px 0;font-size:var(--mdpi-fs-micro);font-weight:600;color:var(--mdpi-amber-ink);}
body.mdpi-cat-v2 li.product .button,body.mdpi-cat-v2 li.product .mdpi-loop-ver{margin:14px 16px 16px !important;margin-top:auto !important;display:block;text-align:center;background:var(--mdpi-amber-cta) !important;color:#fff !important;border-radius:var(--mdpi-r);padding:12px 14px !important;font-weight:600;text-decoration:none;border:0;transition:background var(--mdpi-dur);}
body.mdpi-cat-v2 li.product .button:hover,body.mdpi-cat-v2 li.product .mdpi-loop-ver:hover{background:var(--mdpi-amber-cta-hover) !important;color:#fff !important;}

/* ======================= 7 · MOVIMIENTO (sutil · GPU) ======================= */
#brx-content .mdpi-cat-body .mdpi-cat-solution__media img{transition:transform .4s var(--mdpi-ease);}
#brx-content .mdpi-cat-body .mdpi-cat-solution:hover .mdpi-cat-solution__media img{transform:scale(1.03);}
.mdpi-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--mdpi-ease),transform .5s var(--mdpi-ease);}
.mdpi-reveal.is-in{opacity:1;transform:none;}

/* ======================= 8 · RESPONSIVE GLOBAL ======================= */
@media(max-width:768px){
  #brx-content .mdpi-cat-body .mdpi-cat-section{margin-bottom:var(--mdpi-s8);}
  .mdpi-btn{width:100%;}
  #brx-content .mdpi-cat-body .mdpi-cat-hero__cta .mdpi-btn{width:auto;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .mdpi-reveal{opacity:1 !important;transform:none !important;}
}


/* ============================================================================
   COMPONENTES PROD-ONLY · PRESERVADOS VERBATIM del backup mdpi-global-pre-v2-2026-06-03
   Razon: estos componentes estan EN USO VIVO (home: trust+header; cat249; fichas: card;
   paginas: table/sec/btn--ghost; 40 cats: cat-hero E.4). v2 NO los incluia -> se anaden
   aqui para garantizar 0 regresion. El sistema nuevo (arriba) gana por scope #brx-content.
   ============================================================================ */

/* --- btn--ghost (prod-only) --- */
.mdpi-btn--ghost{background:transparent;color:var(--mdpi-amber-ink);padding:10px 6px;}
.mdpi-btn--ghost:hover{color:var(--mdpi-amber-cta-hover);text-decoration:underline;}

.mdpi-navlink:focus-visible,.mdpi-crumbs a:focus-visible,.mdpi-card a:focus-visible{outline:2px solid var(--mdpi-amber);outline-offset:2px;border-radius:var(--mdpi-r-xs);}

/* ============================ SPEC-CARD (transparencia técnica) ============================ */
.mdpi-card{display:flex;flex-direction:column;background:var(--mdpi-white);border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);overflow:hidden;}
/* (estado :hover unificado más abajo, en sección MOVIMIENTO — borde ámbar + elevación, igual para TODAS las cards) */
.mdpi-card__media{position:relative;aspect-ratio:4/3;background:var(--mdpi-surface-2);}
.mdpi-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.mdpi-card__flag{position:absolute;top:10px;left:10px;}
.mdpi-card__body{padding:var(--mdpi-s4);display:flex;flex-direction:column;gap:var(--mdpi-s3);flex:1;}
.mdpi-card__brand{font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-12);letter-spacing:.08em;text-transform:uppercase;color:var(--mdpi-text-3);}
.mdpi-card__title{font-size:var(--mdpi-fs-16);font-weight:600;line-height:var(--mdpi-lh-tight);margin:0;min-height:2.3em;}
/* spec transparency: 3-4 filas clave SIEMPRE visibles (no tras tabs) */
.mdpi-card__specs{display:grid;gap:6px;padding:var(--mdpi-s3) 0;border-top:1px solid var(--mdpi-border);border-bottom:1px solid var(--mdpi-border);}
.mdpi-card__spec{display:flex;justify-content:space-between;gap:var(--mdpi-s3);font-size:var(--mdpi-fs-13);}
.mdpi-card__spec dt{color:var(--mdpi-text-3);}
.mdpi-card__spec dd{margin:0;font-family:var(--mdpi-mono);font-variant-numeric:tabular-nums;color:var(--mdpi-text);text-align:right;}
.mdpi-card__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--mdpi-s3);}
.mdpi-card__price{font-family:var(--mdpi-font);font-weight:700;font-size:var(--mdpi-fs-22);color:var(--mdpi-text);line-height:1.05;letter-spacing:-.01em;}
.mdpi-card__iva{font-size:var(--mdpi-fs-13);font-weight:600;color:var(--mdpi-text-2);letter-spacing:0;}
.mdpi-card__ivaincl{display:block;font-family:var(--mdpi-font);font-weight:400;font-size:var(--mdpi-fs-13);color:var(--mdpi-text-2);margin-top:4px;}/* 7.4:1 AAA */
/* Financiación destacada en card (diferenciador, ámbar — no gris enterrado) */
.mdpi-card__finance{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:600;font-size:var(--mdpi-fs-13);color:var(--mdpi-amber-ink);}/* 6.5:1 AA */
.mdpi-card__finance svg{width:15px;height:15px;flex:none;color:var(--mdpi-amber);}
/* En card, todas las CTA coherentes: el botón ocupa el ancho del pie */
.mdpi-card__foot .mdpi-btn{align-self:stretch;justify-content:center;}

/* ============================ TABLA COMPARATIVA (densidad McMaster) ============================ */
.mdpi-table-wrap{overflow-x:auto;border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);}
.mdpi-table{width:100%;border-collapse:collapse;font-size:var(--mdpi-fs-14);}
.mdpi-table th,.mdpi-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--mdpi-border);}
.mdpi-table thead th{background:var(--mdpi-ink-700);color:#fff;font-weight:600;font-size:var(--mdpi-fs-13);position:sticky;top:0;}
.mdpi-table tbody tr:nth-child(even){background:var(--mdpi-surface);}
.mdpi-table td.mdpi-num{font-family:var(--mdpi-mono);font-variant-numeric:tabular-nums;text-align:right;}
.mdpi-table th[scope=row]{font-weight:500;color:var(--mdpi-text-2);background:var(--mdpi-surface-2);}

/* ============================ TRUST BAR ============================ */
.mdpi-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--mdpi-border);border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);overflow:hidden;}
.mdpi-trust__item{background:var(--mdpi-white);padding:var(--mdpi-s4);display:flex;gap:var(--mdpi-s3);align-items:flex-start;}
.mdpi-trust__ic{flex:none;width:22px;height:22px;color:var(--mdpi-amber);}
.mdpi-trust__t{font-weight:600;font-size:var(--mdpi-fs-14);margin:0 0 2px;}
.mdpi-trust__d{font-size:var(--mdpi-fs-13);color:var(--mdpi-text-3);margin:0;line-height:1.4;}

/* ============================ BREADCRUMB ============================ */
.mdpi-crumbs{font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-12);color:var(--mdpi-text-3);display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.mdpi-crumbs a{color:var(--mdpi-text-2);text-decoration:none;}
.mdpi-crumbs a:hover{color:var(--mdpi-amber-ink);}
.mdpi-crumbs span[aria-current]{color:var(--mdpi-text);}

/* ============================ BUYBOX (ficha producto) + FINANCIACIÓN ============================ */
.mdpi-buybox{border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);padding:var(--mdpi-s5);background:var(--mdpi-white);display:flex;flex-direction:column;gap:var(--mdpi-s4);max-width:420px;}
.mdpi-buybox__price{font-family:var(--mdpi-font);font-weight:700;font-size:var(--mdpi-fs-36);line-height:1;letter-spacing:-.02em;color:var(--mdpi-text);}
.mdpi-buybox__iva{font-size:var(--mdpi-fs-15);font-weight:600;color:var(--mdpi-text-2);}
.mdpi-buybox__ivaincl{font-size:var(--mdpi-fs-14);color:var(--mdpi-text-2);}
/* Bloque financiación POTENTE (diferenciador comercial MDPI) */
.mdpi-finance{display:flex;gap:var(--mdpi-s3);align-items:flex-start;background:var(--mdpi-amber-bg);border:1px solid var(--mdpi-amber-border);border-left:3px solid var(--mdpi-amber);border-radius:var(--mdpi-r);padding:var(--mdpi-s4);}
.mdpi-finance__ic{flex:none;width:26px;height:26px;color:var(--mdpi-amber);}
.mdpi-finance__t{font-weight:700;font-size:var(--mdpi-fs-16);color:var(--mdpi-amber-ink);margin:0 0 3px;}/* 6.5:1 AA */
.mdpi-finance__d{font-size:var(--mdpi-fs-13);color:var(--mdpi-text-2);margin:0;line-height:1.45;}
/* COLISIÓN DE NOMBRE (15-sep-2026): la PÁGINA /financiacion/ (Bricks) envuelve su contenido en div.mdpi-finance > .mdpi-wrap
   y hereda el display:flex de este componente. Un hijo flex no baja de su ancho mínimo de contenido (botones nowrap):
   en móvil .mdpi-wrap medía 407 px en 390 y #brx-content cortaba títulos y párrafos. Se deja estrechar y, en móvil,
   los botones largos parten línea en vez de salirse de su caja. DEUDA: renombrar el envoltorio de la página. */
.mdpi-finance > .mdpi-wrap{min-width:0;}
@media (max-width:767px){.mdpi-finance > .mdpi-wrap .mdpi-btn{white-space:normal;}}
/* CTAs ficha: principal full + contactos */
.mdpi-buybox__ctas{display:flex;flex-direction:column;gap:var(--mdpi-s2);}
.mdpi-buybox__ctas .mdpi-btn{width:100%;justify-content:center;}
.mdpi-buybox__contact{display:flex;flex-wrap:wrap;gap:var(--mdpi-s4);padding-top:var(--mdpi-s3);border-top:1px solid var(--mdpi-border);}
.mdpi-buybox__contact a{font-size:var(--mdpi-fs-14);font-weight:600;color:var(--mdpi-amber-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.mdpi-buybox__contact a:hover{color:var(--mdpi-amber-cta-hover);text-decoration:underline;}
.mdpi-buybox__contact .mdpi-sec{color:var(--mdpi-text-2);font-weight:500;}

/* --- MOVIMIENTO prod-only (cards hover, navlink, header sticky, pulso WA) --- */

/* Cards: elevación sutil + borde ámbar + zoom suave de imagen al hover */
.mdpi-card{transition:transform var(--mdpi-dur) var(--mdpi-ease),border-color var(--mdpi-dur),box-shadow var(--mdpi-dur);will-change:transform;}
.mdpi-card:hover{transform:translateY(-3px);border-color:var(--mdpi-amber);box-shadow:var(--mdpi-sh-2);}
.mdpi-card__media img{transition:transform .35s var(--mdpi-ease);}
.mdpi-card:hover .mdpi-card__media img{transform:scale(1.04);}

/* Nav link: subrayado animado desde la izquierda */
.mdpi-navlink{position:relative;text-decoration:none;color:var(--mdpi-text);}
.mdpi-navlink::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--mdpi-amber);transform:scaleX(0);transform-origin:left;transition:transform var(--mdpi-dur) var(--mdpi-ease);}
.mdpi-navlink:hover::after,.mdpi-navlink[aria-current]::after{transform:scaleX(1);}
/* Header sticky compacto al hacer scroll (JS añade .is-compact) */
.mdpi-header{position:sticky;top:0;z-index:50;background:var(--mdpi-white);border-bottom:1px solid transparent;transition:box-shadow var(--mdpi-dur),border-color var(--mdpi-dur),padding var(--mdpi-dur);}
.mdpi-header.is-compact{box-shadow:var(--mdpi-sh-1);border-bottom-color:var(--mdpi-border);}
/* CTA WhatsApp: pulso MUY sutil (atrae sin gritar) */
@keyframes mdpi-pulse{0%,100%{box-shadow:0 0 0 0 rgba(21,127,64,.0);}50%{box-shadow:0 0 0 5px rgba(21,127,64,.10);}}
.mdpi-btn--wa.mdpi-pulse{animation:mdpi-pulse 2.6s var(--mdpi-ease) infinite;}

@media (max-width:768px){.mdpi-card__foot{flex-direction:column;align-items:stretch;}}

/* ============================ PILOTO cat 249 (Calandras) — cards Woo estilo E.4 (scoped, reversible) ============================ */
.term-249 ul.products{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin:0 0 var(--mdpi-s6);padding:0;list-style:none;}
.term-249 ul.products::before,.term-249 ul.products::after{display:none !important;}
.term-249 ul.products li.product{float:none !important;width:auto !important;margin:0 !important;clear:none !important;background:#fff;border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r-md);overflow:hidden;display:flex;flex-direction:column;padding:0;font-family:var(--mdpi-font);transition:transform var(--mdpi-dur) var(--mdpi-ease),border-color var(--mdpi-dur),box-shadow var(--mdpi-dur);}
.term-249 ul.products li.product:hover{transform:translateY(-3px);border-color:var(--mdpi-amber);box-shadow:var(--mdpi-sh-2);}
.term-249 li.product>a img,.term-249 li.product img{margin:0 !important;border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.term-249 li.product .mdpi-loop-brand{display:block;font-family:var(--mdpi-mono);font-size:var(--mdpi-fs-12);letter-spacing:.06em;text-transform:uppercase;color:var(--mdpi-text-3);padding:14px 16px 0;}
.term-249 li.product .woocommerce-loop-product__title{font-size:var(--mdpi-fs-16) !important;font-weight:600;line-height:1.2;color:var(--mdpi-text);padding:4px 16px 6px !important;}
.term-249 li.product .price{padding:0 16px !important;font-family:var(--mdpi-font) !important;font-weight:700;font-size:var(--mdpi-fs-22) !important;color:var(--mdpi-text) !important;}
.term-249 li.product .price del,.term-249 li.product .price ins{font-size:var(--mdpi-fs-16);}
.term-249 li.product .mdpi-loop-iva{padding:3px 16px 0;font-size:var(--mdpi-fs-13);color:var(--mdpi-text-2);}
.term-249 li.product .mdpi-loop-finance{padding:7px 16px 0;font-size:var(--mdpi-fs-13);font-weight:600;color:var(--mdpi-amber-ink);}
.term-249 li.product .button,.term-249 li.product .mdpi-loop-ver{margin:14px 16px 16px !important;margin-top:auto !important;display:block;text-align:center;background:var(--mdpi-amber-cta) !important;color:#fff !important;border-radius:var(--mdpi-r);padding:11px 14px !important;font-weight:600;text-decoration:none;border:0;}
.term-249 li.product .button:hover,.term-249 li.product .mdpi-loop-ver:hover{background:var(--mdpi-amber-cta-hover) !important;}

/* ============================ COMPONENTE CAT-HERO E.4 (reusable 40 categorías) ============================ */
.mdpi-cat-hero{background:var(--mdpi-ink-900);color:var(--mdpi-text-on-dark);border-radius:8px;padding:48px 40px;margin:0 0 var(--mdpi-s7);font-family:var(--mdpi-font);}
.mdpi-cat-hero__inner{max-width:760px;}
.mdpi-cat-hero .mdpi-eyebrow{color:var(--mdpi-amber);display:block;margin-bottom:14px;}
.mdpi-cat-hero h1{font-family:var(--mdpi-font);font-weight:700;font-size:var(--mdpi-fs-36);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:0 0 16px;}
.mdpi-cat-hero__lead{font-size:var(--mdpi-fs-16);line-height:1.6;color:var(--mdpi-text-on-dark-2);margin:0 0 14px;}
.mdpi-cat-hero__lead strong{color:#fff;font-weight:600;}
.mdpi-cat-hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px;}
.mdpi-cat-hero__chips .mdpi-badge{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#e8edf0;}
.mdpi-cat-hero__chips .mdpi-badge--amber{background:var(--mdpi-amber-bg);border-color:var(--mdpi-amber-border);color:var(--mdpi-amber-ink);}
.mdpi-cat-hero__cta{display:flex;flex-wrap:wrap;gap:12px;}
.mdpi-cat-hero__cta .mdpi-btn--secondary{color:#fff;border-color:rgba(255,255,255,.28);}
.mdpi-cat-hero__cta .mdpi-btn--secondary:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55);}
@media(max-width:768px){.mdpi-cat-hero{padding:32px 20px;}.mdpi-cat-hero h1{font-size:var(--mdpi-fs-28);}}
/* Ver ficha (grid) = boton ambar del sistema (override del .button azul tema/Woo) */
body.mdpi-cat-v2 ul.products li.product a.button.mdpi-loop-ver,#brx-content body.mdpi-cat-v2 li.product a.mdpi-loop-ver{background-image:none !important;background-color:var(--mdpi-amber-cta) !important;color:#fff !important;border-color:var(--mdpi-amber-cta) !important;box-shadow:none !important;}
body.mdpi-cat-v2 ul.products li.product a.button.mdpi-loop-ver:hover{background:var(--mdpi-amber-cta-hover) !important;}
/* === DEMO-PARITY (2026-06-03): card Bricks query-loop usa markup h5.dynamic + .amount crudo (sin .price ni .woocommerce-loop-product__title) -> el CSS previo no lo alcanzaba. Igualar a .mdpi-card de la demo. === */
body.mdpi-cat-v2 li.product h5{font-size:var(--mdpi-fs-body) !important;font-weight:600;line-height:var(--mdpi-lh-snug);color:var(--mdpi-text);margin:0;padding:4px 16px 6px;}
body.mdpi-cat-v2 li.product h5 a{color:inherit;text-decoration:none;}
body.mdpi-cat-v2 li.product .dynamic:has(.woocommerce-price-suffix){padding:2px 16px 0;line-height:1.1;}
body.mdpi-cat-v2 li.product .dynamic:has(.woocommerce-price-suffix) .amount{font-family:var(--mdpi-font);font-weight:700;font-size:var(--mdpi-fs-h3);color:var(--mdpi-text);letter-spacing:-.01em;}
body.mdpi-cat-v2 li.product .woocommerce-price-suffix{font-family:var(--mdpi-font);font-size:var(--mdpi-fs-13);font-weight:600;color:var(--mdpi-text-2);}
body.mdpi-cat-v2 li.product .mdpi-loop-iva .amount{font-size:var(--mdpi-fs-13) !important;font-weight:400 !important;color:var(--mdpi-text-2);}
body.mdpi-cat-v2 li.product a.mdpi-loop-ver{padding:13px 20px !important;border:1px solid var(--mdpi-amber-cta) !important;}
/* === DEMO-PARITY 2 (2026-06-03): alinear precios (title 2 lineas como demo min-height) + PAGINACION del sistema (el prototipo no la define -> diseñada con mdpi-design-system) === */
body.mdpi-cat-v2 li.product h5{min-height:2.3em;}
body.mdpi-cat-v2 .woocommerce-pagination{margin:4px 0 var(--mdpi-s7);}
body.mdpi-cat-v2 .woocommerce-pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;list-style:none;margin:0;padding:0;}
body.mdpi-cat-v2 .woocommerce-pagination ul.page-numbers::before,body.mdpi-cat-v2 .woocommerce-pagination ul.page-numbers::after{display:none !important;}
body.mdpi-cat-v2 .woocommerce-pagination li{margin:0 !important;padding:0 !important;list-style:none !important;background:none !important;}
body.mdpi-cat-v2 .woocommerce-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;box-sizing:border-box;font-family:var(--mdpi-font);font-size:var(--mdpi-fs-body);font-weight:600;line-height:1;color:var(--mdpi-text);background:#fff;border:1px solid var(--mdpi-border);border-radius:var(--mdpi-r);text-decoration:none;transition:border-color var(--mdpi-dur),background var(--mdpi-dur),color var(--mdpi-dur);}
body.mdpi-cat-v2 .woocommerce-pagination a.page-numbers:hover{border-color:var(--mdpi-amber);color:var(--mdpi-amber-ink);background:var(--mdpi-amber-bg,#FDF4EE);}
body.mdpi-cat-v2 .woocommerce-pagination .page-numbers.current{background:var(--mdpi-amber-cta) !important;border-color:var(--mdpi-amber-cta) !important;color:#fff !important;}
body.mdpi-cat-v2 .woocommerce-pagination .page-numbers.dots{border-color:transparent;background:transparent;color:var(--mdpi-text-3);min-width:auto;padding:0 4px;}
body.mdpi-cat-v2 .woocommerce-pagination .page-numbers.next,body.mdpi-cat-v2 .woocommerce-pagination .page-numbers.prev{font-weight:700;}
body.mdpi-cat-v2 .woocommerce-pagination{display:flex;justify-content:center;}
/* Orden precio como demo: titulo -> precio grande -> IVA incl + financiacion -> Ver ficha (flex order, markup card Bricks) */
body.mdpi-cat-v2 li.product .dynamic:has(.woocommerce-price-suffix){order:1;}
body.mdpi-cat-v2 li.product .dynamic:has(.mdpi-loop-iva){order:2;}
body.mdpi-cat-v2 li.product .dynamic:has(.mdpi-loop-ver){order:3;}
/* === DEMO-PARITY 3 (2026-06-03): ajustes finos card medidos vs demo (CTA 16px, IVA/fin 13px, brand .08em, title lh tight, li sin padding lateral) === */
body.mdpi-cat-v2 ul.products li.product{padding:0 !important;}
body.mdpi-cat-v2 li.product h5{line-height:1.18;}
body.mdpi-cat-v2 li.product .mdpi-loop-brand{letter-spacing:.08em;}
body.mdpi-cat-v2 li.product .mdpi-loop-iva{font-size:var(--mdpi-fs-13);}
body.mdpi-cat-v2 li.product .mdpi-loop-finance{font-size:var(--mdpi-fs-13);}
body.mdpi-cat-v2 li.product a.mdpi-loop-ver,body.mdpi-cat-v2 li.product .button{font-size:var(--mdpi-fs-body) !important;}
/* === DEMO-PARITY 4 (2026-06-04): identico al prototipo — body IBM Plex, grid 4col/gap20, descripcion card === */
body{font-family:var(--mdpi-font) !important;}
#brx-content body.mdpi-cat-v2 ul.products,body.mdpi-cat-v2 ul.products{grid-template-columns:repeat(4,1fr) !important;gap:20px !important;}
@media(max-width:1024px){#brx-content body.mdpi-cat-v2 ul.products,body.mdpi-cat-v2 ul.products{grid-template-columns:repeat(3,1fr) !important;}}
@media(max-width:680px){#brx-content body.mdpi-cat-v2 ul.products,body.mdpi-cat-v2 ul.products{grid-template-columns:repeat(2,1fr) !important;}}
body.mdpi-cat-v2 li.product .mdpi-loop-desc{padding:6px 16px 0;margin:0;font-size:var(--mdpi-fs-13);line-height:1.45;color:var(--mdpi-text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* === HEADER subrayado AMBAR (prototipo .mdpi-navlink::after) sobre la estructura REAL Bricks: los pilares son .brx-submenu-toggle (span+chevron), no <a> === */
header .mdpi-header-nav .brx-nav-nested-items > li{position:relative;}
header .mdpi-header-nav .brx-nav-nested-items > li > .brx-submenu-toggle,header .mdpi-header-nav .brx-nav-nested-items > li > a{position:relative;}
header .mdpi-header-nav .brx-nav-nested-items > li > .brx-submenu-toggle::after,header .mdpi-header-nav .brx-nav-nested-items > li > a:not(.brx-submenu-toggle)::after{content:"";position:absolute;left:2px;right:2px;bottom:-6px;height:2px;background:var(--mdpi-amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--mdpi-ease,ease);border-radius:2px;}
header .mdpi-header-nav .brx-nav-nested-items > li:hover > .brx-submenu-toggle::after,header .mdpi-header-nav .brx-nav-nested-items > li.brx-open > .brx-submenu-toggle::after,header .mdpi-header-nav .brx-nav-nested-items > li:hover > a::after,header .mdpi-header-nav .brx-nav-nested-items > li.active > a::after{transform:scaleX(1);}
header .mdpi-header-nav .brx-nav-nested-items > li:hover > .brx-submenu-toggle span,header .mdpi-header-nav .brx-nav-nested-items > li:hover > a{color:var(--mdpi-amber-ink) !important;}
header .mdpi-header-nav .brx-nav-nested-items > li > .brx-submenu-toggle span{color:var(--mdpi-text) !important;font-weight:500;}
/* === MOVIL: ACORDEON INLINE limpio (Opción A, FASE 1 PASO 4). multiLevel=false en #kfcucg.
   Diagnóstico real (navegador real staging): multiLevel NO hacía drilldown (submenú abría inline static),
   el li del dropdown tenía padding-bottom:40px (items de 105px) y el touch-action:none del lock MATABA el paneo táctil del cajón.
   FIX: (1) quitar touch-action:none del lock -> el dedo desliza el cajón; (2) resetear padding del li (#id, gana a Bricks) -> items ~44px;
   (3) cajón mantiene overflow-y:auto + justify-content:flex-start. Breakpoint 1199px = el de Bricks. === */
@media(max-width:1199px){
/* RAÍZ DEL REBOTE: Bricks pone el drawer con inset:0 (top/bottom:0) => altura = 100vh = viewport GRANDE de iOS (con barras ocultas, ~844).
   Eso hace que el contenido "quepa" y no haya scroll, dejando los últimos items bajo las barras de Safari (rebote).
   FIX: altura = 100dvh (viewport dinámico = área visible real) anulando el bottom:0 del inset, para que SIEMPRE haya scroll real. */
header .mdpi-header-nav .brx-nav-nested-items{justify-content:flex-start !important;align-items:stretch !important;flex-direction:column !important;flex-wrap:nowrap !important;gap:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;top:0 !important;bottom:auto !important;height:100dvh !important;max-height:100dvh !important;padding:48px 18px 28px !important;}
header .mdpi-header-nav .brx-nav-nested-items > li{width:100% !important;flex:0 0 auto !important;border-bottom:1px solid var(--mdpi-border);}
header .mdpi-header-nav .brx-nav-nested-items > li > .brx-submenu-toggle,header .mdpi-header-nav .brx-nav-nested-items > li > a{width:100% !important;justify-content:space-between !important;min-height:0 !important;padding-top:10px !important;padding-bottom:10px !important;text-align:left !important;}
/* submenú inline (acordeón): top-align + scroll propio del cajón */
header .mdpi-header-nav .brx-dropdown-content{justify-content:flex-start !important;align-items:stretch !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;max-height:100dvh !important;gap:0 !important;}
/* COMPACTAR items: Bricks pone padding-bottom:40px en el li vía #id -> reseteo con misma especificidad de ID. Items táctiles ~44px */
#brxe-kfcucg .brx-dropdown-content > li,#brxe-kfcucg .brx-nav-nested-items > li{padding-top:0 !important;padding-bottom:0 !important;}
#brxe-kfcucg .brx-dropdown-content > li{border-bottom:1px solid var(--mdpi-border) !important;}
#brxe-kfcucg .brx-dropdown-content > li > a,#brxe-kfcucg .brx-dropdown-content > li > .brx-submenu-toggle{padding-top:10px !important;padding-bottom:10px !important;min-height:0 !important;line-height:1.3 !important;}
/* Lock de fondo: AHORA lo gestiona la librería body-scroll-lock (mu-plugin mdpi-mobile-menu-lock.php).
   ELIMINADO el position:fixed/width:100% del body — era el causante del rebote en iOS Safari (anti-patrón conocido). */
/* RETOQUE 1: ocultar el toggle residual de Bricks (button.brxe-toggle.brx-toggle-div "Cerrar") que se cuela DENTRO de la lista del drawer.
   Solo afecta a toggles dentro de .brx-nav-nested-items; el toggle PRINCIPAL de apertura va FUERA de la lista, no se toca. */
header .mdpi-header-nav .brx-nav-nested-items > li:has(> .brxe-toggle){display:none !important;}
header .mdpi-header-nav .brx-nav-nested-items > li > .brxe-toggle{display:none !important;}
}


/* ===== Selector de cantidad +/- · Industrial Premium — 2026-06-15 v2 ===== */
.mdpi-qty{display:inline-flex;align-items:stretch;border:1px solid #D1D5DB;border-radius:8px;overflow:hidden;background:#fff;height:40px;line-height:1;vertical-align:middle;box-shadow:0 1px 2px rgba(17,24,39,.04);}
.mdpi-qty__btn{flex:0 0 38px;width:38px;border:0;background:#fff;color:#1F2937;font-size:19px;font-weight:500;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s;}
.mdpi-qty__btn:hover{background:#F9FAFB;color:#B05423;}
.mdpi-qty__btn:active{background:#FDF4EE;color:#B05423;}
.mdpi-qty__in{flex:0 0 46px;width:46px !important;min-width:46px;max-width:46px;border:0;border-left:1px solid #E5E7EB;border-right:1px solid #E5E7EB;text-align:center;font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;font-size:15px;font-weight:500;color:#111827;padding:0;-moz-appearance:textfield;background:#fff;box-sizing:border-box;}
.mdpi-qty__in::-webkit-outer-spin-button,.mdpi-qty__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mdpi-qty__in:focus{outline:none;background:#F9FAFB;}
/* fila de compra en cards: stepper + boton en una linea (wrap seguro en cards estrechas) */
.mdpi-buyrow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;width:100%;margin:0 0 6px;}
.mdpi-buyrow .mdpi-qty{flex:0 0 auto;}
.mdpi-buyrow .mdpi-card-cta{flex:1 1 148px;min-width:148px;width:auto;margin:0;min-height:40px;display:inline-flex;align-items:center;justify-content:center;}
/* ficha: stepper algo mayor + etiqueta "unidades" */
.mdpi-qty--pdp{height:48px;margin:0 0 12px;align-self:flex-start;}
.mdpi-qty--pdp .mdpi-qty__btn{flex:0 0 46px;width:46px;font-size:22px;}
.mdpi-qty--pdp .mdpi-qty__in{flex:0 0 56px;width:56px !important;min-width:56px;max-width:56px;font-size:16px;}
.mdpi-qty__lbl{display:flex;align-items:center;padding:0 14px;font-size:13px;color:#4B5563;border-left:1px solid #E5E7EB;font-family:var(--mdpi-font-sans,'Inter',sans-serif);}
.card__foot .mdpi-qty__lbl{display:none;}

/* ============================================================================
   OLA 1 · SISTEMA VISUAL v2 — 31-ago-2026
   ROLLBACK DE UNA LINEA: borrar desde este comentario hasta "FIN OLA 1 v2".
   No se ha tocado ni una linea de lo anterior (diff: 0 lineas eliminadas).

   POR QUE: la auditoria visual del 31-ago midio, con las capturas delante, que
   lo que hace que la web parezca "hecha por IA" no es la paleta -- es que cada
   color hace varios trabajos y cada bloque anade su propio chip y su propia caja.
   Medido a nivel de hex en produccion:
     .card__tecchip  color #b05423  ==  el MISMO valor que el fondo del boton
                                        primario .btn--cart-solid
     .mdpi-fin60cta  fondo  #25d366  ==  el verde de MARCA de WhatsApp, puesto
                                        en un bloque de FINANCIACION
     .btn--wa #157f40  vs  .of-btn--wa #25d366  ==  dos verdes para el mismo trabajo
     CTA primario #dc6b2f (ficha de pack) vs #b05423 (ficha de maquina)
     4,5 chips por card de media (21 en la ficha de pack) contra 1 del referente

   ---------------------------------------------------------------------------
   LO QUE APRENDIO LA PRIMERA PASADA (y por que este fichero esta escrito asi):
   la version 1 de este bloque uso selectores de clase y LA MITAD NO GANO LA
   CASCADA. Al medir el render en vez de suponerlo aparecio la causa: el sistema
   visual de las cards NO vive en este fichero, vive en 42 bloques <style> en
   linea (203 KB) que usan selectores de ID (#mdpicat, #mdpicat.mdpi-woo) y que
   se sirven DESPUES de esta hoja.
   La salida limpia no es llenar esto de !important: esos bloques CONSUMEN
   TOKENS (--woo-amberbg, --woo-techink, --c-surface...). Redefiniendo los
   tokens con un selector mas especifico se cambia el sistema entero de golpe,
   sin pelear regla a regla y sin un solo !important.
   ---------------------------------------------------------------------------

   LA REGLA QUE IMPONE ESTE BLOQUE — un color, un trabajo:
     ambar  ....... SOLO fondo de CTA primario
     azul  ........ enlaces y acento
     gris  ........ chips y metadatos
     verde  ....... SOLO stock disponible (y el verde de WhatsApp, SOLO WhatsApp)
     rojo  ........ SOLO error

   LO QUE NO SE TOCA (funcion, no piel): stock en lotes, ancla de compra,
   "25 uds o multiplos", insignia de Google, zonas de marcaje, CTA por ticket,
   enlaces por /ir-a-whatsapp y el precio. Aqui solo cambia el aspecto.
   ============================================================================ */

:root{
  --v2-cta:#B05423;            /* fondo del CTA primario — el unico ambar solido */
  --v2-cta-hover:#8F4017;
  --v2-link:#2F81F7;           /* enlaces y acento */
  --v2-chip-bg:#F3F4F6;
  --v2-chip-ink:#4B5563;
  --v2-chip-bd:#E5E7EB;
  --v2-card-bd:#E5E7EB;
}

/* ---- 1 · LOS CHIPS, POR TOKEN ----------------------------------------------
   Los chips llevaban dos tintes de marca compitiendo entre si y con el CTA: el
   ambar (#FDF4EE / #F4C6A6 / #9A4519) y el azul tecnico (#EEF2FD / #C7D4F2 /
   #26407A). Un chip es un METADATO: no pide turno.
   Se redefinen SOLO los tokens --woo-* (que son los del chip de producto). Los
   --c-amber-btn y --c-wa se dejan intactos a proposito: son el CTA y WhatsApp,
   y esos SI conservan su color.
   La especificidad lleva `html` delante para ganar al bloque en linea sin
   depender del orden de carga. */
html #mdpicat.mdpi-woo,
html #mdpicat.mdpi-woo2,
html #mdpicat{
  --woo-amberbg:var(--v2-chip-bg);
  --woo-amberbd:var(--v2-chip-bd);
  --woo-amberink:var(--v2-chip-ink);
  --woo-techbg:var(--v2-chip-bg);
  --woo-techbd:var(--v2-chip-bd);
  --woo-techink:var(--v2-chip-ink);
}

/* chips que no pasan por token (otras plantillas) */
.card .card__optag,
.mdpi-cro .lo-chip,
.mdpi-fchip,
.of-chip{
  background:var(--v2-chip-bg);
  color:var(--v2-chip-ink);
  border:1px solid var(--v2-chip-bd);
  border-radius:var(--mdpi-r);
  font-weight:500;
}
html #mdpicat .badge--tec{
  background:var(--v2-chip-bg);
  color:var(--v2-chip-ink);
  border-color:var(--v2-chip-bd);
}

/* el chip de STOCK conserva el verde: es su rol legitimo, no decoracion */
html #mdpicat .badge--stock,
html #mdpicat .card__stocklive{
  background:#F0FDF4;
  color:#15803D;
  border-color:#BBF7D0;
}

/* ---- 2 · MAXIMO DOS CHIPS POR CARD ------------------------------------------
   La fila .card__tecrow repetia lo que .card__featrow ya dice ("Transfer DTF -
   Serigrafia" arriba; "DTF" y "Serigrafia" debajo). Se oculta la REDUNDANTE y
   la informativa se corta en dos. Lo que sale de la card sigue entero en la ficha. */
html #mdpicat .card.card--opc1 .card__tecrow{ display:none; }
html #mdpicat .card.card--opc1 .card__featrow .card__featchip:nth-of-type(n+3){ display:none; }

/* ---- 3 · CARDS PLANAS, CON AIRE --------------------------------------------
   Sombra + radio grande + borde = "caja". El referente separa productos con una
   linea de 1px y espacio: se mira el producto, no el contenedor. */
html #mdpicat .card.card--opc1{
  box-shadow:none;
  border:1px solid var(--v2-card-bd);
  border-radius:6px;
}
html #mdpicat .card.card--opc1:hover{
  box-shadow:none;
  border-color:#CDD3D8;
}

/* ---- 4 · EL BADGE SOBRE LA FOTO --------------------------------------------
   Era un circulo negro de 42px pegado sobre el producto. El gramaje es un dato
   util para quien compra textil, asi que NO se quita: se convierte en etiqueta
   discreta que no compite con la foto. */
html #mdpicat .card__gball{
  width:auto; height:auto; min-width:0;
  padding:3px 7px;
  border-radius:4px;
  background:rgba(255,255,255,.94);
  color:#3F4955;
  border:1px solid var(--v2-chip-bd);
  font-size:11px; font-weight:600; line-height:1.25;
  display:flex; align-items:center; justify-content:center;
  box-shadow:none;
}

/* ---- 5 · UN SOLO AMBAR PARA EL CTA PRIMARIO --------------------------------
   Habia dos para el mismo trabajo: #DC6B2F en la ficha de pack y #B05423 en la
   de maquina. Se unifica en #B05423, que ademas es el unico que pasa AA sobre
   blanco (5,1:1); #DC6B2F con texto blanco se queda en 3,4:1 y no lo pasa. */
html #mdpicat .mdpi-pk-anchor,
html #mdpicat .lo-btn,
html #mdpicat .mdpi-card-cta,
html .btn.btn--cart-solid{
  background:var(--v2-cta);
  border-color:var(--v2-cta);
}
html #mdpicat .mdpi-pk-anchor:hover,
html #mdpicat .lo-btn:hover,
html #mdpicat .mdpi-card-cta:hover,
html .btn.btn--cart-solid:hover{
  background:var(--v2-cta-hover);
  border-color:var(--v2-cta-hover);
}

/* ---- 6 · LA FINANCIACION — RETIRADO DE LA OLA 1, PASA A LA OLA 2 ------------
   INTENTADO Y REVERTIDO el 31-ago. El diagnostico sigue en pie: .mdpi-fin60cta
   lleva #25D366, el verde de MARCA de WhatsApp, en un bloque que es CREDITO y no
   chat. Pero al cambiarle el fondo desde aqui, el `color:#fff` que le pone otra
   regla mas especifica NO cambio con el: el resultado fue texto blanco sobre
   superficie clara, es decir, un CTA de financiacion ILEGIBLE. Peor que el
   problema que venia a arreglar.
   Iban tres intentos sobre el mismo elemento; cuando un diagnostico se mueve tres
   veces, lo que falla es el metodo (Regla 24). Este elemento no se arregla con
   piel: hay que tocar el componente entero -- fondo, color, icono y flecha a la
   vez -- y eso es OLA 2, que entra en la ficha de maquina de verdad.
   Aqui se deja escrito para que no se vuelva a intentar por CSS suelto. */

/* ---- 7 · UN SOLO VERDE PARA WHATSAPP ---------------------------------------
   .btn--wa usaba #157F40 y .of-btn--wa usaba #25D366 para el mismo boton.
   Gana el que pasa AA sobre blanco. */
html .of-btn.of-btn--wa{ background:#157F40; border-color:#157F40; }
html .of-btn.of-btn--wa:hover{ background:#10632F; }

/* ---- 8 · JERARQUIA TIPOGRAFICA ---------------------------------------------
   El titulo de card iba a 15px/600 y los chips a 11px/700: el metadato pesaba
   MAS que el nombre del producto. Se invierte la relacion. */
html #mdpicat .card.card--opc1 .card__title{
  font-size:16px; font-weight:600; line-height:1.35; letter-spacing:-.005em;
}
html #mdpicat .card__tecchip,
html #mdpicat .card__featchip,
html #mdpicat .card__optag{ font-size:11.5px; font-weight:500; }

/* ---- 9 · SEGUNDA PASADA: los ambares que NO son CTA -------------------------
   Con las capturas del DESPUES delante quedaban cuatro cosas en ambar que no son
   el boton primario, y por tanto rompen "un color, un trabajo":
     .card__lote            el badge "sale a 1.989 EUR/ud"  -> es PRECIO, metadato
     .chip.active           el filtro seleccionado          -> es ESTADO
     .mdpi-sortchip.active  el orden seleccionado           -> es ESTADO
     .pk-colors__badge      "13 colores"                    -> es METADATO
   El estado seleccionado NO se inventa: la casa ya tiene su version en antracita
   (#mdpicat .chip.active{background:var(--c-deep)}), que es ademas el patron del
   referente. Se unifica en esa, que ya existia, en vez de crear una nueva. */
html #mdpicat .card__lote,
html #mdpicat .pk-colors__badge{
  background:var(--v2-chip-bg);
  color:var(--v2-chip-ink);
  border-color:var(--v2-chip-bd);
}
html #mdpicat .mdpi-perso-side .chip.active,
html #mdpi-f1chips .f1-row > a.chip.active,
html #mdpicat.mdpi-opc1 .mdpi-sortchip.active{
  background:#1F2937;
  border-color:#1F2937;
  color:#fff;
  font-weight:600;
}
html #mdpicat .mdpi-perso-side .chip.active .mdpi-fc-n,
html #mdpi-f1chips .f1-row > a.chip.active .mdpi-fc-n{ color:#fff; opacity:.75; }

/* los chips negros del bloque de oferta: eran un TERCER estilo de chip */
html .of-chip{
  background:var(--v2-chip-bg);
  color:var(--v2-chip-ink);
  border-color:var(--v2-chip-bd);
}

/* "Limpiar" es una accion secundaria, no un CTA: azul de enlace, no ambar */
html #mdpicat .mdpi-perso-clr{ color:var(--v2-link); }

/* ============================ FIN OLA 1 v2 ================================= */

/* ============================================================================
   OLA 1.5 · SISTEMA VISUAL v2 LLEGA AL CUERPO DE LA FICHA — 1-sep-2026
   ROLLBACK DE UNA LINEA: borrar desde este comentario hasta "FIN OLA 1.5 v2".
   No se toca ni una linea de lo anterior (la Ola 1 sigue intacta encima).

   POR QUE: la Ola 1 entro en las CARDS y ahi funciono (2,5 chips/card, un solo
   ambar de CTA). En el CUERPO de la ficha no entro, y ahi seguia el desorden.
   Medido el 1-sep en produccion, sobre el render, no sobre el CSS:

     - 14 H2 naranjas en la ficha de pack, 9 en la de maquina, 11 en la de suelto
       (`.mdpi-prose > h2 { color:#DC6B2F }`), justo el ambar que la Ola 1 retiro
       del CTA. Y la MISMA pagina ya pinta en tinta los H2 de sus secciones
       ("Para quien si, para quien no"): los del cuerpo eran los raros.
     - SIETE naranjas distintos conviviendo en una sola ficha:
       #9A4519 (62 usos) · #DC6B2F (14) · #B85929 (4) · #F8C7A8 (3) · #9A5A38 (2)
       · #7C3D18 (1) · #B45309 (1)  -- mas el #B05423 del CTA de la Ola 1.
     - El panel del configurador de lotes y su tira de colores en beige #FDF7F2
       con borde ambar #F0A36B; las pestanas seleccionadas con aro #DC6B2F.

   COMO se agarra (leccion de la Ola 1, que la primera vez NO gano la cascada):
   el sistema vive en 34-42 bloques <style> EN LINEA con selectores de ID que se
   sirven DESPUES de esta hoja. Se gana de dos maneras, ninguna con !important:
     1) REDEFINIENDO SUS TOKENS (--c-amber, --c-amber-bg, --c-amber-ink) desde
        un selector mas especifico -> cambia el sistema entero de golpe.
     2) prefijo `html` cuando hay que tocar una regla concreta.

   LO QUE NO SE TOCA, y por que:
     - El VERDE de stock por talla (`td.smx-ok{#15803D}`): es rol legitimo, y es
       el mismo verde que la Ola 1 dejo para stock. Se queda.
     - El AMBAR #B45309 de `td.smx-low` / `.mdpi-vstock.low`: NO es decoracion,
       es "poco stock" -- el gemelo del verde de arriba. Cambiarlo a tinta
       BORRARIA informacion al cliente. Se queda, documentado.
     - Precio, CTA por ticket, stock, insignia de Google, zonas de marcaje,
       enlaces por /ir-a-whatsapp, "mostrado==cobrado". Aqui solo cambia el aspecto.
   ============================================================================ */

/* ---- 1 · UN SOLO AMBAR, POR TOKEN ------------------------------------------
   `--c-amber` (#DC6B2F) pinta el fondo de 7-8 CTAs mas bordes, aros de foco y
   trazos de icono. `--c-amber-ink` (#9A4519) pinta enlaces, eyebrows y hovers.
   Colapsandolos en el par de la Ola 1 (#B05423 base + #8F4017 hover) el ambar
   pasa de siete valores a UNO con su hover, sin tocar regla a regla.
   #B05423 es ademas el unico que pasa AA sobre blanco (5,1:1). */
html #mdpicat,
html #mdpicat.mdpi-woo,
html #mdpicat.mdpi-woo2,
html #mdpi-lote{
  --c-amber:#B05423;
  --c-amber-ink:#8F4017;
  --c-amber-bg:#F9FAFB;   /* las cajas beige pasan a superficie neutra */
  --c-amber-bd:#E5E7EB;
}

/* ---- 2 · LOS ENLACES, AZULES -----------------------------------------------
   `#mdpicat a{color:var(--c-amber-ink)}` pintaba de ambar TODOS los enlaces:
   24 en una sola ficha. Un enlace no es un CTA. La casa ya declaro en la Ola 1
   que el azul es el rol de enlace y acento; aqui se aplica. */
/* valor literal a proposito, no `var(--v2-link)`: si la variable no resolviera en
   este contexto, la declaracion entera se descarta y el enlace se queda ambar --
   un fallo mudo. Con el literal no hay forma de que falle en silencio. */
html #mdpicat a{ color:#2F81F7; }
html #mdpicat a:hover{ color:#1D62C9; }
/* los que son BOTON aunque sean <a>: conservan su color propio, no heredan */
html #mdpicat a.btn,
html #mdpicat a.lo-btn,
html #mdpicat a.mdpi-pk-anchor,
html #mdpicat a.mdpi-card-cta,
html #mdpicat a.of-btn,
html #mdpicat a.mdpi-preq-btn,
html #mdpicat a.mpcb-btn,
html #mdpicat a[class*="cta"]{ color:#fff; }
html #mdpicat a.btn--ghost,
html #mdpicat a.btn--cart-ghost,
html #mdpicat a.card__verficha,
html #mdpicat a.mdpi-cc__cta--ver{ color:var(--c-t1,#111827); }

/* ---- 3 · LOS H2 DEL CUERPO: JERARQUIA POR TAMANO Y PESO, NO POR COLOR ------
   Un titulo de seccion no compite con el boton de comprar. Pasa a tinta, sube
   un punto de tamano y gana aire arriba: se distingue por jerarquia, que es
   como lo hace un B2B serio, no por pintarlo del color del CTA. */
html body.single-product #mdpicat .mdpi-prose > h2{
  color:#111827;
  font-size:clamp(1.7rem,2.9vw,2.25rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.24;
  margin-top:2.6em;
}
html body.single-product #mdpicat .mdpi-prose > h2:first-child{ margin-top:6px; }
html body.single-product #mdpicat .mdpi-prose > h3{
  color:#111827; font-weight:600; letter-spacing:-.01em; margin-top:1.8em;
}
/* La ficha de MAQUINA mete sus H2 dentro de `.mdpi-splitrow` (las filas de
   texto|media), asi que NO son hijos directos de `.mdpi-prose` y el selector de
   arriba no los alcanza: la casa tiene una regla aparte, mas especifica, que los
   volvia a pintar de #DC6B2F. Sin esto, la Ola 1.5 arreglaba pack y suelto y
   dejaba las 9 cabeceras de la ficha de maquina naranjas. Medido, no supuesto. */
html body.single-product #mdpicat .mdpi-prose .mdpi-splitrow > h2{
  color:#111827;
  font-size:clamp(1.7rem,2.9vw,2.25rem);
  font-weight:700;
  letter-spacing:-.02em;
}
html body.single-product #mdpicat .mdpi-prose .mdpi-splitrow > h3{ color:#111827; }

/* ---- 4 · LOS EYEBROWS: METADATO, NO ACENTO --------------------------------
   "DESCRIPCION", "ENCAJE HONESTO", "PREGUNTAS FRECUENTES"... son etiquetas de
   seccion. Iban en ambar y tiraban del ojo tanto como el titulo. Gris. */
html #mdpicat .eyebrow,
html #mdpicat .sec-eyebrow{ color:#6B7280; }
/* excepcion deliberada: el eyebrow de "Con stock ahora mismo" es informacion de
   STOCK, y el verde ahi es su rol legitimo (regla de la Ola 1). */
html #mdpicat .mdpi-dispo .sec-eyebrow{ color:#15803D; }
/* el eyebrow sobre fondo oscuro conserva su tono claro: en gris no se leeria */
html #mdpicat .wiz .eyebrow{ color:#F3B58A; }

/* ---- 5 · EL PANEL DE LOTES, PLANO -----------------------------------------
   `#mdpi-lote` y `.lo-cstrip` eran cajas beige (#FDF7F2) con borde ambar de
   1,5px. Una caja de configuracion no es una alerta: superficie neutra, borde
   gris de 1px, sin sombra. Lo que manda dentro es el CTA, que sigue ambar. */
html #mdpi-lote,
html #mdpi-lote.lo-fullw{
  background:#F9FAFB;
  border:1px solid #E5E7EB;
  box-shadow:none;
}
html #mdpicat .lo-cstrip,
html #mdpi-lote .lo-cstrip{
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:8px;
  box-shadow:none;
}
html #mdpicat .lo-cstrip__lbl,
html #mdpi-lote .lo-cstrip__lbl{ color:#4B5563; }
html #mdpicat .lo-cstrip__lbl b,
html #mdpi-lote .lo-cstrip__lbl b{ color:#111827; }

/* ---- 6 · LA PESTANA SELECCIONADA, EN ANTRACITA -----------------------------
   `.lo-tab.on` marcaba la seleccion con borde + aro + punto en #DC6B2F: el
   estado seleccionado vestido de CTA. La casa YA tiene su patron de "activo"
   en antracita (`.chip.active`, unificado en la Ola 1); se usa ese.
   Se marca con BORDE, no con relleno: asi el texto de dentro no se queda
   ilegible: exactamente la trampa que tumbo el intento de la financiacion. */
html #mdpi-lote .lo-tab{ border:1.5px solid #E5E7EB; background:#FFFFFF; }
html #mdpi-lote .lo-tab:hover{ border-color:#CBD5E1; }
html #mdpi-lote .lo-tab.on{
  border-color:#1F2937;
  background:#F9FAFB;
  box-shadow:0 0 0 1.5px #1F2937;
}
html #mdpi-lote .lo-tab.on::before{
  border-color:#1F2937;
  background:#1F2937;
  box-shadow:inset 0 0 0 3px #fff;
}
html #mdpi-lote .lo-tab.on .lo-tab__t,
html #mdpi-lote .lo-tab.on b,
html #mdpi-lote .lo-tab.on span{ color:#111827; }

/* ---- 7 · LA CAJA DE DESCUENTO POR VOLUMEN, PLANA --------------------------
   `.mdpi-vol` era #FDF4EE con borde #F8C7A8 y sus cifras en #9A4519. La cifra
   de un tramo de precio es un DATO: va en tinta y en la mono de la casa. */
html #mdpicat .mdpi-vol{
  background:#F9FAFB; border:1px solid #E5E7EB; box-shadow:none;
}
html #mdpicat .mdpi-vol__eye{ color:#111827; }
html #mdpicat .mdpi-vol__chip{ border-color:#E5E7EB; }
html #mdpicat .mdpi-vol__chip em{ color:#111827; }
html #mdpicat .mdpi-vol__note i{ color:#6B7280; }

/* ---- 8 · LOS ESTADOS QUE VIVIAN DEL BEIGE ---------------------------------
   Al volver `--c-amber-bg` neutro, tres elementos perdian su senal de
   "seleccionado". Se les devuelve, en antracita (patron de la casa). */
html #mdpicat .mdpi-swatch.active{
  border-color:#1F2937; box-shadow:0 0 0 2px #1F2937;
}
html #mdpicat .mdpi-vtable tr.on{ background:#F3F4F6; }
html #mdpicat .mdpi-cc-more>summary{ background:#F9FAFB; border-color:#E5E7EB; }

/* ---- 9 · LAS TABLAS, SOBRIAS ----------------------------------------------
   Habia dos grises de cabecera distintos (#F3F4F6 y #F9FAFB) y las cifras en
   proporcional. Una tabla tecnica se lee mejor con cifras de ancho fijo y una
   sola cabecera. El verde de stock y el ambar de poco-stock NO se tocan. */
html #mdpicat table.mdpi-smx thead th,
html #mdpicat .mdpi-vtable thead th,
html #mdpicat .tablewrap table thead th{
  background:#F9FAFB; color:#374151; font-weight:600;
}
html #mdpicat table.mdpi-smx td,
html #mdpicat .mdpi-vtable td,
html #mdpicat .tablewrap table td{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
html #mdpicat table.mdpi-smx td.smx-c{ background:#FCFCFD; color:#111827; }
html #mdpicat .tablewrap{ border-color:#E5E7EB; }

/* ---- 10 · EL CUADRO COMPARATIVO, AL ESTILO v2 ------------------------------
   `.mdpi-cmptbl` no aparece en las tres fichas medidas hoy (si en 3 productos
   del catalogo, p.ej. la xTool S1). Se deja resuelto AHORA para que nazca ya
   en el sistema el dia que aparezca: separadores de 1px, cifras de ancho fijo,
   cabecera gris, cero relleno de color. Solo piel: no se toca su layout flex. */
html body.single-product #mdpicat .mdpi-prose .mdpi-cmptbl{
  border:1px solid #E5E7EB;
  border-radius:8px;
  overflow:hidden;
  color:#111827;
  font-variant-numeric:tabular-nums;
}
html body.single-product #mdpicat .mdpi-prose .mdpi-cmptbl > div{
  border-bottom:1px solid #F1F2F4;
}
html body.single-product #mdpicat .mdpi-prose .mdpi-cmptbl > div:last-child{
  border-bottom:0;
}
html body.single-product #mdpicat .mdpi-prose .mdpi-cmptbl > div:first-child{
  background:#F9FAFB; font-weight:600; color:#374151;
}

/* ---- 11 · LA FAQ ----------------------------------------------------------
   El "+" de abrir es una affordance, no un CTA: no necesita el color del boton
   de comprar. Gris, y la pregunta manda por peso. */
html #mdpicat .faq summary::after{ color:#6B7280; font-weight:600; }
html #mdpicat .faq summary{ color:#111827; }
html #mdpicat .faq details{ border-bottom-color:#E5E7EB; }

/* ---- 12 · SEGUNDA PASADA: lo que quedaba ambar con el DESPUES delante --------
   Igual que en la Ola 1, la primera pasada no lo cogio todo. Con el render medido
   (no leido) quedaban doce cosas en ambar que NO son el boton de comprar. Se
   clasifican por ROL y cada una va a donde le toca:

     ESTADO seleccionado  -> antracita (el patron de la casa, ya usado en los chips)
     METADATO / eyebrow   -> gris
     ENLACE               -> azul
     CTA                  -> el unico ambar #B05423

   Lo que se queda ambar a proposito, y por que:
     .mdpi-pk-anchor · .lo-btn · .btn--cart-solid · .mdpi-cc__cta--add  = CTA
     .smx-low (#B45309)                                                = poco stock
   ------------------------------------------------------------------------- */

/* ESTADO: color y talla seleccionados en el configurador de lotes */
html #mdpi-lote .lo-c.on{ border-color:#1F2937; box-shadow:0 0 0 1px #1F2937; }
html #mdpi-lote .lo-chip.on{ background:#1F2937; border-color:#1F2937; color:#fff; }
/* METADATO: cabecera del panel, subtitulo de pestana, marco del precio.
   El subtitulo lleva DOS reglas: la normal (#6B7280, ya bien) y la de pestana
   SELECCIONADA (#9A5A38). Solo con `.lo-tab__d` no se gana a `.lo-tab.on .lo-tab__d`:
   hay que escribir la del estado. */
html #mdpi-lote .lo-hd{ color:#6B7280; }
html #mdpi-lote .lo-tab__d,
html #mdpi-lote .lo-tab.on .lo-tab__d{ color:#6B7280; }
/* los +/- de cantidad son controles, no llamadas a la accion (#DC6B2F en origen) */
html #mdpi-lote .lo-qty button{ color:#374151; }
html #mdpi-lote .lo-price{ border-color:#E5E7EB; }

/* METADATO: acordeon de ficha tecnica y medidas de zona de marcaje */
html #mdpicat .mdpi-vtable-acc,
html #mdpicat .mdpi-specs-acc,
html #mdpicat details.mdpi-vtable-acc.mdpi-specs-acc,
html #mdpicat details.mdpi-vtable-acc{ border:1px solid #E5E7EB; }
/* El titulo del acordeon cerrado va en ambar por una regla con `!important`
   (`.mdpi-vtable-acc>summary .mdpi-acc-h2{color:var(--c-amber-ink)!important}`), y
   en tinta cuando se abre. Es un senuelo de "abreme" deliberado. Ganarle exigiria
   meter el PRIMER !important del sistema, y eso no se hace por piel: queda
   DECLARADO como excepcion (ya en el ambar unico, #8F4017) y se arregla en origen
   si Javier quiere. */
html #mdpicat .mdpi-acc-h2{ color:#111827; }
html #mdpicat .mdpi-zona__m{ color:#4B5563; }

/* ENLACE: los "Ver ..." de las tarjetas laterales y los desplegables de "ver mas" */
/* `#mdpicat .mdpi-aside .aside-links a` empata en especificidad con
   `.aside-card a` y gana por orden de carga: hay que escribir SU selector. */
html #mdpicat .mdpi-aside .aside-links a,
html #mdpicat .aside-card a,
html #mdpicat .mdpi-aside a,
html #mdpicat .mdpi-cc-more > summary,
html #mdpicat .mdpi-dispo summary{ color:#2F81F7; }

/* CTA secundario de contorno: contorno neutro y texto en tinta (patron v2),
   para que no compita con el boton solido que si es la accion principal */
html #mdpicat .mdpi-cc__cta--opt{ border-color:#D1D5DB; color:#111827; }

/* NOTA (no es CSS, es dato): el boton "Ver los video-tutoriales" y la caja que lo
   rodea NO se arreglan desde aqui — llevan `style=""` en linea dentro de la meta
   `_mdpi_producto` (120 instancias en 59 productos, 6 patrones). Un atributo style
   gana a cualquier selector sin !important, asi que van en el pase de DATOS
   (`_o15_datos_v2.php`), no en la hoja. Aqui se deja escrito para que nadie intente
   arreglarlo por CSS y acabe metiendo !important. */

/* ============================ FIN OLA 1.5 v2 =============================== */
/* ============================================================================
   OLA 2 · BANNER DE COOKIES + TALLA ELEGIDA
   Desplegado 2026-09-02. Rollback de una linea: borrar desde este comentario
   hasta "FIN OLA 2" inclusive. Backup del servidor: .bak-20260902-preola2

   ALCANCE: PIEL Y SOLO PIEL.
   No se toca la logica de consentimiento, ni las categorias, ni el opt-in, ni
   el texto legal, ni un solo hook de Complianz. Se cambia como SE VE el banner,
   no lo que HACE. Verificado antes y despues con scripts/_idx/test_gcs.py, que
   lee el parametro `gcs` de las peticiones reales a Google (G100 = denegado
   antes de aceptar / G111 = concedido despues). Si eso cambia, esto se revierte.

   POR QUE (medido, no opinado — `cwv2-o2-antes-cura-banner.json`, 2-sep):
     - `DIV.cmplz-message` es el elemento LCP en MOVIL en 4 de 4 paginas
       (categoria, ficha-pack, ficha-maquina, ficha-suelto).
     - A 390x844 el banner mide 390x527 px = 62% del viewport, y sus 3 botones
       van apilados a ancho completo (344 px) en y=600/655/710.
     - Tapa el selector de tallas de las fichas de personalizados en primera
       visita. Evidencia: gate-render-tallas/png/EVIDENCIA-banner-tapa-selector-390.png
     - Su "Aceptar todas" se pinta en rgb(10,102,194): el MISMO azul que el
       precio del producto. Un plugin de terceros pintando en el color de la casa.

   LIMITE HONESTO: el banner solo se muestra a quien no ha consentido aun. Esto
   arregla la PRIMERA visita — que es justo el trafico de Ads y de SEO nuevo.
   ========================================================================= */

/* --- 1 · que el banner deje de ser un panel que ocupa media pantalla ------ */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  max-width:min(560px,calc(100vw - 32px));
}

/* --- 2 · los 3 botones, en fila en vez de apilados ------------------------
   Son ~155 px de alto apilados (3 x 45 + huecos). En fila, ~45.
   `flex-wrap` los deja caer solos si no caben: no se fuerza nada.

   🔴 `flex-direction:row` NO estaba en la receta del acta, y sin el la regla
   era decorativa: Complianz trae `.cmplz-cookiebanner .cmplz-buttons{
   flex-direction:column}` y el contenedor YA era `display:flex`. Repetirle
   "display:flex" a algo que ya lo es no lo cambia; lo que apila es la
   direccion. Medido con CSS.getMatchedStylesForNode (scripts/_o2_diag_matched.py):
   mi regla ganaba la cascada y aun asi los botones seguian en columna. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
  display:flex; flex-direction:row; flex-wrap:wrap; gap:8px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  width:auto; flex:1 1 auto; min-height:40px;
}

/* --- 3 · el azul del banner NO es el azul del precio ----------------------
   Antracita del sistema (#1F2937). No se toca lo que el boton HACE. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept{
  background:#1F2937; border-color:#1F2937;
}

/* --- 4 · LA TALLA ELEGIDA, EN ANTRACITA ----------------------------------
   Medido en el render (scripts/_o2_probe_chip.py, `probe-antes.json`): el chip
   elegido y el no elegido salen IDENTICOS salvo el grosor de la letra —
   bg #fff / color #4B5563 / borde #D1D5DB, peso 700 vs 600. El color si se
   marca (borde naranja); la talla no. En una ficha donde el problema del mes
   ha sido QUE TALLA SE PIDE, la elegida tiene que verse.

   Se usa el patron v2 que la casa YA tiene para un chip pequeno
   (`.lo-chip.on` de la Ola 1.5: relleno antracita + texto blanco), no uno nuevo.

   🔴 LA CAUSA REAL, y no es la que decia el acta. El configurador SI trae su
   estado naranja (`.mc2 .chip.on{background:var(--narbg);...}`), pero en estas
   paginas lo arrolla una regla con ID:

       #mdpicat .chip{ background:#fff; color:var(--c-t2);
                       border:1px solid var(--c-border2); ... }   (1,1,0)

   Un ID gana a cualquier numero de clases, asi que ni el naranja del origen
   (0,3,0) ni un `.mc2 .chips .chip.on` (0,4,0) pintan nada. Por eso el elegido
   sale identico salvo el `font-weight`, que es lo unico que `#mdpicat .chip`
   no fija. Medido con CSS.getMatchedStylesForNode, no deducido.

   Se sube a especificidad de ID (1,4,0) — sigue SIN !important. Se cubren los
   dos ancestros que existen en la pagina (los dos aparecen en las reglas que
   casan con el chip), para no depender de en cual este montado. */
#mdpicat .mc2 .chips .chip,
#mdpi-cfg2-root .mc2 .chips .chip{
  border-color:#D1D5DB;
}
#mdpicat .mc2 .chips .chip.on,
#mdpi-cfg2-root .mc2 .chips .chip.on{
  background:#1F2937;
  border-color:#1F2937;
  color:#FFFFFF;
}

/* FIN OLA 2 */
/* ============================================================================
   OLA 2b · FOLD MÓVIL DE LA FICHA — opción E
   Desplegado 2026-09-02. Rollback de una línea: borrar desde este comentario
   hasta "FIN OLA 2b" inclusive. Backup del servidor: .bak-20260902-preola2b

   QUÉ HACE, y solo eso: recuperar altura del fold móvil para que el bloque de
   acciones (.ctas) deje de caer entero por debajo de la primera pantalla.

   POR QUÉ (medido, `fold-bloques-o2-2026-09-02.json` + `_o2_sim_thumbs.py`):
   en la ficha de 12.990 € el primer CTA de producto vive en y=907 con el fold
   en 844 -> **0 píxeles de botón en pantalla**. Y el criterio importa: opciones
   que dejaban el bloque a 1 y a 5 px del borde seguían mostrando CERO botón.
   Lo que se optimiza es "cuántos píxeles del CTA se ven", no "dónde empieza".

   LAS 5 OPCIONES SE SIMULARON EN EL NAVEGADOR antes de escribir esto:
     A fila única .................. ctas 849 ->  0 px visibles
     D fila única + miniatura 48 ... ctas 845 ->  0 px visibles
     B miniaturas al final ......... sin efecto aquí
     C overlay sobre la galería .... ctas 789 -> 55 px  (tapa la foto)
     E (ESTA) ...................... ctas 805 -> 39 px  (no tapa nada)
   Se elige E: gana 39 px de CTA sin overlay, sin tocar el DOM y **sin recortar
   la foto** -- `.gal__main img{object-fit:contain}` hace que al bajar el alto la
   imagen se vea ENTERA, sólo más pequeña.

   SOLO MÓVIL: todo va dentro de @media(max-width:860px), que es el breakpoint
   con el que la casa ya cambia el PDP (el mismo de `.mdpi-stickybar`).
   Desktop no debe cambiar ni un píxel; se verifica midiéndolo.

   `html #mdpicat` (1,2,0) a propósito: el CSS de la casa lo emite el PHP DENTRO
   del <body>, así que a igual especificidad ganaba por orden de documento.
   ========================================================================= */

@media (max-width: 860px) {

  /* 1 · la tira de miniaturas, en UNA fila con scroll horizontal.
     Antes envolvía en 2 filas (110 px). Se conserva el tamaño de toque de
     64x64: no se encogen las miniaturas, se dejan de apilar. */
  html #mdpicat .gal__thumbs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html #mdpicat .gal__thumbs::-webkit-scrollbar{ display:none; }
  html #mdpicat .gal__thumbs > *{ flex:0 0 auto; }

  /* 2 · la caja de la imagen principal, de 4/3 a 16/10.
     NO recorta: la imagen es object-fit:contain, así que se ve entera. */
  html #mdpicat .gal__main{ aspect-ratio:16/10; }

}

/* FIN OLA 2b */