/* Generated by scripts/build-critical-css.cjs. Edit the source files. */

/* Source: ensutex-marca-fuentes.css */
/* Familias vigentes de marca.css. Fuentes oficiales locales, latín y español. */
@font-face{font-family:Anton;src:url('../fonts/ensutex/anton-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url('../fonts/ensutex/archivo-latin-variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-stretch:100%;font-display:swap}


/* Source: marca.css */
/* ===========================================================================
   marca.css — nueva marca de Ensutex con la referencia ploy.ai (27-sep-2026).
   Carlitos: «no me gusta el color del sitio ni la fuente… que se vea más profesional, literal brandea completo».
   Referencia medida: obsidian/VAULT_ESTUDIO_WEB/01_Referencias/Ploy.md.

   Sistema (uno solo, igual en todas las pestañas de Ensutex; ModoFan y REBXN conservan el suyo):
     · Títulos (H1/H2): Anton, MAYÚSCULA, interlineado .9. Mismo nivel = mismo aspecto en todo el sitio.
     · Títulos y subtítulos: Anton. Texto, menú y botones: Archivo.
     · Fondo base gris claro #F4F4F4 con tarjetas blancas; escenas oscuras #121212; rojo Ensutex solo
       en el botón principal y acentos; azul cielo y rojo en tinte para paneles.
     · Etiqueta del tema = píldora negra chica (como las de ploy).
     · Botones en píldora.
   Carga al final de cada página: manda sobre las hojas anteriores.
   =========================================================================== */

:root {
  --mk-display: 'Anton', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; /* 03-oct: Carlitos confirmó Anton + Archivo (la «A»); Hussar/Jost NO */
  --mk-body: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mk-bg: #F4F3F1;
  --mk-card: #FFFFFF;
  --mk-ink: #151413;
  --mk-ink-2: #5E5A56;
  --mk-line: #E7E4E0;
  --mk-negro: #141312;
  --mk-rojo: #E20613;
  --mk-rojo-tinte: #FBE3E0;
  --mk-rojo-texto: #B8000E; /* rojo para letra chica sobre claro: 6,2:1 sobre la base (el de marca da 4,4) */
  --mk-rojo-claro: #FF5A64; /* rojo para letra chica sobre negro: 6,1:1 (el de marca da 3,8) */
  --mk-cielo-tinte: #E1F0F7;
  --mk-radio-panel: 24px;
  --mk-radio-card: 14px;
  --mk-curva: cubic-bezier(.22, 1, .36, 1);
}

/* ---- Variables del sitio: la raíz manda (lo que ya usa var(--ens-…) cambia solo) ---- */
body:not(.mf):not(.rx) {
  --ens-font-display-family: var(--mk-display);
  --ens-font-body-family: var(--mk-body);
  --font-display-family: var(--mk-display);
  --font-body-family: var(--mk-body);
  --font-display: var(--mk-display);
  --font-body: var(--mk-body);
  --ens-font-ui: var(--mk-body); /* ux-refresh.css pone body { font-family: var(--ens-font-ui) !important }: era Jost en todo */
  --ens-scene-light: var(--mk-bg);
  --ens-scene-dark: var(--mk-negro);
  --surface: var(--mk-bg);
  --text-primary: var(--mk-ink);
  --text-secondary: var(--mk-ink-2);
  --ens-text-light-muted: var(--mk-ink-2);
  font-family: var(--mk-body);
  background-color: var(--mk-bg);
  color: var(--mk-ink);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

/* ---- Títulos: un solo sistema ---- */
body:not(.mf):not(.rx) main :is(h1, h2):not(.ens-motion-eyebrow),
body:not(.mf):not(.rx) .ens-motion-hero__title {
  font-family: var(--mk-display) !important;
  font-weight: 400 !important;          /* Anton ya es gruesa: nada de negrita sintética */
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: .004em !important;
  line-height: .92 !important;
  text-wrap: balance;
}
/* el H1 de SEO del héroe del inicio es una línea chica: texto, no póster */
body:not(.mf):not(.rx) .ens-motion-eyebrow {
  font-family: var(--mk-body) !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}
/* Títulos de tarjeta y subtítulos mantienen la fuente de títulos. */
body:not(.mf):not(.rx) main :is(h3, h4, h5, h6) {
  font-family: var(--mk-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
}
/* texto corrido */
body:not(.mf):not(.rx) main :is(p, li, dd, figcaption, label, small) { font-family: var(--mk-body); }

/* ---- Etiqueta del tema: píldora negra (como «Pricing», «How Ploy works» en ploy) ---- */
body:not(.mf):not(.rx) main .seo-tema,
body:not(.mf):not(.rx) main p.ens-eyebrow,
body:not(.mf):not(.rx) main span.ens-eyebrow {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: var(--mk-ink) !important;
  color: #fff !important;
  font-family: var(--mk-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}
body:not(.mf):not(.rx) main .seo-tema::before,
body:not(.mf):not(.rx) main .ens-eyebrow::before,
body:not(.mf):not(.rx) main .seo-tema::after,
body:not(.mf):not(.rx) main .ens-eyebrow::after { display: none !important; }
/* en escenas oscuras la píldora se invierte */
body:not(.mf):not(.rx) [data-scene="dark"] :is(.seo-tema, p.ens-eyebrow, span.ens-eyebrow),
body:not(.mf):not(.rx) .bg-black :is(.seo-tema, p.ens-eyebrow, span.ens-eyebrow),
body:not(.mf):not(.rx) .bg-zinc-950 :is(.seo-tema, p.ens-eyebrow, span.ens-eyebrow) {
  background: #fff !important;
  color: var(--mk-ink) !important;
  -webkit-text-fill-color: var(--mk-ink) !important;
}

/* ---- Botones en píldora, Archivo ---- */
body:not(.mf):not(.rx) :is(main, header, nav) :is(a, button):is([class*="btn"], [class*="cta"], [class*="button"], .rounded-full) {
  border-radius: 999px !important;
  font-family: var(--mk-body) !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
}

/* ---- Menú: Archivo en todas las pestañas ---- */
body:not(.mf):not(.rx) :is(header, nav, .ensutex-site-nav) :is(a, button, span) {
  font-family: var(--mk-body) !important;
  letter-spacing: -.01em;
}

/* ---- Tarjetas: blancas, borde fino, radio único ---- */
body:not(.mf):not(.rx) main :is(.ens-card, [class*="-card"]:not([class*="card-"]):not(.lt-w)) {
  border-radius: var(--mk-radio-card);
}

/* ===== Pasada 2 (27-sep): lo que se vio en las primeras capturas ===== */

/* Las palabras dentro del título heredan SIEMPRE la letra del título: había reglas viejas sobre los <span>
   del título que dejaban palabras en otra letra o en minúscula («Tu idea, un plan…», «Indumentaria…»).
   04-oct: el selector exigía que el título estuviera DENTRO de <main>, y en la política de privacidad y en
   los tres artículos del blog el H1 vive en un encabezado FUERA de <main>. Sus letras se quedaban en
   Archivo a 74,88 px en vez de Anton (medido con getComputedStyle sobre 160 spans, comparado contra el
   catálogo, donde el H1 sí está en <main>). Se les da el mismo trato a los encabezados de fuera de main. */
body:not(.mf):not(.rx) main :is(h1, h2):not(.ens-motion-eyebrow) :is(span, strong, em, b, a, .lt-w, .lt-p, .lt-l):not(.seo-tema):not(.ens-eyebrow):not(.lt-cursor):not([class*="eyebrow"]):not([class*="kicker"]),
body:not(.mf):not(.rx) :is(header, article, .page-header, .blog-header, .legal-header) :is(h1, h2):not(.ens-motion-eyebrow) :is(span, strong, em, b, a, .lt-w, .lt-p, .lt-l):not(.seo-tema):not(.ens-eyebrow):not(.lt-cursor):not([class*="eyebrow"]):not([class*="kicker"]),
body:not(.mf):not(.rx) .ens-motion-hero__title :is(span, strong, em, b) {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
}

/* La etiqueta del tema va ENCIMA del título, en su propia línea (no pegada al lado) */
body:not(.mf):not(.rx) main :is(h1, h2) .seo-tema {
  display: flex !important;
  margin-bottom: 18px !important;
}

/* Todas las etiquetas chicas sobre títulos, en todas las pestañas: la misma píldora */
body:not(.mf):not(.rx) main :is(p, span):is([class*="eyebrow"], [class*="kicker"]):not(.ens-motion-eyebrow):not(.seo-tema) {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: var(--mk-ink) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: var(--mk-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-shadow: none !important;
  margin-bottom: 16px !important;
}
body:not(.mf):not(.rx) main :is(p, span):is([class*="eyebrow"], [class*="kicker"])::before { display: none !important; }
body:not(.mf):not(.rx) :is([data-scene="dark"], .bg-black, .bg-zinc-950, .product-landing__hero, .guide-hero--dark) :is(p, span):is([class*="eyebrow"], [class*="kicker"]):not(.ens-motion-eyebrow) {
  background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important;
}

/* Botón principal: rojo Ensutex en píldora (antes había celestes, negros y rojos según la pestaña) */
body:not(.mf):not(.rx) main :is(a, button):is([class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"], .ens-cta-primary):not(.ensutex-nav-cta) {
  background: var(--mk-rojo) !important;
  border-color: var(--mk-rojo) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--mk-body) !important;
  font-weight: 600 !important;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background-color .2s;
}
body:not(.mf):not(.rx) main :is(a, button):is([class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"], .ens-cta-primary):hover { transform: scale(1.035); }
/* 04-oct · El pulsado, copiado de la referencia (Klarna: 0,09 s lineal). Faltaba: el botón crecía al
   pasar el mouse pero al apretarlo no pasaba nada, y en el celular —donde no hay hover— el toque
   quedaba mudo. Baja un poco en vez de crecer, para que se sienta que se hundió. */
body:not(.mf):not(.rx) main :is(a, button):is([class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"], .ens-cta-primary):active {
  transform: scale(.975);
  transition: transform .09s linear, background-color .09s linear;
}
body:not(.mf):not(.rx) main :is(a, button):is([class*="button--secondary"], [class*="btn--secondary"], [class*="cta--secondary"]) {
  background: transparent !important; border: 1px solid currentColor !important; border-radius: 999px !important;
}

/* ================= MENÚ: claro, como ploy, igual en todas las pestañas ================= */
/* Hay dos menús distintos en el HTML: .ensutex-site-nav (inicio, catálogo, blog) y .guide-nav (el resto).
   Aquí se ven iguales. Se unifican en un solo componente después de la aprobación. */
body:not(.mf):not(.rx) :is(.ensutex-site-nav, .guide-nav) {
  background: rgba(244, 243, 241, .86) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px) !important;
  backdrop-filter: saturate(1.4) blur(14px) !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06) !important;
  pointer-events: auto !important;
  color: var(--mk-ink) !important;
}
/* logo en su color original (antes se forzaba a blanco) */
body:not(.mf):not(.rx) :is(.ensutex-site-nav, .guide-nav) img:is(.ensutex-brand-logo, [alt*="Ensutex"]) {
  filter: none !important;
  height: 2.1rem !important;
  width: auto !important;
}
/* sin lema en el menú (lo había inventado un agente) */
body:not(.mf):not(.rx) :is(.ensutex-brand-text, .guide-brand > span) { display: none !important; }
/* grupo de opciones en una píldora gris */
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) {
  background: #E8E6E2;
  border-radius: 999px;
  padding: 5px !important;
  gap: 2px !important;
  align-items: center;
}
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * { margin: 0 !important; }
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > a,
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * > a:first-child,
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > button,
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * > button:first-child {
  color: var(--mk-ink-2) !important;
  -webkit-text-fill-color: var(--mk-ink-2) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s !important;
}
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > a:hover,
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * > :is(a, button):first-child:hover {
  background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important;
}
/* mismo orden en todas las pestañas: Modelos y precios · Nuestras marcas · Prepara tu diseño · Tallas · Preguntas */
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * { order: 6; }
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > :is(a[href^="catalogo"], :has(> a[href^="catalogo"])) { order: 1; }
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > :has(a[href*="modofan"]) { order: 2; }
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > a[href*="guia-diseno"] { order: 3; }
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > a[href*="guia-tallaje"] { order: 4; }
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > a[href*="preguntas-frecuentes"] { order: 5; }
/* desplegables: tarjeta blanca */
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * > div {
  background: #fff !important;
  border: 1px solid var(--mk-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28) !important;
}
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * > div a {
  color: var(--mk-ink-2) !important; -webkit-text-fill-color: var(--mk-ink-2) !important; background: transparent !important;
}
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > * > div a:hover {
  background: #F4F3F1 !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important;
}
/* botón del menú: píldora negra */
body:not(.mf):not(.rx) :is(.ensutex-nav-cta, .guide-nav__cta) {
  background: var(--mk-ink) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
}
body:not(.mf):not(.rx) :is(.ensutex-nav-cta, .guide-nav__cta) * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
/* celular: botón de menú y cajón claros */
body:not(.mf):not(.rx) #mobileMenuBtn,
body:not(.mf):not(.rx) .guide-nav button {
  color: var(--mk-ink) !important; background: #fff !important; border-radius: 999px !important;
}
body:not(.mf):not(.rx) #mobileMenuBtn .hamburger-bars span,
body:not(.mf):not(.rx) .guide-nav button span:not([class]) { background: var(--mk-ink) !important; }
body:not(.mf):not(.rx) :is(#mobileDrawer, #guide-mobile-nav) {
  background: #fff !important;
  border: 1px solid var(--mk-line) !important;
  border-radius: 18px !important;
  margin: 8px 12px !important;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35) !important;
}
body:not(.mf):not(.rx) :is(#mobileDrawer, #guide-mobile-nav) a:not(.ens-cta-primary):not(.mobile-brand-card) {
  color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; background: transparent !important;
}

/* Carlitos (27-sep): «no pondría mis otras marcas en el menú de Ensutex porque eso es fuga; solo en el inicio
   abajito». Fuera del menú de escritorio y del de celular; la sección «Otras marcas» del final del inicio queda. */
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > :has(a[href*="modofan"]),
body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links) > a[href*="modofan"],
body:not(.mf):not(.rx) :is(#mobileDrawer, #guide-mobile-nav) :is(.mobile-drawer-label, .mobile-brands, a[href*="modofan"], a[href*="rebxn"], [class*="marcas"]) { display: none !important; }

/* ===== Pasada 3 (27-sep) ===== */

/* Más fuerza: el catálogo tiene reglas con id (#catalogo h2 {…!important}) que ganaban. :is(#mk-x, main) pesa como
   un id y sigue apuntando a <main>: así la marca gana en todas las pestañas sin tocar cada hoja. */
html body:not(.mf):not(.rx) :is(#mk-x, main) :is(h1, h2):not(.ens-motion-eyebrow),
html body:not(.mf):not(.rx) :is(#mk-x, main) :is(h1, h2):not(.ens-motion-eyebrow) :is(span, strong, em, b, a, .lt-w, .lt-p, .lt-l):not(.seo-tema):not(.ens-eyebrow):not(.lt-cursor):not([class*="eyebrow"]):not([class*="kicker"]) {
  font-family: var(--mk-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: .004em !important;
}
html body:not(.mf):not(.rx) :is(#mk-x, main) :is(h1, h2):not(.ens-motion-eyebrow) { line-height: .92 !important; }

/* Etiquetas propias del catálogo (spans con tracking ancho y la píldora roja de packs): la misma píldora negra */
html body:not(.mf):not(.rx) :is(#mk-x, main) :is(span, p):is(.tracking-\[0\.3em\], .tracking-\[0\.22em\], .tracking-\[0\.25em\], .tracking-widest):not(.absolute):not([class*="price"]):not(.lt-w),
html body:not(.mf):not(.rx) #packs .text-center > span:first-child {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: var(--mk-ink) !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: var(--mk-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
html body:not(.mf):not(.rx) :is(.bg-black, .bg-zinc-950, [data-scene="dark"], .catalog-page-hero--dark) :is(span, p):is(.tracking-\[0\.3em\], .tracking-\[0\.22em\], .tracking-\[0\.25em\], .tracking-widest):not(.absolute) {
  background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important;
}

/* Logo del menú en negro sobre la barra clara (el archivo es blanco) */
html body:not(.mf):not(.rx) :is(.ensutex-site-nav, .guide-nav) img:is(.ensutex-brand-logo, [alt*="Ensutex"]) {
  filter: brightness(0) !important;
  opacity: .92;
}

/* Héroes oscuros de las páginas de producto: tarjeta redondeada con margen, como el héroe de ploy */
html body:not(.mf):not(.rx) main > :is(.product-landing__hero, .guide-hero--dark) {
  margin: 12px 12px 0 !important;
  border-radius: var(--mk-radio-panel) !important;
  overflow: hidden;
}
@media (min-width: 1024px) {
  html body:not(.mf):not(.rx) main > :is(.product-landing__hero, .guide-hero--dark) { margin: 16px 16px 0 !important; }
}

/* Título de cada página (H1): tamaño póster, como ploy. Anton es angosta: al mismo tamaño se veía más chica. */
html body:not(.mf):not(.rx) :is(#mk-x, main) h1:not(.ens-motion-eyebrow) { font-size: clamp(44px, 12vw, 60px) !important; }
@media (min-width: 768px) { html body:not(.mf):not(.rx) :is(#mk-x, main) h1:not(.ens-motion-eyebrow) { font-size: clamp(56px, 5.6vw, 88px) !important; } }

/* ===== Pasada 4 (27-sep): revisión del equipo (ux-cro, brand-content, conversational-marketing, seo-aeo, qa) ===== */

/* Títulos con tilde (TAMBIÉN, PRODUCCIÓN, DISEÑO): con .92 la tilde rozaba la línea de arriba y con 1 aún la tocaba
   (3 px en el héroe a 48 px, medido con verificar-encuadre). 1.08 deja aire sin perder el cartel apretado */
html body:not(.mf):not(.rx) :is(#mk-x, main) :is(h1, h2):not(.ens-motion-eyebrow),
html body:not(.mf):not(.rx) .ens-motion-hero__title { line-height: 1.08 !important; }

/* 04-oct · el titular del héroe de la portada («Lo que une a tu equipo también puede llevarse puesto.») montaba
   las líneas 1,2 px entre la «e» y la «é» de «también» (verificar-encuadre, en rojo en las tres medidas). Con Anton
   el 1.08 dejaba la tilde tocando la línea de arriba; el titular de héroe sube a 1.16 y se le da aire. La regla de
   arriba (que fija 1.08 a TODOS los h1/h2 de main) se deja igual: esto apunta solo al titular del héroe del inicio.
   Lleva `:is(#mk-x, main) #hero-emotional-title` (dos ids) porque el h2 también cae en la regla de arriba, que
   pesa (1,3,3): hay que superarla sin tocar el resto de los títulos. */
html body:not(.mf):not(.rx) :is(#mk-x, main) #hero-emotional-title { line-height: 1.16 !important; }

/* Escenas oscuras: negro limpio con un brillo rojo apenas perceptible (quedaban rojo-café al recolorear el turquesa) */
html body:not(.mf):not(.rx) :is(#mk-x, main) > :is(.product-landing__hero, .guide-hero, .faq-hub__hero, [class*="hero"][class*="--dark"]) {
  background: radial-gradient(70% 90% at 100% 0%, rgba(226, 6, 19, .10), transparent 62%), var(--mk-negro) !important;
}

/* Asu: en escritorio, la píldora corta («Cotizar») junto al robot. La larga tapaba contenido a la derecha al bajar. */
@media (min-width: 1024px) {
  html body:not(.mf):not(.rx) .floating-widgets:not(.asu-junto) #chatbot-cta:not(.is-proactive) .chatbot-cta-full { display: none !important; }
  html body:not(.mf):not(.rx) .floating-widgets:not(.asu-junto) #chatbot-cta:not(.is-proactive) .chatbot-cta-short { display: inline !important; }
  html body:not(.mf):not(.rx) .floating-widgets:not(.asu-junto) #chatbot-cta:not(.is-proactive) { max-width: 9rem !important; min-width: 0 !important; padding-inline: 16px !important; }
  /* junto a un botón, la píldora mide su frase: era una barra negra de 352 px para «¿Te ayudo a cotizar?» (121 px) */
  html body:not(.mf):not(.rx) .floating-widgets.asu-junto #chatbot-cta.ens-chat-prompt.chatbot-cta-fixed { width: max-content !important; min-width: 0 !important; max-width: 22rem !important; padding-inline: 18px !important; }
}

/* Etiquetas que aún no eran píldora: «Ficha técnica de telas», «Ahorro por combinación oficial» */
html body:not(.mf):not(.rx) :is(#mk-x, main) :is(p, span):is(.text-\[\#E20613\], .text-red-600, .text-red-500):is(.uppercase, [class*="tracking"]):not(.absolute):not(.lt-w),
html body:not(.mf):not(.rx) #packs span:is([class*="bg-red"], [class*="rounded-full"]):not(.absolute) {
  display: inline-flex !important; width: fit-content; padding: 6px 12px !important; border-radius: 999px !important;
  background: var(--mk-ink) !important; border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-family: var(--mk-body) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .01em !important; text-transform: none !important;
}

/* ================= «Cómo pedir» del inicio: panel fijo de 5 pasos (reemplaza el camino anclado) ================= */
html body:not(.mf):not(.rx) .mk-pasos { padding: clamp(24px, 4vw, 56px) 12px; }
.mk-panel {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--mk-radio-panel);
  padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 64px);
}
.mk-panel--rojo { background: var(--mk-rojo-tinte); }
.mk-panel--cielo { background: var(--mk-cielo-tinte); }
.mk-pasos__cabeza { max-width: 760px; margin-bottom: clamp(24px, 3.5vw, 44px); }
html body:not(.mf):not(.rx) .mk-pasos__cabeza h2 { font-size: clamp(40px, 5.4vw, 76px) !important; color: var(--mk-ink) !important; margin: 0 0 16px; }
.mk-pasos__bajada { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--mk-ink-2); max-width: 58ch; margin: 0; }
.mk-pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .mk-pasos__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mk-pasos__lista { grid-template-columns: repeat(3, 1fr); } }
.mk-paso {
  position: relative;
  background: var(--mk-card);
  border: 1px solid rgba(21, 20, 19, .06);
  border-radius: var(--mk-radio-card);
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
}
.mk-paso__n {
  font-family: var(--mk-display);
  font-size: 44px;
  line-height: 1;
  color: var(--mk-rojo);
  margin-bottom: 6px;
}
html body:not(.mf):not(.rx) .mk-paso .mk-paso__etapa {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--mk-ink-2);
  text-transform: none; background: none; padding: 0; display: block;
}
html body:not(.mf):not(.rx) .mk-paso .mk-paso__titulo { font-size: 20px !important; margin: 0; color: var(--mk-ink); }
.mk-paso__texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mk-ink-2); }
.mk-paso--accion { background: var(--mk-negro); border-color: transparent; justify-content: flex-end; }
html body:not(.mf):not(.rx) .mk-paso--accion .mk-paso__etapa,
.mk-paso--accion .mk-paso__texto { color: #CFCBC6; }
html body:not(.mf):not(.rx) .mk-paso--accion .mk-paso__titulo { color: #fff; font-family: var(--mk-display) !important; font-weight: 400 !important; text-transform: uppercase !important; font-size: 34px !important; letter-spacing: .004em !important; line-height: 1 !important; }
html body:not(.mf):not(.rx) .mk-paso__cta {
  margin-top: 14px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px !important; font-size: 15px !important;
}
.mk-pasos__dudas { margin: 22px 0 0; font-size: 15px; color: var(--mk-ink-2); }
.mk-pasos__dudas a { color: var(--mk-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Pasada 5 (27-sep): lo que se vio en las capturas de la pasada 4 ===== */

/* Guía de diseño y de tallaje: el brillo del héroe (::before) quedó rojo al 23 % y teñía todo de café. Uno solo, apenas */
html body:not(.mf):not(.rx) .guide-hero::before {
  background: radial-gradient(60% 80% at 100% 0%, rgba(226, 6, 19, .09), transparent 60%) !important;
  opacity: 1 !important;
}

/* Preguntas del inicio: un color por grupo (rojo, rosado, cielo, verde) sobre tarjetas blancas. Ahora una sola familia */
html body:not(.mf):not(.rx) #preguntas-frecuentes .ens-faq__group { --faq-accent: var(--mk-rojo); }
html body:not(.mf):not(.rx) #preguntas-frecuentes .ens-faq__group-label { color: #CFCBC6 !important; }
html body:not(.mf):not(.rx) #preguntas-frecuentes .ens-faq__item {
  border: 0 !important;
  border-radius: var(--mk-radio-card) !important;
  box-shadow: none !important;
}

/* Telas: fotos verticales y horizontales en la misma fila (380 px contra 764 px de alto). Mismo cuadro 4:3 para todas;
   las verticales muestran su parte baja, donde va el rótulo con el nombre de la tela */
html body:not(.mf):not(.rx) .ens-fabric-cards .tl-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  flex: none !important;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: 10px;
  background: #EDEBE8;
}
html body:not(.mf):not(.rx) .ens-fabric-cards .tl-card__media img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center bottom;
}

/* Escala de subtítulos: las fichas de producto usan 52 px (33 en celular). Telas y Alternativas al retail quedaban en
   20–36 px con las clases de Tailwind; se igualan. El rótulo chico de enlaces (text-xl) se queda como está */
html body:not(.mf):not(.rx) main[data-mk-escala] h2:not(.text-xl) { font-size: clamp(33px, 3.6vw, 52px) !important; }

/* Píldora del tema sobre los héroes oscuros (guías, preguntas, fichas): era negra sobre negro y se perdía */
html body:not(.mf):not(.rx) :is(.guide-hero, .faq-hub__hero, .product-landing__hero, .catalog-page-hero--dark) :is(.seo-tema, p.ens-eyebrow, span.ens-eyebrow, [class*="kicker"]):not(.ens-motion-eyebrow) {
  background: #fff !important;
  color: var(--mk-ink) !important;
  -webkit-text-fill-color: var(--mk-ink) !important;
}

/* Catálogo: cuatro precios en una fila de 287 px no caben con la letra mínima de 12 px («Talla 2XL-4XL» se cortaba
   dentro de su caja: el «precios fuera de las cajas»). Dos por fila, rótulo arriba y precio abajo, alineados a la izquierda */
html body:not(.mf):not(.rx) .catalog-size-prices { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
html body:not(.mf):not(.rx) .catalog-size-prices > span { padding: 8px 10px !important; text-align: left !important; min-width: 0; }
html body:not(.mf):not(.rx) .catalog-size-prices > span small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Letra mínima de 12 px (R-TIPO-MIN) que aún faltaba en el celular: rótulos de la tabla comparativa de Alternativas al
   retail (9,9 px) y números de sección de la política de privacidad (10,9 px) */
html body:not(.mf):not(.rx) main div.bg-zinc-100.text-xs,
html body:not(.mf):not(.rx) .section-number { font-size: 12px !important; }

/* web-integrations.css la comparten las landings SEM (deportivo, folclórico), que no se tocan: su recoloreo se revirtió
   y lo de Ensutex va aquí. Aviso de cookies y formulario de Asu en la paleta; texto blanco sobre rojo (AA) */
html body:not(.mf):not(.rx) .ensutex-consent__actions button[data-consent="all"] { background: var(--mk-rojo) !important; border-color: var(--mk-rojo) !important; color: #fff !important; }
html body:not(.mf):not(.rx) .ens-chat-lead label { color: var(--mk-ink-2); }
html body:not(.mf):not(.rx) .ens-chat-lead textarea { border-color: var(--mk-line); color: var(--mk-ink); }
html body:not(.mf):not(.rx) .ens-chat-lead button { background: var(--mk-negro); }
html body:not(.mf):not(.rx) .ens-chat-lead button:hover { background: var(--mk-rojo); color: #fff; }
html body:not(.mf):not(.rx) .ens-chat-lead small { color: var(--mk-rojo); }

/* Alternativas al retail tiene su propio botón y cajón de celular (sin #mobileMenuBtn): quedaban blancos sobre la barra
   clara y el cajón mostraba «Nuestras marcas» con ModoFan (fuga). Igual que en las demás pestañas */
html body:not(.mf):not(.rx) .ensutex-site-nav button[aria-label="Abrir menú"] {
  color: var(--mk-ink) !important; background: #fff !important; border-color: var(--mk-line) !important; border-radius: 999px !important;
}
html body:not(.mf):not(.rx) .ensutex-site-nav button[aria-label="Abrir menú"] .hamburger-bars span { background: var(--mk-ink) !important; }
html body:not(.mf):not(.rx) #mobile-nav-retail {
  background: #fff !important; border: 1px solid var(--mk-line) !important; border-radius: 18px !important;
  margin: 8px 12px !important; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35) !important;
}
html body:not(.mf):not(.rx) #mobile-nav-retail a:not(.rounded-full) { color: var(--mk-ink) !important; background: transparent !important; border-color: var(--mk-line) !important; }
html body:not(.mf):not(.rx) #mobile-nav-retail a.rounded-full { background: var(--mk-ink) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; }
html body:not(.mf):not(.rx) #mobile-nav-retail :is(a[href*="#marcas"], [aria-label="Nuestras marcas"], a[href*="modofan"], a[href*="rebxn"]) { display: none !important; }

/* Héroe de Alternativas al retail (header.bg-zinc-900): brillo rojo al 19 % → el mismo negro limpio de los otros héroes,
   y su etiqueta en píldora blanca (era negra sobre negro) */
html body:not(.mf):not(.rx) main header.bg-zinc-900 {
  background: radial-gradient(70% 90% at 100% 0%, rgba(226, 6, 19, .10), transparent 62%), var(--mk-negro) !important;
}
html body:not(.mf):not(.rx) .bg-zinc-900 :is(span, p):is(.tracking-widest, .tracking-\[0\.3em\], .tracking-\[0\.22em\], .tracking-\[0\.25em\], .seo-tema):not(.absolute) {
  background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important;
}

/* Fuga (cont.): la política de privacidad y los términos enlazaban «Nuestras marcas» (index.html#marcas) en el menú */
html body:not(.mf):not(.rx) :is(.ensutex-nav-menu, .guide-nav__links, #mobileDrawer, #guide-mobile-nav, .guide-nav) a[href$="#marcas"] { display: none !important; }
html body:not(.mf):not(.rx) :is(#guide-mobile-nav, #mobileDrawer, #mobile-nav-retail, .guide-nav__links) .is-pronto { display: none !important; }

/* Alto de la barra: 76, 78 u 80 px según la pestaña (dos plantillas de menú con rellenos distintos). Una sola medida */
@media (min-width: 1024px) {
  html body:not(.mf):not(.rx) :is(nav.ensutex-site-nav, nav.guide-nav) { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
  /* solo el alto: .guide-nav__inner es una grilla (logo+opciones | botón) y no se le cambia el display */
  html body:not(.mf):not(.rx) :is(nav.ensutex-site-nav, nav.guide-nav) > :is(.guide-nav__inner, .max-w-7xl):first-child {
    align-items: center !important; min-height: 78px !important; height: 78px !important;
  }
  html body:not(.mf):not(.rx) nav.ensutex-site-nav > .max-w-7xl:first-child { display: flex !important; }
  /* las guías limitaban la barra a 1280 px: logo y botón quedaban 48 px más adentro que en el resto */
  html body:not(.mf):not(.rx) nav.guide-nav > .guide-nav__inner { max-width: 100% !important; }
  /* al volverse flex, la fila de adentro (logo · opciones · botón) debe seguir ocupando todo el ancho */
  html body:not(.mf):not(.rx) nav.ensutex-site-nav > .max-w-7xl:first-child > div.flex.justify-between { flex: 1 1 auto; min-width: 0; }
}

/* ===== Contraste AA (check-accessibility, 27-sep): lo que el fondo gris nuevo y el recoloreo dejaron bajo 4,5:1 ===== */
/* grises de apoyo: #7b7670 daba 4,24–4,49 sobre blanco y #F9F8F8; #71717a 4,35 sobre la base */
html body:not(.mf):not(.rx) .catalog-size-prices > span small,
html body:not(.mf):not(.rx) main figcaption:not(.catalog-inclusive-visual *):not(.product-landing__price):not(.ens-experience-card *):not(.guide-media-story__media *) { color: var(--mk-ink-2) !important; }
/* rojo sobre negro en letra chica (3,99): el rojo claro de la paleta */
html body:not(.mf):not(.rx) .ens-home-next__link--primary span { color: #FF8A92 !important; }
/* rojo sobre rosado (4,08–4,27): un rojo más hondo */
html body:not(.mf):not(.rx) :is(.pack-fabric-note strong, .journey-assistant) { color: #B3050F !important; }
/* botón rojo con texto negro (3,97): texto blanco */
html body:not(.mf):not(.rx) .journey-control--next,
html body:not(.mf):not(.rx) .journey-control--next > span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* texto oscuro sobre fondo oscuro (1,02–1,04): los enlaces del pie del catálogo (tokens.css pinta todo «nav a») y el
   botón negro del blog */
html body:not(.mf):not(.rx) footer nav:not(.footer-links) a { color: inherit !important; }
html body:not(.mf):not(.rx) .blog-button--primary { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* el botón secundario del blog es una píldora blanca pensada para fondo negro: la regla de secundarios transparentes
   lo dejaba negro sobre negro (1,02) */
html body:not(.mf):not(.rx) main .blog-button--secondary { background: #fff !important; color: var(--mk-ink) !important; border-color: var(--mk-line) !important; }

/* ===== Arreglo urgente (27-sep, tarde): capturas de Carlitos en el celular ===== */

/* Menú del celular: el acordeón «Modelos y precios» seguía oscuro y las opciones salían negras sobre negro (ilegibles).
   Queda claro, como el resto del cajón: base gris, opciones en tarjetas blancas con letra oscura */
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-primary {
  background: #fff !important; color: var(--mk-ink) !important; border: 1px solid var(--mk-line) !important; border-radius: 14px !important;
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-primary * { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-submenu :is(div, section, nav) { background: transparent !important; box-shadow: none !important; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-submenu {
  background: var(--mk-bg) !important; border: 1px solid var(--mk-line) !important; border-radius: 14px !important; padding: 12px !important; box-shadow: none !important;
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-submenu a {
  background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important;
  border: 1px solid var(--mk-line) !important; border-radius: 12px !important; font-weight: 600 !important;
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-submenu :is(p, span)[class*="label"] { color: var(--mk-ink-2) !important; -webkit-text-fill-color: var(--mk-ink-2) !important; }

/* El MISMO defecto de arriba, en el panel de ESCRITORIO (29-sep). El desplegable «Catálogo y precios» es blanco
   (medido: fondo opaco rgb(255,255,255)) y la etiqueta de grupo se quedó con el celeste #87ceeb de ux-refresh.css:27,
   pensado para el cajón oscuro: sobre blanco da 1,74:1 (exige 4,5:1) y está PUBLICADO en ensutex.com — se midió ahí,
   no se dedujo. La regla del 27-sep cubrió `#mobileDrawer` y dejó el panel de escritorio afuera; por eso E-c44476
   seguía vigente. Se le da la misma tinta que ya usa el resto del panel (los enlaces ya salen en --mk-ink-2, 6,83:1)
   y el piso de 12 px de las etiquetas (E02), medido ANTES de tocarlo: la etiqueta más larga pide 136,8 px en 164,2 px
   disponibles, así que no envuelve ni cambia el acomodo aprobado el 27-sep. */
html body:not(.mf):not(.rx) .ensutex-nav-menu .ens-nav-discovery :is(p, span)[class*="label"] {
  color: var(--mk-ink-2) !important; -webkit-text-fill-color: var(--mk-ink-2) !important; font-size: .75rem !important;
}

/* Letra sin sombra (R-TEXTO-CLARO del sello): una capa antigua ponía relieve (sombra blanca + oscura) a los textos de
   secciones claras y sobre la tarjeta negra se veía doble. Ningún texto chico lleva sombra; en el héroe con video,
   una sombra suave que no se nota como borde */
html body:not(.mf):not(.rx) :is(main, footer, #mobileDrawer) :is(p, span, a, li, small, strong, em, b, label, figcaption, dd, dt, td, th, h3, h4, h5, h6, button, summary):not(#hero-section *) { text-shadow: none !important; }
html body:not(.mf):not(.rx) #hero-section :is(p, span, a, small, strong, h1, button) { text-shadow: 0 1px 12px rgba(0, 0, 0, .45) !important; }
/* Botón final del cajón («Ver mi cotización»): rojo con letra blanca en todas las pestañas (en el inicio la palabra
   «cotización» salía roja sobre negro y en el catálogo el texto era negro sobre rojo: bajo 4,5:1) */
html body:not(.mf):not(.rx) #mobileDrawer :is(a, button).shadow-lg[class*="py-3"] {
  background: var(--mk-rojo) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; border-radius: 999px !important;
}
html body:not(.mf):not(.rx) #mobileDrawer :is(a, button).shadow-lg[class*="py-3"] * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* El cajón medía el 100 % más 12 px de margen por lado: se salía 12 px por la derecha de la pantalla */
html body:not(.mf):not(.rx) :is(#mobileDrawer, #guide-mobile-nav, #mobile-nav-retail) {
  width: auto !important; max-width: calc(100vw - 24px) !important; margin-inline: 12px !important; box-sizing: border-box !important;
}
/* Con el menú abierto, Asu se guarda: en el inicio quedaba encima de «Abrir cotizador» (E01, el chat nunca tapa un botón) */
html body:not(.mf):not(.rx):has(#mobileMenuBtn.is-open, .guide-menu[aria-expanded="true"], #mobile-nav-retail:not(.hidden)) .floating-widgets {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-submenu a { justify-content: flex-start !important; text-align: left !important; padding-inline: 14px !important; }
html body:not(.mf):not(.rx) #hero-section.ens-motion-hero--video :is(.ens-motion-link, .ens-motion-link *, .cta-ref, .cta-ref *) { text-shadow: 0 1px 12px rgba(0, 0, 0, .45) !important; }
/* Tarjeta de acción del panel de pasos: sin la sombra, su texto quedaba gris oscuro sobre negro (otra capa lo pisaba) */
html body:not(.mf):not(.rx) #proceso .mk-paso--accion :is(.mk-paso__texto, .mk-paso__etapa) { color: #D9D4CE !important; -webkit-text-fill-color: #D9D4CE !important; opacity: 1 !important; }
/* Menú: el segundo camino es «Packs» a secas (27-sep, Carlitos). Una sola opción destacada, en rojo */
html body:not(.mf):not(.rx) .ens-nav-packs { display: flex !important; align-items: flex-start; }
html body:not(.mf):not(.rx) .ens-nav-packs a {
  display: inline-flex !important; align-items: center; gap: 8px; width: 100%; justify-content: flex-start;
  padding: 12px 14px !important; border-radius: 12px !important; border: 1px solid var(--mk-line) !important;
  background: #fff !important; color: var(--mk-rojo) !important; -webkit-text-fill-color: var(--mk-rojo) !important;
  font-family: var(--mk-body) !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important;
}
html body:not(.mf):not(.rx) .ens-nav-packs a::after { content: "→"; margin-left: auto; }

/* ===== Base nueva (27-sep): degradados de la marca y secciones que suben ===== */

/* Degradados en vez de color plano (Carlitos: «prefiero en vez de un color seco, degradados; se ve más profesional») */
body:not(.mf):not(.rx) {
  --mk-grad-cielo: linear-gradient(155deg, #F2FAFE 0%, #D7EEF8 55%, #BFE3F3 100%);
  --mk-grad-grafito: radial-gradient(90% 120% at 100% 0%, rgba(226, 6, 19, .26), transparent 55%), linear-gradient(160deg, #211F1D 0%, #121110 100%);
  --mk-grad-arena: linear-gradient(160deg, #FBFAF8 0%, #EEE9E2 100%);
}
html body:not(.mf):not(.rx) .mk-panel--cielo { background: var(--mk-grad-cielo) !important; }
html body:not(.mf):not(.rx) .mk-panel--grafito { background: var(--mk-grad-grafito) !important; color: #F4F3F1; }
html body:not(.mf):not(.rx) .mk-panel--arena { background: var(--mk-grad-arena) !important; }

/* Secciones que suben (sube.js): entran desde abajo y crecen apenas al asomar; quietas con movimiento reducido */
html.sube-js body:not(.mf):not(.rx) main .sube:not(.sube--in) {
  opacity: 0 !important;
  transform: translate3d(0, 44px, 0) scale(.97) !important;
}
html.sube-js body:not(.mf):not(.rx) main .sube {
  transform-origin: 50% 0;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.19, 1, .22, 1) !important;
}
html.sube-js body:not(.mf):not(.rx) main .sube.sube--in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.sube-js body:not(.mf):not(.rx) main .sube { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Letra mínima de 12 px que el control Carlitos encontró (27-sep): packs y equipaciones del catálogo, guía de telas,
   números del recorrido de las guías, atajos del inicio e índice de la política de privacidad */
html body:not(.mf):not(.rx) :is(.pack-hint-copy, .pack-hint-copy *, .catalog-equipment__heading span, .equipment-card__price span, .ens-fabric-decision-guide span, .ens-home-next__shortcuts span, nav.toc ol li a) { font-size: 12px !important; }
html body:not(.mf):not(.rx) #packs span.absolute { font-size: 12px !important; }
html body:not(.mf):not(.rx) main ol > li > a > b { font-size: 12px !important; }
html body:not(.mf):not(.rx) footer :is(.text-xs, .text-xs *, .text-\[0\.65rem\], .text-\[10px\]) { font-size: 12px !important; }


/* ===== Inicio · camino interactivo de «Cómo pedir» (27-sep, tarde) =====
   Vuelve el camino (Carlitos lo prefería al panel fijo), arreglado:
   - el encabezado ya no queda fijo encima de las tarjetas (con Anton grande se montaba): se lee primero y se va;
   - recorrido más corto (300vh en vez de 420vh);
   - fondo en degradado cielo con una trama de tela muy suave;
   - el trazo es una costura: un hilo rojo con puntadas que se va cosiendo al bajar y cuyas puntadas corren suave. */
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] {
  --cv-alto: 300vh;
  --cv-escena-fondo: #EAF6FC;
  --cv-textura:
    repeating-linear-gradient(45deg, rgba(21, 20, 19, .022) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(21, 20, 19, .018) 0 2px, transparent 2px 7px),
    var(--mk-grad-cielo);
  --cv-acento: #E20613;
  --cv-acento-2: #E20613;
  --cv-trazo: rgba(21, 20, 19, .28);
  --cv-contador-numero: #FF5A64;
  background: var(--mk-grad-cielo);
}
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-cabeza-ensutex {
  max-width: 60rem; margin-inline: auto; text-align: center; padding-top: clamp(40px, 7vw, 96px);
}
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-cabeza-ensutex h2 { font-size: clamp(40px, 5.6vw, 80px) !important; margin: 14px 0 16px; color: var(--mk-ink) !important; }
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-cabeza-ensutex__bajada { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--mk-ink-2); max-width: 44rem; margin: 0 auto; }
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-cabeza-ensutex__bajada strong { color: var(--mk-ink); font-weight: 700; }
/* el encabezado NO se ancla en Ensutex: nunca queda encima de las estaciones */
html.cv-listo body:not(.mf):not(.rx) [data-cv-marca="ensutex"] [data-cv-cabeza] { position: static !important; max-width: 60rem !important; margin-inline: auto !important; text-align: center !important; }
html.cv-listo body:not(.mf):not(.rx) [data-cv-marca="ensutex"] [data-cv-cabeza] > p { margin-inline: auto !important; }
@media (min-width: 1024px) {
  html.cv-listo body:not(.mf):not(.rx) [data-cv-marca="ensutex"] { --cv-techo: 96px; --cv-banda-arriba: 120px; --cv-banda-abajo: 56px; }
}
/* 29-sep (E2 · Carlitos): el camino de Ensutex quedó en 3 estaciones —prenda, tela y lo que falta—.
   El motor reparte la pista en tercios (cada estación = 1/3 del ancho de la pista), así que con tres
   tarjetas la banda medía exactamente una pantalla: no había recorrido horizontal y las tres se
   veían apretadas contra los bordes. Con 36vw por estación la pista mide 108vw —sigue corriendo— y
   cada tarjeta conserva sus 420px de diseño. Es solo de Ensutex: ModoFan y REBXN siguen con 5. */
@media (min-width: 1024px) {
  html.cv-listo body:not(.mf):not(.rx) [data-cv-marca="ensutex"] { --cv-paso: 36vw; }
}
/* la costura: el hilo (línea fina) y las puntadas encima, las dos enmascaradas por el trazo que dibuja el motor */
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv__camino--mascara { stroke: #fff !important; stroke-width: 10px !important; fill: none; filter: none !important; }
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv__hilo { fill: none; stroke: rgba(226, 6, 19, .28); stroke-width: 2px; stroke-linecap: round; }
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv__puntada {
  fill: none; stroke: #E20613; stroke-width: 3.5px; stroke-linecap: round; stroke-dasharray: 10 8;
  filter: drop-shadow(0 1px 1.5px rgba(120, 0, 8, .35));
  animation: cv-puntadas 1.8s linear infinite;
}
@keyframes cv-puntadas { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv__puntada { animation: none; } }
/* tarjetas: letra de la marca y títulos-respuesta legibles (H3 en Archivo) */
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__cuerpo { background: #fff; border: 1px solid var(--mk-line); box-shadow: 0 18px 40px -18px rgba(21, 20, 19, .28); }
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__titulo { font-family: var(--mk-body) !important; font-size: 19px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -.01em !important; }
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__texto { font-size: 15px; }
/* 29-sep (E2 · Carlitos): cada decisión del camino tiene su salida —«Precios y modelos», «Ver las
   telas», las dos guías y la cotización—, al pie de la tarjeta y separada por una línea. La letra
   va con --mk-rojo-texto (letra chica sobre claro: 6,2:1), no con el rojo de marca, que a 13px da
   4,4:1; así el único relleno rojo de la sección sigue siendo el CTA de la última estación. */
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__enlaces {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--mk-line);
  font-family: var(--mk-body); font-size: 13px; line-height: 1.45;
}
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__enlaces a {
  color: var(--mk-rojo-texto); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__enlaces a:hover { color: var(--mk-rojo); }
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__enlaces a:focus-visible { outline: 3px solid #87CEEB; outline-offset: 2px; }
/* En celular, en la última estación los enlaces de las guías van POR ENCIMA del CTA (y no debajo):
   el recorrido termina 186px antes del final de la pista, así que lo que quede bajo el nodo —donde
   se posa Asu— empuja al avatar fuera de la pantalla. Con la fila de guías debajo, Asu quedaba
   39px sobre el borde de arriba; arriba del CTA vuelve a verse entera, como en las otras portadas.
   Es solo el orden visual: el marcado no se toca, así que el CTA sigue siendo el primer enlace de
   la tarjeta (lo fija scripts/verificar-camino-vivo.cjs) y en escritorio todo queda igual. */
@media (max-width: 1023px) {
  html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion--cierre .cv-estacion__cuerpo { display: flex; flex-direction: column; }
  html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion--cierre .cv-estacion__enlaces { order: 1; }
  html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion--cierre .ens-process__cta { order: 2; }
  html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion--cierre .cta-ref { order: 3; }
}
/* celular: el marcador de dudas queda bajo el menú fijo (antes se escondía detrás) */
@media (max-width: 1023px) {
  html.cv-listo body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv__contador { top: calc(64px + .75rem) !important; }
}
/* camino: rótulo de contexto arriba a la izquierda mientras la escena está anclada (el título ya se fue) */
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv__rotulo { display: none; }
@media (min-width: 1024px) {
  html.cv-listo body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv__rotulo {
    display: flex; align-items: center; gap: 12px; position: absolute; top: 96px; left: clamp(24px, 4vw, 64px); z-index: 5;
    margin: 0; font-family: var(--mk-body); font-size: 17px; font-weight: 600; color: var(--mk-ink);
  }
  /* las estaciones de los costados: se ven y se leen (antes .5 volvía gris el globo de Asu) */
  html.cv-listo body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion:not(.cv-estacion--foco) .cv-estacion__cuerpo { opacity: .72 !important; }
}

/* ===== Asu se presenta (27-sep, tarde): una vez, al aceptar las cookies ===== */
html body:not(.mf):not(.rx) .asu-presenta {
  position: fixed; z-index: 70; right: 24px; bottom: 112px; width: min(360px, calc(100vw - 24px));
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  padding: 18px 44px 18px 18px; border-radius: 18px;
  background: var(--mk-grad-grafito); color: #F4F3F1; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55);
  font-family: var(--mk-body); animation: asu-presenta-entra .45s cubic-bezier(.22, 1, .36, 1) both;
}
html body:not(.mf):not(.rx) .asu-presenta.is-saliendo { animation: asu-presenta-sale .24s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes asu-presenta-entra { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes asu-presenta-sale { to { opacity: 0; transform: translate3d(0, 10px, 0); } }
html body:not(.mf):not(.rx) .asu-presenta__icono { width: 52px; height: 52px; display: block; }
html body:not(.mf):not(.rx) .asu-presenta__icono svg { width: 100%; height: 100%; display: block; }
html body:not(.mf):not(.rx) .asu-presenta__titulo { margin: 2px 0 4px; font-size: 17px; font-weight: 700; color: #fff; }
html body:not(.mf):not(.rx) .asu-presenta__texto { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #D9D4CE; }
html body:not(.mf):not(.rx) .asu-presenta__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
html body:not(.mf):not(.rx) .asu-presenta__acciones button {
  min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  background: transparent; color: #fff; font: 600 14px var(--mk-body); cursor: pointer;
}
html body:not(.mf):not(.rx) .asu-presenta__acciones .asu-presenta__primario { background: var(--mk-rojo); border-color: var(--mk-rojo); }
html body:not(.mf):not(.rx) .asu-presenta__acciones button:focus-visible,
html body:not(.mf):not(.rx) .asu-presenta__cerrar:focus-visible { outline: 3px solid #87CEEB; outline-offset: 2px; }
html body:not(.mf):not(.rx) .asu-presenta__cerrar {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: transparent; color: #CFCBC6; font-size: 24px; line-height: 1; cursor: pointer;
}
html.asu-presentando body:not(.mf):not(.rx) .floating-widgets { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
@media (max-width: 767px) {
  html body:not(.mf):not(.rx) .asu-presenta { right: 12px; left: 12px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 40px 12px 12px; border-radius: 14px; }
  /* 03-oct · en celular la presentación de Asu mide ~130 px (antes ~190): tapa menos de lo que se lee */
  html body:not(.mf):not(.rx) .asu-presenta__icono { width: 40px; height: 40px; }
  html body:not(.mf):not(.rx) .asu-presenta__titulo { font-size: 15px; margin: 0 0 2px; }
  html body:not(.mf):not(.rx) .asu-presenta__texto { font-size: 13px; line-height: 1.4; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html body:not(.mf):not(.rx) .asu-presenta__acciones button { min-height: 44px; font-size: 13px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html body:not(.mf):not(.rx) .asu-presenta, html body:not(.mf):not(.rx) .asu-presenta.is-saliendo { animation: none; }
}
/* camino: una regla vieja (ensutex-visual-system: «#proceso p» en gris #3f3f46, con fuerza de id) pintaba de gris
   también el globo de Asu y, en celular, la píldora de dudas: gris sobre negro, 1,9:1, no se leía. Cada texto con el
   color de su fondo. */
html body:not(.mf):not(.rx) #proceso[data-cv-marca="ensutex"] p { color: var(--mk-ink-2) !important; }
html body:not(.mf):not(.rx) #proceso[data-cv-marca="ensutex"] p.cv__rotulo { color: var(--mk-ink) !important; }
html body:not(.mf):not(.rx) #proceso[data-cv-marca="ensutex"] .cv-estacion__globo { color: #F4F3F1 !important; }
@media (max-width: 1023px) {
  html.cv-listo body:not(.mf):not(.rx) #proceso[data-cv-marca="ensutex"] .cv__contador { color: var(--cv-contador-pildora) !important; }
}
/* camino: la frase bajo el botón de la última estación es para fondo oscuro; en la tarjeta blanca iba casi invisible */
html body:not(.mf):not(.rx) [data-cv-marca="ensutex"] .cv-estacion__cuerpo .cta-ref { color: var(--mk-ink-2) !important; -webkit-text-fill-color: var(--mk-ink-2) !important; text-shadow: none !important; }

/* ===== Contraste medido por el control Carlitos (27-sep, noche): cada texto contra el fondo que tiene detrás =====
   La regla de arriba («todo figcaption en gris») alcanzaba leyendas que van sobre negro: el precio de las páginas de
   producto («Desde $18.500», 2,8:1), las tarjetas de experiencia de Preguntas y la leyenda de la guía en celular.
   Esas quedan fuera; lo demás, con el rojo o el gris que se leen sobre su fondo. */
html body:not(.mf):not(.rx) main .product-landing__price strong,
html body:not(.mf):not(.rx) main .ens-experience-card figcaption strong { color: #fff !important; }
html body:not(.mf):not(.rx) main .guide-media-story__media figcaption { color: #F4F3F1 !important; }
/* números rojos en letra chica sobre claro: pasos del cierre del inicio, píldoras de los packs y contador del camino */
html body:not(.mf):not(.rx) #cierre-equipo .ens-home-close__steps span,
html body:not(.mf):not(.rx) #packs .pack-meta span { color: var(--mk-rojo-texto) !important; }
@media (min-width: 1024px) {
  html.cv-listo body:not(.mf):not(.rx) #proceso[data-cv-marca="ensutex"] .cv__contador b { color: var(--mk-rojo-texto) !important; }
}
/* recorrido de las guías (tarjeta negra): número en rojo claro y, en el paso activo, blanco sobre el rojo */
html body:not(.mf):not(.rx) .journey-shell .guide-hero__card li a b { color: var(--mk-rojo-claro) !important; }
html body:not(.mf):not(.rx) .journey-shell .guide-hero__card li a.is-active b { color: #fff !important; }
/* gris de apoyo del comparativo (#71717a daba 4,36:1 sobre la base) */
html body:not(.mf):not(.rx) main p.text-zinc-500 { color: var(--mk-ink-2) !important; }
/* blog: rótulos que quedaban bajo 12 px (10,2–11,7 px): etiqueta y pie de las tarjetas, índice, «Respuesta rápida»
   y encabezados de las tablas en celular */
html body:not(.mf):not(.rx) main :is(.blog-card__label, .blog-card__footer span, .article-toc > strong, .article-answer > span, table th) { font-size: 12px !important; }

/* ===== Celular: Asu se sienta en la barra de abajo (27-sep, noche) =====
   Flotando a la derecha tapaba el final de las líneas de texto al bajar. En la barra toma el lugar del botón de
   catálogo, que repetía el destino del botón rojo: quedan dos acciones, preguntarle a Asu o cotizar. Cuando Asu se
   levanta para acompañar a un botón (asu-junto) o se guarda en el camino, que trae su propio Asu (asu-fuera), el botón
   rojo ocupa su lugar con un deslizamiento corto; al volver, se lo devuelve. Por ahora solo en el inicio: la barra del
   catálogo se rehace en su fase. */
@media (max-width: 767px) {
  html body.ensutex-home:not(.mf):not(.rx) #sticky-cta-mobile .mobile-quick-link { display: none !important; }
  html body.ensutex-home:not(.mf):not(.rx) #sticky-cta-mobile { transition: padding-left .32s var(--mk-curva); }
  html:not(.asu-presentando) body.ensutex-home:not(.mf):not(.rx):has(.floating-widgets.asu-acompana:not(.asu-fuera):not(.asu-junto)) #sticky-cta-mobile.is-visible { padding-left: 74px !important; }
  html body.ensutex-home:not(.mf):not(.rx):has(#sticky-cta-mobile.is-visible) .floating-widgets.asu-acompana:not(.asu-fuera) {
    right: auto !important; left: 12px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.ensutex-home:not(.mf):not(.rx):has(#sticky-cta-mobile.is-visible) .floating-widgets.asu-acompana:not(.asu-fuera):not(.asu-junto) #chatbot-cta { display: none !important; }
  /* en la portada no hay barra: Asu llega con ella (flotando quedaba encima de «Ver cómo funciona» y competía con el
     botón principal de la escena) */
  html body.ensutex-home:not(.mf):not(.rx):not(:has(#sticky-cta-mobile.is-visible)) .floating-widgets.asu-acompana { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html body.ensutex-home:not(.mf):not(.rx) #sticky-cta-mobile { transition: none; }
}
/* Celular: la presentación de Asu, compacta (tapaba un tercio de la pantalla): ícono y texto arriba, botones en una fila */
@media (max-width: 767px) {
  html body:not(.mf):not(.rx) .asu-presenta { grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 14px 44px 14px 14px; border-radius: 16px; }
  html body:not(.mf):not(.rx) .asu-presenta__icono { width: 40px; height: 40px; }
  html body:not(.mf):not(.rx) .asu-presenta__cuerpo { display: contents; }
  html body:not(.mf):not(.rx) .asu-presenta__titulo { grid-column: 2; margin: 0; font-size: 16px; }
  html body:not(.mf):not(.rx) .asu-presenta__texto { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.45; }
  html body:not(.mf):not(.rx) .asu-presenta__acciones { grid-column: 1 / -1; margin-right: -30px; margin-top: 8px; flex-wrap: nowrap; }
  html body:not(.mf):not(.rx) .asu-presenta__acciones button { flex: 1 1 auto; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
}

/* 04-oct: movimiento reducido, de verdad.
   El encargo pide respetar `prefers-reduced-motion` siempre. Con esa preferencia las animaciones
   ya se apagaban (medido: 100 %), pero SOBREVIVÍAN 40 transiciones que desplazan cosas —5 en el
   inicio y 35 en el catálogo, contadas sobre el sitio publicado— y una transición que mueve el
   contenido molesta igual que una animación a quien pide precisamente que nada se mueva.
   Aquí se conservan los fundidos (opacidad, color, sombra, trazo) y se anulan los desplazamientos:
   ninguna propiedad de posición, tamaño ni giro llega a transicionar. */
@media (prefers-reduced-motion: reduce) {
  html body:not(.mf):not(.rx) *,
  html body:not(.mf):not(.rx) *::before,
  html body:not(.mf):not(.rx) *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Lámina flotante (04-oct). Carlitos: «las secciones con fondo negro… me gustaría que las secciones
   estuvieran en una lámina flotante que cuando scrolleamos aparezca desde abajo». El SUBIR ya existe
   desde el 27-sep (sube.js: 44 px desde abajo, en todas las pestañas); esto le da el LOOK que faltaba:
   la sección oscura se despega de los bordes y se lee como una lámina apoyada sobre el papel, en vez
   de un bloque de borde a borde. Se aplica a las secciones oscuras de primer nivel de cualquier
   pestaña, salvo el héroe —que abre la página a sangre— y los intersticiales ocultos. */
html body:not(.mf):not(.rx) main > section[data-scene="dark"]:not(#hero-section):not(.ens-logo-break):not([hidden]) {
  border-radius: clamp(18px, 2.2vw, 34px);
  margin-inline: clamp(0px, 1.7vw, 30px);
  overflow: clip;
}


/* Source: catalogo-un-camino.css */
/* ============================================================================
   Catálogo · un solo camino (fase 2, 27-sep-2026)
   Pedido de Carlitos: dos caminos y chao («Precios y modelos» y «Packs»), el fondo
   exactamente igual al del video de la polera negra con fucsia —desde el 29-sep ese
   «igual» se consigue al revés: el video toma el gris del héroe, no el héroe el blanco
   del video (ver el bloque del héroe más abajo)—, productos sobre
   negro, el cotizador dentro del camino (no una sección aparte al final) y el
   celular igual que el escritorio.
   Carga después de marca.css; los selectores llevan `html body` porque
   catalog-premium-v2.css fuerza varias reglas con !important.
   ============================================================================ */

/* ---------- Héroe: negro de marca, copys blancos (02-oct) ---------- */
/* 02-oct · Carlitos: «el fondo del hero del catálogo quiero que sea negro (por ende los copys blancos) y que el
   video siga cortado solo la polera [...] El fondo gris no me gusta.» Esto deja SUPERADOS el gris medio del 29-sep
   (#A4A1A6, que venía cocido en v4-giro-gris) y el pedido anterior de dejar el héroe del color del video: ya no hay
   video —la prenda es un giro de cuadros con transparencia (assets/css/giro-catalogo.css)— y el fondo es el negro
   de las escenas oscuras de marca.css (--mk-negro, #141312), que es el que se usa aquí: uno solo para el héroe y
   para la prenda, así que no hay caja ni halo posibles (los cuadros son transparentes).
   Contraste medido: H1 y bajada #FFFFFF sobre #141312 = 18,3:1. La geometría del héroe (encuadre, ventana de la
   prenda, tramo fijo) vive en giro-catalogo.css. */
:root { --cat-heroe-negro: var(--mk-negro, #141312); }
html body .catalog-page-hero.catalog-page-hero--claro.cat-heroe {
  background: var(--cat-heroe-negro) !important;
}
/* 29-sep: .catalog-page-hero__layout trae de Tailwind la pareja `position: relative` + `z-index: 10`; se desarma el
   grupo de apilamiento (ya sin mix-blend-mode que cuidar, se conserva por haberse medido inofensiva). */
html body .cat-heroe .catalog-page-hero__layout { z-index: auto; }

/* Título y bajada: Hussar Bold y Jost por token, blancos. Hussar es ancha y trae un solo grosor: 400 y nunca negrita. */
/* marca.css fija el H1 con :is(#mk-x, main) (cuenta como un id): este selector lo supera a propósito */
html body:not(.mf):not(.rx)[data-ens-page="catalog"] main .cat-heroe h1#catalogo-titulo {
  font-family: var(--mk-display) !important; font-weight: 400 !important; text-transform: uppercase;
  font-size: clamp(2.25rem, 4.9vw, 4.5rem) !important; line-height: 1.08 !important; letter-spacing: 0 !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff; text-wrap: balance; margin: 0 0 22px !important;
}
/* catalog-premium-v2.css (celular) pinta la bajada de #2A2724 con body[data-ens-page] + 3 clases: este selector la supera */
html body[data-ens-page="catalog"] .cat-heroe .catalog-page-hero__copy > p {
  margin: 0 !important; max-width: 31rem; font-family: var(--mk-body); font-size: clamp(1rem, 1.3vw, 1.1875rem) !important;
  font-weight: 400; line-height: 1.5 !important; color: #ffffff !important;
}
html body[data-ens-page="catalog"] .cat-heroe .catalog-page-hero__copy > p strong { color: #ffffff !important; font-weight: 700; }

/* El tema buscable, primera línea del H1 (patrón seo-tema): píldora clara con punto rojo, sobre el negro */
html body .cat-heroe h1 .seo-tema {
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%;
  margin: 0 0 16px; padding: 7px 14px; border-radius: 999px;
  background: #F4F3F1 !important; color: var(--mk-ink, #151413) !important; -webkit-text-fill-color: var(--mk-ink, #151413);
  font-family: var(--mk-body); font-size: 13px; font-weight: 600; font-style: normal;
  letter-spacing: .01em; line-height: 1.3; text-transform: none;
}
html body .cat-heroe .cat-heroe__punto { width: 8px; height: 8px; border-radius: 50%; background: #E20613; flex: none; }
@media (max-width: 1023px) {
  html body .cat-heroe h1 .seo-tema { margin: 0 auto 10px; }
  /* Hussar es ancha: a 360 px «ELIGE LO QUE» ocupa 7,3 em; 33 px lo deja en 3 líneas holgadas sin cortar palabras */
  html body:not(.mf):not(.rx)[data-ens-page="catalog"] main .cat-heroe h1#catalogo-titulo { font-size: clamp(2rem, 9.2vw, 2.5rem) !important; margin-bottom: 0 !important; text-align: center; }
}

/* Las dos puertas, sobre el negro del héroe: la principal en rojo de marca (el único acento de la pantalla), la otra en
   blanco. Iguales en peso visual y de 44 px o más de alto. Siempre dos columnas (también a 360 px: caben, y juntas
   quedan en la zona del pulgar). */
html body .cat-puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 33rem; }
html body .cat-puerta {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left;
  min-height: 72px; padding: 12px 16px; border-radius: 18px;
  border: 1.5px solid transparent; background: #ffffff; color: var(--mk-ink, #151413);
  text-decoration: none; transition: background-color .18s ease, transform .18s ease;
}
html body .cat-puerta--principal { background: #E20613; border-color: #E20613; color: #ffffff; }
html body .cat-puerta__nombre { grid-column: 1; font-family: var(--mk-body); font-size: 17px; font-weight: 700; line-height: 1.2; }
html body .cat-puerta__nota { grid-column: 1; font-family: var(--mk-body); font-size: 14px; line-height: 1.3; color: var(--mk-ink-2, #5E5A56); }
html body .cat-puerta--principal .cat-puerta__nota { color: #ffffff; }
html body .cat-puerta__flecha { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; transition: transform .18s ease; }
html body .cat-puerta:hover { background: #ffffff; }
html body .cat-puerta--principal:hover { background: #B8000E; border-color: #B8000E; }
html body .cat-puerta:hover .cat-puerta__flecha { transform: translateX(3px); }
html body .cat-puerta:focus-visible { outline: 3px solid #87CEEB; outline-offset: 3px; }
@media (max-width: 1023px) { html body .cat-puertas { margin: 14px auto 0; max-width: 34rem; } }
@media (max-width: 767px) {
  html body .cat-puerta { padding: 10px 12px; min-height: 64px; gap: 1px 8px; grid-template-columns: 1fr; }
  html body .cat-puerta__nombre { font-size: 15px; }
  html body .cat-puerta__nota { font-size: 13px; }
  html body .cat-puerta__flecha { display: none; }    /* en dos columnas de 165 px la flecha le quita el renglón al nombre */
}
@media (prefers-reduced-motion: reduce) {
  html body .cat-puerta, html body .cat-puerta__flecha { transition: none; }
}

/* ---------- El aviso de privacidad y la tarjeta «Precios y modelos» (04-oct) ---------- */
/* El problema, desde el 04-oct a la mañana: en la primera visita el aviso (position: fixed, abajo, 177 px de alto
   a 390×844 y 194 px a 360×640) tapaba la tarjeta «Precios y modelos» —la que inicia la compra— y el visitante la
   tocaba sin que pasara nada. El parche de entonces le restaba su alto a la prenda (`--giro-alto: 57svh - offset`),
   porque la columna apilada era título → prenda → puertas → bajada y la prenda era lo único elástico: al encogerla
   subían las puertas con ella.
   04-oct · Ese parche dejó de servir y se retira. El orden en celular pasó a título → bajada → puertas → prenda
   (ver giro-catalogo.css), así que las puertas ya NO se mueven con la prenda: encogerla sólo achicaba el producto
   sin mover nada. Medido antes de retirarlo, con el aviso arriba: la prenda caía a 288 px a 390 (contra 481 de su
   tamaño real) y a 91 px a 360, y el aviso seguía tapando la tarjeta 15 px a 360×640. O sea: pagábamos producto
   chico y el problema seguía. Ahora la prenda conserva sus 57svh siempre (Carlitos ya había pedido que no se
   achicara) y las puertas quedan por encima del aviso por construcción, no por encogimiento.
   Lo único que queda es la pantalla baja: a 360×640 el aviso ocupa el 30 % de la pantalla. Se aprieta el ritmo
   vertical del héroe SÓLO mientras el aviso está arriba —el interruptor es el propio `--ensutex-consent-offset`
   dentro de un `min()`, el mismo recurso que usaba el parche viejo: con el consentimiento ya decidido vale 0 y
   todo vuelve a su sitio—, sin tocar un solo tamaño de letra y sin bajar de los 44 px de área táctil. Se ganan
   unos 30 px medidos: 12 del margen sobre las puertas, 8 del aire bajo la píldora del tema, 8 del relleno de las
   tarjetas y 2 del relleno de arriba del héroe. Comprobado en navegador con el aviso arriba: la tarjeta queda
   15 px por encima de su borde a 360×640 y 55 px a 375×667 (antes la tapaba por 15 px).
   Una sola pieza de este bloque NO se apaga con el consentimiento, y es a propósito: el interlineado de la bajada
   (1,5 → 1,4) queda fijo en pantallas de 700 px de alto o menos. Aprieta cuatro renglones de texto corrido sin
   cambiar el tamaño de letra, y en una pantalla baja el aire de más es justo lo que empuja lo accionable fuera de
   vista. Se puede revertir borrando esa línea.
   Los números de reposo (píldora 18, puertas 14, relleno 10) no son invento: se midieron con el consentimiento
   ya decidido en las cuatro pantallas, y son idénticos a los de antes de este arreglo. */
@media (max-width: 1023px) and (max-height: 700px) {
  /* con el aviso arriba (offset > 0) el relleno de arriba del héroe se aprieta 2 px; con el consentimiento
     ya decidido, offset = 0 y el min() devuelve 0: no cambia nada */
  html body #catalogo-hero.cat-heroe {
    padding-top: calc(var(--cat-nav) + 4px - min(2px, var(--ensutex-consent-offset, 0px))) !important;
  }
  html body #catalogo-hero.cat-heroe .catalog-page-hero__copy > p { line-height: 1.4 !important; }
  /* la píldora del tema cede aire abajo sólo con el aviso arriba. El reposo tiene que valer 18 px exactos,
     que es lo que manda marca.css con !important (`main :is(h1,h2) .seo-tema { margin-bottom: 18px !important }`):
     por eso el cálculo arranca en 18 y no en 10 —el `10px` de este mismo archivo nunca llegó a pintarse—. */
  html body #catalogo-hero.cat-heroe h1 .seo-tema {
    margin-bottom: calc(18px - min(8px, var(--ensutex-consent-offset, 0px))) !important;
  }
  html body #catalogo-hero.cat-heroe .cat-puertas {
    margin-top: calc(14px - min(12px, var(--ensutex-consent-offset, 0px)));
  }
  html body #catalogo-hero.cat-heroe .cat-puerta {
    padding-top: calc(10px - min(4px, var(--ensutex-consent-offset, 0px)));
    padding-bottom: calc(10px - min(4px, var(--ensutex-consent-offset, 0px)));
  }
}

/* ---------- Packs: las equipaciones dentro, como un grupo más ---------- */
html body #promociones .cat-equipaciones { margin-top: 56px; }
html body #promociones .cat-subgrupo {
  margin: 0 0 18px; font-family: var(--mk-body, 'Archivo', system-ui, sans-serif); font-size: 15px; font-weight: 700;
  color: var(--mk-ink, #151413); letter-spacing: .01em;
}

/* ---------- Panel «Tu cotización» ---------- */
/* 2-oct · Encargo 05, D1: el panel era una «pestaña gigante» (medía 844px = la pantalla
   completa en celular). Ahora es una hoja inferior en los dos anchos: anclada abajo, con la
   altura de su contenido y techo del 88% de la pantalla, esquinas de arriba redondeadas y
   640px de ancho máximo en escritorio. La cabecera (asa + título) queda pegajosa arriba
   porque la caja es una columna flex con `min-height: 0`: el cuerpo se encoge y el que
   scrollea es la lista de pantallas del camino, no la hoja. El catálogo se sigue viendo
   detrás, oscurecido: el cliente no pierde el hilo de dónde venía. */
html body .cotiza-panel,
html body #contacto.cotiza-panel {
  position: fixed; z-index: 1200; top: auto; right: auto; bottom: 0; left: 50%;
  width: min(640px, 100vw); height: auto; max-height: 88dvh; margin: 0; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--mk-base, #F4F3F1); color: var(--mk-ink, #151413);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -28px 70px -24px rgba(0, 0, 0, .5);
  /* El deslizamiento y el centrado van por `translate`, no por `transform`: catalog-premium-v2.css
     trae `body[data-ens-page="catalog"] :is(…, #contacto) { transform: none !important }` para las
     viejas escenas de cine, y el panel también es `#contacto`. Con `transform` el `!important` le
     ganaba: el panel quedaba sin el −50% (corrido a la derecha, y 128px fuera de pantalla a 1024px).
     `translate` es una propiedad aparte, esa regla no la toca y no hace falta ningún `!important`. */
  translate: -50% 104%;
  transition: translate .32s cubic-bezier(.22, 1, .36, 1);
  overscroll-behavior: contain;
}
html body .cotiza-panel[hidden] { display: none !important; }
html body .cotiza-panel.is-open, html body #contacto.cotiza-panel.is-open { translate: -50% 0; }
html body .cotiza-fondo {
  position: fixed; inset: 0; z-index: 1190; background: rgba(13, 12, 11, .5);
  opacity: 0; transition: opacity .32s ease;
}
html body .cotiza-fondo.is-open { opacity: 1; }
html body .cotiza-fondo[hidden] { display: none; }
/* `flex: 1 1 auto` en vez de `height: 100%`: con el techo de 88dvh la hoja se encoge por
   flexbox (que sí sabe bajar de su alto de contenido con `min-height: 0`) y el cuerpo, al
   quedarse sin alto, deja de scrollear. Con `height: 100%` el porcentaje no resolvía contra
   un padre de alto automático y el contenido de abajo quedaba inalcanzable. */
html body .cotiza-panel__caja { display: flex; flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; max-width: none; margin: 0; padding: 0; }
html body .cotiza-panel__cabeza {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 20px 28px 16px; background: #ffffff; border-bottom: 1px solid var(--mk-line, #E7E4E0);
}
html body .cotiza-panel__asa { display: none; }
/* 2-oct · D2: el título medía 34px y, con el `clamp(2.4rem, 4.5vw, 4.5rem) !important` que
   le llegaba de catalog-premium-v2.css (la antigua sección de contacto se llamaba #contacto,
   igual que el panel), se comía la primera pantalla. 1.75rem entra en el techo de 2rem del
   encargo y deja ver el primer modelo sin scrollear. */
html body .cotiza-panel__titulo {
  margin: 0; font-family: var(--mk-display, 'Hussar Bold', sans-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.05;
  letter-spacing: .005em; text-transform: uppercase; color: var(--mk-ink, #151413);
}
/* La bajada va en una sola línea: el texto lo dice en 39 caracteres (también el que
   reescribe camino-ensutex.js) y, como mucho, es un dato secundario de 14px. */
html body .cotiza-panel__bajada { margin: 3px 0 0; font-size: .875rem; line-height: 1.4; color: var(--mk-ink-2, #5E5A56); }
html body .cotiza-panel__cerrar {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--mk-line, #E7E4E0); background: #ffffff;
  color: var(--mk-ink, #151413); font-size: 26px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
html body .cotiza-panel__cerrar:hover { border-color: var(--mk-ink, #151413); }
html body .cotiza-panel__cerrar:focus-visible { outline: 3px solid #87CEEB; outline-offset: 2px; }
html body .cotiza-panel__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 28px 32px; }
/* adentro no hay márgenes de sección: el camino ocupa el panel */
html body .cotiza-panel .camino-ensutex__layout { margin: 0 !important; }
/* modo compacto: solo las prendas elegidas, más «Agregar o cambiar modelo» */
html body .cotiza-panel--compacto [data-camino-prendas] .camino-prenda:has(input:not(:checked)) { display: none !important; }
html body .cotiza-panel__mas-modelos {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 12px 0 4px; padding: 0 18px;
  border-radius: 999px; border: 1.5px dashed rgba(21, 20, 19, .3); background: transparent;
  color: var(--mk-ink, #151413); font: 600 14.5px var(--mk-body, 'Archivo', system-ui, sans-serif); cursor: pointer;
}
html body .cotiza-panel__mas-modelos:hover { border-style: solid; border-color: var(--mk-ink, #151413); }
html body .cotiza-panel__mas-modelos[hidden] { display: none; }
/* mientras el panel está abierto no hay nada más encima: barra de abajo, resumen fijo, Asu flotante, su presentación */
html.cotiza-abierta body #sticky-cta-mobile,
html.cotiza-abierta body .qc-summary-bar,
html.cotiza-abierta body .floating-widgets,
html.cotiza-abierta body .asu-presenta,
html.cotiza-abierta body .guia-deslizar { display: none !important; }

@media (max-width: 767px) {
  html body .cotiza-panel,
  html body #contacto.cotiza-panel {
    left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 88dvh;
    border-radius: 22px 22px 0 0; box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .5);
    translate: 0 104%;
  }
  html body .cotiza-panel.is-open, html body #contacto.cotiza-panel.is-open { translate: 0 0; }
  html body .cotiza-panel__cabeza { padding: 8px 16px 10px; border-radius: 22px 22px 0 0; }
  html body .cotiza-panel__asa { display: block; grid-column: 1 / -1; justify-self: center; width: 44px; height: 5px; border-radius: 99px; background: rgba(21, 20, 19, .18); margin-bottom: 6px; }
  html body .cotiza-panel__titulo { font-size: 1.75rem; }
  html body .cotiza-panel__bajada { font-size: .875rem; }
  html body .cotiza-panel__cuerpo { padding: 12px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .cotiza-panel, html body .cotiza-fondo { transition: none; }
}

/* catalog-premium-v2.css le pone a #contacto padding de sección y ancho de página (con id e !important): el panel
   manda con el mismo peso */
html body #contacto.cotiza-panel { padding: 0 !important; background: var(--mk-base, #F4F3F1) !important; }
html body #contacto.cotiza-panel > .cotiza-panel__caja { max-width: none !important; gap: 0 !important; align-items: stretch !important; }
/* el aviso flotante «Tu cotización · Paso 2 de 3 · Ahora define la tela» era del cotizador de la página: ahora los
   pasos viven en el panel y el resumen fijo (qc-summary-bar) abre el panel */
html body #catalog-next-step { display: none !important; }
/* las equipaciones se diseñaron para una sección negra: dentro de Packs (fondo claro) son tarjetas negras propias,
   con su texto claro de siempre (antes el nombre y el precio quedaban blanco sobre blanco) */
html body #promociones .equipment-card { background: #0d0c0b !important; border-color: rgba(255, 255, 255, .08) !important; border-radius: 24px; overflow: hidden; }
html body #promociones .equipment-card__body { background: #0d0c0b; }
/* catalogo.css centra todos los títulos en celular (con !important): el del panel va a la izquierda, con su bajada */
html body #contacto .cotiza-panel__titulo { text-align: left !important; }
/* el Asu del trazo nace a la izquierda de la primera pestaña: dentro del panel se le da aire para que no toque el borde */
html body .cotiza-panel [data-camino-root] { padding-left: 18px; }

/* ---------- Celular: Asu sentado en la barra de abajo, como en el inicio ---------- */
/* El botón de la izquierda (grilla) llevaba a #cotizador-express, que ahora es el mismo panel que «Ver mi cotización»:
   su lugar es de Asu. En la portada (sin barra) Asu no flota: llega con la barra. */
@media (max-width: 767px) {
  html body[data-ens-page="catalog"] #sticky-cta-mobile .mobile-quick-link { display: none !important; }
  html body[data-ens-page="catalog"] #sticky-cta-mobile { transition: padding-left .32s var(--mk-curva, ease); }
  html body[data-ens-page="catalog"]:has(.floating-widgets:not([hidden])) #sticky-cta-mobile.is-visible { padding-left: 74px !important; }
  html body[data-ens-page="catalog"]:has(#sticky-cta-mobile.is-visible) .floating-widgets {
    right: auto !important; left: 12px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body[data-ens-page="catalog"]:has(#sticky-cta-mobile.is-visible) .floating-widgets #chatbot-cta { display: none !important; }
  html body[data-ens-page="catalog"]:not(:has(#sticky-cta-mobile.is-visible)) .floating-widgets { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

  /* ---------- La barra del celular se ve y se toca (29-sep) ---------- */
  /* Estaba marcada como visible por el JS (`is-visible`, `inert` en false) y aun así no
     aparecía: `catalogo.css` la apagaba con `display: none !important` en TODOS los anchos
     —el `!important` le ganaba al `display: flex` de su propia media query—, y encima
     `inbound-flow.css:581-585` la escondía con `interaction-zone-in-view` (su zona de
     decisión es el propio carrusel `#cat-grid`, así que en el catálogo salta casi siempre)
     y con `floating-control-overlap`. Medido el 29-sep en el navegador, con una prenda
     elegida y la página bajada: display none · visibility hidden · opacity 0.
     Se enciende sólo en el catálogo, sólo en celular y sólo cuando el JS la da por visible.
     Se sigue guardando sola mientras el panel está abierto (línea 148, `cotiza-abierta`) y
     mientras el formulario viejo está a la vista (`contact-step-active`). */
  html:not(.cotiza-abierta) body[data-ens-page="catalog"]:not(.contact-step-active) #sticky-cta-mobile.is-visible:not([inert]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}
/* 2-oct · D3 del encargo 05: la lámina toma el color de la foto, no un negro inventado.
   La regla venía de un pedido anterior (fondo negro para las imágenes) y el 3-oct Carlitos
   pide lo contrario y con número: la foto del catálogo es cuadrada con fondo transparente, así
   que el marco cuadrado + el gris claro del catálogo la muestra entera y grande (≥65% del
   alto del marco, medido en el verificador). Gana por especificidad, sin !important. */
html body #contacto .camino-prenda img {
  background: linear-gradient(180deg, #fbfaf9 0%, #eceae7 100%);
  height: auto; aspect-ratio: 1 / 1; padding: 0; object-fit: contain;
}


/* Source: catalog-refresh.css */
/* catalog-refresh.css · el «ajuste rápido» que Codex publicó el 02-oct (héroe negro, filtros, tarjetas) quedó
   SUPERADO el mismo día por el rediseño de Carlitos del catálogo:
     · héroe negro con la prenda girando al scroll .......... assets/css/giro-catalogo.css (+ catalogo-un-camino.css)
     · filtros «Todos los productos», tarjetas completas, menú  assets/css/catalogo-02oct.css
   Se vació en vez de borrarse para no dejar un 404 en el HTML ni reglas con !important de la misma fuerza peleando
   con las nuevas (eran selectores de 6 niveles que ganaban a todo lo posterior). Si hace falta recuperar el
   original: git show HEAD:assets/css/catalog-refresh.css */


/* Source: quote-refresh.css */
/* Cotización: una pantalla clara, elecciones pequeñas, total y acción a la vista. */
/* 2-oct · D1: la geometría de la hoja (anclada abajo, techo de 88dvh, esquinas de arriba
   redondeadas, 640px de ancho máximo) vive en catalogo-un-camino.css. Acá sólo se fija el
   ancho y el blanco del panel, y que la caja se encoja por flexbox para que el techo del
   88dvh deje scrollear la lista de pantallas en vez de recortarla. */
html body #contacto.cotiza-panel { width: min(640px, 100vw); background: #fff !important; }
html body .cotiza-panel__caja { flex: 1 1 auto; height: auto; min-height: 0; }
html body .cotiza-panel__cabeza { padding: 20px 24px 16px; }
html body .cotiza-panel__titulo { font-family: var(--mk-display); font-size: 1.75rem; }
html body .cotiza-panel__bajada { font-size: .875rem; }
/* 2-oct · D1: la cadena de alturas es de flexbox de arriba abajo, sin `height: 100%`. Con
   porcentajes, el alto del cuerpo no era «definito» (el panel lo tiene automático y sólo
   topado por max-height), el porcentaje no resolvía y la lista de pantallas crecía hasta su
   contenido: el total y el botón quedaban recortados fuera del panel. Con `flex` + `min-height:
   0` cada uno se encoge y el que scrollea es la lista, como debe. */
html body .cotiza-panel__cuerpo { overflow: hidden; padding: 18px 24px 0; display: flex; flex-direction: column; min-height: 0; }
html body .cotiza-panel .camino-ensutex__layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html body .cotiza-panel [data-camino-root] { flex: 1 1 auto; min-height: 0; height: auto; padding: 0; display: flex; flex-direction: column; }
html body .cotiza-panel [data-path-screens] { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
html body .cotiza-panel .camino-ensutex__layout,
html body .cotiza-panel [data-camino-root],
html body .cotiza-panel .camino-ensutex__nav { min-width: 0; max-width: 100%; }
html body .cotiza-panel [data-path-screens] { overflow-x: hidden; }
html body .cotiza-panel .b-path__tabs { flex: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 0 16px; gap: 8px; }
html body .cotiza-panel .b-path__tab { width: 100%; flex-direction: row; font-size: 14px; min-height: 44px; border-radius: 10px; gap: 8px; padding: 8px 10px; }
html body .cotiza-panel .b-path__tab::before { background: #e8e5e2; color: #555; width: 22px; height: 22px; font-size: 12px; }
html body .cotiza-panel .b-path__tab.is-current { background: #151413; color: #fff; border-color: #151413; }
html body .cotiza-panel .b-path__tab.is-current::before { background: #fff; color: #151413; }
html body .cotiza-panel .b-path__summary,
html body .cotiza-panel [data-camino-help],
html.cotiza-abierta body [data-path-bar] { display: none !important; }
html body #contacto [hidden],
html body .cotiza-panel .asu-camino__tiro,
html body .cotiza-panel .asu-camino__eco-host { display: none !important; }
html body .cotiza-panel .camino-ensutex__card { border: 0; padding: 0; border-radius: 0; background: #fff; }
html body #contacto .camino-ensutex__title { font: 700 20px/1.25 var(--mk-body) !important; text-transform: none !important; margin: 0 0 6px !important; text-align: left !important; }
html body .cotiza-panel .camino-ensutex__lead { font-size: 16px; line-height: 1.4; margin-bottom: 14px; }
html body .cotiza-panel [data-path-screen="producto"] .camino-grupo:not(#camino-titulo-prendas) { display: none; }
html body .cotiza-panel--compacto #camino-titulo-prendas,
html body .cotiza-panel--compacto [data-camino-prendas] { display: none !important; }
html body .cotiza-panel--compacto [data-path-screen="producto"] .camino-ensutex__title,
html body .cotiza-panel--compacto [data-path-screen="producto"] .camino-ensutex__lead { display: none; }
/* 2-oct · D3: 13 modelos en ≤2 pantallas de scroll. Cinco columnas en escritorio y cuatro en
   celular dejan la grilla en 3 y 4 filas (antes 3 columnas = 5 filas = 1.613px de scroll en
   una ventana de 524). Y la lámina es la foto, en su forma: marco cuadrado, `object-fit:
   contain` y el gris claro del catálogo. */
html body .cotiza-panel [data-camino-prendas] { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
html body .cotiza-panel .camino-prenda img { height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
html body .cotiza-panel .camino-prenda label { border-radius: 12px; padding: 6px; gap: 4px; }
html body .cotiza-panel .camino-prenda strong { font-size: 13px; line-height: 1.2; }
html body .cotiza-panel .camino-prenda span { font-size: 13px; }
html body .cotiza-panel .camino-lineas { margin: 0 0 14px; gap: 8px; }
/* 2-oct · D3: el aviso «Todavía no eliges prendas» no lleva foto, así que su texto caía en la
   columna de la foto (56px) y se quebraba en ~14 líneas: 277px de alto. Ocupa el ancho. */
html body .cotiza-panel .camino-linea:not([data-camino-linea]) .camino-linea__name { grid-column: 1 / -1; }
html body .cotiza-panel .camino-linea { grid-template-columns: 56px minmax(0,1fr) auto; gap: 4px 12px; padding: 10px; background: #fff; border-radius: 12px; }
html body .cotiza-panel .camino-linea__foto { grid-row: 1 / 3; width: 56px; height: 64px; object-fit: contain; background: #fff; }
html body .cotiza-panel .camino-linea__name { font-size: 16px; line-height: 1.3; }
html body .cotiza-panel .camino-linea__meta { font-size: 14px; line-height: 1.35; margin-top: 3px; }
html body .cotiza-panel .camino-linea__qty { grid-column: 3; grid-row: 1 / 3; flex-direction: column; gap: 4px; }
html body .cotiza-panel .camino-linea__qty > label { font-size: 12px; }
html body .cotiza-panel .camino-step input { width: 42px; padding: 8px 2px; }
html body .cotiza-panel .camino-step__btn { width: 44px; }
html body .cotiza-panel .camino-linea__quitar { grid-column: 2; min-height: 44px; justify-self: start; padding: 0; font-size: 14px; }
html body .cotiza-panel .camino-telas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 0 12px; }
html body .cotiza-panel .camino-telas legend { grid-column: 1/-1; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0 0 8px; color: #151413; }
html body .cotiza-panel .camino-tela { min-width: 0; }
html body .cotiza-panel .camino-tela label { min-height: 100px; padding: 12px; background: #fff; gap: 4px; }
html body .cotiza-panel .camino-tela label strong { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
/* 2-oct · D4 «no poder seleccionar»: el círculo era de 18px y el estado marcado se leía como
   un borde. Ahora es un disco de 48px (radio 24) con el check en blanco cuando está marcado,
   sobre el rojo de marca, y el foco de teclado tiene un outline de 3px visible (antes 2px). */
html body .cotiza-panel .camino-tela label strong i {
  width: 48px; height: 48px; border: 2px solid #b8b4b1; border-radius: 50%; flex: none;
  background: #fff; display: grid; place-items: center;
}
html body .cotiza-panel .camino-tela label strong i::after { content: "✓"; font-size: 26px; line-height: 1; color: transparent; }
html body .cotiza-panel .camino-tela input:checked + label { background: #fff7f7; }
html body .cotiza-panel .camino-tela input:checked + label strong i { background: #e20613; border-color: #e20613; }
html body .cotiza-panel .camino-tela input:checked + label strong i::after { color: #fff; }
html body .cotiza-panel .camino-tela input:focus-visible + label { outline: 3px solid #e20613; outline-offset: 2px; }
html body .cotiza-panel .camino-tela label span { font-size: 14px; font-weight: 400; line-height: 1.35; }
html body .cotiza-panel .camino-tela label em { font-size: 14px; margin-top: 2px; }
html body .cotiza-panel .camino-telas .camino-ayuda { grid-column: 1/-1; margin: 0; font-size: 14px; }
html body .cotiza-panel .quote-fabric-auto { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; background: #f6f5f3; border-radius: 10px; margin: 0 0 12px; font-size: 14px; line-height: 1.4; }
html body .cotiza-panel .quote-fabric-auto[hidden] { display: none; }
html body .cotiza-panel__mas-modelos { margin: 0 0 12px; padding: 0 12px; border-style: solid; font-size: 14px; }
html body .cotiza-panel .camino-minimo { display: block; margin: 0 0 10px; padding: 10px 12px; font-size: 14px; background: #f6f5f3; }
html body .cotiza-panel .camino-reposicion { margin: 0; display: flex; align-items: center; min-height: 44px; gap: 10px; font-size: 14px; line-height: 1.4; }
html body .cotiza-panel .camino-reposicion input { width: 20px; height: 20px; flex: none; }
html body .cotiza-panel .camino-ensutex__nav { flex: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 0 18px !important; background: #fff; border-top: 1px solid #e7e4e0; }
html body .cotiza-panel .quote-total { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; }
html body .cotiza-panel .quote-total { order: -1; }
html body .cotiza-panel .camino-ensutex__nav .camino-btn--ghost { order: 0; }
html body .cotiza-panel .quote-total span { display: block; color: #625e5a; }
html body .cotiza-panel .quote-total strong { display: block; font-size: 22px; color: #151413; }
html body .cotiza-panel .camino-ensutex__nav button { min-height: 44px; border-radius: 999px; padding: 10px 18px; font: 700 14px/1.25 var(--mk-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html body .cotiza-panel .camino-ensutex__nav [data-path-submit] { width: auto; margin: 0; background: #151413; color: #fff; }
html body .cotiza-panel .camino-tallas-acciones { margin: 12px 0; gap: 8px; }
html body .cotiza-panel .camino-tallas-acciones label { width: 100%; margin: 0; font-size: 14px; }
html body .cotiza-panel .camino-tallas-acciones select { flex: 1; min-width: 80px; }
html body .cotiza-panel .camino-tallas-acciones button { padding: 10px 14px; font-size: 14px; }
html body .cotiza-panel .camino-personas { gap: 6px; margin: 12px 0; }
html body .cotiza-panel .camino-persona { grid-template-columns: 22px minmax(0,1fr) 98px; grid-template-areas: "n nombre talla"; gap: 8px; padding: 8px; background: #fff; }
html body .cotiza-panel .camino-persona input, html body .cotiza-panel .camino-persona select { font-size: 16px; padding: 8px; }
html body .cotiza-panel .camino-ayuda { font-size: 14px; }
html body .cotiza-panel #form-cotizador { gap: 12px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html body .cotiza-panel #form-cotizador > h3,
html body .cotiza-panel #form-cotizador .quote-form-intro,
html body .cotiza-panel #form-cotizador .quote-form-benefits { display: none !important; }
html body .cotiza-panel #form-cotizador input:not([type="checkbox"]):not([type="hidden"]) { min-height: 44px !important; padding-top: 10px; padding-bottom: 10px; border-radius: 8px !important; background: #fff !important; }
html body .cotiza-panel #form-cotizador > div > label { font-size: 14px; text-transform: none; letter-spacing: 0; margin: 0 0 5px; }
html body .cotiza-panel #form-cotizador > label { font-size: 14px; line-height: 1.4; min-height: 44px; gap: 10px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff; }
html body .cotiza-panel #form-cotizador > label input { flex: none; width: 20px; height: 20px; }
html body .cotiza-panel #quote-whatsapp-help { font-size: 12px; }
@media (max-width: 767px) {
  /* D1: acá estaba el «pestaña gigante»: `height:100dvh; border-radius:0` dejaba el panel con
     los 844px exactos de la pantalla. Ahora es hoja inferior de altura automática con techo
     de 88dvh (742px) y esquinas de arriba redondeadas. */
  html body #contacto.cotiza-panel { width: 100%; height: auto; max-height: 88dvh; border-radius: 22px 22px 0 0; }
  html body .cotiza-panel__cabeza { padding: 8px 24px 12px; border-radius: 22px 22px 0 0; }
  html body .cotiza-panel__asa { display: block; }
  html body .cotiza-panel__titulo { font-size: 1.75rem; }
  html body .cotiza-panel__cuerpo { padding: 12px 16px 0; }
  html body .cotiza-panel .b-path__tabs { gap: 5px; margin-bottom: 14px; }
  html body .cotiza-panel .b-path__tab { justify-content: center; gap: 0; font-size: 14px; padding: 7px 4px; }
  html body .cotiza-panel .b-path__tab::before { display: none; }
  html body .cotiza-panel .b-path__tab__name { overflow: visible; text-overflow: clip; white-space: normal; text-align: center; }
  /* D3 en celular: cuatro columnas = cuatro filas para los 13 modelos, sin las tres pantallas
     de scroll que tenía (medido: 13 modelos en ≤1.050px). */
  html body .cotiza-panel [data-camino-prendas] { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  /* La foto es cuadrada y toma el ancho de su columna, así que en los teléfonos anchos y
     apaisados (600–767px) crecía a 120–161px y estiraba cada tarjeta: 13 modelos pedían
     1.062–1.198px de scroll (ya se pasaba del presupuesto antes del 04-oct). Con el techo
     puesto, la columna de foto no pasa de 96px y la cifra vuelve a entrar en los 1.050.
     Es `max-width` y no `max-height` a propósito: con el alto topado el marco quedaría más
     ancho que la foto y aparecerían bandas de fondo —exactamente lo que vigila el control
     D3c («el marco se ajusta a la foto»). Centrada, el marco sigue siendo la foto. */
  html body .cotiza-panel .camino-prenda img { max-width: 96px; margin-inline: auto; }
  /* 04-oct · el precio es el dato que decide la compra y era el más chico de la pantalla
     (12px). Sube a 15px, en tinta llena, y en una sola línea.
     Lo que lo obligaba a encogerse era el « c/u» repetido en las trece tarjetas: con ~69px
     de ancho útil, «$18.500 c/u» a 15px se quebraba en dos líneas y le sumaba 20px a cada
     fila. La pantalla ya lo dice una vez arriba de la grilla («Precios por unidad, con IVA
     incluido»), así que la tarjeta se quedó sólo con la cifra. El nombre baja un punto, a
     14px, para que sus tres líneas convivan con el precio grande en la misma fila.
     Medido con los trece modelos reales: 1.025px de scroll a 390px y 1.029px a 360px,
     contra el presupuesto de 1.050px. Tres columnas en su lugar daban 1.323px. */
  html body .cotiza-panel .camino-prenda strong { font-size: 14px; line-height: 1.2; }
  html body .cotiza-panel .camino-prenda span { font-size: 15px; line-height: 1.25; font-weight: 700; color: #191817; }
  html body .cotiza-panel .camino-linea { grid-template-columns: 48px minmax(0,1fr) auto; gap: 4px 8px; padding: 10px; }
  html body .cotiza-panel .camino-linea__foto { width: 48px; height: 64px; grid-row: 1/3; }
  html body .cotiza-panel .camino-linea__name { grid-column: 2/4; }
  html body .cotiza-panel .camino-linea__qty { grid-column: 2; grid-row: 2; flex-direction: row; justify-content: start; margin-top: 2px; }
  html body .cotiza-panel .camino-linea__qty > label { display: none; }
  html body .cotiza-panel .camino-linea__quitar { grid-column: 3; grid-row: 2; min-height: 44px; }
  html body .cotiza-panel .camino-linea__qty > label { font-size: 14px; }
  html body .cotiza-panel .camino-tela label { padding: 10px; min-height: 116px; }
  html body .cotiza-panel .camino-ensutex__nav { flex-wrap: wrap; padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; gap: 8px; }
  html body .cotiza-panel .quote-total { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; }
  html body .cotiza-panel .quote-total strong { font-size: 22px; }
  html body .cotiza-panel .camino-ensutex__nav [data-path-next],
  html body .cotiza-panel .camino-ensutex__nav [data-path-submit] { flex: 1; }
  html body .cotiza-panel .camino-persona { grid-template-columns: 18px minmax(0,1fr) 88px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .cotiza-panel .b-path__screen { animation: none; }
}


/* Source: giro-catalogo.css */
/* ============================================================================
   Héroe del catálogo · negro de marca, giro continuo de la polera (06-oct-2026)

   Carlitos (02-oct): «el fondo del hero del catálogo quiero que sea negro (por ende los copys blancos) y que el
   video siga cortado solo la polera [...] el copy demasiado a la izquierda y el video de la polera muy a la
   derecha. Demasiado espacio al medio vacío que no aporta nada. Ahí no cumpliste el encuadre.» y, sobre el
   celular: «la prenda estaba MUY PEQUEÑA».
   Los cuadros WebP aprobados llevan alfa. Se recortan a la altura del ruedo con sourceRect para dejar solo la polera,
   aislada sobre el negro. El motor en assets/js/giro-catalogo.js los recorre en un bucle continuo.

   · ENCUADRE. Una sola composición CENTRADA: [texto | prenda] dentro de un contenedor de 1120 px como máximo,
     con el grupo entero centrado (justify-content: center), de modo que el margen izquierdo del texto y el margen
     derecho de la prenda son iguales y no queda hueco en el medio (el aire entre el texto y la prenda es el
     `gap`, 32 px, más el borde transparente que deja la ventana de la prenda: < 80 px, se mide en
     scripts/verificar-catalogo-02oct.cjs). Texto y prenda se centran en vertical entre sí.
   · LA VENTANA. Los cuadros miden 720×960 y la prenda ocupa solo x 75–644 e y 45–915 (medido en los 48 cuadros de
     escritorio y, a escala, en los 32 de celular). La caja del giro es una ventana de 594×894 (proporción
     594/894) puesta sobre el cuadro, de modo que el borde transparente que sobraba (cerca del 20 % de cada cuadro)
     no ocupa lugar en la pantalla y la prenda se ve más grande sin tocar los archivos. La prenda nunca llega al
     borde de la ventana (el verificador mira el borde de los cuadros uno por uno).
   · Escritorio: copy y polera quedan próximos en dos columnas dentro del mismo encuadre.
   · Móvil: copy breve, accesos y polera se apilan; el póster comparte el recorte del giro.
   · Movimiento reducido, ahorro de datos o sin JavaScript: se ve el póster fijo con el mismo recorte.
   Carga al final del <head>; los selectores llevan `html body .cat-heroe` porque catalog-premium-v2.css,
   ux-refresh.css y marca.css fuerzan varias reglas del héroe con !important.
   ============================================================================ */

html body .cat-heroe {
  --cat-nav: 64px;                                   /* alto de la cabecera (78 px desde 1024) */
  --giro-alto: clamp(380px, calc(100svh - 220px), 640px);
}
@media (min-width: 1024px) { html body .cat-heroe { --cat-nav: 78px; } }

/* ---------- Fondo negro de marca y composición centrada (escritorio) ---------- */
html body .cat-heroe.catalog-page-hero {
  background: var(--cat-heroe-negro, #141312) !important; color: #ffffff !important;
  min-height: 0 !important;
  padding: calc(var(--cat-nav) + 16px) clamp(24px, 4vw, 48px) 40px !important;
}
/* catalog-premium-v2.css lo pone en grilla con !important (display, columnas y gap): aquí se repite con !important y más
   especificidad. Medidas en px a propósito: el rem de este sitio no vale 16. */
html body .cat-heroe .catalog-page-hero__layout {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important;
  gap: clamp(20px, 2.2vw, 32px) !important; grid-template-columns: none !important; min-height: 0 !important;
  width: 100%; max-width: 1120px; margin: 0 auto !important; padding: 0 !important; z-index: auto;
}
html body .cat-heroe .catalog-page-hero__copy {
  flex: 0 1 520px; min-width: 0; max-width: 520px; margin: 0 !important; text-align: left !important;
}
html body .cat-heroe .catalog-page-hero__media {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center;
  margin: 0; width: auto;
}

/* ---------- La caja del giro: una ventana sobre el cuadro, sin bordes vacíos ---------- */
html body .cat-heroe .giro-cat {
  position: relative; display: block; flex: none; margin: 0; overflow: hidden;
  height: var(--giro-alto); width: auto; aspect-ratio: 594 / 894;
}
/* El cuadro (720×960) entero, colocado de modo que la ventana quede sobre x 63–657 e y 33–927:
   ancho = 720/594, alto = 960/894, desfase = −63/594 y −33/894. La imagen fija y el lienzo se ven iguales. */
html body .cat-heroe .giro-cat__poster,
html body .cat-heroe .giro-cat__canvas {
  position: absolute; display: block; max-width: none; margin: 0; padding: 0;
  width: 121.212%; height: 107.383%; left: -10.606%; top: -3.691%;
  background: transparent; pointer-events: none; clip-path: inset(0 0 29.5% 0);
}
/* El lienzo espera: mientras no esté listo se ve la imagen fija. Al estar listo el lienzo pinta el mismo primer cuadro
   y la imagen fija se esconde (el lienzo es transparente y, si quedara debajo, se asomaría por los huecos del giro). */
html body .cat-heroe .giro-cat__canvas { opacity: 0; }
html body .cat-heroe .giro-cat[data-giro-estado="listo"] .giro-cat__canvas { opacity: 1; }
html body .cat-heroe .giro-cat[data-giro-estado="listo"] .giro-cat__poster { visibility: hidden; }

/* El giro es ambiental; no añade otra instrucción debajo del hero. */
html body .cat-heroe .giro-cat__pista {
  display: none !important; margin: 14px 0 0; white-space: nowrap; pointer-events: none;
  font-family: var(--mk-body, 'Jost', system-ui, sans-serif); font-size: 13px; font-weight: 500; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase; color: #ffffff; opacity: .6;
}

/* ---------- Celular y tablet: apilado, sin fijar nada ---------- */
@media (max-width: 1023px) {
  html body .cat-heroe {
    /* El alto acompaña al copy breve, con aire lateral para que la polera no toque el borde. */
    --giro-alto: min(52svh, calc((100vw - 48px) / .6644), 520px);
  }
  html body .cat-heroe.catalog-page-hero { padding: calc(var(--cat-nav) + 4px) 24px 24px !important; }
  html body .cat-heroe .catalog-page-hero__layout {
    flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; max-width: 544px;
  }
  html body .cat-heroe .catalog-page-hero__copy { display: contents; text-align: center !important; }
  /* 04-oct · ORDEN DEL COPY Y CORTE. Medido en vivo a 390×844: el héroe daba 929 px, así que los 85 px que
     sobran cortaban justo la bajada (empezaba en 803 y terminaba en 905), y el orden dejaba la bajada DESPUÉS de
     las dos puertas, o sea la explicación de los precios llegaba después de las tarjetas que ya te hicieron elegir
     camino (Carlitos: «no tiene como orden en el copy [...] queda cortada la sección en mobile»).
     Se pasa al orden natural de lectura: título → bajada → puertas → prenda. Con eso el copy entero termina en
     ~347 px y las dos puertas en ~419: todo lo que se lee y todo lo que se toca queda dentro de la pantalla y en
     la zona del pulgar, sin cortar nada. La prenda baja al final, y ahí además el giro mejora: recorre la pantalla
     completa por delante en vez de gastar media animación ya estando a la vista. El tamaño de la prenda no se toca
     (sigue en 57svh): Carlitos ya había pedido que no se achicara. */
  html body .cat-heroe h1 { order: 1; }
  html body .cat-heroe .catalog-page-hero__copy > p { order: 2; }
  html body .cat-heroe .cat-puertas { order: 3; width: 100%; }
  html body .cat-heroe .catalog-page-hero__media { order: 4; grid-column: auto !important; grid-row: auto !important; margin: 12px 0 0; }
}

/* Jerarquía compacta del hero: una idea, dos accesos y la prenda junto al copy. */
html body #catalogo-hero.cat-heroe .catalog-page-hero__copy h1 {
  max-width: 11ch; margin-bottom: .7rem !important; font-size: clamp(2.8rem, 4.8vw, 4.5rem) !important;
  line-height: .98 !important; letter-spacing: -.025em !important;
}
html body #catalogo-hero.cat-heroe .catalog-page-hero__copy > p {
  max-width: 34ch; margin: 0 !important; font-size: clamp(.95rem, 1.2vw, 1.08rem) !important;
  line-height: 1.45 !important;
}
html body #catalogo-hero.cat-heroe .cat-puertas {
  gap: 10px !important; margin-top: 18px !important;
}
@media (max-width: 1023px) {
  html body #catalogo-hero.cat-heroe { padding-inline: 18px !important; }
  html body #catalogo-hero.cat-heroe .catalog-page-hero__copy h1 {
    max-width: 14ch; margin: 0 auto .7rem !important; font-size: clamp(2.2rem, 9vw, 3rem) !important;
    line-height: .98 !important; text-align: center !important;
  }
  html body #catalogo-hero.cat-heroe h1 .seo-tema {
    width: fit-content; max-width: 100%; margin: 0 auto 10px !important; font-size: 11px !important;
  }
  html body #catalogo-hero.cat-heroe .catalog-page-hero__copy > p {
    max-width: 32ch; margin-inline: auto !important; text-align: center !important;
  }
  html body #catalogo-hero.cat-heroe .cat-puertas {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; margin-top: 12px !important;
  }
  html body #catalogo-hero.cat-heroe .cat-puerta { min-height: 58px; padding: 9px 10px !important; }
}

/* ---------- 06-oct (tarde) · encuadre final del héroe ----------
   Escritorio: el título en dos renglones («Elige prendas / para tu equipo.») y la polera más grande, centrada en
   alto con el copy; el grupo [copy | polera] sigue centrado en la lámina negra.
   Celular: las dos puertas con letra de 15 px en un renglón y sin flecha (en 2 columnas no cabía). */
@media (min-width: 1024px) {
  html body #catalogo-hero.cat-heroe { --giro-alto: clamp(420px, calc(100svh - 190px), 660px); }
  html body #catalogo-hero.cat-heroe .catalog-page-hero__copy h1 {
    max-width: 15ch !important;
    font-size: clamp(3.1rem, 4.6vw, 4.6rem) !important;
  }
  html body #catalogo-hero.cat-heroe .catalog-page-hero__copy { flex-basis: 560px !important; max-width: 560px !important; }
  html body #catalogo-hero.cat-heroe .catalog-page-hero__copy > p { font-size: 18px !important; max-width: 36ch !important; color: #d9d5d0 !important; }
  html body #catalogo-hero.cat-heroe .cat-puerta { min-height: 64px; padding: 12px 18px !important; }
}
@media (max-width: 1023px) {
  html body #catalogo-hero.cat-heroe .catalog-page-hero__copy > p { font-size: 16px !important; line-height: 1.45 !important; }
  html body #catalogo-hero.cat-heroe .cat-puerta { min-height: 60px; padding: 10px 12px !important; justify-content: center; }
  html body #catalogo-hero.cat-heroe .cat-puerta .cat-puerta__nombre { font-size: 15px !important; white-space: nowrap; }
  html body #catalogo-hero.cat-heroe .cat-puerta .cat-puerta__nota { font-size: 13px !important; white-space: nowrap; }
  html body #catalogo-hero.cat-heroe .cat-puerta .cat-puerta__flecha { display: none !important; }
  html body #catalogo-hero.cat-heroe h1 .seo-tema { font-size: 12px !important; }
}


/* Source: menu-categorias.css */
/* ============================================================================
   Menú «Precios y modelos» con categorías (02-oct-2026) — compartido por TODAS las páginas de Ensutex
   Lo pidió Carlitos el 02-oct: que el texto sea un enlace al catálogo y que el desplegable traiga solo las categorías de producto,
   con miniatura. Se sacó de catalogo-02oct.css para que el inicio, el catálogo y las guías muestren el mismo menú.
   Carga al final del <head> y todo lleva el prefijo `html body:not(.mf):not(.rx)` (marca.css y ux-refresh.css fuerzan casi todo con
   !important). Tipografía solo por token (--mk-display / --mk-body); movimiento solo transform y opacity.
   ============================================================================ */

/* ============================== 1 · MENÚ DE ESCRITORIO ============================== */
/* «Precios y modelos» es un enlace (lleva al héroe del catálogo, con todos los productos) y el chevron es un botón
   aparte que abre el desplegable (también al pasar el mouse, como siempre). El desplegable solo trae categorías. */
html body:not(.mf):not(.rx) .ens-nav-catalogo {
  display: inline-flex; align-items: center; border-radius: 999px;
  transition: background-color .2s var(--mk-curva);
}
html body:not(.mf):not(.rx) .ens-nav-catalogo:hover,
html body:not(.mf):not(.rx) .ens-nav-catalogo:focus-within,
html body:not(.mf):not(.rx) .ens-nav-catalogo.is-open { background: #ffffff; }
html body:not(.mf):not(.rx) .ensutex-nav-menu > .ens-nav-catalogo > a.ens-nav-catalogo__link {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 10px 2px 10px 14px !important; background: transparent !important; border-radius: 999px 0 0 999px !important;
}
html body:not(.mf):not(.rx) .ens-nav-catalogo__flecha {
  display: inline-flex; align-items: center; justify-content: center; align-self: stretch; flex: 0 0 44px;
  min-width: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0 999px 999px 0; background: transparent;
  color: var(--mk-ink-2); cursor: pointer;
}
html body:not(.mf):not(.rx) .ens-nav-catalogo__flecha .nav-chevron { margin: 0 0 3px; transition: transform .2s var(--mk-curva); }
html body:not(.mf):not(.rx) .ens-nav-catalogo:hover .nav-chevron,
html body:not(.mf):not(.rx) .ens-nav-catalogo.is-open .nav-chevron { transform: rotate(225deg); margin-bottom: -2px; }
html body:not(.mf):not(.rx) .ens-nav-catalogo__flecha:focus-visible { outline: 3px solid #87CEEB; outline-offset: -3px; }

/* El panel se posiciona y se muestra con CSS propio: en el inicio las utilidades de Tailwind (top-full, -translate-x-1/2,
   group-hover:…) cargan diferidas y, hasta que llegan, el panel caía fuera de lugar. */
html body:not(.mf):not(.rx) .ens-nav-catalogo { position: relative; }
html body:not(.mf):not(.rx) .ens-nav-categorias {
  position: absolute; left: 50%; top: 100%; z-index: 50; transform: translateX(-50%);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .2s var(--mk-curva), visibility .2s var(--mk-curva);
  width: 304px; margin-top: 12px; padding: 8px; box-sizing: border-box;
}
html body:not(.mf):not(.rx) .ens-nav-catalogo:hover > .ens-nav-categorias,
html body:not(.mf):not(.rx) .ens-nav-catalogo:focus-within > .ens-nav-categorias {
  visibility: visible; opacity: 1; pointer-events: auto;
}
/* puente invisible sobre el hueco de 12 px: el mouse puede bajar del enlace al panel sin que se cierre */
html body:not(.mf):not(.rx) .ens-nav-categorias::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
html body:not(.mf):not(.rx) .ens-nav-catalogo.is-open > .ens-nav-categorias {
  visibility: visible; opacity: 1; pointer-events: auto;
}
html body:not(.mf):not(.rx) .ens-nav-categorias ul,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu ul { list-style: none; margin: 0; padding: 0; }
html body:not(.mf):not(.rx) .ens-nav-categorias a.ens-nav-categoria,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu a.ens-nav-categoria {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 10px; box-sizing: border-box;
  border: 0 !important; border-radius: 14px !important; text-align: left; text-decoration: none;
  color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; background: transparent !important;
  font-family: var(--mk-body) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: -.01em;
  transition: background-color .15s var(--mk-curva);
}
html body:not(.mf):not(.rx) .ens-nav-categorias a.ens-nav-categoria:hover,
html body:not(.mf):not(.rx) .ens-nav-categorias a.ens-nav-categoria:focus-visible,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu a.ens-nav-categoria:hover,
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu a.ens-nav-categoria:focus-visible { background: var(--mk-bg) !important; }
html body:not(.mf):not(.rx) .ens-nav-categoria a:focus-visible,
html body:not(.mf):not(.rx) a.ens-nav-categoria:focus-visible { outline: 3px solid #87CEEB; outline-offset: -3px; }
/* la miniatura va sobre el negro de marca, igual que la foto en la tarjeta: la prenda blanca se lee y no hay rectángulo */
html body:not(.mf):not(.rx) .ens-nav-categoria__img {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--mk-negro);
}
html body:not(.mf):not(.rx) .ens-nav-categoria__img img { width: 40px; height: 40px; object-fit: contain; }

/* ============================== 2 · MENÚ DEL CELULAR ============================== */
/* Un solo acordeón: la fila lleva el enlace «Precios y modelos» (que va al héroe) y, aparte, el botón del chevron (44 px o más)
   que abre y cierra las categorías. Tocar el texto nunca abre el acordeón; tocar el chevron nunca navega. */
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-head {
  display: flex; align-items: stretch; background: #ffffff; border: 1px solid var(--mk-line); border-radius: 14px; overflow: hidden;
}
html body:not(.mf):not(.rx) #mobileDrawer a.mobile-catalog-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 52px; padding: 0 16px; box-sizing: border-box;
  color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; background: transparent !important;
  font-family: var(--mk-body) !important; font-size: 17px; font-weight: 600; text-decoration: none;
}
html body:not(.mf):not(.rx) #mobileDrawer button.mobile-catalog-primary {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; min-height: 52px; padding: 0; margin: 0;
  border: 0 !important; border-left: 1px solid var(--mk-line) !important; border-radius: 0 !important; background: transparent !important;
  color: var(--mk-ink) !important; cursor: pointer;
}
html body:not(.mf):not(.rx) #mobileDrawer button.mobile-catalog-primary:focus-visible { outline: 3px solid #87CEEB; outline-offset: -3px; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-chevron {
  display: block; width: 10px; height: 10px; margin: -4px 0 0; border: solid var(--mk-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .22s var(--mk-curva); position: static;
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-accordion.is-open .mobile-catalog-chevron { transform: rotate(225deg); margin-top: 4px; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu {
  margin-top: 8px; padding: 8px; background: var(--mk-bg); border: 1px solid var(--mk-line); border-radius: 14px; overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .22s var(--mk-curva), transform .22s var(--mk-curva);
}
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-accordion.is-open .mobile-catalog-menu { opacity: 1; transform: none; }
html body:not(.mf):not(.rx) #mobileDrawer .mobile-catalog-menu[hidden] { display: none; }
/* con el drawer abierto en 360×740 todo cabe: 7 filas de 56 px + la fila del acordeón + guías + el botón; si no cabe, el
   cajón se desplaza (no se corta) */
html body:not(.mf):not(.rx) #mobileDrawer { max-height: calc(100svh - 84px) !important; overflow-y: auto !important; overscroll-behavior: contain; }


/* Source: catalogo-02oct.css */
/* ============================================================================
   Catálogo · menú «Precios y modelos», filtros, tarjetas y packs (02-oct-2026)
   Lo pidió Carlitos el 02-oct (sus palabras, en ENCARGO-CATALOGO.md y en el comentario de cada bloque).
   Carga al final del <head> (después de giro-catalogo.css) y TODO lleva el prefijo
   `html body:not(.mf):not(.rx)`: marca.css, ux-refresh.css, catalog-premium-v2.css y catalogo.css fuerzan casi todo con
   !important y con ids (`:is(#mk-x, main)` pesa como un id), así que aquí se repite con más especificidad en vez de
   editar hojas compartidas. Tipografía SOLO por token: Hussar Bold (--mk-display, un solo grosor: 400) y Jost
   (--mk-body). Movimiento: solo transform y opacity, curva --mk-curva, y nada empieza invisible.
   Índice: 1 y 2 menú (ahora en menu-categorias.css) · 3 encabezado y filtros · 4 la fila de tarjetas ·
           5 la tarjeta de producto · 6 packs y equipaciones
   ============================================================================ */

/* ============================== 1 y 2 · MENÚ «PRECIOS Y MODELOS» ============================== */
/* Pasó a assets/css/menu-categorias.css (compartido por todas las páginas). */

/* ============================== 3 · ENCABEZADO Y FILTROS ============================== */
html body:not(.mf):not(.rx) #catalogo.ens-catalog-carousel-section {
  background: var(--mk-bg) !important; border: 0 !important;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 88px) !important;
}
html body:not(.mf):not(.rx) #catalogo > div > div:first-child {
  margin-bottom: 28px !important; padding-bottom: 0 !important; border: 0 !important; align-items: flex-end; gap: 24px;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo h2#precios-titulo {
  margin: 0 0 14px !important; max-width: 780px; text-wrap: balance;
  font-family: var(--mk-display) !important; font-weight: 400 !important; text-transform: uppercase !important;
  font-size: clamp(1.875rem, 4.1vw, 3.375rem) !important; line-height: 1.1 !important; letter-spacing: 0 !important; color: var(--mk-ink) !important;
}
html body:not(.mf):not(.rx) #catalogo h2#precios-titulo .seo-tema {
  display: flex !important; width: max-content; margin: 0 0 16px !important;
}
/* 04-oct: las dos cabeceras de sección del catálogo —«Precios y modelos» y «Packs»— se pintaban
   con escalas distintas: la segunda medía 36,8 px en celular y 69,12 px en escritorio contra los
   30 y 54 px de la primera (getComputedStyle, mismo nivel de título, misma página). Dos títulos
   hermanos no pueden verse distintos: se le da a «Packs» la misma escala ya declarada arriba. */
html body:not(.mf):not(.rx)[data-ens-page="catalog"] h2#packs-titulo {
  font-family: var(--mk-display) !important; font-weight: 400 !important; text-transform: uppercase !important;
  font-size: clamp(1.875rem, 4.1vw, 3.375rem) !important; line-height: 1.1 !important; letter-spacing: 0 !important; color: var(--mk-ink) !important;
}
html body:not(.mf):not(.rx) #catalogo > div > div:first-child > div:first-child > p {
  margin: 0 !important; max-width: 40rem; font-family: var(--mk-body); font-size: 17px !important; line-height: 1.5 !important; color: var(--mk-ink-2) !important;
}
html body:not(.mf):not(.rx) #catalogo > div > div:first-child > div:last-child { text-align: right; }
html body:not(.mf):not(.rx) #catalogo > div > div:first-child > div:last-child > span {
  display: block; margin: 0 !important; font-family: var(--mk-body) !important; font-size: 14px !important; font-weight: 500 !important;
  line-height: 1.5; letter-spacing: 0 !important; text-transform: none !important; color: var(--mk-ink-2) !important;
}
html body:not(.mf):not(.rx) #catalogo > div > div:first-child > div:last-child > span:first-child { color: var(--mk-ink) !important; font-weight: 700 !important; }

/* La fila de filtros: justo bajo el título, sin caja, con «Todos los productos» activo y a la vista */
html body:not(.mf):not(.rx) #catalogo .catalog-toolbar {
  position: relative !important; top: auto !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 14px;
  margin: 0 0 28px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body:not(.mf):not(.rx) #catalogo .catalog-toolbar__filters { display: block !important; width: 100%; min-width: 0; margin: 0; padding: 0 !important; border: 0 !important; background: none !important; }
html body:not(.mf):not(.rx) #catalogo #cat-tabs {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; width: 100% !important; margin: 0 !important; padding: 0 !important;
  overflow: visible; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  -webkit-mask-image: none; mask-image: none; justify-content: flex-start !important;
}
html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab {
  flex: 0 0 auto !important; width: auto !important; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; padding: 0 16px !important;
  border: 1px solid #D6D2CC !important; border-radius: 999px !important; background: #ffffff !important; color: var(--mk-ink) !important;
  font-family: var(--mk-body) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.005em !important;
  text-transform: none !important; white-space: nowrap; box-shadow: none !important; scroll-snap-align: start; cursor: pointer;
  transition: background-color .18s var(--mk-curva), border-color .18s var(--mk-curva), color .18s var(--mk-curva);
}
html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab:hover { border-color: var(--mk-ink) !important; }
html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab.active,
html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab[aria-selected="true"] { background: var(--mk-ink) !important; border-color: var(--mk-ink) !important; color: #ffffff !important; }
html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab:focus-visible { outline: 3px solid #87CEEB; outline-offset: 2px; }
html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab__n { font-size: 13px; font-weight: 500; color: var(--mk-ink-2); }
html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab.active .cat-tab__n { color: #E6E2DD; }

/* Mobile: the customer must see that every garment family is a filter, with no hidden horizontal-only menu. */
@media (max-width: 767px) {
  html body:not(.mf):not(.rx) #catalogo #cat-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-height: none !important;
    row-gap: 7px !important;
  }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab {
    max-width: 100%;
    min-height: 42px;
    padding-inline: 12px !important;
    white-space: normal !important;
  }
}

/* El buscador: una píldora sencilla debajo de las fichas */
html body:not(.mf):not(.rx) #catalogo .catalog-search { position: relative; width: 100%; max-width: 380px; margin: 0 !important; }
html body:not(.mf):not(.rx) #catalogo .catalog-search__input {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 44px 0 44px !important; border: 1px solid #D6D2CC !important; border-radius: 999px !important; background: #ffffff !important;
  font-family: var(--mk-body) !important; font-size: 16px !important; color: var(--mk-ink) !important; box-shadow: none !important;
}
html body:not(.mf):not(.rx) #catalogo .catalog-search__input::placeholder { color: var(--mk-ink-2); opacity: 1; }
html body:not(.mf):not(.rx) #catalogo .catalog-search__input:focus { border-color: var(--mk-ink) !important; outline: 3px solid #87CEEB; outline-offset: 1px; }

/* Celular y tablet: la fila de fichas se desplaza (la primera activa, la segunda asoma) y sus bordes se desvanecen */
@media (max-width: 1023px) {
  html body:not(.mf):not(.rx) #catalogo .catalog-toolbar__filters { margin-inline: -24px; width: calc(100% + 48px); }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 4px 24px !important; scroll-snap-type: x proximity; scroll-padding-inline: 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100% !important;
  }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs::-webkit-scrollbar { display: none; }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs.is-overflow-right:not(.is-overflow-left) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs.is-overflow-left:not(.is-overflow-right) { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs.is-overflow-left.is-overflow-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  html body:not(.mf):not(.rx) #catalogo .catalog-search { max-width: none; }
}
@media (min-width: 1024px) {
  /* escritorio: las siete fichas caben a la vez y el buscador se queda a la izquierda, debajo */
  html body:not(.mf):not(.rx) #catalogo #cat-tabs { flex-wrap: wrap; }
}

/* Filtros completamente visibles en móvil: no esconder categorías a la derecha. */
@media (max-width: 1023px) {
  html body:not(.mf):not(.rx) #catalogo .catalog-toolbar__filters { margin-inline: 0; width: 100%; }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs {
    flex-wrap: wrap; overflow: visible; padding: 0 !important; scroll-snap-type: none;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab { white-space: normal; max-width: 100%; }
  html body:not(.mf):not(.rx) #catalogo #cat-tabs .cat-tab__nombre { text-align: left; }
}

html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix {
  display: grid; gap: 0; margin-top: .45rem; color: #191817;
  font-family: var(--mk-body); font-size: 13px; font-variant-numeric: tabular-nums;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
  align-items: center; gap: 4px; min-height: 27px; border-bottom: 1px solid #eceae7;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix__row > :not(:first-child) { text-align: right; }
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix__head {
  min-height: 32px; font-size: 11px; font-weight: 800; line-height: 1.2; color: #55514c;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix__variant {
  padding: 5px 0 2px; font-size: 11px; font-weight: 700; line-height: 1.3; color: #55514c;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-product-title-badge {
  min-height: 2.25rem; display: flex; align-items: center; line-height: 1.15;
}

/* 03-oct · Tarjetas completas: foto + nombre + precio + botón caben en una pantalla (Carlitos: «que no quede nada cortado»).
   La foto toma el alto que sobra después de lo demás (≈ 482 px de texto, tallas y botón) y nunca baja de 170 px ni pasa de 320 px.
   La foto es cuadrada con fondo negro, igual que la lámina: no se ve franja vacía. */
html body:not(.mf):not(.rx) #catalogo #cat-grid .catalog-product-stage {
  min-height: 0 !important; height: clamp(150px, calc(100svh - 586px), 320px) !important; aspect-ratio: auto !important;
}
html body:not(.mf):not(.rx) #catalogo #cat-grid .catalog-product-stage .catalog-product-visual img { object-fit: contain !important; width: 100%; height: 100%; }
html body:not(.mf):not(.rx) #catalogo #cat-grid .cat-card > .p-5 > p:first-of-type {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body:not(.mf):not(.rx) #catalogo #cat-grid .cat-card > .p-5 { padding: 1rem !important; }
/* Las sugerencias de pack se muestran en la sección de packs. En la tarjeta
   de producto ocupaban casi una línea de pantalla entre la matriz y el CTA. */
html body:not(.mf):not(.rx) #catalogo #cat-grid .cat-card > .p-5 > .pack-hint { display: none !important; }

/* Una sola lectura de precios por tarjeta: muestra todos los tramos y el CTA
   sin repetir importes ni gastar altura en descripciones secundarias. */
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-category-track .cat-card > .p-5 {
  gap: .45rem !important; padding: .65rem .8rem .8rem !important;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-product-title-badge {
  margin: .45rem .9rem 0 !important; font-size: .95rem !important; line-height: 1.15 !important;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-card-description,
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-size-prices,
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-fabric-prices { display: none !important; }
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix { margin-top: 0 !important; font-size: 12px !important; }
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix__row { min-height: 23px; }
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix__head { min-height: 25px; }
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-price-matrix__variant { padding: 3px 0 0; }
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .catalog-category-track .cat-card .mt-4 { padding-top: .45rem !important; }
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo .cat-card [data-product-btn] { min-height: 42px; padding-block: .6rem !important; }

/* 06-oct · Los filtros deben quedar completos y los controles dentro de una altura de pantalla razonable.
   Más especificidad + !important corrige el carrusel móvil previo que anulaba el wrap. */
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo #cat-tabs {
  display: flex !important; flex-wrap: wrap !important; overflow: visible !important; max-height: none !important;
  padding: 0 !important; -webkit-mask-image: none !important; mask-image: none !important;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo #cat-tabs .cat-tab {
  max-width: 100% !important; white-space: normal !important;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo #cat-grid[data-catalog-carousel] > .cat-card {
  min-height: 0 !important; height: auto !important;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo #cat-grid[data-catalog-carousel] {
  align-items: flex-start !important;
}
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo #cat-grid .catalog-product-stage {
  flex: 0 0 auto !important; height: clamp(150px, calc(100svh - 610px), 280px) !important;
}

/* ============================== 7 · LOS SIETE TÍTULOS EN FUENTE DE MARCA (04-oct) ============================== */
/* Carlitos: «en la parte de packs y otras partes la fuente que se usa no es la que está definida para el sitio».
   Medido con navegador real sobre el commit de producción: los seis títulos de packs/equipaciones de #promociones
   (Pack Dupla, Pack Conjunto, Pack Entrenamiento, Pack Invierno, Equipación Oficial, Equipación Mundial) y el
   «Todos los productos» que arma catalog-carousel.js en #catalogo-modelos salían en Archivo, no en Anton como el
   resto de los titulares. Los fijaba marca.css con `body:not(.mf):not(.rx) main :is(h3,h4,h5)`; aquí se repiten con
   más especificidad (id + data-ens-page) y !important, como el resto de esta hoja.
   Anton es condensada y más alta: se cuida el interlineado (1.2) para que las cajas de las tarjetas no se rompan.
   Se apunta a los tres contenedores exactos para no tocar de rebote los h3 de producto que el mismo JS mueve dentro
   de #catalogo-modelos. */
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #promociones #packs h3,
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #promociones #equipaciones h3,
html body:not(.mf):not(.rx)[data-ens-page="catalog"] #catalogo-modelos h3[data-catalog-title] {
  font-family: var(--mk-display) !important;   /* Anton, la de titulares de marca */
  font-weight: 400 !important;                 /* un solo grosor: nada de negrita sintética */
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}