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

/* Source: catalogo.css */
/* Extracted from catalogo.html on 2026-06-01. Keep scoped to catalogo page. */

:root {
  --brand-black: #000000;
  --brand-white: #FDFBFF;
  --brand-red: #E20613;
  --brand-blue: #E20613;
  --ok: #16a34a;
  --brand-accent: #E20613;
}

/* Ensutex touch contract: buttons are tappable, not decorative. */
#catalogo button,
#promociones button,
#telas button,
#cotizador-express button,
#floating-quote-cart button {
  min-height: 44px;
}

#cotizador-wizard {
  color: var(--brand-white);
}

.wizard-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.wizard-step-btn {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wizard-step-btn.is-active {
  background: var(--brand-white);
  color: var(--brand-black);
  border-color: var(--brand-white);
}

.wizard-step-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.wizard-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border-radius: 1.25rem;
  padding: 1.25rem;
}

.wizard-kicker {
  display: block;
  color: var(--brand-blue);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.wizard-panel h3 {
  color: var(--brand-white);
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.wizard-copy,
.wizard-muted {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
  line-height: 1.6;
}

.wizard-pill-list,
.wizard-qty-list {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.wizard-pill,
.wizard-qty-row {
  display: grid;
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.24);
  border-radius: 0.875rem;
  padding: 0.85rem 1rem;
}

.wizard-pill {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.wizard-pill span,
.wizard-qty-name {
  color: var(--brand-white);
  font-size: 0.92rem;
  font-weight: 800;
}

.wizard-pill strong,
.wizard-qty-value {
  color: var(--brand-blue);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.wizard-qty-row input[type="range"] {
  width: 100%;
  accent-color: var(--brand-blue);
}

.wizard-primary {
  width: 100%;
  border: 1px solid var(--brand-red);
  background: var(--brand-red);
  color: var(--brand-white);
  border-radius: 999px;
  padding: 0.9rem 1rem;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 639px) {
  .wizard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wizard-step-btn {
    border-radius: 0.875rem;
    font-size: var(--font-label);
  }

  .catalog-paths,
  .pack-hint {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-paths__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pack-hint-cta {
    width: 100%;
  }
}

#testimonios .bg-white {
  color: #18181b !important;
}

#testimonios .text-gray-600 {
  color: #52525b !important;
}

#testimonios .text-black {
  color: #0b0a09 !important;
}

#cotizador-express button[type="submit"],
#cotizador-express .cta-final,
#floating-quote-cart button[data-final-quote] {
  min-height: 56px;
}

#catalogo button .material-symbols-outlined,
#promociones button .material-symbols-outlined,
#telas button .material-symbols-outlined,
#cotizador-express button .material-symbols-outlined,
#floating-quote-cart button .material-symbols-outlined {
  width: 1.25em;
  max-width: 1.25em;
  overflow: hidden;
  flex: 0 0 1.25em;
  line-height: 1;
}

.btn-cat,
.btn-floating,
.btn-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.34, 1.35, 0.64, 1);
}

.btn-cat {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(228 228 231);
  font-size: 0.875rem;
  line-height: 1.15;
}

.btn-cat--off {
  color: var(--brand-black);
  background: rgb(250 250 250);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.btn-cat--off:hover {
  color: #fff;
  background: var(--brand-black);
  border-color: var(--brand-black);
}

.btn-cat--on {
  color: #fff;
  background: var(--brand-black);
  border-color: var(--brand-black);
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}

.btn-cat--on:hover {
  background: rgb(24 24 27);
}

.btn-floating {
  min-height: 44px;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1.1;
}

.btn-floating--primary {
  color: var(--brand-black);
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.16);
}

.btn-floating--primary:hover {
  background: rgb(228 228 231);
}

.btn-floating--secondary {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-floating--secondary:hover {
  background: rgba(255,255,255,0.1);
}

.btn-floating--guide {
  color: rgb(161 161 170);
  background: rgb(39 39 42);
  border: 1px solid rgb(63 63 70);
}

.btn-floating--final {
  min-height: 56px;
  color: #fff;
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  box-shadow: 0 0 24px rgba(226, 6, 19, 0.34);
}

.btn-floating--final:hover {
  box-shadow: 0 0 34px rgba(226, 6, 19, 0.52);
}

.btn-checkout {
  width: 100%;
  min-height: 56px;
  margin-top: 2rem;
  padding: 1.25rem 1rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  line-height: 1.2;
}

.btn-checkout--locked {
  color: rgb(113 113 122);
  background: rgb(39 39 42);
  border: 1px solid rgb(63 63 70);
  cursor: not-allowed;
}

.btn-checkout--final {
  color: #fff;
  background: var(--brand-red);
  border: 1px solid var(--brand-red);
  box-shadow: 0 0 30px rgba(226, 6, 19, 0.3);
}

.btn-checkout--final:hover {
  box-shadow: 0 0 44px rgba(226, 6, 19, 0.48);
  transform: scale(1.02);
}

.btn-checkout--final:active {
  transform: scale(0.98);
}

.catalog-paths {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 74rem;
  margin: 0 auto 0.85rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(228 228 231);
  border-radius: 0.75rem;
  background: #fff;
}

/* La barra de decisión (buscador + categorías) viaja pegada bajo el menú.
   `#catalogo` libera el eje Y para que `position: sticky` funcione dentro. */
#catalogo {
  overflow-x: clip;
  overflow-y: visible;
}

@media (max-width: 767px) {
  .catalog-paths {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
  }

  .catalog-paths p {
    max-width: none;
  }
}

.catalog-paths p {
  color: rgb(82 82 91);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.catalog-paths__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.catalog-path-chip {
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.catalog-path-chip--single {
  color: var(--brand-black);
  background: rgb(244 244 245);
  border: 1px solid rgb(212 212 216);
}

.catalog-path-chip--pack {
  color: #fff;
  background: #15803d;
  border: 1px solid #15803d;
}

.catalog-path-chip:hover {
  transform: translateY(-1px);
}

.pack-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 0.45rem;
  color: rgb(21 128 61);
  background: rgb(248 246 245 / 0.94);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.1);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.34, 1.35, 0.64, 1);
}

.pack-badge::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1;
}

.pack-badge.is-muted {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.pack-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.65rem;
  border: 1px solid rgb(220 252 231);
  border-radius: 0.6rem;
  background: rgb(248 246 245);
}

.pack-hint-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  color: rgb(21 128 61);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
}

.pack-hint-copy strong {
  color: #166534;
  font-weight: 900;
}

.pack-hint-more {
  color: rgb(82 82 91);
  font-size: 0.68rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pack-hint-cta {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ok);
  border-radius: 0.5rem;
  color: #fff;
  background: var(--ok);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

#cat-grid.pack-focus .pack-hint {
  animation: packHintPulse 700ms cubic-bezier(0.34, 1.35, 0.64, 1) 2;
}

@keyframes packHintPulse {
  0%, 100% { transform: scale(1); box-shadow: none; }
  50% { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); }
}

.catalog-search {
  position: relative;
  z-index: 20;
}

.catalog-search__input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgb(212 212 216);
  border-radius: 0.875rem;
  background: #fff;
  color: var(--brand-black);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.875rem 3rem;
  outline: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.catalog-search__input:focus {
  border-color: var(--brand-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

.catalog-search__icon,
.catalog-search__clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.catalog-search__icon {
  left: 1rem;
  color: rgb(82 82 91);
}

.catalog-search__clear {
  right: 0.55rem;
  width: 40px;
  min-height: 40px !important;
  border-radius: 999px;
  color: var(--brand-black);
  background: rgb(244 244 245);
}

.catalog-search__clear:hover {
  background: rgb(228 228 231);
}

.catalog-search__results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  max-height: min(320px, 60vh);
  overflow-y: auto;
  border: 1px solid rgb(228 228 231);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.catalog-search__option {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgb(244 244 245);
  font-weight: 800;
  color: var(--brand-black);
  background: #fff;
}

.catalog-search__option:last-child {
  border-bottom: 0;
}

.catalog-search__option:hover,
.catalog-search__option[aria-selected="true"] {
  background: rgb(244 244 245);
}

.catalog-search__option mark {
  color: var(--brand-red);
  background: transparent;
}

@media (max-width: 639px) {
  #floating-quote-cart > div {
    flex-direction: column;
    border-radius: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .btn-floating {
    border-radius: 0.75rem;
  }
}

/* ===== Inline style block 1 from catalogo.html ===== */
/* Chatbot Dark Options */
  #chat-options-wrap { background-color: #0b0b0b !important; border-top: 1px solid #1f1f1f !important; }
  #chat-options-wrap .chat-options-title { color: #ffffff !important; font-weight: 700; margin-bottom: 0.5rem; }
  #chat-options-wrap .chat-chip { color: #ffffff !important; border-color: rgba(255,255,255,0.2) !important; background: transparent !important; }
  #chat-options-wrap .chat-chip-muted { background: rgba(255,255,255,0.08) !important; }
  #chat-options-wrap .chat-chip-primary { background: #25D366 !important; color: #052e16 !important; border-color: #25D366 !important; font-weight: 800 !important; }
  #chat-options-wrap .chat-chip-strong { background: #E20613 !important; color: #ffffff !important; border-color: #E20613 !important; font-weight: 800 !important; }
  #chat-options-wrap .chat-chip:hover { background: #ffffff !important; color: #000000 !important; }
   /* ==================== ESTILOS SELECCIÓN CATÁLOGO ==================== */
  .cat-card {
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  }
  .cat-card.selected-product {
      border-color: #000000 !important;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
      transform: translateY(-4px) !important;
  }
  .promo-card {
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  }
  .promo-card.selected-pack {
      border-color: #E20613 !important;
      box-shadow: 0 10px 25px -5px rgba(226, 6, 19, 0.45) !important;
      transform: translateY(-4px) !important;
  }
  .fabric-card-selected {
      border-color: #e20613 !important;
      border-width: 2px !important;
      box-shadow: 0 15px 30px -5px rgba(226, 6, 19, 0.35), 0 8px 15px -6px rgba(226, 6, 19, 0.2) !important;
      transform: translateY(-6px) !important;
      background-color: #ffffff !important;
  }

  /* Floating Quote Cart */
  #floating-quote-cart {
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
      transform: translateY(100px);
      opacity: 0;
  }
  #floating-quote-cart.visible {
      transform: translateY(0);
      opacity: 1;
  }
@media (max-width: 767px) {
      /* El sticky-cta-mobile se controla por JS (is-visible) — no forzar display:none aquí.
         Solo si existe #floating-quote-cart visible, cedemos espacio. */
      body:not(.has-sticky-cta) #sticky-cta-mobile {
          display: none !important;
      }

      #floating-quote-cart {
          bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
          width: calc(100% - 1.5rem);
          max-width: none;
          justify-content: space-between;
          border-radius: 1rem !important;
      }

      #floating-quote-cart > div:first-child {
          min-width: 0;
          flex: 1 1 auto;
      }

      #floating-cart-actions {
          flex: 0 0 auto;
      }

      #floating-cart-actions .btn-floating {
          max-width: 13rem;
          white-space: normal;
          text-align: center;
      }

      body.has-sticky-cta .floating-widgets {
          bottom: calc(8rem + env(safe-area-inset-bottom)) !important;
      }
  }

/* ===== Inline style block 2 from catalogo.html ===== */
/* ==================== ESTILOS SELECCIÓN CATÁLOGO ==================== */
  .cat-card {
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  }
  .cat-card.selected-product {
      border-color: #e20613 !important;
      box-shadow: 0 10px 25px -5px rgba(226, 6, 19, 0.45), 0 8px 10px -6px rgba(226, 6, 19, 0.45) !important;
      transform: translateY(-4px) !important;
  }
  .promo-card {
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  }
  .promo-card.selected-pack {
      border-color: #E20613 !important;
      box-shadow: 0 10px 25px -5px rgba(226, 6, 19, 0.45), 0 8px 10px -6px rgba(226, 6, 19, 0.45) !important;
      transform: translateY(-4px) !important;
  }
  .btn-selected-product {
      background-color: #e20613 !important;
      color: #ffffff !important;
      border-color: #e20613 !important;
  }
  .btn-selected-pack {
      background-color: #E20613 !important;
      color: #ffffff !important;
      border-color: #E20613 !important;
  }

/* ===== Inline style block 3 from catalogo.html ===== */
/* ==================== MOBILE TYPOGRAPHY FIX — NUNCA CORTAR PALABRAS ==================== */
  @media (max-width: 767px) {
      /* === REGLA GLOBAL: ninguna palabra se parte === */
      h1, h2, h3, h4,
      .catalog-hero-badge,
      .fabric-tab,
      [data-ty-primary] {
          word-break: normal !important;
          overflow-wrap: break-word !important;
          hyphens: none !important;
          text-align: center !important;
      }

      /* === H1 HERO PRINCIPAL (Catálogo de indumentaria sublimada personalizada) === */
      h1.text-3xl,
      h1[data-ty-primary] {
          font-size: 1.45rem !important;     /* ~23px, cabe en 320px */
          line-height: 1.15 !important;
          letter-spacing: -0.02em !important;
          padding-left: 0.25rem !important;
          padding-right: 0.25rem !important;
      }

      /* === H2 SECCIONES (Indumentaria Sublimada, Packs Ensutex, Las Telas, Cotizador Express, etc.) === */
      h2.text-2xl,
      h2.text-3xl,
      h2[data-ty-primary] {
          font-size: 1.3rem !important;      /* ~21px */
          line-height: 1.18 !important;
          letter-spacing: -0.01em !important;
      }

      /* === H3 TARJETAS PRODUCTO (Polera sublimada manga corta cuello redondo, etc.) === */
      h3.text-base {
          font-size: 0.8rem !important;       /* ~13px */
          line-height: 1.25 !important;
          letter-spacing: 0 !important;
      }

      /* === H3 PACKS (Pack Dupla, Pack Conjunto, etc.) === */
      h3.text-xl {
          font-size: 1.05rem !important;      /* ~17px */
          line-height: 1.2 !important;
      }

      /* === H3 TELAS (Tela Panal, Tela Shelsey, Fleece Monarca, Microfibra Kabó) === */
      h3.text-2xl {
          font-size: 1.15rem !important;      /* ~18px */
          line-height: 1.2 !important;
      }

      /* === COTIZADOR EXPRESS H2 (text-3xl lg:text-5xl) === */
      #cotizador-express h2 {
          font-size: 1.4rem !important;
          line-height: 1.15 !important;
      }

      /* === BADGES/CHIPS DECORATIVOS (12 MODELOS, Promociones Activas, etc.) === */
      .catalog-hero-badge,
      span.tracking-\[0\.3em\],
      span.tracking-\[0\.22em\] {
          font-size: 0.6rem !important;        /* ~9.6px */
          letter-spacing: 0.12em !important;
          padding-left: 0.5rem !important;
          padding-right: 0.5rem !important;
          max-width: 100% !important;
          white-space: normal !important;
      }

      /* === TABS DE FILTRO (Todas, Poleras MC, Poleras ML, etc.) === */
      .fabric-tab {
          font-size: 0.75rem !important;       /* ~12px */
          letter-spacing: 0.04em !important;
      }

      /* === DESCRIPTIONS/PARAGRAPHS de sección === */
      section p.text-base {
          font-size: 0.85rem !important;
          line-height: 1.55 !important;
      }

      /* === CONTENEDORES DE CABECERA: centrado === */
      .mb-14.md\\:flex,
      .mb-12.text-center,
      .text-center.mb-16 {
          text-align: center !important;
          justify-content: center !important;
          align-items: center !important;
      }

      /* === CONTACTO / CTA INFERIOR === */
      h2.text-3xl.tracking-tighter {
          font-size: 1.3rem !important;
          line-height: 1.15 !important;
      }

      /* === FORM HEADING === */
      h3.text-xl.uppercase {
          font-size: 1rem !important;
          line-height: 1.2 !important;
      }

      /* === CTA BOXES entre secciones === */
      h4.font-black.uppercase {
          font-size: 0.8rem !important;
          line-height: 1.3 !important;
          letter-spacing: 0.02em !important;
      }

      /* === Calculador gran total: no romper === */
      #calc-grand-total {
          font-size: 2.5rem !important;
          letter-spacing: -0.03em !important;
      }

      /* === Stepper labels === */
      #cotizador-express .step-num {
          width: 1.75rem !important;
          height: 1.75rem !important;
          font-size: 0.6rem !important;
      }
  }

/* ===== Inline style block 4 from catalogo.html ===== */
/* Cerrojo del motor de escritura: sólo oculta si el JS está vivo (`ty-js`) y la red de
   seguridad de los 4,5 s todavía no disparó. Sin JS el texto queda visible. */
html.ty-js:not(.ty-fallback-visible) [data-ty] { opacity: 0; }
 body { font-family: var(--ens-font-body-family); letter-spacing: 0; background-color: #FDFBFF; color: #1e1c1a; }
 h1, h2, h3, h4, .font-display { font-family: var(--ens-font-display-family); letter-spacing: 0; }
 .hero-bg { background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.2)), url('assets/images/optimized/general/premium_dark_fabric.webp'); background-size: cover; background-position: center; }
 .text-gradient { background: linear-gradient(to right, #E20613, #ff4d4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
 /* Catálogo de telas — hover: agrandar el marco y zoom sutil de textura manteniendo foto completa */
 .fabric-photo {
 transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease, border-color 0.5s ease;
 will-change: transform;
 }
 .fabric-photo:hover {
 transform: scale(1.04);
 box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
 border-color: #111;
 z-index: 2;
 }
 .fabric-img {
 transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
 transform-origin: center center;
 }
 .fabric-photo:hover .fabric-img {
 transform: scale(1.08);
 }

 /* Scrollbar SIEMPRE visible en chatbot (UX clara de navegación) */
 #chat-messages, #chat-options {
 scrollbar-width: thin;
 scrollbar-color: #111 #e5e5e5;
 scrollbar-gutter: stable;
 }
 #chat-messages::-webkit-scrollbar, #chat-options::-webkit-scrollbar { width: 10px; }
 #chat-messages::-webkit-scrollbar-track, #chat-options::-webkit-scrollbar-track { background: #e5e5e5; border-radius: 5px; }
 #chat-messages::-webkit-scrollbar-thumb, #chat-options::-webkit-scrollbar-thumb {
 background: #111; border-radius: 5px; border: 2px solid #e5e5e5;
 }
 #chat-messages::-webkit-scrollbar-thumb:hover, #chat-options::-webkit-scrollbar-thumb:hover { background: #E20613; }
 /* Indicador "scroll abajo" dentro del chat */
 #chat-scroll-down {
 position: absolute; right: 14px; bottom: 8px; z-index: 5;
 width: 34px; height: 34px; border-radius: 50%;
 background: #E20613; color: #fff;
 display: none; align-items: center; justify-content: center;
 box-shadow: 0 6px 16px rgba(0,0,0,0.25);
 cursor: pointer; border: none;
 transition: transform 0.15s ease, background 0.15s ease;
 }
 #chat-scroll-down:hover { background: #b80510; transform: translateY(-2px); }
 #chat-scroll-down.visible { display: flex; animation: fadeIn 0.2s ease; }
 @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
 /* Pista visual: "hay más abajo" con fade en zona de mensajes */
 .chat-fade-bottom::after {
 content: ''; position: absolute; left: 0; right: 0; bottom: 0;
 height: 28px; pointer-events: none;
 background: linear-gradient(to bottom, rgba(251, 250, 249,0), rgba(251, 250, 249,1));
 }
 /* Hint de scroll para zona de opciones */
 #chat-options-wrap { position: relative; }
 #chat-options-wrap[data-overflow="true"]::before {
 content: 'Desliza para ver más ?';
 position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
 font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
 background: #111; color: #fff; padding: 3px 8px; border-radius: 10px;
 white-space: nowrap; z-index: 3;
 }

 /* Technical Toast (Notificación de sistema) */
 .technical-toast {
 position: fixed;
 bottom: 2rem;
 left: 50%;
 transform: translateX(-50%);
 background: #000;
 color: #fff;
 padding: 0.75rem 1.5rem;
 border-radius: 99px;
 font-size: 0.75rem;
 font-family: var(--ens-font-body-family);
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 z-index: 10000;
 box-shadow: 0 10px 25px rgba(0,0,0,0.5);
 border: 1px solid rgba(255,255,255,0.2);
 pointer-events: none;
 animation: toastIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }

 @keyframes toastIn {
 from { opacity: 0; transform: translate(-50%, 20px); }
 to { opacity: 1; transform: translate(-50%, 0); }
 }

 /* ============== UPGRADES UI/UX 2026 ============== */

 /* 1. Page loader */
 #page-loader {
 position: fixed; inset: 0; z-index: 99999;
 background: #000; display: flex; align-items: center; justify-content: center;
 transition: opacity 0.6s ease 0.2s, visibility 0.6s ease 0.2s;
 overflow: hidden;
 }
 #page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }

 #page-loader { display: none !important; }

 #page-loader::before {
 content: '';
 position: absolute;
 width: 42vmin;
 height: 42vmin;
 border: 1px solid rgba(255,255,255,0.16);
 border-radius: 50%;
 animation: loaderRing 1.8s cubic-bezier(.2,.8,.2,1) infinite;
 }
 #page-loader::after {
 content: '';
 position: absolute;
 width: 180px;
 max-width: 54vw;
 height: 2px;
 bottom: calc(50% - 105px);
 left: 50%;
 transform: translateX(-50%);
 background: linear-gradient(90deg, transparent, #fff, transparent);
 animation: loaderLine 1.2s ease-in-out infinite;
 }
 #page-loader img {
 position: relative;
 width: 148px; max-width: 50vw;
 filter: brightness(0) invert(1);
 animation: loaderMark 1.8s cubic-bezier(.2,.8,.2,1) infinite;
 }
 @keyframes loaderMark {
 0% { opacity: 0; transform: scale(0.82) rotate(-4deg); filter: brightness(0) invert(1) blur(3px); }
 22% { opacity: 1; transform: scale(1.08) rotate(1deg); filter: brightness(0) invert(1) blur(0); }
 55% { opacity: 0.92; transform: scale(1) rotate(0); }
 100% { opacity: 0.62; transform: scale(0.96) rotate(0); }
 }
 @keyframes loaderRing {
 0% { opacity: 0; transform: scale(0.74); }
 35% { opacity: 1; transform: scale(1); }
 100% { opacity: 0; transform: scale(1.22); }
 }
 @keyframes loaderLine {
 0% { opacity: 0.15; clip-path: inset(0 100% 0 0); }
 50% { opacity: 0.85; clip-path: inset(0 0 0 0); }
 100% { opacity: 0.15; clip-path: inset(0 0 0 100%); }
 }

 /* 2. Reveal on scroll */
 [data-reveal] {
 opacity: 0;
 transform: translateY(28px);
 transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
 will-change: opacity, transform;
 }
 [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
 [data-reveal][data-reveal].is-visible { transition-delay: 0.1s; }
 [data-reveal][data-reveal].is-visible { transition-delay: 0.2s; }
 [data-reveal][data-reveal].is-visible { transition-delay: 0.3s; }
 [data-reveal][data-reveal].is-visible { transition-delay: 0.4s; }

 /* 3D Premium Reveal */
 [data-reveal="reveal-3d"] {
 opacity: 0;
 transform: perspective(1200px) rotateX(15deg) translateY(40px) scale(0.95);
 transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 [data-reveal="reveal-3d"].is-visible {
 opacity: 1;
 transform: perspective(1200px) rotateX(0) translateY(0) scale(1);
 }

 /* Chatbot discreto: sin pulso para no competir con el CTA */
 .chatbot-attention {
 animation: none;
 }

 .chatbot-avatar-img {
 width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
 /* El nuevo robot ya tiene colores premium, no requiere filtros de inversión */
 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 /* Efecto de asomado al pasar el mouse */
 #chatbot-trigger:hover .chatbot-avatar-img { transform: scale(1.15) rotate(5deg); }

 @media (prefers-reduced-motion: reduce) {
 [data-reveal] { opacity: 1; transform: none; transition: none; }
 #page-loader::before, #page-loader::after, #page-loader img { animation: none; }
 }

 /* 3. Tilt 3D para cards (solo desktop con cursor fino) */
 @media (hover: hover) and (pointer: fine) {
 .tilt-card {
 transform-style: preserve-3d;
 transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
 will-change: transform;
 }
 .tilt-card .tilt-content {
 transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
 transform: translateZ(0);
 }
 }

/* 4. Sticky CTA mobile */
@media (min-width: 768px) {
  #sticky-cta-mobile {
    /* En escritorio la cotización no necesita barra fija: ahí manda la píldora
       del menú. (Antes esta regla valía en TODOS los anchos con
       `display: none !important` —y el `!important` le ganaba al `display: flex`
       de la media query de abajo—, así que en el celular la barra quedaba
       marcada como visible por el JS y no se veía nunca: 29-sep, ver el bloque
       «la barra del celular se ve» en catalogo-un-camino.css.) */
    display: none !important;
  }
}

#sticky-cta-mobile {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
 background: rgba(0,0,0,0.92); backdrop-filter: blur(10px);
 border-top: 1px solid rgba(255,255,255,0.1);
 padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
 display: none; gap: 0.5rem;
 transform: translateY(100%);
 transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 #sticky-cta-mobile.is-visible { transform: translateY(0); }
 @media (max-width: 767px) {
 #sticky-cta-mobile { display: flex; }
 body.has-sticky-cta { padding-bottom: 70px; }
 .floating-widgets {
 right: 0.75rem !important;
 bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important;
 gap: 0.6rem !important;
 }
 #chatbot-cta { display: none !important; }
 #chatbot-panel {
 left: 0.75rem !important;
 right: 0.75rem !important;
 bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important;
 width: auto !important;
 max-height: calc(100dvh - 6.5rem) !important;
 height: calc(100dvh - 6.5rem) !important;
 }
 #chatbot-trigger,
 .floating-widgets > a {
 width: 3.25rem !important;
 height: 3.25rem !important;
 }
 }

 /* 5. Logo wall infinito */
 .logo-wall {
 overflow: hidden; position: relative;
 mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
 -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
 }
 .logo-track {
 display: flex; gap: 3rem; width: max-content;
 animation: logoScroll 38s linear infinite;
 }
 .logo-wall:hover .logo-track { animation-play-state: paused; }
 @keyframes logoScroll {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
 }
 .logo-item {
 flex-shrink: 0; height: 80px; min-width: 140px;
 display: flex; align-items: center; justify-content: center;
 padding: 0 1rem;
 filter: grayscale(100%) brightness(0.4);
 opacity: 0.55;
 transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
 position: relative;
 }
 .logo-item:hover {
 filter: grayscale(0%) brightness(1);
 opacity: 1;
 transform: scale(1.08);
 }
 .logo-item img { max-height: 100%; max-width: 100%; object-fit: contain; }
 .logo-item .placeholder {
 width: 100%; height: 100%;
 border: 2px dashed rgba(255,255,255,0.18);
 border-radius: 6px;
 display: flex; align-items: center; justify-content: center;
 color: rgba(255,255,255,0.4); font-size: 10px; text-transform: uppercase;
 letter-spacing: 0.2em; font-weight: 800;
 }

 /* 6. Antes/Después slider */
 .compare {
 position: relative; overflow: hidden; user-select: none;
 border-radius: 8px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
 aspect-ratio: 16/10; background: #111;
 }
 .compare img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
 .compare .compare-after-wrap {
 position: absolute; inset: 0; width: 50%;
 overflow: hidden; transition: width 0s;
 }
 .compare .compare-after-wrap img { width: 200%; max-width: none; }
 .compare .compare-handle {
 position: absolute; top: 0; bottom: 0; width: 4px; background: #fff;
 left: 50%; transform: translateX(-50%);
 box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 0 20px rgba(255,255,255,0.3);
 cursor: ew-resize; touch-action: none;
 }
 .compare .compare-handle::before {
 content: ''; position: absolute; left: 50%; top: 50%;
 transform: translate(-50%, -50%);
 width: 48px; height: 48px; border-radius: 50%;
 background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
 }
 .compare .compare-handle::after {
 content: '?'; position: absolute; left: 50%; top: 50%;
 transform: translate(-50%, -50%); font-size: 20px; font-weight: bold;
 color: #000; pointer-events: none;
 }
 .compare .compare-label {
 position: absolute; top: 1rem; padding: 0.35rem 0.85rem;
 font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em;
 border-radius: 999px; backdrop-filter: blur(6px);
 }
 .compare .compare-label-before { left: 1rem; background: rgba(0,0,0,0.7); color: #fff; }
 .compare .compare-label-after { right: 1rem; background: rgba(255,255,255,0.9); color: #000; }

 /* 7. Lightbox */
 #lightbox {
 position: fixed; inset: 0; z-index: 9998;
 background: rgba(0,0,0,0.95); backdrop-filter: blur(8px);
 display: none; align-items: center; justify-content: center;
 padding: 2rem 1rem;
 }
 #lightbox.open { display: flex; animation: lbFadeIn 0.3s ease; }
 @keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
 #lightbox .lb-img-wrap {
 max-width: 92vw; max-height: 88vh; position: relative;
 display: flex; align-items: center; justify-content: center;
 }
 #lightbox img, #lightbox video {
 max-width: 100%; max-height: 88vh;
 object-fit: contain; border-radius: 6px;
 box-shadow: 0 25px 80px rgba(0,0,0,0.6);
 }
 #lightbox .lb-btn {
 position: absolute; top: 50%; transform: translateY(-50%);
 width: 50px; height: 50px; border-radius: 50%;
 background: rgba(255,255,255,0.12); color: #fff;
 border: 1px solid rgba(255,255,255,0.2);
 display: flex; align-items: center; justify-content: center;
 cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
 z-index: 2;
 }
 #lightbox .lb-btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.05); }
 #lightbox .lb-prev { left: 1rem; }
 #lightbox .lb-next { right: 1rem; }
 #lightbox .lb-close {
 position: absolute; top: 1rem; right: 1rem;
 width: 44px; height: 44px; border-radius: 50%;
 background: rgba(255,255,255,0.12); color: #fff;
 border: 1px solid rgba(255,255,255,0.2);
 display: flex; align-items: center; justify-content: center;
 cursor: pointer; z-index: 3;
 }
 #lightbox .lb-counter {
 position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
 background: rgba(0,0,0,0.6); color: #fff;
 padding: 0.4rem 1rem; border-radius: 999px;
 font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
 }

 /* 8. UGC cards: hover y placeholder */
 .ugc-card {
 position: relative; overflow: hidden; cursor: pointer;
 border-radius: 8px; aspect-ratio: 4/5;
 background: #111;
 transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
 }
 .ugc-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); }
 .ugc-card img, .ugc-card video {
 width: 100%; height: 100%; object-fit: cover;
 transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
 }
 .ugc-card:hover img, .ugc-card:hover video { transform: scale(1.06); }
 .ugc-card .ugc-overlay {
 position: absolute; inset: 0;
 background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
 display: flex; flex-direction: column; justify-content: flex-end;
 padding: 1.25rem; color: #fff;
 opacity: 1; transition: opacity 0.3s ease;
 }
 .ugc-card .ugc-tag {
 align-self: flex-start;
 background: #E20613; color: #fff;
 padding: 0.25rem 0.7rem; font-size: 9px; font-weight: 900;
 text-transform: uppercase; letter-spacing: 0.2em;
 border-radius: 999px; margin-bottom: 0.5rem;
 }
 .ugc-card .ugc-name { font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
 .ugc-card .ugc-disc { font-size: 11px; opacity: 0.85; margin-top: 2px; }
 .ugc-card .ugc-play {
 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
 width: 56px; height: 56px; border-radius: 50%;
 background: rgba(255,255,255,0.95); color: #000;
 display: flex; align-items: center; justify-content: center;
 box-shadow: 0 10px 25px rgba(0,0,0,0.4);
 pointer-events: none;
 }
 .ugc-card.is-photo .ugc-play { display: none; }
 .ugc-card .placeholder-content {
 position: absolute; inset: 1rem;
 border: 2px dashed rgba(255,255,255,0.2); border-radius: 6px;
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 color: rgba(255,255,255,0.5);
 text-align: center; padding: 1rem; gap: 0.5rem;
 }
 .ugc-card .placeholder-content .material-symbols-outlined { font-size: 36px; }
 .ugc-card .placeholder-content small {
 font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
 }

 /* 9. Tabs catálogo — etiquetas legibles con el conteo real de modelos */
 .cat-tab {
 display: inline-flex; align-items: center; justify-content: center;
 min-height: 2.5rem; padding: 0.45rem 1rem;
 font-size: 14px; font-weight: 750;
 text-transform: none; letter-spacing: 0.01em;
 border: 1px solid #e5e5e5; border-radius: 999px;
 background: #fff; color: #555;
 white-space: nowrap;
 cursor: pointer;
 transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
             border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
             color 180ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 .cat-tab:hover { border-color: #111; color: #111; }
 .cat-tab.active { background: #111; border-color: #111; color: #fff; }
 .cat-tab:focus-visible { outline: 3px solid rgba(226, 6, 19, 0.5); outline-offset: 2px; }

 .cat-card { transition: opacity 0.4s ease, transform 0.4s ease; }
 .cat-card.is-hidden { display: none; }

 /* Entrada escalonada al cambiar de filtro: fundido + desplazamiento corto.
    Solo transform/opacity, así la altura de la fila no cambia. */
 @keyframes catCardEnter {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
 .cat-card.is-entering {
   animation: catCardEnter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
   animation-delay: calc(var(--cat-enter-order, 0) * 40ms);
 }

 @media (prefers-reduced-motion: reduce) {
   .cat-card.is-entering { animation: none; }
 }

 @media (max-width: 639px) {
  #cat-grid {
    display: flex !important;
    gap: 0.875rem !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 1rem;
    padding: 0 1rem 0.75rem;
    margin-left: -1rem;
    margin-right: -1rem;
    scrollbar-width: none;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
  }

  #cat-grid::-webkit-scrollbar {
    display: none;
  }

  #cat-grid .cat-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
 }

 /* 10. Botón ripple sutil en CTAs principales */
 .btn-ripple { position: relative; overflow: hidden; }
 .btn-ripple::after {
 content: ''; position: absolute; top: 50%; left: 50%;
 width: 0; height: 0; border-radius: 50%;
 background: rgba(255,255,255,0.3);
 transform: translate(-50%, -50%);
 transition: width 0.5s ease, height 0.5s ease, opacity 0.6s ease;
 opacity: 0; pointer-events: none;
 }
 .btn-ripple:active::after { width: 280px; height: 280px; opacity: 1; transition: 0s; }

  /* 11. Hero showreel: shimmer sobre marco */
  #hero-showreel-frame::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none; z-index: 4;
  animation: shimmerSweep 8s ease-in-out infinite;
  }
  @keyframes shimmerSweep {
  0%, 65% { transform: translateX(-100%); }
  72% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
  }

  /* 12. Mobile hero: showreel arriba en mobile */
  @media (max-width: 1023px) {
  #hero-grid { grid-template-areas: "media" "text"; }
  #hero-text { grid-area: text; }
  #hero-media { grid-area: media; max-width: 320px; margin: 0 auto 1.5rem; }
  }

  /* 13. Cabecera Catálogo: Showreel de Videos Formato Reels (9:16 / Vertical) */
  #cat-prueba-visual {
    max-width: 330px !important;
    width: 100%;
    margin: 0 auto;
  }

  #cat-prueba-visual .showreel-frame {
    position: relative;
    display: block !important;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 360 / 550 !important; /* Reels Aspect Ratio 9:16 aproximado */
    border: 1.5px solid #000000 !important;
    border-radius: 2rem !important; /* Bordes redondeados elegantes del mockup */
    max-width: 330px !important;
    width: 100% !important;
    background: #0a0a0a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  }

  #cat-prueba-visual .showreel-slide {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important; /* Elimina flex row side-by-side */
    overflow: hidden;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border-radius: 2rem !important;
    background: #0a0a0a !important;
    transition: opacity 1s ease-in-out,
                visibility 1s ease-in-out;
  }

  #cat-prueba-visual .showreel-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2;
  }

  #cat-prueba-visual .showreel-slide video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
    pointer-events: none !important; /* Soluciona el error/símbolo raro de traducción/OCR de Safari al posicionar el cursor */
  }

  #cat-prueba-visual .showreel-label {
    position: absolute !important;
    left: 50% !important;
    bottom: 1.5rem !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    white-space: nowrap !important;
    font-family: var(--ens-font-body-family) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    padding: 0.45rem 0.9rem !important;
    background: rgba(0, 0, 0, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    text-shadow: none !important;
    pointer-events: none !important;
  }

/* ===== Inline style block 5 from catalogo.html ===== */
/* Composición fotográfica Premium para Promociones */
  .promo-photo-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 11;
      background: radial-gradient(circle at center, #18181b 0%, #000000 100%);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 2px solid #000;
  }
  .promo-photo-wrapper::after {
      content: '';
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
      pointer-events: none;
      z-index: 5;
  }
  .photo-layer {
      position: absolute;
      object-fit: contain;
      mix-blend-mode: screen;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  /* Efecto suave de zoom al hacer hover en la tarjeta */
  .group:hover .photo-layer {
      transform: scale(1.04);
  }

/* ===================================================================
   AJUSTES UX CATÁLOGO (cowork 2026-06)
   =================================================================== */

/* 1. Botón "elegir tela" inactivo: ROJO de contraste para que no se olvide.
   Cubre el estado post-interacción (btn-cat--off lo aplica el JS). */
#fabric-btn-panal.btn-cat--off,
#fabric-btn-shelsey.btn-cat--off{
  background:#E20613 !important;
  color:#fff !important;
  border-color:#E20613 !important;
  box-shadow:0 4px 14px rgba(226,6,19,.35);
}

/* Productos libres: la prenda flota; la información no encierra el visual. */
#cat-grid [data-product-id] {
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#cat-grid [data-product-id]:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

.catalog-product-stage {
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #21201e 0%, #0d0c0b 72%);
  border: 0;
  isolation: isolate;
}

.catalog-product-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 8%;
  width: 48%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--brand-blue) 20%, transparent), transparent 72%);
  transform: translateX(-50%);
  opacity: .62;
}

.catalog-product-visual {
  position: relative;
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px color-mix(in srgb, var(--inverse-surface) 22%, transparent));
  transform: translate3d(0, 0, 0);
  transition: transform .42s var(--ease), filter .42s var(--ease);
  will-change: transform;
  transform-origin: 50% 55%;
}

#cat-grid [data-product-id] > .p-5 {
  border-top: 1px solid var(--border);
  background: transparent !important;
}

@media (hover: hover) and (pointer: fine) {
  #cat-grid [data-product-id]:hover .catalog-product-visual {
    filter: drop-shadow(0 32px 30px color-mix(in srgb, var(--inverse-surface) 30%, transparent));
    transform: translate3d(0, -10px, 0) scale(1.035);
  }
}

@media (max-width: 767px) {
  .catalog-product-stage {
    min-height: 280px;
    margin-bottom: -1rem;
  }

  .catalog-product-visual {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-product-visual {
    transition: none !important;
    transform: none !important;
  }
}

/* Carrusel editorial del catálogo: protagonista al centro, contexto a los lados. */
.catalog-carousel-shell {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  scroll-margin-top: 6rem;
}

.catalog-carousel__toolbar {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 38rem);
  margin: 0 auto 1rem;
}

.catalog-carousel__arrow {
  width: 3rem;
  height: 3rem;
  border: 1px solid #27272a;
  border-radius: 999px;
  background: #0b0a09;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 180ms ease, background-color 180ms ease;
}

.catalog-carousel__arrow:hover,
.catalog-carousel__arrow:focus-visible {
  background: #E20613;
  color: #0d0c0b;
  outline: 2px solid #E20613;
  outline-offset: 3px;
  transform: scale(1.04);
}

.catalog-carousel__status {
  margin: 0;
  overflow: hidden;
  color: #27272a;
  font-size: 0.74rem;
  margin: 0;
  border-radius: 1.15rem;
}

#cat-grid[data-catalog-carousel] > .is-carousel-center > .p-5 {
  margin-top: 0.75rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.9rem;
  background: #ffffff !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
  overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important;
  background: transparent !important;
}

#cat-grid[data-catalog-carousel] .catalog-product-stage::after {
  content: '';
  position: absolute;
  bottom: 8%;
  left: 22.5%;
  width: 55%;
  height: 14%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.18), transparent 72%);
  pointer-events: none;
}

#cat-grid[data-catalog-carousel] .catalog-product-visual {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.12)) !important;
}

#cat-grid[data-catalog-carousel] > [data-product-id]:hover .catalog-product-visual {
  transform: scale(1.08) !important;
}

#cat-grid[data-catalog-carousel] > [data-product-id] > .p-5 {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 1.25rem !important;
  border-top: 1px solid #f4f4f5 !important;
  background: #fff !important;
}

@media (max-width: 1023px) {
  #cat-grid[data-catalog-carousel] > [data-product-id] {
    flex: 0 0 calc(50% - 0.75rem) !important;
    width: calc(50% - 0.75rem) !important;
  }
}

@media (max-width: 767px) {
  .catalog-carousel__toolbar {
    padding: 0.5rem 0.75rem;
  }

  .catalog-carousel__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }

  .catalog-carousel__status {
    font-size: 0.7rem;
  }

  #cat-grid[data-catalog-carousel] {
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    scroll-padding-left: 1rem !important;
  }

  #cat-grid[data-catalog-carousel] > [data-product-id] {
    flex: 0 0 calc(85% - 0.5rem) !important;
    width: calc(85% - 0.5rem) !important;
    max-width: none !important;
    scroll-snap-align: center !important;
  }
}

#cat-grid[data-catalog-carousel] > .is-carousel-center .text-zinc-500 {
  color: #52525b !important;
  font-weight: 700;
}

@media (max-width: 767px) {
  .catalog-carousel__toolbar {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    width: 100%;
  }

  .catalog-carousel__arrow {
    width: 2.75rem;
    height: 2.75rem;
  }

  .catalog-carousel__status {
    font-size: 0.67rem;
  }

  #cat-grid[data-catalog-carousel] {
    min-height: 39rem;
    padding: 0 !important;
    cursor: grab;
  }

  #cat-grid[data-catalog-carousel] > [data-product-id] {
    width: calc(100% - 2.7rem) !important;
    min-width: 0 !important;
    flex-basis: auto !important;
  }

  #cat-grid[data-catalog-carousel] > .is-carousel-prev {
    transform: translate3d(calc(-50% - 72vw), 1.7rem, 0) scale(0.74) !important;
  }

  #cat-grid[data-catalog-carousel] > .is-carousel-next {
    transform: translate3d(calc(-50% + 72vw), 1.7rem, 0) scale(0.74) !important;
  }

  #cat-grid[data-catalog-carousel] > .is-carousel-center > .p-5 {
    margin-top: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cat-grid[data-catalog-carousel],
  #cat-grid[data-catalog-carousel] > [data-product-id],
  .catalog-carousel__arrow {
    transition: none !important;
  }
}

@media (max-width: 1023px) {
  .catalog-flow-bridge {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .catalog-flow-bridge__actions {
    width: 100% !important;
  }

  .catalog-flow-bridge__actions > button {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
  }
}

/* Movimiento reducido: el catálogo se queda quieto y con todo el texto a la vista.
   El celular ya no entra aquí: anima igual que el escritorio (Carlitos, 29-sep). El
   !important es necesario porque el cerrojo de `ty-js` es más específico. */
@media (prefers-reduced-motion: reduce) {
  .catalog-page-hero [data-ty],
  #catalogo [data-ty] {
    opacity: 1 !important;
  }
}

@media (max-width: 639px) {
  .catalog-flow-bridge {
    padding: 1.25rem !important;
  }

  .catalog-flow-bridge__actions {
    flex-direction: column !important;
  }
}
#fabric-btn-panal.btn-cat--off:hover,
#fabric-btn-shelsey.btn-cat--off:hover{
  background:#b50410 !important;
  border-color:#b50410 !important;
}

/* 2. CTA de complemento en estado "hecho" (promo ya activa = sin fricción) */
#complement-cta.complement-cta--done{
  background:#0f9d63;
  border-color:#34d399;
  cursor:default;
}

/* 3. Resalte temporal de la ventana de complemento al activarla */
#complement-section.complement-active{
  outline:2px solid #34d399;
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(52,211,153,.25);
}

/* 4. CATÁLOGO DESLIZABLE (carrusel) EN MÓVIL.
   A la gente le gusta deslizar: en <=640px el grid pasa a scroll horizontal
   con snap por tarjeta y peek (~20% de la siguiente visible). Desktop intacto. */
@media (max-width:640px){
  #cat-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y pinch-zoom;
    overscroll-behavior-x:contain;
    gap:0.75rem;
    padding-bottom:0.5rem;
    scrollbar-width:none;
  }
  #cat-grid::-webkit-scrollbar{display:none;}
  #cat-grid > [data-product-id]{
    flex:0 0 80%;
    min-width:80%;
    scroll-snap-align:start;
  }
}
@media (prefers-reduced-motion:reduce){
  #cat-grid{scroll-behavior:auto;}
}

/* 5. Selector compacto de combos (poleras MC con 3 opciones, sin saturar de botones) */
.pack-hint--multi{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pack-hint-select{
  width:100%;
  min-height:44px;
  border:1.5px solid #16a34a;
  border-radius:0.6rem;
  background:#f6f4f3;
  color:#14532d;
  font-weight:700;
  font-size:0.82rem;
  padding:0 0.7rem;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0.6rem center;
}
.pack-hint-select:focus{
  outline:none;
  border-color:#0f9d63;
  box-shadow:0 0 0 3px rgba(22,163,74,.25);
}

/* 6. CTA complemento: verde opaco en reposo -> verde electrico al apretar / al estar listo */
#complement-cta.complement-cta--bright{
  background:#22c55e !important;
  border-color:#4ade80 !important;
  box-shadow:0 0 22px rgba(34,197,94,.7) !important;
  transform:scale(1.04);
}
#complement-cta.complement-cta--done{
  background:#16c95e;
  border-color:#4ade80;
  box-shadow:0 0 16px rgba(34,197,94,.45);
  cursor:default;
}

/* Total final: escala con la columna y nunca se corta en valores sobre $1.000.000. */
#calc-grand-total{
  font-size:clamp(2rem, 3vw, 2.85rem) !important;
  letter-spacing:0 !important;
  white-space:nowrap;
  max-width:100%;
}

/* Mobile: tarjetas con altura natural y widgets flotantes sin tapar acciones. */
@media (max-width:640px){
  #cat-grid{
    align-items:flex-start;
    touch-action:pan-y pinch-zoom;
    overscroll-behavior-y:auto;
    cursor:grab;
  }

  #cat-grid > [data-product-id]{
    flex-basis:92% !important;
    min-width:92% !important;
    scroll-snap-stop:normal;
  }

  #cat-grid.is-horizontal-swipe{
    cursor:grabbing;
    scroll-snap-type:none;
    user-select:none;
  }

}

@media (max-width:767px){
  body.has-sticky-cta{
    padding-bottom:calc(7.5rem + env(safe-area-inset-bottom)) !important;
  }

  #floating-quote-cart{
    left:0.75rem !important;
    right:0.75rem !important;
    width:auto !important;
    max-width:none !important;
    padding:0.5rem 0.625rem !important;
    gap:0.5rem !important;
    border-radius:1rem !important;
    align-items:center !important;
    justify-content:space-between !important;
    transform:translateY(100px);
  }

  #floating-quote-cart.visible{
    transform:translateY(0);
  }

  #floating-quote-cart.avoid-overlap{
    opacity:0 !important;
    pointer-events:none;
  }

  #floating-quote-cart > div:first-child{
    flex-direction:row !important;
    padding:0 !important;
    min-width:0;
  }

  #floating-quote-cart > div:first-child > div:last-child{
    display:none;
  }

  #floating-cart-actions{
    flex:1 1 auto !important;
    min-width:0;
  }

  #floating-cart-actions .btn-floating{
    width:100%;
    min-height:2.75rem;
    padding:0.5rem 0.75rem !important;
    font-size:0.72rem !important;
    line-height:1.1 !important;
  }

  body.has-sticky-cta .floating-widgets{
    right:0.75rem !important;
    bottom:calc(8rem + env(safe-area-inset-bottom)) !important;
  }
}

/* F2 — una sola barra de decisión y un cotizador de tres momentos.
   La barra (buscador + categorías) viaja pegada bajo el menú mientras se
   recorre #catalogo; al esconderse el menú direccional sube a top:0. */
:root {
  --ens-nav-height: 5rem;
}

.catalog-toolbar {
  position: sticky;
  top: var(--ens-nav-height);
  z-index: 40;
  display: grid;
  gap: 0.6rem;
  max-width: 74rem;
  margin: 0 auto 1.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 34px rgba(21, 20, 19, 0.07);
  transition: top 280ms ease, box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.ens-primary-nav-hidden .catalog-toolbar {
  top: 0;
}

.catalog-toolbar.is-stuck {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 14px 30px rgba(21, 20, 19, 0.14);
}

.catalog-toolbar .catalog-search,
.catalog-toolbar__filters {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.catalog-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.catalog-toolbar__filters #cat-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.5rem;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.catalog-toolbar__filters #cat-tabs::-webkit-scrollbar {
  display: none;
}

.catalog-toolbar__filters #cat-tabs .cat-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* El degradado de los bordes aparece sólo cuando queda contenido a los lados. */
#cat-tabs.is-overflow-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent 100%);
}

#cat-tabs.is-overflow-left.is-overflow-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%);
}

#cat-tabs.is-overflow-left:not(.is-overflow-right) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.25rem);
  mask-image: linear-gradient(to right, transparent 0, #000 2.25rem);
}

.catalog-toolbar__shortcuts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  margin: 0;
}

.catalog-toolbar__shortcuts a {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: #e20613;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.catalog-toolbar__shortcuts a:hover,
.catalog-toolbar__shortcuts a:focus-visible {
  color: #e20613;
}

#cotizador-wizard {
  max-width: 42rem;
  margin-bottom: 0;
}

.wizard-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.75rem;
}

.wizard-step-btn {
  min-width: 0;
  padding: 0.7rem 0.5rem;
  font-size: var(--font-label);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-panel {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 1rem;
}

.wizard-panel h3 {
  font-size: var(--font-h3);
  margin-bottom: 0.65rem;
}

.wizard-primary {
  margin-top: 0.35rem;
  background: var(--ens-red, #E20613);
  border-color: var(--ens-red, #E20613);
}

.wizard-primary:hover {
  background: #bb0010;
  border-color: #bb0010;
}

#legacy-calculator[hidden],
[data-legacy-quote-progress][hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .catalog-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: 1rem;
  }

  .catalog-toolbar {
    padding: 0.7rem 0.75rem;
    border-radius: 0.9rem;
  }

  :root {
    --ens-nav-height: 4rem;
  }

  .catalog-toolbar__filters {
    display: block;
    padding-top: 0.6rem;
  }

  .catalog-toolbar__filters #cat-tabs {
    padding-bottom: 0.3rem;
  }

  .catalog-toolbar__filters #cat-tabs .cat-tab {
    min-height: 2.75rem;
  }

  .catalog-toolbar__shortcuts {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.1rem;
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .wizard-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wizard-step-btn {
    min-height: 44px;
    padding-inline: 0.25rem;
    border-radius: 0.75rem;
    font-size: 0.68rem;
  }

  /* Evita componer el catálogo completo antes de que el usuario llegue a él. */
  #catalogo,
  #promociones,
  #equipaciones,
  #telas,
  #cotizador-express,
  #testimonios,
  #contacto {
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
  }

  #catalogo {
    contain-intrinsic-size: auto 2100px;
  }
}


/* Source: motion-engine.css */
/* ============================================================
   ENSUTEX MOTION ENGINE CSS — v1.0 (2026-07-02)
   Keyframes y componentes del sistema de animación de alto valor.
   Solo transform/opacity. Spring Ensutex + overshoot pop.
   ============================================================ */

/* ---------- WORD-POP (heading con rebote por palabra) ---------- */
[data-word-pop] .wp-word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
[data-word-pop].wp-in .wp-word {
  animation: wp-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wp-pop {
  0%   { opacity: 0; transform: translateY(56px) scale(0.72) rotate(-3deg); filter: blur(7px); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.03) rotate(0.5deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
}

/* ---------- REVEAL GENÉRICO (fade + up) ---------- */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.motion-ready [data-reveal].rv-in { opacity: 1; transform: translateY(0); }
.motion-ready [data-reveal="photo"] { transform: translateY(64px) scale(1.02); }
.motion-ready [data-reveal="photo"].rv-in { transform: translateY(0) scale(1); }
.motion-ready [data-reveal="left"]  { transform: translateX(-40px); }
.motion-ready [data-reveal="right"] { transform: translateX(40px); }
.motion-ready [data-reveal="left"].rv-in,
.motion-ready [data-reveal="right"].rv-in { transform: translateX(0); }

/* ---------- HERO VITRINA VIVA — cards de producto flotantes ---------- */
.hv-card {
  position: absolute;
  z-index: 12;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  display: block;
}
.hv-card:hover,
.hv-card:focus-visible {
  box-shadow: 0 26px 60px rgba(0,0,0,0.16);
  border-color: rgba(226,6,19,0.35);
}
.hv-card:focus-visible { outline: 3px solid #E20613; outline-offset: 3px; }
.hv-card img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; background: #f9f8f8; }
.hv-card .hv-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.6rem 0.75rem;
}
.hv-card .hv-name {
  font-size: 0.68rem; font-weight: 700; color: #3f3f46;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
}
.hv-card .hv-price {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.8rem; font-weight: 800; color: #000; white-space: nowrap;
}
.hv-card .hv-add {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 2.2rem; height: 2.2rem; border-radius: 9999px;
  background: #E20613; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; line-height: 1;
  box-shadow: 0 6px 16px rgba(226,6,19,0.35);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hv-card:hover .hv-add { transform: scale(1.15) rotate(90deg); }

/* posiciones desktop de la constelación (4 cards) */
@media (min-width: 1024px) {
  .hv-card { width: clamp(150px, 13vw, 215px); }
  .hv-card--tl { top: 9%;  left: 2.5%; }
  .hv-card--bl { bottom: 12%; left: 5%; }
  .hv-card--tr { top: 9%;  right: 2.5%; }
  .hv-card--br { bottom: 12%; right: 5%; }
}
/* tablet: solo 2 cards laterales */
@media (min-width: 768px) and (max-width: 1023px) {
  .hv-card { width: 150px; }
  .hv-card--tl { top: 12%; left: 1rem; }
  .hv-card--tr { top: 12%; right: 1rem; }
  .hv-card--bl, .hv-card--br { display: none; }
}
/* mobile: las cards pasan a fila scrolleable bajo el copy */
@media (max-width: 767px) {
  .hv-card { position: static; flex: 0 0 46%; scroll-snap-align: start; }
  .hv-strip {
    display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.25rem 1rem 1rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .hv-strip::-webkit-scrollbar { display: none; }
}
@media (min-width: 768px) {
  .hv-strip { display: contents; }
}

/* chips de microbeneficios del hero */
.hv-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border-radius: 9999px; border: 1px solid #e4e4e7; background: #fafafa;
  padding: 0.32rem 0.8rem; font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: #3f3f46;
  white-space: nowrap;
}
.hv-chip .dot { width: 5px; height: 5px; border-radius: 9999px; background: #E20613; flex: 0 0 auto; }

/* ---------- STICKY STACK (packs/equipaciones) ---------- */
[data-stack] { position: relative; }
[data-stack-card] {
  border-radius: 1.5rem;
  transform-origin: center top;
}

/* ---------- GALLERY SCALE ---------- */
[data-gal] { position: relative; }
[data-gal-card] {
  transform: scale(0.001);
  border-radius: 1rem;
  overflow: hidden;
}
[data-gal-card] img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- CHAR REVEAL ---------- */
[data-char-reveal] span { transition: opacity 0.12s linear; }

/* ---------- SCROLL VIDEO (showcase Higgsfield) ---------- */
[data-scroll-video] { position: relative; }
[data-scroll-video] .sv-pin {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
[data-scroll-video] .sv-stage { position: absolute; inset: 0; background: #0a0a0a; }
[data-scroll-video] .sv-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 40%, transparent 75%, rgba(0,0,0,0.35));
  pointer-events: none;
}
[data-scroll-video] .sv-copy {
  position: relative; z-index: 3; text-align: center; color: #fff; padding: 0 1.5rem;
}

/* ---------- CARRITO COTIZADOR (drawer / bottom sheet) ---------- */
.qc-drawer {
  position: fixed; z-index: 90; background: #fff;
  box-shadow: -18px 0 60px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
@media (min-width: 768px) {
  .qc-drawer {
    top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
    transform: translateX(105%);
    border-left: 1px solid #e4e4e7;
  }
  .qc-drawer.qc-open { transform: translateX(0); }
}
@media (max-width: 767px) {
  .qc-drawer {
    left: 0; right: 0; bottom: 0; max-height: 86dvh;
    transform: translateY(105%);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -18px 60px rgba(0,0,0,0.22);
  }
  .qc-drawer.qc-open { transform: translateY(0); }
  .qc-drawer::before {
    content: ""; display: block; width: 42px; height: 4px; border-radius: 9999px;
    background: #d4d4d8; margin: 0.6rem auto 0;
  }
}
.qc-backdrop {
  position: fixed; inset: 0; z-index: 89; background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.qc-backdrop.qc-open { opacity: 1; pointer-events: auto; }

/* resumen sticky inferior mientras se cotiza */
.qc-summary-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #000; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.25rem calc(0.8rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.qc-summary-bar[hidden] { display: none; }
.qc-summary-bar.qc-visible { transform: translateY(0); }
.qc-summary-bar .qc-total {
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1rem;
}
.qc-summary-bar .qc-count { font-size: 0.72rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.qc-summary-bar .qc-review {
  background: #E20613; color: #fff; border-radius: 9999px;
  padding: 0.65rem 1.4rem; font-size: 0.75rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}
.qc-summary-bar .qc-review:hover { background: #c00511; }

/* badge de ahorro */
.qc-save {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #f8f7f6; border: 1px solid #e1f0f7; color: #e20613;
  border-radius: 9999px; padding: 0.25rem 0.7rem;
  font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---------- ACCESIBILIDAD / REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-word-pop] .wp-word { animation: none !important; opacity: 1 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-gal-card] { transform: scale(1) !important; }
  .hv-card, .qc-drawer, .qc-summary-bar { transition: none !important; }
}


/* Source: tokens-premium.css */
/* =====================================================================
   ENSUTEX — TOKENS PREMIUM v2 (F1 · 13-jul-2026)
   Capa exclusiva para las páginas fuera del home mientras index.html
   permanece congelado por instrucción de Carlos.
   ===================================================================== */

:root {
  /* Escenas y texto — valores canónicos del prompt maestro. */
  --ens-scene-dark: #0d0c0b;
  --ens-scene-light: #FDFBFF;
  --ens-red: #E20613;
  /* --ens-sky ya NO se define acá: colisionaba con ensutex-visual-system.css
     (#e20613) y remontaje-cine.css (#87ceeb), y quién ganaba dependía del
     orden de carga. Definición única en assets/css/premium-video.css. */
  --ens-text-dark-muted: #cdcbc8;
  --ens-text-light-muted: #3F4147;

  /* Familias separadas de la escala para no confundir intención y tamaño. */
  --ens-font-display-family: 'Hussar Bold', 'Jost', system-ui, -apple-system, sans-serif;
  --ens-font-body-family: 'Jost', system-ui, -apple-system, sans-serif;

  /* Escala obligatoria. No añadir tamaños de exhibición fuera de estos tokens. */
  --font-display: clamp(2.25rem, 4.5vw, 4rem);
  --font-h2: clamp(1.75rem, 3vw, 2.75rem);
  --font-h3: clamp(1.25rem, 2vw, 1.75rem);
  --font-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --font-body: 1rem;
  --font-label: .75rem;

  /* Alias de compatibilidad para la capa existente. */
  --fs-h1: var(--font-display);
  --fs-h2: var(--font-h2);
  --fs-h3: var(--font-h3);
  --fs-body: var(--font-body);
  --fs-sm: var(--font-label);
  --fs-xs: var(--font-label);
  --fs-kicker: var(--font-label);

  --space-section-sm: clamp(3rem, 6vw, 5rem);
  --space-section-md: clamp(4.5rem, 8vw, 7rem);
  --space-section-lg: clamp(6rem, 10vw, 9rem);
  --ens-media-radius: 20px;
  --ens-motion-ease: cubic-bezier(0.34, 1.35, 0.64, 1);

  /* Compatibilidad de superficie para los componentes ya existentes. */
  --surface: var(--ens-scene-light);
  --surface-strong: var(--ens-scene-dark);
  --inverse-surface: var(--ens-scene-dark);
  --text-primary: #111113;
  --text-secondary: var(--ens-text-light-muted);
  --text-inverse: #FDFBFF;
  --text-inverse-muted: var(--ens-text-dark-muted);
  --brand-red: var(--ens-red);
  --brand-blue: var(--ens-sky);
}

body,
.font-body {
  font-family: var(--ens-font-body-family);
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--ens-font-display-family);
}

.ens-skip-link {
  position: fixed;
  z-index: 200;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: #fff;
  background: #0d0c0b;
  border-radius: .625rem;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease-out;
}

.ens-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--ens-sky);
  outline-offset: 3px;
}

/* Patrón reutilizable: integra media del mismo fondo o enmarca lo distinto. */
.ens-media-frame {
  overflow: hidden;
  border-radius: var(--ens-media-radius);
}

.ens-media-frame--dark {
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.ens-media-frame--light {
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 16px 48px rgba(21, 20, 19, .10);
}

/* Un único lenguaje de entrada para títulos secundarios y bajadas. */
.ens-title-fade-up {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity .65s ease,
    transform .85s var(--ens-motion-ease),
    filter .85s ease;
}

.ens-title-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .ens-title-fade-up {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* En anchos intermedios la firma no debe competir con las rutas principales. */
@media (min-width: 768px) and (max-width: 1120px) {
  .ensutex-site-nav .ensutex-brand-text {
    display: none !important;
  }

  .ensutex-site-nav .ensutex-nav-menu {
    gap: .72rem !important;
  }

  .ensutex-site-nav .ensutex-nav-cta {
    min-width: auto;
    padding-inline: .82rem;
  }
}

/* Consentimiento legible, compacto y fuera del flujo de conversión.
   Historia: existía para móvil («compacto y fuera del flujo de conversión en
   móvil»), pero se escribió SIN acotar por ancho y con !important en todo. En
   escritorio el aviso quedaba como una tarjeta de 360px pegada al borde
   izquierdo del pie — encima del titular de la sección, medido a 1440px
   («¿Cuánto cuesta cada prenda?»). Ahora va acotado por ancho: barra baja de
   ancho completo en celular, barra centrada y baja en escritorio. Tope real de
   alto ~110px, así que no se come ni un botón de acción ni el pie del proceso. */
@media (max-width: 899px) {
  .ensutex-consent {
    position: fixed !important;
    z-index: 120 !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: .7rem .8rem !important;
    border-radius: 14px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .55rem !important;
  }
  .ensutex-consent__copy { gap: 0 !important; }
  .ensutex-consent__copy strong { font-size: .84rem; }
  .ensutex-consent__copy p { font-size: .76rem; line-height: 1.3; margin-top: 2px; }
  .ensutex-consent__actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: .45rem !important; }
  .ensutex-consent__actions button { min-height: 40px; padding-inline: .5rem !important; font-size: .78rem; }
}

@media (min-width: 900px) {
  .ensutex-consent {
    position: fixed !important;
    z-index: 120 !important;
    bottom: 16px !important;
    left: 0 !important;
    right: 0 !important;
    width: min(720px, calc(100% - 32px)) !important;
    max-width: 720px !important;
    margin-inline: auto !important;
    padding: .65rem 1rem !important;
    border-radius: 14px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  .ensutex-consent__copy strong { font-size: .9rem; }
  .ensutex-consent__copy p { font-size: .8rem; line-height: 1.35; }
  .ensutex-consent__actions { display: flex !important; gap: .5rem !important; flex-wrap: nowrap !important; }
  .ensutex-consent__actions button { min-height: 40px; padding-inline: .85rem !important; white-space: nowrap; }
}

.ensutex-consent__actions button[data-consent="all"] {
  background: var(--ens-sky-strong, #e20613) !important;
  border-color: var(--ens-sky-strong, #e20613) !important;
  color: #0d0c0b !important;
}

/* Alternativas retail: el contraste sostiene la lectura comparativa en móvil. */
.alternativas-retail-page .bg-zinc-100.text-zinc-500 {
  color: #52525b !important;
}

.alternativas-retail-page .bg-white .text-zinc-400 {
  color: #52525b !important;
}

.alternativas-retail-page .bg-white .text-red-500 {
  color: #b91c1c !important;
}

.alternativas-retail-page footer,
.alternativas-retail-page footer a {
  color: #e4e4e7 !important;
}

/* Privacidad: enlaces distinguibles y texto legal con contraste AA. */
.privacy-page .policy-section p,
.privacy-page .policy-section ol li {
  color: #333 !important;
}

.privacy-page .policy-section a[href^="mailto:"] {
  color: #a5000c !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .16em;
}

.privacy-page .contact-info a[href^="mailto:"] {
  color: #fff !important;
  text-decoration: none;
}

.privacy-page a[aria-current="page"] {
  color: #ff6570 !important;
}

/* En pantallas compactas los CTAs de contexto mandan: Asu no los cubre. */
@media (max-width: 1023px) {
  body[data-ens-page="catalog"] .floating-widgets,
  body[data-ens-page="catalog"] #chatbot-panel,
  .blog-editorial-body .floating-widgets,
  .blog-editorial-body #chatbot-panel {
    display: none !important;
  }
}

/* Shared type system for pages that use the premium token layer. */
body,
button,
input,
select,
textarea,
.ensutex-site-nav {
  font-family: var(--ens-font-body-family);
}


/* Source: experience-refinement.css */
/* Ensutex — refinamiento editorial de catálogo y home (13-jul-2026).
   Superficies limpias, textura CSS ligera y flujo de cotización explícito. */

:root {
  --ens-font-display-family: 'Hussar Bold', 'Jost', system-ui, -apple-system, sans-serif;
  --ens-font-body-family: 'Jost', system-ui, -apple-system, sans-serif;
  --ens-paper: #f7f6f5;
  --ens-ink: #151515;
  --ens-muted: #5d5c5a;
  --ens-line: rgba(21, 21, 21, .12);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--ens-font-display-family) !important;
  font-weight: 700;
  letter-spacing: -.035em;
}

/* El video es una pieza editorial, no un teléfono oscuro dentro del hero. */
.catalog-page-hero {
  background:
    radial-gradient(circle at 50% -20%, rgba(226, 6, 19, .08), transparent 34rem),
    var(--ens-paper) !important;
}

/* Esta escena tenía una regla legacy más específica que la devolvía a negro. */
body.ensutex-home #catalogo.ens-catalog-teaser.ens-original-scene {
  background:
    radial-gradient(circle at 84% 20%, rgba(226, 6, 19, .13), transparent 26rem),
    repeating-linear-gradient(135deg, rgba(35, 33, 31, .035) 0 1px, transparent 1px 12px),
    #f1f0f0 !important;
  color: #23211f !important;
}

#cat-prueba-visual {
  width: min(100%, 58rem) !important;
  max-width: none !important;
  margin-top: clamp(.5rem, 2vw, 1.5rem);
}

body[data-ens-page="catalog"] #chatbot-cta {
  display: inline-flex !important;
}
body[data-ens-page="catalog"] #chatbot-cta[hidden] { display: none !important; }

#cat-prueba-visual .showreel-frame {
  /* Los originales son verticales: conservar su proporción muestra la prenda
     completa y evita la franja recortada que parecía un marco decorativo. */
  aspect-ratio: 4 / 5 !important;
  max-width: none !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#cat-prueba-visual .showreel-slide,
#cat-prueba-visual .showreel-slide.is-active {
  border-radius: 0 !important;
  background: transparent !important;
}

#cat-prueba-visual .showreel-slide video {
  object-position: center 42% !important;
}

#cat-prueba-visual .showreel-label {
  bottom: .9rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--ens-font-display-family) !important;
  font-size: .68rem !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .72) !important;
}

/* Inicio: tres decisiones compactas, numeradas y sin iconografía gigantesca. */
#caminos {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) !important;
}

#caminos .text-center {
  margin-bottom: 2rem !important;
}

#caminos h2 {
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.02;
  text-transform: none !important;
}

#caminos .grid {
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--ens-line);
  background: var(--ens-line);
  counter-reset: ens-journey;
}

#caminos .grid > a {
  min-height: 14rem;
  padding: clamp(1.35rem, 2vw, 2rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ens-ink) !important;
  box-shadow: none !important;
}

#caminos .grid > a:last-child {
  background:
    repeating-linear-gradient(135deg, rgba(226, 6, 19, .045) 0 1px, transparent 1px 9px),
    #f9f8f8 !important;
}

#caminos .grid > a::before {
  counter-increment: ens-journey;
  content: '0' counter(ens-journey);
  display: block;
  margin-bottom: 1.25rem;
  color: #e20613;
  font-family: var(--ens-font-display-family);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
}

#caminos .grid > a > .material-symbols-outlined {
  display: none !important;
}

#caminos .grid > a h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

#caminos .grid > a p,
#caminos .grid > a .text-zinc-300 {
  color: var(--ens-muted) !important;
}

#caminos .grid > a .text-white {
  color: var(--ens-ink) !important;
}

#caminos .grid > a:hover,
#caminos .grid > a:focus-visible {
  position: relative;
  z-index: 1;
  background: #f2f2f1 !important;
  outline: 3px solid #e20613;
  outline-offset: -3px;
}

/* El catálogo conserva aire, pero su prioridad pasa a ser elegir y no navegar un showreel. */
.ens-catalog-carousel-section {
  padding-block: clamp(3.75rem, 7vw, 6.5rem) !important;
  background:
    repeating-linear-gradient(135deg, rgba(21, 21, 21, .025) 0 1px, transparent 1px 12px),
    #f5f4f3 !important;
}

#catalogo .mb-14 {
  margin-bottom: 2rem !important;
}

.catalog-intro {
  max-width: 62rem !important;
  margin-bottom: 2rem !important;
  padding: 1.25rem 1.5rem !important;
  border: 1px solid var(--ens-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
}

.catalog-intro .absolute {
  width: 3px !important;
  background: #e20613 !important;
}

.catalog-intro > div:first-of-type {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.catalog-intro > div:nth-of-type(2) {
  display: none !important;
}

.catalog-toolbar {
  max-width: 62rem;
  margin-inline: auto;
}

.catalog-toolbar.scene-reveal,
.catalog-toolbar.scene-reveal.scene-reveal--in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* La elección "uno o pack" antes de ver prendas dividía el flujo y comprimía
   el texto. El pack sigue disponible después, cuando la decisión ya es útil. */
#catalogo .catalog-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .8rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#catalogo .catalog-toolbar .catalog-paths {
  display: none !important;
}

#catalogo .catalog-toolbar .catalog-search,
#catalogo .catalog-toolbar__filters {
  grid-column: 1 / -1 !important;
}

#catalogo .catalog-toolbar__filters {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  padding: .85rem 0 0 !important;
  border-top: 1px solid var(--ens-line) !important;
}

#catalogo .catalog-toolbar__filters #cat-tabs {
  min-width: 0;
}

/* Packs y comparación ya tienen sus propios momentos en el recorrido; aquí
   sólo se filtran prendas para que el primer paso no se disperse. */
#catalogo .catalog-toolbar__filters > div[aria-label] {
  display: none !important;
}

/* El paso contextual bajo la grilla reemplaza la barra fija heredada. La barra
   antigua calculaba cantidades por defecto antes de pedirlas y tapaba la tela. */
.qc-summary-bar {
  display: none !important;
}

#cat-grid:not([data-catalog-carousel]) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

#cat-grid:not([data-catalog-carousel]) > [data-product-id] {
  position: relative !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
  overflow: hidden !important;
  border: 1px solid var(--ens-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

#cat-grid:not([data-catalog-carousel]) > [data-product-id]:hover {
  border-color: rgba(226, 6, 19, .52) !important;
  box-shadow: 0 16px 32px rgba(18, 18, 18, .08) !important;
  transform: translateY(-3px) !important;
}

#cat-grid .catalog-product-stage {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1.15rem !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#cat-grid .catalog-product-stage::after {
  bottom: 7% !important;
  width: 55% !important;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .2), transparent 72%) !important;
}

#cat-grid .catalog-product-visual {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .16)) !important;
}

#cat-grid [data-product-id] > .p-5 {
  padding: 1.1rem !important;
  border-top: 1px solid var(--ens-line) !important;
  background: #fff !important;
}

#cat-grid [data-product-id] h3 {
  min-height: 2.8em;
  font-size: .94rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Etiquetas pequeñas: el gris anterior quedaba apenas por debajo de AA. */
#cat-grid [data-product-id] .bg-zinc-100.text-zinc-500 {
  color: #52525b !important;
  background: #f4f4f5 !important;
}

button[data-pack-partner] {
  background: #166534 !important;
}

#cat-grid [data-product-id] .bg-black {
  background: var(--ens-ink) !important;
}

#cat-grid [data-product-id] [data-product-btn] {
  min-height: 46px;
  border-radius: 8px !important;
  background: var(--ens-ink) !important;
  color: #fff !important;
}

#cat-grid [data-product-id] [data-product-btn]:hover,
#cat-grid [data-product-id] [data-product-btn]:focus-visible {
  background: #e20613 !important;
  border-color: #e20613 !important;
}

#cat-grid [data-product-id].selected-product {
  border-color: #e20613 !important;
  box-shadow: 0 0 0 2px rgba(226, 6, 19, .16) !important;
}

.catalog-next-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  max-width: 62rem;
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding: 1.25rem 1.4rem;
  color: #fdfcff;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 10px),
    #141414;
  border-radius: 12px;
}

.catalog-next-step[hidden] {
  display: none !important;
}

.catalog-next-step__kicker {
  display: block;
  margin-bottom: .3rem;
  color: #ff8b92;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.catalog-next-step h3 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.catalog-next-step p {
  margin: .3rem 0 0;
  color: #c8c6c4;
  font-size: .88rem;
}

.catalog-next-step button {
  min-height: 46px;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #e20613;
  color: #fff;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-next-step button:disabled {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #aaa;
  cursor: not-allowed;
}

#catalogo .catalog-flow-bridge {
  display: none !important;
}

/* Las telas son material de decisión: una macro-foto amplia y no una miniatura encerrada. */
.ens-fabrics {
  padding-block: clamp(3.75rem, 6vw, 6rem) !important;
  background:
    repeating-linear-gradient(135deg, rgba(21, 21, 21, .035) 0 1px, transparent 1px 11px),
    #ececeb !important;
  border-color: var(--ens-line) !important;
}

.ens-fabrics .fabric-content > .grid {
  gap: clamp(1rem, 2.4vw, 2rem) !important;
}

.ens-fabrics .fabric-content > .grid > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, .7fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.25rem) !important;
  border: 1px solid var(--ens-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: none !important;
}

.ens-fabrics .fabric-content > .grid > div > .mb-6 {
  margin: 0 !important;
}

.ens-fabrics .fabric-content > .grid > div > .mt-auto,
.ens-fabrics .fabric-content > .grid > div > .max-w-md {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.ens-fabrics .fabric-photo {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fbe3e0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ens-fabrics .fabric-photo:hover {
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ens-fabrics .fabric-photo .fabric-img {
  object-fit: cover !important;
  transition: transform .45s ease;
}

.ens-fabrics .fabric-photo:hover .fabric-img {
  transform: scale(1.045);
}

.ens-fabrics .fabric-photo > div {
  display: none !important;
}

.ens-fabrics .bg-zinc-900 {
  background: #e9e8e7 !important;
  border-color: transparent !important;
  color: #292827 !important;
}

.ens-fabrics .bg-zinc-900 .text-zinc-300,
.ens-fabrics .bg-zinc-900 .text-green-400,
.ens-fabrics .bg-zinc-900 .text-yellow-400 {
  color: #3f3e3c !important;
}

.ens-fabrics .fabric-cta {
  min-height: 46px;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* El negro queda reservado para el momento de decisión: el cotizador. */
#cotizador-express {
  padding-block: clamp(4rem, 7vw, 6.5rem) !important;
  background: #f7f6f5 !important;
}

#cotizador-box {
  max-width: 68rem !important;
  padding: clamp(2rem, 5vw, 4.5rem) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 85% 10%, rgba(226, 6, 19, .19), transparent 25rem),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 11px),
    #0d0d0e !important;
}

.catalog-page-hero a:focus-visible,
#catalogo button:focus-visible,
.ens-fabrics button:focus-visible,
.catalog-next-step button:focus-visible {
  outline: 3px solid #e20613;
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  #cat-grid:not([data-catalog-carousel]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #hero-section.ens-original-scene--stone .ens-cinema-hero__inner {
    padding: 4.45rem 1.25rem 1rem !important;
    gap: .48rem !important;
  }

  #hero-section.ens-original-scene--stone .ens-cinema-hero__media {
    height: min(23dvh, 12rem) !important;
    margin-top: 0 !important;
  }

  #hero-section.ens-original-scene--stone .ens-motion-hero__lead {
    font-size: .94rem !important;
    line-height: 1.38 !important;
  }

  #hero-section.ens-original-scene--stone .ens-motion-chips {
    display: none !important;
  }

  #cat-prueba-visual .showreel-slide video {
    object-position: center 35% !important;
  }

  #caminos .grid > a {
    min-height: 0;
  }

  .catalog-intro {
    margin-bottom: 1.5rem !important;
    padding: 1rem 1.1rem !important;
  }

  .catalog-intro .flex-1 {
    text-align: left !important;
  }

  .catalog-intro h3 {
    font-size: .82rem !important;
    line-height: 1.25 !important;
  }

  .catalog-intro p {
    font-size: .84rem !important;
    line-height: 1.48 !important;
  }

  #catalogo .catalog-toolbar__filters {
    display: block !important;
  }

  #catalogo .catalog-toolbar__filters #cat-tabs {
    display: flex !important;
    width: 100%;
    overflow-x: auto !important;
    padding-inline: .1rem !important;
  }

  #catalogo .catalog-toolbar__filters .catalog-swipe-hint {
    margin-top: .45rem;
  }

  #cat-grid:not([data-catalog-carousel]) {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #cat-grid [data-product-id] h3 {
    min-height: 0;
  }

  #cat-grid .catalog-product-stage {
    aspect-ratio: 4 / 3;
  }

  .catalog-next-step {
    grid-template-columns: 1fr;
    padding: 1.1rem;
  }

  .catalog-next-step button {
    width: 100%;
  }

  .ens-fabrics .fabric-content > .grid > div {
    grid-template-columns: 1fr;
  }

  .ens-fabrics .fabric-content > .grid > div > .mt-auto,
  .ens-fabrics .fabric-content > .grid > div > .max-w-md {
    grid-row: 1;
  }

  .ens-fabrics .fabric-content > .grid > div > .mb-6 {
    grid-row: 2;
  }

  .ens-fabrics .fabric-photo {
    aspect-ratio: 4 / 3 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cat-grid:not([data-catalog-carousel]) > [data-product-id],
  .ens-fabrics .fabric-photo .fabric-img {
    transition: none !important;
  }
}


/* Source: premium-video.css */
/* Premium-video integration: audiovisual layer placed over the repaired cinema flow. */

/* =====================================================================
   --ens-sky · ÚNICA DEFINICIÓN DEL TOKEN (decisión 2026-09-25)

   Antes estaba definido tres veces con dos valores distintos
   (ensutex-visual-system.css #e20613 · remontaje-cine.css #87ceeb ·
   tokens-premium.css #87CEEB) y quién ganaba dependía del orden de carga:
   eso es el bug, no un estilo.

   Este archivo se eligió como sede porque es el único de los tres que
   index.html y catalogo.html cargan AMBOS, así que el valor es el mismo
   en las tres marcas sin depender del orden.

   Valor: #E20613 (rojo de marca). Motivo: la paleta vigente es
   #FDFBFF claro · #0d0c0b oscuro · #E20613 rojo de marca y CTA, y el
   azul cielo queda fuera. --ens-sky se consume como ACENTO (trazo,
   etiqueta, borde, outline), no como escena: los dos colores de escena
   no sirven de acento (el casi-blanco se confunde con el titular blanco
   del hero; el casi-negro se confunde con la tinta del texto claro).
   El rojo de marca es el único token que sigue funcionando como acento.

   Los tres archivos anteriores conservan un comentario apuntando acá.
   ===================================================================== */
:root {
  --ens-sky: #E20613;
  --ens-sky-soft: rgba(226, 6, 19, .16);
}

html.ens-chat-consent-pending .floating-widgets {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Home hero · video v1 ---------- */
#hero-section.ens-motion-hero--video {
  min-height: 100dvh;
  isolation: isolate;
  background: #080807 !important;
  /* Dentro del hero --ens-sky se fija al rojo de marca. `.ens-original-scene`
     (original-video-scenes.css) re-declara --ens-sky: var(--ens-original-accent)
     y esta sección trae ens-original-scene--stone, cuyo acento es #e20613: un
     rojo que no está en la paleta. Esta regla lo devuelve a #E20613. */
  --ens-sky: #E20613;
}

/* El scrim deja de ser una capa lavada y pasa a ser el shading del hero:
   video a sangre (object-fit: cover) debajo, degradado encima. Es la
   estructura que Carlos aprobó en REBXN, con los negros de Ensutex.
   Sustituye al lavado claro legado (`.ens-cinema::before`).

   Sobre esa estructura va una tercera capa, horizontal, sobre la columna de
   texto. El degradado vertical de REBXN deja la banda central en .2-.3 y por
   ahí pasa el video: con texto blanco alcanzaba, pero el acento -- rojo, cuya
   luminancia está mucho más cerca de la del video -- perdía sus trazos sobre
   los píxeles claros. La capa no cambia el vocabulario (lineal + radial):
   sólo asegura la columna donde vive la copia. Medido en _qa_hero/. */
#hero-section.ens-motion-hero--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 6, 5, .82) 0%, rgba(6, 6, 5, .66) 26%, rgba(6, 6, 5, .3) 52%, rgba(6, 6, 5, .06) 74%, transparent 88%),
    linear-gradient(to bottom, rgba(6, 6, 5, .8) 0%, rgba(6, 6, 5, .2) 24%, rgba(6, 6, 5, .3) 62%, rgba(6, 6, 5, .95) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(6, 6, 5, .15), rgba(6, 6, 5, .6)) !important;
}

#hero-section.ens-motion-hero--video .ens-hero-video {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover: el video llena el marco y no deja bandas. v1 es 1280x720
     dentro de un marco 1,60:1, así que contain recortaba el 11% del
     cuadro y dejaba dos franjas negras: eso es lo que se percibía. */
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: saturate(1.04) contrast(1.04);
}

.ens-hero-scrim {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0;
  pointer-events: none;
}

/* El shading vive en el ::before del hero. En celular el video está
   apagado y hero-movil.css le pone a esta capa su propio degradado
   (con !important), así que ahí el scrim sigue siendo este div. */
#hero-section.ens-motion-hero--video .ens-hero-scrim {
  background: none;
}

/* La retícula es textura: vive detrás del texto (z-index 1 contra el 2 de la
   copia). A .3 sus líneas caen justo sobre la línea de acento y son el ~1% de
   píxeles claros que le bajaban el peor caso: una línea blanca a .3 sobre
   negro es rgb(76,76,76), y contra el rojo del acento eso da 1,7:1. A .14 la
   línea queda en rgb(36,36,36) y el acento recupera 3,4:1 en ese mismo punto,
   sin que la textura desaparezca. Medido en _qa_hero/final4.json. */
#hero-section.ens-motion-hero--video .ens-motion-grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .14;
  pointer-events: none;
}

#hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
  z-index: 2;
  min-height: calc(100dvh - 5rem);
}

@media (min-width: 768px) {
  /* Keep copy inside the intentional black negative space, never over v1's jersey. */
  #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    grid-template-columns: minmax(0, .62fr) minmax(0, .38fr);
    gap: 0;
  }

  #hero-section.ens-motion-hero--video .ens-cinema-hero__copy {
    grid-column: 1;
    justify-self: start;
    max-width: 34rem;
  }
}

#hero-section.ens-motion-hero--video .ens-cinema-hero__media {
  display: none;
}

#hero-section.ens-motion-hero--video .ens-motion-eyebrow,
#hero-section.ens-motion-hero--video .ens-motion-hero__lead {
  color: #f4f3f2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .88);
}

#hero-section.ens-motion-hero--video .ens-motion-hero__title {
  color: #ffffff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .88), 0 2px 8px rgba(0, 0, 0, .92);
}

#hero-section.ens-motion-hero--video .ens-hero-line {
  color: #ffffff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .88), 0 2px 8px rgba(0, 0, 0, .92);
}

/* El acento es rojo, y el rojo tiene un techo de contraste propio: su
   luminancia (L≈.163) está mucho más cerca de la del video que la del blanco
   (L=1). Aunque el scrim deje el fondo en negro, el rojo no pasa de ~4,2:1;
   sobre un píxel claro se cae a 1,3:1 y el trazo desaparece.
   Dos sombras hacen el trabajo: una corta y casi opaca que pega el contorno
   de cada glifo a un fondo oscuro local (es la que sube el peor caso, y sirve
   igual en escritorio y en celular), y el halo rojo de marca, que no aporta
   legibilidad pero sostiene el acento. Medido en _qa_hero/final.json. */
#hero-section.ens-motion-hero--video .ens-hero-line--accent {
  color: var(--ens-sky);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 2px 6px rgba(0, 0, 0, .9),
    0 6px 30px rgba(0, 0, 0, .75),
    0 0 22px rgba(226, 6, 19, .3);
}

#hero-section.ens-motion-hero--video .ens-motion-chips span {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(15, 14, 13, .52);
  color: #fbfaf9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* ---------- Video v2 · storytelling on its native gray ---------- */
.ens-vfranja {
  position: relative;
  overflow: hidden;
  padding: clamp(4.75rem, 9vw, 7.5rem) 0;
  background: #ff8a92;
  color: #1a1817;
}

.ens-vfranja__wrap {
  display: grid;
  width: min(calc(100% - 8rem), 76rem);
  margin: 0 auto;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.ens-vfranja__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
  background: #ff8a92;
  box-shadow: 0 24px 56px -30px rgba(26, 24, 23, .42);
}

.ens-vfranja__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ens-vfranja--complete .ens-vfranja__copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.ens-vfranja__copy .ens-eyebrow { margin-bottom: .65rem; color: #282624; }
.ens-vfranja__copy h2 {
  max-width: 18ch;
  margin: 0 auto;
  color: #1a1817;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1;
  text-wrap: balance;
}
.ens-vfranja__copy p:last-child { max-width: 42rem; margin: 1rem auto 0; color: #33302e; line-height: 1.6; }

/* ---------- Videos v3–v6 · uncut, rounded, and deliberately quiet ---------- */
.ens-video-frame {
  position: relative;
  width: min(100%, 28rem) !important;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.5rem;
  background: #0d0c0b;
  box-shadow: 0 32px 68px -30px rgba(0, 0, 0, .56), 0 10px 24px rgba(0, 0, 0, .2);
  isolation: isolate;
}

.ens-video-frame video {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.ens-video-frame--light {
  border-color: rgba(0, 0, 0, .1);
  background: #f4f3f2;
  box-shadow: 0 26px 56px -28px rgba(0, 0, 0, .32), 0 8px 18px rgba(0, 0, 0, .1);
}

.ens-premium-mockup-trio {
  display: grid;
  margin-top: 1.35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.ens-premium-mockup-trio img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  padding: .45rem;
  border: 1px solid rgba(26, 24, 23, .1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .56);
  object-fit: contain;
}

.ens-logo-break {
  position: relative;
  display: grid;
  min-height: clamp(17rem, 28vw, 25rem);
  overflow: hidden;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  background: #080807;
}

.ens-logo-break--compact { min-height: clamp(13rem, 24vw, 20rem); }
.ens-logo-break video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ens-logo-break__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 36%, rgba(8, 8, 7, .58) 100%); pointer-events: none; }
.ens-logo-break__mark { position: relative; z-index: 2; display: block; width: min(42rem, 76vw); height: auto; object-fit: contain; }
.ens-logo-break__line { position: relative; z-index: 2; max-width: 30rem; margin: 0; padding-inline: 1.5rem; color: rgba(255, 255, 255, .82); font-size: clamp(.92rem, 1.3vw, 1.1rem); line-height: 1.5; text-align: center; }

.ens-premium-video-story { padding: clamp(4rem, 8vw, 7rem) 0; background: #0d0c0c; color: #ffffff; }
.ens-premium-video-story__layout { display: grid; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.ens-premium-video-story__copy { max-width: 34rem; }
.ens-premium-video-story .ens-eyebrow { margin-bottom: .7rem; color: rgba(255, 255, 255, .78); }
.ens-premium-video-story h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -.055em; line-height: .98; text-transform: uppercase; text-wrap: balance; }
.ens-premium-video-story p:last-child { margin: 1rem 0 0; color: #d0cdca; line-height: 1.65; }

/* ---------- Catalog video hero · v7 ---------- */
.catalog-page-hero--video {
  min-height: min(42rem, 78svh);
  isolation: isolate;
  background: #080807 !important;
  color: #ffffff !important;
}

.catalog-page-hero--video .ens-hero-video {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.catalog-page-hero--video .ens-hero-scrim {
  z-index: 1 !important;
  background: radial-gradient(ellipse at center, rgba(8, 8, 7, .08), rgba(8, 8, 7, .7) 85%), linear-gradient(180deg, rgba(8, 8, 7, .62), rgba(8, 8, 7, .25) 45%, rgba(8, 8, 7, .8));
}

/* El catálogo deja su turquesa (--catalog-blue: #e20613) por el rojo de
   marca. Se re-declara el token DENTRO del hero: un solo punto, y todo lo
   que lo consume (fondo y borde del botón principal, borde del secundario
   al pasar el mouse, `p strong`) queda alineado sin editar
   catalog-premium-v2.css. */
.catalog-page-hero--video { --catalog-blue: #E20613; }
/* Texto chico en rojo sobre el video oscuro: el rojo de marca da 4,26:1 y no pasa AA.
   Sobre fondo oscuro va el rojo claro de la paleta (#ff3b47, 5,6:1 sobre negro). */
.catalog-page-hero--video .catalog-page-hero__copy p strong { color: #ff3b47; }

/* Blanco sobre rojo = 4,92:1. El texto oscuro del turquesa (#0c0c0b)
   sobre rojo daba 3,92:1 y no pasa AA. */
.catalog-page-hero--video .catalog-hero-primary {
  border-color: var(--ens-sky) !important;
  background: var(--ens-sky) !important;
  color: #ffffff !important;
}

.catalog-page-hero--video .catalog-hero-primary:hover {
  background: var(--ens-sky) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}

.catalog-page-hero--video > .relative { z-index: 2; }
.catalog-page-hero--video .catalog-page-hero__copy h1 { color: #ffffff; text-shadow: 0 6px 30px rgba(0, 0, 0, .88), 0 2px 8px rgba(0, 0, 0, .92); }
.catalog-page-hero--video .catalog-page-hero__copy p { color: #ebeae8; text-shadow: 0 2px 14px rgba(0, 0, 0, .88); }
.catalog-page-hero--video .catalog-hero-badge { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: #ffffff; backdrop-filter: blur(6px); }
.ens-catalog-showreel .showreel-frame { border-color: rgba(255, 255, 255, .13); box-shadow: 0 26px 58px -30px rgba(0, 0, 0, .8); }

/* ---------- Catalog carousel and fabric decision ---------- */
#catalogo.ens-catalog-carousel-section #cat-grid .catalog-product-stage,
#cat-grid .cat-card .catalog-product-stage {
  background: radial-gradient(circle at 50% 38%, #1f1e1c 0%, #0a0908 75%) !important;
}

#catalogo.ens-catalog-carousel-section #cat-grid .catalog-product-stage img {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .46));
}

.catalog-path-chip { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.catalog-path-icon { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; object-fit: contain; mix-blend-mode: screen; }
.catalog-path-chip:focus-visible,
.catalog-page-hero--video a:focus-visible { outline: 3px solid var(--ens-sky); outline-offset: 3px; }

#telas.ens-fabrics .fabric-content > .grid {
  display: flex !important;
  gap: 1rem !important;
  overflow-x: auto !important;
  padding: .35rem .35rem 1.1rem !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

#telas.ens-fabrics .fabric-content > .grid > div {
  flex: 0 0 min(30rem, 76vw);
  max-width: min(30rem, 76vw);
  scroll-snap-align: center;
}

#telas.ens-fabrics .fabric-content > .grid::-webkit-scrollbar { height: 6px; }
#telas.ens-fabrics .fabric-content > .grid::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(26, 24, 23, .3); }

@media (min-width: 900px) {
  .ens-premium-video-story__layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, .78fr); }
}

@media (max-width: 767px) {
  #hero-section.ens-motion-hero--video { min-height: 100dvh; background: #080807 !important; }
  #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    display: block;
    min-height: calc(100dvh - 4rem);
    padding: clamp(1.35rem, 4.5vh, 2.25rem) 1.25rem min(42dvh, 22rem);
  }
  #hero-section.ens-motion-hero--video .ens-cinema-hero__copy {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    max-width: 22rem;
  }
  #hero-section.ens-motion-hero--video .ens-motion-eyebrow,
  #hero-section.ens-motion-hero--video .ens-motion-hero__title,
  #hero-section.ens-motion-hero--video .ens-motion-hero__lead {
    width: 100%;
    margin-inline: 0;
    text-align: left;
  }
  #hero-section.ens-motion-hero--video .ens-motion-eyebrow { justify-content: flex-start; }
  #hero-section.ens-motion-hero--video .ens-motion-hero__title {
    max-width: 100%;
    font-size: clamp(2.1rem, 9vw, 2.45rem);
  }
  #hero-section.ens-motion-hero--video .ens-hero-line { white-space: normal; }
  #hero-section.ens-motion-hero--video .ens-motion-chips,
  #hero-section.ens-motion-hero--video .ens-motion-actions { justify-content: flex-start; }
  /* En celular este video está apagado: hero-movil.css lo pone display:none
     y premium-video.js no lo descarga (medido: readyState 0, 0x0). La pieza
     que se ve es hero-inicio-movil.webp, en cover.
     El object-fit de acá es inerte: home-refinement.css:1359 declara
     `contain !important` sobre este mismo selector y carga después, así que
     el valor computado en celular es contain aunque nadie lo vea. Se deja
     escrito para que el siguiente que mida no crea que hay dos intenciones:
     lo que manda en celular es la imagen, no este video. */
  #hero-section.ens-motion-hero--video .ens-hero-video {
    top: auto;
    height: min(42dvh, 22rem);
    object-fit: cover;
    object-position: center bottom;
  }
  #hero-section.ens-motion-hero--video .ens-hero-scrim {
    background: linear-gradient(180deg, rgba(8, 8, 7, .5), rgba(8, 8, 7, .04) 48%, transparent 100%);
  }
  .ens-vfranja__copy .ens-eyebrow { justify-content: center; }
  .ens-vfranja__wrap { width: min(calc(100% - 3rem), 42rem); }
  .ens-premium-video-story__copy { margin-inline: auto; text-align: center; }
  .ens-premium-video-story .ens-eyebrow { justify-content: center; }
  .ens-video-frame { width: min(100%, 23rem) !important; }
  .catalog-page-hero--video { min-height: min(40rem, 76svh); }
  .catalog-page-hero--video .ens-hero-video { object-position: 56% center; }
  #telas.ens-fabrics .fabric-content > .grid > div { flex-basis: 88%; max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .ens-logo-break video,
  .ens-vfranja video,
  .ens-video-frame video { animation: none !important; }
}


/* Source: premium-elevation.css */
/* Elevación transversal 2026-07-15.
   Inspiración MotionSites: composición editorial, jerarquía clara y movimiento
   de apoyo. Sólo usa transform/opacity y respeta reduced motion. */

:root {
  --ens-elevate-ease: cubic-bezier(.34, 1.35, .64, 1);
  --ens-elevate-shadow: 0 26px 70px rgba(0, 0, 0, .16);
}

/* ----------------------------- Catálogo ----------------------------- */
body[data-ens-page="catalog"] .catalog-page-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
}

body[data-ens-page="catalog"] .catalog-page-hero__copy {
  margin-bottom: 0;
}

body[data-ens-page="catalog"] .catalog-page-hero__copy .cta-flow {
  justify-content: flex-start;
}

.catalog-hero-decision {
  display: grid;
  gap: .75rem;
  max-width: 31rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgba(10, 9, 8, .82), rgba(17, 16, 16, .58));
  box-shadow: var(--ens-elevate-shadow);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
}

.catalog-hero-decision__eyebrow {
  color: #e1f0f7;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.catalog-hero-decision strong {
  max-width: 16ch;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: .98;
  text-transform: uppercase;
}

.catalog-hero-decision p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: .94rem;
  line-height: 1.55;
}

.catalog-hero-decision a {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
  padding: .7rem 1rem;
  color: #070606;
  border-radius: 999px;
  background: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform 220ms var(--ens-elevate-ease), background-color 180ms ease;
}

.catalog-hero-decision a:hover,
.catalog-hero-decision a:focus-visible {
  color: #070606;
  background: #e1f0f7;
  transform: translate3d(0, -2px, 0);
}

/* Los tres caminos deben ser lo primero tras el hero; el viejo showreel
   no vuelve a cargar videos que ya viven en Inicio. */
body[data-ens-page="catalog"] .ens-catalog-showreel {
  display: none;
}

.catalog-paths-top {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 11% 2%, rgba(226, 6, 19, .12), transparent 29rem),
    #fff;
}

.catalog-paths-top .grid > a {
  min-height: 19rem;
  transition: transform 260ms var(--ens-elevate-ease), box-shadow 260ms ease, border-color 220ms ease;
}

.catalog-paths-top .grid > a:hover,
.catalog-paths-top .grid > a:focus-visible {
  box-shadow: 0 22px 42px rgba(0, 0, 0, .14);
  transform: translate3d(0, -7px, 0);
}

body[data-ens-page="catalog"] .catalog-toolbar {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
}

body[data-ens-page="catalog"] .catalog-toolbar__filters #cat-tabs {
  gap: .55rem;
}

body[data-ens-page="catalog"] .cat-tab {
  min-height: 44px;
  white-space: nowrap;
}

/* Carrusel usable: controles no tapan los productos ni se salen de la vista. */
body[data-ens-page="catalog"] .catalog-carousel-shell {
  overflow: visible;
}

body[data-ens-page="catalog"] .catalog-carousel__toolbar {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 42rem) !important;
  height: auto !important;
  margin: 0 auto 1rem !important;
  pointer-events: auto !important;
}

body[data-ens-page="catalog"] .catalog-carousel__status {
  position: static !important;
  width: auto !important;
  color: #18181b !important;
  overflow: visible !important;
  white-space: normal !important;
  transform: none !important;
}

body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] {
  min-height: min(74vh, 43rem);
  height: min(74vh, 43rem) !important;
}

body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > [data-product-id] {
  max-height: min(74vh, 43rem);
}

body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] .catalog-product-stage {
  height: min(42vh, 21rem);
  max-height: 21rem;
}

/* ---------------------------- Guías y telas --------------------------- */
body[data-ens-page^="guide-"],
body[data-ens-page="fabric-guide"] {
  background: #fff;
}

body[data-ens-page^="guide-"] main > section:first-child,
body[data-ens-page="fabric-guide"] main > section:first-child {
  position: relative;
  min-height: min(70svh, 48rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(226, 6, 19, .16), transparent 24rem),
    radial-gradient(circle at 86% 82%, rgba(226, 6, 19, .09), transparent 26rem),
    #fff;
}

body[data-ens-page^="guide-"] main > section:first-child h1,
body[data-ens-page="fabric-guide"] main > section:first-child h2 {
  max-width: 17ch;
  margin-inline: auto;
}

body[data-ens-page^="guide-"] main > section:nth-of-type(2) figure {
  width: min(100%, 44rem) !important;
  max-width: 44rem !important;
  margin-inline: auto !important;
  padding: .55rem;
  border-radius: 1.35rem !important;
  background: linear-gradient(145deg, #fff, #f6f5f4) !important;
  box-shadow: var(--ens-elevate-shadow) !important;
}

body[data-ens-page^="guide-"] main > section:nth-of-type(2) figure video {
  max-height: min(67svh, 46rem);
  object-fit: contain;
  border-radius: .95rem;
}

body[data-ens-page^="guide-"] [data-gal-card] {
  transition: transform 260ms var(--ens-elevate-ease), box-shadow 260ms ease;
}

body[data-ens-page^="guide-"] [data-gal-card]:hover {
  box-shadow: 0 22px 48px rgba(0, 0, 0, .22);
  transform: translate3d(0, -5px, 0);
}

body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card {
  min-height: 40rem;
  transition: transform 260ms var(--ens-elevate-ease), box-shadow 260ms ease;
}

body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card:hover {
  box-shadow: var(--ens-elevate-shadow);
  transform: translate3d(0, -6px, 0);
}

/* ------------------------- Alternativa al retail ---------------------- */
body[data-ens-page="retail"] > main > header {
  min-height: min(72svh, 50rem);
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 80% 15%, rgba(226, 6, 19, .19), transparent 28rem),
    linear-gradient(135deg, #060605, #18181b) !important;
}

body[data-ens-page="retail"] > main > section.py-12 .inline-block {
  display: block;
  width: min(100%, 68rem);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
}

body[data-ens-page="retail"] > main > section.py-12 .inline-block img {
  width: 100%;
  max-height: min(72svh, 52rem);
  object-fit: contain;
}

/* ------------------------------- Motion -------------------------------- */
.ens-motion-target {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 650ms ease-out, transform 760ms var(--ens-elevate-ease);
}

.ens-motion-target.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 767px) {
  body[data-ens-page="catalog"] .catalog-page-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
  }

  body[data-ens-page="catalog"] .catalog-page-hero__copy .cta-flow {
    justify-content: center;
  }

  .catalog-hero-decision {
    max-width: none;
    text-align: left;
  }

  .catalog-paths-top .grid > a {
    min-height: 15.5rem;
  }

  body[data-ens-page="catalog"] .catalog-toolbar__filters #cat-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible !important;
    padding-inline: 0;
  }

  body[data-ens-page="catalog"] .catalog-toolbar__filters #cat-tabs .cat-tab {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding-inline: .65rem;
    line-height: 1.2;
    white-space: normal;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > .is-carousel-prev,
  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > .is-carousel-next {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] {
    min-height: 38rem;
    height: 38rem !important;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] > [data-product-id] {
    max-height: 38rem;
  }

  body[data-ens-page="catalog"] #cat-grid[data-catalog-carousel] .catalog-product-stage {
    height: min(34vh, 16.5rem);
  }

  body[data-ens-page^="guide-"] main > section:first-child,
  body[data-ens-page="fabric-guide"] main > section:first-child {
    min-height: 60svh;
  }

  body[data-ens-page^="guide-"] main > section:nth-of-type(2) figure {
    max-width: none !important;
  }

  body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card {
    min-height: 34rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-hero-decision a,
  .catalog-paths-top .grid > a,
  body[data-ens-page^="guide-"] [data-gal-card],
  body[data-ens-page="fabric-guide"] .ens-fabric-cards .tl-card,
  .ens-motion-target {
    transition: none !important;
    transform: none !important;
  }

  .ens-motion-target {
    opacity: 1;
  }
}


/* Source: home-refinement.css */
/* Home refinement 2026-07-15: black CTAs with cyan emphasis and a video edge blend.
   The Securify reference informs hierarchy and pill navigation only; this remains
   vanilla CSS and preserves Ensutex's real video, navigation and conversion flow. */

:root {
  --ens-home-cyan: #e20613;
  --ens-home-cyan-strong: #e20613;
  --ens-home-ink: #0f0e0e;
  --ens-home-black: #080807;
}

/* The native v1 image remains fully visible with contain. A slightly smaller,
   right-shifted stage protects perceived detail and leaves the copy more air. */
#hero-section.ens-motion-hero--video .ens-hero-video {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

@media (min-width: 768px) {
  #hero-section.ens-motion-hero--video .ens-hero-video {
    inset: 4% -4% auto auto;
    width: 90.2%;
    height: 90.2%;
    transform: translate3d(0, clamp(1.65rem, 3.4vh, 2.35rem), 0);
  }
}

#hero-section.ens-motion-hero--video .ens-hero-scrim {
  background:
    linear-gradient(90deg, var(--ens-home-black) 0%, rgba(8, 8, 7, .97) 6%, rgba(8, 8, 7, .58) 15%, rgba(8, 8, 7, .08) 42%, transparent 64%, rgba(8, 8, 7, .18) 82%, rgba(8, 8, 7, .96) 100%),
    linear-gradient(180deg, rgba(8, 8, 7, .48) 0%, transparent 31%, rgba(8, 8, 7, .7) 100%);
}

/* Desktop home navigation: three intentional regions, not one long black bar. */
@media (min-width: 1024px) {
  .ensutex-site-nav.ens-home-nav {
    padding: .85rem clamp(1rem, 2.2vw, 2.6rem);
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: layout style;
    font-family: var(--ens-font-body-family);
    pointer-events: none;
  }

  .ens-home-nav > .max-w-7xl {
    width: 100%;
    max-width: none;
    padding: 0;
    pointer-events: auto;
  }

  .ens-home-nav .h-20 {
    height: auto !important;
  }

  .ens-home-nav .ensutex-brand-group {
    min-height: 2.85rem;
    padding: 0;
    gap: .8rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ensutex-site-nav.ens-home-nav .ensutex-brand-logo {
    height: 2.25rem !important;
    filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, .38));
  }

  .ensutex-site-nav.ens-home-nav .ensutex-brand-text {
    display: inline-flex !important;
    align-items: center;
    min-height: 2.55rem;
    padding: .6rem 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(14, 14, 13, .84);
    box-shadow: 0 14px 42px rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .76);
    font-family: var(--ens-font-body-family);
    font-size: .6rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .145em;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
  }

  .ens-home-nav .ensutex-nav-menu {
    gap: .15rem;
    padding: .25rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(14, 14, 13, .84);
    box-shadow: 0 14px 42px rgba(0, 0, 0, .2);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
  }

  .ens-home-nav .ensutex-nav-menu > a,
  .ens-home-nav .ensutex-nav-menu > div > a {
    min-height: 2.45rem;
    padding: .52rem .9rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    font-family: var(--ens-font-body-family);
    font-size: .75rem;
    font-weight: 500;
  }

  .ens-home-nav .ensutex-nav-menu > a:hover,
  .ens-home-nav .ensutex-nav-menu > div > a:hover,
  .ens-home-nav .ensutex-nav-menu > div:focus-within > a {
    color: #ffffff;
    background: rgba(255, 255, 255, .09);
  }

  .ens-home-nav .ensutex-nav-cta {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.85rem;
    min-width: 12.8rem;
    padding: .55rem 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(226, 6, 19, .58);
    border-radius: 999px;
    background: #0c0b0a;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
    color: #ffffff;
    font-family: var(--ens-font-body-family);
    font-size: .75rem;
    font-weight: 700;
    transform: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }

  .ens-home-nav .ensutex-nav-cta:hover {
    border-color: rgba(226, 6, 19, .9);
    background: #181615;
    color: #ffffff;
    transform: none;
  }

  /* El rótulo va blanco sobre la píldora #0c0b0a (19,7:1). En rojo de marca
     daba 4,01:1 y a 12 px no pasa AA: el rojo va en el borde, que marca el
     CTA sin cargar el texto. */
  .ens-home-nav .ensutex-nav-cta strong {
    color: #ffffff;
    font-weight: 800;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .ens-home-nav .ensutex-nav-cta { display: none !important; }
  .ens-home-nav .ensutex-nav-menu > a,
  .ens-home-nav .ensutex-nav-menu > div > a { padding-inline: .78rem; }
}

@media (max-width: 767px) {
  .ensutex-site-nav.ens-home-nav .ensutex-brand-logo {
    height: 2.1rem !important;
  }
}

/* Directional navigation: visible at the top and while ascending; out of the
   reading area while the visitor descends. Keyboard focus always reveals it. */
.ens-scroll-nav {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
  will-change: transform;
}

.ens-scroll-nav.ens-nav-hidden {
  opacity: 0;
  pointer-events: none !important;
  transform: translate3d(0, calc(-100% - 1.5rem), 0);
}

.ens-scroll-nav.ens-nav-hidden > * {
  pointer-events: none !important;
}

.ens-scroll-nav:focus-within {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Questions: the former negative intro margin physically overlapped the title.
   Use an explicit type rhythm so long headings remain readable at every width. */
#preguntas-frecuentes .ens-section-head {
  max-width: min(72rem, 100%);
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

#preguntas-frecuentes #faq-title {
  max-width: 72rem;
  margin: 0 auto;
  font-size: clamp(2.4rem, 4.2vw, 4rem) !important;
  font-weight: 700;
  letter-spacing: -.045em !important;
  /* El interlineado de este titular lo manda ahora el ritmo tipografico de
     assets/css/ensutex-fuentes.css (22-09-2026). El 1.04 de aqui era mas
     especifico (dos ids) que aquel bloque y dejaba la tilde de las mayusculas
     pegada a la linea de arriba (se midio con canvas). El tamano de letra y el
     interletrado siguen siendo los de esta hoja. */
  text-wrap: balance;
}

#preguntas-frecuentes .ens-faq__intro {
  max-width: 44rem;
  margin: clamp(1.2rem, 2vw, 1.55rem) auto 0;
  color: #52525b;
  font-size: clamp(1rem, 1.18vw, 1.14rem);
  font-weight: 400;
  line-height: 1.55;
}

/* FAQ journey accents belong to the product-cyan system too. The darker teal
   keeps the small uppercase labels and icons readable on the paper surface;
   the brighter cyan remains in borders and interaction feedback. */
#preguntas-frecuentes .ens-faq__group-label {
  color: #e20613;
}

#preguntas-frecuentes .ens-faq__item::before {
  background: linear-gradient(130deg, rgba(226, 6, 19, .72), rgba(226, 6, 19, .2), rgba(226, 6, 19, .38));
}

#preguntas-frecuentes .ens-faq__question svg {
  color: #e20613;
}

#preguntas-frecuentes .ens-faq__question[aria-expanded="true"] {
  background: linear-gradient(100deg, rgba(226, 6, 19, .1), rgba(255, 255, 255, .2));
  color: #33302d;
}

#preguntas-frecuentes .ens-faq__question[aria-expanded="true"] svg {
  color: var(--ens-home-cyan);
}

/* A deliberately staged copy block: headline, explanation, proof, action. */
@media (min-width: 768px) {
  #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    grid-template-columns: minmax(0, .6fr) minmax(0, .4fr);
    padding-inline: clamp(2rem, 4.6vw, 5.5rem);
  }

  #hero-section.ens-motion-hero--video .ens-cinema-hero__copy {
    width: min(100%, 44rem);
    max-width: 44rem;
  }
}

#hero-section.ens-motion-hero--video .ens-motion-eyebrow {
  max-width: 42rem;
  margin-bottom: clamp(.8rem, 1.5vh, 1rem);
  /* Blanco neutro: era rgb(225, 240, 247) — blanco teñido de cian. */
  color: rgba(255, 255, 255, .86);
  font-family: var(--ens-font-body-family);
  font-size: clamp(.66rem, .73vw, .76rem);
  font-weight: 600;
  letter-spacing: .105em;
  line-height: 1.45;
}

#hero-section.ens-motion-hero--video .ens-motion-hero__title {
  max-width: 100%;
  color: #ffffff;
  font-family: var(--ens-font-body-family);
  font-size: clamp(3rem, 3.3vw, 3.85rem);
  font-weight: 600;
  letter-spacing: -.052em;
  line-height: 1.03;
  text-wrap: initial;
}

#hero-section.ens-motion-hero--video .ens-hero-line {
  white-space: nowrap;
}

#hero-section.ens-motion-hero--video .ens-hero-line--accent {
  max-width: 18ch;
  white-space: normal;
  /* Rojo de marca: era --ens-home-cyan (#e20613). El acento del hero es
     marca, no interfaz. El resto del home sigue con --ens-home-cyan. */
  color: var(--ens-sky);
  text-shadow: 0 0 24px rgba(226, 6, 19, .2), 0 5px 28px rgba(0, 0, 0, .62);
}

#hero-section.ens-motion-hero--video .ens-motion-hero__lead {
  max-width: 39rem;
  margin-top: clamp(1rem, 2.1vh, 1.35rem);
  /* Blanco neutro: era rgb(246, 245, 244) — blanco teñido de cian. */
  color: rgba(255, 255, 255, .9);
  font-family: var(--ens-font-body-family);
  font-size: clamp(1rem, 1.12vw, 1.15rem);
  font-weight: 400;
  line-height: 1.58;
}

/* 25-sep: los chips bajaron debajo del botón principal (pedido de Carlitos). La
   entrada sigue el orden nuevo: primero el botón, después los chips. */
#hero-section.ens-motion-hero--video .ens-motion-actions { animation-delay: 1.02s; }
#hero-section.ens-motion-hero--video .ens-motion-chips { animation-delay: 1.16s; }

#hero-section.ens-motion-hero--video .ens-motion-chips {
  max-width: 39rem;
  margin-top: clamp(1rem, 2vh, 1.25rem);
  gap: .6rem;
  justify-content: center;
}

#hero-section.ens-motion-hero--video .ens-motion-chips span {
  justify-content: center;
  min-height: 2.24rem;
  padding: .45rem .78rem;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(13, 12, 12, .48);
  color: rgba(250, 250, 249, .92);
  font-family: var(--ens-font-body-family);
  font-size: .72rem;
  font-weight: 500;
  text-align: center;
}

#hero-section.ens-motion-hero--video .ens-motion-chips strong {
  /* Blanco y no acento: sobre la píldora oscura el rojo de marca da
     3,88:1 a 11 px, bajo el mínimo AA de 4,5:1. Aquí manda el contraste. */
  color: #ffffff;
  font-weight: 600;
}

#hero-section.ens-motion-hero--video .ens-motion-actions {
  max-width: 34rem;
  margin-top: clamp(1.05rem, 2.1vh, 1.3rem);
  gap: .75rem;
}

@media (min-width: 1024px) {
  #hero-section.ens-motion-hero--video .ens-motion-chips {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #hero-section.ens-motion-hero--video .ens-motion-chips span {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }

  #hero-section.ens-motion-hero--video .ens-motion-actions {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  }

  #hero-section.ens-motion-hero--video .ens-motion-button--primary {
    order: 2;
  }

  #hero-section.ens-motion-hero--video .ens-motion-actions > a {
    width: 100%;
  }
}

/* The hero must present its final composition immediately. Movement belongs to
   the product video and interaction states, never to a sales message shifting
   after the visitor has started reading it. */
#hero-section.ens-motion-hero--video .ens-cinema-enter,
.motion-ready #hero-section.ens-motion-hero--video .ens-cinema-enter {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

#hero-section.ens-motion-hero--video .ens-motion-button,
#hero-section.ens-motion-hero--video .ens-motion-link {
  min-height: 3.15rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  font-family: var(--ens-font-body-family);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .005em;
}

#hero-section.ens-motion-hero--video .ens-motion-button--primary {
  /* Rojo de marca: era #e20613 (azul). Esta regla gana sobre la del CSS
     crítico de index.html porque ambas son !important y ésta carga
     después: por eso el azul se cambia en los dos lados, no sólo allá. */
  border-color: #E20613 !important;
  background: #E20613 !important;
  box-shadow: 0 16px 42px rgba(226, 6, 19, .32);
  color: #ffffff !important;
}

#hero-section.ens-motion-hero--video .ens-motion-button--primary strong {
  color: #ffffff !important;
}

#hero-section.ens-motion-hero--video .ens-motion-button--primary:hover {
  border-color: #E20613 !important;
  background: #B0000D !important;
  color: #ffffff !important;
}

#hero-section.ens-motion-hero--video .ens-motion-link {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(9, 8, 8, .54);
  color: #ffffff;
}

@media (max-width: 1023px) {
  #hero-section.ens-motion-hero--video .ens-motion-button--primary {
    order: -1;
  }
  body.ensutex-home #chatbot-panel.ens-chat-panel.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* Primary CTA contract: black base, bold white copy and one intentional cyan
   keyword. This utility is reused by every conversion action on Home. */
.ensutex-home .ens-cta-primary {
  gap: .32rem !important;
  border: 1px solid rgba(226, 6, 19, .58) !important;
  border-radius: 999px !important;
  background: #0c0b0a !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .26);
  color: #ffffff !important;
  font-family: var(--ens-font-body-family);
  font-weight: 700 !important;
}

.ensutex-home .ens-cta-primary strong {
  color: var(--ens-home-cyan) !important;
  font-weight: 800 !important;
}

.ensutex-home .ens-cta-primary:hover {
  border-color: rgba(226, 6, 19, .92) !important;
  background: #181615 !important;
  color: #ffffff !important;
}

/* Excepción: la píldora del nav es chrome de marca, no interfaz. Estas reglas
   existen para ganarle a las `.ensutex-home .ens-cta-primary` de arriba, que
   son (0,2,0) !important y cargan después del CSS crítico de index.html: por
   eso el borde de la píldora se cambia acá y no sólo allá. El rótulo va
   blanco; en rojo daba 4,01:1 y a 12 px no pasa AA. */
.ensutex-home .ens-home-nav .ensutex-nav-cta {
  border-color: rgba(226, 6, 19, .58) !important;
}

.ensutex-home .ens-home-nav .ensutex-nav-cta:hover {
  border-color: rgba(226, 6, 19, .92) !important;
}

.ensutex-home .ens-home-nav .ensutex-nav-cta strong {
  color: #ffffff !important;
}

/* Copy accents follow the same product blue so the journey has one clear
   visual signal. Red stays available only for alerts and the chat badge. */
.ensutex-home .ens-process-step__number,
.ensutex-home .ens-trust-card__copy strong,
.ensutex-home .ens-contact-coupon span {
  color: var(--ens-home-cyan);
}

.ensutex-home .ens-trust-card::before {
  background: linear-gradient(130deg, rgba(226, 6, 19, .76), rgba(255, 255, 255, .26), rgba(226, 6, 19, .36));
}

.ensutex-home .ens-contact-coupon {
  background: linear-gradient(135deg, #f7f6f5, #ffffff 55%, #f8f8f7);
}

@media (max-width: 767px) {
  #hero-section.ens-motion-hero--video .ens-hero-video {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  #hero-section.ens-motion-hero--video .ens-motion-hero__title {
    font-size: clamp(2.45rem, 10.5vw, 3.2rem);
    line-height: 1.01;
  }

  #hero-section.ens-motion-hero--video .ens-hero-line {
    white-space: normal;
  }

  #hero-section.ens-motion-hero--video .ens-motion-chips span {
    font-size: .68rem;
  }

  #preguntas-frecuentes #faq-title {
    font-size: clamp(2rem, 8.8vw, 2.8rem) !important;
    /* Sin line-height a proposito: lo pone ensutex-fuentes.css (ver arriba). */
  }

  #preguntas-frecuentes .ens-faq__intro {
    margin-top: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ens-scroll-nav,
  .ens-home-nav .ensutex-nav-cta,
  #hero-section.ens-motion-hero--video .ens-motion-button,
  #hero-section.ens-motion-hero--video .ens-motion-link {
    transition: none;
  }
}

/* Storytelling uses one quiet language: static supporting copy and a clean
   typewriter title. The former whole-section cinematic zoom is intentionally
   absent from these scenes. */
.ensutex-home [data-storytelling],
.ensutex-home [data-storytelling].scene-reveal,
.ensutex-home [data-storytelling].scene-reveal--in {
  opacity: 1 !important;
  transform: none !important;
}

/* The browser must treat product films as presentation, not as interactive
   players. This suppresses PiP/visual-search affordances on hover. */
.ensutex-home video[data-premium-video],
.ensutex-home video[data-cinema-video] {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Guided emotional bridge: the copy arrives first; the full-width film rises
   into view only after the visitor has continued past the message. */
#esencia-equipo {
  min-height: 132svh;
  padding: clamp(6rem, 10vw, 9rem) 0 clamp(5rem, 8vw, 7.5rem);
  overflow: clip;
  background:
    radial-gradient(circle at 50% 22%, rgba(226, 6, 19, .08), transparent 30rem),
    #070606 !important;
  color: #ffffff !important;
}

#esencia-equipo .ens-vfranja__wrap {
  width: min(calc(100% - 5rem), 96rem);
  gap: 0;
}

#esencia-equipo .ens-vfranja__copy {
  position: relative;
  z-index: 2;
  max-width: 55rem;
}

#esencia-equipo .ens-vfranja__copy .ens-eyebrow {
  color: var(--ens-home-cyan) !important;
}

#esencia-equipo .ens-vfranja__copy h2 {
  max-width: 19ch;
  color: #ffffff !important;
  font-size: clamp(2.65rem, 5.35vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .99;
}

#esencia-equipo .ens-vfranja__copy p:last-child {
  max-width: 46rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  color: rgba(255, 255, 255, .72) !important;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.58;
}

#esencia-equipo .ens-vfranja__media {
  width: 100%;
  margin-top: clamp(8rem, 17vh, 12rem);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: clamp(1.2rem, 2vw, 2rem);
  background: #0c0b0a;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .62);
  opacity: .04;
  transform: translate3d(0, clamp(5rem, 14vh, 9rem), 0) scale(.965);
  transform-origin: center bottom;
  transition:
    opacity .78s cubic-bezier(.22, 1, .36, 1),
    transform 1.05s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

#esencia-equipo.is-video-revealed .ens-vfranja__media {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

#esencia-equipo .ens-vfranja__media video {
  object-fit: contain;
  background: #0c0b0a;
}

/* Questions remain in the same black world, while each answer group behaves
   like a white floating conversation bubble with its own outline color. */
#preguntas-frecuentes.ens-faq {
  padding-top: clamp(6rem, 9vw, 8rem);
  padding-bottom: clamp(6rem, 9vw, 8rem);
  background:
    radial-gradient(circle at 12% 18%, rgba(226, 6, 19, .07), transparent 24rem),
    radial-gradient(circle at 88% 78%, rgba(135, 206, 235, .06), transparent 25rem),
    #070606 !important;
  color: #ffffff !important;
}

#preguntas-frecuentes .ens-eyebrow,
#preguntas-frecuentes #faq-title {
  color: #ffffff !important;
}

#preguntas-frecuentes .ens-faq__intro {
  color: rgba(255, 255, 255, .68) !important;
}

#preguntas-frecuentes .ens-faq__group:nth-child(1) { --faq-accent: #e20613; }
#preguntas-frecuentes .ens-faq__group:nth-child(2) { --faq-accent: #ff8a92; }
#preguntas-frecuentes .ens-faq__group:nth-child(3) { --faq-accent: #87ceeb; }
#preguntas-frecuentes .ens-faq__group:nth-child(4) { --faq-accent: #48d597; }

#preguntas-frecuentes .ens-faq__group-label {
  color: var(--faq-accent) !important;
}

#preguntas-frecuentes .ens-faq__item {
  border: 2px solid var(--faq-accent);
  border-radius: 1.35rem;
  background: #ffffff !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#preguntas-frecuentes .ens-faq__item::before {
  display: none;
}

#preguntas-frecuentes .ens-faq__question,
#preguntas-frecuentes .ens-faq__question[aria-expanded="true"] {
  background: #ffffff !important;
  color: #161413 !important;
}

#preguntas-frecuentes .ens-faq__question svg,
#preguntas-frecuentes .ens-faq__question[aria-expanded="true"] svg {
  color: var(--faq-accent) !important;
}

#preguntas-frecuentes .ens-faq__answer,
#preguntas-frecuentes .ens-faq__answer p {
  color: #474441 !important;
}

#preguntas-frecuentes .ens-faq__question:focus-visible {
  outline: 3px solid var(--faq-accent);
  outline-offset: -5px;
}

@media (max-width: 767px) {
  #esencia-equipo {
    min-height: auto;
    padding: 5.5rem 0 4.5rem;
  }

  #esencia-equipo .ens-vfranja__wrap {
    width: min(calc(100% - 2rem), 42rem);
  }

  #esencia-equipo .ens-vfranja__copy h2 {
    font-size: clamp(2.25rem, 11.2vw, 3.5rem);
  }

  #esencia-equipo .ens-vfranja__media {
    margin-top: clamp(6rem, 16vh, 8rem);
    border-radius: 1.15rem;
    transform: translate3d(0, 5rem, 0) scale(.97);
  }

  #preguntas-frecuentes.ens-faq {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #esencia-equipo .ens-vfranja__media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Home 2026-07-16: the deeper video scenes remain available for their own
   pages, but they must not lengthen or overpromise on the landing page. */
.ensutex-home [data-home-reserved] {
  display: none !important;
}

/* A single, honest multi-mockup sample replaces the oversized proof scenes. */
#mockups-resumen.ens-home-mockups {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(226, 6, 19, .08), transparent 30rem),
    #070606 !important;
}

#mockups-resumen .ens-home-mockups__head {
  width: min(calc(100% - 3rem), 58rem);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

#mockups-resumen .ens-home-mockups__head .ens-eyebrow {
  justify-content: center;
  color: var(--ens-home-cyan);
}

#mockups-resumen .ens-home-mockups__head h2 {
  max-width: 18ch;
  margin: .9rem auto 0;
  color: #ffffff;
  font-size: clamp(2.2rem, 4.4vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  text-wrap: balance;
}

#mockups-resumen .ens-home-mockups__head p {
  max-width: 42rem;
  margin: 1.2rem auto 0;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(.98rem, 1.2vw, 1.12rem);
  line-height: 1.6;
}

#mockups-resumen .ens-marquee {
  gap: 0;
}

#mockups-resumen .ens-marquee__row {
  gap: clamp(.65rem, 1vw, .9rem);
}

#mockups-resumen .ens-marquee__tile {
  width: clamp(138px, 15vw, 205px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1.1rem;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
}

/* One deliberate closing scene restores visual breathing room without
   turning the Home back into a sequence of repeated product films. */
#cierre-equipo.ens-home-close {
  min-height: 100svh;
  padding: clamp(5.5rem, 8vw, 7.5rem) 0;
  display: flex;
  align-items: center;
  overflow: clip;
  background:
    radial-gradient(circle at 14% 18%, rgba(226, 6, 19, .12), transparent 28rem),
    linear-gradient(135deg, #f1f0ef 0%, #f7f6f4 52%, #efeeee 100%);
  color: #161413;
}

.ens-home-close__layout {
  display: grid;
  grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.ens-home-close__copy {
  width: min(100%, 42rem);
  min-width: 0;
  text-align: left;
}

.ens-home-close__copy .ens-eyebrow {
  justify-content: flex-start;
  color: #e20613;
}

.ens-home-close__copy h2 {
  max-width: 12ch;
  margin: .9rem 0 0;
  color: #161413;
  font-size: clamp(2.8rem, 4.7vw, 4.9rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .96;
  text-wrap: balance;
}

.ens-home-close__copy > p:not(.ens-eyebrow) {
  max-width: 35rem;
  margin: 1.35rem 0 0;
  color: #605b56;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.6;
}

.ens-home-close__steps {
  max-width: 38rem;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
}

.ens-home-close__steps li {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: .9rem;
  border-top: 1px solid rgba(22, 20, 19, .13);
}

.ens-home-close__steps li:last-child {
  border-bottom: 1px solid rgba(22, 20, 19, .13);
}

.ens-home-close__steps > li > span {
  color: #e20613;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.ens-home-close__steps strong {
  display: block;
  color: #161413;
  font-size: 1rem;
  font-weight: 700;
}

.ens-home-close__steps p {
  margin: .3rem 0 0;
  color: #656971;
  font-size: .9rem;
  line-height: 1.5;
}

.ens-home-close__copy .ens-cta-primary {
  display: inline-flex !important;
  width: auto !important;
  min-height: 3.75rem;
  margin-top: 2rem;
  padding: .9rem 1.45rem;
  align-items: center;
  justify-content: center;
  gap: .55rem !important;
  border: 1px solid rgba(226, 6, 19, .65);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
  line-height: 1.1;
  text-decoration: none !important;
}

.ens-home-close__copy .ens-cta-primary svg {
  position: static !important;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: .15rem;
  flex: 0 0 auto;
  transform: none !important;
}

.ens-home-close__media {
  width: min(100%, 35rem);
  aspect-ratio: 834 / 1112;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(22, 20, 19, .1);
  border-radius: clamp(1.25rem, 2.3vw, 2rem);
  background: #ffffff;
  box-shadow: 0 34px 90px rgba(33, 31, 29, .18);
  opacity: .04;
  transform: translate3d(0, 5rem, 0) scale(.975);
  transform-origin: center bottom;
  transition: opacity .72s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
}

#cierre-equipo.is-video-revealed .ens-home-close__media {
  opacity: 1;
  transform: none;
}

.ens-home-close__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

/* The former catalog video and guide coupon become one short exit ramp. */
#catalogo.ens-home-next {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: #f4f3f2;
  color: #131211;
}

.ens-home-next__layout {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.ens-home-next__layout header {
  min-width: 0;
}

.ens-home-next__layout header .ens-eyebrow {
  color: #e20613;
}

.ens-home-next__layout h2 {
  max-width: 12ch;
  margin-top: .85rem;
  color: #131211;
  font-size: clamp(2.3rem, 4vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -.052em;
  line-height: 1;
}

.ens-home-next__layout header > p:last-child {
  max-width: 34rem;
  margin-top: 1.15rem;
  color: #5a5d64;
  font-size: 1rem;
  line-height: 1.6;
}

.ens-home-next__links {
  display: grid;
  gap: .8rem;
}

.ens-home-next__choices {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.ens-home-next__shortcuts {
  min-width: 0;
  padding: .8rem .9rem;
  border: 1px solid rgba(19, 18, 17, .13);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .64);
}

.ens-home-next__shortcuts > span {
  display: block;
  margin-bottom: .55rem;
  color: #5f5a56;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ens-home-next__shortcut-rail {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.ens-home-next__shortcut-rail::-webkit-scrollbar {
  display: none;
}

.ens-home-next__shortcut-rail a {
  min-height: 44px;
  padding: .65rem .85rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid rgba(19, 18, 17, .16);
  border-radius: 999px;
  background: #ffffff;
  color: #131211;
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.2;
  scroll-snap-align: start;
}

.ens-home-next__shortcut-rail a:hover {
  border-color: #e20613;
  color: #e20613;
}

.ens-home-next__shortcut-rail a:focus-visible {
  outline: 3px solid var(--ens-home-cyan);
  outline-offset: 2px;
}

.ens-home-next__link {
  min-height: 5.75rem;
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem 1.25rem;
  border: 1px solid rgba(19, 18, 17, .13);
  border-radius: 1.25rem;
  background: #ffffff;
  color: #131211;
  box-shadow: 0 14px 40px rgba(24, 23, 22, .06);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.ens-home-next__link span {
  color: #6a6d74;
  font-size: .82rem;
  font-weight: 500;
}

.ens-home-next__link strong {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 700;
}

.ens-home-next__link--primary {
  border-color: rgba(226, 6, 19, .55);
  background: #0c0b0a;
  color: #ffffff;
}

.ens-home-next__link--primary span {
  color: var(--ens-home-cyan);
}

.ens-home-next__link:hover {
  border-color: rgba(226, 6, 19, .7);
  box-shadow: 0 20px 52px rgba(24, 23, 22, .1);
  transform: translateY(-2px);
}

.ens-home-next__link:focus-visible {
  outline: 3px solid var(--ens-home-cyan);
  outline-offset: 3px;
}

/* Final visual beat: the former contact-detail block exits cleanly and the
   actual animated Ensutex mark arrives from below as the last full scene. */
#contacto.ens-logo-finale {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  height: 100svh;
  padding: 3rem 1.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #030405;
}

#contacto.ens-logo-finale::before,
#contacto.ens-logo-finale::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}

#contacto.ens-logo-finale::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(226, 6, 19, .11), transparent 33%),
    radial-gradient(circle at 50% 100%, rgba(226, 6, 19, .08), transparent 45%),
    #030405;
}

#contacto.ens-logo-finale::after {
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(0deg, #030405 0%, transparent 100%);
}

.ens-logo-finale__glow {
  position: absolute;
  inset: 12% 12% auto;
  z-index: -1;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(226, 6, 19, .1), transparent 66%);
  filter: blur(28px);
  pointer-events: none;
}

.ens-logo-finale__media {
  width: min(100%, 88rem, 145svh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transform-origin: center bottom;
}

#contacto.ens-logo-finale .ens-logo-finale__media[data-story-video] {
  opacity: 0;
  transform: translate3d(0, clamp(7rem, 16vh, 10rem), 0) scale(.975);
  transition: opacity .56s ease-out, transform 1s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

#contacto.ens-logo-finale.is-logo-revealed .ens-logo-finale__media[data-story-video],
#contacto.ens-logo-finale.is-video-revealed .ens-logo-finale__media[data-story-video] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.ens-logo-finale__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none !important;
  user-select: none;
}

@media (max-width: 767px) {
  #mockups-resumen.ens-home-mockups {
    padding: 4.25rem 0;
  }

  #mockups-resumen .ens-home-mockups__head {
    width: min(calc(100% - 2rem), 36rem);
  }

  #mockups-resumen .ens-home-mockups__head h2 {
    font-size: clamp(2.15rem, 10vw, 3.25rem);
  }

  #mockups-resumen .ens-marquee__tile {
    width: clamp(128px, 39vw, 160px);
  }

  #cierre-equipo.ens-home-close {
    min-height: auto;
    padding: 5rem 0 5.5rem;
  }

  .ens-home-close__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ens-home-close__copy {
    order: -1;
    text-align: left;
  }

  .ens-home-close__copy .ens-eyebrow {
    justify-content: flex-start;
  }

  .ens-home-close__copy h2,
  .ens-home-close__copy > p:not(.ens-eyebrow) {
    margin-left: 0;
    margin-right: 0;
  }

  .ens-home-close__copy h2 {
    font-size: clamp(2.3rem, 11vw, 3.55rem);
  }

  .ens-home-close__media {
    width: min(100%, 27rem);
    border-radius: 1.2rem;
    transform: translate3d(0, 3.5rem, 0) scale(.98);
  }

  #catalogo.ens-home-next {
    padding: 4.5rem 0;
  }

  #contacto.ens-logo-finale {
    min-height: 100svh;
    height: 100svh;
    padding: 3rem 1rem;
  }

  .ens-logo-finale__media {
    width: min(100%, 34rem);
  }

  #contacto.ens-logo-finale .ens-logo-finale__media[data-story-video] {
    transform: translate3d(0, 5rem, 0) scale(.98);
  }

  .ens-home-next__layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .ens-home-next__layout h2 {
    max-width: 14ch;
    font-size: clamp(2.2rem, 10vw, 3.15rem);
  }

  .ens-home-next__link {
    min-height: 5.25rem;
    align-items: flex-start;
    flex-direction: column;
  }

  .ens-home-next__shortcuts {
    margin-inline: -1rem;
    padding-inline: 1rem;
    border-inline: 0;
    border-radius: 0;
  }

  .ens-home-next__shortcut-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ens-home-close__media {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ens-home-next__link {
    transition: none;
  }

  #contacto.ens-logo-finale .ens-logo-finale__media[data-story-video] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ens-home-next__link:hover {
    transform: none;
  }
}
@media (max-width: 1023px) {
  body.ensutex-home.ens-hero-in-view .floating-widgets {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* 2026-07-18 · Home mobile: primero la promesa, luego la imagen de producto. */
@media (max-width: 767px) {
  #hero-section.ens-motion-hero--video {
    display: flex !important;
    min-height: 0 !important;
    padding-top: 4rem !important;
    flex-direction: column !important;
    background: #080807 !important;
  }

  #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    position: relative !important;
    z-index: 3 !important;
    order: 1 !important;
    min-height: 0 !important;
    padding: 1.3rem 1.15rem .65rem !important;
  }

  #hero-section.ens-motion-hero--video .ens-cinema-hero__copy {
    width: 100% !important;
    max-width: 31rem !important;
    margin: 0 auto !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-eyebrow {
    margin-bottom: .65rem !important;
    font-size: .61rem !important;
    letter-spacing: .09em !important;
    line-height: 1.35 !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-hero__title {
    margin: 0 !important;
    font-size: clamp(2.35rem, 10.7vw, 3.08rem) !important;
    line-height: .98 !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-hero__lead {
    margin-top: .85rem !important;
    font-size: .91rem !important;
    line-height: 1.5 !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-chips {
    display: none !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
    gap: .55rem !important;
    margin-top: 1rem !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-actions > a {
    min-width: 0 !important;
    min-height: 3.15rem !important;
    padding: .68rem .72rem !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-button--primary {
    grid-column: 1 !important;
    order: 1 !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-link {
    grid-column: 2 !important;
    order: 2 !important;
  }

  #hero-section.ens-motion-hero--video .ens-hero-video {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    order: 2 !important;
    width: 100% !important;
    height: clamp(12.8rem, 53vw, 15.2rem) !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    background: #080807 !important;
    transform: none !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%) !important;
  }

  #hero-section.ens-motion-hero--video .ens-hero-scrim,
  #hero-section.ens-motion-hero--video .ens-motion-grid {
    display: none !important;
  }
}

/* 25-sep: franja de beneficios bajo el hero (antes eran chips dentro del hero). */
.ens-beneficios { background: #0d0c0b; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 1.1rem 1rem; }
.ens-beneficios__lista { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.75rem; }
.ens-beneficios__lista span { display: inline-flex; align-items: center; gap: .5rem; color: rgba(253, 251, 255, .86); font-size: .875rem; font-weight: 600; letter-spacing: .01em; }
.ens-beneficios__lista span::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #ff3b47; flex: 0 0 auto; }
.ens-beneficios__lista strong { color: #fff; font-weight: 800; }
@media (max-width: 767px) {
  .ens-beneficios__lista { justify-content: flex-start; gap: .55rem; flex-direction: column; align-items: flex-start; }
}

/* 25-sep: la escena "La esencia del equipo" lleva el video lila (vertical 834x1112, fondo gris
   claro). Marco redondeado centrado del ancho de la prenda, no franja 16:9 a todo el ancho. */
@media (min-width: 768px) {
  #esencia-equipo .ens-vfranja__media { width: min(100%, 30rem); margin-inline: auto; aspect-ratio: 834 / 1112; background: #acacac; }
  #esencia-equipo .ens-vfranja__media video { width: 100%; height: 100%; object-fit: cover; background: #acacac; }
}


/* Source: catalog-premium-v2.css */
/* Catálogo Ensutex · sistema visual alineado con el Home · 2026-07-16 */
:root {
  --catalog-ink: #080807;
  --catalog-paper: #f9f8f8;
  --catalog-white: #fff;
  --catalog-muted: #6c6661;
  --catalog-line: rgba(14, 13, 12, .12);
  /* 25-sep: sin azul cielo en Ensutex (pedido de Carlitos): el acento del catálogo es el rojo de marca. */
  --catalog-blue: #E20613;
  --catalog-blue-dark: #b3050f;
}

body[data-ens-page="catalog"] {
  background: var(--catalog-white);
  color: var(--catalog-ink);
  font-family: var(--ens-font-body-family);
}

body[data-ens-page="catalog"] main section:not(.catalog-page-hero) {
  background-image: none !important;
}

body[data-ens-page="catalog"] #catalogo,
body[data-ens-page="catalog"] #promociones,
body[data-ens-page="catalog"] #equipaciones,
body[data-ens-page="catalog"] #telas,
body[data-ens-page="catalog"] #cotizador-express,
body[data-ens-page="catalog"] #contacto,
body[data-ens-page="catalog"] #cuidados-prenda {
  content-visibility: visible !important;
  contain: none !important;
}

/* Navegación: el mismo sistema flotante del inicio. */
.ens-home-nav .ensutex-nav-cta {
  border: 1px solid rgba(226, 6, 19, .66) !important;
  background: rgba(11, 10, 10, .92) !important;
  color: #fff !important;
}

.ens-home-nav .ensutex-nav-cta strong {
  margin-left: .28em;
  color: var(--catalog-blue);
}

.ens-home-nav.ens-scroll-nav {
  transition: transform .28s ease, opacity .28s ease !important;
}

.ens-home-nav.ens-nav-hidden {
  transform: translateY(-110%) !important;
  opacity: 0;
  pointer-events: none;
}

/* Hero: producto a la izquierda, decisión a la derecha. */
.catalog-page-hero {
  min-height: min(900px, 100svh) !important;
  padding: 5.7rem 0 0 !important;
  display: grid;
  align-items: stretch;
  background: #000 !important;
  color: #fff !important;
}

.catalog-page-hero .ens-hero-video {
  inset: 5.7rem 0 auto !important;
  width: 100% !important;
  height: calc(100% - 5.7rem) !important;
  object-fit: cover !important;
  object-position: left top !important;
  transform: none !important;
}

.catalog-page-hero .ens-hero-scrim {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .08) 35%, rgba(0, 0, 0, .7) 61%, #000 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .42), transparent 38%) !important;
}

.catalog-page-hero__layout {
  width: 100%;
  min-height: calc(min(900px, 100svh) - 5.7rem);
  display: grid !important;
  /* Columnas equilibradas: el copy respira hacia el centro en vez de
     quedar pegado al borde derecho (feedback Carlos 17-jul). */
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr) !important;
  align-items: center !important;
  gap: clamp(1.5rem, 3.5vw, 3.5rem) !important;
  padding-top: clamp(3rem, 8vh, 6rem) !important;
  padding-bottom: clamp(3rem, 8vh, 6rem) !important;
}

.catalog-page-hero__copy {
  grid-column: 2;
  max-width: 39rem !important;
  margin: 0 !important;
  color: #fff !important;
}

.catalog-page-hero__copy h1 {
  max-width: 12ch;
  margin-bottom: 1.4rem !important;
  color: #fff !important;
  font-size: clamp(3rem, 5.2vw, 5.8rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.055em !important;
  line-height: .96 !important;
  text-transform: none !important;
}

.catalog-page-hero__copy p {
  max-width: 35rem;
  color: rgba(255, 255, 255, .78) !important;
  font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
  line-height: 1.6 !important;
}

.catalog-page-hero__copy p strong { color: var(--catalog-blue); }

.catalog-hero-badge {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(13, 12, 11, .7) !important;
  color: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(14px);
}

.catalog-hero-primary,
.catalog-hero-secondary {
  min-height: 3.35rem;
  border: 1px solid rgba(255, 255, 255, .18);
}

.catalog-hero-primary {
  border-color: var(--catalog-blue) !important;
  background: var(--catalog-blue) !important;
  color: #ffffff !important;
}

.catalog-hero-secondary {
  background: rgba(7, 6, 6, .72) !important;
  color: #fff !important;
  backdrop-filter: blur(12px);
}

.catalog-hero-primary:hover { background: #b3050f !important; }
.catalog-hero-secondary:hover { border-color: var(--catalog-blue) !important; }
.catalog-hero-decision,
.ens-catalog-showreel { display: none !important; }

/* Tres caminos: una escena oscura, sin rayas, sin tarjetas decorativas. */
#caminos {
  padding: clamp(4rem, 8vw, 7rem) 0 !important;
  background: var(--catalog-ink) !important;
  color: #fff;
}

#caminos > div { max-width: 78rem !important; }
#caminos .text-center { margin-bottom: 2.7rem !important; }
#caminos .text-center > span { color: var(--catalog-blue) !important; }
#caminos h2 {
  max-width: 14ch;
  margin-inline: auto;
  color: #fff !important;
  font-size: clamp(2.35rem, 5vw, 4.8rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
  text-transform: none !important;
}
#caminos .text-center p { color: rgba(255, 255, 255, .62) !important; font-size: 1rem; }
#caminos .grid { gap: .75rem !important; }
#caminos .grid > a {
  position: relative;
  min-height: 18rem;
  padding: 2rem !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 1.75rem !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #fff !important;
  box-shadow: none !important;
  overflow: hidden;
}
#caminos .grid > a::before {
  content: attr(data-catalog-number);
  display: block;
  width: fit-content;
  margin-bottom: auto;
  color: var(--catalog-blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
}
#caminos .grid > a:nth-child(1)::before { content: "01"; }
#caminos .grid > a:nth-child(2)::before { content: "02"; }
#caminos .grid > a:nth-child(3)::before { content: "03"; }
#caminos .grid > a > .material-symbols-outlined { display: none !important; }
#caminos .grid > a > span.absolute { background: var(--catalog-blue) !important; color: #ffffff !important; }
#caminos .grid h3 {
  margin-top: 4.5rem;
  color: #fff !important;
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
#caminos .grid p { color: #cbc8c5 !important; font-size: .94rem !important; }
#caminos .grid a > span:last-child { color: #fff !important; font-size: .72rem; }
#caminos .grid > a:hover { border-color: rgba(226, 6, 19, .7) !important; background: rgba(226, 6, 19, .08) !important; }

/* Explorador de productos. */
#catalogo {
  padding: clamp(4.5rem, 8vw, 7rem) 0 !important;
  background: var(--catalog-paper) !important;
  border: 0 !important;
  overflow: clip !important;
}

#catalogo > div { max-width: 88rem !important; }
#catalogo > div > .mb-14 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  margin-bottom: 2.2rem !important;
  padding-bottom: 1.6rem !important;
  border-bottom-color: var(--catalog-line) !important;
}
#catalogo h2 {
  color: var(--catalog-ink) !important;
  font-size: clamp(2.2rem, 4.5vw, 4.6rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
  text-transform: none !important;
}
#catalogo .catalog-intro,
#catalogo .catalog-toolbar .catalog-paths,
#catalogo > div > .mt-12.mb-20 { display: none !important; }

.catalog-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr) !important;
  gap: 1rem !important;
  max-width: none !important;
  margin-bottom: 1.5rem !important;
  padding: .75rem !important;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 1.25rem !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(15, 14, 14, .07) !important;
}
.catalog-toolbar .catalog-search { grid-column: 1; }
.catalog-toolbar__filters {
  grid-column: 2 !important;
  padding: 0 !important;
  border: 0 !important;
}
#catalogo .catalog-toolbar__filters #cat-tabs {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: .45rem !important;
  min-width: 0 !important;
  padding: 0 !important;
}
#catalogo .catalog-toolbar__filters #cat-tabs .cat-tab { flex: 0 0 auto !important; width: auto !important; }
#catalogo .catalog-toolbar__filters > div[aria-label="Accesos complementarios del catálogo"] { display: none !important; }
.catalog-search__input {
  min-height: 3.15rem !important;
  border-color: transparent !important;
  border-radius: .9rem !important;
  background: #f4f3f2 !important;
}
.cat-tab {
  min-height: 2.85rem !important;
  padding: .72rem 1rem !important;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #4b4743 !important;
  font-size: .7rem !important;
}
.cat-tab.active,
.cat-tab:hover {
  border-color: var(--catalog-ink) !important;
  background: var(--catalog-ink) !important;
  color: #fff !important;
}
.catalog-toolbar__filters > div[aria-label="Accesos complementarios del catálogo"] { display: none !important; }

.catalog-carousel-shell { max-width: none !important; }
.catalog-carousel__toolbar {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.catalog-carousel__arrow {
  border-color: var(--catalog-line) !important;
  background: #fff !important;
  color: var(--catalog-ink) !important;
}
.catalog-carousel__arrow:hover { border-color: var(--catalog-blue) !important; background: var(--catalog-blue) !important; }
.catalog-carousel__arrow .material-symbols-outlined { display: none !important; }
.catalog-carousel__arrow::before { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.catalog-carousel__arrow[data-catalog-prev]::before { content: "←"; }
.catalog-carousel__arrow[data-catalog-next]::before { content: "→"; }
#catalogo button[onclick^="scrollCatalog"] { display: none !important; }
.catalog-carousel__progress-bar { background: var(--catalog-blue) !important; }

#cat-grid[data-catalog-carousel] {
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 1rem !important;
  padding: .25rem .1rem 1.25rem !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-padding-left: .1rem !important;
}
#cat-grid[data-catalog-carousel] > [data-product-id] {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 calc(33.333% - .67rem) !important;
  width: calc(33.333% - .67rem) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44rem !important;
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 1.5rem !important;
  background: #fff !important;
  box-shadow: 0 16px 50px rgba(17, 16, 16, .07) !important;
  overflow: hidden !important;
}
#cat-grid[data-catalog-carousel] > [data-product-id].is-hidden { display: none !important; }
#cat-grid[data-catalog-carousel] > [data-product-id]:hover {
  border-color: rgba(226, 6, 19, .7) !important;
  box-shadow: 0 22px 64px rgba(17, 16, 16, .12) !important;
}
#cat-grid .catalog-product-stage {
  min-height: 23rem !important;
  padding: 1.5rem !important;
  border-bottom: 1px solid var(--catalog-line) !important;
  background: #f2f1f0 !important;
  background-image: radial-gradient(circle at 50% 60%, rgba(226, 6, 19, .15), transparent 55%) !important;
}
#cat-grid .catalog-product-stage::after { opacity: .5 !important; }
#cat-grid .catalog-product-visual {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 22px rgba(10, 9, 8, .22)) !important;
}
#cat-grid[data-catalog-carousel] > [data-product-id] > .p-5 {
  padding: 1.35rem !important;
  background: #fff !important;
}
#cat-grid h3 {
  color: var(--catalog-ink) !important;
  font-size: 1.15rem !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}
#cat-grid h3 + p { min-height: 2.8rem; color: var(--catalog-muted) !important; font-size: .78rem !important; }
.catalog-size-prices {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  width: 100%;
}
.catalog-size-prices > span {
  min-width: 0;
  padding: .55rem .35rem;
  border: 1px solid var(--catalog-line);
  border-radius: .7rem;
  color: #66625d;
  background: #f9f8f8;
  font-size: .68rem;
  line-height: 1.25;
  text-align: center;
}
.catalog-size-prices > span b { display: block; color: var(--catalog-ink); font-size: .64rem; }
.catalog-size-prices > .is-standard { border-color: rgba(226, 6, 19, .55); background: rgba(226, 6, 19, .1); color: var(--catalog-blue-dark); }
.catalog-size-prices > .is-standard { color: #b3050f !important; }
.catalog-size-prices > .is-special { border-color: rgba(23, 22, 20, .25); background:#171614; color:#fff; }
.catalog-size-prices > .is-special b { color:#ff8a92; }
.catalog-size-note { grid-column:1/-1; color:#76706b; font-size:.68rem; line-height:1.4; text-align:left; }
.catalog-fabric-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
}
.catalog-fabric-prices span {
  display: flex;
  justify-content: space-between;
  gap: .45rem;
  padding: .55rem .65rem;
  border-radius: .65rem;
  background: #100f0e;
  color: #fff;
  font-size: .68rem;
}
.catalog-fabric-prices b { color: var(--catalog-blue); }
#cat-grid [data-product-btn],
#packs [data-pack-btn] {
  min-height: 3.1rem;
  border-radius: 999px !important;
  background: var(--catalog-ink) !important;
  color: #fff !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .8rem !important;
}
#cat-grid [data-product-btn]:hover,
#packs [data-pack-btn]:hover { background: var(--catalog-blue) !important; color: #ffffff !important; }
.pack-badge { border-color: rgba(226, 6, 19, .35) !important; background: rgba(226, 6, 19, .1) !important; color: #e20613 !important; }
.pack-hint,
.pack-hint--multi { border-color: rgba(226, 6, 19, .24) !important; background: rgba(226, 6, 19, .06) !important; color: var(--catalog-ink) !important; }
.pack-hint-select { border-color: var(--catalog-line) !important; background-color: #fff !important; color: var(--catalog-ink) !important; }
.pack-hint-cta { background: var(--catalog-ink) !important; color: #fff !important; }

/* Packs: cuatro combinaciones reales, grandes y consistentes. */
#promociones {
  padding: clamp(4.5rem, 8vw, 7rem) 0 !important;
  background: #fff !important;
  border: 0 !important;
}
#promociones > div { max-width: 88rem !important; }
#promociones > div > .text-center > span { border-color: rgba(226, 6, 19, .3) !important; background: rgba(226, 6, 19, .1) !important; color: var(--catalog-blue-dark) !important; }
#promociones h2 {
  color: var(--catalog-ink) !important;
  font-size: clamp(2.3rem, 4.8vw, 4.8rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
  text-transform: none !important;
}
#packs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
#packs > [data-pack-id] {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: 29rem;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 18px 55px rgba(16, 16, 15, .08) !important;
}
#packs > [data-pack-id] > div:first-child {
  aspect-ratio: auto !important;
  min-height: 100%;
  padding: 1rem !important;
  border: 0 !important;
  background: #0f0e0d !important;
}
#packs > [data-pack-id] > div:first-child > span:first-of-type {
  top: 1rem !important;
  right: auto !important;
  bottom: auto !important;
  left: 1rem !important;
  display: inline-flex !important;
  align-items: center;
  min-height: 1.7rem;
  padding: .35rem .7rem !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
#packs > [data-pack-id] > div:first-child > span:nth-of-type(2) {
  top: 1rem !important;
  right: 1rem !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center;
  min-height: 1.7rem;
  padding: .35rem .7rem !important;
  border-radius: 999px !important;
  background: var(--catalog-blue) !important;
  color: #ffffff !important;
}
#packs > [data-pack-id] > .p-6 { padding: 1.45rem !important; }
#packs h3 { color: var(--catalog-ink) !important; text-transform: none !important; }
#packs .text-\[\#E20613\] { color: var(--catalog-blue-dark) !important; }
#packs .bg-\[\#E20613\] { background: var(--catalog-blue) !important; color: #ffffff !important; }
#packs .line-through { color: #716c66 !important; }
#packs .text-\[\#E20613\],
#packs .text-\[\#e20613\] { color: #b3050f !important; }
.pack-product-composition {
  position: absolute;
  inset: 3.4rem .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pack-product-composition img {
  position: relative;
  width: 61%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .48));
}
.pack-product-composition img:first-child { z-index: 2; margin-right: -25%; transform: translateX(-3%); }
.pack-product-composition img:last-child { z-index: 1; transform: translateX(3%) scale(.91); opacity: .9; }

/* Equipaciones completas recuperadas. */
.catalog-equipment {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: var(--catalog-ink) !important;
  color: #fff;
}
.catalog-equipment__inner { width: min(88rem, calc(100% - 2rem)); margin: 0 auto; }
.catalog-equipment__heading { max-width: 52rem; margin-bottom: 2.5rem; }
.catalog-equipment__heading > span { color: var(--catalog-blue); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.catalog-equipment__heading h2 { margin: .8rem 0 1rem; max-width: 13ch; color: #fff; font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 650; letter-spacing: -.055em; line-height: .98; }
.catalog-equipment__heading p { max-width: 45rem; color: rgba(255, 255, 255, .62); line-height: 1.65; }
.catalog-equipment__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.equipment-card { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); min-height: 34rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.75rem; background: rgba(255, 255, 255, .04); }
.equipment-card__media { min-width: 0; overflow: hidden; background: #171615; }
.equipment-card__media img { width: 100%; height: 100%; object-fit: cover; }
.equipment-card__body { display: flex; flex-direction: column; min-width: 0; padding: 1.7rem; }
.equipment-card__number { color: var(--catalog-blue); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.equipment-card h3 { margin: auto 0 .75rem; color: #fff; font-size: clamp(1.7rem, 2.5vw, 2.5rem); font-weight: 650; letter-spacing: -.035em; line-height: 1; }
.equipment-card p { color: rgba(255, 255, 255, .6); font-size: .88rem; line-height: 1.55; }
.equipment-card__price { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: .15rem .7rem; margin: 1.2rem 0; }
.equipment-card__price s { color: #b9b5b1; font-size: .8rem; }
.equipment-card__price strong { grid-row: 1 / span 2; grid-column: 2; color: #fff; font-size: 2rem; line-height: 1; text-align: right; }
.equipment-card__price span { color: var(--catalog-blue); font-size: .72rem; font-weight: 700; }
.equipment-card button { min-height: 3.2rem; padding: .8rem 1rem; border: 1px solid var(--catalog-blue); border-radius: 999px; background: var(--catalog-blue); color: #ffffff; font-weight: 700; }

/* Telas: información suficiente, sin paneles anidados ni estética técnica vieja. */
#telas {
  padding: clamp(4.5rem, 8vw, 7rem) 0 !important;
  background: var(--catalog-paper) !important;
  border: 0 !important;
}
#telas > div { max-width: 88rem !important; }
#telas h2 {
  color: var(--catalog-ink) !important;
  font-size: clamp(2.3rem, 4.5vw, 4.6rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.05em !important;
  line-height: 1 !important;
  text-transform: none !important;
}
#telas .fabric-tab {
  min-height: 3rem;
  padding: .7rem 1rem !important;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 999px !important;
  color: #5c5854 !important;
  background: #fff !important;
  font-size: .78rem !important;
  text-transform: none !important;
}
#telas .fabric-tab.active { border-color: var(--catalog-ink) !important; background: var(--catalog-ink) !important; color: #fff !important; }
#telas .flex.justify-center.border-b { gap: .55rem !important; border: 0 !important; }
#telas .fabric-content > div > div,
#telas .fabric-content > div.max-w-4xl,
#telas .fabric-content > div.max-w-3xl {
  border: 1px solid var(--catalog-line) !important;
  border-radius: 1.5rem !important;
  background: #fff !important;
  box-shadow: 0 16px 50px rgba(16, 16, 15, .07) !important;
}
#telas .fabric-content .grid.grid-cols-2.gap-4.text-xs { display: none !important; }
#telas .fabric-photo { border: 0 !important; border-radius: 1rem !important; background: #f2f1f0 !important; box-shadow: none !important; }
#telas .fabric-photo > div { display: none !important; }
#telas .fabric-cta { border-color: var(--catalog-ink) !important; border-radius: 999px !important; background: var(--catalog-ink) !important; color: #fff !important; box-shadow: none !important; text-transform: none !important; }
#telas .fabric-cta:hover { border-color: var(--catalog-blue) !important; background: var(--catalog-blue) !important; color: #ffffff !important; }
.fabric-variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.35rem; }
.fabric-variant-grid > div { position: relative; display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: 1rem; border: 1px solid var(--catalog-line); border-radius: 1rem; background: #f9f8f8; }
.fabric-variant-grid strong { color: var(--catalog-ink); }
.fabric-variant-grid span { color: #67625e; font-size: .76rem; }
.fabric-variant-grid em { margin-top: .35rem; color: var(--catalog-blue-dark); font-size: .65rem; font-style: normal; font-weight: 700; }
.fabric-variant-grid .is-recommended { border-color: rgba(226, 6, 19, .65); background: rgba(226, 6, 19, .08); }
#telas .text-\[\#E20613\] { color: var(--catalog-blue-dark) !important; }
#telas .bg-\[\#E20613\] { background: var(--catalog-blue) !important; color: #ffffff !important; }

/* Cotizador y cierre: superficies sólidas, controles legibles. */
#cotizador-express { padding: clamp(4.5rem, 8vw, 7rem) 1rem !important; background: #fff !important; }
#cotizador-box { max-width: 68rem !important; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.75rem !important; background: var(--catalog-ink) !important; background-image: none !important; }
#cotizador-box::before,
#cotizador-box::after { display: none !important; }
#cotizador-box h2 { font-weight: 650 !important; letter-spacing: -.045em !important; text-transform: none !important; }
.wizard-primary { border-color: var(--catalog-blue) !important; background: var(--catalog-blue) !important; color: #ffffff !important; }

#cuidados-prenda {
  padding: 3rem 1rem !important;
  background: #100f0e !important;
}
#cuidados-prenda > div { max-width: 72rem !important; }
#cuidados-prenda .grid { gap: .65rem !important; }
#cuidados-prenda .grid > div {
  min-height: 0 !important;
  padding: 1rem !important;
  display: grid !important;
  grid-template-columns: 2.8rem 1fr;
  grid-template-rows: auto auto auto;
  gap: .15rem .7rem;
  text-align: left !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
}
#cuidados-prenda .grid > div > div:first-child { grid-row: 1 / span 3; width: 2.8rem !important; height: 2.8rem !important; margin: 0 !important; border-radius: .8rem !important; }
#cuidados-prenda .grid > div > span,
#cuidados-prenda .grid > div > h3,
#cuidados-prenda .grid > div > p { grid-column: 2; }
#cuidados-prenda .material-symbols-outlined { font-size: 1.25rem !important; }

#contacto { padding: clamp(4.5rem, 8vw, 7rem) 0 !important; background: var(--catalog-paper) !important; }
#contacto > div { max-width: 76rem !important; gap: clamp(2rem, 6vw, 5rem) !important; align-items: start !important; }
/* 2-oct · D2: el panel «Tu cotización» también es `#contacto`, así que esta regla de la antigua
   sección de contacto (con id e `!important`) le imponía al título del panel un
   `clamp(2.4rem, 4.5vw, 4.5rem)` que se comía la primera pantalla. Se excluye al panel en vez
   de pelear por la cascada: el título del panel se gobierna desde catalogo-un-camino.css. */
#contacto:not(.cotiza-panel) h2 { color: var(--catalog-ink) !important; font-size: clamp(2.4rem, 4.5vw, 4.5rem) !important; font-weight: 650 !important; letter-spacing: -.05em !important; line-height: 1 !important; text-transform: none !important; }
#contacto > div > div:first-child a { padding: .55rem 0 !important; margin: 0 !important; border-bottom: 1px solid var(--catalog-line); border-radius: 0 !important; }
#contacto > div > div:first-child a > div:first-child { width: 2.25rem !important; height: 2.25rem !important; border: 0 !important; background: transparent !important; color: var(--catalog-ink) !important; box-shadow: none !important; }
#contacto .material-symbols-outlined { width: auto !important; height: auto !important; font-size: 1.05rem !important; line-height: 1 !important; }
#form-cotizador { padding: clamp(1.25rem, 4vw, 2.2rem) !important; border: 1px solid var(--catalog-line) !important; border-radius: 1.5rem !important; box-shadow: 0 22px 70px rgba(16, 16, 15, .1) !important; }
#form-cotizador button[type="submit"] { min-height: 3.4rem; border-radius: 999px !important; background: var(--catalog-ink) !important; background-image: none !important; text-transform: none !important; letter-spacing: 0 !important; }
#form-cotizador button[type="submit"]:hover { background: var(--catalog-blue) !important; color: #ffffff !important; }

/* El catálogo no hereda texturas ni estados ocultos de antiguas escenas de cine. */
#caminos .grid > a:last-child { background: rgba(255, 255, 255, .045) !important; background-image: none !important; }
body[data-ens-page="catalog"] :is(#caminos, #catalogo, #promociones, #equipaciones, #telas, #cotizador-express, #contacto) :is(.ens-motion-target, [data-reveal]) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}
body[data-ens-page="catalog"] :is(#caminos, #catalogo, #promociones, #equipaciones, #telas, #cotizador-express, #contacto) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}
body[data-ens-page="catalog"] :is(#caminos, #catalogo, #promociones, #equipaciones, #telas, #cotizador-express, #contacto) .wp-word {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
#anim-scroll-progress { background: var(--catalog-blue) !important; }
#catalogo .text-zinc-400 { color: #716c66 !important; }
body[data-ens-page="catalog"] .border-red-200 { color: #b3050f !important; }
#promociones .border-red-200 { color: #b3050f !important; }
#packs .material-symbols-outlined { color: var(--catalog-blue) !important; }
.catalog-price-source { display: none !important; }
body[data-ens-page="catalog"] .ensutex-consent__actions button[data-consent="all"],
/* 2026-09-25 · El CTA del chat no se pinta desde el catálogo. Esta regla
   pisaba el acento del chat con el turquesa del catálogo, así que la misma
   píldora salía de un color en el home y de otro en el catálogo — la deriva
   que el dueño lee como "el azulito". El acento del chat tiene una sola
   fuente: `--asu-sky` (chat-conversational.css), que ya es el rojo de marca.
   Acá solo se conserva lo que sí es del catálogo: el !important que gana. */
body[data-ens-page="catalog"] .ens-chat-option--primary {
  border-color: var(--asu-sky) !important;
  background: var(--asu-sky) !important;
  color: #ffffff !important;
}

/* Los iconos informativos son apoyos, nunca el contenido dominante. */
#form-cotizador p { display: flex; align-items: flex-start; gap: .45rem; }
#form-cotizador .material-symbols-outlined,
#form-cotizador .material-symbols-outlined svg {
  flex: 0 0 1.05rem !important;
  width: 1.05rem !important;
  min-width: 1.05rem !important;
  height: 1.05rem !important;
  min-height: 1.05rem !important;
  max-width: 1.05rem !important;
  max-height: 1.05rem !important;
  margin-top: .15rem !important;
}

@media (max-width: 1180px) {
  #cat-grid[data-catalog-carousel] > [data-product-id] { flex-basis: calc(50% - .5rem) !important; width: calc(50% - .5rem) !important; }
  #packs > [data-pack-id],
  .equipment-card { grid-template-columns: 1fr; }
  #packs > [data-pack-id] > div:first-child { min-height: 22rem; }
  .equipment-card__media { min-height: 25rem; }
  .equipment-card h3 { margin-top: 2rem; }
}

@media (max-width: 1023px) {
  .catalog-page-hero { min-height: 48rem !important; }
  .catalog-page-hero .ens-hero-scrim { background: linear-gradient(0deg, #000 5%, rgba(0, 0, 0, .88) 43%, rgba(0, 0, 0, .08) 82%) !important; }
  .catalog-page-hero__layout { min-height: calc(48rem - 4rem); grid-template-columns: 1fr !important; align-items: end !important; padding-bottom: 3rem !important; }
  .catalog-page-hero__copy { grid-column: 1; max-width: 39rem !important; }
  .catalog-page-hero__copy h1 { font-size: clamp(2.8rem, 8vw, 4.6rem) !important; }
  .catalog-toolbar { grid-template-columns: 1fr !important; }
  .catalog-toolbar .catalog-search,
  .catalog-toolbar__filters { grid-column: 1 !important; }
  #packs,
  .catalog-equipment__grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  .catalog-page-hero { min-height: 45rem !important; padding-top: 4rem !important; }
  .catalog-page-hero .ens-hero-video {
    inset: 4rem 0 auto !important;
    height: calc(100% - 4rem) !important;
    object-position: 32% center !important;
  }
  /* OJO: el padding lateral de este layout NO tiene efecto en celular. `ux-refresh.css`
     pone `display: contents !important` sobre `.catalog-page-hero__layout` y sobre
     `.catalog-page-hero__copy` en `@media (max-width: 767px)`: sin caja no hay padding, y el
     canto de la bajada lo fija el padding de la SECCIÓN (ux-refresh.css, 「Catálogo móvil:
     H1, video y luego contenido/decisión」). 29-sep: subir este valor de 1rem a 1.5rem aquí
     no movió ni un píxel — se midió y seguía en 16. El valor vive allí, no acá. */
  .catalog-page-hero__layout { min-height: calc(45rem - 4rem); padding: 2rem 1rem 2.4rem !important; }
  .catalog-page-hero__copy h1 { max-width: 11ch; margin-bottom: 1rem !important; font-size: clamp(2.65rem, 12vw, 3.65rem) !important; }
  .catalog-page-hero__copy p { font-size: .95rem !important; }
  .catalog-hero-badge { margin-bottom: 1rem !important; font-size: .62rem !important; }
  .catalog-page-hero__copy .cta-flow { display: grid !important; grid-template-columns: 1fr 1fr; }
  .catalog-hero-primary,
  .catalog-hero-secondary { min-width: 0 !important; padding-inline: .75rem !important; font-size: .76rem !important; }

  #caminos { padding: 3.5rem 0 !important; }
  #caminos .grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem; }
  #caminos .grid > a { flex: 0 0 84%; min-height: 17rem; scroll-snap-align: center; }

  #catalogo { padding: 3.8rem 0 !important; }
  #catalogo > div > .mb-14 { grid-template-columns: 1fr !important; gap: .7rem; }
  #catalogo > div > .mb-14 > div:last-child { display: none !important; }
  .catalog-toolbar { padding: .65rem !important; }
  #catalogo .catalog-toolbar__filters #cat-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    padding: .15rem 0 .45rem !important;
  }
  #catalogo .catalog-toolbar__filters #cat-tabs .cat-tab { scroll-snap-align: start; }
  .catalog-carousel__toolbar { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem !important; }
  #cat-grid[data-catalog-carousel] { min-height: 0 !important; padding-inline: .75rem !important; scroll-padding-left: .75rem !important; }
  #cat-grid[data-catalog-carousel] > [data-product-id] {
    flex: 0 0 calc(100% - 2rem) !important;
    width: calc(100% - 2rem) !important;
    min-width: calc(100% - 2rem) !important;
    min-height: 0 !important;
    scroll-snap-align: center !important;
  }
  #cat-grid .catalog-product-stage { min-height: 21rem !important; }
  #cat-grid h3 + p { min-height: 0; }
  .catalog-size-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-size-prices > span { font-size: .64rem; }

  #promociones { padding: 3.8rem 0 !important; }
  #packs { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 .1rem .8rem; }
  #packs > [data-pack-id] { flex: 0 0 88%; min-height: 0; scroll-snap-align: center; }
  #packs > [data-pack-id] > div:first-child { min-height: 20rem; }

  .catalog-equipment { padding: 3.8rem 0; }
  .catalog-equipment__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .equipment-card { flex: 0 0 91%; min-height: 0; scroll-snap-align: center; }
  .equipment-card__media { min-height: 23rem; }

  #telas { padding: 3.8rem 0 !important; }
  #telas .flex.justify-center.border-b { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; }
  #telas .fabric-content > div > div,
  #telas .fabric-content > div.max-w-4xl,
  #telas .fabric-content > div.max-w-3xl { padding: 1.1rem !important; }
  .fabric-variant-grid { grid-template-columns: 1fr; }

  #cotizador-box { padding: 2.4rem 1rem !important; }
  #cuidados-prenda { display: block !important; }
  #contacto > div { grid-template-columns: 1fr !important; }
  #form-cotizador { padding: 1.1rem !important; }
}

/* 2026-07-18 · Ajustes de lectura, formulario y texturas en mobile. */
#form-cotizador p {
  display: block !important;
}

#form-cotizador .quote-form-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

#form-cotizador .quote-form-benefit {
  display: grid !important;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: .55rem !important;
  align-items: start !important;
  margin: 0 !important;
  padding: .85rem;
  border: 1px solid rgba(226, 6, 19, .2);
  border-radius: 1rem;
  background: rgba(226, 6, 19, .055);
}

#form-cotizador .quote-form-benefit .material-symbols-outlined {
  color: #e20613 !important;
}

#telas .fabric-photo {
  cursor: zoom-in !important;
}

#telas .fabric-photo .fabric-img,
#telas .fabric-polerones-grid img {
  object-position: center center !important;
}

@media (max-width: 767px) {
  .catalog-page-hero {
    min-height: 41.5rem !important;
  }

  .catalog-page-hero__layout {
    min-height: calc(41.5rem - 4rem) !important;
    padding-top: clamp(13.2rem, 57vw, 16.25rem) !important;
    padding-bottom: 1.65rem !important;
  }

  .catalog-page-hero .ens-hero-video {
    height: clamp(13rem, 56vw, 16rem) !important;
  }

  .catalog-page-hero__copy h1 {
    font-size: clamp(2.45rem, 10.8vw, 3.15rem) !important;
  }

  .catalog-page-hero__copy p {
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
  }

  #telas .flex.justify-center.border-b {
    gap: .45rem !important;
    margin-inline: -.25rem !important;
    padding: .15rem .25rem .65rem !important;
    scroll-padding-left: .25rem;
  }

  #telas .fabric-tab {
    flex: 0 0 auto !important;
    max-width: 9.25rem !important;
    min-height: 3.35rem !important;
    padding: .65rem .9rem !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  #telas .fabric-content > div > div,
  #telas .fabric-content > div.max-w-4xl,
  #telas .fabric-content > div.max-w-3xl {
    padding: 1rem !important;
  }

  #telas .fabric-photo {
    width: min(100%, 19rem) !important;
    margin-inline: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  #form-cotizador {
    gap: 1rem !important;
    padding: 1rem !important;
    border-radius: 1.15rem !important;
  }

  #form-cotizador h3 {
    margin: 0 !important;
    font-size: 1.35rem !important;
    line-height: 1.12 !important;
    text-transform: none !important;
  }

  #form-cotizador .quote-form-intro {
    color: #5e5a56 !important;
    font-size: .86rem !important;
    line-height: 1.55 !important;
  }

  #form-cotizador .quote-form-benefits {
    grid-template-columns: 1fr !important;
  }

  #form-cotizador .quote-form-benefit {
    font-size: .77rem !important;
    line-height: 1.48 !important;
  }

  #form-cotizador input:not([type="checkbox"]) {
    min-height: 3.2rem !important;
    border-radius: .85rem !important;
    background: #f9f8f8 !important;
  }

  #form-cotizador > label {
    padding: .85rem !important;
    border-radius: .9rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ens-home-nav.ens-scroll-nav,
  #cat-grid .catalog-product-visual { transition: none !important; }
}

/* 2026-07-16 — un solo carril filtrable. Las familias cambian el contenido de
   la misma línea sin repetir secciones ni fijar una altura que corte fichas. */
#catalogo .catalog-category-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}

#catalogo .catalog-category-lane {
  min-width: 0;
  scroll-margin-top: 7rem;
}

#catalogo .catalog-category-lane__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dfdedc;
}

#catalogo .catalog-category-lane__number {
  display: block;
  margin-bottom: .35rem;
  color: #b3050f;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#catalogo .catalog-category-lane__heading h3 {
  margin: 0;
  color: #0d0c0b;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1;
  text-transform: none;
}

#catalogo .catalog-category-lane__heading p {
  max-width: 48rem;
  margin: .55rem 0 0;
  color: #716c66;
  font-size: .9rem;
  line-height: 1.55;
}

#catalogo .catalog-category-lane__controls {
  display: none;
  flex: 0 0 auto;
  gap: .5rem;
}

#catalogo .catalog-category-lane__heading.has-overflow .catalog-category-lane__controls {
  display: flex;
}

#catalogo .catalog-category-lane__controls button {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8d6d3;
  border-radius: 999px;
  background: #fff;
  color: #0f0e0d;
  font-family: system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
}

#catalogo .catalog-category-lane__controls button:disabled {
  opacity: .3;
  cursor: default;
}

#catalogo .catalog-category-track {
  display: flex !important;
  gap: 1.15rem !important;
  align-items: flex-start;
  margin-inline: calc(clamp(1rem, 3vw, 2rem) * -1);
  padding: 0 clamp(1rem, 3vw, 2rem) 1.2rem;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#catalogo .catalog-category-track::-webkit-scrollbar { display: none; }

#catalogo .catalog-category-track .cat-card {
  flex: 0 0 clamp(16.75rem, 24vw, 20rem) !important;
  width: clamp(16.75rem, 24vw, 20rem) !important;
  min-width: clamp(16.75rem, 24vw, 20rem) !important;
  height: auto !important;
  scroll-snap-align: start;
  border: 1px solid #e5e3e2 !important;
  border-radius: 1.35rem !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(30, 28, 26, .07) !important;
  overflow: hidden !important;
}

#catalogo .catalog-category-track .cat-card.is-hidden { display: none !important; }

#catalogo .catalog-product-stage {
  min-height: 15.5rem !important;
  aspect-ratio: 4 / 3 !important;
  padding: 1.5rem 1.5rem 4.55rem !important;
  background: #0e0d0c !important;
  border: 0 !important;
}
#catalogo .catalog-product-stage > .pack-badge { display: none !important; }

#catalogo .catalog-product-stage .catalog-product-visual {
  width: 100% !important;
  height: 100% !important;
  max-height: 13.5rem !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.34)) !important;
}

#catalogo .catalog-product-stage > span:not(.catalog-product-title-badge) {
  top: .85rem !important;
  padding: .35rem .7rem !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  background: rgba(12, 11, 10,.78) !important;
  color: rgba(255,255,255,.8) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

#catalogo .catalog-product-stage > span:not(.catalog-product-title-badge):first-child { left: .85rem !important; }
#catalogo .catalog-product-stage > span:not(.catalog-product-title-badge):nth-child(2):not(:last-child) { right: .85rem !important; }
#catalogo .cat-card h3 { color: #0f0e0d !important; text-transform: none !important; }
#catalogo .catalog-product-title-badge {
  position: absolute;
  z-index: 2;
  right: .85rem;
  bottom: .85rem !important;
  left: .85rem;
  display: flex;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  padding: .55rem .85rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .8rem;
  background: #E20613 !important;
  box-shadow: 0 .7rem 1.5rem rgba(0, 0, 0, .24);
  color: #0e0d0c !important;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: -.015em;
  line-height: 1.1;
  text-align: center;
}
#catalogo .catalog-product-title-badge[data-product-tone="poleras-ml"] { background: #e20613; color: #fff; }
#catalogo .catalog-product-title-badge[data-product-tone="polerones"] { background: #e20613; color: #fff; }
#catalogo .catalog-product-title-badge[data-product-tone="buzos"] { background: #e20613; color: #fff; }
#catalogo .catalog-product-title-badge[data-product-tone="shorts"] { background: #e20613; color: #fff; }
#catalogo .catalog-category-track .cat-card > .p-5 {
  flex-grow: 0 !important;
  justify-content: flex-start !important;
  gap: .8rem;
  padding: 1rem !important;
}
#catalogo .catalog-category-track .cat-card > .p-5 > div:first-child { min-width: 0; }
#catalogo .catalog-category-track .cat-card .catalog-card-description {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
}
#catalogo .catalog-category-track .cat-card .catalog-price-source { display: none !important; }
#catalogo .catalog-category-track .cat-card .mt-4 {
  margin-top: 0 !important;
  padding-top: .8rem !important;
}
#catalogo .catalog-category-track .cat-card .pack-hint { margin-top: .55rem !important; }
#catalogo .catalog-category-track .cat-card .pack-hint--multi { gap: .35rem !important; }
#catalogo .catalog-category-track .cat-card .pack-hint--multi .pack-hint-copy { display: none !important; }
#catalogo .cat-card .line-clamp-1,
#catalogo .cat-card .line-clamp-2 { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; }
#catalogo .cat-card [data-product-btn] { border-radius: 999px !important; background: #0c0b0a !important; }
#catalogo .cat-card [data-product-btn]:hover { background: #E20613 !important; color: #0d0c0c !important; }

#catalogo .catalog-toolbar__filters #cat-tabs {
  display: flex !important;
  width: min(100%, 68rem) !important;
  justify-content: center !important;
  gap: .45rem !important;
  margin: 0 auto 2.5rem !important;
  padding: .35rem !important;
  overflow-x: auto !important;
  border: 1px solid #e5e3e2 !important;
  border-radius: 999px !important;
  background: #fff !important;
}

#catalogo .catalog-toolbar__filters #cat-tabs .cat-tab {
  flex: 0 0 auto !important;
  min-height: 2.65rem !important;
  padding: .6rem 1rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #615c57 !important;
  background: transparent !important;
  font-size: .75rem !important;
  text-transform: none !important;
}

#catalogo .catalog-toolbar__filters #cat-tabs .cat-tab:hover,
#catalogo .catalog-toolbar__filters #cat-tabs .cat-tab.active {
  background: #0c0b0a !important;
  color: #fff !important;
}

/* Packs: la información sale de la fotografía. Las prendas quedan limpias y
   los datos aparecen en una fila estable dentro del cuerpo de cada tarjeta. */
#packs > [data-pack-id] { position: relative; border-radius: 1.4rem !important; }
#packs > [data-pack-id] > div:first-child {
  min-height: 18rem !important;
  aspect-ratio: 4 / 3 !important;
  padding: 1.75rem !important;
  background: #0d0c0b !important;
}
#packs .pack-product-composition {
  width: 100% !important;
  height: 100% !important;
  min-height: 14rem !important;
}
#packs .pack-product-composition img {
  max-width: 58% !important;
  max-height: 15.5rem !important;
  object-fit: contain !important;
}
#packs .pack-product-composition img.pack-applied-visual{width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important;transform:none!important;opacity:1!important;filter:none!important}
#packs .pack-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .9rem;
}
#packs .pack-meta span {
  position: static !important;
  display: inline-flex;
  padding: .35rem .65rem !important;
  border: 1px solid #e3e2e0 !important;
  border-radius: 999px !important;
  background: #f8f7f6 !important;
  color: #3d3a36 !important;
  font-size: .64rem !important;
  box-shadow: none !important;
}
#packs .pack-meta span:last-child { border-color: #87ceeb !important; background: #f4f3f2 !important; color: #e20613 !important; }
#packs [data-pack-id] .material-symbols-outlined { display: none !important; }
#packs h3 { text-transform: none !important; letter-spacing: -.025em !important; }

@media (min-width: 768px) {
  #packs > [data-pack-id] > div:first-child {
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }
}

/* Telas: composición centrada, dos opciones equilibradas y fotografía entera. */
#telas { background: #f7f6f5 !important; }
#telas .fabric-content > div {
  margin-inline: auto !important;
  align-items: stretch !important;
}
#telas #content-poleras > div {
  display: grid !important;
  width: min(100%, 64rem) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}
#telas #content-poleras > div > div {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  padding: 1.35rem !important;
  border: 1px solid #e4e2e1 !important;
  border-radius: 1.35rem !important;
  background: #fff !important;
  box-shadow: 0 20px 55px rgba(30, 28, 26,.07) !important;
}
#telas .fabric-photo {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 1rem !important;
  background: #0e0d0c !important;
}
#telas .fabric-photo .fabric-img {
  width: 100% !important;
  height: 100% !important;
  padding: 1rem !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
}
#telas .fabric-photo > div { display: none !important; }
#telas .fabric-content:not(#content-poleras) > div { width: min(100%, 56rem) !important; }

@media (max-width: 767px) {
  #catalogo .catalog-category-lane { width: 100% !important; }
  #catalogo .catalog-category-lane__heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end !important;
    gap: .8rem !important;
    padding-inline: 1rem !important;
  }
  #catalogo .catalog-category-lane__heading > div:first-child { min-width: 0; }
  #catalogo .catalog-category-lane__heading p { max-width: 28rem; }
  #catalogo .catalog-category-list { gap: 0 !important; }
  #catalogo .catalog-category-lane__heading { align-items: center; }
  #catalogo .catalog-category-lane__heading p { font-size: .82rem; }
  #catalogo .catalog-category-track {
    gap: .85rem !important;
    margin-inline: -1rem;
    padding: 0 1rem 1rem;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #catalogo .catalog-category-track::-webkit-scrollbar { display: none; }
  #catalogo .catalog-category-track .cat-card {
    flex: 0 0 min(84vw, 21rem) !important;
    width: min(84vw, 21rem) !important;
    height: auto !important;
    scroll-snap-align: center;
  }
  #catalogo .catalog-product-stage { min-height: 15.25rem !important; }
  #catalogo .catalog-product-title-badge {
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    min-height: 2.7rem;
    font-size: .8rem;
  }
  #catalogo .catalog-toolbar__filters #cat-tabs { justify-content: flex-start !important; border-radius: 1rem !important; }
  #packs { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; }
  #packs > [data-pack-id] { width: 100% !important; }
  #telas #content-poleras > div { grid-template-columns: 1fr !important; }
  #telas .fabric-content > div { width: 100% !important; }
}

/* Contraste final: gana incluso frente al bundle asíncrono heredado. */
@media (max-width: 1023px) {
  body[data-ens-page="catalog"] .floating-widgets {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body[data-ens-page="catalog"] #chatbot-panel { display: flex !important; }
  body[data-ens-page="catalog"] #chatbot-panel.ens-chat-panel.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}
html body[data-ens-page="catalog"] main#main-content section#caminos .grid > a > p.text-gray-600 {
  color: #d7d5d3 !important;
}
html body[data-ens-page="catalog"] main#main-content section#caminos .grid > a > p.text-zinc-300 {
  color: #d7d5d3 !important;
}
html body[data-ens-page="catalog"] main#main-content section#promociones span.border-red-200 {
  color: #b3050f !important;
}
body[data-ens-page="catalog"] [class*="text-[#E20613]"] { color: #b3050f !important; }
body[data-ens-page="catalog"] [class*="bg-[#E20613]"] {
  background: var(--catalog-blue) !important;
  color: #ffffff !important;
}
body[data-ens-page="catalog"] [class*="bg-red-"] { background-color: rgba(226, 6, 19, .12) !important; }
body[data-ens-page="catalog"] [class*="border-red-"] { border-color: rgba(226, 6, 19, .4) !important; }

/* Visuales educativos: cada imagen explica una elección, no decora el catálogo. */
.catalog-inclusive-visual{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(17rem,.75fr);gap:1.35rem;align-items:stretch;max-width:67rem;margin:0 auto 2.25rem;overflow:hidden;border:1px solid #2b2927;border-radius:1.5rem;background:#0e0e0d;box-shadow:0 24px 65px rgba(13, 12, 12,.16)}
.catalog-inclusive-visual img{width:100%;height:19rem;object-fit:cover;object-position:center 47%}
.catalog-inclusive-visual figcaption{display:grid;align-content:center;gap:.65rem;padding:1.8rem;color:#d2d0cd;font-size:.93rem;line-height:1.55}.catalog-inclusive-visual strong{color:#fff;font-size:clamp(1.45rem,2.7vw,2.25rem);font-weight:700;letter-spacing:-.045em;line-height:1.02}.catalog-inclusive-visual span{max-width:27ch}
.pack-lookbook{position:relative;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(17rem,.68fr);gap:0;max-width:74rem;margin:0 auto 2rem;overflow:hidden;border:1px solid #2c2a27;border-radius:1.65rem;background:#0c0b0a;box-shadow:0 28px 80px rgba(13, 12, 12,.18)}
.pack-lookbook img{width:100%;height:26rem;object-fit:cover;object-position:center}.pack-lookbook figcaption{display:grid;align-content:center;gap:.7rem;padding:clamp(1.5rem,3vw,2.6rem);background:radial-gradient(circle at 0 50%,rgba(226, 6, 19,.16),transparent 52%),#0c0b0a;color:#cbc8c5}.pack-lookbook figcaption span{color:#87ceeb;font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.pack-lookbook figcaption strong{color:#fff;font-size:clamp(1.45rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.045em;line-height:1.02}.pack-lookbook figcaption p{margin:0;font-size:.88rem;line-height:1.55}
.fabric-visual-explainer{position:relative;max-width:64rem;margin:0 auto 1.25rem;overflow:hidden;border:1px solid #2b2927;border-radius:1.4rem;background:#0e0e0d;box-shadow:0 22px 58px rgba(13, 12, 12,.13)}.fabric-visual-explainer img{width:100%;height:18rem;object-fit:cover}.fabric-visual-explainer figcaption{position:absolute;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px)}.fabric-visual-explainer figcaption div{display:grid;gap:.15rem;padding:.8rem 1rem;background:rgba(8, 8, 8,.84);color:#fff}.fabric-visual-explainer figcaption span{color:#87ceeb;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.fabric-visual-explainer figcaption strong{font-size:.82rem;line-height:1.3}
.fabric-visual-explainer--three figcaption{grid-template-columns:repeat(3,minmax(0,1fr))}
#telas .fabric-photo .fabric-img--panal,#telas .fabric-photo .fabric-img--shelsey,#telas .fabric-photo .fabric-img--abrigo,#telas .fabric-photo .fabric-img--kabu{padding:0!important;object-fit:cover!important;filter:none!important}#telas .fabric-photo .fabric-img--panal{object-position:left center!important}#telas .fabric-photo .fabric-img--shelsey{object-position:right center!important}#telas .fabric-photo .fabric-img--abrigo{object-position:center!important}#telas .fabric-photo .fabric-img--kabu{object-position:center!important}
.fabric-touch-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:1.2rem}.fabric-touch-guide article{display:grid;gap:.48rem;padding:1rem;border:1px solid #e3e2e1;border-radius:1rem;background:#f9f8f8;color:#5c5853;font-size:.77rem;line-height:1.45}.fabric-touch-guide article.is-highlighted{border-color:rgba(226, 6, 19,.65);background:rgba(226, 6, 19,.08)}.fabric-touch-guide strong{color:#1a1817;font-size:.9rem}.fabric-touch-guide b{color:#e20613;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:767px){.catalog-inclusive-visual,.pack-lookbook{grid-template-columns:1fr}.catalog-inclusive-visual img{height:17rem}.catalog-inclusive-visual figcaption{padding:1.25rem}.pack-lookbook img{height:17rem}.pack-lookbook figcaption{padding:1.35rem}.fabric-visual-explainer img{height:14.5rem}.fabric-visual-explainer figcaption,.fabric-visual-explainer--three figcaption{position:static;grid-template-columns:1fr}.fabric-touch-guide{grid-template-columns:1fr}.fabric-touch-guide article{grid-template-columns:5.5rem 1fr}.fabric-touch-guide article strong{grid-row:span 2}.fabric-touch-guide article span{min-width:0}}
#packs .pack-product-composition > img.pack-applied-visual,#packs .pack-product-composition > img.pack-applied-visual:first-child,#packs .pack-product-composition > img.pack-applied-visual:last-child{width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important;transform:none!important;opacity:1!important;filter:none!important;margin:0!important}

/* 2026-07-16 · Flujo descendente y visuales sin recortes. */
.catalog-flow-roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;max-width:68rem;margin:0 auto 1.15rem;padding:0;list-style:none}.catalog-flow-roadmap li{display:grid;grid-template-columns:1.75rem 1fr;gap:.55rem;align-items:center;padding:.6rem .85rem;border:1px solid #e3e2e0;border-radius:.85rem;background:#fff;color:#5f5a56;font-size:.78rem;line-height:1.35}.catalog-flow-roadmap b{display:grid;width:1.75rem;height:1.75rem;place-items:center;border-radius:50%;background:#0c0b0a;color:#fff;font-size:.7rem}.catalog-flow-roadmap strong{display:block;color:#1a1817;font-size:.83rem}.catalog-flow-roadmap .roadmap-step--short{display:none}
.pack-fabric-note{max-width:54rem;margin:0 auto 2rem;padding:1rem 1.15rem;border:1px solid rgba(226, 6, 19,.42);border-radius:1rem;background:rgba(226, 6, 19,.08);color:#4d4a46;font-size:.86rem;line-height:1.55;text-align:center}.pack-fabric-note strong{color:#e20613}
#packs .pack-product-composition{inset:3.25rem .65rem .55rem!important}
#packs .pack-product-composition > img.pack-applied-visual,#packs .pack-product-composition > img.pack-applied-visual:first-child,#packs .pack-product-composition > img.pack-applied-visual:last-child{object-fit:contain!important;object-position:center!important}
.catalog-equipment__grid{align-items:start}
.equipment-card{display:flex;min-height:0;flex-direction:column}
.equipment-card__media{width:100%;min-height:0;aspect-ratio:16/10;padding:.45rem;background:#0c0b0a}
.equipment-card__media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:1.2rem}
.equipment-card__body{min-height:20rem}.equipment-card h3{margin:1.75rem 0 .75rem}
.catalog-inclusive-visual img{height:auto;min-height:19rem;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#0c0b0a}
.fabric-pack-rule{margin:1rem 0 0;padding:.8rem .9rem;border-left:3px solid #E20613;border-radius:.55rem;background:#f6f5f4;color:#4d4a46;font-size:.78rem;line-height:1.5}
.fabric-polerones-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.3rem}.fabric-polerones-grid figure{position:relative;margin:0;overflow:hidden;border:1px solid #e1e0de;border-radius:1rem;background:#fafaf9}.fabric-polerones-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.fabric-polerones-grid figcaption{display:grid;gap:.2rem;padding:.72rem .8rem;background:#121110;color:#fff}.fabric-polerones-grid figcaption strong{color:#87ceeb;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}.fabric-polerones-grid figcaption span{color:#dad8d7;font-size:.68rem;line-height:1.35}
#telas .fabric-photo .fabric-img--panal,#telas .fabric-photo .fabric-img--shelsey,#telas .fabric-photo .fabric-img--kabu{object-position:center!important}
@media(max-width:767px){.catalog-flow-roadmap{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.catalog-flow-roadmap li{grid-template-columns:1.25rem 1fr;gap:.3rem;padding:.45rem .5rem;border-radius:.7rem}.catalog-flow-roadmap b{width:1.25rem;height:1.25rem;font-size:.62rem}.catalog-inclusive-visual img{height:auto;min-height:0;aspect-ratio:16/9}.equipment-card__media{min-height:0;aspect-ratio:16/10}.equipment-card__body{min-height:18rem}.fabric-polerones-grid{grid-template-columns:1fr}.fabric-polerones-grid img{aspect-ratio:16/8}}
body[data-ens-page="catalog"] .qc-drawer:not(.qc-open) {
  visibility: hidden;
  pointer-events: none;
}

body[data-ens-page="catalog"] .qc-drawer.qc-open {
  visibility: visible;
}

/* Mobile: el medio se compone como una escena completa, nunca como un recorte. */
@media (max-width: 767px) {
  .catalog-page-hero {
    min-height: 45rem !important;
    background: #000 !important;
  }
  .catalog-page-hero .ens-hero-video {
    inset: 4rem 0 auto !important;
    width: 100% !important;
    height: clamp(14rem, 62vw, 18rem) !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #000 !important;
  }
  .catalog-page-hero .ens-hero-scrim {
    background: linear-gradient(180deg, transparent 4rem, rgba(0, 0, 0, .08) 16rem, #000 23rem, #000 100%) !important;
  }
  .catalog-page-hero__layout {
    align-items: end !important;
    padding-top: clamp(15rem, 66vw, 19rem) !important;
  }
  #catalogo .catalog-product-stage,
  #packs > [data-pack-id],
  #packs > [data-pack-id] > div:first-child { min-width: 0 !important; max-width: 100% !important; }
  #packs > [data-pack-id] > div:first-child {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 11 !important;
    overflow: hidden !important;
  }
  #packs .pack-product-composition {
    inset: 3.25rem .75rem .75rem !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #packs .pack-product-composition > img.pack-applied-visual,
  #catalogo .catalog-product-stage img,
  .equipment-card__media img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .equipment-card__media {
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    background: #0d0c0b !important;
  }
  .pack-lookbook img {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #0d0c0b !important;
  }
}

/* Orden final del hero mobile: imagen compacta y copy más arriba. */
@media (max-width: 767px) {
  .catalog-page-hero {
    min-height: 41.5rem !important;
  }

  .catalog-page-hero .ens-hero-video {
    height: clamp(13rem, 56vw, 16rem) !important;
    object-position: center top !important;
  }

  .catalog-page-hero__layout {
    min-height: calc(41.5rem - 4rem) !important;
    align-items: end !important;
    padding-top: clamp(13.2rem, 57vw, 16.25rem) !important;
    padding-bottom: 1.65rem !important;
  }

  .catalog-page-hero__copy h1 {
    font-size: clamp(2.45rem, 10.8vw, 3.15rem) !important;
  }
}

/* ---------------------------------------------------------------------------
   25-sep · Hero claro del catálogo: texto oscuro y la polera a la derecha, sin
   marco. Selectores dobles + !important porque el hero oscuro anterior dejó
   reglas forzadas más arriba en esta hoja.
   29-sep · El fondo ya no es el blanco del video ni el gris de página #F4F3F1: Carlitos
   pidió un gris MEDIO (ver catalogo-un-camino.css, bloque del héroe). El valor efectivo vive
   allí, en `--cat-heroe-gris`; aquí se repite por la misma variable —con el valor de respaldo,
   que es el mismo— para que esta hoja no siga afirmando un gris claro si alguien reordena las
   cargas. Se cambió en los DOS lugares donde esta hoja pinta el héroe (aquí y en el bloque de
   celular, más abajo): dejarlos distintos era el error que este comentario evita.
   --------------------------------------------------------------------------- */
.catalog-page-hero.catalog-page-hero--claro { background: var(--cat-heroe-gris, #A4A1A6) !important; color: #0d0c0b !important; min-height: 0 !important; padding: calc(var(--ens-nav-h, 4.5rem) + 1.5rem) 0 2.5rem !important; }
.catalog-page-hero--claro .catalog-page-hero__layout { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important; align-items: center !important; gap: 2.5rem !important; min-height: 0 !important; }
.catalog-page-hero--claro .catalog-page-hero__copy { text-align: left !important; }
.catalog-page-hero--claro h1 { color: #0d0c0b !important; text-shadow: none !important; }
/* 29-sep · Sobre el gris medio del héroe la bajada se oscurece: #474440 daba 3,8:1 y no llega a
   AA. #2A2724 mide 5,9:1 y sigue siendo el mismo negro cálido de la casa. */
.catalog-page-hero--claro .catalog-page-hero__copy p { color: #2A2724 !important; text-shadow: none !important; }
/* 29-sep · El rojo de marca como LETRA CHICA sobre el gris del héroe no llega a AA.
   El <strong> de la bajada («Precios a partir de 8 prendas») va a 13,6 px y peso 700,
   o sea letra NORMAL para WCAG, y #E20613 sobre #F4F3F1 mide 4,44:1 — 0,06 bajo el
   mínimo de 4,5. Lo detectó el control de Carlitos, no el ojo: es un rojo de marca
   sobre una superficie clara, el caso más fácil de dejar pasar.
   Se usó #B3050F, el rojo oscuro que el sitio ya aplica para rojo sobre claro
   (marca.css:556, `.pack-fabric-note strong`), donde da 6,43:1.
   29-sep · Sobre el gris MEDIO del héroe #B3050F cae a 2,8:1 —un gris medio no perdona rojo—,
   así que el renglón baja a #6E0710, el rojo más oscuro que todavía se lee como el rojo de la
   casa (4,9:1). El acento de marca no se toca donde es gráfico —el hover del botón principal
   sigue en #E20613 (línea de abajo), y ese es fondo, no texto—. */
.catalog-page-hero--claro .catalog-page-hero__copy p strong { color: #6E0710 !important; }
.catalog-page-hero--claro .catalog-hero-badge { background: #0d0c0b !important; color: #FDFBFF !important; border-color: #0d0c0b !important; }
.catalog-page-hero--claro .catalog-hero-primary { background: #0d0c0b !important; color: #fff !important; border-color: #0d0c0b !important; }
.catalog-page-hero--claro .catalog-hero-primary:hover { background: #E20613 !important; border-color: #E20613 !important; }
.catalog-page-hero--claro .catalog-hero-secondary { background: transparent !important; color: #0d0c0b !important; border: 1.5px solid rgba(13, 12, 11, .25) !important; }
.catalog-page-hero--claro .catalog-hero-secondary:hover { border-color: #0d0c0b !important; }
.catalog-page-hero--claro .cta-ref { color: #5b5e66 !important; }
.catalog-page-hero__media { display: flex; justify-content: center; }
/* 29-sep · El video ya trae el gris del héroe cocido dentro (`v4-giro-gris.*`): no hay multiply
   que neutralizar, y el color propio aquí es el MISMO gris, así que cubre el hueco entre el
   póster y el primer cuadro sin dibujar recuadro. */
.catalog-page-hero__video { display: block; width: 100%; max-width: 30rem; height: auto; max-height: min(72vh, 40rem); aspect-ratio: 834 / 1112; object-fit: contain; background: var(--cat-heroe-gris, #A4A1A6); }
@media (max-width: 1023px) {
  .catalog-page-hero--claro .catalog-page-hero__layout { grid-template-columns: minmax(0, 1fr) !important; gap: 1.25rem !important; }
  .catalog-page-hero--claro .catalog-page-hero__copy { text-align: center !important; }
  .catalog-page-hero__video { max-height: 26rem; }
}

/* ---------------------------------------------------------------------------
   25-sep · Tarjeta del catálogo (Carlitos): la prenda es lo más grande, nada la
   tapa, el precio pesa más que la talla y todo ocupa menos. Sin celeste.
   --------------------------------------------------------------------------- */
#catalogo .catalog-toolbar,
.catalog-toolbar { position: relative !important; top: auto !important; }
#catalogo .catalog-product-stage { aspect-ratio: 1 / 1 !important; min-height: 0 !important; padding: .75rem !important; }
#catalogo .catalog-product-stage .catalog-product-visual { max-height: none !important; }
#catalogo .catalog-product-title-badge,
#catalogo .catalog-product-title-badge[data-product-tone] {
  position: static !important; display: block; min-height: 0; margin: .95rem 1.25rem 0; padding: 0;
  border: 0; border-radius: 0; background: none !important; box-shadow: none;
  color: #0f0e0d !important; font-size: 1.05rem; font-weight: 850; letter-spacing: -.01em; line-height: 1.2; text-align: left;
}
#catalogo .cat-card > .p-5 { padding-top: .35rem !important; }
.catalog-size-prices { gap: .3rem !important; }
.catalog-size-prices > span,
.catalog-size-prices > .is-standard,
.catalog-size-prices > .is-special {
  padding: .4rem .25rem !important; border: 1px solid var(--catalog-line) !important; border-radius: .6rem !important;
  background: #f9f8f8 !important; color: #0f0e0d !important; line-height: 1.15 !important;
}
.catalog-size-prices > .is-standard { border-color: #0f0e0d !important; background: #fff !important; }
.catalog-size-prices > span small { display: block; color: #7b7670; font-size: .6rem; font-weight: 600; letter-spacing: .01em; }
.catalog-size-prices > span strong { display: block; margin-top: .1rem; color: #0f0e0d; font-size: .92rem; font-weight: 850; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .catalog-size-prices { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .catalog-size-prices > span strong { font-size: .82rem; }
  .catalog-size-prices > span small { font-size: .56rem; }
}
/* El hero oscuro mandaba el texto a la columna 2 (.catalog-page-hero__copy { grid-column: 2 }):
   en el claro el texto va a la izquierda y la polera a la derecha, en la misma fila. */
.catalog-page-hero--claro .catalog-page-hero__copy { grid-column: 1 !important; grid-row: 1 !important; color: #0d0c0b !important; }
.catalog-page-hero--claro .catalog-page-hero__media { grid-column: 2; grid-row: 1; }
@media (max-width: 1023px) {
  .catalog-page-hero--claro .catalog-page-hero__copy,
  .catalog-page-hero--claro .catalog-page-hero__media { grid-column: 1 !important; grid-row: auto !important; }
}
/* Sobre el hero claro, el menú necesita su fondo oscuro (el logo es blanco). */
body[data-ens-page="catalog"] .ensutex-site-nav { background: rgba(13, 12, 11, .94) !important; }
/* Celular: ux-refresh.css pinta el hero de negro y el texto claro; en el hero claro manda esto.
   29-sep · el override móvil usa el mismo gris MEDIO que el escritorio (y la misma bajada oscura). */
@media (max-width: 767px) {
  body[data-ens-page="catalog"] .catalog-page-hero.catalog-page-hero--claro { background: var(--cat-heroe-gris, #A4A1A6) !important; }
  body[data-ens-page="catalog"] .catalog-page-hero--claro .catalog-page-hero__copy h1 { color: #0d0c0b !important; }
  body[data-ens-page="catalog"] .catalog-page-hero--claro .catalog-page-hero__copy > p { color: #2A2724 !important; }
  body[data-ens-page="catalog"] .catalog-page-hero--claro .catalog-page-hero__media { grid-row: 2; }
  /* 29-sep · `width: auto` junto al `aspect-ratio: 834/1112` que ya trae la regla base.
     El tope de alto recortaba la altura SIN recortar el ancho: el elemento quedaba 358×352
     (aspecto 1,017) y el video 3:4 se acartonaba dentro, con franjas de 47 px a cada lado. Con el
     ancho derivado del aspecto el elemento mide 264×352 y el contenido lo llena. La prenda se
     pinta del MISMO tamaño que antes: lo único que desaparece son las franjas.
     29-sep · Aquella franja se cerraba además con la máscara lateral, que fundía 0–11 % y 89–100 %
     del elemento para disimular un escalón de 7/255 entre el fondo del video y el del héroe. La
     máscara ya no existe: el video es `v4-giro-gris` y su fondo es exactamente el del héroe, así
     que no hay escalón que disimular. Se conserva el ancho derivado del aspecto porque sigue siendo
     lo correcto (evita acartonar el 3:4 dentro de una caja más ancha). */
  body[data-ens-page="catalog"] .catalog-page-hero--claro .catalog-page-hero__video { max-height: 22rem; width: auto; }
}
/* 25-sep: el título SEO del catálogo baja de tamaño: los modelos quedan más arriba. */
#catalogo h2[data-ty-primary] { font-size: clamp(1.7rem, 3.2vw, 2.6rem) !important; line-height: 1.05 !important; }
/* 25-sep: combos sin tinte celeste; etiquetas de talla en una línea. */
.pack-hint--multi,
#catalogo .catalog-category-track .cat-card .pack-hint--multi { border-color: rgba(15, 14, 13, .12) !important; background: #f9f8f8 !important; }
.catalog-size-prices > span small { white-space: nowrap; }
@media (min-width: 768px) { .catalog-size-prices > span small { font-size: .56rem; letter-spacing: 0; } }
/* 25-sep: los textos celestes que quedaban en el HTML (sobre fondo oscuro) pasan al rojo
   claro de la paleta (#ff3b47, AA sobre negro); el degradado del cuidado, al rojo de marca. */
body[data-ens-page="catalog"] [class*="text-[#e20613]"] { color: #ff3b47 !important; }
body[data-ens-page="catalog"] [class*="from-[#e20613]"] { --tw-gradient-from: rgba(226, 6, 19, .35) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(226, 6, 19, 0) var(--tw-gradient-to-position) !important; }
body[data-ens-page="catalog"] [class*="drop-shadow-[0_4px_12px_rgba(14,165,233"] { filter: drop-shadow(0 4px 12px rgba(226, 6, 19, .5)) !important; }
/* Texto rojo chico sobre las superficies oscuras del catálogo (telas de polerones y buzo,
   equipaciones, rótulos de sección): rojo claro de la paleta para pasar AA. */
.catalog-fabric-prices b,
.catalog-equipment__heading > span,
.equipment-card__number,
.equipment-card__price span,
#caminos .text-center > span { color: #ff3b47 !important; }


/* Source: ux-refresh.css */
/* Ensutex UX refresh · 2026-08-21
   Capa acotada para navegación, catálogo móvil y lectura progresiva de guías. */

/* ---------- Navegación: buscar por prenda + elegir por cantidad ---------- */
.ens-nav-panel {
  width: min(23rem, calc(100vw - 2rem)) !important;
  padding: .8rem !important;
}

.ens-nav-discovery {
  display: grid;
  gap: .75rem;
}

.ens-nav-discovery__group {
  display: grid;
  gap: .55rem;
}

.ens-nav-discovery__group + .ens-nav-discovery__group {
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.ens-nav-discovery__label {
  margin: 0;
  color: #87ceeb;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}

.ens-product-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.85rem;
  gap: .45rem;
}

.ens-product-finder input {
  width: 100%;
  min-width: 0;
  min-height: 2.85rem;
  padding: .72rem .8rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .75rem;
  background: #191816;
  color: #fff;
  font: inherit;
  font-size: .82rem;
}

.ens-product-finder input::placeholder { color: #aaa5a0; }

.ens-product-finder input:focus-visible {
  outline: 3px solid rgba(226, 6, 19, .45);
  outline-offset: 1px;
  border-color: #e20613;
}

.ens-product-finder button {
  display: grid;
  min-width: 2.85rem;
  min-height: 2.85rem;
  place-items: center;
  border: 1px solid #e20613;
  border-radius: .75rem;
  background: #e20613;
  color: #0c0c0b;
  font-size: 1.2rem;
  font-weight: 900;
}

.ens-nav-chips,
.ens-nav-quantity,
.ens-nav-utility {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.ens-nav-utility { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ens-nav-chips a,
.ens-nav-quantity a,
.ens-nav-utility a {
  display: flex !important;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: .55rem .45rem !important;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: .68rem;
  background: #171614;
  color: #edecec !important;
  font-size: .72rem !important;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
}

.ens-nav-quantity a { color: #87ceeb !important; }

.ens-nav-chips a:hover,
.ens-nav-chips a:focus-visible,
.ens-nav-quantity a:hover,
.ens-nav-quantity a:focus-visible,
.ens-nav-utility a:hover,
.ens-nav-utility a:focus-visible {
  border-color: #e20613;
  background: rgba(226, 6, 19, .13);
  color: #fff !important;
}

@media (max-width: 1023px) {
  body.menu-open .floating-widgets {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .ensutex-site-nav #mobileDrawer {
    max-height: calc(100svh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ensutex-site-nav #mobileDrawer > div { gap: .6rem !important; }

  .ensutex-site-nav #mobileDrawer .mobile-catalog-primary {
    min-height: 3.85rem !important;
    padding: .8rem 1rem !important;
  }

  .ensutex-site-nav #mobileDrawer .ens-mobile-discovery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    padding: .8rem !important;
  }

  .ensutex-site-nav #mobileDrawer .ens-mobile-discovery a {
    min-height: 2.85rem !important;
    padding: .55rem .4rem !important;
  }
}

/* ---------- Menú: dos columnas limpias dentro de "Catálogo y precios" ---------- */
.ens-nav-discovery__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.ens-nav-discovery__cols .ens-nav-discovery__group + .ens-nav-discovery__group {
  padding-top: 0;
  border-top: 0;
}

.ens-nav-search {
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ens-nav-discovery__cols .ens-nav-chips,
.ens-nav-discovery__cols .ens-nav-quantity {
  grid-template-columns: minmax(0, 1fr);
}

.ens-nav-discovery__cols .ens-nav-chips a,
.ens-nav-discovery__cols .ens-nav-quantity a {
  justify-content: flex-start;
  text-align: left;
}

/* El buscador del menú vive sólo en escritorio. */
@media (max-width: 1023px) {
  .ens-nav-search {
    display: none !important;
  }

  .ens-nav-discovery__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Menú: «Mi cotización», la utilidad con su contador ---------- */
/* 29-sep (P15): el contador lee el borrador real (ver ux-refresh.js: quoteCount) y
   se ve igual en el panel de escritorio y en el acordeón del celular. Con la
   cotización vacía el número es un 0 apagado: informa sin gritar. */
.ens-nav-quote__link {
  display: flex !important;
  min-height: 2.9rem;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem .75rem !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .68rem;
  background: #171614;
  color: #edecec !important;
  font-size: .78rem !important;
  font-weight: 800;
  line-height: 1.25;
}

.ens-nav-quote__link:hover,
.ens-nav-quote__link:focus-visible {
  border-color: #e20613;
  background: rgba(226, 6, 19, .13);
  color: #fff !important;
}

.ens-nav-quote__contador {
  display: inline-flex;
  min-width: 1.55rem;
  height: 1.55rem;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #e20613;
  color: #fff;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
}

/* El 0 apagado sigue siendo legible: medido el 29-sep en el navegador, el primer
   intento —una pastilla clara sobre el panel blanco— daba 1,68:1 (exige 4,5:1).
   Ahora es una pastilla neutra con tinta oscura, 5,5:1 sobre el panel claro. */
.ens-nav-quote__contador.is-vacio {
  background: #E7E4E0;
  color: #5E5A56;
}

/* ---------- Menú: "Nuestras marcas" ---------- */
.ens-nav-brands-panel {
  width: min(26rem, calc(100vw - 2rem)) !important;
}

/* Los paneles del menú nacen cerrados SIN depender de Tailwind. En la portada
   tailwind-build.css se carga recién cuando el visitante interactúa (o a los
   15 s), y mientras tanto sus clases `invisible opacity-0` no existían: el
   panel de marcas quedaba abierto encima del hero al entrar. Se abre igual con
   el mouse encima o con el foco dentro, como antes. */
.ens-nav-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.group:hover > .ens-nav-panel,
.group:focus-within > .ens-nav-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.ens-nav-brands__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.ens-nav-brand {
  display: grid !important;
  min-width: 0;
  min-height: 4.6rem;
  align-content: start;
  gap: .3rem;
  padding: .7rem .75rem !important;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: .7rem;
  background: #171614;
  color: #edecec !important;
  white-space: normal;
}

.ens-nav-brand strong {
  color: #87ceeb;
  font-size: .82rem;
  letter-spacing: .02em;
  white-space: normal;
}

.ens-nav-brand span {
  color: #d2d0cd;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.32;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}

.ens-nav-brand:hover,
.ens-nav-brand:focus-visible {
  border-color: #e20613;
  background: rgba(226, 6, 19, .13);
  color: #fff !important;
}

/* Las guías y las páginas de producto usan su propia barra: mismo ítem,
   con la forma de píldora oscura que ya tienen. */
.guide-nav__brands {
  position: relative;
  display: inline-flex;
}

.guide-nav__brands-trigger {
  display: inline-flex;
  min-height: 2.45rem;
  align-items: center;
  gap: .35rem;
  padding: .52rem .92rem;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: .75rem;
  font-weight: 550;
  white-space: nowrap;
}

.guide-nav__brands-trigger:hover,
.guide-nav__brands-trigger:focus-visible,
.guide-nav__brands.is-open .guide-nav__brands-trigger {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.guide-nav__chevron {
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.guide-nav__brands-menu {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  z-index: 5;
  display: grid;
  width: min(22rem, calc(100vw - 2rem));
  gap: .3rem;
  padding: .55rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .9rem;
  background: rgba(12, 11, 10, .97);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.3rem);
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 180ms;
}

.guide-nav__brands:hover .guide-nav__brands-menu,
.guide-nav__brands:focus-within .guide-nav__brands-menu,
.guide-nav__brands.is-open .guide-nav__brands-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.guide-nav .guide-nav__brands-menu a {
  display: grid !important;
  min-height: 0;
  align-content: start;
  gap: .2rem;
  padding: .6rem .7rem !important;
  border-radius: .65rem;
  color: #e9e8e7 !important;
  font-size: .84rem;
}

.guide-nav .guide-nav__brands-menu a strong {
  color: #87ceeb;
  font-size: .84rem;
  white-space: normal;
}

.guide-nav .guide-nav__brands-menu a span {
  color: #ceccc9;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}

.guide-nav .guide-nav__brands-menu a:hover,
.guide-nav .guide-nav__brands-menu a:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: #fff !important;
}

.guide-nav .guide-mobile-brands {
  display: grid;
  gap: .2rem;
  margin-top: .35rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.guide-nav .guide-mobile-brands__label {
  padding: 0 .8rem;
  color: #87ceeb;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.guide-nav .guide-mobile-nav .guide-mobile-brands a,
.guide-nav .guide-mobile-nav .guide-mobile-brands a:last-child {
  justify-content: flex-start;
  margin-top: 0;
  background: transparent;
  color: #e9e8e7;
}

/* ---------- Cajón móvil: acordeón de catálogo + tarjetas de marca ---------- */
@keyframes ensDrawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ensutex-site-nav #mobileDrawer:not(.hidden) {
  animation: ensDrawerIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-catalog-accordion {
  display: grid;
  gap: .5rem;
}

.ensutex-site-nav #mobileDrawer .mobile-catalog-primary {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  text-align: left;
}

.mobile-catalog-chevron {
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-catalog-accordion.is-open .mobile-catalog-chevron {
  transform: rotate(-135deg) translateY(-1px);
}

.ensutex-site-nav #mobileDrawer .mobile-catalog-submenu {
  overflow: hidden;
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ensutex-site-nav #mobileDrawer .mobile-catalog-submenu[hidden] {
  display: none !important;
}

.mobile-drawer-label {
  margin: .35rem 0 0;
  padding: 0 .25rem;
  color: #87ceeb;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mobile-brands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.mobile-brand-card {
  display: grid !important;
  min-width: 0;
  min-height: 4.7rem;
  align-content: start;
  gap: .25rem;
  padding: .6rem .65rem !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .7rem;
  background: #151413;
  color: #edecec !important;
  font-size: .82rem !important;
  white-space: normal;
}

.mobile-brand-card strong {
  color: #fff;
  font-size: .84rem;
  font-weight: 850;
  white-space: normal;
}

.mobile-brand-card span {
  color: #c4c0bd;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}

.mobile-brand-card:hover,
.mobile-brand-card:focus-visible {
  border-color: #e20613;
  background: rgba(226, 6, 19, .12);
}

@media (prefers-reduced-motion: reduce) {
  .ensutex-site-nav #mobileDrawer:not(.hidden) {
    animation: none;
  }

  .ensutex-site-nav #mobileDrawer .mobile-catalog-submenu,
  .mobile-catalog-chevron {
    transition: none;
  }
}

/* ---------- Recorrido compartido: la selección acompaña entre páginas ---------- */
.ens-journey-strip {
  position: sticky;
  top: 5rem;
  z-index: 42;
  width: 100%;
  padding: .7rem clamp(.8rem, 3vw, 1.5rem);
  border-bottom: 1px solid rgba(135, 206, 235, .2);
  background: rgba(10, 9, 8, .96);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
}

.ens-journey-strip[hidden] { display: none !important; }

/* La cotización acompaña el recorrido, pero se aparta durante el scroll hacia
   abajo y vuelve al subir. Así no se convierte en una capa fija sobre tablas. */
.ens-journey-strip { transition: opacity 180ms ease, transform 240ms ease; }
html body.ens-scroll-down .ens-journey-strip {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(calc(-100% - 1rem)) !important;
  visibility: hidden !important;
}
html body.ens-scroll-down :is(.qc-summary-bar, #sticky-cta-mobile.is-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
  translate: 0 135% !important;
  visibility: hidden !important;
}
html body.ens-scroll-down :is(.ens-journey-strip, .qc-summary-bar, #sticky-cta-mobile):focus-within {
  opacity: 1 !important;
  pointer-events: auto !important;
  translate: none !important;
  transform: none !important;
  visibility: visible !important;
}

.ens-journey-strip__inner {
  display: flex;
  width: min(100%, 76rem);
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: auto;
}

.ens-journey-strip__copy {
  display: grid;
  min-width: 0;
  gap: .15rem;
  font-family: var(--ens-font-body-family);
}

.ens-journey-strip__eyebrow {
  color: #87ceeb;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.ens-journey-strip__copy strong {
  overflow: hidden;
  font-size: .86rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ens-journey-strip__copy > span:last-child {
  color: #c4c1be;
  font-size: .68rem;
  line-height: 1.3;
}

.ens-journey-strip__action {
  display: inline-flex;
  min-width: max-content;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border: 1px solid #e20613;
  border-radius: 999px;
  background: #e20613;
  color: #0c0c0b;
  font: 850 .75rem/1.2 var(--ens-font-body-family);
  text-decoration: none;
  /* 04-oct · Faltaba: el color saltaba del rojo al celeste de golpe, sin transición (medido: 0 s), y al
     apretarlo no pasaba nada. La tira de pasos está en todas las páginas legales y en la de pedidos. */
  transition: background-color 180ms ease, transform 90ms linear;
}

.ens-journey-strip__action:hover { background: #87ceeb; }
.ens-journey-strip__action:active { transform: scale(.97); }
.ens-journey-strip__action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 560px) {
  .ens-journey-strip { top: 5rem; padding: .6rem .75rem; }
  .ens-journey-strip__inner { gap: .65rem; }
  .ens-journey-strip__eyebrow { display: none; }
  .ens-journey-strip__copy strong { max-width: 55vw; font-size: .76rem; }
  .ens-journey-strip__action { min-height: 2.75rem; padding-inline: .78rem; font-size: .69rem; }
}

/* ---------- Catálogo: jerarquía de telas y galerías táctiles ---------- */
.ens-fabric-decision-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  width: min(100%, 58rem);
  margin: 0 auto 1.5rem;
}

.ens-fabric-decision-guide > div {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid #e0dedc;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .72);
  color: #5c5853;
  font-size: .74rem;
  line-height: 1.4;
}

.ens-fabric-decision-guide strong { color: #1a1817; font-size: .8rem; }

#telas .ens-fabric-choice-card > .mb-6 { margin-bottom: .8rem !important; }
#telas .ens-fabric-short {
  margin: .65rem 0 0;
  padding: .75rem .85rem;
  border-inline-start: 3px solid #e20613;
  border-radius: .65rem;
  background: #f6f5f4;
  color: #423e3a;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
}

.ens-fabric-details {
  width: 100%;
  margin-top: .85rem;
  overflow: clip;
  border: 1px solid #e0dedc;
  border-radius: 1rem;
  background: #fff;
}

.ens-fabric-details > summary {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .9rem;
  cursor: pointer;
  color: #1a1817;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.35;
  list-style: none;
}

.ens-fabric-details > summary::-webkit-details-marker { display: none; }
.ens-fabric-details > summary::after {
  content: "+";
  display: grid;
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: #e1f0f7;
  color: #e20613;
  font-size: 1rem;
}
.ens-fabric-details[open] > summary::after { content: "−"; }
.ens-fabric-details__body { display: grid; gap: .8rem; padding: 0 .9rem .9rem; }
.ens-fabric-details__body > p { margin: 0; color: #68635e; font-size: .8rem; line-height: 1.55; }
#telas .fabric-content .ens-fabric-details .grid.grid-cols-2.gap-4.text-xs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 0 !important;
}

#telas .fabric-variant-grid,
#telas .fabric-touch-guide,
#telas .fabric-polerones-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ens-warm-fabric-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .85rem;
}

.ens-warm-fabric-actions button {
  display: grid;
  min-height: 3.25rem;
  gap: .12rem;
  place-content: center;
  padding: .65rem .8rem;
  border: 1px solid #d5d2d0;
  border-radius: .8rem;
  background: #fff;
  color: #2b2826;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.ens-warm-fabric-actions button:hover { border-color: #e20613; transform: translateY(-1px); }
.ens-warm-fabric-actions button:focus-visible { outline: 3px solid #87ceeb; outline-offset: 2px; }
.ens-warm-fabric-actions button[aria-pressed="true"] {
  border-color: #e20613;
  background: #e1f0f7;
  color: #e20613;
  box-shadow: inset 0 0 0 1px #e20613;
}
.ens-warm-fabric-actions button[aria-pressed="true"]::after {
  content: "✓ Elegida";
  color: #e20613;
  font-size: .62rem;
  font-weight: 850;
}
.ens-warm-fabric-actions strong { font-size: .82rem; }
.ens-warm-fabric-actions span { font-size: .7rem; }

.ens-mobile-swipe-hint { display: none; }
.ens-swipe-gallery {
  overscroll-behavior-inline: contain;
  scroll-padding-inline: .5rem;
}

@media (max-width: 767px) {
  body[data-ens-page="catalog"] #caminos,
  body[data-ens-page="catalog"] #catalogo,
  body[data-ens-page="catalog"] #promociones,
  body[data-ens-page="catalog"] .catalog-equipment,
  body[data-ens-page="catalog"] #telas,
  body[data-ens-page="catalog"] #cotizador-express {
    padding-block: 2.75rem !important;
  }

  body[data-ens-page="catalog"] #caminos .text-center,
  body[data-ens-page="catalog"] #catalogo .mb-14,
  body[data-ens-page="catalog"] #telas > div > .text-center {
    margin-bottom: 1.5rem !important;
  }

  body[data-ens-page="catalog"] #catalogo .catalog-intro { margin-bottom: 1.5rem !important; }
  body[data-ens-page="catalog"] #telas > div > .flex.justify-center.border-b { margin-bottom: 1.25rem !important; }
  body[data-ens-page="catalog"] #telas .mt-16 { margin-top: 1.75rem !important; padding: 1rem !important; }

  .ens-fabric-decision-guide {
    grid-template-columns: 1fr;
    gap: .45rem;
    margin-bottom: 1rem;
  }

  .ens-fabric-decision-guide > div {
    grid-template-columns: minmax(6.6rem, .8fr) minmax(0, 1.2fr);
    align-items: center;
    padding: .65rem .75rem;
  }

  #telas .ens-fabric-choice-card { padding: .9rem !important; }
  #telas .ens-fabric-choice-card h3 { font-size: 1.25rem !important; }
  #telas .ens-fabric-short { padding: .65rem .75rem; font-size: .76rem; }
  #telas .ens-fabric-details { margin-top: .65rem; }
  #telas .ens-fabric-details__body { padding: 0 .7rem .7rem; }
  #telas .fabric-content .ens-fabric-details .grid.grid-cols-2.gap-4.text-xs {
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    padding: .7rem !important;
  }

  #telas .fabric-variant-grid,
  #telas .fabric-touch-guide { grid-template-columns: 1fr !important; }

  .ens-warm-fabric-actions { gap: .45rem; }
  .ens-warm-fabric-actions button { min-height: 3rem; padding-inline: .45rem; }

  .ens-mobile-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: .15rem 0 .55rem;
    color: #6e6863;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.3;
  }

  .ens-mobile-swipe-hint::before,
  .ens-mobile-swipe-hint::after { content: "↔"; color: #e20613; }

  /* La pista vive en fondos claros y oscuros. Sobre el bloque negro de
     equipaciones (#080807) el gris daba 3.56:1; ahí se aclara al blanco
     translúcido que ya usa ese bloque para su texto secundario. No cambia
     tamaño, texto ni la versión clara. */
  .catalog-equipment .ens-mobile-swipe-hint { color: rgba(255, 255, 255, .72); }

  #packs.ens-swipe-gallery,
  .catalog-equipment__grid.ens-swipe-gallery,
  #telas #content-poleras > .ens-swipe-gallery {
    display: flex !important;
    grid-template-columns: none !important;
    gap: .75rem !important;
    margin-inline: -.15rem;
    padding: .1rem .15rem .8rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #packs.ens-swipe-gallery > [data-pack-id],
  .catalog-equipment__grid.ens-swipe-gallery > .equipment-card,
  #telas #content-poleras > .ens-swipe-gallery > div {
    flex: 0 0 88% !important;
    width: 88% !important;
    min-width: 0 !important;
    scroll-snap-align: center;
  }

  #telas .fabric-polerones-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: .7rem;
    overflow-x: auto;
    padding: .1rem .1rem .7rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  #telas .fabric-polerones-grid figure {
    flex: 0 0 84%;
    scroll-snap-align: center;
  }

  #telas .fabric-polerones-grid img { aspect-ratio: 4 / 3 !important; }
}

/* ---------- Catálogo móvil: H1, video y luego contenido/decisión ---------- */
@media (max-width: 767px) {
  body[data-ens-page="catalog"] .catalog-page-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    min-height: 0 !important;
    /* 29-sep · El canto del hero en celular: 1rem → 1.5rem (16 → 24 px). Aquí y no en
       `.catalog-page-hero__layout`, que queda en `display: contents` (abajo) y por eso su
       padding no hace nada: este es el único valor que fija el margen lateral del hero.
       Motivo: el criterio E03 del ecosistema pide «margen lateral ≥ 24 px en celular» para
       el copy del hero, y la bajada era la ÚNICA pieza pegada al canto — insignia 54/69,
       h1 50/56 y CTA 64/79 px, cada uno por su propio ancho, y la bajada a 16. Medido en
       360 y 390 antes y después. */
    padding: 5.25rem 1.5rem 2rem !important;
    /* 29-sep · Aquí vivía un `background: #000 !important` que contradecía la decisión
       vigente: el hero del catálogo es GRIS desde el 29-sep (Carlitos: «reemplazar el blanco
       por un gris medio semejante al fondo del video»). No se cambió por criterio: se midió
       que la línea estaba MUERTA en los nueve anchos del rango y del borde (360, 390, 414,
       480, 540, 640, 700, 767 y 768): el fondo computado salía `rgba(0,0,0,0)` en todos y el
       píxel pintado sobre el hero, `#f4f3f1` en todos. El gris lo pone
       `catalogo-un-camino.css` con `html body .catalog-page-hero.catalog-page-hero--claro.cat-heroe`
       —especificidad (0,3,2) con `!important`—, que le gana a esta regla (0,2,1). O sea: el
       negro no se veía y esta hoja sólo dejaba escrito lo contrario de lo que pasa. Si algún
       día se borra el gradiente de allá, el hero NO debe volver a negro: el fondo correcto es
       `--mk-bg` (#F4F3F1, marca.css), el mismo del body y de la sección de abajo. */
  }

  body[data-ens-page="catalog"] .catalog-page-hero__layout,
  body[data-ens-page="catalog"] .catalog-page-hero__copy {
    display: contents !important;
  }

  body[data-ens-page="catalog"] .catalog-page-hero__copy h1 {
    position: relative;
    z-index: 2;
    grid-row: 1;
    max-width: 12ch;
    margin: .35rem auto .15rem !important;
    color: #fff;
    font-size: clamp(2.55rem, 12vw, 3.45rem) !important;
    line-height: .92 !important;
    text-align: center;
    text-wrap: balance;
  }

  body[data-ens-page="catalog"] .catalog-page-hero .ens-hero-video {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    grid-row: 2;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(135, 206, 235, .14);
    border-radius: 1rem;
    object-fit: cover !important;
    object-position: center !important;
    background: #080807 !important;
  }

  body[data-ens-page="catalog"] .catalog-page-hero .ens-hero-scrim { display: none !important; }

  body[data-ens-page="catalog"] .catalog-hero-badge {
    position: relative;
    z-index: 2;
    grid-row: 3;
    justify-self: center;
    margin: 0 !important;
  }

  body[data-ens-page="catalog"] .catalog-page-hero__copy > p {
    position: relative;
    z-index: 2;
    grid-row: 4;
    max-width: 34rem;
    margin: 0 auto;
    color: #e0dedc;
    line-height: 1.55;
    text-align: center;
  }

  body[data-ens-page="catalog"] .catalog-page-hero .cta-flow {
    position: relative;
    z-index: 2;
    grid-row: 5;
    display: grid !important;
    width: 100%;
    max-width: 34rem;
    margin: .15rem auto 0 !important;
  }

  /* El globo proactivo cubría H2 y CTA; el botón circular de ayuda se conserva. */
  body #chatbot-cta.ens-chat-prompt.chatbot-cta-fixed { display: none !important; }
}

/* Estado perceptible mientras se prepara la siguiente foto del carrusel. */
#catalogo .catalog-product-stage.is-media-loading {
  background: linear-gradient(110deg, #0e0e0d 20%, #22201e 42%, #0e0e0d 64%);
  background-size: 220% 100%;
  animation: ens-catalog-media-loading 1.1s linear infinite;
}

#catalogo .catalog-product-stage.is-media-error::after {
  content: "Imagen temporalmente no disponible";
  position: absolute;
  inset: auto 1rem 1rem;
  z-index: 2;
  color: #e4e3e2;
  font-size: .72rem;
  font-weight: 750;
  text-align: center;
}

@keyframes ens-catalog-media-loading { to { background-position: -220% 0; } }

/* ---------- Guías: lectura progresiva ---------- */
.guide-deep-dive,
.guide-size-table {
  margin: 1.2rem 0 0;
  overflow: clip;
  border: 1px solid var(--guide-line, #e3e2e1);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 16px 44px rgba(30, 28, 26, .05);
}

.guide-deep-dive > summary,
.guide-size-table > summary {
  display: flex;
  min-height: 3.7rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.05rem;
  cursor: pointer;
  color: #1a1817;
  font-size: .88rem;
  font-weight: 800;
  list-style: none;
}

.guide-deep-dive > summary::-webkit-details-marker,
.guide-size-table > summary::-webkit-details-marker { display: none; }

.guide-deep-dive > summary::after,
.guide-size-table > summary::after {
  content: "+";
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: #e1f0f7;
  color: #e20613;
  font-size: 1.2rem;
}

.guide-deep-dive[open] > summary::after,
.guide-size-table[open] > summary::after { content: "−"; }

.guide-deep-dive__body { padding: 0 1rem 1rem; }
.guide-deep-dive__body > :first-child { margin-top: 0; }
.guide-size-table .guide-table-wrap { border: 0; border-top: 1px solid var(--guide-line, #e3e2e1); border-radius: 0; box-shadow: none; }

.guide-section--dark .guide-deep-dive {
  border-color: #33302d;
  background: #131210;
  box-shadow: none;
}

.guide-section--dark .guide-deep-dive > summary { color: #fff; }
.guide-section--dark .guide-deep-dive > summary::after { background: rgba(226, 6, 19, .14); color: #87ceeb; }

@media (max-width: 680px) {
  .guide-section { padding: 2.75rem 0; }
  .guide-heading { margin-bottom: 1.25rem; }
  .guide-heading h2 { font-size: clamp(2rem, 10.5vw, 3rem); }
  .guide-answer { margin-bottom: 1rem; }
  .guide-deep-dive__body { padding: 0 .65rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  #catalogo .catalog-product-stage.is-media-loading { animation: none; }
}

/* ---------- Guía de tallas: una decisión por lámina ---------- */
body[data-ens-page="guide-sizing"] .guide-story-steps li a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  color: inherit;
}

/* El enlace es la pieza interactiva completa; evita heredar la grilla de li previa. */
body[data-ens-page="guide-sizing"] .guide-story-steps li { display: block; }

body[data-ens-page="guide-sizing"] .guide-story-steps li a:hover,
body[data-ens-page="guide-sizing"] .guide-story-steps li a:focus-visible {
  color: #fff;
}

body[data-ens-page="guide-sizing"] .guide-story-steps li a:focus-visible,
body[data-ens-page="guide-sizing"] .guide-table-picker button:focus-visible,
body[data-ens-page="guide-sizing"] .guide-next a:focus-visible,
body[data-ens-page="guide-sizing"] .guide-measure-card summary:focus-visible {
  outline: 3px solid #87ceeb;
  outline-offset: 3px;
}

body[data-ens-page="guide-sizing"] .guide-story-steps li span {
  display: block;
  margin-top: .15rem;
  color: #bdbab6;
  font-size: .76rem;
  line-height: 1.45;
}

body[data-ens-page="guide-sizing"] .guide-measure-card > summary {
  display: none;
}

body[data-ens-page="guide-sizing"] .guide-table-picker {
  display: grid;
  gap: .7rem;
  margin: 0 0 1.1rem;
  padding: 1.1rem;
  border: 1px solid #87ceeb;
  border-radius: 1.15rem;
  background: #f5f4f3;
}

body[data-ens-page="guide-sizing"] .guide-table-picker > span {
  color: #494642;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-ens-page="guide-sizing"] .guide-table-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

body[data-ens-page="guide-sizing"] .guide-table-picker button {
  min-height: 2.8rem;
  padding: .65rem 1rem;
  border: 1px solid #87ceeb;
  border-radius: 999px;
  background: #fff;
  color: #282623;
  font-size: .82rem;
  font-weight: 800;
}

body[data-ens-page="guide-sizing"] .guide-table-picker button[aria-pressed="true"] {
  border-color: #e20613;
  background: #e20613;
  color: #fff;
}

body[data-ens-page="guide-sizing"] .guide-table-picker p {
  margin: 0;
  color: #5c5854;
  font-size: .84rem;
  line-height: 1.5;
}

body[data-ens-page="guide-sizing"] .guide-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--guide-line, #e3e2e1);
}

body[data-ens-page="guide-sizing"] .guide-next > span {
  color: #76706a;
  font-size: .84rem;
}

body[data-ens-page="guide-sizing"] .guide-next a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: #0c0b0a;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}

body[data-ens-page="guide-sizing"] .guide-next--dark { border-color: #34322f; }
body[data-ens-page="guide-sizing"] .guide-next--dark > span { color: #bdbab6; }
body[data-ens-page="guide-sizing"] .guide-next--dark a { background: #e20613; color: #0d0c0b; }
body[data-ens-page="guide-sizing"] .guide-slice-hint { display: none; }

/* ---------- Guía de diseño: relato corto, profundidad a demanda ---------- */
body[data-ens-page="guide-design"] .guide-design-steps li { display: block; }
body[data-ens-page="guide-design"] .guide-design-steps li a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  color: inherit;
}
body[data-ens-page="guide-design"] .guide-design-steps li a:hover,
body[data-ens-page="guide-design"] .guide-design-steps li a:focus-visible { color: #fff; }
body[data-ens-page="guide-design"] .guide-design-steps li span {
  display: block;
  margin-top: .15rem;
  color: #bdbab6;
  font-size: .76rem;
  line-height: 1.45;
}
body[data-ens-page="guide-design"] .guide-design-slice-hint { display: none; }
body[data-ens-page="guide-design"] .guide-design-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--guide-line, #e3e2e1);
}
body[data-ens-page="guide-design"] .guide-design-next > span {
  color: #76706a;
  font-size: .84rem;
}
body[data-ens-page="guide-design"] .guide-design-next a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: #0c0b0a;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}
body[data-ens-page="guide-design"] .guide-design-next--dark { border-color: #34322f; }
body[data-ens-page="guide-design"] .guide-design-next--dark > span { color: #bdbab6; }
body[data-ens-page="guide-design"] .guide-design-next--dark a { background: #e20613; color: #0d0c0b; }
body[data-ens-page="guide-design"] .guide-design-distribution {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
body[data-ens-page="guide-design"] .guide-design-distribution article {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--guide-line, #e3e2e1);
  border-top: 2px solid #e20613;
  border-radius: 0 0 1rem 1rem;
  background: #fff;
}
body[data-ens-page="guide-design"] .guide-design-distribution b {
  color: #e20613;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
body[data-ens-page="guide-design"] .guide-design-distribution h3 {
  margin: .65rem 0 .35rem;
  font-size: 1.1rem;
  letter-spacing: -.035em;
}
body[data-ens-page="guide-design"] .guide-design-distribution p {
  margin: 0;
  color: #6b6661;
  font-size: .84rem;
  line-height: 1.55;
}
body[data-ens-page="guide-design"] .guide-design-steps li a:focus-visible,
body[data-ens-page="guide-design"] .guide-design-next a:focus-visible {
  outline: 3px solid #87ceeb;
  outline-offset: 3px;
}

@media (max-width: 680px) {
  body[data-ens-page="guide-sizing"] .guide-story-steps h2 { max-width: 11ch; }
  body[data-ens-page="guide-sizing"] .guide-story-steps ol { gap: .35rem; }
  body[data-ens-page="guide-sizing"] .guide-story-steps li { padding-block: .28rem; }
  body[data-ens-page="guide-sizing"] .guide-story-steps li a { gap: .6rem; }
  body[data-ens-page="guide-sizing"] .guide-story-steps li a b { width: 1.75rem; height: 1.75rem; }
  body[data-ens-page="guide-sizing"] .guide-story-steps li span { font-size: .7rem; }

  body[data-ens-page="guide-sizing"] .guide-measure-grid { gap: .75rem; }
  body[data-ens-page="guide-sizing"] .guide-measure-card { border-radius: 1.2rem; }
  body[data-ens-page="guide-sizing"] .guide-measure-card > summary {
    display: grid;
    min-height: 5.5rem;
    grid-template-columns: 1fr auto;
    column-gap: .7rem;
    align-content: center;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
  }
  body[data-ens-page="guide-sizing"] .guide-measure-card > summary::-webkit-details-marker { display: none; }
  body[data-ens-page="guide-sizing"] .guide-measure-card > summary span {
    grid-column: 1;
    color: #87ceeb;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  body[data-ens-page="guide-sizing"] .guide-measure-card > summary strong {
    grid-column: 1;
    margin-top: .18rem;
    font-size: 1.35rem;
    letter-spacing: -.04em;
  }
  body[data-ens-page="guide-sizing"] .guide-measure-card > summary small {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    padding: .48rem .62rem;
    border: 1px solid rgba(135, 206, 235, .45);
    border-radius: 999px;
    color: #e1f0f7;
    font-size: .63rem;
    font-weight: 800;
  }
  body[data-ens-page="guide-sizing"] .guide-measure-card[open] > summary small { font-size: 0; }
  body[data-ens-page="guide-sizing"] .guide-measure-card[open] > summary small::after { content: "Ocultar"; font-size: .63rem; }
  body[data-ens-page="guide-sizing"] .guide-measure-card figure { height: 20rem; }
  body[data-ens-page="guide-sizing"] .guide-measure-card--hips figure { height: 19rem; }
  body[data-ens-page="guide-sizing"] .guide-measure-card > div { padding: 1rem; }
  body[data-ens-page="guide-sizing"] .guide-measure-card > div .guide-card__number,
  body[data-ens-page="guide-sizing"] .guide-measure-card > div h3 { display: none; }
  body[data-ens-page="guide-sizing"] .guide-measure-card ul { margin-top: 0; }

  body[data-ens-page="guide-sizing"] .guide-table-picker { padding: 1rem; }
  body[data-ens-page="guide-sizing"] .guide-table-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); }
  body[data-ens-page="guide-sizing"] .guide-table-picker button { min-width: 0; padding-inline: .45rem; }

  body[data-ens-page="guide-sizing"] .guide-slice-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .8rem;
    color: #b3aeaa;
    font-size: .78rem;
  }
  body[data-ens-page="guide-sizing"] .guide-slice-hint::before { content: "↔"; color: #87ceeb; font-size: 1.05rem; }
  body[data-ens-page="guide-sizing"] .guide-process {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding: 0 .1rem .75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body[data-ens-page="guide-sizing"] .guide-process::-webkit-scrollbar { display: none; }
  body[data-ens-page="guide-sizing"] .guide-process article {
    flex: 0 0 81%;
    min-height: 9.5rem;
    scroll-snap-align: start;
  }
  body[data-ens-page="guide-sizing"] .guide-next { align-items: flex-start; flex-direction: column; gap: .7rem; }
  body[data-ens-page="guide-sizing"] .guide-next a { width: 100%; justify-content: center; }

  body[data-ens-page="guide-design"] .guide-design-steps h2 { max-width: 12ch; }
  body[data-ens-page="guide-design"] .guide-design-steps ol { gap: .35rem; }
  body[data-ens-page="guide-design"] .guide-design-steps li { padding-block: .28rem; }
  body[data-ens-page="guide-design"] .guide-design-steps li a { gap: .6rem; }
  body[data-ens-page="guide-design"] .guide-design-steps li a b { width: 1.75rem; height: 1.75rem; }
  body[data-ens-page="guide-design"] .guide-design-steps li span { font-size: .7rem; }
  body[data-ens-page="guide-design"] .guide-design-slice-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .8rem;
    color: #76706a;
    font-size: .78rem;
  }
  body[data-ens-page="guide-design"] .guide-section--dark .guide-design-slice-hint { color: #b3aeaa; }
  body[data-ens-page="guide-design"] .guide-design-slice-hint::before { content: "↔"; color: #e20613; font-size: 1.05rem; }
  body[data-ens-page="guide-design"] .guide-section--dark .guide-design-slice-hint::before { color: #87ceeb; }
  body[data-ens-page="guide-design"] .guide-design-slices,
  body[data-ens-page="guide-design"] .guide-design-process,
  body[data-ens-page="guide-design"] .guide-design-distribution {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding: 0 .1rem .75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body[data-ens-page="guide-design"] .guide-design-slices::-webkit-scrollbar,
  body[data-ens-page="guide-design"] .guide-design-process::-webkit-scrollbar,
  body[data-ens-page="guide-design"] .guide-design-distribution::-webkit-scrollbar { display: none; }
  body[data-ens-page="guide-design"] .guide-design-slices > article,
  body[data-ens-page="guide-design"] .guide-design-process > article,
  body[data-ens-page="guide-design"] .guide-design-distribution > article {
    flex: 0 0 82%;
    min-height: 9.5rem;
    scroll-snap-align: start;
  }
  body[data-ens-page="guide-design"] .guide-design-next {
    align-items: flex-start;
    flex-direction: column;
    gap: .7rem;
  }
  body[data-ens-page="guide-design"] .guide-design-next a { width: 100%; justify-content: center; }
}

/* ---------- Coherencia transversal: tipografía, contención y cabeceras ----------
   Ojo: aquí había una llave de cierre de más. El navegador descartaba por eso
   la regla :root de abajo, --ens-font-ui quedaba vacía y buena parte del texto
   de la portada caía en la letra por defecto del navegador (Times). */
:root { --ens-font-ui: 'Jost', system-ui, -apple-system, sans-serif; }

html { overflow-x: clip; }
body {
  overflow-x: clip;
  font-family: var(--ens-font-ui) !important;
}

button,
input,
select,
textarea { font-family: var(--ens-font-ui) !important; }

:where(h1, h2, h3, h4, p, li, summary, figcaption, .guide-card, .tl-card, .info-box, .toc, .product-landing__card) {
  min-width: 0;
  max-width: 100%;
}

:where(h1, h2, h3, h4, p, li, summary, figcaption, .guide-card, .tl-card, .info-box, .toc) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(img, video, svg, canvas, iframe) { max-inline-size: 100%; }

footer,
footer > *,
footer nav,
footer div { min-width: 0; max-width: 100%; }

footer a { overflow-wrap: break-word; }

/* La cabecera oscura del inicio se vuelve el lenguaje común de las páginas
   que todavía usan la estructura Tailwind antigua (blog y comparativas). */
@media (min-width: 1024px) {
  .ensutex-site-nav.ens-home-nav {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 80 !important;
    padding: .85rem clamp(1rem, 2.2vw, 2.6rem) !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
    font-family: var(--ens-font-ui);
  }

  .ens-home-nav > .max-w-7xl {
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    pointer-events: auto;
  }

  .ens-home-nav .h-20 { height: auto !important; }
  .ensutex-site-nav.ens-home-nav .ensutex-brand-logo {
    width: auto !important;
    height: 2.25rem !important;
    filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, .38));
  }

  .ensutex-site-nav.ens-home-nav .ensutex-brand-text {
    display: inline-flex !important;
    min-height: 2.55rem;
    align-items: center;
    padding: .6rem 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(14, 14, 13, .84);
    color: rgba(255, 255, 255, .76);
    font-size: .6rem;
    font-style: normal;
    font-weight: 650;
    letter-spacing: .145em;
    backdrop-filter: blur(16px) saturate(130%);
  }

  .ens-home-nav .ensutex-nav-menu {
    display: flex !important;
    gap: .15rem !important;
    padding: .25rem !important;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(14, 14, 13, .84);
    box-shadow: 0 14px 42px rgba(0, 0, 0, .2);
    backdrop-filter: blur(16px) saturate(130%);
  }

  .ens-home-nav .ensutex-nav-menu > a,
  .ens-home-nav .ensutex-nav-menu > div > a {
    display: inline-flex;
    min-width: 0;
    min-height: 2.45rem;
    align-items: center;
    padding: .52rem .9rem !important;
    border-radius: 999px;
    color: rgba(255, 255, 255, .76);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
  }

  .ens-home-nav .ensutex-nav-menu > a:hover,
  .ens-home-nav .ensutex-nav-menu > div > a:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
  }

  .ens-home-nav .ensutex-nav-menu > .ensutex-nav-cta {
    border: 1px solid rgba(226, 6, 19, .58);
    background: #0c0b0a;
    color: #fff !important;
    box-shadow: none;
  }
}

/* Correcciones de interacción y densidad · catálogo + guías. */
@media (max-width: 1023px) {
  /* .guide-nav no recibe eventos para no bloquear la página; el desplegable
     sí debe recibirlos. Sin esto el menú se abría, pero sus enlaces quedaban
     inaccesibles bajo la capa de navegación. */
  .guide-nav { isolation: isolate; }
  .guide-nav .guide-mobile-nav {
    z-index: 2;
    pointer-events: auto !important;
  }

  .guide-nav .guide-mobile-nav.is-open { display: grid !important; }

  /* El último enlace es una acción de navegación, no un CTA verde aislado. */
  .guide-nav .guide-mobile-nav a:last-child {
    justify-content: flex-start;
    margin-top: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #fff;
  }
}

/* El bloque previo al producto se mantiene explicativo, pero no compite con
   la exploración del catálogo. */
body[data-ens-page="catalog"] #catalogo {
  padding-block: clamp(2.75rem, 5vw, 4.25rem) !important;
}

body[data-ens-page="catalog"] #catalogo > div > .mb-14 {
  margin-bottom: 1.25rem !important;
  padding-bottom: 1rem !important;
}

body[data-ens-page="catalog"] #catalogo .catalog-intro {
  gap: .75rem;
  margin-bottom: .85rem !important;
  padding: .8rem 1rem !important;
}

body[data-ens-page="catalog"] #catalogo .catalog-intro > .w-12 {
  width: 2.35rem !important;
  height: 2.35rem !important;
}

body[data-ens-page="catalog"] #catalogo .catalog-intro h3 { margin-bottom: .2rem !important; }
body[data-ens-page="catalog"] #catalogo .catalog-intro p { line-height: 1.45; }
body[data-ens-page="catalog"] #catalogo > div > nav.mb-8 { margin-bottom: .75rem !important; }
body[data-ens-page="catalog"] #catalogo > div > nav.mb-8 > p { margin-bottom: .45rem !important; }
body[data-ens-page="catalog"] #catalogo .catalog-toolbar { margin-bottom: 1rem !important; }

@media (max-width: 767px) {
  /* El CTA verde duplicaba la navegación y cubría acciones del catálogo. */
  body[data-ens-page="catalog"] #sticky-cta-mobile { display: none !important; }
  /* 01-oct-2026: la reserva se puso en 0 cuando la barra se apagó. Después
     catalogo.html volvió a encenderla (display:flex + is-visible por JS), y con la
     reserva en 0 la barra de 70px se comía la última línea del copyright: se midió
     el solape (14px de 38px, a 360 y a 390) con el navegador, no se supuso.
     Se devuelve la reserva que el propio catálogo ya declara en catalogo.css, que
     es la que cubre barra + carrito flotante. Esta regla gana la cascada por
     especificidad (body[attr].clase) y por !important, así que el valor de aquí es
     el que manda: por eso el 0 anulaba también los 76/78/120px de los otros bundles. */
  body[data-ens-page="catalog"].has-sticky-cta { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)) !important; }

  /* El bundle anterior ocultaba esta sección mediante el selector adyacente.
     Además desactivaba content-visibility y dejaba un bloque vacío al llegar
     por scroll. */
  body[data-ens-page="catalog"] #cotizador-express,
  body[data-ens-page="catalog"] #cuidados-prenda {
    content-visibility: visible !important;
    contain: none !important;
  }

  body[data-ens-page="catalog"] #cotizador-express {
    padding-block: 2.75rem !important;
  }

  body[data-ens-page="catalog"] #cotizador-box {
    width: min(100% - 1.5rem, 38rem) !important;
    margin-inline: auto !important;
    padding: 1.5rem 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body[data-ens-page="catalog"] #cuidados-prenda {
    display: block !important;
    padding-block: 2.75rem !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body[data-ens-page="catalog"] #cuidados-prenda > div > .grid {
    display: flex !important;
    gap: .75rem !important;
    overflow-x: auto !important;
    padding: 0 .15rem .65rem !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-ens-page="catalog"] #cuidados-prenda > div > .grid::-webkit-scrollbar { display: none; }
  body[data-ens-page="catalog"] #cuidados-prenda > div > .grid > div {
    flex: 0 0 84%;
    padding: 1.15rem !important;
    scroll-snap-align: start;
  }

  body[data-ens-page="catalog"] #catalogo {
    padding-block: 2.5rem !important;
  }

  body[data-ens-page="catalog"] #catalogo > div > .mb-14 {
    margin-bottom: 1rem !important;
    padding-bottom: .8rem !important;
  }

  body[data-ens-page="catalog"] #catalogo .catalog-intro { padding: .75rem !important; }
}

@media (min-width: 1024px) {
  /* En las guías, la barra de accesos aparece justo bajo el hero. El asistente
     queda por encima para no tapar ninguna opción durante ese cruce. */
  body[data-ens-page="guide-design"] .floating-widgets,
  body[data-ens-page="guide-sizing"] .floating-widgets,
  body[data-ens-page="faq"] .floating-widgets {
    bottom: calc(5.75rem + var(--ensutex-consent-offset, 0px)) !important;
  }
}

/* Las guías y landings usan la misma geometría y las mismas etiquetas. */
.guide-nav,
.guide-nav__inner,
.guide-nav__links,
.guide-nav__cta,
.guide-menu,
.guide-mobile-nav { font-family: var(--ens-font-ui); }

.guide-nav__links a,
.guide-nav__cta { white-space: nowrap; }

.guide-menu {
  min-height: 3.25rem;
  align-items: center;
  gap: .6rem;
  padding: .72rem 1rem;
  border-color: rgba(226, 6, 19, .5);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.guide-menu::before {
  content: '';
  width: 1.2rem;
  height: .9rem;
  flex: 0 0 auto;
  background: linear-gradient(#fff 0 0) top / 100% 2px no-repeat,
              linear-gradient(#fff 0 0) center / 100% 2px no-repeat,
              linear-gradient(#fff 0 0) bottom / 100% 2px no-repeat;
}

/* Algunas páginas parten sobre fondo claro: una sombra superior conserva el
   logo blanco legible sin volver a la barra negra de ancho completo. */
.ensutex-fabric-guide .guide-nav,
.blog-editorial-body .ensutex-site-nav.ens-home-nav {
  background: linear-gradient(180deg, rgba(7, 7, 7, .82), rgba(7, 7, 7, 0)) !important;
}

@media (max-width: 1023px) {
  .blog-editorial-body .ens-home-nav button[aria-label*="menú" i],
  .alternativas-retail-page .ens-home-nav button[aria-label*="menú" i] {
    display: inline-flex;
    min-width: 7rem;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border: 1px solid rgba(226, 6, 19, .5);
    border-radius: 1rem;
    background: rgba(12, 11, 10, .9);
  }

}

@media (max-width: 1180px) {
  .guide-nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .guide-nav__links,
  .guide-nav__cta,
  .guide-brand span { display: none; }
  .guide-menu { display: inline-flex; }
}

/* Escala editorial legible: conserva presencia sin que las líneas se monten. */
.guide-hero h1 {
  max-width: 13ch;
  font-size: clamp(2.85rem, 5.35vw, 5.15rem);
  line-height: .96;
  letter-spacing: -.052em;
}

.faq-hub__hero h1 {
  max-width: 13ch !important;
  font-size: clamp(2.75rem, 5.2vw, 5rem) !important;
  line-height: .96 !important;
  letter-spacing: -.05em !important;
}

.privacy-page .page-header h1 {
  font-size: clamp(2.75rem, 5.2vw, 5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.privacy-page .page-header {
  background-image: linear-gradient(105deg, rgba(8, 8, 7, .97), rgba(10, 9, 8, .88)),
                    url('../images/optimized/general/fondodeinicio-1200.webp') !important;
  background-position: center !important;
  background-size: cover !important;
}

.guide-process article { min-width: 0; overflow: hidden; }
.guide-card :where(h3, p, li),
.guide-deep-dive :where(summary, p, li),
.product-landing__card :where(h3, p),
.tl-card :where(h3, p) { overflow-wrap: break-word; }

/* Franja visual reutilizable: dos escenas, deslizable en móvil. */
.ens-experience-strip {
  width: min(1120px, calc(100% - 2rem));
  margin: clamp(2rem, 5vw, 4rem) auto 1rem;
}

.ens-experience-strip__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .7fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.ens-experience-strip__heading h2 {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.ens-experience-strip__heading p { margin: 0; color: #6e6863; line-height: 1.6; }
.ens-experience-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.ens-experience-card {
  position: relative;
  min-width: 0;
  min-height: 22rem;
  margin: 0;
  overflow: hidden;
  border-radius: 1.4rem;
  background: #0c0b0a;
  color: #fff;
  box-shadow: 0 20px 55px rgba(17, 16, 15, .12);
}

.ens-experience-card img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }
.ens-experience-card::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(7, 7, 7, .94)); }
.ens-experience-card figcaption { position: absolute; z-index: 1; right: 1.2rem; bottom: 1.1rem; left: 1.2rem; }
.ens-experience-card figcaption span { display: block; margin-bottom: .35rem; color: #87ceeb; font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ens-experience-card figcaption strong { display: block; font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.08; }

@media (max-width: 767px) {
  .guide-hero h1,
  .faq-hub__hero h1 {
    max-width: 12ch !important;
    font-size: clamp(2.35rem, 10.8vw, 3.3rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
  }

  .privacy-page .page-header h1 {
    font-size: clamp(2.35rem, 11vw, 3.25rem) !important;
    line-height: 1 !important;
  }

  .guide-hero__lead,
  .faq-hub__hero p { font-size: 1rem; line-height: 1.55; }

  .guide-mobile-nav {
    top: 4.45rem;
    max-height: calc(100svh - 5.25rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ens-experience-strip__heading { grid-template-columns: 1fr; }
  .ens-experience-strip__heading h2 { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .ens-experience-rail {
    display: flex;
    gap: .75rem;
    margin-inline: -.15rem;
    padding: .1rem .15rem .8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .ens-experience-card { flex: 0 0 88%; min-height: 20rem; scroll-snap-align: center; }
  .ens-experience-card img { min-height: 20rem; }

  .ens-fabric-cards .grid.grid-cols-1 {
    display: flex !important;
    gap: .75rem !important;
    overflow-x: auto;
    padding: .1rem .1rem .8rem;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .ens-fabric-cards .grid.grid-cols-1 > .tl-card {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }

  footer .flex.flex-wrap { padding-inline: 1rem; }
  footer a { max-width: 100%; white-space: normal !important; }
}

/* ---------- Cierre de coherencia visual ----------
   Una sola geometría de cabecera y contención real en pantallas pequeñas. */
@media (max-width: 1023px) {
  .guide-nav,
  .ensutex-site-nav.ens-home-nav {
    width: 100% !important;
    min-height: 4rem !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(0, 0, 0, .92) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
    backdrop-filter: blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  }

  .guide-nav__inner,
  .ens-home-nav > .max-w-7xl,
  .ens-home-nav > .max-w-7xl > .h-20 {
    width: 100% !important;
    min-height: 4rem !important;
    height: 4rem !important;
    padding-inline: 1rem !important;
  }

  .guide-nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .guide-brand img,
  .ensutex-site-nav.ens-home-nav .ensutex-brand-logo {
    width: auto !important;
    height: 2.1rem !important;
  }
  .guide-brand { min-height: 44px; }

  .ensutex-site-nav.ens-home-nav #mobileMenuBtn,
  .guide-nav .guide-menu,
  .blog-editorial-body .ens-home-nav button[aria-label*="menú" i],
  .alternativas-retail-page .ens-home-nav button[aria-label*="menú" i] {
    display: inline-flex !important;
    width: 5.55rem !important;
    min-width: 5.55rem !important;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    align-items: center;
    justify-content: center;
    gap: .45rem !important;
    padding: .35rem .55rem !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: .375rem !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
  }

  .ensutex-site-nav.ens-home-nav #mobileMenuBtn::after { display: none !important; content: none !important; }
  .ensutex-site-nav.ens-home-nav #mobileMenuBtn .mobile-menu-label,
  .ens-home-nav .mobile-menu-label { display: inline !important; text-transform: none !important; }

  .guide-menu::before {
    width: 1.2rem;
    height: .92rem;
    background: linear-gradient(#fff 0 0) top / 100% 2px no-repeat,
                linear-gradient(#fff 0 0) center / 100% 2px no-repeat,
                linear-gradient(#fff 0 0) bottom / 100% 2px no-repeat;
  }

  .guide-mobile-nav {
    top: 4rem !important;
    right: 0 !important;
    left: 0 !important;
    max-height: calc(100svh - 4rem);
    padding: .75rem 1rem 1rem !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 0 1rem 1rem !important;
    background: rgba(9, 8, 8, .985) !important;
  }

  .ensutex-site-nav #mobileDrawer {
    position: absolute !important;
    inset: 4rem 0 auto !important;
    width: 100% !important;
    max-height: calc(100svh - 4rem) !important;
    background: rgba(9, 8, 8, .985) !important;
  }
}

@media (max-width: 767px) {
  /* Tailwind no generó flex-wrap en el footer de inicio: era la causa del
     ancho de 499 px dentro de una pantalla de 375 px. */
  footer .flex.flex-wrap {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 1.15rem !important;
    row-gap: .35rem !important;
    padding-inline: 1rem !important;
  }

  footer .flex.flex-wrap > a {
    flex: 0 1 auto;
    min-width: 0 !important;
    padding-inline: .2rem !important;
  }

  .guide-section,
  .faq-hub__tools,
  .product-landing__section,
  .ensutex-fabric-guide main > section {
    padding-block: 2.75rem !important;
  }

  .guide-anchor,
  .faq-hub__anchors,
  .product-landing__related,
  .ens-fabric-decision-guide,
  #telas [role="tablist"] {
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .guide-anchor::-webkit-scrollbar,
  .faq-hub__anchors::-webkit-scrollbar,
  .product-landing__related::-webkit-scrollbar,
  .ens-fabric-decision-guide::-webkit-scrollbar,
  #telas [role="tablist"]::-webkit-scrollbar { display: none; }

  .guide-anchor a,
  .faq-hub__anchors a,
  .product-landing__related a { scroll-snap-align: start; }

  .guide-heading,
  .product-landing__heading { margin-bottom: 1.15rem !important; }

  .guide-heading h2,
  .product-landing__heading h2,
  .faq-hub__section h2 {
    font-size: clamp(1.85rem, 8.5vw, 2.55rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
  }

  /* El resumen de telas se hojea; no obliga a bajar por tres bloques antes
     de llegar a la decisión real. */
  .ens-fabric-decision-guide {
    display: flex !important;
    gap: .65rem;
    margin-inline: -.15rem;
    padding: .1rem .15rem .65rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ens-fabric-decision-guide > div {
    display: grid;
    grid-template-columns: 1fr;
    flex: 0 0 78%;
    align-content: center;
    min-height: 4.5rem;
    padding: .75rem .85rem;
    scroll-snap-align: start;
  }

  #telas [role="tablist"] {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    padding: .2rem 0 .35rem !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #telas [role="tab"] {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: .55rem .7rem !important;
    border: 1px solid #d8d6d3 !important;
    border-radius: 999px;
    background: #fff;
    font-size: .76rem !important;
    line-height: 1.2;
    scroll-snap-align: start;
  }

  #telas [role="tab"][aria-selected="true"] {
    border-color: #1a1817 !important;
    background: #1a1817;
    color: #fff !important;
  }

  #telas .fabric-content > .ens-fabric-choice-card,
  #telas .fabric-content > div > .ens-fabric-choice-card {
    border-radius: 1rem !important;
    box-shadow: 0 12px 32px rgba(30, 28, 26, .08) !important;
  }
}

/* El catálogo comparte la tipografía pública de Inicio. Evitamos depender de
   la fuente por defecto del navegador si una hoja diferida tarda en cargar. */
body[data-ens-page="catalog"] {
  --ens-font-ui: 'Jost', system-ui, -apple-system, sans-serif;
  font-family: var(--ens-font-ui) !important;
}

/* El contenido comercial no queda esperando al motor de escritura: enlaces con hash y
   usuarios con JS lento ven título y explicación al instante.
   29-sep: esto valía para TODOS los viewports y sin condición, así que los títulos del
   catálogo no animaban nunca —ni en celular ni en escritorio—, y era una de las causas
   de «las animaciones no avanzan». Ahora es la salida de movimiento reducido, que es lo
   que de verdad debe quedar quieto. Esta hoja la cargan las ocho páginas con [data-ty],
   así que la regla llega a todas; el resto de los casos queda cubierto por el cerrojo
   `ty-js` y el respaldo de 4,5 s, que muestran el texto si el motor no revela. */
@media (prefers-reduced-motion: reduce) {
  html [data-ty] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Catálogo mobile: síntesis con aire intermedio. La explicación orienta sin
   convertirse en una portada nueva antes de los modelos. */
@media (max-width: 767px) {
  #catalogo.ens-catalog-carousel-section {
    padding-block: 3rem !important;
  }

  /* 29-sep · Un solo canto en el celular del catálogo: 24 px, que es lo que pide el
     criterio E03 del ecosistema («margen lateral ≥ 24 px en celular»). Antes esta página
     tenía DOS valores distintos: 20 px en #catalogo (esta regla, en 1.25rem) y los 16 px
     que deja Tailwind (`px-4`) en todo el resto —promociones, telas, cotizador—, y al
     corregir la bajada del hero quedó un tercero de 24 arriba. Medido a 360 px: 20, 16 y 24
     en la misma pantalla.

     El selector de #catalogo va PRIMERO y hay que dejarlo: su ID (100) le gana a la regla
     general de abajo (clases), así que si alguien lo borra por «repetido», los 20 px
     vuelven y el canto se parte otra vez. Se listan los contenedores CENTRADOS
     (`max-w-7xl.mx-auto`) a propósito: los div a sangre de una sección —mosaicos, rieles—
     no llevan esas clases y no deben recibir canto.

     29-sep · El PIE entra por la tercera línea, y entra por una razón medida, no por
     simetría: la bajada «Contigo en tu pasión — Santiago, Chile» es la única pieza que
     quedaba a 16 px en toda la página. No es texto pegado al canto —`marca.css` pinta ese
     `p` como cinta blanca (`.bg-zinc-900 :is(span,p):is(.tracking-…):not(.absolute)`) y su
     texto va centrado, a ~110 px de cualquier borde— pero la cinta tenía 328 px de ancho
     contra los 312 del resto, o sea la única banda más ancha que el canto nuevo.

     Va SÓLO para la página del catálogo (`body[data-ens-page="catalog"]`) a propósito: este
     pie es componente COMPARTIDO por todo el sitio, y la decisión de unificar el canto móvil
     se tomó para esta página, que es la que el encargo pidió cerrar. Las otras páginas
     conservan su canto y no se tocan desde acá. El contenedor es `max-w-3xl.mx-auto` (no
     `max-w-7xl`): por eso el selector general de arriba no lo alcanzaba, y por eso la lista
     lo nombra aparte en vez de aflojar el filtro y arrastrar divs a sangre. */
  body[data-ens-page="catalog"] #catalogo.ens-catalog-carousel-section > div,
  body[data-ens-page="catalog"] main > section:not(.catalog-page-hero) > div.max-w-7xl.mx-auto,
  body[data-ens-page="catalog"] footer > div.max-w-3xl.mx-auto {
    padding-inline: 1.5rem !important;
  }

  #catalogo > div > div:first-child {
    display: block !important;
    margin-bottom: 1.35rem !important;
    padding-bottom: 1.25rem !important;
  }

  #catalogo > div > div:first-child > div:first-child > span {
    margin-bottom: .4rem !important;
    font-size: .62rem !important;
  }

  #catalogo h2 {
    max-width: 12ch;
    margin-bottom: .75rem !important;
    font-size: clamp(2.2rem, 10.5vw, 2.75rem) !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  #catalogo > div > div:first-child p {
    max-width: 38rem;
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }

  #catalogo nav[aria-label="Páginas por tipo de producto"] {
    margin-bottom: 1.25rem !important;
  }

  #catalogo nav[aria-label="Páginas por tipo de producto"] > p {
    margin-bottom: .65rem !important;
  }

  #catalogo nav[aria-label="Páginas por tipo de producto"] > div {
    padding-bottom: .25rem !important;
    scrollbar-width: none;
  }

  #catalogo nav[aria-label="Páginas por tipo de producto"] > div::-webkit-scrollbar {
    display: none;
  }

  #catalogo nav[aria-label="Páginas por tipo de producto"] a {
    min-height: 2.75rem !important;
    padding: .65rem .85rem !important;
    font-size: .78rem !important;
  }

  #catalogo .catalog-toolbar {
    gap: .8rem !important;
    margin-bottom: 1.25rem !important;
    padding: 1rem !important;
  }

  #catalogo .catalog-search {
    margin-bottom: .35rem !important;
  }

  #catalogo .catalog-search__input {
    padding-left: 2.75rem !important;
    border-color: #d2d0ce !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(30, 28, 26, .06) !important;
    text-align: left !important;
  }

  #catalogo .catalog-search__icon {
    width: 1rem;
    height: 1rem;
    display: block;
    border: 2px solid #5e5a56;
    border-radius: 50%;
    font-size: 0;
  }

  #catalogo .catalog-search__icon::after {
    content: '';
    position: absolute;
    right: -.35rem;
    bottom: -.22rem;
    width: .5rem;
    height: 2px;
    border-radius: 999px;
    background: #5e5a56;
    transform: rotate(45deg);
    transform-origin: left center;
  }

  #catalogo .catalog-toolbar__filters {
    min-height: 0 !important;
  }

  /* Los tres pasos, en una sola fila compacta: sin tarjetas altas. */
  #catalogo .catalog-flow-roadmap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .35rem !important;
    margin: .85rem 0 1.15rem !important;
  }

  #catalogo .catalog-flow-roadmap li {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .45rem .5rem !important;
    align-content: center;
    border-radius: .7rem !important;
  }

  #catalogo .catalog-flow-roadmap li b {
    width: 1.25rem !important;
    height: 1.25rem !important;
    font-size: .62rem !important;
  }

  #catalogo .catalog-flow-roadmap li span {
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  #catalogo .catalog-flow-roadmap .roadmap-step--long {
    display: none !important;
  }

  #catalogo .catalog-flow-roadmap .roadmap-step--short {
    display: inline !important;
  }
}

/* ---------- Catálogo: la fila de filtros es la que manda ----------
   Esta capa carga al final, así que aquí queda el acabado definitivo de la
   barra: filtros legibles, fila deslizable con snap y degradado sólo si
   sobra contenido. Se evita el contenedor con forma de píldora para que el
   buscador y los filtros compartan una sola superficie. */
#catalogo .catalog-toolbar__filters #cat-tabs {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  justify-content: safe center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

#catalogo .catalog-toolbar__filters #cat-tabs::-webkit-scrollbar {
  display: none;
}

#catalogo .catalog-toolbar__filters #cat-tabs .cat-tab {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 2.5rem !important;
  align-items: center;
  justify-content: center;
  padding: .5rem .9rem !important;
  font-size: .875rem !important;
  font-weight: 750 !important;
  letter-spacing: .01em !important;
  white-space: nowrap;
  scroll-snap-align: start;
}

@media (max-width: 1023px) {
  #catalogo .catalog-toolbar__filters #cat-tabs .cat-tab {
    min-height: 2.75rem !important;
    padding: .5rem .85rem !important;
  }
}

/* ---------- Catálogo: la barra de decisión ----------
   El bloque anterior que vivía aquí (elegir "uno o pack") desapareció por
   diseño; esta barra se queda con el buscador y las categorías, y viaja
   pegada bajo el menú mientras se recorre #catalogo. */
body[data-ens-page="catalog"] #catalogo .catalog-toolbar {
  position: sticky;
  top: var(--ens-nav-height);
  z-index: 40;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .55rem !important;
  width: 100%;
  max-width: 74rem !important;
  margin: 0 auto 1.5rem !important;
  padding: .7rem .9rem !important;
  border: 1px solid rgba(15, 14, 14, .09) !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 10px 26px rgba(15, 14, 14, .06) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: top 280ms ease, box-shadow 200ms cubic-bezier(.22, 1, .36, 1),
              border-color 200ms cubic-bezier(.22, 1, .36, 1);
}

body.ens-primary-nav-hidden[data-ens-page="catalog"] #catalogo .catalog-toolbar {
  top: 0 !important;
}

body[data-ens-page="catalog"] #catalogo .catalog-toolbar.is-stuck {
  border-color: rgba(15, 14, 14, .16) !important;
  box-shadow: 0 16px 34px rgba(15, 14, 14, .16) !important;
}

body[data-ens-page="catalog"] #catalogo .catalog-toolbar .catalog-search,
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__filters {
  grid-column: 1 / -1 !important;
}

body[data-ens-page="catalog"] #catalogo .catalog-toolbar__filters {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .9rem !important;
  padding: .6rem 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(15, 14, 14, .08) !important;
}

body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts {
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
  margin: 0;
}

body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts a {
  color: #e20613;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts a:hover,
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts a:focus-visible {
  color: #e20613;
}

@media (max-width: 1023px) {
  body[data-ens-page="catalog"] #catalogo .catalog-toolbar {
    margin-bottom: 1.15rem !important;
    padding: .6rem .7rem !important;
    border-radius: .9rem !important;
  }

  body[data-ens-page="catalog"] #catalogo .catalog-toolbar__filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
  }

  body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.1rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(15, 14, 14, .06);
  }
}

/* Revisión 19-sep: el título del acordeón heredaba el estilo del antiguo subtítulo
   (mayúsculas, 10px y espaciado ancho). Queda igual que los demás ítems del cajón. */
.ensutex-site-nav #mobileDrawer .mobile-catalog-accordion .mobile-catalog-primary > span:first-child {
  display: inline !important;
  max-width: none !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-transform: none !important;
}

.mobile-drawer-label { font-size: .75rem; }

/* 25-sep · REBXN "próximamente": visible pero sin clic hasta que tenga modelos. */
.is-pronto { opacity: .62; cursor: default; pointer-events: none; }
.ens-door__cta.is-pronto { background: transparent !important; border: 1px dashed currentColor !important; color: inherit !important; box-shadow: none !important; }


/* Source: cta-ref.css */
/* ============================================================================
   Línea de referencia bajo el CTA principal (ENCARGO-LIBRO-UX.md, regla 2)

   Debajo del botón principal vive una línea corta y verdadera que dice qué gana
   el cliente al apretarlo. No agranda el botón: es texto secundario de al menos
   14 px, con el tono apagado propio de cada superficie.

   El elemento se declara como <span class="cta-ref">…</span> hermano del CTA.
   Como mide el 100% del ancho, en una fila flexible con `flex-wrap: wrap` salta
   sola al renglón siguiente; no necesita trucos.
   ========================================================================== */

.cta-ref {
  display: block;
  width: 100%;
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  color: #555961;
}

/* ---------- Ensutex · home ---------- */

#hero-section .cta-ref {
  /* Blanco neutro: era rgba(228,240,244) — un blanco teñido de cian, o sea
     azul cielo en el chrome del hero. */
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}

#proceso .cta-ref {
  color: rgba(228, 234, 240, .78);
}

#cierre-equipo .cta-ref {
  color: #555961;
  text-align: left;
}

.ens-doors .cta-ref {
  color: rgba(255, 255, 255, .72);
  text-align: left;
  /* Las dos puertas llevan líneas de largo distinto: reservar dos renglones
     en ambas deja los botones parejos al pie de cada puerta. */
  min-height: calc(1.4em * 2);
}

/* ---------- Marcas (ModoFan y REBXN) ---------- */

.b-actions .cta-ref,
.b-builder__nav .cta-ref,
.mf-cta__content .cta-ref,
.rx-join__inner .cta-ref {
  color: var(--b-muted, rgba(245, 245, 245, .74));
  font-size: .875rem;
}

/* La frase del cierre del camino vivo NO vive dentro de .b-actions: es hija
   directa de .cv-estacion__cuerpo (ver «[data-cv] .cv-estacion--cierre > .cta-ref»
   más abajo). Por eso no le llegaba ninguno de los tonos de arriba y caía en el
   color base de la regla .cta-ref —#555961, un gris pensado para tarjeta CLARA—.
   Sobre la tarjeta oscura del camino de ModoFan eso medía 2,62:1, y el control de
   Carlitos lo marcaba como texto que no se lee. Se le da el tono apagado propio de
   la marca, el mismo que ya usan sus hermanas dentro de .b-actions.
   Solo ModoFan: REBXN tiene su propio bloque y no se toca. */
[data-cv-marca="modofan"] .cv-estacion__cuerpo > .cta-ref {
  color: var(--mf-muted, rgba(245, 242, 255, .74));
  -webkit-text-fill-color: var(--mf-muted, rgba(245, 242, 255, .74));
}

/* ---------- Catálogo ---------- */

.cta-flow .cta-ref {
  color: #d4d4d8;
  text-align: left;
}

.catalog-page-hero__copy .cta-ref {
  color: rgba(228, 240, 244, .84);
}

/* ---------- Guías y preguntas ---------- */

.guide-actions .cta-ref {
  color: #cbd1d8;
}

.guide-cta .cta-ref {
  grid-column: 2;
  justify-self: end;
  width: auto;
  max-width: 22rem;
  margin-top: .6rem;
  color: #bdc4cd;
  text-align: right;
}

/* El pie de la guía ya trae su propio aire: la línea no suma otro renglón
   grande. */
.guide-cta {
  row-gap: .4rem;
}

/* ---------------------------------------------------------------------------
   Cierre del camino: la línea vive fuera del contenedor flex del CTA, así no
   altera la geometría del trazo ni la posición de Asu; se recorta el aire que
   separa el botón del contenido siguiente.
   ------------------------------------------------------------------------- */
[data-cv] .cv-estacion--cierre > .cta-ref {
  margin-top: 0;
}

/* Hero del home · celular: la pila de acciones es `column-reverse`; la línea
   entra con orden 0 para quedar justo debajo del CTA (pegado al borde). */
@media (max-width: 767px) {
  #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    padding-bottom: calc(.4rem + env(safe-area-inset-bottom)) !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-actions .cta-ref {
    order: 0 !important;
    margin: .45rem 0 0 !important;
    font-size: .875rem !important;
    text-align: center !important;
    /* Blanco neutro: era rgba(232,244,248) — blanco teñido de cian. */
    color: rgba(255, 255, 255, .88) !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .78) !important;
  }

  .guide-cta .cta-ref {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
}

/* Escritorio · home: la línea ocupa el renglón completo bajo los dos botones. */
@media (min-width: 1024px) {
  #hero-section.ens-motion-hero--video .ens-motion-actions .cta-ref {
    grid-column: 1 / -1;
    order: 3;
    margin-top: .1rem;
    text-align: right;
  }
}


/* Source: image-zoom.css */
:root {
  --ens-zoom-cyan: #e20613;
  --ens-zoom-ink: #080807;
}

.fabric-photo,
.fabric-polerones-grid figure,
.tl-card__media {
  position: relative;
  cursor: zoom-in;
}

.fabric-photo[data-image-zoom]::after,
.fabric-polerones-grid figure[data-image-zoom]::after,
.tl-card__media[data-image-zoom]::after {
  position: absolute;
  right: .7rem;
  top: .7rem;
  z-index: 8;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(135, 206, 235, .58);
  border-radius: 999px;
  background: rgba(8, 8, 7, .82);
  color: #fff;
  content: '+';
  font: 700 1.4rem/1 system-ui, sans-serif;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .24);
}

[data-image-zoom]:focus-visible {
  outline: 3px solid rgba(226, 6, 19, .45);
  outline-offset: 4px;
}

.ens-image-zoom {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: rgba(2, 4, 7, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ens-image-zoom[hidden] { display: none !important; }

.ens-image-zoom__dialog {
  position: relative;
  display: grid;
  width: min(62rem, 100%);
  max-height: calc(100dvh - 2rem);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(135, 206, 235, .34);
  border-radius: 1.4rem;
  background: var(--ens-zoom-ink);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .58);
}

.ens-image-zoom__image {
  display: block;
  width: 100%;
  height: min(72dvh, 46rem);
  object-fit: contain;
  object-position: center;
  background: #0e0d0c;
  touch-action: pinch-zoom;
}

.ens-image-zoom__caption {
  margin: 0;
  padding: .9rem 4.5rem .95rem 1rem;
  color: #e3e1df;
  font: 600 .78rem/1.45 var(--ens-font-body-family);
}

.ens-image-zoom__close {
  position: absolute;
  z-index: 2;
  top: .7rem;
  right: .7rem;
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(8, 8, 7, .88);
  color: #fff;
  font: 400 1.45rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.ens-image-zoom__close:hover,
.ens-image-zoom__close:focus-visible {
  border-color: var(--ens-zoom-cyan);
  color: #87ceeb;
}

body.ens-image-zoom-open { overflow: hidden !important; }

@media (max-width: 640px) {
  .ens-image-zoom { padding-inline: .6rem; }
  .ens-image-zoom__dialog { max-height: calc(100dvh - 1.2rem); border-radius: 1rem; }
  .ens-image-zoom__image { height: min(73dvh, 36rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ens-image-zoom { backdrop-filter: none; -webkit-backdrop-filter: none; }
}