/* 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: home-refresh.css */
/* ===========================================================================
   home-refresh.css — inicio (02-oct-2026)
   Carlitos: «QUERÍA UNA SOLA SECCIÓN que cambiara las imágenes y los copys al scroll como la referencia».
   Referencia: klarna.com/us («Your everyday money app»): título arriba, imagen a un lado y copy al otro,
   fijos en una pantalla mientras se baja; cada paso cambia imagen y texto juntos.

   1. #proceso  · escena fija de 4 pasos (home-refresh.js manda el paso en data-paso)
   2. galería   · carrusel con snap, flechas, contador y visor a pantalla completa
   3. cierre    · «Nosotros diseñamos. Tu equipo decide.»
   4. logo final · en celular el video ocupa su proporción y la sección mide lo que mide el video

   Tipografía: SOLO los tokens de marca (--mk-display = Hussar Bold, un solo grosor → font-weight 400;
   --mk-body = Jost). Movimiento: solo transform y opacity (+ clip-path en el revelado de la lámina),
   cubic-bezier(.22,1,.36,1), 450–700 ms; con prefers-reduced-motion todo se ve completo y quieto.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. PROCESO
   Por defecto (sin JavaScript o con movimiento reducido) NO hay escena fija: los cuatro pasos se leen
   uno tras otro, cada uno con su imagen y su copy. El <script> de index.html agrega html.proceso-js solo si
   el movimiento no está reducido, y home-refresh.js confirma con html.proceso-listo.
   --------------------------------------------------------------------------- */
html body.ensutex-home:not(.mf):not(.rx) #proceso.proceso {
  --p-cab: 78px;                       /* alto de la cabecera fija (64 px en celular) */
  --p-curva: var(--mk-curva, cubic-bezier(.22, 1, .36, 1));
  --p-radio: var(--mk-radio-panel, 24px);
  background: #fff !important;
  color: var(--mk-ink);
  padding: 0 !important;
}
@media (max-width: 767px) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso.proceso { --p-cab: 64px; }
}

html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
  box-sizing: border-box;
  padding: clamp(48px, 8vw, 88px) 24px;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema { margin: 0 0 18px !important; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
  margin: 0; max-width: 20ch;
  font-size: clamp(30px, 4.4vw, 54px) !important;
  line-height: 1.08 !important;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-pasos {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: clamp(40px, 6vw, 72px); max-width: 1040px;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; gap: clamp(32px, 5vw, 64px);
  }
}

/* La lámina: toma el color EXACTO de las esquinas de su foto (--lamina, por paso). */
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
  position: relative; margin: 0; overflow: hidden;
  height: clamp(260px, 64vw, 340px);
  background: var(--lamina, #fff);
  border-radius: var(--p-radio);
}
@media (min-width: 900px) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina { height: 440px; }
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
}
/* Filo apenas visible: el borde de la lámina se lee igual aunque la foto sea casi blanca. */
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(21, 20, 19, .08);
}

/* Copy: etiqueta · título · bajada · viñetas */
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta {
  margin: 0 0 8px; padding: 0;
  font: 600 14px/1.2 var(--mk-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--mk-rojo-texto) !important; text-shadow: none !important;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
  margin: 0 0 10px;
  font-family: var(--mk-display) !important; font-weight: 400 !important; font-style: normal !important;
  text-transform: uppercase !important; letter-spacing: 0 !important; line-height: 1.1 !important;
  font-size: clamp(25px, 2.65vw, 38px) !important;
  color: var(--mk-ink);
  text-wrap: balance;
}
/* El título es además el botón que lleva a su paso (mismo camino que tenía el indicador retirado):
   el botón va sin caja ni relleno, con la letra, el color y las mayúsculas del titular, así que no
   se ve. (Los botones no heredan text-transform: hay que pedirlo a mano.) */
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo .proceso-salto {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left; cursor: pointer;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
  margin: 0 0 14px;
  font: 500 clamp(18px, 1.55vw, 22px)/1.35 var(--mk-body);
  color: var(--mk-ink) !important; text-shadow: none !important;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil { display: none; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
  position: relative; margin: 0; padding: 0 0 0 20px;
  font: 400 17px/1.4 var(--mk-body); color: var(--mk-ink-2); text-shadow: none;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li::before {
  content: ''; position: absolute; left: 2px; top: .56em; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-rojo);
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos strong { color: var(--mk-ink); font-weight: 700; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .nw { white-space: nowrap; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  margin-top: 18px; min-height: 48px; padding: 0 26px;
  font: 600 16px/1 var(--mk-body) !important; text-decoration: none;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta strong { font-weight: 700; }
html body.ensutex-home:not(.mf):not(.rx) #proceso :is(a, button):focus-visible { outline: 3px solid var(--mk-rojo); outline-offset: 3px; }

/* ----- Escena fija (solo con html.proceso-js) -----
   La sección blanca se pone por encima de la que viene (la franja negra de #mockups-resumen, que
   entra desde abajo): si algún día el contenido creciera de más y se saliera de su caja, se vería
   sobre el blanco en vez de quedar tapado. Es red de seguridad; el arreglo es que todo entre. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso { position: relative; z-index: 1; }
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-track { height: 156vh; height: 156svh; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
  position: sticky; top: var(--p-cab);
  height: calc(100vh - var(--p-cab)); height: calc(100svh - var(--p-cab));
  display: flex; flex-direction: column;
  padding: clamp(10px, 2.2svh, 26px) 24px clamp(12px, 2.4svh, 28px);
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab { flex: none; margin-bottom: clamp(10px, 3svh, 32px); }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema { margin-bottom: clamp(8px, 1.6svh, 16px) !important; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 { font-size: clamp(25px, 7.4vw, 36px) !important; }

/* Cuerpo: una cuadrícula. La <ol>, los <li> y las copias «desaparecen» (display: contents) para que
   las cuatro láminas compartan la columna de la imagen y, en la otra, se apilen los cuatro títulos
   (una misma celda), la bajada, las viñetas y el botón. Los renglones del índice reservan su alto:
   así el botón vive siempre en el mismo sitio y nada se sale de la escena. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
  --p-renglon: 38px;   /* alto de cada renglón del índice; el JS lo agranda si un título ocupa dos líneas */
  --p-subida: 12px;    /* cuánto sube el título que toma el relevo */
  flex: 1 1 auto; min-height: 0;
  width: min(100%, 560px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto calc(4 * var(--p-renglon) + var(--p-subida)) auto auto auto;
  row-gap: 8px;
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso :is(.proceso-pasos, .proceso-paso, .proceso-copia) { display: contents; }

/* La lámina sube desde abajo: el clip-path la va descubriendo y la foto, dentro, acompaña el
   movimiento (es lo que pidió el cliente: «láminas que suban desde abajo»). */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
  grid-column: 1; grid-row: 1; height: auto; min-height: 0;
  clip-path: inset(100% 0 0 0 round var(--p-radio));
  transition: clip-path 780ms var(--p-curva);
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:nth-child(2) .proceso-lamina { z-index: 2; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:nth-child(3) .proceso-lamina { z-index: 3; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:nth-child(4) .proceso-lamina { z-index: 4; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:is([data-estado="activo"], [data-estado="pasado"]) .proceso-lamina {
  clip-path: inset(0 0 0 0 round var(--p-radio));
}
/* La foto sube un poco más lento que la lámina: la entrada se siente como una capa que se desliza encima. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina img {
  transform: translate3d(0, 9%, 0) scale(1.06);
  transition: transform 900ms var(--p-curva);
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:is([data-estado="activo"], [data-estado="pasado"]) .proceso-lamina img { transform: none; }

/* Los cuatro títulos, apilados y a la vista (mecanismo de la referencia: el renglón que va en
   curso queda encendido y los demás apagados). El activo va a color pleno y tamaño completo; los
   otros, atenuados (0.35) y algo más chicos (0.85). La posición y el énfasis los escribe el
   JavaScript en cada cuadro (--p-y, --p-esc, --p-op), así que el relevo va con el scroll —suave—
   y cada título sube desde abajo hasta su renglón cuando le toca. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
  grid-column: 1; grid-row: 3; align-self: start;
  margin: 0 !important;
  transform-origin: left center;
  transform: translate3d(0, var(--p-y, 0px), 0) scale(var(--p-esc, 1));
  opacity: var(--p-op, 1);
  transition: transform 140ms linear, opacity 140ms linear;
  will-change: transform, opacity;
}

/* Sólo el paso en curso muestra su etiqueta, su bajada, sus viñetas y su botón: los demás entran y
   salen con un fundido corto. El título es lo único que se queda siempre a la vista. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso :is(.proceso-etiqueta, .proceso-bajada, .proceso-resumen-movil, .proceso-puntos, .proceso-cta) {
  grid-column: 1;
  opacity: 0; visibility: hidden; transform: translate3d(0, 12px, 0);
  transition: opacity 260ms var(--p-curva), transform 360ms var(--p-curva), visibility 0s linear 260ms;
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta { grid-row: 2; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada { grid-row: 4; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { grid-row: 5; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta { grid-row: 6; align-self: start; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso[data-estado="activo"] :is(.proceso-etiqueta, .proceso-bajada, .proceso-resumen-movil, .proceso-puntos, .proceso-cta) {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 380ms var(--p-curva) 120ms, transform 460ms var(--p-curva) 120ms, visibility 0s;
}

/* Ancho de escritorio: dos columnas centradas —lámina a la izquierda, panel de pasos a la derecha—,
   todo dentro de una pantalla. La fila del índice reserva exactamente sus cuatro renglones. */
@media (min-width: 900px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena { padding-inline: 32px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 { font-size: clamp(34px, min(4vw, 6.4svh), 54px) !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: 52px;
    --p-subida: 16px;
    width: min(100%, 1040px);
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    grid-template-rows: minmax(0, 1fr) auto calc(4 * var(--p-renglon) + var(--p-subida)) auto auto auto minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 64px); row-gap: 10px;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina { grid-column: 1; grid-row: 1 / -1; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso :is(.proceso-titulo, .proceso-etiqueta, .proceso-bajada, .proceso-puntos, .proceso-cta) { grid-column: 2; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta { font-size: 15px; margin-bottom: 10px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada { margin-bottom: 18px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { gap: 12px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li { font-size: 19px; padding-left: 24px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li::before { top: .6em; }
}
/* Pantalla de escritorio BAJITA — el hueco que dejaba cortado el paso 4.
   La escena mide alto de pantalla menos la cabecera, y el comprimido para
   pantallas bajas sólo existía para celular (max-width: 899px). En una ventana
   ancha pero baja —1440×560, medido— el contenido del paso 4 se salía 45 px de
   la caja y la sección siguiente le tapaba la prenda y el botón. Ahora también
   se comprime a lo ancho, y el índice, la bajada, las viñetas y el botón tienen
   su alto reservado: el paso 4 entra entero y el botón nunca queda debajo de la
   franja negra que sube. */
@media (min-width: 900px) and (max-height: 800px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-top: clamp(6px, 1.1svh, 14px);
    padding-bottom: clamp(8px, 1.2svh, 16px);
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab { margin-bottom: clamp(6px, 1.2svh, 14px); }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema { margin-bottom: clamp(4px, .9svh, 10px) !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 { font-size: clamp(30px, min(4vw, 5.2svh), 48px) !important; max-width: none !important; }
  /* El relevo se aprieta antes que el texto: los renglones y el aire entre filas bajan, las letras no. */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo { --p-renglon: 50px; --p-subida: 14px; row-gap: 2px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta { margin-bottom: clamp(2px, .6svh, 8px); }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada { margin-bottom: clamp(6px, 1.2svh, 14px); }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { gap: clamp(4px, .8svh, 8px); }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li { font-size: 18px; padding-left: 22px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta { margin-top: clamp(6px, 1.2svh, 14px); min-height: clamp(40px, 7svh, 48px); }
}

/* Y en las muy bajas, un escalón más: nada se esconde, todo entra —el botón incluido— y la franja
   negra que sube no alcanza a taparlo. */
@media (min-width: 900px) and (max-height: 660px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena { padding-top: 6px; padding-bottom: 8px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab { margin-bottom: 6px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema { margin-bottom: 3px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 { font-size: clamp(24px, 3.6vw, 30px) !important; max-width: none !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo { --p-renglon: 36px; --p-subida: 8px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo { font-size: clamp(24px, 2.1vw, 30px) !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada { font-size: clamp(17px, 1.4vw, 19px); }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li { font-size: 16px; line-height: 1.35; }
}

/* Celular (< 900): lámina arriba, títulos apilados en medio, copy y botón debajo; todo en una pantalla.
   El aire entre filas se aprieta para que la lámina —la prenda— conserve su presencia. */
@media (max-width: 899px) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada,
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { display: none !important; }
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil {
    display: block;
    grid-column: 1;
    grid-row: 4;
    align-self: start;
    margin: 0;
    max-width: 42ch;
    color: var(--mk-ink-2);
    font: 500 15px/1.38 var(--mk-body);
    text-wrap: pretty;
  }
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil strong { color: var(--mk-ink); font-weight: 700; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil { grid-row: 4; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    grid-row: 5;
    margin-top: 2px;
    min-height: 44px;
    padding-inline: 20px;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: 32px;
    --p-subida: 10px;
    grid-template-rows: minmax(112px, 1fr) auto calc(4 * var(--p-renglon) + var(--p-subida)) auto auto;
    row-gap: 4px;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo { font-size: clamp(22px, 6.4vw, 25px) !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li { font-size: 16px; line-height: 1.35; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada { font-size: 18px; margin-bottom: 8px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta { margin-bottom: 2px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { gap: 5px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta { margin-top: 8px; }
}
/* Pantallas bajitas: el copy no se achica, la imagen sí */
@media (max-height: 760px) and (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena { padding-top: 8px; padding-bottom: 10px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab { margin-bottom: 8px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema { margin-bottom: 6px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo { --p-renglon: 29px; --p-subida: 8px; row-gap: 3px; }
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil { font-size: 14.5px; line-height: 1.34; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada { margin-bottom: 8px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { gap: 4px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li { line-height: 1.3; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta { margin-top: 8px; min-height: 46px; }
}
@media (max-height: 660px) and (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena { padding-top: 4px; padding-bottom: 4px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab { margin-bottom: 4px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema { margin-bottom: 4px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo { --p-renglon: 25px; --p-subida: 5px; row-gap: 2px; }
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil { font-size: 13.5px; line-height: 1.3; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta { margin-top: 0; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso * { transition: none !important; animation: none !important; }
  /* Con movimiento reducido nada puede quedar oculto ni recortado, ni siquiera si el navegador
     cambiara la preferencia con la escena ya montada. */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso :is(.proceso-etiqueta, .proceso-bajada, .proceso-resumen-movil, .proceso-puntos, .proceso-cta) {
    opacity: 1 !important; visibility: visible !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina { clip-path: none !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina img { transform: none !important; }
}

/* Mientras la escena está en pantalla se quitan la barra fija de celular y los botones flotantes (Asu no
   responde dentro de esta sección): su botón ya está en el paso 4. */
@media (max-width: 767px) {
  html body.ensutex-home.ens-process-inview #sticky-cta-mobile { display: none !important; }
}
html body.ensutex-home.ens-process-inview :is(.floating-widgets, .asu-presenta) { visibility: hidden !important; pointer-events: none !important; }

/* El overflow:hidden del sistema antiguo creaba un scroll distinto en móvil y rompe el sticky. */
html:has(body.ensutex-home:not(.menu-open)), html body.ensutex-home:not(.menu-open) { overflow-x: clip !important; overflow-y: visible !important; }

/* ---------------------------------------------------------------------------
   2. GALERÍA «Cómo se ve la ropa sublimada» (#home-gallery-rail)
   --------------------------------------------------------------------------- */
#mockups-resumen.ens-gallery { overflow: hidden; --g-lamina: #e6e3de; }
#mockups-resumen .ens-gallery__shell { width: 100%; }
/* el carrusel parte alineado con el resto de la página y el siguiente diseño asoma hasta el borde de la pantalla */
#mockups-resumen .ens-gallery__rail { padding-inline: max(32px, calc((100% - 76rem) / 2)); scroll-padding-inline: max(32px, calc((100% - 76rem) / 2)); }
#mockups-resumen .ens-gallery__controls { width: min(calc(100% - 64px), 76rem); margin-inline: auto; }
#mockups-resumen .ens-home-mockups__head h2 { font-size: clamp(30px, 4.2vw, 56px) !important; line-height: 1.08 !important; }
#mockups-resumen .ens-gallery__rail {
  display: flex; gap: 16px; position: relative;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 4px 0 10px; touch-action: pan-x pan-y;
  cursor: grab;
}
#mockups-resumen .ens-gallery__rail::-webkit-scrollbar { display: none; }
#mockups-resumen .ens-gallery__rail.is-arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
#mockups-resumen .ens-gallery__rail:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: var(--mk-radio-panel, 24px); }
#mockups-resumen .ens-gallery__item {
  position: relative; flex: 0 0 clamp(250px, 24vw, 330px); aspect-ratio: 4 / 5; height: auto; padding: 0; font-family: var(--mk-body);
  display: block; overflow: hidden;
  border: 0; border-radius: var(--mk-radio-panel, 24px);
  background: var(--g-lamina);
  scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
#mockups-resumen .ens-gallery__item img {
  display: block; width: 100%; height: 100%; padding: 5%; box-sizing: border-box;
  object-fit: contain; object-position: center; -webkit-user-drag: none; user-select: none;
  transition: transform 600ms var(--mk-curva, cubic-bezier(.22, 1, .36, 1));
}
@media (hover: hover) { #mockups-resumen .ens-gallery__item:hover img { transform: scale(1.035); } }
/* Pista de «tocar para ampliar»: un + en círculo, abajo a la derecha (decorativo) */
#mockups-resumen .ens-gallery__item::after {
  content: ''; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%;
  background:
    linear-gradient(var(--mk-ink, #151413), var(--mk-ink, #151413)) center / 14px 2px no-repeat,
    linear-gradient(var(--mk-ink, #151413), var(--mk-ink, #151413)) center / 2px 14px no-repeat,
    rgba(255, 255, 255, .82);
  pointer-events: none;
}
#mockups-resumen .ens-gallery__item:focus-visible { outline: 3px solid var(--mk-rojo, #e20613); outline-offset: 3px; }

#mockups-resumen .ens-gallery__controls {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px;
  color: #fff; font: 600 17px/1 var(--mk-body);
}
#mockups-resumen .ens-gallery__controls > div { display: flex; gap: 12px; }
#mockups-resumen .ens-gallery__pos { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
#mockups-resumen .ens-gallery__controls button,
#mockups-resumen .ens-gallery__dialog-prev,
#mockups-resumen .ens-gallery__dialog-next,
#mockups-resumen .ens-gallery__close {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .08); font: 400 22px/1 var(--mk-body);
  transition: background-color 200ms, opacity 200ms;
}
#mockups-resumen .ens-gallery__controls button:hover:not([disabled]),
#mockups-resumen .ens-gallery__dialog-prev:hover, #mockups-resumen .ens-gallery__dialog-next:hover,
#mockups-resumen .ens-gallery__close:hover { background: rgba(255, 255, 255, .22); }
#mockups-resumen .ens-gallery__controls button[disabled] { opacity: .35; cursor: default; }
#mockups-resumen .ens-gallery__controls button:focus-visible,
#mockups-resumen .ens-gallery__dialog :is(button):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Visor a pantalla completa */
#mockups-resumen .ens-gallery__dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(10, 10, 10, .94); color: #fff; overflow: hidden; font-family: var(--mk-body);
}
#mockups-resumen .ens-gallery__dialog::backdrop { background: rgba(10, 10, 10, .94); }
#mockups-resumen .ens-gallery__dialog[open] { display: flex; align-items: center; justify-content: center; }
#mockups-resumen .ens-gallery__escena {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 72px 16px 88px; box-sizing: border-box; touch-action: pan-y pinch-zoom;
}
#mockups-resumen .ens-gallery__dialog img {
  display: block; width: auto; height: auto; max-width: min(100%, 920px); max-height: 100%; padding: 3%; box-sizing: border-box;
  object-fit: contain; background: var(--g-lamina); border-radius: var(--mk-radio-panel, 24px);
}
#mockups-resumen .ens-gallery__close { position: absolute; top: 14px; right: 14px; z-index: 3; font-size: 26px; }
#mockups-resumen .ens-gallery__dialog-prev, #mockups-resumen .ens-gallery__dialog-next { position: absolute; z-index: 3; bottom: 20px; }
#mockups-resumen .ens-gallery__dialog-prev { left: 16px; }
#mockups-resumen .ens-gallery__dialog-next { right: 16px; }
#mockups-resumen .ens-gallery__count {
  position: absolute; left: 50%; bottom: 34px; z-index: 3; transform: translateX(-50%); margin: 0;
  color: #fff; font: 600 17px/1 var(--mk-body); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
  #mockups-resumen .ens-gallery__escena { padding: 40px 120px; }
  #mockups-resumen .ens-gallery__dialog-prev, #mockups-resumen .ens-gallery__dialog-next { bottom: auto; top: calc(50% - 24px); }
  #mockups-resumen .ens-gallery__dialog-prev { left: 32px; }
  #mockups-resumen .ens-gallery__dialog-next { right: 32px; }
  #mockups-resumen .ens-gallery__count { bottom: 22px; }
}
html.ens-gallery-abierta, html.ens-gallery-abierta body { overflow: hidden !important; }

@media (max-width: 767px) {
  /* a sangre en celular: el siguiente diseño asoma por el borde de la pantalla */
  #mockups-resumen .ens-gallery__rail { gap: 14px; padding-inline: 24px; scroll-padding-inline: 24px; }
  #mockups-resumen .ens-gallery__item { flex-basis: min(calc(100vw - 88px), 330px); }
  #mockups-resumen .ens-gallery__controls { width: calc(100% - 48px); }
  #mockups-resumen .ens-home-mockups__head h2 { font-size: clamp(26px, 8vw, 40px) !important; }
  #mockups-resumen .ens-gallery__escena { padding: 72px 8px 88px; }
}
@media (prefers-reduced-motion: reduce) {
  #mockups-resumen .ens-gallery__item img { transition: none; }
  #mockups-resumen .ens-gallery__item:hover img { transform: none; }
}

/* ---------------------------------------------------------------------------
   3. CIERRE «Nosotros diseñamos. Tu equipo decide.»
   --------------------------------------------------------------------------- */
#cierre-equipo .ens-home-close__copy > p + p { margin-top: -.25rem; }
@media (max-width: 767px) {
  /* Hussar Bold es ancha: el titular cabe en 3 líneas también en 360 px */
  #cierre-equipo .ens-home-close__copy h2 { font-size: clamp(26px, 7.7vw, 34px) !important; }
}

/* ---------------------------------------------------------------------------
   4. LOGO FINAL (#contacto) — regla R-VIDEO-FRANJA
   El fondo de la sección toma el color EXACTO de las esquinas del póster/video (#010102: las esquinas de
   logo1.webp son (2,2,2) (0,0,0) (2,2,4) (0,0,2)), sin los brillos rojos que dibujaban el rectángulo del video.
   En celular el video ocupa el ancho de la pantalla a su proporción (16:9) y la sección mide lo que mide el video.
   --------------------------------------------------------------------------- */
html body.ensutex-home #contacto.ens-logo-finale { background: #010102; }
html body.ensutex-home #contacto.ens-logo-finale::before,
html body.ensutex-home #contacto.ens-logo-finale::after,
html body.ensutex-home #contacto.ens-logo-finale .ens-logo-finale__glow { display: none; }
@media (max-width: 767px) {
  html body.ensutex-home #contacto.ens-logo-finale { display: block; height: auto; min-height: 0; padding: 0; }
  html body.ensutex-home #contacto.ens-logo-finale .ens-logo-finale__media { width: 100%; max-width: none; }
}


/* Source: home-motion-05oct.css */
/* HOME · 05 octubre. Static composition first; entry motion follows scrolling. */
html body.ensutex-home #hero-section.ens-motion-hero--video::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: clamp(140px, 22vh, 200px);
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 28%, rgba(0, 0, 0, .65) 65%, #000 100%);
}
html body.ensutex-home #ensutex-continuity {
  position: relative;
  isolation: isolate;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: clip;
  background: #000;
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem) 24px clamp(2.5rem, 5vw, 4rem);
}
html body.ensutex-home #ensutex-continuity #contacto.ens-logo-finale {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: clip;
  background: #000;
}
html body.ensutex-home #ensutex-continuity #contacto::before,
html body.ensutex-home #ensutex-continuity #contacto::after,
html body.ensutex-home #ensutex-continuity .ens-logo-finale__glow { display: none; }
html body.ensutex-home #ensutex-continuity .ens-home-continuity__media {
  width: min(100%, 900px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  opacity: 1;
  transform: none;
  transition: none;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  width: min(100%, 1100px);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding: 0;
  list-style: none;
}
.ens-home-continuity__benefits li { min-width: 0; padding-top: 1rem; border-top: 1px solid #333; }
.ens-home-continuity__benefits strong {
  display: block;
  margin-bottom: .45rem;
  color: #fff;
  font: 400 clamp(1.25rem, 1.6vw, 1.55rem)/1.15 var(--mk-display, "Anton", sans-serif);
  text-transform: uppercase;
}
.ens-home-continuity__benefits p,
.ens-home-continuity__benefits span {
  display: block;
  margin: 0;
  color: #d4d4d4;
  font: 400 .95rem/1.5 var(--mk-body, "Archivo", sans-serif);
}
.ens-home-continuity__benefits a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ens-home-continuity__benefits a span { display: inline; color: inherit; font: inherit; }
.ens-home-continuity__benefits a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* White surrounding scene; the actual lilac film retains its own frame color. */
html body.ensutex-home #cierre-equipo.ens-home-close { background: #fff !important; overflow: clip; }
html body.ensutex-home #cierre-equipo::before,
html body.ensutex-home #cierre-equipo::after { display: none !important; }
html body.ensutex-home #cierre-equipo .ens-home-close__media {
  opacity: 1;
  transform: none;
  transition: none;
}
/* The automatic welcome card must leave the films visible. The chat button stays usable. */
body.ensutex-home.ens-home-film-inview .asu-presenta {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  html body.ensutex-home #hero-section.ens-motion-hero--video {
    min-height: calc(100svh - var(--nav-height-mobile, 64px) - var(--ensutex-consent-offset, 0px)) !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    min-height: calc(100svh - var(--nav-height-mobile, 64px) - var(--ensutex-consent-offset, 0px)) !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-hero-video,
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-hero-movil__fondo {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-actions {
    padding-top: .5rem !important;
    gap: .2rem !important;
  }
  html body.ensutex-home #ensutex-continuity { padding: 1.5rem 24px 2.5rem; }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__media {
    width: calc(100% + 48px);
    max-width: none;
    margin-inline: -24px;
  }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.1rem;
    margin-top: 1.25rem;
  }
  .ens-home-continuity__benefits strong { font-size: 1.3rem; }
  .ens-home-continuity__benefits p,
  .ens-home-continuity__benefits span { font-size: .9rem; }
}

/* In a 360×600 viewport, keep the promise and both routes in the first screen. */
@media (max-width: 767px) and (max-height: 700px) {
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    padding-top: 1rem !important;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom)) !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-eyebrow {
    margin-bottom: .4rem !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-hero__title {
    font-size: clamp(27px, 8vw, 30px) !important;
    line-height: 1.08 !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-hero__lead {
    margin-top: .45rem !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-actions {
    padding-top: .4rem !important;
    gap: 0 !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video #hero-primary-cta {
    min-height: 48px !important;
    padding-block: .7rem !important;
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-actions .ens-motion-link {
    min-height: 40px !important;
    padding-block: .35rem !important;
    font-size: .85rem !important;
  }
}

/* No critical content is hidden before JavaScript initializes the enhancement. */
@keyframes ens-home-logo-enter {
  from { opacity: 0; transform: translateY(64px); }
  to { opacity: 1; transform: none; }
}
@keyframes ens-home-benefits-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes ens-home-lilac-enter {
  from { opacity: .15; transform: translateX(28%); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  html.ens-home-motion-native body.ensutex-home #ensutex-continuity .ens-home-continuity__media {
    animation: ens-home-logo-enter 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
  html.ens-home-motion-native body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits {
    animation: ens-home-benefits-enter 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 75%;
  }
  html.ens-home-motion-native body.ensutex-home #cierre-equipo .ens-home-close__media {
    animation: ens-home-lilac-enter 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 75%;
  }
}

/* Older engines: finite reveal on actual visibility, with the same final frame. */
html.ens-home-motion-fallback .ens-home-motion-target { transition: opacity .65s ease, transform .85s cubic-bezier(.22, 1, .36, 1) !important; }
html.ens-home-motion-fallback body.ensutex-home #ensutex-continuity .ens-home-continuity__media:not(.ens-home-motion-entered) { opacity: 0; transform: translateY(64px); }
html.ens-home-motion-fallback body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits:not(.ens-home-motion-entered) { opacity: 0; transform: translateY(24px); }
html.ens-home-motion-fallback body.ensutex-home #cierre-equipo .ens-home-close__media:not(.ens-home-motion-entered) { opacity: .15; transform: translateX(28%); }

@media (prefers-reduced-motion: reduce) {
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__media,
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits,
  html body.ensutex-home #cierre-equipo .ens-home-close__media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Source: ensutex-home-guide-05oct.css */
/* Ensutex · 05-oct: one compact, scroll-led design guide and measured mobile process media. */
:root { --gd-ink:#171514; --gd-paper:#fff; --gd-muted:#bcb8b5; --gd-red:#e20613; }
/* Home gallery: keep a legible caption and the measured source background per client design. */
#mockups-resumen .ens-gallery__item{display:flex;flex-direction:column;aspect-ratio:auto;height:clamp(365px,34vw,420px);background:var(--g-lamina,#e6e3de)}
#mockups-resumen .ens-gallery__item img{flex:1 1 auto;min-height:0;height:0;padding:5%;background:var(--g-lamina,#e6e3de)}
#mockups-resumen .ens-gallery__caption{display:block;flex:none;min-height:48px;padding:11px 14px;background:#141312;color:#fff;text-align:left;font:600 14px/1.3 var(--mk-body,'Archivo',sans-serif)}
#mockups-resumen .ens-gallery__dialog{--g-lamina:#e6e3de}
#mockups-resumen .ens-gallery__dialog img{background:var(--g-lamina,#e6e3de)}
#mockups-resumen .ens-home-mockups__head h2{font-family:var(--mk-display,'Anton',sans-serif)!important;letter-spacing:.005em!important;text-transform:uppercase!important}
#mockups-resumen .ens-gallery__offer{display:flex;width:min(calc(100% - 48px),76rem);align-items:center;justify-content:space-between;gap:24px;margin:22px auto 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.2)}
#mockups-resumen .ens-gallery__offer p{max-width:62ch;margin:0;color:#f1efed;font:400 15px/1.5 var(--mk-body,'Archivo',sans-serif)}
#mockups-resumen .ens-gallery__offer strong{font-weight:700;color:#fff}
#mockups-resumen .ens-gallery__offer a{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:9px;padding:10px 18px;border-radius:999px;background:#e20613;color:#fff;text-decoration:none;white-space:nowrap;font:700 14px/1.2 var(--mk-body,'Archivo',sans-serif)}
@media(max-width:767px){#mockups-resumen .ens-gallery__item{height:clamp(370px,116vw,440px)}#mockups-resumen .ens-gallery__caption{min-height:46px;padding:10px 12px;font-size:14px}#mockups-resumen .ens-gallery__offer{align-items:stretch;flex-direction:column;width:calc(100% - 48px);gap:14px}#mockups-resumen .ens-gallery__offer a{width:100%}}

/* The Klarna-inspired scene is a single panel; document scrolling advances the three topics. */
html body[data-ens-page="guide-design"] #main-content[data-guia="diseno"] {
  padding-top:80px; background:#fff; color:var(--gd-ink); overflow:clip;
}
@media(max-width:767px){html body[data-ens-page="guide-design"] #main-content[data-guia="diseno"]{padding-top:64px}}
.gd-wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.gd-intro{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:30px 0 22px}
.gd-eyebrow{margin:0 0 10px;color:#8d1d22;font:700 12px/1.2 var(--mk-body,'Archivo',sans-serif);letter-spacing:.12em;text-transform:uppercase}
.gd-intro h1,.gd-terms h2,.gd-bases h2,.gd-faq h2{margin:0;color:var(--gd-ink);font:400 clamp(36px,6vw,64px)/1.02 var(--mk-display,'Anton',sans-serif);text-transform:uppercase;letter-spacing:.005em}
.gd-intro>p:last-child{margin:12px 0 0;color:#56514e;font:400 17px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-scroll{width:min(1180px,calc(100% - 48px));margin:0 auto 34px}
.gd-stage{position:relative}
.gd-panel{position:relative;display:grid;grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr);gap:clamp(26px,5vw,72px);align-items:center;min-height:405px;padding:clamp(24px,4vw,48px);border-radius:26px;background:#141312;color:#fff}
.gd-panel__side>.gd-eyebrow{color:#e76b70}
.gd-panel h2{max-width:9ch;margin:0;font:400 clamp(31px,4.1vw,48px)/1.04 var(--mk-display,'Anton',sans-serif);text-transform:uppercase;letter-spacing:.005em}
.gd-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:28px}
.gd-tabs button{min-height:46px;padding:7px 5px;border:1px solid #575250;border-radius:10px;color:#cbc7c4;text-align:left;font:600 13px/1.1 var(--mk-body,'Archivo',sans-serif);cursor:pointer}
.gd-tabs button span{display:block;margin-top:3px}
.gd-tabs button[aria-selected="true"]{background:#fff;color:#171514;border-color:#fff}
.gd-tabs button:focus-visible,.gd-button:focus-visible{outline:3px solid #ef777d;outline-offset:3px}
.gd-topics{min-width:0}
.gd-topic{padding:5px 0 20px}
.gd-topic__step{margin:0 0 12px;color:#ff888d;font:700 13px/1.3 var(--mk-body,'Archivo',sans-serif);letter-spacing:.09em;text-transform:uppercase}
.gd-topic h3{max-width:22ch;margin:0 0 12px;color:#fff;font:500 clamp(23px,3vw,34px)/1.2 var(--mk-body,'Archivo',sans-serif);text-wrap:balance}
.gd-topic h3 strong{font-weight:750;color:#fff}
.gd-topic>p:last-child{max-width:46ch;margin:0;color:#d4d0cd;font:400 16px/1.5 var(--mk-body,'Archivo',sans-serif);text-wrap:pretty}
.gd-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.gd-button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:10px;padding:11px 17px;border-radius:999px;text-decoration:none;font:700 14px/1.2 var(--mk-body,'Archivo',sans-serif)}
.gd-button--primary{background:var(--gd-red);color:#fff}
.gd-button--quiet{border:1px solid #686360;color:#fff}
.gd-markers{display:none}
.gd-scroll.gd-scroll-js .gd-stage{height:calc(var(--gd-panel-height, 405px) + 56svh)}
.gd-scroll.gd-scroll-js .gd-panel{position:sticky;top:88px;min-height:0;height:var(--gd-panel-height,405px);z-index:1}
.gd-scroll.gd-scroll-js .gd-topics{position:relative;min-height:0}
.gd-scroll.gd-scroll-js .gd-topic{animation:gd-topic-in .25s ease both}
.gd-scroll.gd-scroll-js .gd-topic[hidden]{display:none!important}
.gd-scroll.gd-scroll-js .gd-markers{display:block;position:absolute;left:0;right:0;top:var(--gd-panel-height,405px);height:56svh;pointer-events:none}
.gd-markers i{position:absolute;left:0;width:1px;height:1px;top:0}
.gd-markers i:nth-child(2){top:50%}.gd-markers i:nth-child(3){top:100%}
@keyframes gd-topic-in{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:767px){html.gd-cta-visible .floating-widgets.ens-chat-widgets #chatbot-trigger,html.gd-cta-visible .floating-widgets.ens-chat-widgets #chatbot-cta{visibility:hidden!important;pointer-events:none!important}}

.gd-terms{padding:52px 0;background:#f5f4f2}
.gd-terms h2,.gd-bases h2,.gd-faq h2{font-size:clamp(32px,4vw,46px)}
.gd-terms__lead,.gd-bases__lead{max-width:66ch;margin:12px 0 22px;color:#56514e;font:400 16px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-terms__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0}
.gd-terms__rows article{display:grid;grid-template-columns:1fr;align-content:start;gap:12px;padding:18px;border:1px solid #dedbd8;border-radius:16px;background:#fff}
.gd-terms__rows article>span{color:#bb161f;font:400 20px/1 var(--mk-display,'Anton',sans-serif)}
.gd-terms__rows h3{margin:0 0 5px;font:700 17px/1.3 var(--mk-body,'Archivo',sans-serif)}
.gd-terms__rows p,.gd-terms__note{max-width:80ch;margin:0;color:#514c49;font:400 15px/1.55 var(--mk-body,'Archivo',sans-serif)}
.gd-terms__note{margin-top:18px;padding:15px 17px;border-left:3px solid var(--gd-red);background:#fff;color:#292624}
.gd-bases{padding:54px 0;background:#fff;scroll-margin-top:90px}
.gd-bases__empty{display:flex;max-width:700px;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:22px;border:1px solid #dedbd8;border-radius:18px;background:#faf9f8}
.gd-bases__empty p{max-width:42ch;margin:0;color:#4f4b48;font:500 16px/1.45 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__rail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 12px;color:#5d5854;font:700 13px/1.2 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__controls{display:flex;gap:8px}
.gd-bases__controls button{display:grid;width:42px;height:42px;place-items:center;border:1px solid #d8d5d2;border-radius:50%;background:#fff;color:#171514;font:700 20px/1 var(--mk-body,'Archivo',sans-serif);cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.gd-bases__controls button:hover:not(:disabled){border-color:#171514;background:#171514;color:#fff}
.gd-bases__controls button:disabled{opacity:.38;cursor:default}
.gd-bases__controls button:focus-visible{outline:3px solid #e20613;outline-offset:3px}
.gd-bases__grid{display:flex;gap:14px;margin-top:0;padding:2px 2px 12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#aaa transparent;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.gd-bases__grid::-webkit-scrollbar{height:6px}.gd-bases__grid::-webkit-scrollbar-thumb{border-radius:999px;background:#aaa}
.gd-bases__grid:focus-visible{outline:3px solid #e20613;outline-offset:3px}
.gd-bases__status{flex:0 0 100%;margin:18px 0;padding:18px;border:1px solid #dedbd8;border-radius:14px;background:#faf9f8;color:#514c49;font:500 15px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__fallback{margin:12px 0 0;color:#514c49;font:500 15px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__fallback a{color:#a5141c;font-weight:700;text-underline-offset:3px}
.gd-base-card{flex:0 0 calc((100% - 42px)/4);min-width:0;overflow:hidden;border:1px solid #dedbd8;border-radius:20px;background:#fff;scroll-snap-align:start}
.gd-base-card__visual{box-sizing:border-box;display:grid;place-items:center;height:360px;overflow:hidden;padding:8px;background:var(--base-bg,#f5f5f5)}
.gd-base-card__visual img{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center}
.gd-base-card__visual{cursor:zoom-in}
.gd-base-card__visual:focus-visible{outline:3px solid #e20613;outline-offset:2px}
.gd-base-card__body{display:grid;gap:6px;padding:15px 16px 16px}
.gd-base-card__body>span{color:#7c262a;font:700 12px/1.2 var(--mk-body,'Archivo',sans-serif);letter-spacing:.1em;text-transform:uppercase}
.gd-base-card__body h3{min-height:2.6em;margin:0;color:#171514;font:700 16px/1.3 var(--mk-body,'Archivo',sans-serif);text-wrap:balance}
.gd-base-card__body a{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding:9px 13px;border-radius:999px;background:#e20613;color:#fff;text-decoration:none;font:700 14px/1.2 var(--mk-body,'Archivo',sans-serif)}
.gd-faq{padding:50px 0 62px;background:#f5f4f2}
.gd-faq__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.gd-faq__grid article{padding:17px;border:1px solid #dedbd8;border-radius:16px;background:#fff}
.gd-faq__grid h3{margin:0 0 8px;font:700 16px/1.3 var(--mk-body,'Archivo',sans-serif)}
.gd-faq__grid p{margin:0;color:#56514e;font:400 14px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-footer-actions{display:flex;align-items:center;gap:20px;margin-top:24px}
.gd-footer-actions>a:last-child{font:600 14px/1.3 var(--mk-body,'Archivo',sans-serif);text-underline-offset:4px}

@media(max-width:899px){.gd-terms__rows{grid-template-columns:1fr}.gd-terms__rows article{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:15px}}
@media(min-width:768px) and (max-width:1099px){.gd-base-card{flex-basis:calc((100% - 14px)/2)}.gd-base-card__visual{height:360px}}
@media(max-width:767px){.gd-intro,.gd-wrap,.gd-scroll{width:calc(100% - 32px)}.gd-intro{padding:25px 0 18px}.gd-intro h1{font-size:39px}.gd-panel{display:block;min-height:0;padding:20px 16px;border-radius:20px}.gd-panel h2{max-width:14ch;font-size:30px}.gd-tabs{margin-top:18px}.gd-tabs button{min-height:48px;font-size:12px}.gd-topics{margin-top:20px}.gd-topic{padding-bottom:10px}.gd-topic h3{font-size:22px}.gd-topic>p:last-child{font-size:15px}.gd-panel__actions{align-items:stretch;flex-direction:column}.gd-button{width:100%;min-height:46px}.gd-scroll.gd-scroll-js .gd-panel{top:72px;height:auto;min-height:430px;padding:18px 16px}.gd-scroll.gd-scroll-js .gd-stage{height:calc(var(--gd-panel-height,430px) + 56svh)}.gd-scroll.gd-scroll-js .gd-markers{top:var(--gd-panel-height,430px)}.gd-terms,.gd-bases,.gd-faq{padding:38px 0}.gd-terms h2,.gd-bases h2,.gd-faq h2{font-size:34px}.gd-terms__rows article{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:15px}.gd-terms__rows h3{font-size:16px}.gd-terms__rows p,.gd-terms__note{font-size:14px}.gd-bases__empty{align-items:stretch;flex-direction:column;padding:17px}.gd-bases__grid{gap:12px;padding:2px 24px 12px;scroll-padding-inline:24px}.gd-base-card{flex:0 0 min(calc(100vw - 88px),330px);scroll-snap-align:start} .gd-base-card__visual{height:360px}.gd-base-card__body{padding:13px}.gd-faq__grid{grid-template-columns:1fr;gap:10px}.gd-footer-actions{align-items:stretch;flex-direction:column;gap:14px}}
@media(min-width:768px) and (max-width:1023px){.gd-panel{grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:24px;padding:28px}.gd-panel h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.gd-scroll.gd-scroll-js .gd-stage{height:auto!important}.gd-scroll.gd-scroll-js .gd-panel{position:relative;top:auto;height:auto!important;min-height:0!important}.gd-scroll.gd-scroll-js .gd-topic[hidden]{display:block!important}.gd-markers{display:none!important}.gd-topic{animation:none!important}}

/* Las reglas particulares de las dos guías respetan el mismo ritmo y encuadre. */
@media (max-width: 767px) {
  .gd-terms__rows article {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #dedbd8;
    border-radius: 0;
    background: transparent;
  }
  .gd-terms__rows article > span { padding-top: 2px; font-size: 18px; }
  .gd-terms__rows h3 { margin-bottom: 3px; font-size: 16px; line-height: 1.3; text-wrap: balance; }
  .gd-terms__rows p, .gd-terms__note { font-size: 14px; line-height: 1.42; text-wrap: pretty; }
  .gd-bases__grid { gap: 12px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .gd-base-card { flex-basis: min(calc(100vw - 72px), 320px); }
  .gd-base-card__visual { height: 360px; }
  .gd-footer-actions { margin-top: 20px; }
  .gd-footer-actions > a:first-child { width: 100%; min-height: 48px; }
}

/* En 768–950 px de alto el cuarto paso rozaba el borde de la escena. Se
   conserva la escala de letra y se comprimen el aire y la lámina para que
   también entren juntas la prenda y la acción final. */
@media(min-width:900px) and (min-height:740px) and (max-height:950px){
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena{padding-top:clamp(6px,1.1svh,14px);padding-bottom:clamp(8px,1.2svh,16px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab{margin-bottom:clamp(6px,1.2svh,14px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema{margin-bottom:clamp(4px,.9svh,10px)!important}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2{font-size:clamp(30px,min(4vw,5.2svh),48px)!important;max-width:none!important}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo{--p-renglon:46px;--p-subida:12px;row-gap:4px}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina{align-self:center;height:min(62svh,560px)!important}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta{margin-bottom:clamp(2px,.6svh,8px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada{margin-bottom:clamp(6px,1.2svh,14px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos{gap:clamp(4px,.8svh,8px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li{font-size:18px;padding-left:22px}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta{margin-top:clamp(6px,1.2svh,14px);min-height:clamp(40px,7svh,48px)}
}

/* Mobile fit: keep the process image large, and keep the design guide scene compact. */
@media(max-width:767px){
 .gd-panel{padding:15px 14px}
 .gd-panel h2{max-width:16ch;font-size:25px;line-height:1.02}
 .gd-tabs{gap:5px;margin-top:11px}
 .gd-tabs button{min-height:42px;padding:5px 3px;border-radius:9px;text-align:center;font-size:11px;line-height:1}
 .gd-tabs button span{margin-top:2px}
 .gd-topics{margin-top:12px}
 .gd-topic{padding:0 0 4px}
 .gd-topic__step{margin-bottom:6px;font-size:11px}
 .gd-topic h3{margin-bottom:7px;font-size:20px;line-height:1.16}
 .gd-topic>p:last-child{font-size:14px;line-height:1.4}
 .gd-panel__actions{align-items:center;flex-direction:row;gap:8px;margin-top:8px}
 .gd-panel__actions .gd-button--primary{flex:1 1 auto;width:auto;min-width:0;min-height:44px;padding:9px 11px;font-size:13px}
 .gd-panel__actions .gd-button--quiet{flex:none;width:auto;min-height:36px;padding:5px 2px;border:0;font-size:12px;white-space:nowrap}
 .gd-scroll.gd-scroll-js .gd-panel{top:64px;height:auto;min-height:0;padding:15px 14px}
 .gd-scroll.gd-scroll-js .gd-stage{height:calc(var(--gd-panel-height,390px) + 56svh)}
 .gd-scroll.gd-scroll-js .gd-markers{top:var(--gd-panel-height,390px)}
}

/* 06-oct (tarde) · Guía de diseño: letra legible en pestañas y botones.
   Medido: pestañas a 11 px y botones a 12–13 px en celular. Pestañas a 14 px centradas (número arriba en 12 px);
   el botón principal a todo el ancho y el secundario como enlace de 15 px debajo. */
html body .gd-tabs button{display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;gap:2px;text-align:center!important;font:600 12px/1.15 var(--mk-body,'Archivo',sans-serif)!important;letter-spacing:.04em}
html body .gd-tabs button span{margin-top:0!important;font-size:14px!important;font-weight:700;letter-spacing:0}
@media(max-width:767px){
 html body .gd-tabs button{min-height:48px!important;padding:6px 4px!important}
 html body .gd-panel__actions{flex-direction:column!important;align-items:stretch!important;gap:4px!important}
 html body .gd-panel__actions .gd-button--primary{width:100%!important;flex:none!important}
 html body .gd-panel__actions .gd-button--quiet{width:100%!important;min-height:44px!important;border:0!important;font-size:15px!important;text-decoration:underline!important;text-underline-offset:4px}
 html body .gd-topic>p:last-child{font-size:15px!important;line-height:1.45!important}
 html body .gd-topic h3{font-size:21px!important}
}

/* 06-oct · Carlitos: «ojo con la fuente de letra que se está usando en las pestañas de guías porque es otra, no es
   la del inicio». Los subtítulos de la guía iban en Archivo minúscula; en el inicio ese nivel es Anton en
   mayúscula. Se igualan: lámina negra (los 3 temas) y condiciones de la propuesta. El énfasis en Anton no es
   negrita (tiene un solo grosor): va en rojo claro sobre negro. */
html body .gd-topic h3{max-width:20ch!important;font:400 clamp(26px,2.6vw,38px)/1.02 var(--mk-display,'Anton',sans-serif)!important;letter-spacing:.005em;text-transform:uppercase}
html body .gd-topic h3 strong{font-weight:400!important;color:var(--mk-rojo-claro,#FF5A64)!important}
html body .gd-terms__rows h3{font:400 20px/1.1 var(--mk-display,'Anton',sans-serif)!important;letter-spacing:.005em;text-transform:uppercase;margin-bottom:6px!important}
@media(max-width:767px){
 html body .gd-topic h3{font-size:26px!important;line-height:1.02!important}
 html body .gd-terms__rows h3{font-size:19px!important}
}
html body .gd-topic__step{font-size:12px!important;letter-spacing:.08em}


/* Source: home-process-05oct.css */
/* Home · 05 Oct: text hierarchy only. The approved scroll/image engine stays in home-refresh. */
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo .proceso-salto {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mk-display) !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: .004em !important;
  text-transform: uppercase !important;
  text-wrap: balance;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-salto::before {
  content: '01';
  flex: 0 0 24px;
  align-self: center;
  font: 600 13px/1 var(--mk-body);
  letter-spacing: .04em;
  color: inherit;
}
/* Muted steps stay readable; preserve the existing scroll emphasis and transforms. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
  opacity: max(.6, var(--p-op, 1));
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:nth-child(2) .proceso-salto::before { content: '02'; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:nth-child(3) .proceso-salto::before { content: '03'; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:nth-child(4) .proceso-salto::before { content: '04'; }
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
  font-family: var(--mk-body) !important;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
  max-width: 38ch;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos {
  gap: 8px;
  max-width: 45ch;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
  font-family: var(--mk-body) !important;
  padding-left: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li::before {
  width: 5px;
  height: 5px;
  top: .61em;
  left: 0;
}
html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos strong {
  font-weight: 700;
  color: var(--mk-ink);
}
@media (min-width: 900px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(27px, 2.65vw, 38px) !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    font-size: clamp(18px, 1.5vw, 21px);
    margin-bottom: 12px;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: 17px;
  }
}
@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(23px, 6.3vw, 26px) !important;
  }
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo .proceso-salto { gap: 9px; }
  html body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-salto::before { flex-basis: 20px; font-size: 12px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    font-size: 17px;
    margin-bottom: 7px;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { gap: 6px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}
@media (max-height: 660px) and (min-width: 900px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo { font-size: 27px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada { font-size: 17px; margin-bottom: 6px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li { font-size: 16px !important; line-height: 1.4 !important; }
}
@media (max-width: 899px) and (max-height: 660px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    max-width: none !important;
    font-size: clamp(21px, 6.4vw, 28px) !important;
    line-height: 1.1 !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { gap: 4px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* Composición móvil del proceso. La lámina ocupa primero su espacio; después
   vienen el paso, su título, el resumen y la acción, todos con el mismo eje. */
@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding: clamp(8px, 1.8svh, 16px) clamp(16px, 5vw, 24px) clamp(12px, 2.2svh, 20px);
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    margin: 0 auto 8px;
    text-align: center;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin-bottom: 8px !important;
    font-size: 12px !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    max-width: 16ch !important;
    margin-inline: auto !important;
    font-size: clamp(27px, 7vw, 34px) !important;
    line-height: .96 !important;
    text-align: center;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: 28px;
    --p-subida: 5px;
    width: min(100%, 560px);
    grid-template-rows: minmax(clamp(210px, 35svh, 295px), 1fr) auto calc(4 * var(--p-renglon) + var(--p-subida)) auto auto;
    row-gap: clamp(5px, 1svh, 9px);
    align-content: stretch;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
    width: 100%;
    height: 100% !important;
    min-height: 0;
    max-height: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--lamina, #fff);
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina img {
    object-fit: contain !important;
    object-position: center;
    width: 100%;
    height: 100%;
    transform: none !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada,
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { display: none !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:not([data-estado="activo"]) :is(.proceso-etiqueta, .proceso-resumen-movil, .proceso-cta) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso[data-estado="activo"] :is(.proceso-etiqueta, .proceso-resumen-movil, .proceso-cta) {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    visibility: visible;
    pointer-events: auto;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta {
    grid-row: 2;
    justify-self: start;
    margin: 0;
    color: var(--mk-rojo-texto);
    font: 700 12px/1.2 var(--mk-body);
    font-size: 12px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    grid-row: 3 !important;
    justify-self: start;
    max-width: 100%;
    margin: 0 !important;
    font-size: clamp(23px, 6.4vw, 29px) !important;
    line-height: 1.02 !important;
    text-align: left;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo .proceso-salto {
    display: block;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    text-wrap: balance;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil {
    grid-row: 4;
    max-width: 42ch;
    justify-self: start;
    margin: 0;
    color: var(--mk-ink-2);
    font: 500 16px/1.4 var(--mk-body);
    text-align: left;
    text-wrap: pretty;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil strong { color: var(--mk-ink); font-weight: 700; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    grid-row: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    min-height: 48px;
    margin: 2px 0 0 !important;
    padding: 10px 20px;
    text-align: center;
    line-height: 1.2 !important;
  }
}
@media (max-height: 660px) and (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-top: 6px;
    padding-bottom: 8px;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab { margin-bottom: 5px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 { font-size: clamp(24px, 6.6vw, 29px) !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo { --p-renglon: 25px; grid-template-rows: minmax(clamp(190px, 31.7svh, 200px), 1fr) auto calc(4 * var(--p-renglon) + var(--p-subida)) auto auto; row-gap: 3px; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil { font-size: 15px; line-height: 1.35; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo { transform: none !important; }
}


/* Source: inicio-06oct.css */
/* ===========================================================================
   inicio-proceso-06oct.css — «Así toma forma tu pedido» (06-oct-2026)
   Carlitos: «la parte de procesos en mobile quedó rara, como todo apretado sin orden y más encima
   cortado» · «las imágenes de procesos en el inicio en mobile se ven diminutas» · «se corta el cta».

   Esta hoja va DESPUÉS de home-refresh.css, ensutex-home-guide-05oct.css y home-process-05oct.css y
   es la única que manda en la composición del proceso. El motor (home-refresh.js) no cambia: sigue
   marcando data-estado en cada paso con el scroll.

   CELULAR (< 900 px): el título de la sección sube con el scroll; queda fija solo la escena
   —lámina arriba, copy abajo— a pantalla completa. Un paso a la vez: etiqueta «Paso N de 4»,
   título, una frase con su dato en negrita y el botón SIEMPRE a la vista en la zona del pulgar.
   Mientras la escena está en pantalla se recoge el menú superior (como ya se hacía con la barra
   inferior), así la prenda gana esos 64 px.
   ESCRITORIO: se conserva la escena aprobada (lámina a la izquierda, los cuatro títulos apilados a la
   derecha); se ordena el copy del paso y el botón deja de aparecer y desaparecer.
   =========================================================================== */

/* ---------- Común ---------- */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos {
  align-content: start !important;   /* las viñetas ya no se reparten por el alto de la lista más larga */
  row-gap: 10px !important;
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 16px/1.2 var(--mk-body) !important;
  letter-spacing: 0 !important;
  text-align: center;
  white-space: nowrap;
}
/* Solo se dibuja el botón del último paso: los cuatro comparten celda y los otros no tienen. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso:not(:last-child) .proceso-cta { display: none !important; }

/* ---------- Celular ---------- */
@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-track { height: auto !important; }

  /* La escena deja de fijarse: contiene el título (que sube) y el cuerpo (que se fija). El ::after
     es el tramo de scroll en que la escena queda quieta mientras cambian los pasos. */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-escena {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    display: block !important;
    padding: 48px 16px 0 !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-escena::after {
    content: '';
    display: block;
    height: 64svh;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cab {
    margin: 0 auto 20px !important;
    text-align: center;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cab .seo-tema {
    margin: 0 0 12px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cab h2 {
    max-width: 15ch !important;
    margin-inline: auto !important;
    font-size: clamp(32px, 9.4vw, 40px) !important;
    line-height: .98 !important;
    text-wrap: balance;
  }

  /* El cuerpo: pantalla completa, fijo arriba. Filas: lámina (lo que sobra) · etiqueta · título ·
     frase · botón. Los cuatro pasos comparten celdas (display: contents en home-refresh.css). */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo {
    position: sticky !important;
    top: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 560px;
    height: 100vh !important;
    height: 100svh !important;
    margin: 0 auto !important;
    padding: 14px 0 calc(16px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto auto auto auto !important;
    row-gap: 0 !important;
    align-content: stretch !important;
  }

  /* Lámina grande: ocupa todo el alto libre. La prenda entra completa (contain). */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-lamina {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 18px !important;
    align-self: stretch !important;
    display: block !important;
    border-radius: 22px !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-lamina img {
    position: absolute;
    inset: 4% 3%;
    width: 94% !important;
    height: 92% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Copy del paso: todo alineado al mismo eje izquierdo que la lámina. */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-etiqueta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start;
    margin: 0 0 8px !important;
    color: var(--mk-rojo-texto) !important;
    font: 700 12px/1.2 var(--mk-body) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end;
    justify-self: stretch;
    margin: 0 !important;
    font-size: clamp(30px, 8.6vw, 36px) !important;
    line-height: 1 !important;
    opacity: 0 !important;
    visibility: hidden;
    transform: translate3d(0, 16px, 0) !important;
    transition: opacity 320ms var(--p-curva), transform 420ms var(--p-curva), visibility 0s linear 320ms !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso[data-estado="pasado"] .proceso-titulo {
    transform: translate3d(0, -16px, 0) !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso[data-estado="activo"] .proceso-titulo {
    opacity: 1 !important;
    visibility: visible;
    transform: none !important;
    transition: opacity 380ms var(--p-curva) 80ms, transform 480ms var(--p-curva) 80ms, visibility 0s !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo .proceso-salto {
    display: block !important;
    pointer-events: none;
    text-align: left !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-salto::before { content: none !important; }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-bajada,
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos { display: none !important; }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
    align-self: start;
    max-width: 38ch !important;
    margin: 10px 0 0 !important;
    color: var(--mk-ink-2) !important;
    font: 400 16px/1.45 var(--mk-body) !important;
    text-wrap: pretty;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil strong { color: var(--mk-ink); font-weight: 700; }
  /* Los pasos que no van se retiran sin dejar huella (ni lectores de pantalla ni toques). */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso:not([data-estado="activo"]) :is(.proceso-etiqueta, .proceso-resumen-movil) {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso[data-estado="activo"] :is(.proceso-etiqueta, .proceso-resumen-movil) {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* El botón: ancho completo, en la zona del pulgar, siempre visible. */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    grid-column: 1 !important;
    grid-row: 5 !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 52px !important;
    margin: 18px 0 0 !important;
    padding: 0 22px !important;
    justify-self: stretch !important;
    clip-path: none !important;
    pointer-events: auto !important;
    border-radius: 999px;
  }

  /* Con la escena a la vista se recoge el menú superior: la escena es la pantalla completa. */
  html body.ensutex-home.ens-process-inview nav.ensutex-site-nav {
    transform: translate3d(0, -110%, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Celulares bajos (iPhone SE con barras, Android chicos): la letra se queda, el aire baja. */
@media (max-width: 899px) and (max-height: 640px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo { padding-top: 10px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-lamina { margin-bottom: 12px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo { font-size: 30px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil { margin-top: 8px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta { margin-top: 12px !important; min-height: 48px !important; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  /* Número del paso: una columna fija, alineada al centro del renglón, no un subíndice pegado. */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo .proceso-salto {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 0 !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-salto::before {
    font: 700 13px/1 var(--mk-body) !important;
    letter-spacing: .06em;
    color: var(--mk-rojo-texto);
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-etiqueta {
    margin-bottom: 14px !important;
    padding-left: 34px !important;
    font: 700 13px/1.2 var(--mk-body) !important;
    letter-spacing: .1em !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso :is(.proceso-bajada, .proceso-puntos, .proceso-cta) {
    margin-left: 34px !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-bajada {
    margin-top: 18px !important;
    margin-bottom: 14px !important;
    max-width: 30ch !important;
    color: var(--mk-ink) !important;
    font: 600 clamp(19px, 1.45vw, 22px)/1.35 var(--mk-body) !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos li {
    max-width: 44ch;
    padding-left: 20px !important;
    color: var(--mk-ink-2);
    font-size: 17px !important;
    line-height: 1.45 !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos li::before { top: .62em !important; left: 2px !important; width: 6px !important; height: 6px !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    justify-self: start;
    min-height: 50px !important;
    margin-top: 24px !important;
    padding: 0 28px !important;
  }
}

/* ===========================================================================
   Continuidad negra bajo el hero (logo animado + beneficios) — 06-oct
   Carlitos: «los copys abajo del video de ensutex están raros… no se entiende que es desde la talla 2
   a la 5XL». En celular la grilla de 2 columnas dejaba los títulos en 3 líneas: ahora es una lista
   de una columna, título fuerte, frase corta y enlace con flecha.
   =========================================================================== */
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits strong {
  font-size: clamp(1.35rem, 1.7vw, 1.6rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .005em;
  margin-bottom: .55rem !important;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits p {
  color: #cfcac5 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits p b { color: #fff; font-weight: 600; }
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: .35rem;
  color: #fff !important;
  font: 600 15px/1.2 var(--mk-body) !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 5px;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits a span { text-decoration: none; display: inline-block; }
@media (max-width: 767px) {
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-top: 1.5rem !important;
  }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits li {
    padding: 1.1rem 20px 1.15rem !important;
  }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits strong { font-size: 1.5rem !important; }
}

/* ===========================================================================
   Hero del inicio en celular — 06-oct
   El copy vive sobre la parte alta del video: una sombra baja detrás del texto lo despega de la
   prenda sin taparla, y los dos botones quedan con la escala única (15 px) también en pantallas
   bajas (antes el secundario caía a 13,6 px).
   =========================================================================== */
@media (max-width: 767px) {
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-cinema-hero__copy {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-actions .ens-motion-link,
  html body.ensutex-home #hero-section.ens-motion-hero--video #hero-primary-cta {
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-shadow: none;
  }
}
@media (max-width: 767px) and (max-height: 700px) {
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-hero__lead { font-size: 15px !important; }
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-motion-eyebrow { font-size: 12px !important; }
}
@media (max-width: 767px) {
  /* --hero-bajar lo calcula el script del hero: baja la polera bajo el texto sin meterla bajo los botones. */
  html body.ensutex-home #hero-section.ens-motion-hero--video :is(.ens-hero-video, .ens-hero-movil__fondo) {
    transform: translate3d(0, var(--hero-bajar, 0px), 0) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent var(--hero-tope, 0px), #000 var(--hero-fundido, 0px)) !important;
    mask-image: linear-gradient(180deg, transparent var(--hero-tope, 0px), #000 var(--hero-fundido, 0px)) !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: ensutex-ui-refinement-06oct.css */
/* Ensutex · refinamiento compartido de encuadre, jerarquía y controles (06-oct). */
html body:not(.mf):not(.rx) :is(.ensutex-site-nav, .guide-nav) :is(a, button),
html body:not(.mf):not(.rx) #mobileMenuBtn {
  font-family: var(--mk-body, 'Archivo', sans-serif) !important;
  font-kerning: normal;
}

html body:not(.mf):not(.rx) :is(.ensutex-nav-cta:not(.hidden), .guide-nav__cta:not(.hidden)) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center !important;
  line-height: 1.2 !important;
}
html body:not(.mf):not(.rx) #mobileMenuBtn {
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

html body:not(.mf):not(.rx) main :is(a, button):not(.hidden):is(
  [class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"],
  [class*="button--secondary"], [class*="btn--secondary"], [class*="cta--secondary"],
  .ens-cta-primary, .ens-motion-button, .gx-button, .gd-button
),
html body:not(.mf):not(.rx) :is(#qc-review, .qc-review) {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: .55rem;
  min-height: 44px;
  max-width: 100%;
  font-family: var(--mk-body, 'Archivo', sans-serif) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-wrap: balance;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

html body:not(.mf):not(.rx) .qc-payment-summary {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--mk-line, #e7e4e0);
  border-radius: 14px;
  background: #f7f6f4;
  color: var(--mk-ink, #151413);
  font: 500 13px/1.4 var(--mk-body, 'Archivo', sans-serif);
}
html body:not(.mf):not(.rx) .qc-payment-summary__title { font-size: 14px; font-weight: 700; }
html body:not(.mf):not(.rx) .qc-payment-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 5px;
  border-top: 1px solid #e7e4e0;
}
html body:not(.mf):not(.rx) .qc-payment-summary__row > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
html body:not(.mf):not(.rx) .qc-payment-summary p { margin: -4px 0 4px; color: #5e5a56; font-size: 12px; line-height: 1.4; }

html body:not(.mf):not(.rx) main :is(a, button):not(.hidden):is(
  [class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"],
  [class*="button--secondary"], [class*="btn--secondary"], [class*="cta--secondary"],
  .ens-cta-primary, .ens-motion-button, .gx-button, .gd-button
) > :is(svg, span[aria-hidden="true"]) { flex: 0 0 auto; }

html body:not(.mf):not(.rx) :is(.ensutex-nav-cta, .guide-nav__cta, #mobileMenuBtn):focus-visible,
html body:not(.mf):not(.rx) main :is(a, button):not(.hidden):is(
  [class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"],
  [class*="button--secondary"], [class*="btn--secondary"], [class*="cta--secondary"],
  .ens-cta-primary, .ens-motion-button, .gx-button, .gd-button
):focus-visible,
html body:not(.mf):not(.rx) :is(#qc-review, .qc-review):focus-visible {
  outline: 3px solid #ef777d;
  outline-offset: 3px;
}
html body:not(.mf):not(.rx) main .ens-gallery__offer a,
html body:not(.mf):not(.rx) #catalogo [data-product-btn] {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  max-width: 100%;
  text-align: center !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  html body:not(.mf):not(.rx) .qc-payment-summary { padding: 11px 12px; font-size: 12.5px; }
  html body.ensutex-home:not(.mf):not(.rx) .ensutex-site-nav.ens-home-nav {
    background: rgba(244, 243, 241, .94) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(14px) !important;
    backdrop-filter: saturate(1.4) blur(14px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
  }
  html body.ensutex-home:not(.mf):not(.rx) .ensutex-site-nav.ens-home-nav #mobileMenuBtn {
    color: var(--mk-ink, #151413) !important;
    background: #fff !important;
    border: 1px solid var(--mk-line, #e7e4e0) !important;
  }
  html body.ensutex-home:not(.mf):not(.rx) .ensutex-site-nav.ens-home-nav #mobileMenuBtn .hamburger-bars span {
    background: var(--mk-ink, #151413) !important;
  }
}

/* ---------------------------------------------------------------------------
   06-oct (tarde) · Escala única de botones y chips en todo el sitio.
   Carlitos: «estoy viendo los tamaños de los copys dentro de los botones y están raros, como
   descentrados». Medido: los botones del hero en escritorio iban a 12,5 px, los de cada producto
   a 12,8 px y las pestañas de la guía de diseño a 11 px. Regla: acción = 16 px (15 px en celular),
   600, alto mínimo 48 px, texto y flecha centrados con flex y 10 px entre ambos. Chips y pestañas
   = 14 px. Nada de subrayado dentro de un botón.
   --------------------------------------------------------------------------- */
html body:not(.mf):not(.rx) main :is(a, button):not(.hidden):is(
  [class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"],
  [class*="button--secondary"], [class*="btn--secondary"], [class*="cta--secondary"],
  .ens-cta-primary, .ens-motion-button, .ens-motion-link, .gx-button, .gd-button, .guide-button, .btn-cat
),
html body:not(.mf):not(.rx) main .ens-gallery__offer a,
html body:not(.mf):not(.rx) #catalogo [data-product-btn] {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 24px !important;
  font-family: var(--mk-body, 'Archivo', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center !important;
}
html body:not(.mf):not(.rx) main :is(a, button):is(.ens-cta-primary, .ens-motion-button, .ens-motion-link, .gd-button, .guide-button, .btn-cat, [data-product-btn]) :is(span, strong) {
  font-size: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}
html body:not(.mf):not(.rx) main :is(a, button):is(.ens-cta-primary, .ens-motion-button, .ens-motion-link, .gd-button, .guide-button, .btn-cat, [data-product-btn]) > span[aria-hidden="true"] {
  display: inline-block;
  transform: translateY(-.04em);
}
@media (max-width: 767px) {
  html body:not(.mf):not(.rx) main :is(a, button):not(.hidden):is(
    [class*="button--primary"], [class*="btn--primary"], [class*="cta--primary"],
    [class*="button--secondary"], [class*="btn--secondary"], [class*="cta--secondary"],
    .ens-cta-primary, .ens-motion-button, .ens-motion-link, .gx-button, .gd-button, .guide-button, .btn-cat
  ),
  html body:not(.mf):not(.rx) main .ens-gallery__offer a,
  html body:not(.mf):not(.rx) #catalogo [data-product-btn] {
    font-size: 15px !important;
    padding-inline: 20px !important;
  }
}

/* Chips, filtros y pestañas: 14 px, centrados. */
html body:not(.mf):not(.rx) :is(.cat-tab, .catalog-category-filter) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 8px;
  font-size: 14px !important;
  line-height: 1.2 !important;
}
html body:not(.mf):not(.rx) :is(.cat-tab, .catalog-category-filter) > :is(span, small, b, em):last-child:not(:first-child) { font-size: 12px !important; }
html body:not(.mf):not(.rx) :is(.cat-tab, .catalog-category-filter) .cat-tab__nombre { font-size: 14px !important; }
html body:not(.mf):not(.rx) :is(.cat-tab, .catalog-category-filter) .cat-tab__nombre span { font-size: inherit !important; }
html body:not(.mf):not(.rx) #mobileMenuBtn { font-size: 14px !important; font-weight: 600 !important; }
html body:not(.mf):not(.rx) .chatbot-cta-fixed.ens-chat-prompt { font-size: 14px !important; font-weight: 600 !important; }

/* Puertas del catálogo: el nombre manda, la nota acompaña. */
html body:not(.mf):not(.rx) .cat-puerta .cat-puerta__nombre { font-size: 16px !important; font-weight: 700 !important; line-height: 1.15 !important; }
html body:not(.mf):not(.rx) .cat-puerta .cat-puerta__nota { font-size: 13px !important; line-height: 1.3 !important; }

/* Resumen de pagos del cotizador: nada bajo 14 px en lo que se lee para decidir. */
html body:not(.mf):not(.rx) .qc-payment-summary { font-size: 14px !important; }
html body:not(.mf):not(.rx) .qc-payment-summary__title { font-size: 15px !important; }
html body:not(.mf):not(.rx) .qc-payment-summary p { font-size: 13px !important; }
html body:not(.mf):not(.rx) button[data-pack-btn] {
  min-height: 48px !important;
  gap: 8px !important;
  font-family: var(--mk-body, 'Archivo', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body:not(.mf):not(.rx) button[data-pack-btn] .btn-text { font-size: inherit !important; }
html body:not(.mf):not(.rx) .cat-puerta .cat-puerta__nota { font-size: 14px !important; }
html body:not(.mf):not(.rx) .faq-hub__anchors a { font-size: 15px !important; font-weight: 600 !important; }
html body:not(.mf):not(.rx) main section a.border-2.uppercase.text-xs { font-size: 13px !important; letter-spacing: .08em !important; }

/* Footer oscuro: la regla de «etiqueta en píldora blanca» de marca.css alcanzaba al lema del pie y lo pintaba
   como una franja blanca. En el pie el lema va sin píldora. Y bajo el pie, el espacio que se reserva para la
   barra fija de celular se pinta del mismo gris del pie (antes asomaba una franja clara). */
html body:not(.mf):not(.rx) footer.bg-zinc-900 > div > p.uppercase:is(.tracking-widest, .tracking-\[0\.3em\], .tracking-\[0\.22em\], .tracking-\[0\.25em\]) {
  background: transparent !important;
  color: #a1a1aa !important;
  -webkit-text-fill-color: #a1a1aa !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
html body:not(.mf):not(.rx) footer.bg-zinc-900 { box-shadow: 0 50vh 0 50vh rgb(24, 24, 27); }
/* Tres controles que reglas antiguas con ID dejaban en 12–13 px. */
html body:not(.mf):not(.rx) #mobileMenuBtn .mobile-menu-label { font-size: 14px !important; font-weight: 600 !important; }
html body:not(.mf):not(.rx) :is(#packs, #promociones, #catalogo) button[data-pack-btn],
html body:not(.mf):not(.rx) #cat-grid [data-product-btn] { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body:not(.mf):not(.rx) .faq-hub__summary a { font-size: 15px !important; font-weight: 600 !important; }
/* Bajo cada pie oscuro, el espacio reservado para la barra fija del celular se pinta del color del pie. */
html body:not(.mf):not(.rx) footer.bg-zinc-950 { box-shadow: 0 50vh 0 50vh rgb(11, 10, 9); }
html body:not(.mf):not(.rx) footer.gx-pie { box-shadow: 0 50vh 0 50vh rgb(20, 19, 18); }
html body:not(.mf):not(.rx) footer.guide-footer { box-shadow: 0 50vh 0 50vh rgb(7, 6, 6); }
html body:not(.mf):not(.rx) footer.bg-black { box-shadow: 0 50vh 0 50vh #000; }

/* ---------------------------------------------------------------------------
   06-oct · Footer único (antes había 8 diseños distintos en 21 páginas).
   Marca + redes a la izquierda; 4 columnas (Comprar · Guías · Por producto · Ensutex). En celular: marca
   centrada y columnas en 2×2. «Nuestras marcas» solo en el inicio (sin fuga desde el resto del sitio).
   --------------------------------------------------------------------------- */
html body:not(.mf):not(.rx) footer.ens-pie {
  position: relative;
  margin: 0;
  padding: 56px 24px 28px;
  background: #0b0a09 !important;
  color: #a8a29e;
  border-top: 1px solid #262321;
  box-shadow: 0 50vh 0 50vh #0b0a09;
  font-family: var(--mk-body, 'Archivo', sans-serif);
  text-align: left;
}
html body:not(.mf):not(.rx) .ens-pie__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;
  gap: 32px 48px;
}
html body:not(.mf):not(.rx) .ens-pie__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
html body:not(.mf):not(.rx) .ens-pie__logo { display: block; height: 52px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
html body:not(.mf):not(.rx) .ens-pie__lema { margin: 0; color: #a8a29e !important; background: none !important; -webkit-text-fill-color: currentColor !important; font: 500 14px/1.4 var(--mk-body, 'Archivo', sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body:not(.mf):not(.rx) .ens-pie__redes { display: flex; gap: 10px; }
html body:not(.mf):not(.rx) .ens-pie__redes a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid #3a3633; border-radius: 999px; color: #e7e5e4 !important; transition: background-color .2s, border-color .2s;
}
html body:not(.mf):not(.rx) .ens-pie__redes a:hover { background: #E20613; border-color: #E20613; color: #fff !important; }
html body:not(.mf):not(.rx) .ens-pie__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
html body:not(.mf):not(.rx) .ens-pie__cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
html body:not(.mf):not(.rx) .ens-pie__titulo {
  margin: 0 0 8px; color: #fff !important; background: none !important; -webkit-text-fill-color: currentColor !important;
  font: 700 12px/1.2 var(--mk-body, 'Archivo', sans-serif) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
html body:not(.mf):not(.rx) .ens-pie__cols a {
  display: inline-flex; align-items: center; min-height: 36px; color: #d6d3d1 !important; text-decoration: none;
  font: 400 15px/1.3 var(--mk-body, 'Archivo', sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body:not(.mf):not(.rx) .ens-pie__cols a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
html body:not(.mf):not(.rx) .ens-pie :is(a, button):focus-visible { outline: 3px solid #ef777d; outline-offset: 3px; border-radius: 6px; }
html body:not(.mf):not(.rx) .ens-pie__marcas,
html body:not(.mf):not(.rx) .ens-pie__legal {
  grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid #262321;
  color: #8a8480 !important; background: none !important; -webkit-text-fill-color: currentColor !important;
  font: 400 13px/1.5 var(--mk-body, 'Archivo', sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body:not(.mf):not(.rx) .ens-pie__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
html body:not(.mf):not(.rx) .ens-pie__marcas a { color: #d6d3d1 !important; font-weight: 600; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
html body:not(.mf):not(.rx) .ens-pie__marcas + .ens-pie__legal { border-top: 0; padding-top: 0; }
@media (max-width: 899px) {
  html body:not(.mf):not(.rx) footer.ens-pie { padding: 44px 20px 24px; }
  html body:not(.mf):not(.rx) .ens-pie__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html body:not(.mf):not(.rx) .ens-pie__marca { align-items: center; text-align: center; }
  html body:not(.mf):not(.rx) .ens-pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  html body:not(.mf):not(.rx) .ens-pie__legal { text-align: center; }
  html body:not(.mf):not(.rx) .ens-pie__marcas { justify-content: center; }
}
html body:not(.mf):not(.rx) .ens-pie__cols a, html body:not(.mf):not(.rx) .ens-pie__marcas a { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }


/* Source: home-finish-06oct.css */
/* Ensutex home finish — final responsive corrections after the shared site rules. */

/* Fit each source to its actual aspect ratio, then fade only its left and right
   edges. Keep this linear so the video never gets a circular vignette. */
html body.ensutex-home #hero-section.ens-motion-hero--video :is(.ens-hero-video, .ens-hero-movil__fondo) {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(100%, calc(100svh * 1.77778)) !important;
  height: auto !important;
  max-width: none !important;
  max-height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
}

@media (max-width: 767px) {
  html body.ensutex-home #hero-section.ens-motion-hero--video :is(.ens-hero-video, .ens-hero-movil__fondo) {
    width: min(100%, 55.82svh) !important;
    max-height: 100% !important;
    aspect-ratio: 720 / 1290 !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
  }
}

/* The step title itself communicates what changes; a second “Paso N de 4”
   line added noise to the animated scene. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-etiqueta {
  display: none !important;
}

/* One compact scroll scene. The image has a stable, modest height so the active
   title, explanation and final CTA stay in the same phone viewport. */
@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-escena::after {
    height: 86svh !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo {
    /* Balance the image, title, explanation and CTA within the visible panel.
       The image stays medium sized while the unused area below the button shrinks. */
    flex: 0 0 auto !important;
    height: calc(100svh - 64px) !important;
    min-height: 0 !important;
    grid-template-rows: clamp(250px, 34svh, 290px) auto auto auto !important;
    row-gap: 0 !important;
    align-content: space-evenly !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-lamina {
    margin-bottom: 0 !important;
  }
  /* The active title is the step label; the numeric progress line stays hidden. */
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo {
    grid-row: 2 !important;
    align-self: start !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil {
    grid-row: 3 !important;
    margin-top: 0 !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    grid-row: 4 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 899px) and (max-height: 660px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo {
    /* On short phones the consent notice occupies the lower edge. Keep the
       process CTA above it while retaining a product image at 40svh. */
    grid-template-rows: clamp(240px, 40svh, 260px) auto auto auto auto !important;
    row-gap: 3px !important;
  }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil { margin-top: 0 !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta { margin-top: 4px !important; }
}

@media (max-width: 767px) and (max-height: 700px) {
  html body.ensutex-home #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}

/* The home close reverses columns on desktop; mobile remains copy first, then film. */
@media (min-width: 768px) {
  html body.ensutex-home #cierre-equipo .ens-home-close__layout {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, .9fr) !important;
    grid-template-areas: "copy media";
    gap: clamp(2rem, 5vw, 5rem) !important;
  }
  html body.ensutex-home #cierre-equipo .ens-home-close__copy { grid-area: copy; }
  html body.ensutex-home #cierre-equipo .ens-home-close__media {
    grid-area: media;
    justify-self: end;
    width: min(100%, 35rem);
  }
}

@media (max-width: 767px) {
  html body.ensutex-home #cierre-equipo .ens-home-close__layout {
    grid-template-areas: "copy" "media";
    gap: clamp(1.5rem, 6vw, 2.25rem) !important;
  }
  html body.ensutex-home #cierre-equipo .ens-home-close__copy { grid-area: copy; }
  html body.ensutex-home #cierre-equipo .ens-home-close__media {
    grid-area: media;
    width: min(100%, 27rem);
    justify-self: center;
  }
}

/* En móvil, el copy del proceso queda dentro de un margen de 24px. La lámina
   conserva su ancho para que la prenda no se reduzca junto con el texto. */
@media (max-width: 899px) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo {
    box-sizing: border-box !important;
    padding-inline: 8px !important;
    font-size: 27px !important;
  }
  html body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil {
    box-sizing: border-box !important;
    padding-inline: 8px !important;
  }
  html body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    box-sizing: border-box !important;
    margin-inline: 8px !important;
    width: calc(100% - 16px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.ensutex-home #hero-section.ens-motion-hero--video :is(.ens-hero-video, .ens-hero-movil__fondo) {
    transform: none !important;
  }
}

/* The no-motion fallback returns the process to normal document flow. Keep
   fixed purchase/chat controls from covering its next card while it is read. */
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  html body.ensutex-home.ens-process-clear #sticky-cta-mobile,
  html body.ensutex-home.ens-process-clear .floating-widgets,
  html body.ensutex-home.ens-process-clear .asu-presenta {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* La continuidad del inicio presenta sus cuatro datos en láminas alineadas.
   El rojo destaca la información que el cliente busca sin sumar más colores. */
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits {
  gap: 16px;
  align-items: stretch;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits li {
  display: flex;
  min-height: 222px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 1.5vw, 24px);
  border: 1px solid #333;
  border-top: 3px solid #e20613;
  border-radius: 18px;
  background: #0a0a0a;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits strong {
  margin-bottom: 12px;
  font-size: clamp(1.2rem, 1.4vw, 1.45rem);
  line-height: 1.1;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits .ens-home-continuity__accent {
  display: inline !important;
  color: #e20613;
  font: inherit;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits p,
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits b {
  font-size: 16px;
  line-height: 1.5;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits p { flex: 1; }
html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 750;
}

/* Los extremos del hero y del video de marca se funden con su fondo negro. */
html body.ensutex-home #hero-section.ens-motion-hero--video {
  background: #000 !important;
}
html body.ensutex-home #hero-section.ens-motion-hero--video :is(.ens-hero-video, .ens-hero-movil__fondo) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__media video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* En escritorio bajo, compacta los espacios del cierre del proceso; mantiene
   una letra legible y deja el CTA dentro de la escena. */
@media (min-width: 900px) and (max-height: 800px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos { gap: clamp(5px, .65svh, 8px) !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li { font-size: 17px !important; line-height: 1.42 !important; }
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta { margin-top: 6px !important; }
}
@media (max-width: 767px) {
  html body.ensutex-home #hero-section.ens-motion-hero--video :is(.ens-hero-video, .ens-hero-movil__fondo) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
  }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits { gap: 12px; }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits li {
    min-height: 0;
    padding: 16px 14px;
    border-radius: 15px;
  }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits strong { font-size: 1.15rem; }
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits p,
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits b,
  html body.ensutex-home #ensutex-continuity .ens-home-continuity__benefits a { font-size: 16px; }
}

/* El beneficio del diseño y su única pasada se leen como una unidad. */
html body.ensutex-home #ensutex-continuity .ens-home-continuity__pass {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 0 0 6px;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__pass > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e20613;
  color: #fff;
  font: 800 11px/1 var(--mk-body, "Archivo", sans-serif);
  letter-spacing: .055em;
}
html body.ensutex-home #ensutex-continuity .ens-home-continuity__pass > p {
  flex: none !important;
  margin: 0 !important;
  color: #e8e5e2 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Una única pasada de cambios: resalte propio y contenido legible dentro del proceso. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li.proceso-punto--pasada {
  margin-left: -8px;
  padding: 10px 12px !important;
  border: 1px solid #f0d3d3;
  border-left: 3px solid #e20613;
  border-radius: 10px;
  background: #fff5f5;
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li.proceso-punto--pasada::before { display: none !important; }
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li.proceso-punto--pasada strong {
  color: #b3050f;
  font-weight: 800;
}
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-resumen-movil .proceso-pasada-movil {
  display: table;
  margin: 8px 0 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e20613;
  color: #fff;
  font: 800 11px/1.2 var(--mk-body, "Archivo", sans-serif);
  letter-spacing: .035em;
}


/* Source: ensutex-ux-correction-08oct.css */
/* Correcciones de encuadre revisadas en escritorio y móvil · 08-oct-2026. */

/* El detalle de pagos vive en Estimación, dentro del área que se desplaza.
   El pie reserva únicamente total y avance, dejando espacio para las telas. */
/* Titulos reales en Anton; etiquetas y acciones mantienen Archivo. */
html body:is([data-ens-page="guide-design"], [data-ens-page="guide-sizing"], [data-ens-page="faq"])
  #main-content#main-content :is(h1, h2, h3, h4, h5, h6, table caption),
html body[data-ens-page="faq"] #main-content .faq-hub__section details > summary {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
}

/* Aire en la respuesta abierta, conservando la escala de lectura. */
html body[data-ens-page="faq"] #main-content .faq-hub__section details > summary {
  padding: 16px !important;
  line-height: 1.4 !important;
}

html body[data-ens-page="faq"] #main-content .faq-hub__section details > p {
  max-width: 72ch;
  margin: 0 !important;
  padding: 0 16px 20px !important;
  line-height: 1.6 !important;
}

html body[data-ens-page="faq"] #main-content .guide-heading > p,
html body[data-ens-page="guide-design"] #main-content#main-content :is(.gd-topic > p:last-child, .gd-terms__rows p, .gd-terms__note p, .gd-bases__lead) {
  line-height: 1.55 !important;
}

html body[data-ens-page="guide-design"] #main-content#main-content .gd-terms__rows h3 {
  margin-bottom: 10px !important;
}

/* Filas y notas de tallas con aire, manteniendo los datos publicados. */
html body[data-ens-page="guide-sizing"] #main-content#main-content :is(.gx-lead, .gx-regla-oro, .gx-tabla-nota, .gx-size-note) {
  line-height: 1.55 !important;
}

html body[data-ens-page="guide-sizing"] #main-content#main-content .gx-tabla :is(th, td) {
  padding: 10px 14px !important;
  line-height: 1.5 !important;
}

html body[data-ens-page="guide-sizing"] #main-content#main-content .gx-tabla tbody :is(th, td) {
  height: 44px !important;
}

html body #contacto .camino-tela__foto {
  display: block;
  width: 100%;
  height: clamp(100px, 15svh, 150px);
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

html body #contacto .quote-fabric-choice-note {
  display: block;
  margin-top: 6px;
  color: #625e5a;
  font-size: 14px;
  line-height: 1.4;
}

html body #contacto .camino-ensutex__title {
  font: 400 24px/1.15 var(--mk-display, "Anton", sans-serif) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

html body #contacto .quote-fabric-samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

html body #contacto .quote-fabric-samples > span { min-width: 0; }

html body #contacto [data-path-screen="tallas"] .quote-payment-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 20px 0 0 !important;
  padding: 16px;
  border: 1px solid #e7e4e0;
  border-radius: 14px;
  background: #faf8f7;
}

html body #contacto [data-path-screen="tallas"] .quote-payment-summary .qps-fila {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px;
  font-size: 14px !important;
  line-height: 1.45;
}

html body #contacto [data-path-screen="tallas"] .qps-fila em {
  display: block;
  font-style: normal;
  color: #625e5a;
}

html body #contacto [data-path-screen="tallas"] .qps-fila strong {
  font-size: 20px !important;
  color: #171514;
}

html body #contacto [data-path-screen="tallas"] .qps-plazo {
  display: block;
  grid-column: 1 / -1;
  font-size: 14px !important;
}

@media (max-width: 767px) {
  html body #contacto [data-path-screen="tallas"] .quote-payment-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Encadre del uniforme completo sin la franja negra de origen del video. */
html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
  transform: scale(1.055);
  transform-origin: center;
}

@media (max-width: 899px) {
  html body[data-ens-page="faq"] .guide-media--portrait {
    width: min(100%, 256px) !important;
    justify-self: center;
  }
  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage {
    aspect-ratio: 9 / 16;
  }
  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
    object-fit: contain;
  }
  html body[data-ens-page="guide-sizing"] .gx-hero__media {
    width: min(100%, 300px) !important;
    justify-self: center !important;
  }
}

/* Proceso: título alineado al eje de la imagen, escena con aire antes de entrar y
   todo el paso visible incluso en ventanas de escritorio bajas. El motor de scroll
   existente conserva el cambio sincronizado de imagen y copy en móvil. */
@media (min-width: 900px) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso.proceso {
    margin-top: clamp(28px, 4svh, 48px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-inline: clamp(24px, 4vw, 64px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    width: min(100%, 1280px);
    align-items: flex-start;
    margin: 0 auto clamp(8px, 1.2svh, 14px);
    text-align: left;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin: 0 0 clamp(4px, .8svh, 8px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    max-width: 24ch !important;
    font-size: clamp(28px, min(3.2vw, 5.4svh), 44px) !important;
    line-height: 1.02 !important;
    text-align: left;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: 42px;
    --p-subida: 8px;
    width: min(100%, 1280px);
    min-height: clamp(360px, 58svh, 520px);
    align-content: start;
    grid-template-rows: auto calc(4 * var(--p-renglon) + var(--p-subida)) auto auto auto minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
    grid-row: 1 / -1;
    height: min(58svh, 520px) !important;
    min-height: 0;
    align-self: start;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta {
    grid-row: 1;
    margin: 0 0 2px !important;
    font-size: 13px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    grid-row: 2;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    grid-row: 3;
    margin-bottom: clamp(4px, .8svh, 9px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos {
    grid-row: 4;
    gap: clamp(4px, .65svh, 8px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: clamp(15px, 1.25vw, 18px) !important;
    line-height: 1.3 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    grid-row: 5;
    margin-top: clamp(4px, .7svh, 8px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo::before {
    content: "";
    grid-column: 2;
    grid-row: 3 / 6;
    min-height: 0;
    border: 1px solid #e8e4e2;
    border-top: 3px solid #e20613;
    border-radius: 18px;
    background: #faf8f7;
    pointer-events: none;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-bajada {
    padding: 18px 24px 0;
    margin-inline: 0 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos {
    padding-inline: 24px;
    margin-inline: 0 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    margin-left: 24px !important;
    margin-bottom: 18px !important;
  }
}

/* Ventanas de escritorio muy bajas: conserva los cuatro pasos y el CTA dentro
   de la escena, reduciendo ritmo y tamaños de copy antes de permitir recortes. */
@media (min-width: 900px) and (max-height: 520px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    min-height: 0;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
    height: min(58svh, 280px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    margin-bottom: 4px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin-bottom: 2px !important;
    padding-block: 4px;
    font-size: 11px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    font-size: clamp(23px, 2vw, 28px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: 28px;
    --p-subida: 6px;
    row-gap: 1px;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(22px, 1.8vw, 26px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.25;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos {
    gap: 3px;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    min-height: 36px;
    margin-top: 4px;
    padding-inline: 18px;
  }
}

/* Guías: texto y multimedia arrancan en el mismo eje. La altura del marco se
   adapta al formato real de cada video para no reservar un bloque vacío. */
@media (min-width: 900px) {
  html body[data-ens-page="guide-design"] main[data-guia="diseno"] .gd-intro {
    align-items: start !important;
    width: min(1080px, calc(100% - 96px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 2.6vw, 36px) !important;
    padding-top: clamp(28px, 4svh, 48px) !important;
  }

  html body[data-ens-page="guide-design"] .gd-intro__copy,
  html body[data-ens-page="guide-sizing"] .gx-hero__texto,
  html body[data-ens-page="faq"] .faq-hub__hero-grid > :first-child {
    align-self: start !important;
    margin-top: 0 !important;
  }

  html body[data-ens-page="guide-design"] .guide-media--design {
    align-self: start !important;
    justify-self: start !important;
    width: min(100%, 360px) !important;
  }

  html body[data-ens-page="guide-design"] .guide-media--design .guide-media__stage {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
  }

  html body[data-ens-page="guide-sizing"] #main-content#main-content[data-guia="tallaje"] .gx-hero {
    align-items: start !important;
    width: min(1040px, calc(100% - 96px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 2.6vw, 36px) !important;
    padding-top: clamp(28px, 4svh, 48px) !important;
  }

  html body[data-ens-page="guide-sizing"] .gx-hero__media {
    align-self: start !important;
    justify-self: start !important;
    width: min(100%, 380px) !important;
  }

  html body[data-ens-page="guide-sizing"] .gx-hero__media .guide-media__stage {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  html body[data-ens-page="faq"] .faq-hub__hero {
    padding-top: clamp(6rem, 7vw, 7rem);
  }

  html body[data-ens-page="faq"] .faq-hub__hero-grid {
    align-items: start !important;
    width: min(1040px, calc(100% - 96px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(24px, 2.6vw, 36px) !important;
  }

  html body[data-ens-page="faq"] .guide-media--portrait {
    align-self: start !important;
    justify-self: start !important;
    width: min(100%, 270px) !important;
  }

  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage {
    width: 100%;
    max-height: none;
    aspect-ratio: 9 / 16;
  }

  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
    object-fit: contain;
  }

  /* El copy corto de diseño y tallas ocupa la columna hasta el CTA/dato útil.
     Así la altura visual de ambas columnas acompaña el marco de video. */
  html body[data-ens-page="guide-design"] .gd-intro__note,
  html body[data-ens-page="guide-sizing"] .gx-hero__note {
    box-sizing: border-box;
    max-width: 48ch;
    margin: clamp(14px, 1.6svh, 18px) 0 0;
    padding: 12px 16px;
    border-left: 3px solid #e20613;
    border-radius: 0 12px 12px 0;
    background: #f7f4f2;
    color: #514c49;
    font: 500 15px/1.4 var(--mk-body, "Archivo", sans-serif);
  }

  html body[data-ens-page="guide-design"] .gd-intro__note strong,
  html body[data-ens-page="guide-sizing"] .gx-hero__note strong {
    color: #171514;
    font-weight: 700;
  }

  html body[data-ens-page="guide-design"] .gd-intro__actions {
    margin-top: clamp(10px, 1.2svh, 14px);
  }
}

@media (max-width: 899px) {
  /* En móvil las columnas pasan a una secuencia natural y no reservan huecos;
     los mismos datos y acciones ya están en las secciones inmediatas de la guía. */
  html body[data-ens-page="guide-design"] .gd-intro__note,
  html body[data-ens-page="guide-design"] .gd-intro__actions,
  html body[data-ens-page="guide-sizing"] .gx-hero__note {
    display: none !important;
  }
}

/* El resumen persistente no pertenece a los héroes de consulta. Su estado y la
   selección guardada siguen intactos; se retira solo de estas páginas. */
html body:is([data-ens-page="guide-design"], [data-ens-page="guide-sizing"], [data-ens-page="faq"]) .ens-journey-strip {
  display: none !important;
}

/* En diseño, las opciones pertenecen a la muestra. Superponerlas al marco y
   mantener el pie accesible elimina dos filas vacías sin achicar la prenda. */
html body[data-ens-page="guide-design"] .guide-media--design {
  position: relative;
}

html body[data-ens-page="guide-design"] .guide-media--design .guide-media__choices {
  position: relative;
  margin-bottom: 10px;
}

html body[data-ens-page="guide-design"] .guide-media--design #gd-media-caption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Cotizador de escritorio: ventana amplia con pie de altura acotada. Solo la
   pantalla activa del flujo scrollea; el pie y el avance quedan siempre visibles. */
@media (min-width: 768px) {
  html body #contacto.cotiza-panel {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(960px, calc(100vw - 48px)) !important;
    height: min(760px, calc(100dvh - 40px)) !important;
    max-height: calc(100dvh - 40px) !important;
    border-radius: 22px !important;
    translate: -50% 104%;
  }

  html body #contacto.cotiza-panel.is-open {
    translate: -50% -50%;
  }

  html body #contacto.cotiza-panel .cotiza-panel__cuerpo {
    padding: 16px 28px 0;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 28px 18px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary {
    order: 0;
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 20px !important;
    width: 100%;
    margin: 0 !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 6px 12px;
    min-width: 0;
    font-size: 14px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila strong {
    white-space: nowrap;
    font-size: 15px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo {
    grid-column: 1 / -1;
    margin-top: 0;
    font-size: 14px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo strong {
    font-size: 14px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-total span {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  html body #contacto.cotiza-panel {
    max-height: 96dvh;
  }
}

/* En desktop, las copias de los pasos inactivos no deben definir la altura de
   las filas del paso visible. Los cuatro títulos siguen a la vista; solo el
   contenido activo participa en el cálculo vertical. */
@media (min-width: 900px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso
    .proceso-paso:not([data-estado="activo"])
    :is(.proceso-etiqueta, .proceso-bajada, .proceso-resumen-movil, .proceso-puntos, .proceso-cta) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso
    .proceso-paso[data-estado="activo"]
    :is(.proceso-etiqueta, .proceso-bajada, .proceso-resumen-movil, .proceso-puntos, .proceso-cta) {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    pointer-events: auto;
  }
}

/* Escritorios bajos: compacta títulos y copy antes de que el CTA salga de la
   escena. La prenda conserva un marco visible y el paso activo mantiene todo
   su contenido. */
@media (min-width: 900px) and (max-height: 640px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    margin-bottom: 4px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin-bottom: 1px !important;
    padding-block: 4px;
    font-size: 11px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    font-size: clamp(23px, 2vw, 28px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    min-height: 0;
    --p-renglon: 26px;
    --p-subida: 6px;
    row-gap: 0;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
    height: min(58svh, 330px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(19px, 1.55vw, 23px) !important;
    line-height: 1 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    margin-bottom: 4px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos {
    gap: 3px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: 14px !important;
    line-height: 1.22 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    min-height: 36px !important;
    margin-top: 4px !important;
    padding-inline: 18px !important;
  }
}

/* En tablet angosta la estimación vuelve a una columna: cada importe conserva
   su línea junto al texto y el pie no consume el alto de la lista de productos. */
@media (min-width: 768px) and (max-width: 959px) {
  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }
}

/* La regla global del proceso usa un selector más específico. En ventanas
   cortas se compactan también sus márgenes y las filas del paso activo para
   que el CTA no quede debajo del borde visible. */
@media (min-width: 900px) and (max-height: 640px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo {
    --p-renglon: 22px;
    --p-subida: 4px;
    row-gap: 0 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo {
    font-size: clamp(19px, 1.55vw, 23px) !important;
    line-height: 1 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-bajada {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos {
    gap: 3px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos li {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    min-height: 36px !important;
    margin-top: 4px !important;
    padding-inline: 18px !important;
  }
}

/* Ventanas bajas: recupera área de selección reduciendo el marco y el pie sin
   convertir el resumen en una capa que tape los productos. */
@media (min-width: 768px) and (max-height: 650px) {
  html body #contacto.cotiza-panel {
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  html body #contacto.cotiza-panel .cotiza-panel__cuerpo {
    padding: 8px 16px 0;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav {
    gap: 6px 10px;
    padding: 8px 16px 10px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary {
    gap: 3px 12px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila {
    font-size: 12px !important;
    line-height: 1.2;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila strong,
  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo,
  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo strong {
    font-size: 12px !important;
  }
}

/* Diseño y pagos: una lámina de alto contraste con la secuencia completa. */
html body[data-ens-page="guide-design"] #main-content .gd-terms__note {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px) !important;
  padding: clamp(20px, 2.4vw, 30px) !important;
  border: 1px solid #242220 !important;
  border-left: 5px solid #e20613 !important;
  border-radius: 18px !important;
  background: #151413 !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(15, 14, 13, .12);
}

html body[data-ens-page="guide-design"] #main-content .gd-terms__note p {
  margin: 0 !important;
  color: rgba(255, 255, 255, .82) !important;
  font: 500 clamp(15px, 1.25vw, 18px)/1.55 var(--mk-body, "Archivo", sans-serif) !important;
}

html body[data-ens-page="guide-design"] #main-content .gd-terms__note strong {
  color: #fff !important;
  font-weight: 800 !important;
}

/* Desktop: el paso activo contiene su copia en una tarjeta que mide el texto.
   La imagen llena la columna y los bullets quedan centrados sin recortarse. */
@media (min-width: 900px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: clamp(42px, 5svh, 48px);
    --p-subida: 14px;
    min-height: clamp(500px, 60svh, 560px) !important;
    grid-template-rows: auto calc(4 * var(--p-renglon) + var(--p-subida) + clamp(18px, 2.2svh, 26px)) minmax(min-content, 1fr) !important;
    align-content: stretch !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    margin-bottom: clamp(18px, 2.2svh, 26px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin-bottom: clamp(9px, 1.3svh, 14px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    font-size: clamp(34px, 3.1vw, 46px) !important;
    line-height: 1.08 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(30px, 2.8vw, 42px) !important;
    line-height: 1.04 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo::before {
    content: none !important;
    display: none !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    box-sizing: border-box;
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    min-width: 0;
    min-height: min-content;
    align-content: center;
    justify-items: center;
    gap: clamp(8px, 1.1svh, 12px);
    padding: clamp(20px, 2.3vw, 32px);
    border: 1px solid #e8e4e2;
    border-top: 3px solid #e20613;
    border-radius: 20px;
    background: #faf8f7;
    text-align: center;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:not([data-estado="activo"]) .proceso-detalle {
    visibility: hidden;
    pointer-events: none;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso[data-estado="activo"] .proceso-detalle {
    visibility: visible;
    pointer-events: auto;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-bajada {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: 40ch;
    margin: 0 !important;
    font-size: clamp(20px, 1.55vw, 23px) !important;
    line-height: 1.35 !important;
    text-align: center;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-puntos {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: min(100%, 43ch);
    margin: 0;
    text-align: left;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-puntos li {
    font-size: clamp(16px, 1.22vw, 18px) !important;
    line-height: 1.42 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-cta {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center;
    margin: 4px 0 0 !important;
  }
}

@media (min-width: 900px) and (max-height: 699px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    min-height: 0 !important;
    --p-renglon: clamp(26px, 4.2svh, 34px);
    --p-subida: 6px;
    grid-template-rows: auto calc(4 * var(--p-renglon) + var(--p-subida)) minmax(min-content, 1fr) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    gap: 6px;
    padding: 14px 18px;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(23px, 2.15vw, 31px) !important;
  }
}

@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    display: contents !important;
  }
}

/* El video FAQ conserva el cuadro completo en una tarjeta más compacta. */
@media (min-width: 900px) {
  html body[data-ens-page="faq"] .faq-hub__hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .72fr) !important;
    align-items: center !important;
  }

  html body[data-ens-page="faq"] .guide-media--portrait {
    width: min(100%, 330px) !important;
    justify-self: center !important;
  }
}

html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage {
  aspect-ratio: 9 / 13 !important;
  max-height: none !important;
}

html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
  transform: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 899px) {
  html body[data-ens-page="faq"] .guide-media--portrait {
    width: min(100%, 240px) !important;
    justify-self: center !important;
  }
}

/* La pasada incluida queda destacada y explica que todos los ajustes se agrupan en ella. */
html body[data-ens-page="guide-design"] #main-content .gd-terms__pass {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 13px 14px;
  border: 1px solid #f0d1d2;
  border-left: 4px solid #e20613;
  border-radius: 12px;
  background: #fff5f5;
}
html body[data-ens-page="guide-design"] #main-content .gd-terms__pass > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e20613;
  color: #fff;
  font: 800 11px/1 var(--mk-body, "Archivo", sans-serif);
  letter-spacing: .045em;
}
html body[data-ens-page="guide-design"] #main-content .gd-terms__pass > p {
  margin: 0 !important;
  color: #302b29 !important;
  font: 600 15px/1.5 var(--mk-body, "Archivo", sans-serif) !important;
}
html body[data-ens-page="guide-design"] #main-content .gd-terms__timing {
  margin-top: 10px !important;
  color: #625d59 !important;
  font-size: 14px !important;
}

@media (max-width: 767px) {
  html.gd-terms-visible body[data-ens-page="guide-design"] .floating-widgets.ens-chat-widgets #chatbot-trigger,
  html.gd-terms-visible body[data-ens-page="guide-design"] .floating-widgets.ens-chat-widgets #chatbot-cta {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* El video animado del logo se funde con el fondo negro igual que el hero,
   tanto en escritorio como en móvil. */
html body.ensutex-home #ensutex-continuity #contacto.ens-logo-finale .ens-logo-finale__media video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* En escritorio, el panel del proceso mide su contenido y los pasos respiran
   mejor sin alargar la tarjeta hasta el borde inferior de la escena. */
@media (min-width: 900px) and (min-height: 700px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: clamp(52px, 5.8svh, 60px);
    --p-subida: clamp(12px, 1.5svh, 18px);
    min-height: 0 !important;
    grid-template-rows: auto calc(4 * var(--p-renglon) + var(--p-subida)) auto !important;
    align-content: start !important;
    row-gap: clamp(10px, 1.35svh, 16px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(34px, 3vw, 48px) !important;
    line-height: 1.04 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo .proceso-salto {
    gap: clamp(14px, 1.15vw, 22px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-salto::before {
    flex-basis: 32px !important;
    font-size: 16px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    min-height: 0 !important;
    height: auto !important;
    gap: clamp(10px, 1.2svh, 14px) !important;
    padding: clamp(18px, 1.8vw, 28px) clamp(24px, 2.2vw, 36px) !important;
  }
}

/* Proceso · escritorio: acercar los títulos a la lámina y compactar la tarjeta. */
@media (min-width: 900px) and (min-height: 700px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: clamp(58px, 6.2svh, 66px);
    --p-subida: clamp(10px, 1.25svh, 14px);
    grid-template-rows: 8px calc(4 * var(--p-renglon) + var(--p-subida)) min-content !important;
    row-gap: clamp(8px, 1svh, 10px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(36px, 3.25vw, 52px) !important;
    line-height: 1.02 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo .proceso-salto {
    gap: clamp(12px, 1vw, 18px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-salto::before {
    flex-basis: 32px !important;
    font-size: 16px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    align-content: center !important;
    align-self: start !important;
    gap: 5px !important;
    padding: clamp(10px, 1.2svh, 12px) clamp(20px, 2vw, 28px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-bajada {
    padding: 0 !important;
    font-size: clamp(19px, 1.45vw, 21px) !important;
    line-height: 1.3 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-puntos {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    padding-inline: 12px !important;
    gap: 5px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-puntos li {
    font-size: clamp(16px, 1.15vw, 17px) !important;
    line-height: 1.3 !important;
  }
}