/* ============================================================================
   Genz × Halloween 2026 — theme-halloween.css
   ----------------------------------------------------------------------------
   Capa visual de temporada ("Genz Tech Night": Halloween elegante, oscuro,
   tecnológico y comercial) para el tema Liquid de genz.com.py.

   - SOLO sobrescribe estilos. No toca lógica, DOM funcional ni medidas de
     contenedores (alturas, paddings, display) salvo lo indicado en la spec.
   - Kill-switch: TODO el archivo está bajo el scope `html.theme-halloween`.
     Quitar esa clase del <html> apaga la campaña completa sin desinstalar nada.
   - Cada override lleva un comentario con el selector/valor original que
     reemplaza (assets/theme-all.css = base, assets/theme-custom.css = custom).
   - Sin dependencias, sin fuentes nuevas, sin imágenes remotas: telarañas y
     grano son SVG inline (data:image/svg+xml) definidos como tokens.
   - Animación continua solo en `opacity` (shimmer de telarañas) y apagada
     bajo prefers-reduced-motion / html.hw-reduced.
   - Las secciones están numeradas igual que la especificación (§2, §4.x, §5.7).
   ========================================================================== */


/* ============================================================================
   §2. Tokens de diseño (el FX CSS los consume con fallbacks)
   ========================================================================== */
html.theme-halloween {
  --hw-black: #0B0B12;
  --hw-graphite: #1A1B23;
  --hw-graphite-2: #23242E;
  --hw-plum: #12101C;
  --hw-violet-deep: #2A1140;
  --hw-violet: #7B2CBF;
  --hw-violet-soft: #B07CE8;
  --hw-orange: #FF7A1A;
  --hw-orange-2: #F39443;
  --hw-ember: #FFB347;
  --hw-blood: #B3122D;
  --hw-blue: #002161;
  --hw-blue-2: #2D59AF;
  --hw-navy-deep: #070C24;
  --hw-paper: #ffffff;
  --hw-paper-2: #ECE7DF;
  --hw-surface: #FFFCF8;
  --hw-line: #E6DED4;
  --hw-ink: #242431;
  --hw-ink-2: #5B5F70;
  --hw-glow-orange: rgba(255, 122, 26, .45);
  --hw-glow-violet: rgba(123, 44, 191, .40);
  --hw-ease: cubic-bezier(.22, .61, .36, 1);
  --hw-z-fx: 7;

  /* Assets SVG (§6): telaraña de esquina (cuadrante 100×100, 7 radios, 6 arcos
     combados, un hilo roto). Versión clara (sobre oscuro) y oscura (sobre claro).
     Grano: feTurbulence desaturado, tile 200px. */
  --hw-web-light: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M0%200L100.0%200.0M0%200L100.0%2026.8M0%200L100.0%2057.7M0%200L100.0%20100.0M0%200L57.7%20100.0M0%200L26.8%20100.0M0%200L0.0%20100.0M16.0%200.0Q14.2%201.9%2015.5%204.1M15.5%204.1Q13.2%205.5%2013.9%208.0M13.9%208.0Q11.3%208.7%2011.3%2011.3M11.3%2011.3Q8.7%2011.3%208.0%2013.9M8.0%2013.9Q5.5%2013.2%204.1%2015.5M4.1%2015.5Q1.9%2014.2%200.0%2016.0M30.0%200.0Q26.5%203.5%2029.0%207.8M29.0%207.8Q24.7%2010.2%2026.0%2015.0M26.0%2015.0Q21.2%2016.3%2021.2%2021.2M21.2%2021.2Q16.3%2021.2%2015.0%2026.0M15.0%2026.0Q10.2%2024.7%207.8%2029.0M7.8%2029.0Q3.5%2026.5%200.0%2030.0M45.0%200.0Q38.0%205.0%2043.5%2011.6M43.5%2011.6Q35.4%2014.7%2039.0%2022.5M39.0%2022.5Q30.4%2023.4%2031.8%2031.8M31.8%2031.8Q23.4%2030.4%2022.5%2039.0M22.5%2039.0Q14.7%2035.4%2011.6%2043.5M11.6%2043.5Q5.0%2038.0%200.0%2045.0M60.0%200.0Q50.7%206.7%2058.0%2015.5M58.0%2015.5Q47.3%2019.6%2052.0%2030.0M52.0%2030.0l2.5%203.5M42.4%2042.4Q31.1%2040.6%2030.0%2052.0M30.0%2052.0Q19.6%2047.3%2015.5%2058.0M15.5%2058.0Q6.7%2050.7%200.0%2060.0M76.0%200.0Q64.2%208.5%2073.4%2019.7M73.4%2019.7Q59.9%2024.8%2065.8%2038.0M65.8%2038.0Q51.4%2039.4%2053.7%2053.7M53.7%2053.7Q39.4%2051.4%2038.0%2065.8M38.0%2065.8Q24.8%2059.9%2019.7%2073.4M19.7%2073.4Q8.5%2064.2%200.0%2076.0M93.0%200.0Q78.6%2010.4%2089.8%2024.1M89.8%2024.1Q73.3%2030.3%2080.5%2046.5M80.5%2046.5Q62.9%2048.3%2065.8%2065.8M65.8%2065.8Q48.3%2062.9%2046.5%2080.5M46.5%2080.5Q30.3%2073.3%2024.1%2089.8M24.1%2089.8Q10.4%2078.6%200.0%2093.0'%20fill='none'%20stroke='%23ffffff'%20stroke-width='.9'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --hw-web-dark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M0%200L100.0%200.0M0%200L100.0%2026.8M0%200L100.0%2057.7M0%200L100.0%20100.0M0%200L57.7%20100.0M0%200L26.8%20100.0M0%200L0.0%20100.0M16.0%200.0Q14.2%201.9%2015.5%204.1M15.5%204.1Q13.2%205.5%2013.9%208.0M13.9%208.0Q11.3%208.7%2011.3%2011.3M11.3%2011.3Q8.7%2011.3%208.0%2013.9M8.0%2013.9Q5.5%2013.2%204.1%2015.5M4.1%2015.5Q1.9%2014.2%200.0%2016.0M30.0%200.0Q26.5%203.5%2029.0%207.8M29.0%207.8Q24.7%2010.2%2026.0%2015.0M26.0%2015.0Q21.2%2016.3%2021.2%2021.2M21.2%2021.2Q16.3%2021.2%2015.0%2026.0M15.0%2026.0Q10.2%2024.7%207.8%2029.0M7.8%2029.0Q3.5%2026.5%200.0%2030.0M45.0%200.0Q38.0%205.0%2043.5%2011.6M43.5%2011.6Q35.4%2014.7%2039.0%2022.5M39.0%2022.5Q30.4%2023.4%2031.8%2031.8M31.8%2031.8Q23.4%2030.4%2022.5%2039.0M22.5%2039.0Q14.7%2035.4%2011.6%2043.5M11.6%2043.5Q5.0%2038.0%200.0%2045.0M60.0%200.0Q50.7%206.7%2058.0%2015.5M58.0%2015.5Q47.3%2019.6%2052.0%2030.0M52.0%2030.0l2.5%203.5M42.4%2042.4Q31.1%2040.6%2030.0%2052.0M30.0%2052.0Q19.6%2047.3%2015.5%2058.0M15.5%2058.0Q6.7%2050.7%200.0%2060.0M76.0%200.0Q64.2%208.5%2073.4%2019.7M73.4%2019.7Q59.9%2024.8%2065.8%2038.0M65.8%2038.0Q51.4%2039.4%2053.7%2053.7M53.7%2053.7Q39.4%2051.4%2038.0%2065.8M38.0%2065.8Q24.8%2059.9%2019.7%2073.4M19.7%2073.4Q8.5%2064.2%200.0%2076.0M93.0%200.0Q78.6%2010.4%2089.8%2024.1M89.8%2024.1Q73.3%2030.3%2080.5%2046.5M80.5%2046.5Q62.9%2048.3%2065.8%2065.8M65.8%2065.8Q48.3%2062.9%2046.5%2080.5M46.5%2080.5Q30.3%2073.3%2024.1%2089.8M24.1%2089.8Q10.4%2078.6%200.0%2093.0'%20fill='none'%20stroke='%232A1140'%20stroke-width='.9'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --hw-noise: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.8'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='.085'/%3E%3C/svg%3E");
}


/* Tokens Haunted Graphite (sistema visual Halloween global). Paleta:
   base #201D2A · superficie #292433 · violeta #42334F · naranja #E98736 ·
   texto #F3E9DF. Las capas del fondo viven en variables para no repetirlas. */
html.theme-halloween {
  --hw-hg-base: #201D2A;
  --hw-hg-surface: #292433;
  --hw-hg-violet: #42334F;
  --hw-hg-orange: #E98736;
  --hw-hg-text: #F3E9DF;
  --hw-hg-text-2: rgba(243, 233, 223, .72);
  --hw-hg-line: rgba(243, 233, 223, .09);
  /* Superficies claras de lectura (contenido comercial sobre el grafito). */
  --hw-hg-card: #FFFCF8;
  --hw-hg-paper: #F4EFE8;
  --hw-hg-card-shadow: 0 0 0 1px rgba(233, 135, 54, .10), 0 18px 44px rgba(6, 4, 10, .42);
  --hw-hg-accent: linear-gradient(90deg, #E98736, #9b5de5 60%, #7B2CBF);
  /* Grano fílmico y manchas de papel envejecido: capas de la textura global,
     también reutilizadas por superficies propias (megamenú, §4.17). */
  --hw-hg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .96 0 0 0 0 .92 0 0 0 0 1 1.6 0 0 0 -.92'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29' opacity='.2'/%3E%3C/svg%3E");
  --hw-hg-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .62 0 0 0 0 .55 0 0 0 0 .72 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29' opacity='.09'/%3E%3C/svg%3E");
  --hw-hg-image:
    var(--hw-hg-grain),
    var(--hw-hg-mottle),
    radial-gradient(38% 70% at 0% 42%, rgba(66, 51, 79, .78), rgba(66, 51, 79, 0) 75%),
    radial-gradient(36% 68% at 100% 62%, rgba(66, 51, 79, .72), rgba(66, 51, 79, 0) 75%),
    radial-gradient(70% 42% at 50% -6%, rgba(176, 124, 232, .12), rgba(176, 124, 232, 0) 70%),
    radial-gradient(44% 30% at 80% 106%, rgba(233, 135, 54, .10), rgba(233, 135, 54, 0) 70%),
    radial-gradient(34% 24% at 14% 102%, rgba(233, 135, 54, .06), rgba(233, 135, 54, 0) 70%),
    radial-gradient(130% 110% at 50% 45%, rgba(12, 10, 17, 0) 55%, rgba(12, 10, 17, .55) 100%),
    linear-gradient(180deg, #232030 0%, #201D2A 48%, #1B1824 100%);
  --hw-hg-size: 180px 180px, 520px 520px, auto, auto, auto, auto, auto, auto, auto;
  --hw-hg-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  /* Capa superior: variaciones de luz ambiental (sin telarañas). */
  --hw-hg-light-image:
    radial-gradient(40% 50% at 12% 28%, rgba(176, 124, 232, .08), rgba(176, 124, 232, 0) 70%),
    radial-gradient(42% 50% at 90% 72%, rgba(233, 135, 54, .055), rgba(233, 135, 54, 0) 70%);
}


/* ============================================================================
   §4.1 Fondo general — Haunted Graphite (sistema global, todas las páginas)
   El fondo de la home es la referencia visual: las mismas capas (degradado
   grafito, niebla violeta lateral, halos lavanda/naranja, viñeta, grano
   fílmico y manchas de papel envejecido) se aplican a todo el sitio desde un
   único lugar (tokens --hw-hg-* en §2). Al navegar entre páginas el fondo no
   cambia de color ni de textura.
   ========================================================================== */

/* Original: html { background-color: #fff }. Base también en el html para el
   overscroll (rebote iOS/Mac). */
html.theme-halloween {
  background-color: var(--hw-hg-base);
}

/* body es position:relative sin z-index → no crea stacking context, así que
   z-index:-1 queda entre el canvas y el contenido. Capas fijas pintadas una
   vez; sin background-attachment (iOS): el pseudo ya es fixed. */
html.theme-halloween body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  background-color: var(--hw-hg-base);
  background-image: var(--hw-hg-image);
  background-size: var(--hw-hg-size);
  background-repeat: var(--hw-hg-repeat);
}

/* Capa de luz ambiental que "respira" (solo opacidad, 16s → compositor). */
html.theme-halloween body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  background-image: var(--hw-hg-light-image);
  background-repeat: no-repeat;
  opacity: .8;
}

@keyframes hw-hg-breathe {
  from { opacity: .62; }
  to   { opacity: 1; }
}

/* Checkout: decoración mínima → luz estática. */
html.theme-halloween:not(.hw-reduced):not(.hw-checkout) body::after {
  animation: hw-hg-breathe 16s ease-in-out infinite alternate;
}

/* Originales: .home-main { background-color: #fff } (los demás main no tienen
   fondo propio; se declaran igual por si un custom futuro lo agrega).
   .checkout-main se deja tal cual (no se fuerza). */
html.theme-halloween .home-main,
html.theme-halloween .search-main,
html.theme-halloween .product-main,
html.theme-halloween .page-main,
html.theme-halloween .account-main,
html.theme-halloween .orders-main,
html.theme-halloween .adresses-main,
html.theme-halloween .notfound-main {
  background-color: transparent;
}

/* Originales: body .loading-main / body .sidenav-overlay_background
   { background-color: rgba(255,255,255,.85) } → overlay oscuro coherente. */
html.theme-halloween body .loading-main,
html.theme-halloween body .sidenav-overlay_background {
  background-color: rgba(11, 11, 18, .55);
}


/* ============================================================================
   §4.2 Header
   ========================================================================== */

/* Original: .header { background-color: #002161; position: relative; z-index: 999 }
   Gradiente marino con paradas en px: cubre top bar (34px) + navbar (89px
   desktop / 75px móvil); lo que queda debajo lo tapa el menú de atajos. */
html.theme-halloween .header {
  background: linear-gradient(180deg, #06153F 0px, #06153F 28px, var(--hw-blue) 72px, #0E1140 124px, #0E1140 100%);
}

/* Original: .header-content .navbar { background-color: #002161; height: 122px }
   (custom: 89px). Solo se vuelve transparente para dejar ver el gradiente;
   la altura no se toca. */
html.theme-halloween .header-content .navbar {
  background-color: transparent;
}

/* Línea inferior de glow naranja→violeta en .header-content (z-index 9 → es
   stacking context; el pseudo a z -1 queda sobre su fondo transparente y bajo
   logo/buscador; el glow se derrama sobre el menú de atajos, que está a z 8). */
html.theme-halloween .header-content::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 122, 26, 0) 0%, rgba(255, 122, 26, .9) 18%, rgba(176, 124, 232, .9) 58%, rgba(255, 122, 26, 0) 100%);
  box-shadow: 0 1px 0 rgba(255, 122, 26, .45), 0 0 18px rgba(255, 122, 26, .35);
}

/* Telarañas del header: .header::before (esquina sup. izq.) y .header::after
   (esquina sup. der.). Viven en el stacking context de .header (z 999) a z -1:
   por encima del gradiente, por debajo del texto del top bar, de
   .header-content (z 9) y del menú de atajos (z 8), que recorta la parte baja.
   Opacidad base .20 (pico del shimmer ≈ .29) para no competir con el texto
   del top bar. */
html.theme-halloween .header::before,
html.theme-halloween .header::after {
  top: 0;
  width: 150px;
  height: 150px;
  z-index: -1;
  background-image: var(--hw-web-light);
  --hw-web-o: .20;
}

html.theme-halloween .header::before {
  left: 0;
}

html.theme-halloween .header::after {
  right: 0;
  transform: scaleX(-1);
}

/* Original: .top-content .navbar { border-bottom: 1px solid #2D59AF } */
html.theme-halloween .top-content .navbar {
  border-bottom-color: rgba(255, 122, 26, .25);
}

/* Original: .top-pages_link { color: #A3C1FB } → lavanda clara (10.7:1 sobre #06153F) */
html.theme-halloween .top-pages_link {
  color: #CFC3F2;
}

html.theme-halloween .top-pages_link:hover,
html.theme-halloween .top-pages_link:focus {
  color: var(--hw-ember);
}

/* Buscador desktop.
   Original: .search-desktop .form-input { background-color: #fff; border: 1px solid #fff;
   border-radius: 10px !important; height: 56px; ... } y :focus { border-color: #009B3A }.
   Se conservan altura, padding y radio (no se pelea con el !important). */
html.theme-halloween .search-desktop .form-input {
  background-color: #FBF8F3;
  border-color: rgba(255, 122, 26, 0);
  transition: border-color .25s var(--hw-ease), box-shadow .25s var(--hw-ease);
}

html.theme-halloween .search-desktop .form-input:focus {
  border-color: var(--hw-orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .22), 0 0 24px rgba(255, 122, 26, .25);
}

/* Original: placeholders { color: #24243133 } → gris legible sobre papel
   (#6B7086 sobre #FBF8F3 = 4.9:1, AA incluso para el placeholder). */
html.theme-halloween .search-desktop .form-input::placeholder {
  color: #6B7086;
}

html.theme-halloween .search-desktop .form-input::-webkit-input-placeholder {
  color: #6B7086;
}

html.theme-halloween .search-desktop .form-input::-moz-placeholder {
  color: #6B7086;
}

/* Icono lupa: el svg del botón usa path[stroke="#3189CA"] → violeta, hover naranja */
html.theme-halloween .search-desktop .btn svg path {
  stroke: var(--hw-violet);
  transition: stroke .2s;
}

html.theme-halloween .search-desktop .btn:hover svg path,
html.theme-halloween .search-desktop .btn:focus svg path {
  stroke: var(--hw-orange);
}

/* Iconos cuenta / carrito: glow naranja solo en hover (sin loop).
   Original: .header-link svg { fill: transparent } (trazo blanco) → no se toca. */
@media (hover: hover) {
  html.theme-halloween .header-link_account .header-link_icon svg,
  html.theme-halloween .header-link_cart svg.icon_cart {
    transition: filter .25s var(--hw-ease);
  }

  html.theme-halloween .header-link_account .header-link_icon:hover svg,
  html.theme-halloween .header-link_cart:hover svg.icon_cart {
    filter: drop-shadow(0 0 6px rgba(255, 122, 26, .7));
  }
}

/* Original: .cart_quantity / .header-link_cart .cart_quantity
   { background-color: #3189CA; color: #fff }. Blanco sobre #FF7A1A da 2.6:1 →
   se usa tinta #1A1B23 (6.6:1). */
html.theme-halloween .cart_quantity,
html.theme-halloween .header-link_cart .cart_quantity {
  background-color: var(--hw-orange);
  color: var(--hw-graphite);
}

/* Menú de atajos.
   Original (custom): .header-shortcut-menu { --shortcut-bg: #ffffff; --shortcut-edge /
   --shortcut-scrollbar: negro translúcido; background: var(--shortcut-bg) }.
   El fondo va por variable para que las sombras del carrusel de categorías se
   fundan con él; sombras y barra en violeta. El "borde inferior" va como
   sombra inset para no sumar 1px de alto. */
html.theme-halloween .header-shortcut-menu {
  --shortcut-bg: #FBF8F3;
  --shortcut-edge: rgba(66, 51, 79, .24);
  --shortcut-scrollbar: rgba(66, 51, 79, .38);
  background: var(--shortcut-bg);
  box-shadow: inset 0 -1px 0 var(--hw-line);
}

/* Telaraña pequeña (48px) en la esquina IZQUIERDA del menú de atajos, a z -1
   (sobre su fondo, bajo los links). A la derecha quedaba detrás del botón rojo
   (container 1320px → gutter de 40px). A la izquierda el primer link
   ('Celulares') empieza en x≈40 y su icono en x≈52: con 48px no se tocan. */
html.theme-halloween .header-shortcut-menu::after {
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  z-index: -1;
  background-image: var(--hw-web-dark);
  --hw-web-o: .26;
}

/* Por debajo de 1400px el gutter se estrecha (icono de 'Celulares' en x≈24–46
   a 375px) y la telaraña chocaría con el icono → solo en pantallas anchas. */
@media (max-width: 1399px) {
  html.theme-halloween .header-shortcut-menu::after {
    display: none;
  }
}

/* Original (custom): .header-shortcut-menu_group__links .header-shortcut-menu_icon { color: #dc4181 } */
html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_icon {
  color: var(--hw-orange);
}

/* Original (custom): .header-shortcut-menu_group__links .header-shortcut-menu_icon--mask
   { background-color: #dc4181; filter: drop-shadow(0.55px 0 0 #dc4181) ×4 } */
html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_icon--mask {
  background-color: var(--hw-orange);
  filter:
    drop-shadow(0.55px 0 0 #FF7A1A) drop-shadow(-0.55px 0 0 #FF7A1A) drop-shadow(0 0.55px 0 #FF7A1A) drop-shadow(0 -0.55px 0 #FF7A1A);
}

/* Links de atajos. Original (custom): .header-shortcut-menu_link { color: #333;
   padding: 6px 2px; transition: opacity .15s ease } hover { color: #002161; opacity: .85 }.
   Subrayado animado con transform (no background-size). */
html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_link {
  position: relative;
}

html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_link::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--hw-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--hw-ease);
  pointer-events: none;
}

html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_link:hover,
html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_link:focus {
  color: var(--hw-violet);
  opacity: 1;
}

html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_link:hover::after,
html.theme-halloween .header-shortcut-menu_group__links .header-shortcut-menu_link:focus::after {
  transform: scaleX(1);
}

/* Botones de atajos (bg inline → no se cambia el color). Original (custom):
   .header-shortcut-menu_item__button .header-shortcut-menu_link { ... } hover { opacity: .92 } */
html.theme-halloween .header-shortcut-menu_item__button .header-shortcut-menu_link {
  transition: opacity .15s ease, transform .2s var(--hw-ease), box-shadow .2s var(--hw-ease);
}

@media (hover: hover) {
  html.theme-halloween .header-shortcut-menu_item__button .header-shortcut-menu_link:hover,
  html.theme-halloween .header-shortcut-menu_item__button .header-shortcut-menu_link:focus {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 20px rgba(255, 122, 26, .35);
    transform: translateY(-1px);
  }
}

/* Línea "arcoíris" (.div-content, bajo el header y sobre el footer).
   Original: #E4CB67, #EB8B44, #DD2C7B, #8F2E7F, #0182DD, #1E52A8 */
html.theme-halloween .div-content .div-content_item:nth-child(1) {
  background-color: #FF7A1A;
}

html.theme-halloween .div-content .div-content_item:nth-child(2) {
  background-color: #F39443;
}

html.theme-halloween .div-content .div-content_item:nth-child(3) {
  background-color: #B3122D;
}

html.theme-halloween .div-content .div-content_item:nth-child(4) {
  background-color: #7B2CBF;
}

html.theme-halloween .div-content .div-content_item:nth-child(5) {
  background-color: #3C1A6E;
}

html.theme-halloween .div-content .div-content_item:nth-child(6) {
  background-color: #0B0B12;
}

/* Badge de temporada bajo el logo, solo desktop ≥1200px. La caja .logo mide lo
   mismo que la imagen y queda centrada en el navbar de 89px → hay ~19px libres
   debajo: el badge (10px) cuelga fuera de la caja (bottom negativo), alineado
   a la derecha, sin tocar la imagen, el buscador (a ~30px) ni la línea de
   glow. `content: 'X' / ''` oculta el texto a lectores de pantalla donde se
   soporta; si no, cae al content anterior. */
@media (min-width: 1200px) {
  html.theme-halloween .header-content .logo.hide-lg {
    position: relative;
  }

  html.theme-halloween .header-content .logo.hide-lg::after {
    content: 'HALLOWEEN';
    content: 'HALLOWEEN' / '';
    position: absolute;
    left: auto;
    right: 0;
    bottom: -13px;
    z-index: 1;
    padding-left: 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
    color: var(--hw-ember);
    text-shadow: 0 0 6px rgba(255, 122, 26, .45);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    background: radial-gradient(circle, var(--hw-orange) 0 1.6px, transparent 2.3px) 0 50% / 5px 5px no-repeat;
  }
}

/* Móvil: navbar de 75px → el gradiente llega antes al tono final */
@media (max-width: 991px) {
  html.theme-halloween .header {
    background: linear-gradient(180deg, #06153F 0px, #06153F 28px, var(--hw-blue) 64px, #0E1140 110px, #0E1140 100%);
  }

  html.theme-halloween .header::before,
  html.theme-halloween .header::after {
    width: 84px;
    height: 84px;
  }
}


/* ============================================================================
   §4.3 Títulos de vitrina
   ========================================================================== */

/* Original: .showcase-title { color: #12114B; font-size: 35px; margin-bottom: 25px }
   El subrayado va posicionado en absoluto (bottom negativo dentro del margin)
   para NO cambiar la altura del título ni mover el contenido. */
html.theme-halloween .showcase-title {
  position: relative;
  color: #1B1838;
}

html.theme-halloween .showcase-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--hw-orange), var(--hw-violet));
  pointer-events: none;
}

html.theme-halloween .showcase-title[style*="center"]::after {
  left: 50%;
  margin-left: -28px;
}

html.theme-halloween .showcase-title[style*="right"]::after {
  left: auto;
  right: 0;
}

/* En producto el título va centrado sin style inline:
   .product-showcase .showcase-title { display: flex; justify-content: center }
   (≥992px) y .product-buy-to-gether .showcase-title { text-align: center }
   → subrayado centrado (56px de ancho → -28px). */
html.theme-halloween .product-showcase .showcase-title::after,
html.theme-halloween .product-buy-to-gether .showcase-title::after {
  left: 50%;
  margin-left: -28px;
}

/* Original: .showcase-model-8 .showcase-title { color: #fff } → se mantiene blanco */
html.theme-halloween .showcase-model-8 .showcase-title {
  color: #fff;
}

html.theme-halloween .showcase-model-8 .showcase-title::after {
  background: linear-gradient(90deg, var(--hw-orange), var(--hw-ember));
}


/* ============================================================================
   §4.4 Banners principales (model-5 / 2 / 13 / 11 / 15 / 4 / 12)
   ========================================================================== */

/* La imagen recibe radio + sombra/glow directamente (el link es display:table
   ajustado a la imagen → no se cambia su display para no alterar el slide). */
html.theme-halloween .showcase-banners_link img.banner-main_img {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(11, 11, 18, .12), 0 0 0 1px rgba(123, 44, 191, .10);
  transition: box-shadow .3s var(--hw-ease);
}

@media (hover: hover) {
  html.theme-halloween .showcase-banners_link:hover img.banner-main_img {
    box-shadow: 0 14px 36px rgba(11, 11, 18, .18), 0 0 0 1px rgba(255, 122, 26, .45), 0 0 24px rgba(255, 122, 26, .18);
  }
}

/* Telaraña pequeña solo en la PRIMERA sección banner de la home.
   .showcase-banners ya es position: relative. Opacidad base .22 → pico del
   shimmer .32, bajo el tope .35 de la regla 0.12 (decoración sobre banners).
   En móvil se oculta: caería sobre la flecha "next" del carrusel. */
html.theme-halloween .home-main > .showcase:first-child .showcase-banners::after {
  top: -6px;
  right: -6px;
  width: 64px;
  height: 64px;
  z-index: 2;
  transform: scaleX(-1);
  background-image: var(--hw-web-dark);
  --hw-web-o: .22;
}

@media (max-width: 991px) {
  html.theme-halloween .home-main > .showcase:first-child .showcase-banners::after {
    display: none;
  }
}

/* Flechas de carrusel — SOLO las de banners y vitrinas de producto (§4.4).
   Original: .showcase-banners/.showcase-products .slider__arrow { background-color:
   transparent; border: none !important; box-shadow: 2px 2px 10px rgba(0,0,0,.1) }.
   El "borde" naranja se dibuja con box-shadow (no se pelea con el !important).
   El svg trae <rect fill="white"> + <path stroke="#242431">.
   NO se toca el `.slider__arrow` genérico: la galería de producto
   (.product-gallery .slider__arrow { background: #f6f5f8 } + svg>* { stroke:
   #242431 !important }) debe quedar como el original (fondo claro, glifo oscuro). */
html.theme-halloween .showcase-banners .slider__arrow,
html.theme-halloween .showcase-products .slider__arrow {
  background-color: var(--hw-graphite);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 122, 26, .5), 2px 2px 10px rgba(0, 0, 0, .25);
}

html.theme-halloween .showcase-banners .slider__arrow svg rect,
html.theme-halloween .showcase-products .slider__arrow svg rect {
  fill: transparent;
}

html.theme-halloween .showcase-banners .slider__arrow svg path,
html.theme-halloween .showcase-products .slider__arrow svg path {
  stroke: #fff;
}

/* Original: .showcase-* .slider__arrow:hover { opacity: .8 } */
html.theme-halloween .showcase-banners .slider__arrow:hover,
html.theme-halloween .showcase-banners .slider__arrow:focus,
html.theme-halloween .showcase-products .slider__arrow:hover,
html.theme-halloween .showcase-products .slider__arrow:focus {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(255, 122, 26, .85), 0 0 14px rgba(255, 122, 26, .5);
}


/* ============================================================================
   §4.5 Franja institucional (.banner-custom-content)
   ========================================================================== */

/* Los svg traen stroke="#0549BD" (y un par de path fill="#0549BD") inline:
   la propiedad CSS gana al atributo de presentación. */
html.theme-halloween .banner-custom_icon svg [stroke] {
  stroke: var(--hw-orange);
}

html.theme-halloween .banner-custom_icon svg [fill='#0549BD'] {
  fill: var(--hw-orange);
}

/* Original: .banner-custom-content { color: #000 }; .banner-custom_title 14px bold */
html.theme-halloween .banner-custom_title {
  color: #1B1838;
}

html.theme-halloween .banner-custom_text {
  color: var(--hw-ink-2);
}

/* Original: .banner-custom_item__box { align-items: center; display: flex;
   justify-content: center; position: relative } (sin fondo ni padding).
   En desktop la lista es flex space-between con ~400px de holgura a 1400px. */
html.theme-halloween .banner-custom_item__box {
  background-color: rgba(255, 252, 248, .6);
  border: 1px solid var(--hw-line);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color .25s var(--hw-ease), box-shadow .25s var(--hw-ease);
}

@media (hover: hover) {
  html.theme-halloween .banner-custom_item__box:hover {
    border-color: rgba(123, 44, 191, .45);
    box-shadow: 0 4px 14px rgba(123, 44, 191, .08);
  }
}

@media (max-width: 1199px) {
  html.theme-halloween .banner-custom_item__box {
    padding: 8px 10px;
  }
}


/* ============================================================================
   §4.6 Categorías (.showcase-model-6)
   ========================================================================== */

/* Original (custom): .showcase-model-6 .showcase-banners_link--svg
   { background-color: #fcfcfc; border: 1px solid #f0f0f0; border-radius: 12px; 86×86 } */
html.theme-halloween .showcase-model-6 .showcase-banners_link--svg {
  background-color: var(--hw-surface);
  border-color: var(--hw-line);
  box-shadow: 0 2px 10px rgba(11, 11, 18, .05);
  transition: border-color .25s var(--hw-ease), box-shadow .25s var(--hw-ease), transform .25s var(--hw-ease), opacity .25s;
}

@media (hover: hover) {
  html.theme-halloween .showcase-model-6 .showcase-banners_link--svg:hover,
  html.theme-halloween .showcase-model-6 .showcase-banners_link--svg:focus {
    opacity: 1;
    border-color: rgba(255, 122, 26, .6);
    box-shadow: 0 8px 22px rgba(123, 44, 191, .18), 0 0 0 3px rgba(255, 122, 26, .12);
    transform: translateY(-3px);
  }
}

/* Original: .showcase-model-6 .showcase-image-title { color: #12114B99 } → 9.8:1 sobre papel */
html.theme-halloween .showcase-model-6 .showcase-image-title {
  color: #3B3756;
}


/* ============================================================================
   §4.7 Sección "Cuotas sin interés" (.showcase-model-custom.showcase-model-payment)
   ========================================================================== */

/* Original: .showcase-model-custom { background: #F3F3FA; margin-bottom: 70px;
   padding: 60px 0 } → sección oscura con atmósfera. isolation: isolate crea el
   stacking context para que los pseudos a z -1 queden sobre el fondo y bajo
   el contenido. margin/padding intactos. */
html.theme-halloween .showcase-model-custom.showcase-model-payment {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(123, 44, 191, .35), transparent 60%),
    linear-gradient(180deg, var(--hw-plum), var(--hw-black));
}

/* Niebla estática (2 radiales violeta / naranja al 12%) */
html.theme-halloween .showcase-model-custom.showcase-model-payment::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 8% 100%, rgba(123, 44, 191, .12), transparent 70%),
    radial-gradient(38% 50% at 92% 0%, rgba(255, 122, 26, .12), transparent 70%);
}

/* Telaraña grande esquina inferior derecha (solo desktop) */
html.theme-halloween .showcase-model-custom.showcase-model-payment::after {
  right: 0;
  bottom: 0;
  width: 220px;
  height: 220px;
  z-index: -1;
  transform: rotate(180deg);
  background-image: var(--hw-web-light);
  --hw-web-o: .14;
}

/* Original: .showcase-model-custom .showcase-payment_tag { background: #fff; color: #829EC8 } */
html.theme-halloween .showcase-model-custom .showcase-payment_tag {
  background: rgba(255, 255, 255, .08);
  color: var(--hw-ember);
  border: 1px solid rgba(255, 179, 71, .35);
}

/* Original: .showcase-payment_title { color: #7B8AA0 } b { color: #000D2E } */
html.theme-halloween .showcase-model-custom .showcase-payment_title {
  color: #CFC3F2;
}

html.theme-halloween .showcase-model-custom .showcase-payment_title b {
  color: #fff;
}

/* Original: barras span:nth-child(1..3) { #FC7C0D, #E70769, #026BDE } */
html.theme-halloween .showcase-model-custom .showcase-payment_title__div span:nth-child(1) {
  background-color: var(--hw-orange);
}

html.theme-halloween .showcase-model-custom .showcase-payment_title__div span:nth-child(2) {
  background-color: var(--hw-violet);
}

html.theme-halloween .showcase-model-custom .showcase-payment_title__div span:nth-child(3) {
  background-color: var(--hw-ember);
}

/* Botón. Original: .showcase-payment_btn { background-color: #F39443; color: #fff }.
   Blanco sobre naranja vivo no llega a AA (2.6–3.7:1) y a <1200px el texto es
   20px/16px (no "grande") → tinta #1A1B23 sobre el gradiente (6.6 / 5.2:1). */
html.theme-halloween .showcase-model-custom .showcase-payment_btn {
  background: linear-gradient(135deg, var(--hw-orange), #F25C05);
  color: var(--hw-graphite);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(255, 122, 26, .35);
  transition: transform .25s var(--hw-ease), box-shadow .25s var(--hw-ease), opacity .3s;
}

html.theme-halloween .showcase-model-custom .showcase-payment_btn:hover,
html.theme-halloween .showcase-model-custom .showcase-payment_btn:focus {
  color: var(--hw-graphite);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 122, 26, .5);
}

/* Cards de bancos: fondo blanco intacto (logos legibles).
   Original: .showcase-payment_card { box-shadow: 0 4px 16px 1px #BCC9CF; border-bottom: 10px solid <banco> } */
html.theme-halloween .showcase-model-custom .showcase-payment_card {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: box-shadow .3s var(--hw-ease);
}

@media (hover: hover) {
  html.theme-halloween .showcase-model-custom .showcase-payment_card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 28px rgba(123, 44, 191, .35);
  }
}

@media (max-width: 991px) {
  html.theme-halloween .showcase-model-custom.showcase-model-payment::after {
    display: none;
  }
}


/* ============================================================================
   §4.8 Cards de producto (.showcase-product.card) — vitrinas y búsqueda
   ========================================================================== */

/* Original: .card { background: #fff; border: 1px solid #E3E3E8; border-radius: 15px;
   box-shadow: 0 2px 4px rgba(0,0,0,.05) } PERO .showcase-product { border: 0;
   border-radius: 0; box-shadow: none } la deja plana. Se recupera radio + un
   "borde" por box-shadow (0 px de layout) y nunca overflow: hidden (botón
   comprar y tags sobresalen por diseño). */
html.theme-halloween .showcase-product.card {
  background-color: var(--hw-surface);
  border-radius: 15px;
  box-shadow: 0 0 0 1px var(--hw-line), 0 2px 6px rgba(11, 11, 18, .05);
  transition: transform .28s var(--hw-ease), box-shadow .28s var(--hw-ease);
}

@media (hover: hover) {
  html.theme-halloween .showcase-product.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(255, 122, 26, .45), 0 18px 40px rgba(123, 44, 191, .16), 0 0 30px rgba(255, 122, 26, .14);
  }

  /* Dentro de carruseles (.tns-ovh es overflow:hidden y la card arranca a ras
     del borde) el desplazamiento se recortaba: sin translate ahí; el anillo y
     el glow se mantienen (recorte parcial, aceptable). El lift queda solo en
     grids. */
  html.theme-halloween .tns-slider .showcase-product.card:hover {
    transform: none;
  }
}

/* Original: .showcase-product_link_title { color: #242431 }. opacity: 1 evita el
   `a:hover { opacity: .7 }` global del tema (violeta al 70% bajaba a 3.7:1). */
html.theme-halloween .showcase-product_link_title:hover,
html.theme-halloween .showcase-product_link_title:focus {
  color: var(--hw-violet);
  opacity: 1;
}

/* Botón comprar. Original: .showcase-product_buy { background-color: #242431 (custom: #21C553);
   color: #fff; font-size: 14px; font-weight: 800 } hover { #1a9941 }.
   14px/800 no cuenta como texto grande: blanco sobre #FF7A1A–#E8530A da 2.6–3.7:1
   → tinta #1A1B23 (6.6 / 5.2:1; hover 7.4 / 6.0:1). */
html.theme-halloween .showcase-product_buy,
html.theme-halloween .showcase-product_buy.btn {
  background: linear-gradient(135deg, #FF7A1A 0%, #F25C05 100%);
  color: var(--hw-graphite);
  box-shadow: 0 6px 16px rgba(255, 122, 26, .30);
}

html.theme-halloween .showcase-product_buy:hover,
html.theme-halloween .showcase-product_buy:focus,
html.theme-halloween .showcase-product_buy.btn:hover,
html.theme-halloween .showcase-product_buy.btn:focus {
  background: linear-gradient(135deg, #FF8C3A 0%, #FF6A10 100%);
  color: var(--hw-graphite);
  box-shadow: 0 8px 22px rgba(255, 122, 26, .45);
}

/* Tags promo. Original: .showcase-tag { background-color: #FFE9CC; color: #242431; fill: #242431 }
   y .showcase-tag.showcase-tag-free_offer { background-color: #b9b9e1 } */
html.theme-halloween .showcase-tag,
html.theme-halloween .showcase-tag.showcase-tag-free_offer {
  background-color: var(--hw-graphite);
  color: var(--hw-ember);
  fill: var(--hw-ember);
  border: 1px solid rgba(255, 179, 71, .35);
  box-shadow: 0 0 10px rgba(255, 122, 26, .25);
}

html.theme-halloween .showcase-tag svg {
  fill: var(--hw-ember);
}

/* Original: .showcase-promo-tag { background-color: #77BC1D; color: #fff } (7.1:1 sobre violeta) */
html.theme-halloween .showcase-promo-tag {
  background-color: var(--hw-violet);
  color: #fff;
}


/* ============================================================================
   §4.9 "Marcas destacadas" (.showcase-model-8)
   ========================================================================== */

/* Original: .showcase-model-8 .showcase-background { position: absolute; top: 0;
   height: 865px (1065px en 992–1199; calc(100% + 30%) en móvil); overflow: hidden }
   con un <svg> de gradiente rosa/naranja. El svg se oculta (solo visual) y el
   fondo se limita a la altura real de la sección para que las vitrinas
   siguientes (títulos oscuros) no caigan sobre el fondo oscuro.
   Para que el bloque oscuro no termine en corte seco contra los banners
   siguientes, los últimos ~80px se funden a papel: el linear base termina en
   var(--hw-paper) y una capa superior (paper transparente → paper) tapa
   también la cola del radial naranja en esa franja. Los logos terminan 83px
   por encima del borde (padding-bottom 76px; medido a 1400px) → fuera de la
   zona fundida. */
html.theme-halloween .showcase-model-8 .showcase-background {
  height: 100%;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(243, 239, 233, 0) calc(100% - 80px), rgba(243, 239, 233, .18) calc(100% - 56px), rgba(243, 239, 233, .62) calc(100% - 26px), var(--hw-paper) 100%),
    radial-gradient(40% 70% at 92% 100%, rgba(255, 122, 26, .18), transparent 70%),
    radial-gradient(120% 90% at 50% -10%, rgba(123, 44, 191, .35), transparent 60%),
    linear-gradient(180deg, var(--hw-plum), var(--hw-black) calc(100% - 80px), var(--hw-paper) 100%);
}

html.theme-halloween .showcase-model-8 .showcase-background svg {
  display: none;
}

/* Telaraña en la esquina superior DERECHA (no hay texto ahí: el título está a
   la izquierda). Se dibuja dentro de .showcase-background (absoluto, overflow
   hidden, z auto): como pseudo posicionado suyo se pinta justo después de su
   fondo y antes de .showcase-banners (relative, posterior en el árbol) y del
   título (z 2) → siempre bajo el contenido. */
html.theme-halloween .showcase-model-8 .showcase-background::after {
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  transform: scaleX(-1);
  background-image: var(--hw-web-light);
  --hw-web-o: .16;
}

/* Logos. Original: .showcase-model-8 .showcase-banner_link { display: flex; max-width: 195px } */
html.theme-halloween .showcase-model-8 .showcase-banner_link {
  border-radius: 12px;
  transition: transform .25s var(--hw-ease), filter .25s var(--hw-ease), opacity .3s;
}

@media (hover: hover) {
  html.theme-halloween .showcase-model-8 .showcase-banner_link:hover,
  html.theme-halloween .showcase-model-8 .showcase-banner_link:focus {
    opacity: 1;
    transform: translateY(-3px);
    filter: drop-shadow(0 0 10px rgba(255, 122, 26, .55));
  }
}


/* ============================================================================
   §4.10 Footer
   ========================================================================== */

/* Original: .footer { background-color: #002161; color: #fff } */
html.theme-halloween .footer {
  position: relative;
  background: linear-gradient(180deg, #0A1230 0%, var(--hw-navy-deep) 60%, var(--hw-black) 100%);
}

/* Línea de glow violeta→naranja justo bajo la .div-content (5px), sin reemplazarla */
html.theme-halloween .footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(123, 44, 191, 0) 0%, rgba(176, 124, 232, .85) 30%, rgba(255, 122, 26, .9) 70%, rgba(255, 122, 26, 0) 100%);
  box-shadow: 0 0 14px rgba(255, 122, 26, .35);
}

/* Original: .footer a:hover { color: #8C8C8C } */
html.theme-halloween .footer a:hover,
html.theme-halloween .footer a:focus {
  color: var(--hw-ember);
}

/* Original (custom): .footer-box_contact__card { background: radial… azul;
   border: 3px solid #3559a0; box-shadow: inset 0 0 54px rgba(80,145,220,.22), inset 0 2px 0 rgba(255,255,255,.14) } */
html.theme-halloween .footer-box_contact__card {
  background: linear-gradient(180deg, rgba(123, 44, 191, .16), rgba(11, 11, 18, .35));
  border-color: rgba(123, 44, 191, .55);
  box-shadow: inset 0 0 54px rgba(123, 44, 191, .18), 0 0 30px rgba(255, 122, 26, .08);
}

/* Pequeña línea naranja bajo los títulos del footer (absoluta: 0 px de layout) */
html.theme-halloween .footer_title {
  position: relative;
}

html.theme-halloween .footer_title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--hw-orange);
  pointer-events: none;
}

@media (max-width: 1024px) {
  html.theme-halloween .footer-content_main .footer-columns_menus_inner {
    background:
      radial-gradient(circle at 8% 12%, rgba(255, 122, 26, .055) 0 1px, transparent 2px),
      radial-gradient(circle at 88% 76%, rgba(176, 124, 232, .06) 0 1px, transparent 2px),
      linear-gradient(160deg, rgba(19, 25, 55, .94), rgba(7, 8, 18, .96));
    background-size: 31px 31px, 43px 43px, auto;
    border-color: rgba(176, 124, 232, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 34px rgba(0, 0, 0, .18);
  }

  html.theme-halloween .footer-mobile-accordion {
    border-bottom-color: rgba(176, 124, 232, .17);
  }

  html.theme-halloween .footer-mobile-accordion__trigger {
    background: linear-gradient(90deg, rgba(123, 44, 191, .055), transparent 58%);
  }

  html.theme-halloween .footer-mobile-accordion.is-open .footer-mobile-accordion__trigger {
    background: linear-gradient(90deg, rgba(255, 122, 26, .075), rgba(123, 44, 191, .045) 62%, transparent);
  }

  html.theme-halloween .footer-mobile-accordion__indicator {
    border-color: rgba(176, 124, 232, .4);
    box-shadow: 0 0 12px rgba(123, 44, 191, .11);
  }

  html.theme-halloween .footer-mobile-accordion__indicator::before,
  html.theme-halloween .footer-mobile-accordion__indicator::after {
    background: var(--hw-orange);
    box-shadow: 0 0 7px rgba(255, 122, 26, .26);
  }

  html.theme-halloween .footer-brands_progress {
    border-top-color: rgba(176, 124, 232, .14);
  }

  html.theme-halloween .footer-brands_progress__toggle,
  html.theme-halloween .footer-brands_all-link:hover,
  html.theme-halloween .footer-brands_all-link:focus {
    color: var(--hw-ember);
  }

  html.theme-halloween .footer-brands_iso img {
    filter: drop-shadow(0 0 10px rgba(176, 124, 232, .14));
  }

  html.theme-halloween .footer-content_second {
    border-top: 1px solid rgba(255, 122, 26, .12);
  }
}

/* Original: .footer-content_second { background-color: #021B4C }.
   isolation: isolate crea el stacking context para que las telarañas a z -1
   queden sobre este fondo pero BAJO el texto © y el link logo-platform. */
html.theme-halloween .footer-content_second {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #050611;
}

/* Telarañas en las esquinas inferiores (recortadas por el overflow de la franja) */
html.theme-halloween .footer-content_second::before,
html.theme-halloween .footer-content_second::after {
  bottom: 0;
  width: 130px;
  height: 130px;
  z-index: -1;
  background-image: var(--hw-web-light);
  --hw-web-o: .16;
}

html.theme-halloween .footer-content_second::before {
  left: 0;
  transform: scaleY(-1);
}

html.theme-halloween .footer-content_second::after {
  right: 0;
  transform: rotate(180deg);
}


/* ============================================================================
   §4.11 / §4.12 Otras páginas y hovers genéricos (solo con hover real)
   ========================================================================== */

/* Original: .nav-main_link / .footer-page_link heredan transition: all 300ms de `a` */
html.theme-halloween .nav-main_link,
html.theme-halloween .footer-page_link {
  transition: color .2s var(--hw-ease), opacity .2s;
}

@media (hover: hover) {
  html.theme-halloween .btn.btn-primary {
    transition: box-shadow .25s var(--hw-ease), background-color .3s, color .3s, opacity .3s;
  }

  html.theme-halloween .btn.btn-primary:hover,
  html.theme-halloween .btn.btn-primary:focus {
    box-shadow: 0 0 0 1px rgba(255, 122, 26, .35), 0 8px 22px rgba(255, 122, 26, .3);
  }
}


/* ============================================================================
   §5.7 Telarañas: base común + shimmer (responsabilidad del CSS del tema)
   ========================================================================== */

/* Base compartida de todos los pseudos de telaraña (posición/tamaño/variante en
   cada sección). Solo decorativo: sin eventos, sin selección. */
html.theme-halloween .header::before,
html.theme-halloween .header::after,
html.theme-halloween .header-shortcut-menu::after,
html.theme-halloween .home-main > .showcase:first-child .showcase-banners::after,
html.theme-halloween .showcase-model-custom.showcase-model-payment::after,
html.theme-halloween .showcase-model-8 .showcase-background::after,
html.theme-halloween .footer-content_second::before,
html.theme-halloween .footer-content_second::after {
  content: '';
  position: absolute;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: var(--hw-web-o, .22);
}

/* Shimmer: solo opacity (barato para el compositor), 7s, alterno; desfases
   negativos para que no respiren todas a la vez. Apagado si el JS marcó
   hw-reduced o si el sistema pide reduced motion (§4.13). */
@keyframes hw-web-shimmer {
  from {
    opacity: var(--hw-web-o, .22);
  }

  to {
    opacity: calc(var(--hw-web-o, .22) * 1.45);
  }
}

html.theme-halloween:not(.hw-reduced) .header::before,
html.theme-halloween:not(.hw-reduced) .header::after,
html.theme-halloween:not(.hw-reduced) .header-shortcut-menu::after,
html.theme-halloween:not(.hw-reduced) .home-main > .showcase:first-child .showcase-banners::after,
html.theme-halloween:not(.hw-reduced) .showcase-model-custom.showcase-model-payment::after,
html.theme-halloween:not(.hw-reduced) .showcase-model-8 .showcase-background::after,
html.theme-halloween:not(.hw-reduced) .footer-content_second::before,
html.theme-halloween:not(.hw-reduced) .footer-content_second::after {
  animation: hw-web-shimmer 7s ease-in-out infinite alternate;
}

html.theme-halloween:not(.hw-reduced) .header::after,
html.theme-halloween:not(.hw-reduced) .showcase-model-8 .showcase-background::after {
  animation-delay: -2.4s;
}

html.theme-halloween:not(.hw-reduced) .header-shortcut-menu::after,
html.theme-halloween:not(.hw-reduced) .showcase-model-custom.showcase-model-payment::after,
html.theme-halloween:not(.hw-reduced) .footer-content_second::after {
  animation-delay: -4.8s;
}


/* ============================================================================
   §4.13 Reduced motion
   ========================================================================== */

/* `!important` permitido aquí (spec §4.13): neutraliza TODA animación y
   transición, incluidas las del tema base, cuando el usuario pide menos
   movimiento. El shimmer queda en su opacidad base. */
@media (prefers-reduced-motion: reduce) {
  html.theme-halloween * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ============================================================================
   §4.15 Haunted Graphite — componentes (global + específicos de la home)
   El fondo vive en §4.1 (global). Aquí: textos y componentes adaptados al
   grafito. Los selectores con .home-main son exclusivos de la home
   (categorías, tarjetas bajo el banner, Cuotas, Marcas); el resto aplica a
   todas las páginas donde aparezcan esos componentes.
   ========================================================================== */

/* --- Títulos y etiquetas sobre el fondo oscuro ---------------------------- */
/* Original del tema: #1B1838 (pensado para papel) → texto principal claro. */
html.theme-halloween .showcase-title {
  color: var(--hw-hg-text);
}

html.theme-halloween .home-main .showcase-model-6 .showcase-image-title {
  color: rgba(243, 233, 223, .8);
}

/* --- Tarjetas informativas bajo el banner (franja institucional) ---------- */
html.theme-halloween .home-main .banner-custom_item__box {
  background-color: rgba(41, 36, 51, .74);
  border-color: var(--hw-hg-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 26px rgba(8, 6, 12, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (hover: hover) {
  html.theme-halloween .home-main .banner-custom_item__box:hover {
    border-color: rgba(233, 135, 54, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 28px rgba(8, 6, 12, .32), 0 0 18px rgba(233, 135, 54, .12);
  }
}

html.theme-halloween .home-main .banner-custom_title {
  color: var(--hw-hg-text);
}

html.theme-halloween .home-main .banner-custom_text {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .home-main .banner-custom_icon svg [stroke] {
  stroke: var(--hw-hg-orange);
}

html.theme-halloween .home-main .banner-custom_icon svg [fill='#0549BD'] {
  fill: var(--hw-hg-orange);
}

/* --- Categorías: tiles oscuros, íconos claros ----------------------------- */
html.theme-halloween .home-main .showcase-model-6 .showcase-banners_link--svg {
  background-color: rgba(41, 36, 51, .82);
  border-color: var(--hw-hg-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px rgba(8, 6, 12, .3);
}

/* Los íconos son <img> SVG de trazo oscuro: invertidos a crema (filtro
   estático, se rasteriza una vez). */
html.theme-halloween .home-main .showcase-model-6 .showcase-banners_link--svg img.banner-grid--svg {
  filter: invert(1) sepia(.18) brightness(.94);
}

@media (hover: hover) {
  html.theme-halloween .home-main .showcase-model-6 .showcase-banners_link--svg:hover,
  html.theme-halloween .home-main .showcase-model-6 .showcase-banners_link--svg:focus {
    border-color: rgba(233, 135, 54, .6);
    box-shadow: 0 10px 24px rgba(8, 6, 12, .4), 0 0 0 3px rgba(233, 135, 54, .14), 0 0 22px rgba(233, 135, 54, .16);
  }
}

/* --- Banners: sombra acorde al fondo oscuro (imágenes intactas) ----------- */
html.theme-halloween .showcase-banners_link img.banner-main_img {
  box-shadow: 0 14px 34px rgba(6, 4, 10, .45), 0 0 0 1px rgba(176, 124, 232, .12);
}

/* Telaraña del primer banner: versión clara para que se lea sobre grafito. */
html.theme-halloween .home-main > .showcase:first-child .showcase-banners::after {
  background-image: var(--hw-web-light);
  --hw-web-o: .16;
}

/* Cards de producto: siguen claras (protagonistas); sombra más profunda. */
html.theme-halloween .showcase-product.card {
  box-shadow: 0 0 0 1px rgba(243, 233, 223, .06), 0 8px 22px rgba(6, 4, 10, .32);
}

/* Flechas de carrusel: un punto más claras que el fondo para separarse. */
html.theme-halloween .showcase-banners .slider__arrow,
html.theme-halloween .showcase-products .slider__arrow {
  background-color: var(--hw-hg-surface);
}

/* --- Marcas destacadas: fundido inferior a transparente (no a papel) ------ */
html.theme-halloween .home-main .showcase-model-8 .showcase-background {
  background:
    radial-gradient(40% 70% at 92% 100%, rgba(233, 135, 54, .16), transparent 70%),
    radial-gradient(120% 90% at 50% -10%, rgba(123, 44, 191, .32), transparent 60%),
    linear-gradient(180deg, var(--hw-plum), var(--hw-black));
  /* Arriba: entra fundiéndose desde el grafito (48px, dentro del padding-top
     de 76px → el título no se afecta). Abajo: se disuelve a transparente. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 80px), rgba(0, 0, 0, .5) calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 80px), rgba(0, 0, 0, .5) calc(100% - 34px), transparent 100%);
}

/* --- Cuotas sin interés: bordes fundidos con el fondo (sin costura) ------- */
/* La sección tiene padding 60px arriba/abajo: el fundido de 44px cae dentro
   de ese margen interno, así que textos, cards y botón no se tocan. */
html.theme-halloween .home-main .showcase-model-custom.showcase-model-payment {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}


/* ============================================================================
   §4.16 Unificación global — páginas internas sobre Haunted Graphite
   Lenguaje de la home aplicado a todo el sitio:
     · el grafito (§4.1) es el fondo de todas las páginas;
     · el contenido comercial va sobre superficies claras (como las cards de
       producto de la home): fichas, formularios, textos institucionales;
     · lo que queda sobre el grafito (migas, títulos, contadores, filtros de
       escritorio, paginación) pasa a texto claro con acentos naranja.
   Las fotos de producto no reciben filtros ni overlays. Los paneles laterales
   (carrito, login), modales, dropdowns y avisos conservan su apariencia clara.
   ========================================================================== */

/* --- Superficie clara compartida (cards de páginas: registro, cuenta,
       pedidos, direcciones, institucionales) ------------------------------- */
html.theme-halloween .card.card-page,
html.theme-halloween .card.card-pages-nav,
html.theme-halloween .page-accordion {
  background-color: var(--hw-hg-card);
  background-image: var(--hw-hg-accent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
  border-color: rgba(233, 135, 54, .14);
  box-shadow: var(--hw-hg-card-shadow);
}

/* --- Migas de pan (catálogo, búsqueda, marcas, producto) ------------------- */
html.theme-halloween .search-breadcrumb-item,
html.theme-halloween .search-breadcrumb-item a,
html.theme-halloween .product-breadcrumb .breadcrumb .breadcrumb-item,
html.theme-halloween .product-breadcrumb .breadcrumb .breadcrumb-item a {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .search-breadcrumb-item:last-child,
html.theme-halloween .product-breadcrumb .breadcrumb .breadcrumb-item:last-child {
  color: var(--hw-hg-text);
}

@media (hover: hover) {
  html.theme-halloween .search-breadcrumb-item a:hover,
  html.theme-halloween .product-breadcrumb .breadcrumb .breadcrumb-item a:hover {
    color: var(--hw-hg-orange);
    opacity: 1;
  }
}

/* Separador (flecha SVG de trazo #242431 en el tema) → lavanda claro. */
html.theme-halloween .search-breadcrumb-item:not(:last-child):after,
html.theme-halloween .product-breadcrumb .breadcrumb .breadcrumb-item:not(:last-child):after {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5.5L9.5 3L7 0.5M9.5 3H0.5' stroke='%23B9AFC2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ícono "inicio" de las migas (svg con fill/stroke oscuro). */
html.theme-halloween .search-breadcrumb-item_first svg,
html.theme-halloween .product-breadcrumb .breadcrumb .breadcrumb-item.breadcrumb-item_first a svg {
  color: var(--hw-hg-text-2);
  fill: currentColor;
}

/* --- Catálogo / búsqueda / marcas (.search-main) --------------------------- */
html.theme-halloween .search-main .search-title,
html.theme-halloween .search-main .search-title h1 {
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .search-options_top,
html.theme-halloween .search-main .search-options_top p,
html.theme-halloween .search-main .search-options_top .form-label,
html.theme-halloween .search-main .search-header__brand-desc,
html.theme-halloween .search-main .search-mobile-toolbar_count,
html.theme-halloween .search-main .search-mobile-toolbar_order .form-label {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .search-main .search-mobile-toolbar_count strong {
  color: var(--hw-hg-text);
}

/* --- Filtros del catálogo (.sf-panel, escritorio y cajón móvil) ------------
   Piel Halloween sobre el diseño base de theme-custom.css: superficie grafito-
   violeta con el grano global, bordes sutiles con luz naranja tenue y acentos
   naranja en contador, chips, foco y slider. Solo colores: la estructura,
   el accordion y el comportamiento son del diseño base. */
html.theme-halloween .search-main .sf-panel {
  --sf-bg: #262130;
  --sf-line: rgba(243, 233, 223, .10);
  --sf-text: var(--hw-hg-text);
  --sf-text-2: var(--hw-hg-text-2);
  --sf-accent: var(--hw-hg-orange);
  --sf-field-bg: rgba(12, 10, 17, .38);
  --sf-chip-bg: rgba(233, 135, 54, .16);
  background-color: var(--sf-bg);
  background-image:
    var(--hw-hg-grain),
    radial-gradient(60% 40% at 100% 0%, rgba(176, 124, 232, .12), rgba(176, 124, 232, 0) 70%),
    linear-gradient(180deg, #2B2537 0%, #262130 50%, #221E2C 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 180px 180px, auto, auto;
  border-color: rgba(233, 135, 54, .22);
  box-shadow: 0 0 0 1px rgba(233, 135, 54, .06), 0 14px 36px rgba(6, 4, 10, .42);
}

html.theme-halloween .search-main .sf-foot {
  background: rgba(34, 30, 44, .96);
}

html.theme-halloween .search-main .sf-body,
html.theme-halloween .search-main .sf-list--scroll {
  scrollbar-color: rgba(233, 135, 54, .38) transparent;
}

html.theme-halloween .search-main .sf-body::-webkit-scrollbar-thumb,
html.theme-halloween .search-main .sf-list--scroll::-webkit-scrollbar-thumb {
  background: rgba(233, 135, 54, .38);
}

html.theme-halloween .search-main .sf-panel .search-filter-title,
html.theme-halloween .search-main .sf-head_title {
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-panel .form-text,
html.theme-halloween .search-main .sf-panel .form-label {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .search-main .sf-panel .search-filter-link_category.active .form-text {
  color: var(--hw-hg-text);
}

@media (hover: hover) {
  html.theme-halloween .search-main .sf-panel label:hover .form-text {
    color: var(--hw-hg-text);
  }
}

html.theme-halloween .search-main .sf-panel .search-filter-link_category.active .form-radio .form-icon:after {
  background-color: var(--hw-hg-orange);
}

/* Casillas y radios sobre grafito. */
html.theme-halloween .search-main .sf-panel .form-checkbox .form-icon,
html.theme-halloween .search-main .sf-panel .form-radio .form-icon {
  border-color: rgba(243, 233, 223, .35);
  background-color: rgba(12, 10, 17, .3);
  box-shadow: none;
}

html.theme-halloween .search-main .sf-panel .form-checkbox input:checked + .form-icon {
  background: var(--hw-hg-orange);
  border-color: var(--hw-hg-orange);
}

html.theme-halloween .search-main .sf-panel .form-checkbox input:checked + .form-icon:before {
  border-color: #1A1B23;
}

html.theme-halloween .search-main .sf-panel .form-checkbox input:focus + .form-icon,
html.theme-halloween .search-main .sf-panel .form-radio input:focus + .form-icon {
  box-shadow: 0 0 0 2px rgba(233, 135, 54, .35);
}

html.theme-halloween .search-main .sf-badge {
  background: var(--hw-hg-orange);
  color: #1A1B23;
}

html.theme-halloween .search-main .sf-chip {
  color: var(--hw-hg-text);
  box-shadow: inset 0 0 0 1px rgba(233, 135, 54, .3);
}

html.theme-halloween .search-main .sf-chip_remove:hover,
html.theme-halloween .search-main .sf-chip_remove:focus-visible {
  background: rgba(233, 135, 54, .3);
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-tree-toggle:hover,
html.theme-halloween .search-main .sf-tree-toggle:focus-visible {
  background: rgba(233, 135, 54, .18);
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-close {
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-panel .form-input.sf-search_input {
  border-color: rgba(243, 233, 223, .12);
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-panel .form-input.sf-search_input::placeholder {
  color: rgba(243, 233, 223, .45);
}

html.theme-halloween .search-main .sf-panel .form-input.sf-search_input:focus {
  border-color: rgba(233, 135, 54, .7);
  box-shadow: 0 0 0 2px rgba(233, 135, 54, .22);
}

/* Pastillas de variación (talle/color) sobre grafito. */
html.theme-halloween .search-main .sf-panel .search-filter_variation__button .search-filter-variation_link {
  background-color: rgba(12, 10, 17, .35);
  border-color: rgba(243, 233, 223, .14);
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-panel .search-filter_variation__button .form-radio input:checked + .search-filter-variation_link {
  border-color: var(--hw-hg-orange) !important;
  box-shadow: 0 0 0 1px var(--hw-hg-orange);
}

html.theme-halloween .search-main .sf-panel .search-filter-price_values {
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-panel .search-filter-price .noUi-target {
  background-color: rgba(243, 233, 223, .16);
}

html.theme-halloween .search-main .sf-panel .search-filter-price .noUi-connect {
  background: var(--hw-hg-orange);
}

html.theme-halloween .search-main .sf-panel .search-filter-price .noUi-handle {
  background-color: var(--hw-hg-orange);
  box-shadow: 0 0 0 3px rgba(233, 135, 54, .22);
}

/* Botón "Filtrar": acento naranja suave (texto crema 8:1). */
html.theme-halloween .search-main .sf-panel .search-filters-btn_finish {
  border: 1px solid rgba(233, 135, 54, .55);
  background-color: rgba(233, 135, 54, .14);
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .sf-panel .search-filters-btn_finish:hover,
html.theme-halloween .search-main .sf-panel .search-filters-btn_finish:focus {
  background-color: rgba(233, 135, 54, .26);
  color: var(--hw-hg-text);
}

/* Barra "Filtrar por" del móvil (abre el cajón) y fondo del cajón. */
html.theme-halloween .search-main .search-options_mobile--genz {
  background-color: transparent;
}

html.theme-halloween .search-main .search-options_mobile--genz .search-mobile-filter-bar {
  background-color: rgba(41, 36, 51, .74);
  box-shadow: inset 0 -1px 0 rgba(233, 135, 54, .25);
}

html.theme-halloween .search-main .search-options_mobile--genz .search-mobile-filter-bar_title {
  color: var(--hw-hg-text);
}

html.theme-halloween .search-main .search-options_mobile--genz .search-mobile-filter-bar_icon {
  color: var(--hw-hg-orange);
}

@media (max-width: 991px) {
  html.theme-halloween .search-main .search-options_mobile--genz .search-options-body_item.open .search-filters {
    background: #262130;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(233, 135, 54, .25);
  }
}

/* Paginación: pastillas grafito, página activa naranja (texto tinta, 6.6:1). */
html.theme-halloween .search-options-pagination a.search-options-pagination_link:not(.search-options-pagination_link__arrow) {
  background-color: var(--hw-hg-surface);
  color: var(--hw-hg-text);
  box-shadow: inset 0 0 0 1px var(--hw-hg-line);
}

html.theme-halloween .search-options-pagination a.search-options-pagination_link:not(.search-options-pagination_link__arrow):before {
  background-color: rgba(233, 135, 54, .16);
}

html.theme-halloween .search-options.search-options_bottom .search-options-pagination_item.active a.search-options-pagination_link,
html.theme-halloween .search-options.search-options_bottom .search-options-pagination_item.active a.search-options-pagination_link:hover,
html.theme-halloween .search-options.search-options_bottom .search-options-pagination_item.active a.search-options-pagination_link:focus {
  background-color: var(--hw-hg-orange);
  color: #1A1B23;
}

html.theme-halloween .search-options-pagination a.search-options-pagination_link__arrow {
  background-color: var(--hw-hg-surface);
  border-color: rgba(233, 135, 54, .45);
}

/* "Ver más productos": botón oscuro del tema → CTA naranja (texto tinta). */
html.theme-halloween .search-btn-pagination {
  background: linear-gradient(135deg, #FF7A1A 0%, #F25C05 100%);
  color: #1A1B23;
  box-shadow: 0 8px 22px rgba(233, 135, 54, .28);
}

html.theme-halloween .search-btn-pagination:hover,
html.theme-halloween .search-btn-pagination:focus {
  background: linear-gradient(135deg, #FF8C3A 0%, #FF6A10 100%);
  color: #1A1B23;
}

/* --- Ficha de producto (.product-main) ------------------------------------- */
/* Superficie clara detrás de la cabecera (galería + datos de compra). Es un
   pseudo-elemento absoluto: no cambia anchos, columnas ni la posición de nada.
   Se extiende 18px arriba/abajo (dentro del padding-bottom de 78px de la
   sección y del padding de las migas) y ocupa el ancho del container. */
html.theme-halloween .product-main .product-header-container {
  position: relative;
  isolation: isolate;
}

html.theme-halloween .product-main .product-header-container::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -18px;
  right: 0;
  bottom: -18px;
  left: 0;
  border-radius: 18px;
  background-color: var(--hw-hg-card);
  background-image: var(--hw-hg-accent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  box-shadow: var(--hw-hg-card-shadow);
  pointer-events: none;
}

/* Descripción + especificaciones: el contenedor ya tiene su padding propio
   (50px 40px); solo cambia la superficie. */
html.theme-halloween .product-main .product-descriptions-container > .col-12 {
  border-radius: 18px;
  background-color: var(--hw-hg-card);
  background-image: var(--hw-hg-accent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  box-shadow: var(--hw-hg-card-shadow);
}

/* CTA principal "Añadir a la bolsa": del grafito del tema al naranja de los
   botones de compra de la home (texto tinta: 6.6:1). "Comprar ya" (blanco con
   borde) se mantiene. */
html.theme-halloween .product-main .product-btn.product-btn_addCart {
  border-color: transparent;
  background: linear-gradient(135deg, #FF7A1A 0%, #F25C05 100%);
  color: #1A1B23;
  box-shadow: 0 8px 22px rgba(233, 135, 54, .3);
}

html.theme-halloween .product-main .product-btn.product-btn_addCart:hover,
html.theme-halloween .product-main .product-btn.product-btn_addCart:focus {
  border-color: transparent;
  background: linear-gradient(135deg, #FF8C3A 0%, #FF6A10 100%);
  color: #1A1B23;
}

/* --- 404 / sin resultados (.notfound-main) --------------------------------- */
html.theme-halloween .notfound-text {
  color: var(--hw-hg-text);
}

html.theme-halloween .notfound-btn,
html.theme-halloween .notfound-btn:hover {
  background: linear-gradient(135deg, #FF7A1A 0%, #F25C05 100%);
  color: #1A1B23;
  box-shadow: 0 8px 22px rgba(233, 135, 54, .28);
}

/* --- Checkout (decoración mínima, máxima claridad) ------------------------- */
/* Hoja clara cálida con la línea de acento Halloween arriba. Sin efectos (el
   JS no monta la capa FX en checkout) y la luz del fondo queda estática. Todo
   el contenido (pasos, formularios, resumen, cupón) conserva sus colores
   originales sobre una superficie clara. */
html.theme-halloween .checkout-main {
  background-color: var(--hw-hg-paper);
  background-image: var(--hw-hg-accent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
}


/* ============================================================================
   §4.17 Megamenú de categorías — "biblioteca embrujada" (desktop ≥ 992px)
   Solo presentación: mismas medidas, estructura y comportamiento (abre con el
   :hover del tema y Alpine setupMenuDesktop marca .active). Superficies:
   caja = grafito con la textura global (grano + manchas) y una luz cálida
   abajo a la derecha (velas); columna izquierda = superficie violeta más
   clara; panel de subcategorías = transparente sobre la caja. Las velas son
   nodos .hw-candle que inserta el JS (theme-halloween-fx.css §11).
   Originales (theme-custom.css, ≥ 992px): .nav-main-box { border-radius: 0 0 10px 10px;
   box-shadow: 1px 6px 20px 4px rgba(0,0,0,.22) }; .nav-main-box_first
   { background #f8f9fe; border-right .5px solid #e2e6ee }; panel #ffffff; textos
   #0d1f4c / #4a5468 / #5a6478; hover #eef1f9; activo #e9effb + borde #2563c9.
   ========================================================================== */
@media (min-width: 992px) {
  html.theme-halloween .nav-main-box {
    background-color: var(--hw-hg-base);
    background-image:
      var(--hw-hg-grain),
      var(--hw-hg-mottle),
      radial-gradient(42% 46% at 100% 100%, rgba(233, 135, 54, .12), rgba(233, 135, 54, 0) 72%),
      radial-gradient(55% 60% at 32% 0%, rgba(176, 124, 232, .10), rgba(176, 124, 232, 0) 70%),
      linear-gradient(180deg, #25212F 0%, #201D2A 55%, #1C1925 100%);
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
    background-size: 180px 180px, 520px 520px, auto, auto, auto;
    /* Borde fino con luz naranja tenue (sombra de 1px: no suma tamaño). */
    box-shadow:
      0 0 0 1px rgba(233, 135, 54, .22),
      0 0 36px rgba(233, 135, 54, .07),
      0 26px 60px rgba(6, 4, 10, .58);
    color: var(--hw-hg-text);
  }

  /* Filo de luz superior (naranja → lavanda) junto al header. */
  html.theme-halloween .nav-main-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(233, 135, 54, 0), rgba(233, 135, 54, .55) 18%, rgba(176, 124, 232, .38) 62%, rgba(176, 124, 232, 0));
  }

  /* Columna izquierda: superficie diferenciada (violeta) con su propio grano
     y una sombra interna hacia el panel para dar profundidad. */
  html.theme-halloween .nav-main-box_first {
    background-color: var(--hw-hg-surface);
    background-image:
      linear-gradient(180deg, rgba(66, 51, 79, .62) 0%, rgba(66, 51, 79, .22) 45%, rgba(32, 29, 42, .30) 100%),
      var(--hw-hg-grain);
    background-size: auto, 180px 180px;
    border-right-color: rgba(233, 135, 54, .20);
    box-shadow: inset -14px 0 26px -18px rgba(6, 4, 10, .75);
    color: var(--hw-hg-text);
  }

  html.theme-halloween .nav-main-box-first_title {
    color: rgba(243, 233, 223, .88);
    /* Separador: línea cálida que se desvanece (sin sumar alto). */
    background: linear-gradient(90deg, rgba(233, 135, 54, .42), rgba(233, 135, 54, 0) 82%) left bottom / 100% 1px no-repeat;
  }

  html.theme-halloween .nav-main-box-first_title svg [stroke]:not([stroke='none']) {
    stroke: var(--hw-hg-orange);
  }

  /* Ítems: separadores finos y resplandor al pasar el mouse. Las transiciones
     van sobre color y sombra interna (los degradados no interpolan). */
  html.theme-halloween .nav-main-box_first > ul > li {
    transition: background-color .22s var(--hw-ease), box-shadow .22s var(--hw-ease), border-color .22s var(--hw-ease);
  }

  html.theme-halloween .nav-main-box_first > ul > li + li {
    box-shadow: inset 0 1px 0 rgba(243, 233, 223, .045);
  }

  /* El panel de subcategorías vive DENTRO del li: los selectores de la columna
     usan "li > a" para no teñir sus enlaces (que tienen reglas propias). La
     regla base ".nav-main-box_first>ul>li a" (#4a5468) sí los alcanza: ver
     más abajo los colores del panel con más especificidad. */
  html.theme-halloween .nav-main-box_first > ul > li > a {
    color: rgba(243, 233, 223, .80);
    transition: color .2s var(--hw-ease), text-shadow .2s var(--hw-ease);
  }

  html.theme-halloween .nav-main-box_first .nav-main_children_icon {
    color: rgba(243, 233, 223, .56);
    transition: color .2s var(--hw-ease);
  }

  /* Íconos SVG del CMS (rellenos oscuros #12100b / #1d1d1b / #020202 o negro
     por defecto): pasan a currentColor; los fill="none" se respetan. */
  html.theme-halloween .nav-main-box_first .nav-main_children_icon svg,
  html.theme-halloween .nav-main-box_first .nav-main_children_icon svg [fill]:not([fill='none']) {
    fill: currentColor;
  }

  html.theme-halloween .nav-main-box_first .icon-viewSubcategories {
    color: rgba(243, 233, 223, .9);
  }

  html.theme-halloween .nav-main-box_first .icon-viewSubcategories svg [stroke]:not([stroke='none']) {
    stroke: currentColor;
  }

  /* El resplandor se suma al separador (no lo reemplaza). */
  html.theme-halloween .nav-main-box_first > ul > li:hover {
    background-color: rgba(233, 135, 54, .07);
    border-left-color: rgba(233, 135, 54, .55);
    box-shadow: inset 0 1px 0 rgba(243, 233, 223, .045), inset 70px 0 54px -54px rgba(233, 135, 54, .26);
  }

  html.theme-halloween .nav-main-box_first > ul > li:hover > a {
    color: var(--hw-hg-text);
    text-shadow: 0 0 14px rgba(233, 135, 54, .32);
  }

  html.theme-halloween .nav-main-box_first > ul > li:hover .nav-main_children_icon {
    color: var(--hw-hg-orange);
  }

  /* Categoría abierta (Alpine pone .active): violeta + filo naranja. */
  html.theme-halloween .nav-main-box_first > ul > li.nav-children_custom.active {
    background-color: rgba(176, 124, 232, .10);
    border-left-color: var(--hw-hg-orange);
    box-shadow: inset 0 1px 0 rgba(243, 233, 223, .045), inset 80px 0 60px -56px rgba(176, 124, 232, .30);
  }

  html.theme-halloween .nav-main-box_first > ul > li.nav-children_custom.active .nav-main_children__link {
    color: #FFFFFF;
  }

  html.theme-halloween .nav-main-box_first > ul > li.nav-children_custom.active .nav-main_children_icon,
  html.theme-halloween .nav-main-box_first > ul > li.nav-children_custom.active .icon-viewSubcategories {
    color: var(--hw-hg-orange);
  }

  /* Panel de subcategorías: transparente sobre la textura de la caja. */
  html.theme-halloween .nav-main-box_first .nav-main_content__children.dropdown-content {
    background-color: transparent;
  }

  /* Barras de scroll del menú en tono grafito (sin cambiar su ancho). */
  html.theme-halloween .nav-main-box_first > ul,
  html.theme-halloween .nav-main-box_first .nav-main_content__children.dropdown-content {
    scrollbar-color: rgba(233, 135, 54, .38) rgba(243, 233, 223, .04);
  }

  html.theme-halloween .menu-conteudo-header {
    border-bottom-color: transparent;
    border-image: linear-gradient(90deg, rgba(233, 135, 54, .5), rgba(176, 124, 232, .26) 45%, rgba(243, 233, 223, 0) 100%) 1;
  }

  html.theme-halloween .menu-conteudo-header_title {
    color: var(--hw-hg-text);
  }

  html.theme-halloween .nav-main-box_first .menu-conteudo-header_link {
    color: var(--hw-hg-orange);
  }

  html.theme-halloween .nav-main-box_first .menu-conteudo-header_link:hover,
  html.theme-halloween .nav-main-box_first .menu-conteudo-header_link:focus {
    color: #F6A863;
  }

  html.theme-halloween .nav-main-children_item > .nav-main_children {
    color: var(--hw-hg-text);
    transition: color .2s var(--hw-ease);
  }

  html.theme-halloween .nav-main-children_item > .nav-main_children:hover,
  html.theme-halloween .nav-main-children_item > .nav-main_children:focus {
    color: var(--hw-hg-orange);
  }

  html.theme-halloween .nav-main-subcategory-link_title {
    color: rgba(243, 233, 223, .64);
  }

  html.theme-halloween .nav-main-subcategory_link:hover .nav-main-subcategory-link_title,
  html.theme-halloween .nav-main-subcategory_link:focus .nav-main-subcategory-link_title {
    color: var(--hw-hg-orange);
  }

  /* Foco por teclado visible sobre el grafito. */
  html.theme-halloween .nav-main_content a:focus-visible {
    outline: 2px solid rgba(233, 135, 54, .8);
    outline-offset: 2px;
    border-radius: 3px;
  }
}


/* ============================================================================
   §4.18 Menú lateral móvil (.sidebar-nav, < 992px) — misma superficie
   Solo colores y separadores; mismas medidas y el mismo despliegue metismenu.
   Originales (theme-all.css): fondo #fff, textos #242431, borde #CACACA,
   flecha .has-arrow:after color #242431, sublistas #fff.
   ========================================================================== */
html.theme-halloween .sidebar-nav {
  background-color: var(--hw-hg-base);
  background-image:
    var(--hw-hg-grain),
    radial-gradient(70% 40% at 100% 0%, rgba(176, 124, 232, .12), rgba(176, 124, 232, 0) 70%),
    linear-gradient(180deg, #25212F 0%, #201D2A 60%, #1C1925 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 180px 180px, auto, auto;
  box-shadow: 0 0 0 1px rgba(233, 135, 54, .18), 0 10px 30px rgba(6, 4, 10, .5);
  color: var(--hw-hg-text);
}

html.theme-halloween .sidebar-nav .sidebar-nav-header {
  background-color: transparent;
  border-bottom-color: rgba(233, 135, 54, .28);
}

html.theme-halloween .sidebar-nav a.sidebar-nav-link,
html.theme-halloween .sidebar-nav .sidebar-nav-icon,
html.theme-halloween .sidebar-nav .sidebar-nav-icon_close {
  color: var(--hw-hg-text);
}

html.theme-halloween .sidebar-nav .sidebar-nav-icon svg [fill]:not([fill='none']),
html.theme-halloween .sidebar-nav .sidebar-nav-icon_close svg [fill]:not([fill='none']) {
  fill: currentColor;
}

html.theme-halloween .sidebar-nav .sidebar-nav-icon svg [stroke]:not([stroke='none']),
html.theme-halloween .sidebar-nav .sidebar-nav-icon_close svg [stroke]:not([stroke='none']) {
  stroke: currentColor;
}

html.theme-halloween .sidebar-nav .sidebar-nav-content,
html.theme-halloween .sidebar-nav .nav-mobile > li > .nav-mobile_link,
html.theme-halloween .sidebar-nav .nav-mobile > li > .nav-mobile_link:before {
  background-color: transparent;
}

html.theme-halloween .sidebar-nav .nav-mobile > li + li {
  box-shadow: inset 0 1px 0 rgba(243, 233, 223, .06);
}

html.theme-halloween .sidebar-nav .nav-mobile ul {
  background-color: rgba(41, 36, 51, .72);
}

html.theme-halloween .sidebar-nav .nav-mobile .nav-mobile_link,
html.theme-halloween .sidebar-nav .nav-mobile .nav-mobile_link a {
  color: rgba(243, 233, 223, .86);
  fill: rgba(243, 233, 223, .86);
}

html.theme-halloween .sidebar-nav .nav-mobile .nav-mobile_link a:active,
html.theme-halloween .sidebar-nav .nav-mobile .nav-mobile_link a:focus,
html.theme-halloween .sidebar-nav .nav-mobile .nav-mobile_link a:hover,
html.theme-halloween .sidebar-nav .mm-active > .nav-mobile_link,
html.theme-halloween .sidebar-nav .mm-active > .nav-mobile_link a {
  color: #FFFFFF;
}

html.theme-halloween .sidebar-nav .metismenu .has-arrow:after {
  color: var(--hw-hg-orange);
}

/* Íconos SVG del CMS (rellenos casi negros): siguen el color del enlace. */
html.theme-halloween .sidebar-nav .nav-mobile_icon svg,
html.theme-halloween .sidebar-nav .nav-mobile_icon svg [fill]:not([fill='none']) {
  fill: currentColor;
}

/* ---------------------------------------------------------------------------
   4.19 Buscador predictivo (panel .ls-panel de theme-live-search.js)
   Grafito/violeta con acentos naranja; las miniaturas conservan fondo claro
   para que las fotos de producto se lean bien.
   ------------------------------------------------------------------------ */
html.theme-halloween .ls-panel {
  background: linear-gradient(180deg, var(--hw-graphite-2) 0%, var(--hw-graphite) 55%, #1C1626 100%);
  color: var(--hw-hg-text);
  border-color: rgba(255, 122, 26, .38);
  box-shadow: 0 0 0 1px rgba(255, 122, 26, .10), 0 22px 50px rgba(6, 4, 10, .55), 0 0 36px var(--hw-glow-violet);
}

html.theme-halloween .ls-bar {
  background: var(--hw-hg-accent);
}

html.theme-halloween .ls-status,
html.theme-halloween .ls-panel[data-state="loading"] .ls-list:empty::before {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .ls-link:hover,
html.theme-halloween .ls-link:focus,
html.theme-halloween .ls-item[aria-selected="true"] .ls-link {
  background: rgba(123, 44, 191, .22);
  box-shadow: inset 3px 0 0 var(--hw-orange);
}

html.theme-halloween .ls-thumb {
  background: var(--hw-hg-card);
}

html.theme-halloween .ls-mark {
  color: var(--hw-ember);
}

html.theme-halloween .ls-meta,
html.theme-halloween .ls-strike {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .ls-local {
  color: var(--hw-ember);
}

html.theme-halloween .ls-promo {
  background: var(--hw-orange);
  color: var(--hw-graphite);
}

html.theme-halloween .ls-badge {
  background: rgba(179, 18, 45, .28);
  color: #FFC2C2;
}

html.theme-halloween .ls-foot {
  border-top-color: var(--hw-hg-line);
}

html.theme-halloween .ls-all {
  color: var(--hw-ember);
}

html.theme-halloween .ls-all:hover,
html.theme-halloween .ls-all:focus {
  background: rgba(255, 122, 26, .12);
  color: var(--hw-ember);
}

html.theme-halloween .ls-list {
  scrollbar-color: rgba(255, 122, 26, .45) transparent;
}

html.theme-halloween .ls-list::-webkit-scrollbar-thumb {
  background: rgba(255, 122, 26, .45);
  background-clip: padding-box;
}

html.theme-halloween .ls-section,
html.theme-halloween .ls-note,
html.theme-halloween .ls-exact {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .ls-exact:hover,
html.theme-halloween .ls-exact:focus {
  color: var(--hw-hg-text);
}

html.theme-halloween .ls-section_badge {
  color: var(--hw-graphite);
  background: var(--hw-ember);
}

html.theme-halloween .ls-suggest_btn {
  background: rgba(255, 122, 26, .08);
  border-color: rgba(255, 122, 26, .45);
  color: var(--hw-hg-text);
}

html.theme-halloween .ls-suggest_btn:hover,
html.theme-halloween .ls-suggest_btn:focus,
html.theme-halloween .ls-suggest[aria-selected="true"] .ls-suggest_btn {
  background: rgba(255, 122, 26, .16);
  border-color: var(--hw-orange);
}

html.theme-halloween .ls-suggest_icon,
html.theme-halloween .ls-suggest_query strong {
  color: var(--hw-ember);
}

html.theme-halloween .ls-note_link {
  color: var(--hw-ember);
}

html.theme-halloween .ls-ai {
  color: var(--hw-ink-2);
  border-right-color: var(--hw-line);
}

html.theme-halloween .ls-ai svg {
  color: var(--hw-orange);
}

/* Dentro del panel oscuro. */
html.theme-halloween .ls-ai--inline {
  color: var(--hw-hg-text-2);
}

html.theme-halloween .ls-ai--inline svg {
  color: var(--hw-ember);
}

html.theme-halloween .ls-group {
  border-top-color: var(--hw-hg-line);
  color: var(--hw-hg-text-2);
}

html.theme-halloween .ls-refine {
  background: var(--hw-hg-surface);
  border-color: rgba(255, 122, 26, .35);
  color: var(--hw-hg-text);
}

html.theme-halloween .ls-refine svg,
html.theme-halloween .ls-refine_link {
  color: var(--hw-ember);
}

html.theme-halloween .ls-refine_link:hover,
html.theme-halloween .ls-refine_link:focus {
  color: var(--hw-orange-2);
}

html.theme-halloween .ls-pending {
  color: var(--hw-hg-text-2);
}

/* --- Catálogo continuo: contador, carga y fin de lista ----------------------- */
html.theme-halloween .gz-is,
html.theme-halloween .gz-is-prev {
  color: var(--hw-hg-text);
}

html.theme-halloween .gz-is_spinner {
  border-color: var(--hw-hg-orange);
  border-right-color: transparent;
  box-shadow: 0 0 12px rgba(233, 135, 54, .35);
}

html.theme-halloween .gz-is[data-state="done"] .gz-is_msg {
  border-top: 1px solid rgba(233, 135, 54, .35);
  padding-top: 14px;
}

html.theme-halloween .gz-is[data-state="error"] .gz-is_msg {
  color: var(--hw-ember);
}

/* --- Página «Cámara Puente de la Amistad» (/pagina/camera-puente-de-la-amistad) ---
   El contenido viene del panel con colores en línea pensados para fondo claro
   (título #1a1a1a, ubicación #174572, franja «Conocé» blanca). Sobre el fondo
   oscuro de Halloween se adaptan; el tema base no cambia. */
html.theme-halloween .genz-camera-page:not(.genz-fullbleed) > section:first-child h1 {
  color: var(--hw-hg-text) !important;
}

html.theme-halloween .genz-camera-page:not(.genz-fullbleed) > section:first-child [style*="#174572"] {
  color: rgba(243, 233, 223, .72) !important;
}

html.theme-halloween .genz-camera-page:not(.genz-fullbleed) > section:first-child [style*="#174572"][style*="bold"] {
  color: var(--hw-hg-orange) !important;
}

/* «Conocé nuestra cámara»: la franja blanca pasa al fondo de la página;
   las tarjetas conservan su fondo crema y el texto oscuro. */
html.theme-halloween .genz-camera-conoce {
  background-color: transparent !important;
  color: var(--hw-hg-text) !important;
}

html.theme-halloween .genz-camera-conoce h2 {
  color: var(--hw-hg-text) !important;
}

/* Títulos naranja de las tarjetas: un tono más oscuro para leerse sobre crema. */
html.theme-halloween .genz-camera-conoce [style*="#f39443"] {
  color: #B5530A !important;
}

/* Código del producto en las tarjetas (theme-custom.css): las tarjetas siguen
   claras (#FFFCF8), así que el gris base se mantiene; solo los acentos del botón
   pasan a violeta. Violeta #7B2CBF sobre #FFFCF8: 6.9:1. */
@media (hover: hover) {
  html.theme-halloween .showcase-product_code-copy:hover {
    background-color: rgba(123, 44, 191, .08);
    color: var(--hw-violet);
  }
}

html.theme-halloween .showcase-product_code-copy:focus-visible {
  outline-color: var(--hw-violet);
}

html.theme-halloween .showcase-product_code-copy.is-copied {
  color: var(--hw-violet);
}