/* ============================================================================
   Genz × Cyber Day 2026 — theme-cyberday.css («Digital Pulse»)
   ----------------------------------------------------------------------------
   Piel de temporada para el tema Liquid de genz.com.py: una tienda tecnológica
   premium de noche. Superficies oscuras con profundidad, retícula casi
   imperceptible, dos luces ambientales que respiran y, de vez en cuando, una
   línea de luz que recorre un borde. El neón nunca es fondo: es acento.

   - SOLO sobrescribe estilos. No toca lógica, DOM funcional ni medidas de
     contenedores (alturas, paddings, display, offsets de la barra Cyber Day).
   - Kill-switch: TODO el archivo está bajo el scope `html.theme-cyber`. La
     clase la decide por fecha layout/theme.liquid (misma hora del servidor que
     la barra): Halloween hasta el 01/11/2026 23:59, Cyber hasta el 05/11 00:00,
     identidad base después. Nunca convive con html.theme-halloween.
   - Cada override lleva un comentario con el selector/valor original que
     reemplaza (assets/theme-all.css = base, assets/theme-custom.css = custom).
   - Identidad corporativa intacta: logo (imagen del panel) e iconos de las
     categorías (máscaras SVG del panel, rosa #dc4181) no se tocan.
   - Animación solo en transform/opacity; se pausa con la pestaña oculta.
   - Las secciones siguen la numeración de la capa Halloween (§4.x) para que
     ambas pieles cubran los mismos componentes.
   ========================================================================== */


/* ============================================================================
   §2. Tokens de diseño
   ========================================================================== */
html.theme-cyber {
  /* Paleta aprobada (Digital Pulse) */
  --cy-bg: #090A16;            /* negro espacial */
  --cy-bg-2: #0E0B20;          /* negro espacial, un poco más violeta (gradientes) */
  --cy-surface: #17132B;       /* grafito violeta: superficies, cards, header */
  --cy-surface-2: #1F1A38;     /* grafito un paso más claro: hover, campos */
  --cy-surface-3: #120E25;     /* grafito más oscuro: menú de categorías, topbar */
  --cy-violet: #702CE8;        /* violeta eléctrico: acento estructural (bordes hover, sello, tags) */
  --cy-violet-soft: #9A6CFF;   /* violeta claro: textos de acento, gradientes */
  --cy-magenta: #D935DC;       /* magenta neón: solo gradientes del CTA y del marco */
  --cy-cyan: #30D9F0;          /* cyan luminoso: acción (botón de compra, subrayado activo, foco) */
  --cy-text: #F4F5FC;          /* blanco tecnológico */
  --cy-text-2: rgba(244, 245, 252, .72);
  --cy-text-3: rgba(244, 245, 252, .55);
  --cy-line: rgba(244, 245, 252, .12);
  --cy-line-2: rgba(244, 245, 252, .07);
  --cy-glass: rgba(23, 19, 43, .78);
  --cy-glass-2: rgba(9, 10, 22, .70);
  --cy-ink: #090A16;           /* tinta oscura sobre cyan (botones) */

  /* Superficies claras de lectura: las fotos de producto traen fondo blanco,
     por eso la bandeja de la imagen de cada card queda clara. */
  --cy-tray: #F4F5FC;
  --cy-tray-2: #ECEDF7;

  /* Luces */
  --cy-glow-violet: rgba(112, 44, 232, .40);
  --cy-glow-cyan: rgba(48, 217, 240, .30);
  --cy-glow-magenta: rgba(217, 53, 220, .32);
  --cy-accent: linear-gradient(90deg, #30D9F0, #9A6CFF 60%, #D935DC);
  --cy-accent-line: linear-gradient(90deg, transparent, #30D9F0, #D935DC, transparent);
  --cy-card-shadow: 0 0 0 1px var(--cy-line), 0 20px 40px -30px rgba(0, 0, 0, .9);
  --cy-card-shadow-hover: 0 0 0 1px rgba(112, 44, 232, .65), 0 0 0 4px rgba(112, 44, 232, .12), 0 30px 50px -30px rgba(112, 44, 232, .6);

  /* Movimiento */
  --cy-ease: cubic-bezier(.22, 1, .36, 1);
  --cy-ease-spring: cubic-bezier(.34, 1.2, .64, 1);
  --cy-z-fx: 7;

  /* Retícula tecnológica (SVG inline, 72 px, muy baja opacidad) */
  --cy-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 .5H72M.5 0V72' fill='none' stroke='%23F4F5FC' stroke-opacity='.045'/%3E%3C/svg%3E");

  /* Fondo global por capas (lo consume §4.1): dos luces (violeta arriba a la
     izquierda, cyan a la derecha), un rastro magenta abajo, viñeta y degradado
     negro espacial → grafito violeta. Sin grano ni texturas. */
  --cy-bg-image:
    radial-gradient(60% 40% at 12% 8%, rgba(112, 44, 232, .28), rgba(112, 44, 232, 0) 60%),
    radial-gradient(45% 35% at 88% 20%, rgba(48, 217, 240, .14), rgba(48, 217, 240, 0) 60%),
    radial-gradient(50% 40% at 70% 95%, rgba(217, 53, 220, .12), rgba(217, 53, 220, 0) 65%),
    radial-gradient(130% 110% at 50% 45%, rgba(9, 10, 22, 0) 55%, rgba(9, 10, 22, .55) 100%),
    linear-gradient(180deg, #0B0C1C 0%, #090A16 40%, #0E0B20 100%);
}


/* ============================================================================
   §4.13 Movimiento: las animaciones de esta piel se ven siempre, también con
   «reducir movimiento» del sistema (decisión de la tienda). Solo se pausan con
   la pestaña oculta (theme-cyberday-fx.js pone html.cy-paused).
   ========================================================================== */
html.theme-cyber.cy-paused .cy-fx,
html.theme-cyber.cy-paused .cy-fx *,
html.theme-cyber.cy-paused .cy-sky * {
  animation-play-state: paused !important;
}


/* ============================================================================
   §4.1 Fondo general — Digital Pulse (sistema global, todas las páginas)
   Un solo fondo para todo el sitio: negro espacial con dos luces (violeta y
   cyan), un rastro magenta abajo y viñeta (tokens --cy-bg-image en §2), más
   una retícula de 72px casi imperceptible que se apaga hacia los bordes.
   Encima, la capa .cy-fx que monta theme-cyberday-fx.js: dos luces que
   respiran y dos líneas de luz que cruzan la pantalla cada tanto. Al navegar
   entre páginas el fondo no cambia; en checkout no hay .cy-fx (el JS no la
   monta) pero el fondo y el header son los mismos.
   ========================================================================== */

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

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

/* Retícula tecnológica: visible en el centro de la pantalla, se funde hacia
   los bordes para no competir con las luces. Estática. */
html.theme-cyber body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  background-image: var(--cy-grid);
  background-size: 72px 72px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 85%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 85%);
}

/* Capa de efectos (theme-cyberday-fx.js la agrega al final del body). Va en
   screen sobre la página: aclara apenas las superficies oscuras y no tiñe las
   bandejas claras de las fotos (screen sobre blanco = blanco). z-index 7: por
   encima del contenido, por debajo de header (999), barra Cyber Day (1000),
   cajones y modales. */
html.theme-cyber .cy-fx {
  position: fixed;
  inset: 0;
  z-index: var(--cy-z-fx);
  pointer-events: none;
  overflow: clip;
  mix-blend-mode: screen;
  contain: strict;
}

html.theme-cyber .cy-fx_glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  will-change: transform, opacity;
}

html.theme-cyber .cy-fx_glow--a {
  width: 520px;
  height: 520px;
  left: -160px;
  top: -120px;
  background: rgba(112, 44, 232, .34);
}

html.theme-cyber .cy-fx_glow--b {
  width: 420px;
  height: 420px;
  right: -120px;
  top: 38%;
  background: rgba(48, 217, 240, .18);
}

/* Líneas de luz: 1px, con un tramo brillante en el medio (el gradiente es
   más ancho que la pantalla; translateX lo hace recorrerla). */
html.theme-cyber .cy-fx_flow {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(48, 217, 240, 0) 30%, rgba(48, 217, 240, .7) 50%, transparent 70%);
  will-change: transform, opacity;
}

html.theme-cyber .cy-fx_flow--a {
  top: 34%;
}

html.theme-cyber .cy-fx_flow--b {
  bottom: 22%;
  background: linear-gradient(90deg, transparent, rgba(217, 53, 220, 0) 30%, rgba(217, 53, 220, .55) 50%, transparent 70%);
}

@keyframes cy-glow {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .42; }
  to   { transform: translate3d(30px, 20px, 0) scale(1.08); opacity: .6; }
}

@keyframes cy-flow {
  0%   { transform: translateX(-60%); opacity: 0; }
  10%  { opacity: 1; }
  50%  { opacity: .8; }
  100% { transform: translateX(60%); opacity: 0; }
}

@media all {
  html.theme-cyber .cy-fx_glow {
    animation: cy-glow 14s ease-in-out infinite alternate;
  }

  html.theme-cyber .cy-fx_glow--b {
    animation-delay: -6s;
  }

  html.theme-cyber .cy-fx_flow {
    animation: cy-flow 9s linear infinite;
  }

  html.theme-cyber .cy-fx_flow--b {
    animation-delay: -4.5s;
  }
}

/* Móvil: luces más chicas y desenfoque menor (menos trabajo de compositor). */
@media (max-width: 991px) {
  html.theme-cyber .cy-fx_glow {
    filter: blur(40px);
  }

  html.theme-cyber .cy-fx_glow--a {
    width: 320px;
    height: 320px;
    left: -120px;
    top: -80px;
  }

  html.theme-cyber .cy-fx_glow--b {
    width: 260px;
    height: 260px;
    right: -100px;
  }
}

/* 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-cyber .home-main,
html.theme-cyber .search-main,
html.theme-cyber .product-main,
html.theme-cyber .page-main,
html.theme-cyber .account-main,
html.theme-cyber .orders-main,
html.theme-cyber .adresses-main,
html.theme-cyber .notfound-main {
  background-color: transparent;
}

/* Originales: body .loading-main / body .sidenav-overlay_background
   { background-color: rgba(255,255,255,.85) } → velo oscuro coherente. */
html.theme-cyber body .loading-main,
html.theme-cyber body .sidenav-overlay_background {
  background-color: rgba(9, 10, 22, .62);
}

/* Revelado al entrar al viewport (vitrinas, banners y cajas del footer; el
   JS pone .cy-reveal y después .cy-reveal--in). Solo con JS activo y sin
   «reducir movimiento»: sin JS nada queda oculto. */
html.theme-cyber.cy-js .cy-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--cy-ease), transform 700ms var(--cy-ease);
}

html.theme-cyber.cy-js .cy-reveal--in {
  opacity: 1;
  transform: none;
}


/* ============================================================================
   §4.2 Header — grafito violeta en tres franjas (topbar más oscura, navbar
   con degradado, menú de atajos) separadas por una línea de luz cyan→magenta.
   ========================================================================== */

/* Original: .header { background-color: #002161; position: relative; z-index: 999 }
   El color base cubre lo que no tapan los bloques de abajo (bordes, scroll del
   menú de atajos). */
html.theme-cyber .header {
  background: var(--cy-surface-3);
}

/* Topbar (cotización + páginas). Fondo propio, un paso más oscuro que el
   navbar. Original: .top-content .navbar { border-bottom: 1px solid #2D59AF } */
html.theme-cyber .header .top-content {
  background: #0A0918;
}

html.theme-cyber .top-content .navbar {
  border-bottom-color: var(--cy-line);
}

/* Original: .header-content { position: relative; z-index: 9 } y
   .header-content .navbar { background-color: #002161; height: 122px }
   (custom: 89px). El degradado va en .header-content y el navbar se vuelve
   transparente; la altura no se toca. */
html.theme-cyber .header-content {
  background: linear-gradient(180deg, #1A1532 0%, #140F2A 100%);
  box-shadow: inset 0 -1px 0 rgba(112, 44, 232, .35);
}

html.theme-cyber .header-content .navbar {
  background-color: transparent;
}

/* Línea de luz cyan→magenta en el borde inferior de .header-content (z-index
   9 → stacking context; el pseudo a z -1 queda sobre su fondo y bajo
   logo/buscador). El halo se derrama apenas sobre el menú de atajos (z 8). */
html.theme-cyber .header-content::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: var(--cy-accent-line);
  opacity: .85;
  box-shadow: 0 1px 10px rgba(48, 217, 240, .22);
}

/* Original: .top-pages_link { color: #A3C1FB } → blanco al 72 % (≈11:1 sobre #0A0918) */
html.theme-cyber .top-pages_link {
  color: var(--cy-text-2);
}

html.theme-cyber .top-pages_link:hover,
html.theme-cyber .top-pages_link:focus {
  color: var(--cy-cyan);
}

/* Cotización en el topbar. Original (custom): .header-top-quote, _label,
   _values, _value { color: #ffffff }; _sep { color: rgba(255,255,255,.85) };
   _clickable:hover { color: #ffffff; opacity: .92 }. Etiqueta en gris claro,
   valores en blanco. */
html.theme-cyber .header-top-quote,
html.theme-cyber .header-top-quote_label {
  color: var(--cy-text-2);
}

html.theme-cyber .header-top-quote_values,
html.theme-cyber .header-top-quote_value {
  color: var(--cy-text);
}

html.theme-cyber .header-top-quote_sep {
  color: var(--cy-text-3);
}

html.theme-cyber .header-top-quote_clickable:hover {
  color: var(--cy-cyan);
}

html.theme-cyber .header-top-quote_clickable:hover .header-top-quote_value {
  color: var(--cy-cyan);
}

/* Buscador desktop en vidrio oscuro.
   Original: .search-desktop .form-input { background-color: #fff; border: 1px solid #fff;
   border-radius: 10px !important; color: #242431; height: 56px; ... } y
   :focus { border-color: #009B3A }. Se conservan altura, padding y radio. */
html.theme-cyber .search-desktop .form-input {
  background-color: var(--cy-glass-2);
  border-color: var(--cy-line);
  color: var(--cy-text);
  box-shadow: inset 0 1px 0 rgba(244, 245, 252, .04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .25s var(--cy-ease), box-shadow .25s var(--cy-ease), background-color .25s var(--cy-ease);
}

html.theme-cyber .search-desktop .form-input:focus {
  background-color: rgba(9, 10, 22, .82);
  border-color: rgba(48, 217, 240, .6);
  box-shadow: 0 0 0 3px rgba(48, 217, 240, .15);
}

/* Original: placeholders { color: #24243133 } → blanco al 55 % (≈6:1 sobre el vidrio). */
html.theme-cyber .search-desktop .form-input::placeholder {
  color: var(--cy-text-3);
}

html.theme-cyber .search-desktop .form-input::-webkit-input-placeholder {
  color: var(--cy-text-3);
}

html.theme-cyber .search-desktop .form-input::-moz-placeholder {
  color: var(--cy-text-3);
}

/* Icono lupa: el svg del botón usa path[stroke="#3189CA"] → violeta claro,
   cyan al pasar / enfocar el campo. */
html.theme-cyber .search-desktop .btn svg path {
  stroke: var(--cy-violet-soft);
  transition: stroke .2s;
}

html.theme-cyber .search-desktop .btn:hover svg path,
html.theme-cyber .search-desktop .btn:focus svg path,
html.theme-cyber .search-desktop .form-input:focus ~ .btn svg path {
  stroke: var(--cy-cyan);
}

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

  html.theme-cyber .header-link_account .header-link_icon:hover svg,
  html.theme-cyber .header-link_cart:hover svg.icon_cart {
    filter: drop-shadow(0 0 6px rgba(48, 217, 240, .65));
  }
}

/* Original: .cart_quantity / .header-link_cart .cart_quantity
   { background-color: #3189CA; color: #fff } → cyan con tinta oscura (13:1). */
html.theme-cyber .cart_quantity,
html.theme-cyber .header-link_cart .cart_quantity {
  background-color: var(--cy-cyan);
  color: var(--cy-ink);
}

/* Botón del menú móvil. Original: .header-link_menu__mobile { background-color: #05296E;
   border-radius: 5px; width: 45px; height: 40px } → superficie grafito con
   borde fino por sombra (no suma tamaño). */
html.theme-cyber .header-link_menu__mobile {
  background-color: var(--cy-surface-2);
  box-shadow: 0 0 0 1px var(--cy-line);
}

/* 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. El "borde inferior" va como sombra inset para no sumar 1px. */
html.theme-cyber .header-shortcut-menu {
  --shortcut-bg: #120E25;
  --shortcut-edge: rgba(0, 0, 0, .6);
  --shortcut-scrollbar: rgba(244, 245, 252, .22);
  background: var(--shortcut-bg);
  box-shadow: inset 0 -1px 0 var(--cy-line);
}

/* Iconos de categorías (.header-shortcut-menu_icon / --mask, rosa #dc4181 del
   panel): identidad corporativa, no se recoloran ni se redimensionan. */

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

html.theme-cyber .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: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--cy-ease);
  pointer-events: none;
}

html.theme-cyber .header-shortcut-menu_group__links .header-shortcut-menu_link:hover,
html.theme-cyber .header-shortcut-menu_group__links .header-shortcut-menu_link:focus {
  color: var(--cy-text);
  opacity: 1;
}

html.theme-cyber .header-shortcut-menu_group__links .header-shortcut-menu_link:hover::after,
html.theme-cyber .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-cyber .header-shortcut-menu_item__button .header-shortcut-menu_link {
  transition: opacity .15s ease, transform .2s var(--cy-ease), box-shadow .2s var(--cy-ease);
}

@media (hover: hover) {
  html.theme-cyber .header-shortcut-menu_item__button .header-shortcut-menu_link:hover,
  html.theme-cyber .header-shortcut-menu_item__button .header-shortcut-menu_link:focus {
    box-shadow: 0 0 0 1px rgba(244, 245, 252, .22), 0 6px 20px rgba(112, 44, 232, .4);
    transform: translateY(-1px);
  }
}

/* Línea "arcoíris" (.div-content, bajo el header y sobre el footer).
   Original: #E4CB67, #EB8B44, #DD2C7B, #8F2E7F, #0182DD, #1E52A8 → rampa
   cyan → violeta → magenta → grafito. */
html.theme-cyber .div-content .div-content_item:nth-child(1) {
  background-color: #30D9F0;
}

html.theme-cyber .div-content .div-content_item:nth-child(2) {
  background-color: #5FB4F5;
}

html.theme-cyber .div-content .div-content_item:nth-child(3) {
  background-color: #9A6CFF;
}

html.theme-cyber .div-content .div-content_item:nth-child(4) {
  background-color: #702CE8;
}

html.theme-cyber .div-content .div-content_item:nth-child(5) {
  background-color: #D935DC;
}

html.theme-cyber .div-content .div-content_item:nth-child(6) {
  background-color: #4B1FA6;
}

/* Logo: sin sello ni adornos (identidad corporativa intacta). */


/* Modal de cotizaciones (sections/header.liquid, <style> inline).
   Original: .modal-exchange-rates.active .modal-overlay { background: rgba(0,33,97,.55) };
   -container { box-shadow: 0 16px 48px rgba(0,33,97,.28) }; -header { background:
   linear-gradient(90deg,#02205C,#143678); border-bottom: 2px solid #ffc323; color: #f7edff };
   -header_icon svg { fill: #ffc323 }; .modal-title { color: #fff }; -body { background: #fff };
   -hint { color: #747a86 }; -item { border-bottom: 1px solid #d5e2eb } hover / _selected
   { background-color: #e9effb } _selected { box-shadow: inset 3px 0 0 #3189CA };
   -badge_display { background: rgba(49,137,202,.22); color: #002161 };
   -symbol { color: #2563c9 }; -value { color: #002161 }. */
html.theme-cyber .modal-exchange-rates.active .modal-overlay {
  background: rgba(9, 10, 22, .72);
}

html.theme-cyber .modal-exchange-rates-container {
  background: var(--cy-surface);
  box-shadow: var(--cy-card-shadow), 0 24px 60px -20px rgba(112, 44, 232, .45);
}

html.theme-cyber .modal-exchange-rates-header {
  background: linear-gradient(90deg, #1A1532 0%, #140F2A 100%);
  border-bottom-color: rgba(48, 217, 240, .55);
  color: var(--cy-text);
}

html.theme-cyber .modal-exchange-rates-header_icon svg {
  fill: var(--cy-cyan);
}

html.theme-cyber .modal-exchange-rates .modal-title {
  color: var(--cy-text);
}

html.theme-cyber .modal-exchange-rates-body {
  background: var(--cy-surface);
}

html.theme-cyber .header-quote-modal-hint {
  color: var(--cy-text-2);
}

html.theme-cyber .header-quote-modal-item {
  border-bottom-color: var(--cy-line-2);
  color: var(--cy-text);
}

html.theme-cyber .header-quote-modal-item:hover {
  background-color: var(--cy-surface-2);
}

html.theme-cyber .header-quote-modal-item_selected {
  background-color: var(--cy-surface-2);
  box-shadow: inset 3px 0 0 var(--cy-cyan);
}

html.theme-cyber .header-quote-modal-badge_display {
  background: rgba(48, 217, 240, .16);
  color: var(--cy-cyan);
}

html.theme-cyber .header-quote-modal-symbol {
  color: var(--cy-violet-soft);
}

html.theme-cyber .header-quote-modal-value {
  color: var(--cy-text);
}


/* ============================================================================
   §4.2b Barra Cyber Day (.gz-cd) — misma barra, piel Digital Pulse.
   Solo colores: los tokens --cd-*, letras, bloques del contador, sello, botón,
   aurora y destello se recolorean para integrarla con el header grafito. Las
   medidas y las animaciones de theme-custom.css quedan como están; lo único
   propio es el paso contador → CTA (clases gz-cd--live / gz-cd--burst que ya
   pone el script de la barra) y el pulso suave del botón.
   ========================================================================== */

/* Original (custom): .gz-cd { --cd-neon: #f645fc; --cd-violet: #9b5cff; --cd-cyan: #5ee7ff;
   --cd-text-2: #e6dcff; background: aurora rosa/cian sobre #0a0920…#1d0b3b;
   box-shadow: 0 6px 18px rgba(18,7,44,.32); color: #fff } */
html.theme-cyber .gz-cd {
  --cd-neon: var(--cy-magenta);
  --cd-violet: var(--cy-violet-soft);
  --cd-cyan: var(--cy-cyan);
  --cd-text-2: var(--cy-text-2);
  background:
    radial-gradient(45% 160% at 10% 120%, rgba(48, 217, 240, .12), transparent 62%),
    radial-gradient(40% 180% at 90% -40%, rgba(112, 44, 232, .26), transparent 62%),
    linear-gradient(90deg, #0D0A1F 0%, #17132B 50%, #0D0A1F 100%);
  box-shadow: 0 10px 30px -18px rgba(112, 44, 232, .8), inset 0 -1px 0 rgba(48, 217, 240, .15);
  color: var(--cy-text);
}

/* Línea del borde inferior (sigue corriendo con gz-cd-line). Original: cian /
   neón / violeta repetidos al doble de ancho → cyan → magenta, más tenue. */
html.theme-cyber .gz-cd::after {
  background: linear-gradient(90deg,
    rgba(48, 217, 240, 0) 0%, var(--cy-cyan) 14%, var(--cy-magenta) 32%, rgba(48, 217, 240, 0) 50%,
    var(--cy-cyan) 64%, var(--cy-magenta) 82%, rgba(48, 217, 240, 0) 100%);
  opacity: .75;
}

/* Aurora (::before): violeta/cyan suaves. Partículas (::after): fuera; la
   piel no lleva puntos de luz. */
html.theme-cyber .gz-cd_fx::before {
  background:
    radial-gradient(28% 120% at 30% 50%, rgba(112, 44, 232, .30), transparent 70%),
    radial-gradient(22% 110% at 62% 60%, rgba(217, 53, 220, .12), transparent 70%),
    radial-gradient(18% 120% at 82% 40%, rgba(48, 217, 240, .16), transparent 70%);
}

html.theme-cyber .gz-cd_fx::after {
  background-image: none;
}

/* Marca. Original: .gz-cd_cyber { color: #f645fc; text-shadow rosa } y letras
   #ff86f4 → #b97bff; .gz-cd_day { color: #fff } → «Cyber» en rampa cyan → magenta. */
html.theme-cyber .gz-cd_cyber {
  color: var(--cy-cyan);
  text-shadow: 0 0 8px rgba(48, 217, 240, .35);
}

html.theme-cyber .gz-cd_cyber .gz-cd_l:nth-child(1) { color: #30D9F0; }
html.theme-cyber .gz-cd_cyber .gz-cd_l:nth-child(2) { color: #5CBDF3; }
html.theme-cyber .gz-cd_cyber .gz-cd_l:nth-child(3) { color: #8E9AF6; }
html.theme-cyber .gz-cd_cyber .gz-cd_l:nth-child(4) { color: #B872EE; }
html.theme-cyber .gz-cd_cyber .gz-cd_l:nth-child(5) { color: #D935DC; }

html.theme-cyber .gz-cd_day {
  color: var(--cy-text);
}

/* Original: .gz-cd_hot { color: #fff0fd; text-shadow rosa fuerte } */
html.theme-cyber .gz-cd_hot {
  color: var(--cy-text);
  text-shadow: 0 0 8px rgba(217, 53, 220, .45);
}

/* Contador. Original: .gz-cd_unit { background: blanco 14%→3%; border: 1px solid
   rgba(246,69,252,.55); box-shadow: glow violeta/rosa }; .gz-cd_num { text-shadow rosa };
   .gz-cd_lbl { color: #cdbaff }; .gz-cd_sep { color: var(--cd-neon); text-shadow rosa } */
html.theme-cyber .gz-cd_unit {
  background: rgba(244, 245, 252, .06);
  border-color: var(--cy-line);
  box-shadow: inset 0 1px 0 rgba(244, 245, 252, .05);
}

/* Latido del bloque de segundos (sigue con gz-cd-unit-glow): anillo cyan tenue. */
html.theme-cyber .gz-cd_unit:last-child::after {
  box-shadow: 0 0 0 1px rgba(48, 217, 240, .45), 0 0 12px rgba(48, 217, 240, .3);
}

html.theme-cyber .gz-cd_num {
  text-shadow: none;
}

html.theme-cyber .gz-cd_lbl {
  color: var(--cy-text-2);
}

html.theme-cyber .gz-cd_sep {
  color: var(--cy-cyan);
  text-shadow: none;
}

/* Original: .gz-cd_note { background: rgba(246,69,252,.1); border: 1px solid
   rgba(246,69,252,.55); color: var(--cd-text-2) } ::after { box-shadow rosa } */
html.theme-cyber .gz-cd_note {
  background: rgba(112, 44, 232, .16);
  border-color: rgba(112, 44, 232, .6);
  color: var(--cy-text);
}

html.theme-cyber .gz-cd_note::after {
  box-shadow: 0 0 12px rgba(112, 44, 232, .55), inset 0 0 8px rgba(112, 44, 232, .3);
}

/* CTA. Original: .gz-cd_panel--live:hover/:focus { color: #fff }; :focus-visible
   { outline: 2px solid var(--cd-cyan) } */
html.theme-cyber .gz-cd_panel--live:hover,
html.theme-cyber .gz-cd_panel--live:focus,
html.theme-cyber .gz-cd_panel--live:focus-visible {
  color: var(--cy-text);
}

/* Original: .gz-cd_badge { background: rgba(255,59,139,.16); border: 1px solid
   rgba(255,96,166,.6); color: #ffd3e7 }; .gz-cd_dot { background: #ff3b8b; box-shadow rosa }
   ::after { border: 2px solid rgba(255,59,139,.75) } → sello «En vivo» en cyan. */
html.theme-cyber .gz-cd_badge {
  background: rgba(48, 217, 240, .12);
  border-color: rgba(48, 217, 240, .5);
  color: var(--cy-cyan);
}

html.theme-cyber .gz-cd_dot {
  background: var(--cy-cyan);
  box-shadow: 0 0 8px rgba(48, 217, 240, .8);
}

html.theme-cyber .gz-cd_dot::after {
  border-color: rgba(48, 217, 240, .7);
}

/* Botón. Original: .gz-cd_btn { background: linear-gradient(92deg,#d4149f,#8e2fe0,#3f5fe0);
   box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 6px 18px rgba(246,69,252,.45);
   color: #fff } ::after { brillo blanco 55% }. Degradado cyan → violeta claro →
   magenta suavizado (#C062E6) con tinta oscura: 5.6:1 en el extremo menos claro. */
html.theme-cyber .gz-cd_btn {
  background: linear-gradient(90deg, var(--cy-cyan) 0%, var(--cy-violet-soft) 60%, #C062E6 100%);
  box-shadow: 0 0 0 1px rgba(48, 217, 240, .35), 0 10px 26px -10px rgba(217, 53, 220, .7);
  color: var(--cy-ink);
}

html.theme-cyber .gz-cd_btn::after {
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
}

@media (hover: hover) {
  html.theme-cyber .gz-cd_panel--live:hover .gz-cd_btn {
    box-shadow: 0 0 0 2px rgba(48, 217, 240, .55), 0 14px 34px -10px rgba(217, 53, 220, .9);
  }
}

/* Original: .gz-cd_ends { color: var(--cd-text-2) }; .gz-cd_ends-time { color: #fff } */
html.theme-cyber .gz-cd_ends-time {
  color: var(--cy-text);
}

/* --- Paso contador → CTA ----------------------------------------------------
   El script pone gz-cd--live + gz-cd--burst y oculta el panel del contador
   ([hidden]). Aquí el contador se desvanece hacia arriba en vez de desaparecer
   de golpe (vuelve a display flex como capa absoluta, sin eventos, y termina
   en visibility hidden), una línea de luz recorre la barra una sola vez (el
   ::before del destello original, con otro fondo y otro recorrido), el CTA
   entra desde abajo (gz-cd-in, de la base) y el botón recibe un pulso; después
   late suave cada 4 s, también cuando la página ya carga en vivo. Todo
   transform/opacity, solo sin «reducir movimiento» y nunca en gz-cd--static. */
@keyframes cy-cd-count-out {
  from { opacity: 1; transform: none; visibility: visible; }
  to   { opacity: 0; transform: translateY(-35%); visibility: hidden; }
}

@keyframes cy-cd-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes cy-cd-btn-pop {
  0%   { transform: scale(.94); opacity: .6; }
  55%  { transform: scale(1.08); opacity: 1; }
  100% { transform: none; }
}

@keyframes cy-cd-btn-pulse {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.035); }
}

@media all {
  html.theme-cyber .gz-cd--burst:not(.gz-cd--static) .gz-cd_panel--count[hidden] {
    display: flex !important;
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: cy-cd-count-out .55s var(--cy-ease) both;
  }

  html.theme-cyber .gz-cd--burst:not(.gz-cd--static)::before {
    background: linear-gradient(90deg,
      transparent 38%, rgba(48, 217, 240, .0) 44%, rgba(48, 217, 240, .55) 49%,
      rgba(217, 53, 220, .55) 51%, rgba(217, 53, 220, 0) 56%, transparent 62%);
    animation: cy-cd-sweep 1.1s var(--cy-ease) .1s both;
  }

  html.theme-cyber .gz-cd--burst:not(.gz-cd--static) .gz-cd_btn {
    animation: cy-cd-btn-pop .8s var(--cy-ease-spring) .45s both, cy-cd-btn-pulse 4s ease-in-out 1.4s infinite;
  }

  html.theme-cyber .gz-cd--live:not(.gz-cd--burst):not(.gz-cd--static) .gz-cd_btn {
    animation: cy-cd-btn-pulse 4s ease-in-out 2s infinite;
  }
}


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

/* Original: .showcase-title { color: #12114B; font-size: 35px; margin-bottom: 25px }
   Texto claro sobre el grafito. El subrayado va posicionado en absoluto
   (bottom negativo dentro del margin) para NO cambiar la altura del título
   ni mover el contenido. Cyan → violeta claro: acento, no bloque. */
html.theme-cyber .showcase-title {
  position: relative;
  color: var(--cy-text);
}

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

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

html.theme-cyber .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-cyber .product-showcase .showcase-title::after,
html.theme-cyber .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-cyber .showcase-model-8 .showcase-title {
  color: #fff;
}

html.theme-cyber .showcase-model-8 .showcase-title::after {
  background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta));
}

/* --- Vitrina destacada «Tecnología que sorprende» ------------------------
   El panel entrega la vitrina como .showcase.showcase-model-1 con su
   .showcase-title (texto «Tecnología que sorprende · Cyber Day»); no hay
   kicker ni botón en el markup, y CSS no puede seleccionar por texto. La piel
   expone el gancho .cy-showcase-featured (lo pone templates/home.liquid vía
   customShowcaseClass o el fx cuando el nombre contiene «Tecnología que
   sorprende»). Título con el degradado blanco → violeta claro de la maqueta
   y kicker en cyan por pseudo-elemento, apoyado en el padding-top de la
   sección (no suma altura). Sin botón: el markup del panel no lo ofrece. */
html.theme-cyber .showcase.cy-showcase-featured .showcase-title {
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, #F4F5FC, #B9A8FF 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #F4F5FC;
}

html.theme-cyber .showcase.cy-showcase-featured .showcase-title::before {
  content: 'Cyber Day · 2, 3 y 4 de noviembre';
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cy-cyan);
  -webkit-text-fill-color: var(--cy-cyan);
  white-space: nowrap;
  pointer-events: none;
}

html.theme-cyber .showcase.cy-showcase-featured .showcase-title[style*="center"]::before {
  left: 50%;
  transform: translateX(-50%);
}

html.theme-cyber .showcase.cy-showcase-featured .showcase-title[style*="right"]::before {
  left: auto;
  right: 0;
}

/* Sin subrayado: el degradado del texto ya es el acento. */
html.theme-cyber .showcase.cy-showcase-featured .showcase-title::after {
  display: none;
}

/* Botón «Ver todo» debajo del carrusel: mismo degradado cyan → violeta que el
   CTA de compra, tinta oscura (contraste > 9:1). Original (custom):
   .showcase-model-16 .btn-view-all { píldora #242431, texto blanco }. */
html.theme-cyber .showcase-model-16 .btn-view-all {
  background: linear-gradient(90deg, var(--cy-cyan), var(--cy-violet-soft));
  color: var(--cy-ink);
  box-shadow: 0 12px 30px -14px rgba(48, 217, 240, .9);
}

html.theme-cyber .showcase-model-16 .btn-view-all:hover,
html.theme-cyber .showcase-model-16 .btn-view-all:focus {
  background: linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta));
  color: var(--cy-ink);
  box-shadow: 0 14px 34px -12px rgba(217, 53, 220, .8);
}

html.theme-cyber .showcase-model-16 .btn-view-all:focus-visible {
  outline: 2px solid var(--cy-cyan);
  outline-offset: 3px;
}


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

/* La imagen recibe radio + sombra directamente (el link es display:table
   ajustado a la imagen → no se cambia su display para no alterar el slide). */
html.theme-cyber .showcase-banners_link img.banner-main_img {
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px var(--cy-line-2);
  transition: box-shadow .3s var(--cy-ease);
}

@media (hover: hover) {
  html.theme-cyber .showcase-banners_link:hover img.banner-main_img {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(112, 44, 232, .65), 0 0 24px rgba(112, 44, 232, .18);
  }
}

/* --- Marco luminoso del carrusel principal (primera vitrina de la home) ---
   .showcase-banners ya es position: relative y mide exactamente lo que la
   foto (2128×739 a ancho de contenedor). Marco a -3px, radio 14 + 3 = 17,
   borde cyan fino y sombra violeta/magenta suave. z-index 0 y antes de los
   hijos en el orden de pintado → queda bajo las flechas (.slider__arrow,
   z-index 0, posteriores en el árbol). Sin eventos. */
html.theme-cyber .home-main > .showcase.showcase-model-5:first-child .showcase-banners::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: 0;
  border-radius: 17px;
  border: 1px solid rgba(48, 217, 240, .55);
  box-shadow: 0 0 0 1px rgba(112, 44, 232, .25), 0 30px 80px -40px rgba(112, 44, 232, .9), 0 0 60px -20px rgba(48, 217, 240, .35), 0 0 42px -24px rgba(217, 53, 220, .45);
  pointer-events: none;
  user-select: none;
}

/* Sello «CYBER DAY EDITION»: solo CSS, esquina superior derecha, a caballo
   del borde superior del marco (11px dentro de la foto, zona de esquina
   redondeada donde los banners no llevan texto ni teléfonos). Pintado tras
   los hijos (::after) pero sin solaparse con las flechas (centradas). */
html.theme-cyber .home-main > .showcase.showcase-model-5:first-child .showcase-banners::after {
  content: 'CYBER DAY EDITION';
  position: absolute;
  top: -11px;
  right: 18px;
  z-index: 0;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(48, 217, 240, .5);
  background: var(--cy-surface-3);
  color: var(--cy-cyan);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .14em;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(48, 217, 240, .8);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 991px) {
  html.theme-cyber .home-main > .showcase.showcase-model-5:first-child .showcase-banners::after {
    right: 10px;
    top: -10px;
    padding: 3px 9px;
    font-size: 9px;
  }
}

/* Light trail: un segmento de luz magenta (120×2px, extremos transparentes)
   recorre el marco cada 7 s siguiendo el mismo rectángulo redondeado con
   CSS Motion Path (offset-path = transform compositado; no se anima máscara
   ni fondo). Vive en el .tns-outer que genera tiny-slider (position:
   relative, misma caja que .showcase-banners). Solo con movimiento
   permitido; sin soporte de offset-path no se dibuja nada. */
@media all {
  @supports (offset-path: inset(0 round 1px)) {
    html.theme-cyber .home-main > .showcase.showcase-model-5:first-child .showcase-banners .tns-outer::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 120px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(217, 53, 220, 0), var(--cy-magenta) 50%, rgba(217, 53, 220, 0));
      offset-path: inset(-3px round 17px);
      offset-rotate: auto;
      animation: cy-light-trail 7s linear infinite;
      pointer-events: none;
      user-select: none;
    }
  }

  @keyframes cy-light-trail {
    from {
      offset-distance: 0%;
    }

    to {
      offset-distance: 100%;
    }
  }
}

/* Indicadores (modelos que los muestran; model-5 los oculta de base).
   Original: .showcase-banners .tns-nav>[aria-controls] { background: #ddd;
   box-shadow: 0 2px 4px rgba(0,0,0,.05) } y >.tns-nav-active { background: #999 }
   → vidrio oscuro con el activo en cyan. Tamaño/márgenes intactos. */
html.theme-cyber .showcase-banners .tns-nav > [aria-controls] {
  background: rgba(244, 245, 252, .28);
  box-shadow: 0 0 0 1px rgba(9, 10, 22, .45);
}

html.theme-cyber .showcase-banners .tns-nav > .tns-nav-active {
  background: var(--cy-cyan);
  box-shadow: 0 0 0 1px rgba(9, 10, 22, .45), 0 0 10px rgba(48, 217, 240, .55);
}

/* 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) }.
   Vidrio oscuro; el "borde" 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-cyber .showcase-banners .slider__arrow,
html.theme-cyber .showcase-products .slider__arrow {
  background-color: var(--cy-glass);
  color: var(--cy-text);
  box-shadow: 0 0 0 1px var(--cy-line), 0 8px 20px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

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

html.theme-cyber .showcase-banners .slider__arrow svg path,
html.theme-cyber .showcase-products .slider__arrow svg path {
  stroke: var(--cy-text);
}

/* Original: .showcase-* .slider__arrow:hover { opacity: .8 } */
html.theme-cyber .showcase-banners .slider__arrow:hover,
html.theme-cyber .showcase-banners .slider__arrow:focus,
html.theme-cyber .showcase-products .slider__arrow:hover,
html.theme-cyber .showcase-products .slider__arrow:focus {
  opacity: 1;
  background-color: var(--cy-surface-2);
  box-shadow: 0 0 0 1px rgba(112, 44, 232, .75), 0 8px 20px rgba(0, 0, 0, .35), 0 0 14px rgba(112, 44, 232, .35);
}


/* ============================================================================
   §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. Cyan: icono = acento. */
html.theme-cyber .banner-custom_icon svg [stroke] {
  stroke: var(--cy-cyan);
}

html.theme-cyber .banner-custom_icon svg [fill='#0549BD'] {
  fill: var(--cy-cyan);
}

/* Original: .banner-custom-content { color: #000 }; .banner-custom_title 14px bold */
html.theme-cyber .banner-custom_title {
  color: var(--cy-text);
}

html.theme-cyber .banner-custom_text {
  color: var(--cy-text-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-cyber .banner-custom_item__box {
  background-color: var(--cy-glass);
  border: 1px solid var(--cy-line);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(244, 245, 252, .04);
  transition: border-color .25s var(--cy-ease), box-shadow .25s var(--cy-ease);
}

@media (hover: hover) {
  html.theme-cyber .banner-custom_item__box:hover {
    border-color: rgba(112, 44, 232, .55);
    box-shadow: inset 0 1px 0 rgba(244, 245, 252, .04), 0 10px 26px -14px rgba(112, 44, 232, .6);
  }
}

@media (max-width: 1199px) {
  html.theme-cyber .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 }
   Los iconos son <img> SVG de trazo oscuro: van sobre bandeja clara (misma
   regla que las fotos de producto), sin filtros ni recolor. */
html.theme-cyber .showcase-model-6 .showcase-banners_link--svg {
  background-color: var(--cy-tray);
  border-color: rgba(244, 245, 252, .18);
  box-shadow: 0 0 0 1px rgba(9, 10, 22, .6), 0 12px 28px -16px rgba(0, 0, 0, .8);
  transition: border-color .25s var(--cy-ease), box-shadow .25s var(--cy-ease), transform .25s var(--cy-ease), opacity .25s;
}

@media (hover: hover) {
  html.theme-cyber .showcase-model-6 .showcase-banners_link--svg:hover,
  html.theme-cyber .showcase-model-6 .showcase-banners_link--svg:focus {
    opacity: 1;
    border-color: rgba(112, 44, 232, .75);
    box-shadow: 0 0 0 1px rgba(112, 44, 232, .65), 0 0 0 4px rgba(112, 44, 232, .12), 0 16px 30px -16px rgba(112, 44, 232, .6);
    transform: translateY(-3px);
  }
}

/* Original: .showcase-model-6 .showcase-image-title { color: #12114B99 } */
html.theme-cyber .showcase-model-6 .showcase-image-title {
  color: var(--cy-text-2);
}


/* ============================================================================
   §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-cyber .showcase-model-custom.showcase-model-payment {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(112, 44, 232, .35), transparent 60%),
    linear-gradient(180deg, var(--cy-bg-2), var(--cy-surface-3));
}

/* Luces estáticas (violeta abajo-izquierda / cyan arriba-derecha, 12%) */
html.theme-cyber .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(112, 44, 232, .14), transparent 70%),
    radial-gradient(38% 50% at 92% 0%, rgba(48, 217, 240, .12), transparent 70%);
}

/* Retícula de los tokens, fundida hacia los bordes (reemplaza la decoración
   de temporada; solo desktop). */
html.theme-cyber .showcase-model-custom.showcase-model-payment::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--cy-grid);
  opacity: .5;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 85%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 85%);
}

/* Original: .showcase-model-custom .showcase-payment_tag { background: #fff; color: #829EC8 } */
html.theme-cyber .showcase-model-custom .showcase-payment_tag {
  background: rgba(244, 245, 252, .06);
  color: var(--cy-violet-soft);
  border: 1px solid rgba(112, 44, 232, .45);
}

/* Original: .showcase-payment_title { color: #7B8AA0 } b { color: #000D2E } */
html.theme-cyber .showcase-model-custom .showcase-payment_title {
  color: var(--cy-text-2);
}

html.theme-cyber .showcase-model-custom .showcase-payment_title b {
  color: var(--cy-text);
}

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

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

html.theme-cyber .showcase-model-custom .showcase-payment_title__div span:nth-child(3) {
  background-color: var(--cy-magenta);
}

/* Botón. Original: .showcase-payment_btn { background-color: #F39443; color: #fff }.
   Cyan de acción con tinta oscura (10.8:1); a <1200px el texto es 20px/16px. */
html.theme-cyber .showcase-model-custom .showcase-payment_btn {
  background: var(--cy-cyan);
  color: var(--cy-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(48, 217, 240, .35), 0 12px 28px -12px rgba(48, 217, 240, .8);
  transition: transform .25s var(--cy-ease), box-shadow .25s var(--cy-ease), background .3s, opacity .3s;
}

html.theme-cyber .showcase-model-custom .showcase-payment_btn:hover,
html.theme-cyber .showcase-model-custom .showcase-payment_btn:focus {
  color: var(--cy-ink);
  opacity: 1;
  background: linear-gradient(90deg, var(--cy-cyan), #8FA4FF);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(48, 217, 240, .5), 0 16px 32px -12px rgba(48, 217, 240, .9);
}

/* 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-cyber .showcase-model-custom .showcase-payment_card {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(244, 245, 252, .06);
  transition: box-shadow .3s var(--cy-ease);
}

@media (hover: hover) {
  html.theme-cyber .showcase-model-custom .showcase-payment_card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(112, 44, 232, .55), 0 0 28px rgba(112, 44, 232, .3);
  }
}

@media (max-width: 991px) {
  html.theme-cyber .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. Cuerpo de vidrio oscuro:
   el "borde" va por box-shadow (0 px de layout) y nunca overflow: hidden (el
   botón comprar y los tags sobresalen por diseño). */
html.theme-cyber .showcase-product.card {
  background-color: var(--cy-surface);
  border-radius: 16px;
  box-shadow: var(--cy-card-shadow);
  transition: transform .35s var(--cy-ease), box-shadow .35s var(--cy-ease);
}

@media (hover: hover) {
  html.theme-cyber .showcase-product.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cy-card-shadow-hover);
  }

  /* 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
     violeta se mantiene. El lift queda solo en grids. */
  html.theme-cyber .tns-slider .showcase-product.card:hover {
    transform: none;
  }
}

/* Bandeja clara para la foto. Las fotos de producto traen fondo blanco, así
   que el contenedor real de la imagen (.showcase-product_image, position:
   relative, padding-top: 0) queda claro y la foto se funde con multiply.
   Original: .showcase-product .showcase-product_image { position: relative }
   y .showcase-product_link__image { display: block; width/height: 290px;
   margin: 0 auto; position: relative } (180px en tablet, 150px en móvil). */
html.theme-cyber .showcase-product .showcase-product_image {
  background-color: var(--cy-tray);
  border-radius: 12px;
}

/* Recorte del zoom de la foto: el enlace de la imagen ya mide lo mismo que la
   foto (290/180/150 px), así que el overflow solo recorta los 4 % del hover.
   Los tags (.showcase-tags) y el sello (.showcase-offer) cuelgan de
   .showcase-product_image, no de este enlace: no se recortan. */
html.theme-cyber .showcase-product_link__image {
  overflow: hidden;
  border-radius: 12px;
}

/* Original: .showcase-product_link__image img { margin: auto; position: absolute; inset: 0 }
   + .lazy { transition: opacity 500ms ease-in-out } (se conserva la de opacidad). */
html.theme-cyber .showcase-product_link__image img {
  mix-blend-mode: multiply;
  transition: opacity 500ms ease-in-out, transform 500ms var(--cy-ease);
  will-change: transform;
}

@media (hover: hover) {
  html.theme-cyber .showcase-product.card:hover .showcase-product_link__image img {
    transform: scale(1.04);
  }
}

/* Placeholder sin foto. Original: .showcase-product_link__image svg { fill: rgba(216,216,216,.5) } */
html.theme-cyber .showcase-product_link__image svg {
  fill: rgba(9, 10, 22, .18);
}

/* Original: .showcase-product_link_title { color: #242431 }. opacity: 1 evita el
   `a:hover { opacity: .7 }` global del tema. Violeta claro #9A6CFF sobre
   #17132B: 5.1:1. */
html.theme-cyber .showcase-product_link_title {
  color: var(--cy-text);
}

html.theme-cyber .showcase-product_link_title:hover,
html.theme-cyber .showcase-product_link_title:focus {
  color: var(--cy-violet-soft);
  opacity: 1;
}

/* Precios. Original: .showcase-prices_price { color: #242431 };
   .showcase-prices-price_real { color: #607DB6 }; .showcase-prices_strike { color: #747A86 };
   .showcase-prices_plots { color: #747A86 } (oculto por el tema, se tiñe igual).
   --cy-text-3 (55 % de blanco sobre #17132B ≈ #8F8F9C): 5.7:1. */
html.theme-cyber .showcase-prices_price {
  color: var(--cy-text);
}

html.theme-cyber .showcase-prices-price_real,
html.theme-cyber .showcase-prices_plots {
  color: var(--cy-text-2);
}

html.theme-cyber .showcase-prices_strike {
  color: var(--cy-text-3);
}

/* Sin stock: el mensaje «Producto indisponible» sigue legible (la imagen y el
   título ya bajan a opacidad .5 en theme-custom.css; el precio/mensaje no). */
html.theme-cyber .showcase-prices.showcase-prices_out-of-stock .showcase-prices_price {
  color: var(--cy-text-2);
}

/* Código del producto (sections/showcase-product-code.liquid).
   Original (custom): .showcase-product_code { color: #5B5F70 }; botón copiar
   hover { background: rgba(36,36,49,.07); color: #242431 }; focus-visible
   { outline: 2px solid #21C553 }; .is-copied { color: #13762F };
   .is-failed { color: #B3122D }. Sobre vidrio oscuro: texto --cy-text-2 (8.9:1),
   acentos cyan (11:1). */
html.theme-cyber .showcase-product_code {
  color: var(--cy-text-2);
}

@media (hover: hover) {
  html.theme-cyber .showcase-product_code-copy:hover {
    background-color: rgba(244, 245, 252, .08);
    color: var(--cy-cyan);
  }
}

html.theme-cyber .showcase-product_code-copy:focus-visible {
  outline-color: var(--cy-cyan);
}

html.theme-cyber .showcase-product_code-copy.is-copied {
  color: var(--cy-cyan);
}

html.theme-cyber .showcase-product_code-copy.is-failed {
  color: var(--cy-text);
}

/* Botón comprar. Original: .showcase-product_buy { background-color: #242431 (custom: #21C553);
   color: #fff; border-radius: 4px; font-size: 14px; font-weight: 800 } hover { #1a9941 }.
   14px/800 no cuenta como texto grande: blanco sobre cyan daría 1.5:1 → tinta
   --cy-ink (#090A16 sobre #30D9F0: 11:1; sobre #9A6CFF, extremo del hover: 5.6:1).
   En desktop aparece sobre la bandeja clara al pasar el mouse (opacity 0 → 1 del
   tema base, que no se toca). */
html.theme-cyber .showcase-product_buy,
html.theme-cyber .showcase-product_buy.btn {
  background: var(--cy-cyan);
  border-radius: 10px;
  color: var(--cy-ink);
  box-shadow: 0 10px 26px -12px rgba(48, 217, 240, .9);
  transition: background .3s, box-shadow .3s, color .3s, opacity .3s;
}

html.theme-cyber .showcase-product_buy:hover,
html.theme-cyber .showcase-product_buy:focus,
html.theme-cyber .showcase-product_buy.btn:hover,
html.theme-cyber .showcase-product_buy.btn:focus {
  background: linear-gradient(90deg, var(--cy-cyan), var(--cy-violet-soft));
  color: var(--cy-ink);
  box-shadow: 0 12px 30px -12px rgba(48, 217, 240, 1);
}

/* Tags promo (vidrio oscuro sobre la bandeja clara; texto cyan 11:1).
   Original: .showcase-tag { background-color: #FFE9CC; color: #242431; fill: #242431 }
   y .showcase-tag.showcase-tag-free_offer { background-color: #b9b9e1 } */
html.theme-cyber .showcase-tag,
html.theme-cyber .showcase-tag.showcase-tag-free_offer {
  background-color: rgba(9, 10, 22, .86);
  color: var(--cy-cyan);
  fill: var(--cy-cyan);
  border: 1px solid rgba(48, 217, 240, .35);
  box-shadow: 0 6px 16px -8px rgba(9, 10, 22, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html.theme-cyber .showcase-tag svg {
  fill: var(--cy-cyan);
}

/* Original: .showcase-promo-tag { background-color: #77BC1D; color: #fff }.
   Violeta claro sobre vidrio oscuro: 6.6:1. */
html.theme-cyber .showcase-promo-tag {
  background-color: rgba(9, 10, 22, .86);
  color: var(--cy-violet-soft);
  border: 1px solid rgba(112, 44, 232, .45);
}

/* Sello de destaque (emoji). Original: .showcase-offer { background-color: #3189CA;
   color: #fff; border-radius: 50% } y .showcase-offer_new-product { #242431 } */
html.theme-cyber .showcase-offer,
html.theme-cyber .showcase-offer.showcase-offer_new-product {
  background-color: rgba(9, 10, 22, .86);
  color: var(--cy-text);
  box-shadow: 0 0 0 1px rgba(112, 44, 232, .55);
}


/* Sello «Cyber Day» de los productos de la campaña
   (sections/campaign-cyberday-card-badge.liquid): píldora de tinta oscura con
   borde degradado cyan → violeta → magenta, rayo cyan y un brillo que la
   cruza cada pocos segundos. Va arriba a la izquierda de la bandeja clara de
   la foto (los tags quedan a la derecha) y deja pasar el clic a la foto.
   Original (custom): .cy-card-badge { display: none } fuera de la piel. */
html.theme-cyber .cy-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px 0 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(var(--cy-ink), var(--cy-ink)) padding-box, var(--cy-accent) border-box;
  box-shadow: 0 6px 14px -6px var(--cy-glow-violet);
  color: var(--cy-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

html.theme-cyber .cy-card-badge_icon {
  flex: none;
  width: 9px;
  height: 12px;
  fill: var(--cy-cyan);
  filter: drop-shadow(0 0 3px rgba(48, 217, 240, .75));
}

html.theme-cyber .cy-card-badge_text {
  position: relative;
}

html.theme-cyber .cy-card-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(244, 245, 252, .30) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: cy-card-badge-shine 4.8s var(--cy-ease) infinite;
}

@keyframes cy-card-badge-shine {
  0%, 64% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Con el sello de destaque (.showcase-offer: círculo de 35 px en left 10px,
   top 0) el sello Cyber se corre a su derecha. */
html.theme-cyber .showcase-offer ~ .cy-card-badge {
  top: 6px;
  left: 52px;
}

/* Fotos de 150 px en móvil: píldora más baja para no tapar el producto. */
@media (max-width: 575px) {
  html.theme-cyber .cy-card-badge {
    top: 6px;
    left: 6px;
    gap: 3px;
    height: 18px;
    padding: 0 7px 0 5px;
    font-size: 8.5px;
    letter-spacing: .06em;
  }

  html.theme-cyber .cy-card-badge_icon {
    width: 7px;
    height: 10px;
  }

  /* A su derecha no entra en fotos de 104–124 px (móviles de 320–360 px):
     debajo del círculo. */
  html.theme-cyber .showcase-offer ~ .cy-card-badge {
    top: 41px;
    left: 6px;
  }
}

/* ============================================================================
   §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: grafito oscuro con la
   retícula y una luz violeta arriba a la izquierda, sin cortes contra el fondo
   global (que ya es oscuro). */
html.theme-cyber .showcase-model-8 .showcase-background {
  height: 100%;
  bottom: 0;
  background:
    radial-gradient(55% 60% at 8% 0%, rgba(112, 44, 232, .22), rgba(112, 44, 232, 0) 65%),
    radial-gradient(40% 50% at 96% 100%, rgba(48, 217, 240, .08), rgba(48, 217, 240, 0) 65%),
    var(--cy-grid),
    linear-gradient(180deg, var(--cy-surface-3), var(--cy-bg-2));
  box-shadow: inset 0 1px 0 var(--cy-line-2), inset 0 -1px 0 var(--cy-line-2);
}

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

/* Original: .showcase-model-8 .showcase-title { color: #fff } */
html.theme-cyber .showcase-model-8 .showcase-title {
  color: var(--cy-text);
}

/* Logos (imágenes con fondo blanco). Original: .showcase-model-8 .showcase-banner_link
   { display: flex; max-width: 195px }. Card clara con anillo tenue; al hover
   sube 3px y el anillo pasa a violeta. opacity: 1 evita el a:hover { opacity: .7 }. */
html.theme-cyber .showcase-model-8 .showcase-banner_link {
  background-color: var(--cy-tray);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--cy-line), 0 16px 30px -24px rgba(0, 0, 0, .9);
  transition: transform .25s var(--cy-ease), box-shadow .25s var(--cy-ease), opacity .3s;
}

@media (hover: hover) {
  html.theme-cyber .showcase-model-8 .showcase-banner_link:hover,
  html.theme-cyber .showcase-model-8 .showcase-banner_link:focus {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(112, 44, 232, .65), 0 0 0 4px rgba(112, 44, 232, .12), 0 20px 36px -24px rgba(112, 44, 232, .6);
  }
}


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

/* Original: .footer { background-color: #002161; color: #fff } */
html.theme-cyber .footer {
  position: relative;
  background-color: var(--cy-surface-3);
  color: var(--cy-text);
}

/* Línea de luz cyan→magenta muy tenue justo bajo la .div-content (5px), sin
   reemplazarla (absoluta: 0 px de layout) */
html.theme-cyber .footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  pointer-events: none;
  background: var(--cy-accent-line);
  opacity: .35;
}

/* Original: .footer a { color: #fff }; .footer a:hover { color: #8C8C8C; opacity: 1 }.
   Los enlaces de menú bajan a --cy-text-2 (≈ #B4B4C1 sobre #120E25: 9.6:1);
   los datos de contacto (teléfono, mail, redes) siguen en blanco. */
html.theme-cyber .footer-page_link,
html.theme-cyber .footer-brand_link,
html.theme-cyber .footer-content_second a {
  color: var(--cy-text-2);
}

html.theme-cyber .footer a:hover,
html.theme-cyber .footer a:focus {
  color: var(--cy-cyan);
}

/* Original (custom): .footer-contact_central_email { color: #fff } hover { color: #fff; opacity: .88 } */
html.theme-cyber .footer-contact_central_email:hover,
html.theme-cyber .footer-contact_central_email:focus {
  color: var(--cy-cyan);
  opacity: 1;
}

/* 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-cyber .footer-box_contact__card {
  background: linear-gradient(180deg, rgba(112, 44, 232, .14), rgba(9, 10, 22, .40));
  border-color: rgba(112, 44, 232, .40);
  box-shadow: inset 0 0 54px rgba(112, 44, 232, .12), 0 24px 44px -30px rgba(0, 0, 0, .9);
}

/* Original (custom): .footer-contact_locations_divider { background: rgba(255,255,255,.28) } */
html.theme-cyber .footer-contact_locations_divider {
  background: var(--cy-line);
}

/* Redes sociales. Original (custom): .footer-social__card .social-icons__link
   { border: 1px solid #E8A045 } svg { fill: #E8A045 } hover { background: #E8A045 } svg { fill: #fff } */
html.theme-cyber .footer-social__card .social-icons__link {
  border-color: rgba(48, 217, 240, .55);
  transition: background-color .2s, border-color .2s;
}

html.theme-cyber .footer-social__card .social-icons__link svg,
html.theme-cyber .footer-social__card .social-icons__link svg>* {
  fill: var(--cy-cyan);
}

html.theme-cyber .footer-social__card .social-icons__link:hover,
html.theme-cyber .footer-social__card .social-icons__link:focus {
  background-color: var(--cy-cyan);
  border-color: var(--cy-cyan);
}

html.theme-cyber .footer-social__card .social-icons__link:hover svg,
html.theme-cyber .footer-social__card .social-icons__link:hover svg>*,
html.theme-cyber .footer-social__card .social-icons__link:focus svg,
html.theme-cyber .footer-social__card .social-icons__link:focus svg>* {
  fill: var(--cy-ink);
}

/* Títulos. Original: .footer_title (blanco por herencia). Pequeña línea
   cyan→violeta bajo cada título (absoluta: 0 px de layout) */
html.theme-cyber .footer_title {
  position: relative;
  color: var(--cy-text);
}

html.theme-cyber .footer_title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--cy-cyan), var(--cy-violet-soft));
  pointer-events: none;
}

/* Separadores. Original (custom): .footer-box_page__brands .footer_title__group
   { border-bottom: 2px solid rgba(255,255,255,.35) };
   .footer-content_main .footer-box_brand .footer_title { border-bottom: 2px solid #153471 } */
html.theme-cyber .footer-box_page__brands .footer_title__group,
html.theme-cyber .footer-content_main .footer-box_brand .footer_title {
  border-bottom-color: var(--cy-line);
}

/* El título de marcas lleva su propia regla completa: la línea corta no se
   superpone al separador largo. */
html.theme-cyber .footer-box_page__brands .footer_title__group::after {
  bottom: -2px;
}

/* Acordeones móviles (theme-custom.css, ≤ 1024px): solo colores; medidas,
   estados y transiciones del acordeón intactos. */
@media (max-width: 1024px) {
  /* Original (custom): .footer-columns_menus_inner { border: 1px solid rgba(255,255,255,.16); border-radius: 14px } */
  html.theme-cyber .footer-content_main .footer-columns_menus_inner {
    background: linear-gradient(180deg, rgba(23, 19, 43, .92), rgba(9, 10, 22, .96));
    border-color: var(--cy-line);
    box-shadow: inset 0 1px 0 rgba(244, 245, 252, .04), 0 20px 40px -30px rgba(0, 0, 0, .9);
  }

  /* Original (custom): .footer-mobile-accordion { border-bottom: 1px solid rgba(255,255,255,.14) } */
  html.theme-cyber .footer-mobile-accordion {
    border-bottom-color: var(--cy-line);
  }

  /* Original (custom): .footer-mobile-accordion__trigger { background: transparent; color: #fff } */
  html.theme-cyber .footer-mobile-accordion__trigger {
    color: var(--cy-text);
  }

  html.theme-cyber .footer-mobile-accordion.is-open .footer-mobile-accordion__trigger {
    background: linear-gradient(90deg, rgba(48, 217, 240, .06), rgba(112, 44, 232, .05) 60%, transparent);
  }

  /* Original (custom): outline: 2px solid #f7992c */
  html.theme-cyber .footer-mobile-accordion__trigger:focus-visible,
  html.theme-cyber .footer-brands_progress__toggle:focus-visible,
  html.theme-cyber .footer-brands_all-link:focus-visible {
    outline-color: var(--cy-cyan);
  }

  /* Original (custom): .footer-mobile-accordion__indicator { border: 1px solid rgba(255,255,255,.3) }
     ::before/::after { background: #f7992c }; [aria-expanded=true] { border-color: rgba(247,153,44,.72) } */
  html.theme-cyber .footer-mobile-accordion__indicator {
    border-color: rgba(48, 217, 240, .45);
  }

  html.theme-cyber .footer-mobile-accordion__indicator::before,
  html.theme-cyber .footer-mobile-accordion__indicator::after {
    background: var(--cy-cyan);
  }

  html.theme-cyber .footer-mobile-accordion__trigger[aria-expanded='true'] .footer-mobile-accordion__indicator {
    border-color: rgba(48, 217, 240, .8);
  }

  /* Original (custom): .footer-brands_progress { border-top: 1px solid rgba(255,255,255,.1) };
     .footer-brands_progress__toggle { color: #f6a33e }; .footer-brands_all-link { color: #fff;
     text-decoration-color: rgba(255,255,255,.45) } */
  html.theme-cyber .footer-brands_progress {
    border-top-color: var(--cy-line-2);
  }

  html.theme-cyber .footer-brands_progress__toggle,
  html.theme-cyber .footer-brands_all-link:hover,
  html.theme-cyber .footer-brands_all-link:focus {
    color: var(--cy-cyan);
  }

  html.theme-cyber .footer-brands_all-link {
    color: var(--cy-text-2);
    text-decoration-color: rgba(244, 245, 252, .35);
  }

  html.theme-cyber .footer-brands_iso img {
    filter: drop-shadow(0 0 12px rgba(112, 44, 232, .18));
  }
}

/* Original: .footer-content_second { background-color: #021B4C } */
html.theme-cyber .footer-content_second {
  position: relative;
  background-color: var(--cy-bg);
  border-top: 1px solid var(--cy-line-2);
}


/* ============================================================================
   §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-cyber .nav-main_link,
html.theme-cyber .footer-page_link {
  transition: color .2s var(--cy-ease), opacity .2s;
}

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

  html.theme-cyber .btn.btn-primary:hover,
  html.theme-cyber .btn.btn-primary:focus {
    box-shadow: 0 0 0 1px rgba(48, 217, 240, .35), 0 10px 26px -12px rgba(48, 217, 240, .8);
  }
}
/* ============================================================================
   §4.15 Digital Pulse — componentes (global + específicos de la home)
   El fondo vive en §4.1 (global). Aquí: textos y componentes adaptados al
   negro espacial. 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-cyber .showcase-title {
  color: var(--cy-text);
}

html.theme-cyber .home-main .showcase-model-6 .showcase-image-title {
  color: var(--cy-text-2);
}

/* --- Tarjetas informativas bajo el banner (franja institucional) ---------- */
/* Vidrio oscuro: misma caja que las cards de producto. */
html.theme-cyber .home-main .banner-custom_item__box {
  background-color: var(--cy-glass);
  border-color: transparent;
  box-shadow: var(--cy-card-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .35s var(--cy-ease), box-shadow .35s var(--cy-ease);
}

@media (hover: hover) {
  html.theme-cyber .home-main .banner-custom_item__box:hover {
    transform: translateY(-4px);
    box-shadow: var(--cy-card-shadow-hover);
  }
}

html.theme-cyber .home-main .banner-custom_title {
  color: var(--cy-text);
}

html.theme-cyber .home-main .banner-custom_text {
  color: var(--cy-text-2);
}

/* Íconos de línea azul (#0549BD) → cyan de acento. */
html.theme-cyber .home-main .banner-custom_icon svg [stroke] {
  stroke: var(--cy-cyan);
}

html.theme-cyber .home-main .banner-custom_icon svg [fill='#0549BD'] {
  fill: var(--cy-cyan);
}

/* --- Categorías: tiles de vidrio, íconos claros --------------------------- */
html.theme-cyber .home-main .showcase-model-6 .showcase-banners_link--svg {
  background-color: var(--cy-surface);
  border-color: transparent;
  box-shadow: var(--cy-card-shadow);
  transition: transform .35s var(--cy-ease), box-shadow .35s var(--cy-ease);
}

/* Los íconos de las categorías de la home son <img> SVG de trazo oscuro
   (distintos de las máscaras del menú de atajos, que no se tocan): invertidos
   a blanco tecnológico con un filtro estático (se rasteriza una vez). */
html.theme-cyber .home-main .showcase-model-6 .showcase-banners_link--svg img.banner-grid--svg {
  filter: invert(1) brightness(.95);
}

@media (hover: hover) {
  html.theme-cyber .home-main .showcase-model-6 .showcase-banners_link--svg:hover,
  html.theme-cyber .home-main .showcase-model-6 .showcase-banners_link--svg:focus {
    transform: translateY(-4px);
    box-shadow: var(--cy-card-shadow-hover);
  }
}

/* --- Banners: sombra profunda acorde al fondo oscuro (imágenes intactas) -- */
html.theme-cyber .showcase-banners_link img.banner-main_img {
  box-shadow: 0 0 0 1px var(--cy-line), 0 30px 60px -36px rgba(0, 0, 0, .95);
}

/* Cards de producto: vidrio oscuro (§4.6); aquí la sombra de reposo. */
html.theme-cyber .showcase-product.card {
  box-shadow: var(--cy-card-shadow);
}

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

/* --- Marcas destacadas: fundido inferior a transparente (no a papel) ------ */
html.theme-cyber .home-main .showcase-model-8 .showcase-background {
  background:
    radial-gradient(40% 70% at 92% 100%, rgba(48, 217, 240, .10), transparent 70%),
    radial-gradient(120% 90% at 50% -10%, rgba(112, 44, 232, .26), transparent 60%),
    linear-gradient(180deg, var(--cy-surface), var(--cy-bg));
  /* Arriba: entra fundiéndose desde el fondo (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-cyber .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 Digital Pulse
   Lenguaje de la home aplicado a todo el sitio, con intensidad decreciente:
     · el negro espacial (§4.1) es el fondo de todas las páginas;
     · catálogo y ficha: superficies de vidrio oscuro, sin efectos;
     · lo que queda sobre el fondo (migas, títulos, contadores, filtros,
       paginación) pasa a texto claro con acentos cyan;
     · formularios, cuenta, pedidos, páginas institucionales, carrito y
       checkout: superficie clara (bandeja) donde hay cantidades, campos y
       pagos; solo el fondo y la cabecera quedan oscuros.
   Las fotos de producto van siempre sobre bandeja clara y no reciben filtros.
   Modales, dropdowns del tema y avisos conservan su apariencia clara.
   ========================================================================== */

/* --- Superficie clara compartida (cards de páginas: registro, cuenta,
       pedidos, direcciones, institucionales) ------------------------------- */
/* Original: .card { background #fff; border 1px solid #E3E3E8 }. Bandeja
   clara con la línea de acento arriba; los textos de adentro siguen oscuros. */
html.theme-cyber .card.card-page,
html.theme-cyber .card.card-pages-nav,
html.theme-cyber .page-accordion {
  background-color: var(--cy-tray);
  background-image: var(--cy-accent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
  border-color: transparent;
  box-shadow: var(--cy-card-shadow);
}

/* --- Migas de pan (catálogo, búsqueda, marcas, producto) ------------------- */
/* Original: .search-breadcrumb-item / .product-breadcrumb a { color #12114B }. */
html.theme-cyber .search-breadcrumb-item,
html.theme-cyber .search-breadcrumb-item a,
html.theme-cyber .product-breadcrumb .breadcrumb .breadcrumb-item,
html.theme-cyber .product-breadcrumb .breadcrumb .breadcrumb-item a {
  color: var(--cy-text-2);
}

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

@media (hover: hover) {
  html.theme-cyber .search-breadcrumb-item a:hover,
  html.theme-cyber .product-breadcrumb .breadcrumb .breadcrumb-item a:hover {
    color: var(--cy-cyan);
    opacity: 1;
  }
}

/* Separador (flecha SVG de trazo #242431 en el tema) → gris claro. */
html.theme-cyber .search-breadcrumb-item:not(:last-child):after,
html.theme-cyber .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='%23A9ABC4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

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

/* --- Catálogo / búsqueda / marcas (.search-main) --------------------------- */
/* Original: .search-title { color #242431 }. */
html.theme-cyber .search-main .search-title,
html.theme-cyber .search-main .search-title h1 {
  color: var(--cy-text);
}

/* Originales: .search-options_top (≤991) / .search-options .form-label /
   .search-mobile-toolbar_count { color #242431 }. */
html.theme-cyber .search-main .search-options_top,
html.theme-cyber .search-main .search-options_top p,
html.theme-cyber .search-main .search-options_top .form-label,
html.theme-cyber .search-main .search-header__brand-desc,
html.theme-cyber .search-main .search-mobile-toolbar_count,
html.theme-cyber .search-main .search-mobile-toolbar_order .form-label {
  color: var(--cy-text-2);
}

html.theme-cyber .search-main .search-mobile-toolbar_count strong {
  color: var(--cy-text);
}

/* Original (≤991): .search-options_top { border-bottom 1px solid #12114B0D }. */
@media (max-width: 991px) {
  html.theme-cyber .search-main .search-options_top {
    border-bottom-color: var(--cy-line);
  }
}

/* Iconos grilla/lista. Original: .search-view_link svg { fill #242431 }. */
html.theme-cyber .search-main .search-view_link svg {
  fill: var(--cy-text);
}

/* "Ordenar por": botón y desplegable spectre en vidrio oscuro (solo dentro
   del catálogo). Originales: .search-main .form-group .dropdown>.btn
   { background #F3F3F6; color #12114B; fill #12114B }; .search-mobile-toolbar_order
   .dropdown>.btn { background #f3f4f6; border #e5e7eb; color #374151 };
   .search-main .form-group .dropdown ul { background #fff }, ul li { background
   #F3F3F6 }, ul * { color #12114B }; .menu .menu-item>a:hover { background
   #f1f1fc; color #242431 }. */
html.theme-cyber .search-main .search-options_top .form-group .dropdown > .btn,
html.theme-cyber .search-main .search-mobile-toolbar_order .form-group .dropdown > .btn {
  background: var(--cy-surface-2);
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--cy-line);
  color: var(--cy-text);
}

html.theme-cyber .search-main .search-options_top .form-group .dropdown > .btn:focus,
html.theme-cyber .search-main .search-mobile-toolbar_order .form-group .dropdown > .btn:focus {
  box-shadow: 0 0 0 1px rgba(48, 217, 240, .7), 0 0 0 4px rgba(48, 217, 240, .18);
}

html.theme-cyber .search-main .search-options_top .form-group .dropdown > .btn svg,
html.theme-cyber .search-main .search-mobile-toolbar_order .form-group .dropdown > .btn svg {
  fill: var(--cy-text);
}

html.theme-cyber .search-main .search-options_top .form-group .dropdown ul,
html.theme-cyber .search-main .search-options_top .menu,
html.theme-cyber .search-main .search-mobile-toolbar_order .form-group .dropdown ul,
html.theme-cyber .search-main .search-mobile-toolbar_order .menu {
  background: var(--cy-surface);
  box-shadow: 0 0 0 1px var(--cy-line), 0 18px 40px -18px rgba(0, 0, 0, .9);
  color: var(--cy-text);
}

html.theme-cyber .search-main .search-options_top .form-group .dropdown ul li,
html.theme-cyber .search-main .search-mobile-toolbar_order .form-group .dropdown ul li {
  background-color: transparent;
}

html.theme-cyber .search-main .search-options_top .form-group .dropdown ul *,
html.theme-cyber .search-main .search-options_top .menu .menu-item > a,
html.theme-cyber .search-main .search-mobile-toolbar_order .form-group .dropdown ul *,
html.theme-cyber .search-main .search-mobile-toolbar_order .menu .menu-item > a {
  color: var(--cy-text);
}

html.theme-cyber .search-main .search-options_top .menu .menu-item > a:hover,
html.theme-cyber .search-main .search-options_top .menu .menu-item > a:focus,
html.theme-cyber .search-main .search-options_top .menu .menu-item > a:active,
html.theme-cyber .search-main .search-options_top .menu .menu-item > a.active,
html.theme-cyber .search-main .search-mobile-toolbar_order .menu .menu-item > a:hover,
html.theme-cyber .search-main .search-mobile-toolbar_order .menu .menu-item > a:focus,
html.theme-cyber .search-main .search-mobile-toolbar_order .menu .menu-item > a:active,
html.theme-cyber .search-main .search-mobile-toolbar_order .menu .menu-item > a.active {
  background: rgba(112, 44, 232, .28);
  color: var(--cy-text);
}

/* --- Filtros del catálogo (.sf-panel, escritorio y cajón móvil) ------------
   Piel Cyber sobre el diseño base de theme-custom.css: panel de vidrio
   oscuro, bordes sutiles y acento cyan en contador, foco, casillas y slider;
   violeta en chips. Solo colores: estructura, accordion y comportamiento son
   del diseño base. Originales: .sf-panel { --sf-bg #fff; --sf-line #e6e8ef;
   --sf-text #242431; --sf-text-2 #5a6478; --sf-accent #2563c9; --sf-field-bg
   #f4f5f9; --sf-chip-bg #eef1f9 }. */
html.theme-cyber .search-main .sf-panel {
  --sf-bg: var(--cy-surface);
  --sf-line: var(--cy-line);
  --sf-text: var(--cy-text);
  --sf-text-2: var(--cy-text-2);
  --sf-accent: var(--cy-cyan);
  --sf-field-bg: rgba(9, 10, 22, .55);
  --sf-chip-bg: rgba(112, 44, 232, .22);
  background-color: var(--cy-glass);
  background-image:
    radial-gradient(60% 40% at 100% 0%, rgba(112, 44, 232, .14), rgba(112, 44, 232, 0) 70%),
    linear-gradient(180deg, rgba(31, 26, 56, .6) 0%, rgba(23, 19, 43, 0) 60%);
  background-repeat: no-repeat;
  border-color: transparent;
  box-shadow: var(--cy-card-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html.theme-cyber .search-main .sf-foot {
  background: rgba(23, 19, 43, .96);
}

html.theme-cyber .search-main .sf-body,
html.theme-cyber .search-main .sf-list--scroll {
  scrollbar-color: rgba(48, 217, 240, .35) transparent;
}

html.theme-cyber .search-main .sf-body::-webkit-scrollbar-thumb,
html.theme-cyber .search-main .sf-list--scroll::-webkit-scrollbar-thumb {
  background: rgba(48, 217, 240, .35);
}

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

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

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

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

html.theme-cyber .search-main .sf-panel .search-filter-link_category.active .form-radio .form-icon:after {
  background-color: var(--cy-cyan);
}

/* Casillas y radios sobre vidrio oscuro. */
html.theme-cyber .search-main .sf-panel .form-checkbox .form-icon,
html.theme-cyber .search-main .sf-panel .form-radio .form-icon {
  border-color: rgba(244, 245, 252, .35);
  background-color: rgba(9, 10, 22, .4);
  box-shadow: none;
}

html.theme-cyber .search-main .sf-panel .form-checkbox input:checked + .form-icon {
  background: var(--cy-cyan);
  border-color: var(--cy-cyan);
}

html.theme-cyber .search-main .sf-panel .form-checkbox input:checked + .form-icon:before {
  border-color: var(--cy-ink);
}

html.theme-cyber .search-main .sf-panel .form-checkbox input:focus + .form-icon,
html.theme-cyber .search-main .sf-panel .form-radio input:focus + .form-icon {
  box-shadow: 0 0 0 2px rgba(48, 217, 240, .35);
}

/* Contador de filtros activos: tinta sobre cyan (12:1). */
html.theme-cyber .search-main .sf-badge {
  background: var(--cy-cyan);
  color: var(--cy-ink);
}

html.theme-cyber .search-main .sf-chip {
  color: var(--cy-text);
  box-shadow: inset 0 0 0 1px rgba(112, 44, 232, .55);
}

html.theme-cyber .search-main .sf-chip_remove:hover,
html.theme-cyber .search-main .sf-chip_remove:focus-visible {
  background: rgba(112, 44, 232, .4);
  color: var(--cy-text);
}

html.theme-cyber .search-main .sf-tree-toggle:hover,
html.theme-cyber .search-main .sf-tree-toggle:focus-visible {
  background: rgba(112, 44, 232, .28);
  color: var(--cy-text);
}

html.theme-cyber .search-main .sf-close {
  color: var(--cy-text);
}

html.theme-cyber .search-main .sf-panel .form-input.sf-search_input {
  border-color: var(--cy-line);
  color: var(--cy-text);
}

html.theme-cyber .search-main .sf-panel .form-input.sf-search_input::placeholder {
  color: var(--cy-text-3);
}

html.theme-cyber .search-main .sf-panel .form-input.sf-search_input:focus {
  border-color: rgba(48, 217, 240, .7);
  box-shadow: 0 0 0 2px rgba(48, 217, 240, .22);
}

/* Pastillas de variación (talle/color) sobre vidrio. */
html.theme-cyber .search-main .sf-panel .search-filter_variation__button .search-filter-variation_link {
  background-color: rgba(9, 10, 22, .4);
  border-color: var(--cy-line);
  color: var(--cy-text);
}

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

html.theme-cyber .search-main .sf-panel .search-filter-price_values {
  color: var(--cy-text);
}

html.theme-cyber .search-main .sf-panel .search-filter-price .noUi-target {
  background-color: rgba(244, 245, 252, .16);
}

html.theme-cyber .search-main .sf-panel .search-filter-price .noUi-connect {
  background: var(--cy-cyan);
}

html.theme-cyber .search-main .sf-panel .search-filter-price .noUi-handle {
  background-color: var(--cy-cyan);
  box-shadow: 0 0 0 3px rgba(48, 217, 240, .22);
}

/* Botón "Filtrar": acción → cyan con tinta oscura (12:1). */
html.theme-cyber .search-main .sf-panel .search-filters-btn_finish {
  border: 1px solid transparent;
  background-color: var(--cy-cyan);
  color: var(--cy-ink);
}

html.theme-cyber .search-main .sf-panel .search-filters-btn_finish:hover,
html.theme-cyber .search-main .sf-panel .search-filters-btn_finish:focus {
  background-color: #5CE3F4;
  color: var(--cy-ink);
  box-shadow: 0 10px 26px -12px rgba(48, 217, 240, .9);
}

/* Barra "Filtrar por" del móvil (abre el cajón) y fondo del cajón.
   Originales (≤991): .search-options_mobile--genz { background #fff };
   .search-mobile-filter-bar { background rgba(18,17,75,.05) }; título
   #242431; icono #9b8fb8. */
html.theme-cyber .search-main .search-options_mobile--genz {
  background-color: transparent;
}

html.theme-cyber .search-main .search-options_mobile--genz .search-mobile-filter-bar {
  background-color: var(--cy-glass);
  box-shadow: inset 0 0 0 1px var(--cy-line), inset 0 -1px 0 rgba(48, 217, 240, .35);
}

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

html.theme-cyber .search-main .search-options_mobile--genz .search-mobile-filter-bar_icon {
  color: var(--cy-cyan);
}

/* El ícono del panel (config.json icons.searchFilter) trae fill #242431 fijo. */
html.theme-cyber .search-main .search-options_mobile--genz .search-mobile-filter-bar_icon svg path {
  fill: currentColor;
}

@media (max-width: 991px) {
  html.theme-cyber .search-main .search-options_mobile--genz .search-options-body_item.open .search-filters {
    background: var(--cy-surface);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .6), inset 1px 0 0 rgba(48, 217, 240, .3);
  }
}

/* Paginación. Originales: pastillas { background #fff; color #242431 },
   separador :before #EDEEF2, activa { background #242431; color #fff },
   flechas { background #2d2d3d; border #2f2f40 }; en móvil (≤991) la caja
   .search-options_bottom { background #fff; border rgba(0,0,0,.1) }. */
@media (max-width: 991px) {
  html.theme-cyber .search-options.search-options_bottom {
    background-color: var(--cy-glass);
    border-color: transparent;
    box-shadow: var(--cy-card-shadow);
  }
}

html.theme-cyber .search-options-pagination a.search-options-pagination_link:not(.search-options-pagination_link__arrow) {
  background-color: var(--cy-surface);
  color: var(--cy-text);
  box-shadow: inset 0 0 0 1px var(--cy-line);
}

html.theme-cyber .search-options-pagination a.search-options-pagination_link:not(.search-options-pagination_link__arrow):before {
  background-color: var(--cy-line);
}

/* Página activa: tinta sobre cyan (12:1). */
html.theme-cyber .search-options.search-options_bottom .search-options-pagination_item.active a.search-options-pagination_link,
html.theme-cyber .search-options.search-options_bottom .search-options-pagination_item.active a.search-options-pagination_link:hover,
html.theme-cyber .search-options.search-options_bottom .search-options-pagination_item.active a.search-options-pagination_link:focus {
  background-color: var(--cy-cyan);
  color: var(--cy-ink);
}

html.theme-cyber .search-options-pagination a.search-options-pagination_link__arrow {
  background-color: var(--cy-surface-2);
  border-color: rgba(112, 44, 232, .55);
}

html.theme-cyber .search-options-pagination a.search-options-pagination_link__arrow:not(.disable):focus,
html.theme-cyber .search-options-pagination a.search-options-pagination_link__arrow:not(.disable):hover {
  background-color: var(--cy-violet);
  border-color: var(--cy-violet);
  box-shadow: 0 10px 24px -12px rgba(112, 44, 232, .9);
}

/* "Ver más productos": botón oscuro del tema → CTA cyan (texto tinta).
   Original: .search-btn-pagination { background #1b1b23; color #fff }. */
html.theme-cyber .search-btn-pagination {
  background: var(--cy-cyan);
  color: var(--cy-ink);
  box-shadow: 0 10px 26px -12px rgba(48, 217, 240, .8);
}

html.theme-cyber .search-btn-pagination:hover,
html.theme-cyber .search-btn-pagination:focus {
  background: linear-gradient(90deg, #30D9F0, #8FA4FF);
  color: var(--cy-ink);
}

/* Catálogo continuo (theme-infinite-scroll.js). Originales: .gz-is /
   .gz-is-prev heredan el color del main; spinner con currentColor. */
html.theme-cyber .gz-is,
html.theme-cyber .gz-is-prev {
  color: var(--cy-text-2);
}

html.theme-cyber .gz-is_spinner {
  border-color: var(--cy-cyan);
  border-right-color: transparent;
  opacity: 1;
}

/* --- Ficha de producto (.product-main) ------------------------------------- */
/* Original: .product-main { color #242431 }. */
html.theme-cyber .product-main {
  color: var(--cy-text);
}

/* Vidrio oscuro 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-cyber .product-main .product-header-container {
  position: relative;
  isolation: isolate;
}

html.theme-cyber .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(--cy-glass);
  background-image: radial-gradient(60% 50% at 100% 0%, rgba(112, 44, 232, .12), rgba(112, 44, 232, 0) 70%);
  box-shadow: var(--cy-card-shadow);
  pointer-events: none;
}

/* Galería: las fotos traen fondo blanco → bandeja clara (zoom y miniaturas).
   Originales: .product-zoom_link / .product-gallery_link { background #f6f5f8 },
   .product-gallery_link.image-main { border-color rgba(36,36,49,.15) }. */
html.theme-cyber .product-main .product-zoom_link,
html.theme-cyber .product-main .product-gallery_link {
  background-color: var(--cy-tray);
  border-color: var(--cy-tray);
}

html.theme-cyber .product-main .product-gallery_link.image-main {
  border-color: var(--cy-cyan);
  box-shadow: 0 0 0 1px var(--cy-cyan);
}

/* Textos de la cabecera. Originales: .product-title #242431B2; .product-sku,
   .product-sku b, .product-stock #7c8096; .product-prices_price #242431;
   .product-prices_strike #5F6473; .product-prices-price_real #607DB6;
   .product-qtd_title #000; .product-variations_title #242431. */
html.theme-cyber .product-main .product-title,
html.theme-cyber .product-main .product-prices_price,
html.theme-cyber .product-main .product-variations_title {
  color: var(--cy-text);
}

html.theme-cyber .product-main .product-sku,
html.theme-cyber .product-main .product-sku b,
html.theme-cyber .product-main .product-stock,
html.theme-cyber .product-main .product-prices-price_real,
html.theme-cyber .product-main .product-prices_plots,
html.theme-cyber .product-main .product-prices-importTax,
html.theme-cyber .product-main .product-qtd_title {
  color: var(--cy-text-2);
}

html.theme-cyber .product-main .product-box_prices .product-prices_strike,
html.theme-cyber .product-main .product-prices_strike {
  color: var(--cy-text-3);
}

/* Cantidad. Originales: .input-group_qtd { background #fff; border #EDEEF2 },
   .btn color #D9D9D9, .form-input { background #fff; color #12114B }. */
html.theme-cyber .product-main .input-group_qtd {
  background-color: rgba(9, 10, 22, .55);
  border-color: var(--cy-line);
}

html.theme-cyber .product-main .input-group_qtd .btn {
  color: var(--cy-text-2);
}

html.theme-cyber .product-main .input-group_qtd .btn:hover,
html.theme-cyber .product-main .input-group_qtd .btn:focus {
  color: var(--cy-cyan);
}

html.theme-cyber .product-main .input-group_qtd .form-input {
  background-color: transparent;
  color: var(--cy-text);
}

/* Variaciones (botones). Originales: .product-variation_link { background
   #12114B0D; border #12114B0D; color #242431 }; activa { border #242431 }. */
html.theme-cyber .product-main .product-variations_content__button .product-variation_link {
  background-color: rgba(9, 10, 22, .4);
  border-color: var(--cy-line);
  color: var(--cy-text);
}

html.theme-cyber .product-main .product-variations_content__button .product-variation_item.active .product-variation_link:not(.product-variation_link__colors) {
  border-color: var(--cy-cyan);
  box-shadow: 0 0 0 1px var(--cy-cyan);
}

/* CTA principal "Añadir a la bolsa": del grafito del tema al cyan del botón
   de compra de la home (texto tinta: 12:1). "Comprar ya" pasa a botón
   secundario de vidrio (borde claro, texto claro). Originales: .product-btn
   { background #242431; border #242431; color #fff }; .product-btn_buy
   { background #fff; border #0e0e14; color #0e0e14 }. */
html.theme-cyber .product-main .product-btn.product-btn_addCart {
  border-color: transparent;
  background: var(--cy-cyan);
  color: var(--cy-ink);
  box-shadow: 0 10px 26px -12px rgba(48, 217, 240, .8);
}

html.theme-cyber .product-main .product-btn.product-btn_addCart:hover,
html.theme-cyber .product-main .product-btn.product-btn_addCart:focus {
  border-color: transparent;
  background: linear-gradient(90deg, #30D9F0, #8FA4FF);
  color: var(--cy-ink);
}

html.theme-cyber .product-main .product-btn.product-btn_buy {
  border-color: rgba(244, 245, 252, .35);
  background-color: rgba(244, 245, 252, .04);
  color: var(--cy-text);
}

html.theme-cyber .product-main .product-btn.product-btn_buy:hover,
html.theme-cyber .product-main .product-btn.product-btn_buy:focus {
  border-color: rgba(48, 217, 240, .7);
  background-color: rgba(48, 217, 240, .08);
  color: var(--cy-text);
}

/* Descripción + especificaciones: el contenedor ya tiene su padding propio
   (50px 40px); solo cambia la superficie. Original: .product-descriptions-
   container>.col-12 { background #BBBBD30D; border-radius 10px }. */
html.theme-cyber .product-main .product-descriptions-container > .col-12 {
  border-radius: 18px;
  background-color: var(--cy-glass);
  box-shadow: var(--cy-card-shadow);
}

/* Originales: .product-description_header #242431; .product-description_body
   #12114B80, table color #000 / borde #D5E2EB; .product-attributes_table th/td
   { color #12114B; border #D5E2EB }, th background #fafafa, td #12114B80;
   .product-description .icon_arrow_down (fill oscuro). */
html.theme-cyber .product-main .product-description_header {
  color: var(--cy-text);
}

html.theme-cyber .product-main .product-description_body {
  color: var(--cy-text-2);
}

html.theme-cyber .product-main .product-description_body table,
html.theme-cyber .product-main .product-attributes_table th {
  color: var(--cy-text);
  border-color: var(--cy-line);
}

html.theme-cyber .product-main .product-description_body td,
html.theme-cyber .product-main .product-attributes_table td {
  color: var(--cy-text-2);
  border-color: var(--cy-line);
}

html.theme-cyber .product-main .product-attributes_table th {
  background-color: rgba(244, 245, 252, .05);
}

html.theme-cyber .product-main .product-description .icon_arrow_down,
html.theme-cyber .product-main .product-description .icon_arrow_down path {
  fill: var(--cy-text);
}

/* Reseñas. Originales: .product-reviews #242431; .product-review-data
   #12114B66; .star-rating #ccc. */
html.theme-cyber .product-main .product-reviews {
  color: var(--cy-text);
}

html.theme-cyber .product-main .product-review-data {
  color: var(--cy-text-3);
}

html.theme-cyber .product-main .product-review-star .star-rating {
  color: rgba(244, 245, 252, .25);
}

/* --- 404 / sin resultados (.notfound-main) --------------------------------- */
/* Originales: .notfound-text #242431; .notfound-btn { background #242431;
   color #fff }. */
html.theme-cyber .notfound-text {
  color: var(--cy-text);
}

html.theme-cyber .notfound-btn,
html.theme-cyber .notfound-btn:hover,
html.theme-cyber .notfound-btn:focus {
  background: var(--cy-cyan);
  color: var(--cy-ink);
  box-shadow: 0 10px 26px -12px rgba(48, 217, 240, .8);
}

/* Estado vacío de la categoría Cyber Day (sections/campaign-cyberday-empty):
   la tarjeta neón de theme-custom.css (borde #f645fc, glow fuerte, botón
   magenta) pasa al vidrio del tema: borde violeta, sin glow, CTA con el
   degradado de acento y tinta oscura (≥ 4.9:1 en todo el degradado). */
html.theme-cyber .gz-cyber-empty_card {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(112, 44, 232, .22), rgba(112, 44, 232, 0) 65%),
    radial-gradient(60% 80% at 0% 100%, rgba(48, 217, 240, .10), rgba(48, 217, 240, 0) 60%),
    var(--cy-surface);
  border: 1px solid rgba(112, 44, 232, .55);
  box-shadow: var(--cy-card-shadow-hover);
  color: var(--cy-text);
}

html.theme-cyber .gz-cyber-empty_title {
  color: var(--cy-text);
  text-shadow: none;
}

html.theme-cyber .gz-cyber-empty_text {
  color: var(--cy-text-2);
}

html.theme-cyber .gz-cyber-empty_btn,
html.theme-cyber .gz-cyber-empty_btn:hover,
html.theme-cyber .gz-cyber-empty_btn:focus {
  background: var(--cy-accent);
  color: var(--cy-ink);
  box-shadow: 0 0 0 1px rgba(48, 217, 240, .35), 0 12px 28px -12px rgba(217, 53, 220, .7);
}

html.theme-cyber .gz-cyber-empty_btn:focus-visible {
  outline-color: var(--cy-cyan);
}

/* --- Carrito lateral (.sidenav-overlay_cart): lo mínimo ------------------- */
/* El panel sigue claro (cantidades y precios): solo la línea de acento arriba
   y el botón de finalizar compra en cyan. Original: .sidenav-overlay .btn
   :not(.btn-access) { background #242431; border #242431; color #fff }. */
html.theme-cyber .sidenav-overlay_cart {
  background-image: var(--cy-accent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
}

html.theme-cyber .sidenav-overlay_cart .btn.btn-checkout,
html.theme-cyber .sidenav-overlay_cart .sidenav-footer .btn:not(.btn-access):not(.btn-link) {
  background-color: var(--cy-cyan);
  border-color: var(--cy-cyan);
  color: var(--cy-ink);
}

html.theme-cyber .sidenav-overlay_cart .btn.btn-checkout:hover,
html.theme-cyber .sidenav-overlay_cart .btn.btn-checkout:focus,
html.theme-cyber .sidenav-overlay_cart .sidenav-footer .btn:not(.btn-access):not(.btn-link):hover,
html.theme-cyber .sidenav-overlay_cart .sidenav-footer .btn:not(.btn-access):not(.btn-link):focus {
  background-color: #5CE3F4;
  border-color: #5CE3F4;
  color: var(--cy-ink);
}

/* --- Checkout (decoración mínima, máxima claridad) ------------------------- */
/* Hoja clara (bandeja) con la línea de acento arriba, bajo la cabecera oscura
   (header-checkout toma el header de §4.2). Sin efectos (el JS no monta la
   capa FX en checkout). Todo el contenido (pasos, formularios, resumen, cupón)
   conserva sus colores originales sobre una superficie clara. Original:
   .checkout-main sin fondo propio (hereda html #fff). */
html.theme-cyber .checkout-main {
  background-color: var(--cy-tray-2);
  background-image: var(--cy-accent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
}

/* Candado "sitio seguro" de la cabecera del checkout. Original: .header
   .icon-ssl svg { fill #555573 }. */
html.theme-cyber .header-checkout .icon-ssl svg {
  fill: var(--cy-text-2);
}

/* Ficha: notas de envío y seguridad bajo «Comprar ya» (store.productInfo).
   Original: .product-info { color: #24243199 } · .product-info_list { border: 1px solid #0000000D }
   El icono de envío es un SVG del panel con trazo #242431: se aclara con un filtro
   (el de seguridad, verde #14CF14, queda igual). */
html.theme-cyber .product-info {
  color: var(--cy-text-2);
}
html.theme-cyber .product-info b {
  color: var(--cy-text);
}
html.theme-cyber .product-info_list {
  border-color: var(--cy-line);
  background: rgba(244, 245, 252, .03);
}
html.theme-cyber .product-info_item:first-child .product-info_icon svg {
  filter: invert(1) brightness(1.6);
}


/* ============================================================================
   §4.17 Megamenú de categorías (desktop ≥ 992px) — vidrio oscuro con retícula
   Solo presentación: mismas medidas, estructura y comportamiento (abre con el
   :hover del tema y Alpine setupMenuDesktop marca .active). Superficies:
   caja = grafito oscuro con la retícula de los tokens y dos luces tenues
   (violeta arriba a la izquierda, cyan abajo a la derecha); columna izquierda
   = grafito violeta; panel de subcategorías = transparente sobre la caja.
   Hover = borde violeta tenue; categoría abierta = borde cyan. Sin glow.
   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) {
  /* Original: .nav-main-box { box-shadow: 1px 6px 20px 4px rgba(0,0,0,.22) } */
  html.theme-cyber .nav-main-box {
    background-color: var(--cy-surface-3);
    background-image:
      var(--cy-grid),
      radial-gradient(48% 40% at 0% 0%, rgba(112, 44, 232, .16), rgba(112, 44, 232, 0) 70%),
      radial-gradient(40% 36% at 100% 100%, rgba(48, 217, 240, .07), rgba(48, 217, 240, 0) 70%),
      linear-gradient(180deg, #15112A 0%, #120E25 55%, #0F0C20 100%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-size: 72px 72px, auto, auto, auto;
    /* Borde fino (sombra de 1px: no suma tamaño) y sombra profunda. */
    box-shadow:
      0 0 0 1px var(--cy-line),
      0 26px 60px rgba(0, 0, 0, .6);
    color: var(--cy-text);
  }

  /* Línea de luz superior (cyan → magenta) junto al header. */
  html.theme-cyber .nav-main-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 1;
    pointer-events: none;
    background: var(--cy-accent-line);
    opacity: .6;
  }

  /* Original: .nav-main-box_first { background-color: #f8f9fe; border-right: .5px solid #e2e6ee } */
  html.theme-cyber .nav-main-box_first {
    background-color: var(--cy-surface);
    background-image: linear-gradient(180deg, rgba(31, 26, 56, .9) 0%, rgba(23, 19, 43, .6) 45%, rgba(18, 14, 37, .7) 100%);
    border-right-color: var(--cy-line);
    box-shadow: inset -14px 0 26px -18px rgba(0, 0, 0, .7);
    color: var(--cy-text);
  }

  /* Original: .nav-main-box-first_title { color: #0d1f4c } */
  html.theme-cyber .nav-main-box-first_title {
    color: var(--cy-text-2);
    /* Separador: línea cyan que se desvanece (sin sumar alto). */
    background: linear-gradient(90deg, rgba(48, 217, 240, .45), rgba(48, 217, 240, 0) 82%) left bottom / 100% 1px no-repeat;
  }

  html.theme-cyber .nav-main-box-first_title svg [stroke]:not([stroke='none']) {
    stroke: var(--cy-cyan);
  }

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

  html.theme-cyber .nav-main-box_first > ul > li + li {
    box-shadow: inset 0 1px 0 var(--cy-line-2);
  }

  /* 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. */
  /* Original: .nav-main-box_first>ul>li a { color: #4a5468 } */
  html.theme-cyber .nav-main-box_first > ul > li > a {
    color: var(--cy-text-2);
    transition: color .2s var(--cy-ease);
  }

  html.theme-cyber .nav-main-box_first .nav-main_children_icon {
    color: var(--cy-text-3);
    transition: color .2s var(--cy-ease);
  }

  /* Íconos SVG del CMS (rellenos oscuros #12100b / #1d1d1b / #020202 o negro
     por defecto): pasan a currentColor; los fill="none" se respetan. No son
     las máscaras rosa del menú de atajos, que no se tocan. */
  html.theme-cyber .nav-main-box_first .nav-main_children_icon svg,
  html.theme-cyber .nav-main-box_first .nav-main_children_icon svg [fill]:not([fill='none']) {
    fill: currentColor;
  }

  html.theme-cyber .nav-main-box_first .icon-viewSubcategories {
    color: var(--cy-text);
  }

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

  /* Original: .nav-main-box_first>ul>li:hover { background-color: #eef1f9 } */
  html.theme-cyber .nav-main-box_first > ul > li:hover {
    background-color: rgba(244, 245, 252, .04);
    border-left-color: rgba(112, 44, 232, .7);
    box-shadow: inset 0 1px 0 var(--cy-line-2), inset 60px 0 50px -50px rgba(112, 44, 232, .18);
  }

  /* Original: .nav-main-box_first>ul>li:hover a { color: #0d1f4c } */
  html.theme-cyber .nav-main-box_first > ul > li:hover > a {
    color: var(--cy-text);
  }

  html.theme-cyber .nav-main-box_first > ul > li:hover .nav-main_children_icon {
    color: var(--cy-violet-soft);
  }

  /* Categoría abierta (Alpine pone .active): borde cyan + fondo cyan tenue.
     Original: .nav-main-box_first>ul>li.nav-children_custom.active
     { background-color: #e9effb; border-left-color: #2563c9 } */
  html.theme-cyber .nav-main-box_first > ul > li.nav-children_custom.active {
    background-color: rgba(48, 217, 240, .07);
    border-left-color: var(--cy-cyan);
    box-shadow: inset 0 1px 0 var(--cy-line-2), inset 70px 0 56px -52px rgba(48, 217, 240, .16);
  }

  /* Original: … .active .nav-main_children__link { color: #0d1f4c } */
  html.theme-cyber .nav-main-box_first > ul > li.nav-children_custom.active .nav-main_children__link {
    color: var(--cy-text);
  }

  /* Original: … .active .icon-viewSubcategories { color: #2563c9 } */
  html.theme-cyber .nav-main-box_first > ul > li.nav-children_custom.active .nav-main_children_icon,
  html.theme-cyber .nav-main-box_first > ul > li.nav-children_custom.active .icon-viewSubcategories {
    color: var(--cy-cyan);
  }

  /* Panel de subcategorías: transparente sobre la retícula de la caja.
     Original: .nav-main-box_first .nav-main_content__children.dropdown-content { background-color: #ffffff } */
  html.theme-cyber .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-cyber .nav-main-box_first > ul,
  html.theme-cyber .nav-main-box_first .nav-main_content__children.dropdown-content {
    scrollbar-color: rgba(244, 245, 252, .22) rgba(244, 245, 252, .04);
  }

  /* Original: .menu-conteudo-header { border-bottom: .5px solid #e2e6ee } */
  html.theme-cyber .menu-conteudo-header {
    border-bottom-color: transparent;
    border-image: linear-gradient(90deg, rgba(48, 217, 240, .5), rgba(154, 108, 255, .28) 45%, rgba(244, 245, 252, 0) 100%) 1;
  }

  /* Original: .menu-conteudo-header_title { color: #0d1f4c } */
  html.theme-cyber .menu-conteudo-header_title {
    color: var(--cy-text);
  }

  /* Original: .menu-conteudo-header_link { color: #2563c9 } */
  html.theme-cyber .nav-main-box_first .menu-conteudo-header_link {
    color: var(--cy-cyan);
  }

  /* Original: .menu-conteudo-header_link:hover { color: #1d4fa8 } */
  html.theme-cyber .nav-main-box_first .menu-conteudo-header_link:hover,
  html.theme-cyber .nav-main-box_first .menu-conteudo-header_link:focus {
    color: var(--cy-text);
  }

  /* Original: .nav-main-children_item>.nav-main_children { color: #0d1f4c } */
  html.theme-cyber .nav-main-children_item > .nav-main_children {
    color: var(--cy-text);
    transition: color .2s var(--cy-ease);
  }

  html.theme-cyber .nav-main-children_item > .nav-main_children:hover,
  html.theme-cyber .nav-main-children_item > .nav-main_children:focus {
    color: var(--cy-cyan);
  }

  /* Original: .nav-main-subcategory-link_title { color: #5a6478 } */
  html.theme-cyber .nav-main-subcategory-link_title {
    color: var(--cy-text-2);
  }

  /* Original: .nav-main-subcategory_link:hover .nav-main-subcategory-link_title { color: #2563c9 } */
  html.theme-cyber .nav-main-subcategory_link:hover .nav-main-subcategory-link_title,
  html.theme-cyber .nav-main-subcategory_link:focus .nav-main-subcategory-link_title {
    color: var(--cy-cyan);
  }

  /* Foco por teclado visible sobre el grafito. */
  html.theme-cyber .nav-main_content a:focus-visible {
    outline: 2px solid var(--cy-cyan);
    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.
   ========================================================================== */
/* Original: .sidebar-nav { background-color: #fff; box-shadow: 0 3.2px 8px 0 rgba(0,232,87,.25); color: #242431 } */
html.theme-cyber .sidebar-nav {
  background-color: var(--cy-surface-3);
  background-image:
    var(--cy-grid),
    radial-gradient(70% 40% at 100% 0%, rgba(112, 44, 232, .16), rgba(112, 44, 232, 0) 70%),
    linear-gradient(180deg, #15112A 0%, #120E25 60%, #0F0C20 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 72px 72px, auto, auto;
  box-shadow: 0 0 0 1px var(--cy-line), 0 10px 30px rgba(0, 0, 0, .5);
  color: var(--cy-text);
}

/* Original: .sidebar-nav .sidebar-nav-header { background-color: #fff; border-bottom: 1px solid #CACACA } */
html.theme-cyber .sidebar-nav .sidebar-nav-header {
  background-color: transparent;
  border-bottom-color: transparent;
  /* Separador: línea cyan → transparente (sin sumar alto). */
  background-image: linear-gradient(90deg, rgba(48, 217, 240, .5), rgba(154, 108, 255, .28) 50%, rgba(244, 245, 252, 0) 100%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}

/* Original: .sidebar-nav a.sidebar-nav-link { color: #242431 } */
html.theme-cyber .sidebar-nav a.sidebar-nav-link,
html.theme-cyber .sidebar-nav .sidebar-nav-icon,
html.theme-cyber .sidebar-nav .sidebar-nav-icon_close {
  color: var(--cy-text);
}

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

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

/* Original: .sidebar-nav .sidebar-nav-content, .nav-mobile>li>.nav-mobile_link(:before) { background-color: #fff } */
html.theme-cyber .sidebar-nav .sidebar-nav-content,
html.theme-cyber .sidebar-nav .nav-mobile > li > .nav-mobile_link,
html.theme-cyber .sidebar-nav .nav-mobile > li > .nav-mobile_link:before {
  background-color: transparent;
}

html.theme-cyber .sidebar-nav .nav-mobile > li + li {
  box-shadow: inset 0 1px 0 var(--cy-line-2);
}

/* Original: .sidebar-nav .nav-mobile ul { background-color: #fff } */
html.theme-cyber .sidebar-nav .nav-mobile ul {
  background-color: rgba(23, 19, 43, .75);
}

/* Original: .sidebar-nav .nav-mobile .nav-mobile_link, … a { color: #242431; fill: #242431 } */
html.theme-cyber .sidebar-nav .nav-mobile .nav-mobile_link,
html.theme-cyber .sidebar-nav .nav-mobile .nav-mobile_link a {
  color: var(--cy-text-2);
  fill: var(--cy-text-2);
}

/* Original: … a:active/:focus/:hover { color: #333346 } */
html.theme-cyber .sidebar-nav .nav-mobile .nav-mobile_link a:active,
html.theme-cyber .sidebar-nav .nav-mobile .nav-mobile_link a:focus,
html.theme-cyber .sidebar-nav .nav-mobile .nav-mobile_link a:hover,
html.theme-cyber .sidebar-nav .mm-active > .nav-mobile_link,
html.theme-cyber .sidebar-nav .mm-active > .nav-mobile_link a {
  color: var(--cy-text);
  fill: var(--cy-text);
}

/* Rama abierta: filo cyan a la izquierda (sin mover el texto). */
html.theme-cyber .sidebar-nav .nav-mobile > li.mm-active > .nav-mobile_link {
  box-shadow: inset 3px 0 0 var(--cy-cyan);
}

/* Original: .sidebar-nav .metismenu .has-arrow:after { color: #242431 } */
html.theme-cyber .sidebar-nav .metismenu .has-arrow:after {
  color: var(--cy-cyan);
}

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

/* Foco por teclado visible sobre el grafito. */
html.theme-cyber .sidebar-nav a:focus-visible,
html.theme-cyber .sidebar-nav button:focus-visible {
  outline: 2px solid var(--cy-cyan);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   §4.19 Buscador predictivo (panel .ls-panel de theme-live-search.js)
   Grafito violeta con borde cyan tenue (es la continuación del campo en foco);
   las miniaturas van sobre bandeja clara para que las fotos de producto
   (fondo blanco) se lean bien. Solo colores: la lógica y las medidas del panel
   (posición fija, data-state, teclado) no cambian.
   ------------------------------------------------------------------------ */
/* Original: .ls-panel { background: #fff; color: #242431; border: 1px solid #E6DED4;
   box-shadow: 0 18px 44px rgba(6,4,10,.18), 0 2px 8px rgba(6,4,10,.08) } */
html.theme-cyber .ls-panel {
  background: linear-gradient(180deg, var(--cy-surface-2) 0%, var(--cy-surface) 60%, #15112A 100%);
  color: var(--cy-text);
  border-color: rgba(48, 217, 240, .38);
  box-shadow: 0 0 0 1px rgba(48, 217, 240, .08), 0 22px 50px rgba(0, 0, 0, .55);
}

/* Original: .ls-bar { background: linear-gradient(90deg, #2D59AF, #7B2CBF) } */
html.theme-cyber .ls-bar {
  background: var(--cy-accent);
}

/* Original: .ls-status { color: #5B5F70 }; .ls-list:empty::before (loading) { color: #5B5F70 } */
html.theme-cyber .ls-status,
html.theme-cyber .ls-panel[data-state="loading"] .ls-list:empty::before {
  color: var(--cy-text-2);
}

/* Original: .ls-link:hover/:focus, .ls-item[aria-selected] .ls-link { background: #F4F1FA; box-shadow: inset 3px 0 0 #2D59AF } */
html.theme-cyber .ls-link:hover,
html.theme-cyber .ls-link:focus,
html.theme-cyber .ls-item[aria-selected="true"] .ls-link {
  background: rgba(244, 245, 252, .05);
  box-shadow: inset 3px 0 0 var(--cy-cyan);
}

html.theme-cyber .ls-link:focus-visible {
  outline: 2px solid var(--cy-cyan);
  outline-offset: -2px;
}

/* Original: .ls-thumb { background: #F4EFE8 } — bandeja clara para la foto. */
html.theme-cyber .ls-thumb {
  background: var(--cy-tray);
}

/* Original: .ls-mark { color: #2D59AF } */
html.theme-cyber .ls-mark {
  color: var(--cy-cyan);
}

/* Original: .ls-meta { color: #5B5F70 }; .ls-strike { color: #8A8FA0 } */
html.theme-cyber .ls-meta,
html.theme-cyber .ls-strike {
  color: var(--cy-text-2);
}

/* Original: .ls-local { color: #2D59AF } */
html.theme-cyber .ls-local {
  color: var(--cy-cyan);
}

/* Original: .ls-badge { color: #8A3B2E; background: #FBE9E4 } — sin stock: neutro. */
html.theme-cyber .ls-badge {
  background: rgba(244, 245, 252, .08);
  color: var(--cy-text-2);
}

/* Original: .ls-foot { border-top: 1px solid #E6DED4 } */
html.theme-cyber .ls-foot {
  border-top-color: var(--cy-line);
}

/* Original: .ls-all { color: #2D59AF } */
html.theme-cyber .ls-all {
  color: var(--cy-cyan);
}

/* Original: .ls-all:hover/:focus { background: #F4F1FA; color: #2D59AF } */
html.theme-cyber .ls-all:hover,
html.theme-cyber .ls-all:focus {
  background: rgba(48, 217, 240, .08);
  color: var(--cy-cyan);
}

/* Original: .ls-list { scrollbar-color: #C9C3D6 transparent } */
html.theme-cyber .ls-list {
  scrollbar-color: rgba(244, 245, 252, .25) transparent;
}

html.theme-cyber .ls-list::-webkit-scrollbar-thumb {
  background: rgba(244, 245, 252, .25);
  background-clip: padding-box;
}

/* Original: .ls-section, .ls-note, .ls-exact { color: #5B5F70 } */
html.theme-cyber .ls-section,
html.theme-cyber .ls-note,
html.theme-cyber .ls-exact {
  color: var(--cy-text-2);
}

/* Original: .ls-exact:hover/:focus { color: #242431 } */
html.theme-cyber .ls-exact:hover,
html.theme-cyber .ls-exact:focus {
  color: var(--cy-text);
}

/* Original: .ls-section_badge { color: #8A5A00; background: #FFF1D6 } — tinta sobre cyan. */
html.theme-cyber .ls-section_badge {
  color: var(--cy-ink);
  background: var(--cy-cyan);
}

/* Original: .ls-suggest_btn { border: 1px dashed #C9C3D6; background: #FAF8FD; color: #242431 } */
html.theme-cyber .ls-suggest_btn {
  background: rgba(244, 245, 252, .04);
  border-color: rgba(112, 44, 232, .6);
  color: var(--cy-text);
}

/* Original: .ls-suggest_btn:hover/:focus, .ls-suggest[aria-selected] .ls-suggest_btn { background: #F1ECFA; border-color: #2D59AF } */
html.theme-cyber .ls-suggest_btn:hover,
html.theme-cyber .ls-suggest_btn:focus,
html.theme-cyber .ls-suggest[aria-selected="true"] .ls-suggest_btn {
  background: rgba(112, 44, 232, .14);
  border-color: var(--cy-violet-soft);
}

html.theme-cyber .ls-suggest_btn:focus-visible {
  outline: 2px solid var(--cy-cyan);
  outline-offset: 1px;
}

/* Original: .ls-suggest_icon, .ls-suggest_query strong { color: #2D59AF } */
html.theme-cyber .ls-suggest_icon,
html.theme-cyber .ls-suggest_query strong {
  color: var(--cy-cyan);
}

/* Original: .ls-note_link { color: #2D59AF } */
html.theme-cyber .ls-note_link {
  color: var(--cy-cyan);
}

/* Etiqueta «Búsqueda inteligente» dentro del campo (campo en vidrio oscuro).
   Original: .ls-ai { color: #8A8FA0; border-right: 1px solid #E3E0EA }; .ls-ai svg { color: #2D59AF } */
html.theme-cyber .ls-ai {
  color: var(--cy-text-2);
  border-right-color: var(--cy-line);
}

html.theme-cyber .ls-ai svg {
  color: var(--cy-cyan);
}

/* Dentro del panel oscuro (fila «¿Quisiste decir…?»). */
html.theme-cyber .ls-ai--inline {
  color: var(--cy-text-2);
}

html.theme-cyber .ls-ai--inline svg {
  color: var(--cy-cyan);
}

/* Original: .ls-group { border-top: 1px solid #E6DED4; color: #8A8FA0 } */
html.theme-cyber .ls-group {
  border-top-color: var(--cy-line);
  color: var(--cy-text-2);
}

/* Aviso de búsqueda refinada en la página de resultados.
   Original: .ls-refine { border: 1px solid #DCE3F2; background: #F5F8FE; color: #3B4351 } */
html.theme-cyber .ls-refine {
  background: var(--cy-surface);
  border-color: rgba(112, 44, 232, .45);
  color: var(--cy-text);
}

/* Original: .ls-refine svg, .ls-refine_link { color: #2D59AF } */
html.theme-cyber .ls-refine svg,
html.theme-cyber .ls-refine_link {
  color: var(--cy-cyan);
}

/* Original: .ls-refine_link:hover/:focus { color: #1d3f86 } */
html.theme-cyber .ls-refine_link:hover,
html.theme-cyber .ls-refine_link:focus {
  color: var(--cy-text);
}

/* Original: .ls-pending { color: #8A8FA0 } */
html.theme-cyber .ls-pending {
  color: var(--cy-text-2);
}

/* --- Catálogo continuo: contador, carga y fin de lista ----------------------- */
/* Original (theme-custom.css): .gz-is, .gz-is-prev heredan el color del main. */
html.theme-cyber .gz-is,
html.theme-cyber .gz-is-prev {
  color: var(--cy-text);
}

/* Original: .gz-is_spinner { border: 2px solid currentColor; border-right-color: transparent } */
html.theme-cyber .gz-is_spinner {
  border-color: var(--cy-cyan);
  border-right-color: transparent;
}

html.theme-cyber .gz-is[data-state="done"] .gz-is_msg {
  border-top: 1px solid var(--cy-line);
  padding-top: 14px;
}

html.theme-cyber .gz-is[data-state="error"] .gz-is_msg {
  color: var(--cy-text);
}

/* --- 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 Cyber se adaptan; el tema base no cambia. */
html.theme-cyber .genz-camera-page:not(.genz-fullbleed) > section:first-child h1 {
  color: var(--cy-text) !important;
}

html.theme-cyber .genz-camera-page:not(.genz-fullbleed) > section:first-child [style*="#174572"] {
  color: var(--cy-text-2) !important;
}

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

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

html.theme-cyber .genz-camera-conoce h2 {
  color: var(--cy-text) !important;
}

/* Títulos naranja de las tarjetas (#f39443 sobre claro: 2.1:1): violeta
   #702CE8 sobre #FFFCF8 da 6.3:1. */
html.theme-cyber .genz-camera-conoce [style*="#f39443"] {
  color: var(--cy-violet) !important;
}

/* Código del producto en las tarjetas (theme-custom.css): el color base del
   texto lo decide la card Cyber; acá solo los estados del botón de copiar.
   Original: :hover { background-color: rgba(36,36,49,.07); color: #242431 };
   :focus-visible { outline: 2px solid #21C553 }; .is-copied { color: #13762F } */
@media (hover: hover) {
  html.theme-cyber .showcase-product_code-copy:hover {
    background-color: rgba(244, 245, 252, .08);
    color: var(--cy-text);
  }
}

html.theme-cyber .showcase-product_code-copy:focus-visible {
  outline-color: var(--cy-cyan);
}

html.theme-cyber .showcase-product_code-copy.is-copied {
  color: var(--cy-cyan);
}

/* Categoría Cyber Day en los menús: durante la campaña va primera (sections/header.liquid);
   acá solo se destaca con el cyan de acción y una línea fina, sin tocar su icono. */
html.theme-cyber .nav-children_custom > a.nav-main_children[href*="/cyber-day"] span,
html.theme-cyber .nav-mobile_item a[href*="/cyber-day"] .nav-mobile_text {
  color: var(--cy-cyan);
  font-weight: 700;
}
html.theme-cyber .nav-children_custom > a.nav-main_children[href*="/cyber-day"] {
  box-shadow: inset 2px 0 0 var(--cy-cyan);
}


/* ============================================================================
   §4.20 Fondo con bloques, láminas de luz, naves y hologramas
   - Bloques: paneles tecnológicos biselados con pistas de circuito y nodos,
     en una capa fija sobre el degradado (más presencia en los costados que en
     el centro, para no competir con productos y banners).
   - Láminas de luz: tres placas diagonales translúcidas (violeta, cyan,
     magenta) en las esquinas, como en la dirección de arte; derivan muy lento.
   - .cy-sky (theme-cyberday-fx.js): naves que cruzan la pantalla (clic =
     turbo) y hologramas Cyber Day en los costados. Sin mezcla screen.
   ========================================================================== */

html.theme-cyber {
  /* Paneles + circuitos (tile 320 px): biseles, pistas en ángulo y nodos. */
  --cy-panels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%23F4F5FC' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M18 18h104l14 14v56l-14 14H18z'/%3E%3Cpath d='M158 18h144v66l-16 16H158z'/%3E%3Cpath d='M18 134h70l12 12v96l-12 12H18z'/%3E%3Cpath d='M130 134h88l14 14v40l-14 14h-88z'/%3E%3Cpath d='M250 134h52v120l-14 14h-38z'/%3E%3Cpath d='M130 230h96v72H144l-14-14z'/%3E%3Cpath d='M18 286h86v16H18z'/%3E%3C/g%3E%3Cg fill='%23702CE8' fill-opacity='.05'%3E%3Cpath d='M158 18h144v66l-16 16H158z'/%3E%3Cpath d='M18 134h70l12 12v96l-12 12H18z'/%3E%3C/g%3E%3Cg fill='none' stroke='%2330D9F0' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M136 60h22M122 102v32M100 190h30M232 168h18M276 100v34M226 266h24l10-10V268'/%3E%3Cpath d='M60 102v18l14 14M190 202v28M88 254v20l14 12'/%3E%3C/g%3E%3Cg fill='%2330D9F0' fill-opacity='.35'%3E%3Ccircle cx='158' cy='60' r='2.2'/%3E%3Ccircle cx='122' cy='134' r='2.2'/%3E%3Ccircle cx='130' cy='190' r='2.2'/%3E%3Ccircle cx='250' cy='168' r='2.2'/%3E%3Ccircle cx='276' cy='134' r='2.2'/%3E%3Ccircle cx='190' cy='230' r='2.2'/%3E%3C/g%3E%3Cg fill='%23D935DC' fill-opacity='.35'%3E%3Ccircle cx='74' cy='134' r='2'/%3E%3Ccircle cx='102' cy='286' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* La capa fija de la retícula ahora lleva también los bloques (estáticos). Más
   visibles hacia los costados; en el centro se aclaran para el contenido. */
html.theme-cyber body::after {
  background-image: var(--cy-panels), var(--cy-grid);
  background-size: 320px 320px, 72px 72px;
  background-position: center top, center top;
  opacity: .9;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, .35) 20%, #000 70%);
  mask-image: radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, .35) 20%, #000 70%);
}

/* Láminas de luz diagonales (dentro de .cy-fx, que va en screen). */
html.theme-cyber .cy-fx_blade {
  position: absolute;
  width: 46vmax;
  height: 9vmax;
  border-radius: 1.2vmax;
  transform-origin: center;
  opacity: .55;
  will-change: transform, opacity;
}

html.theme-cyber .cy-fx_blade::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(244, 245, 252, .14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

html.theme-cyber .cy-fx_blade--a {
  left: -14vmax;
  top: 8vh;
  transform: rotate(-32deg);
  background: linear-gradient(90deg, rgba(112, 44, 232, 0), rgba(112, 44, 232, .30) 45%, rgba(217, 53, 220, .18) 70%, rgba(217, 53, 220, 0));
}

html.theme-cyber .cy-fx_blade--b {
  right: -16vmax;
  top: 46vh;
  height: 6vmax;
  transform: rotate(-32deg);
  background: linear-gradient(90deg, rgba(48, 217, 240, 0), rgba(48, 217, 240, .22) 50%, rgba(48, 217, 240, 0));
}

html.theme-cyber .cy-fx_blade--c {
  left: 28vw;
  bottom: -10vmax;
  width: 38vmax;
  height: 5vmax;
  transform: rotate(-32deg);
  background: linear-gradient(90deg, rgba(217, 53, 220, 0), rgba(217, 53, 220, .18) 50%, rgba(112, 44, 232, 0));
}

@keyframes cy-blade-a {
  from { transform: translate3d(0, 0, 0) rotate(-32deg); opacity: .45; }
  to   { transform: translate3d(3vmax, 2vmax, 0) rotate(-32deg); opacity: .7; }
}

@keyframes cy-blade-b {
  from { transform: translate3d(0, 0, 0) rotate(-32deg); opacity: .35; }
  to   { transform: translate3d(-4vmax, -2vmax, 0) rotate(-32deg); opacity: .65; }
}

html.theme-cyber .cy-fx_blade--a { animation: cy-blade-a 22s ease-in-out infinite alternate; }
html.theme-cyber .cy-fx_blade--b { animation: cy-blade-b 28s ease-in-out infinite alternate; }
html.theme-cyber .cy-fx_blade--c { animation: cy-blade-a 34s ease-in-out -9s infinite alternate; }

/* Capa del cielo: naves y hologramas. Fija, sin mezcla; solo las naves
   reciben clics (pointer-events en la nave). Debajo del header (999), la barra
   (1000), el buscador y los menús laterales. */
html.theme-cyber .cy-sky {
  position: fixed;
  inset: 0;
  z-index: var(--cy-z-fx);
  pointer-events: none;
  overflow: hidden;
}

/* Hologramas Cyber Day (solo en los costados anchos). */
html.theme-cyber .cy-holo {
  position: absolute;
  display: block;
  opacity: .55;
  animation: cy-holo-float 7s ease-in-out var(--cy-holo-delay, 0s) infinite;
}

html.theme-cyber .cy-holo_icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px currentColor);
}

html.theme-cyber .cy-holo_icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Barrido de escaneo sobre el holograma. */
html.theme-cyber .cy-holo_icon::after {
  content: '';
  position: absolute;
  inset: -6%;
  background: linear-gradient(180deg, transparent 0 40%, rgba(244, 245, 252, .35) 50%, transparent 60% 100%);
  background-size: 100% 300%;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000, #000);
  animation: cy-holo-scan 3.6s linear var(--cy-holo-delay, 0s) infinite;
  opacity: .6;
}

/* Proyector: elipse de luz debajo. */
html.theme-cyber .cy-holo_base {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -16%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, currentColor, transparent);
  opacity: .5;
  animation: cy-holo-base 7s ease-in-out var(--cy-holo-delay, 0s) infinite;
}

/* Pantallas sin costados libres: el objeto cruza flotando (el JS anima la
   posición). Más tenue porque pasa por encima del contenido. */
html.theme-cyber .cy-holo--drift {
  left: 0;
  top: 0;
  opacity: .5;
  animation: none;
  will-change: transform;
}

html.theme-cyber .cy-holo--cyan { color: var(--cy-cyan); }
html.theme-cyber .cy-holo--violet { color: var(--cy-violet-soft); }

@keyframes cy-holo-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50%      { transform: translate3d(0, -12px, 0) rotate(4deg); }
}

@keyframes cy-holo-scan {
  from { background-position: 0 100%; }
  to   { background-position: 0 -100%; }
}

@keyframes cy-holo-base {
  0%, 100% { transform: scaleX(1); opacity: .5; }
  50%      { transform: scaleX(.7); opacity: .25; }
}

/* Naves. La posición la anima el JS (translate3d); acá forma, estela y turbo. */
html.theme-cyber .cy-ship {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}

html.theme-cyber .cy-ship_body {
  position: relative;
  display: block;
  animation: cy-ship-bob 1.6s ease-in-out infinite;
}

html.theme-cyber .cy-ship--left .cy-ship_body {
  scale: -1 1;
}

html.theme-cyber .cy-ship svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(9, 10, 22, .6)) drop-shadow(0 0 6px rgba(48, 217, 240, .35));
}

/* Estela del motor (detrás, a la izquierda de la nave). */
html.theme-cyber .cy-ship_trail {
  position: absolute;
  right: 92%;
  top: 37%;
  width: 70%;
  height: 10%;
  translate: 0 -50%;
  border-radius: 999px;
  background: linear-gradient(270deg, rgba(48, 217, 240, .95), rgba(112, 44, 232, .55) 45%, rgba(217, 53, 220, 0));
  filter: blur(1.5px);
  transform-origin: right center;
  animation: cy-ship-flame .18s ease-in-out infinite alternate;
}

html.theme-cyber .cy-ship_trail--b {
  top: 63%;
  animation-delay: -.09s;
}

html.theme-cyber .cy-ship:hover .cy-ship_trail {
  width: 95%;
}

/* Luces de posición de las alas: parpadean alternadas. */
html.theme-cyber .cy-ship_light {
  animation: cy-ship-blink 1.2s steps(1, end) infinite;
}

html.theme-cyber .cy-ship_light--b {
  animation-delay: -.6s;
}

@keyframes cy-ship-blink {
  0%   { opacity: 1; }
  50%  { opacity: .15; }
}

/* Turbo: la estela se estira mucho, la nave se alarga apenas y brilla. */
html.theme-cyber .cy-ship.is-boost {
  pointer-events: none;
}

html.theme-cyber .cy-ship.is-boost .cy-ship_trail {
  width: 420%;
  height: 14%;
  background: linear-gradient(270deg, #fff, rgba(48, 217, 240, .95) 18%, rgba(112, 44, 232, .6) 55%, rgba(217, 53, 220, 0));
  filter: blur(2px);
  transition: width .25s cubic-bezier(.2, .8, .2, 1), height .25s;
}

html.theme-cyber .cy-ship.is-boost svg {
  filter: drop-shadow(0 0 12px rgba(48, 217, 240, .9)) drop-shadow(0 0 24px rgba(217, 53, 220, .55));
}

/* Destello del encendido: anillo que se expande y se desvanece. */
html.theme-cyber .cy-ship_burst {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
}

html.theme-cyber .cy-ship_burst::before,
html.theme-cyber .cy-ship_burst::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cy-cyan);
  animation: cy-burst .6s cubic-bezier(.2, .8, .2, 1) forwards;
}

html.theme-cyber .cy-ship_burst::after {
  border-color: var(--cy-magenta);
  animation-delay: .08s;
}

@keyframes cy-ship-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-1.5deg); }
}

@keyframes cy-ship-flame {
  from { transform: scaleX(.85); opacity: .85; }
  to   { transform: scaleX(1.1); opacity: 1; }
}

@keyframes cy-burst {
  from { transform: scale(.4); opacity: 1; }
  to   { transform: scale(5); opacity: 0; }
}

/* Celular: sin hologramas (no hay costados) y bloques más tenues. */
@media (max-width: 991px) {
  html.theme-cyber body::after {
    opacity: .6;
  }
}