/* ===========================================================================
   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;
}