/* ============================================================================
   CYBERJUVIA 2026 (29/10 00:00 al 9/11 00:00). Ver static/js/cyber.js.
   Todo cuelga de html.cy-on (lo pone layout.tpl por fecha o con el link secreto) y de
   body:not(.empuje-mayorista): la mayorista no ve nada del Cyber.
   Lima #c8f53c con letra negra = Cyber · rojo #d7261e con letra blanca = Gangas.
   El CSS del tema carga después que el nuestro: por eso va con !important.
   ============================================================================ */

/* Barra lima con cuenta regresiva, ARRIBA DE TODO y la cinta negra justo debajo
   (decidido el 15/10). La cinta es fija y empuje.js le escribe `top: 0` inline con
   !important, así que no se la puede bajar con `top`: se la corre con transform. El
   encabezado (pegajoso) y el relleno del body suman los 30px de la barra. */
.cy-barra { display: none !important; }
html.cy-on body:not(.empuje-mayorista) .cy-barra {
  display: flex !important; justify-content: center; align-items: center; gap: 10px;
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 2147483647;
  background: #c8f53c !important; color: #111 !important; text-decoration: none !important;
  font: 700 11.5px/1 'Inter', Arial, sans-serif !important; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 12px !important; white-space: nowrap; overflow: hidden;
}
html.cy-on body:not(.empuje-mayorista) .cy-barra b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html.cy-on body:not(.empuje-mayorista) .cy-barra i { font-style: normal; font-weight: 500; opacity: .7; }
html.cy-on body:not(.empuje-mayorista) .empuje-home-usp { transform: translateY(30px); }
html.cy-on body.empuje-has-usp:not(.empuje-mayorista) { padding-top: 64px !important; }
html.cy-on body.empuje-has-usp:not(.empuje-mayorista) .js-head-main,
html.cy-on body.empuje-has-usp:not(.empuje-mayorista) .head-main,
html.cy-on body.empuje-has-usp:not(.empuje-mayorista) header { top: 64px !important; }
@media (max-width: 768px) {
  html.cy-on body.empuje-has-usp:not(.empuje-mayorista) { padding-top: 62px !important; }
  html.cy-on body.empuje-has-usp:not(.empuje-mayorista) .js-head-main,
  html.cy-on body.empuje-has-usp:not(.empuje-mayorista) .head-main,
  html.cy-on body.empuje-has-usp:not(.empuje-mayorista) header { top: 62px !important; }
}
/* Con el menú abierto la barra no tapa el panel (la cinta también se esconde). */
html.cy-on body.empuje-menu-abierto .cy-barra,
html.cy-on body[data-empuje-menu-open] .cy-barra { visibility: hidden; }

/* Tarjetas y ficha: el bloque de precio del Cyber */
.cy-precio, .cy-ficha { display: none !important; }
html.cy-on body:not(.empuje-mayorista) .cy-precio,
html.cy-on body:not(.empuje-mayorista) .cy-ficha {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 3px;
  font-family: 'Inter', Arial, sans-serif; font-variant-numeric: tabular-nums; margin: 6px 0 2px;
}
html.cy-on body:not(.empuje-mayorista) .cy-fechas { font-size: 11px; color: #8b8589; letter-spacing: .02em; }
html.cy-on body:not(.empuje-mayorista) .cy-antes { font-size: 13px; color: #8b8589; text-decoration: line-through; }
html.cy-on body:not(.empuje-mayorista) .cy-caja {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 2px 7px 3px; white-space: nowrap;
  background: #c8f53c; color: #111;
}
html.cy-on body:not(.empuje-mayorista) .cy-ga .cy-caja { background: #d7261e; color: #fff; }
html.cy-on body:not(.empuje-mayorista) .cy-caja span { font-size: 12px; font-weight: 600; }
html.cy-on body:not(.empuje-mayorista) .cy-caja b { font-size: 16px; font-weight: 800; }
html.cy-on body:not(.empuje-mayorista) .cy-transf { font-size: 12px; font-weight: 600; color: #1b1b1b; }
html.cy-on body:not(.empuje-mayorista) .cy-otros { font-size: 12px; color: #4a4845; }
html.cy-on body:not(.empuje-mayorista) .cy-ficha { margin: 10px 0 12px; gap: 4px; }
html.cy-on body:not(.empuje-mayorista) .cy-ficha .cy-fechas { font-size: 12px; }
html.cy-on body:not(.empuje-mayorista) .cy-ficha .cy-caja b { font-size: 22px; }
html.cy-on body:not(.empuje-mayorista) .cy-ficha .cy-caja span { font-size: 14px; }

/* En las tarjetas con precio Cyber o Gangas se esconden las líneas de siempre (precio,
   cuotas, transferencia) y el % que TN pone sobre la foto: foto limpia. */
html.cy-on body:not(.empuje-mayorista) .js-item-product.cy-card .item-price-container,
html.cy-on body:not(.empuje-mayorista) .js-item-product.cy-card .js-item-price-container,
html.cy-on body:not(.empuje-mayorista) .js-item-product.cy-card .empuje-card-installments,
html.cy-on body:not(.empuje-mayorista) .js-item-product.cy-card .empuje-card-transfer,
html.cy-on body:not(.empuje-mayorista) .js-item-product.cy-card [class*="payment-discount-price-product-container"],
html.cy-on body:not(.empuje-mayorista) .js-item-product.cy-card .label-offer-percentage,
html.cy-on body:not(.empuje-mayorista) #single-product.cy-card .label-offer-percentage,
html.cy-on body:not(.empuje-mayorista) #single-product.cy-card .empuje-pdp-transfer,
html.cy-on body:not(.empuje-mayorista) #single-product.cy-card .js-price-container {
  display: none !important;
}

/* Inicio: banner del Cyber en lugar del carrusel, y las dos franjas */
.cy-inicio { display: none !important; }
html.cy-on body:not(.empuje-mayorista) .cy-inicio { display: block !important; }
html.cy-on body:not(.empuje-mayorista) .js-home-slider,
html.cy-on body:not(.empuje-mayorista) .js-home-slider-mobile,
html.cy-on body:not(.empuje-mayorista) .empuje-portada-cta { display: none !important; }
html.cy-on body:not(.empuje-mayorista) .cy-hero { position: relative; margin: 0; }
html.cy-on body:not(.empuje-mayorista) .cy-hero img { display: block; width: 100%; height: auto; }
html.cy-on body:not(.empuje-mayorista) .cy-hero-btns {
  position: absolute; left: 0; right: 0; bottom: 4.5%; display: flex; gap: 10px; justify-content: center; padding: 0 16px;
}
html.cy-on body:not(.empuje-mayorista) .cy-hero-btns a {
  flex: 1 1 0; max-width: 220px; text-align: center; padding: 13px 10px; text-decoration: none !important;
  font: 600 12px 'Inter', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.94); color: #111 !important; border: 1px solid #fff;
}
@media (min-width: 769px) {
  /* Compu: botones sobre el bloque de texto de la izquierda, al 76% del alto (decidido 15/10). */
  html.cy-on body:not(.empuje-mayorista) .cy-hero-btns { top: 76%; bottom: auto; left: 5%; right: auto; justify-content: flex-start; padding: 0; }
  html.cy-on body:not(.empuje-mayorista) .cy-hero-btns a { flex: 0 0 200px; }
}
html.cy-on body:not(.empuje-mayorista) .cy-franjas { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
html.cy-on body:not(.empuje-mayorista) .cy-franjas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 18px 10px; text-decoration: none !important; text-align: center;
}
html.cy-on body:not(.empuje-mayorista) .cy-franjas b { font: 800 22px/1 'Inter Tight', 'Inter', Arial, sans-serif; letter-spacing: .04em; }
html.cy-on body:not(.empuje-mayorista) .cy-franjas span { font: 600 13px 'Inter', Arial, sans-serif; }
html.cy-on body:not(.empuje-mayorista) .cy-f-cy { background: #c8f53c; color: #111 !important; }
html.cy-on body:not(.empuje-mayorista) .cy-f-ga { background: #d7261e; color: #fff !important; }
html.cy-on body:not(.empuje-mayorista) .cy-nota {
  margin: 8px 16px 18px; text-align: center; font: 500 12px 'Inter', Arial, sans-serif; color: #6e6862;
}

/* Menú: Cyber y Gangas solo durante el Cyber y nunca para la mayorista (layout.tpl). */
/* Se esconde cuando NO corresponde (en vez de mostrarse cuando sí): así cada entrada
   conserva el display que le da el tema o nuestro menú. */
html:not(.cy-on) .cy-solo, body.empuje-mayorista .cy-solo { display: none !important; }
html.cy-on body:not(.empuje-mayorista) .cy-no { display: none !important; }
html.cy-on body:not(.empuje-mayorista) .empuje-menu-simple li.cy-item a {
  background: #c8f53c; color: #111; font-weight: 700; padding-left: 12px; padding-right: 12px; margin: 6px 0;
}
html.cy-on body:not(.empuje-mayorista) .empuje-menu-simple li.cy-item small { color: #111; font-weight: 600; }
html.cy-on body:not(.empuje-mayorista) .js-nav-desktop-list a.cy-bar-cy {
  background: #c8f53c; color: #111 !important; font-weight: 700 !important; padding: 5px 9px;
}
html.cy-on body:not(.empuje-mayorista) .js-nav-desktop-list a.cy-bar-ga { color: #d7261e !important; font-weight: 600 !important; }