/* 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: #0ea5e9;
  --ok: #16a34a;
  --brand-accent: #0ea5e9;
}

/* 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: #09090b !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: 48rem;
  margin: 0 auto 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(228 228 231);
  border-radius: 0.75rem;
  background: #fff;
}

.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(240 253 244 / 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(240 253 244);
}

.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: #0ea5e9 !important;
      box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.45) !important;
      transform: translateY(-4px) !important;
  }
  .fabric-card-selected {
      border-color: #0055ff !important;
      border-width: 2px !important;
      box-shadow: 0 15px 30px -5px rgba(0, 85, 255, 0.35), 0 8px 15px -6px rgba(0, 85, 255, 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: #3b82f6 !important;
      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.45), 0 8px 10px -6px rgba(59, 130, 246, 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: #0ea5e9 !important;
      box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.45), 0 8px 10px -6px rgba(14, 165, 233, 0.45) !important;
      transform: translateY(-4px) !important;
  }
  .btn-selected-product {
      background-color: #3b82f6 !important;
      color: #ffffff !important;
      border-color: #3b82f6 !important;
  }
  .btn-selected-pack {
      background-color: #0ea5e9 !important;
      color: #ffffff !important;
      border-color: #0ea5e9 !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 ===== */
[data-ty] { opacity: 0; }
 body { font-family: 'Readex Pro', system-ui, sans-serif; letter-spacing: 0; background-color: #FDFBFF; color: #1A1C1E; }
 h1, h2, h3, h4, .font-display { font-family: 'Readex Pro', system-ui, sans-serif; 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(249,250,251,0), rgba(249,250,251,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: 'Readex Pro', system-ui, sans-serif;
 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 */
#sticky-cta-mobile {
  /* El resumen de Cotizador Pro es el único sticky de cotización.
     Evita duplicar dos barras con la misma acción en móvil. */
  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 */
 .cat-tab {
 padding: 0.6rem 1.2rem; font-size: 11px; font-weight: 800;
 text-transform: uppercase; letter-spacing: 0.18em;
 border: 2px solid #e5e5e5; border-radius: 999px;
 background: #fff; color: #555;
 cursor: pointer; transition: all 0.25s ease;
 }
 .cat-tab:hover { border-color: #111; color: #111; }
 .cat-tab.active { background: #111; border-color: #111; color: #fff; }

 .cat-card { transition: opacity 0.4s ease, transform 0.4s ease; }
 .cat-card.is-hidden { display: 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: 'Readex Pro', system-ui, sans-serif !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%, #1b1e24 0%, #0b0b0d 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: #09090b;
  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: #0ea5e9;
  color: #001018;
  outline: 2px solid #0ea5e9;
  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;
  }
}

/* El catálogo móvil usa composición estática: ningún titular queda esperando JS. */
@media (max-width: 767px), (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:#eafff3;
  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;
  }

  .catalog-swipe-hint{
    margin-top:0.75rem;
    margin-bottom:0.75rem;
    padding-bottom:0 !important;
    color:#0369a1 !important;
    font-weight:800 !important;
  }

  .catalog-swipe-hint svg{
    width:14px;
    height:14px;
    stroke-width:2.5;
  }
}

@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. */
.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1rem 1.25rem;
  max-width: 74rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 16px 48px rgba(10, 15, 30, 0.08);
}

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

.catalog-toolbar .catalog-paths {
  align-self: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.catalog-toolbar .catalog-paths p {
  max-width: 18rem;
}

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

.catalog-toolbar__filters #cat-tabs {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding-bottom: 0;
}

.catalog-toolbar__filters > div[aria-label] {
  flex: 0 0 auto;
  margin: 0;
}

#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 .catalog-paths {
    align-items: stretch;
    gap: 0.75rem;
  }

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

  .catalog-toolbar__filters {
    grid-column: auto;
    display: block;
    padding-top: 0.75rem;
  }

  .catalog-toolbar__filters #cat-tabs,
  .catalog-toolbar__filters > div[aria-label] {
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .catalog-toolbar__filters #cat-tabs::-webkit-scrollbar,
  .catalog-toolbar__filters > div[aria-label]::-webkit-scrollbar {
    display: none;
  }

  .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;
  }
}