/* =====================================================================
   CGS COMPUTER — tema "Cubo negro" (Opción B). Se carga DESPUÉS de ace-redesign.css.
   Solo cambia la apariencia: la lógica de la tienda es la misma.
   ===================================================================== */
:root {
  --ace-bg: #EEF1F4; --ace-surface: #FFFFFF; --ace-hover: #F4F8FB; --ace-hover-2: #E2F4FE;
  --ace-border: #0B0F14; --ace-border-input: #0B0F14; --ace-border-btn: #0B0F14; --ace-border-check: #0B0F14;
  --ace-text: #0B0F14; --ace-text-2: #343E49; --ace-text-2b: #46505B; --ace-text-2c: #4B5560; --ace-text-3: #5F6A75; --ace-text-3b: #84909C;
  --ace-primary: #0B0F14; --ace-primary-hover: #26303B; --ace-tint: #D9F1FE; --ace-navy: #0B0F14;
  --ace-overlay: rgba(11, 15, 20, .55);
  --ace-shadow-card: 6px 6px 0 #01A6FB;
  --ace-font: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cgs-celeste: #01A6FB; --cgs-head: 'Chakra Petch', 'Saira', sans-serif;
}
.ace-page a:hover { color: #0077C8; }
.ace-search:focus-within, .ace-field input:focus, .ace-select:focus, .ace-input:focus, .ace-opt:has(input:checked) { box-shadow: 0 0 0 3px rgba(1, 166, 251, .35); }
.ace-search { border-width: 2px; border-radius: 4px; }
.ace-search__prompt { color: var(--cgs-celeste); }
.ace-search button { background: var(--cgs-celeste); color: #0B0F14; }
.ace-search button:hover { background: #3BBCFF; }
/* cabecera negra con logo blanco */
.ace-topbar { background: #05080B; border-bottom-color: #1C242D; color: #9AA6B2; }
.ace-topbar strong { color: #fff; }
.ace-page .ace-topbar a { color: #9AA6B2; }
.ace-page .ace-topbar a:hover, .ace-topbar__tc b { color: var(--cgs-celeste); }
.ace-header { border-bottom: 0; }
.ace-header::before { background: rgba(11, 15, 20, .97); }
.ace-logo img { height: 40px; }
.ace-page .ace-header .ace-actions__link { color: #fff; }
.ace-page .ace-header .ace-actions__link:hover { background: rgba(255,255,255,.1); color: #fff; }
.ace-header .ace-cartbtn, .ace-header .ace-iconbtn, .ace-header .ace-favbtn { background: transparent; color: #fff; border-color: #3A4652; }
/* barra de categorías celeste con texto negro, como las caras del cubo */
.ace-catbar { background: var(--cgs-celeste); border-top: 2px solid #0B0F14; border-bottom: 2px solid #0B0F14; }
.ace-catbar__all { background: #0B0F14; color: var(--cgs-celeste); }
.ace-catbar__all:hover { background: #26303B; }
.ace-catbar__burger i { background: var(--cgs-celeste); }
.ace-pill, .ace-page a.ace-pill { color: #0B0F14; background: transparent; font-weight: 700; }
.ace-page a.ace-pill:hover, .ace-pill:hover, .ace-pill[aria-expanded="true"] { background: rgba(11, 15, 20, .12); color: #0B0F14; }
.ace-pill--hot { background: rgba(11, 15, 20, .14); }
.ace-catbar__cta, .ace-page a.ace-catbar__cta, .ace-page a.ace-catbar__cta:hover { background: #0B0F14; color: #fff; animation: none; box-shadow: 3px 3px 0 #fff; border-radius: 4px; }
.ace-catbar__cta svg { color: var(--cgs-celeste); }
/* tarjetas con borde negro y sombra celeste "de bloque" */
.ace-card, .ace-hcard, .ace-pcard, .ace-deal { border-radius: 6px !important; }
.ace-page .ace-card:hover, .ace-page a.ace-pcard:hover { box-shadow: 6px 6px 0 var(--cgs-celeste); transform: translate(-2px, -2px); }
.ace-btn { border-radius: 4px; }
.ace-page h1, .ace-page h2, .ace-page h3, .ace-section__title, .ace-card__price, .ace-deal__price strong { font-family: var(--cgs-head); letter-spacing: 0; }
.ace-page h2 { text-transform: uppercase; }
.ace-deal__bar i, .ace-pc__pbar i, .ace-build__bar i { background: var(--cgs-celeste); }
.ace-ticker i { background: var(--cgs-celeste); box-shadow: 0 0 10px var(--cgs-celeste); }
.ace-build__viz { background: radial-gradient(120% 90% at 70% 10%, #01A6FB 0%, #0B1A26 55%, #05090D 100%); }
.ace-footer { background: #0B0F14; border-top: 0; color: #C3CCD5; }
.ace-footer__col p, .ace-footer__contact { color: #AEB8C2; }
.ace-page .ace-footer a { color: #E6ECF1; }
.ace-footer__label { color: var(--cgs-celeste); }
.ace-footer__social a { border-color: #3A4652; color: #fff; }
.ace-footer__bottom { background: #05080B; border-top: 3px solid var(--cgs-celeste); }
.ace-page .ace-footer__bottom a:hover { color: var(--cgs-celeste); }
.ace-pill--new em, .ace-pca-card__star { color: #0B0F14; }

/* ---------- Menú celeste: cada enlace en su cápsula, Distribución separado ---------- */
.ace-catbar__in { align-items: center; }
.ace-catbar__nav { gap: 4px; padding: 9px 4px 9px 10px; align-items: center; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.ace-catbar__nav.is-fit { -webkit-mask-image: none; mask-image: none; }
.ace-pill, .ace-page a.ace-pill { border: 1.5px solid rgba(11, 15, 20, .55); border-radius: 4px; padding: 6px 9px; font-size: 12.5px; line-height: 1.2; background: rgba(255, 255, 255, .12); }
.ace-page a.ace-pill:hover, .ace-pill:hover, .ace-pill[aria-expanded="true"] { background: #0B0F14; border-color: #0B0F14; color: #fff; }
.ace-pill--new em { font-size: 9px; padding: 2px 5px; }
.ace-catbar__all { padding: 0 16px; }
.ace-catbar__dist { position: relative; margin-left: 12px !important; margin-right: 10px !important; }
.ace-catbar__dist::before { content: ""; position: absolute; left: -11px; top: 4px; bottom: 4px; width: 2px; background: #0B0F14; opacity: .5; pointer-events: none; }
.ace-catbar__cta, .ace-page a.ace-catbar__cta { padding: 0 14px; margin-right: 0; }
@media (max-width: 1360px) { .ace-catbar__all-txt { display: none; } .ace-pill, .ace-page a.ace-pill { padding: 6px 8px; } }

/* ---------- Tarjetas destacadas debajo del banner (horizontales) ---------- */
.ace-hcard, .ace-hero--b .ace-hcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "img title" "img name" "img price" "img btn"; column-gap: 16px; row-gap: 4px; padding: 14px; border-radius: 6px; border: 2px solid #0B0F14; box-shadow: 6px 6px 0 #01A6FB; align-items: center; }
.ace-hcard__title { grid-area: title; font: 700 12px var(--cgs-head); letter-spacing: .12em; text-transform: uppercase; color: #0077C8; }
.ace-hcard__img { grid-area: img; height: 96px; border-radius: 4px; background: var(--ace-bg); }
.ace-hcard__img img { max-height: 80px; }
.ace-hcard__name { grid-area: name; font-weight: 600; color: var(--ace-text); }
.ace-hcard__price { grid-area: price; }
.ace-hcard__price strong { font-family: var(--cgs-head); }
.ace-hcard .ace-btn--tint { grid-area: btn; width: auto; justify-self: start; height: 32px; padding: 0 14px; font-size: 13px; margin-top: 4px; background: #0B0F14; color: #fff; }
.ace-hero .ace-hero__fade { display: none; }
.ace-hero__dot.is-active { background: var(--cgs-celeste) !important; }
.ace-hero .ace-hero__arrow { background: #fff !important; color: #0B0F14 !important; border: 0 !important; border-radius: 4px !important; }

/* ---------- Títulos de sección con el cubo del logo ---------- */
.ace-sec__title { display: inline-flex; align-items: center; gap: 12px; }
.ace-sec__title::before { content: ""; width: 30px; height: 30px; flex: 0 0 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 7v10l-9 5-9-5V7z' fill='%2301A6FB' stroke='%230B0F14' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 2 21 7l-9 5-9-5z' fill='%23fff' stroke='%230B0F14' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 12v10' stroke='%230B0F14' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Banner de remates a la derecha ---------- */
.ace-sec:has(#secRemates) .ace-grid { grid-auto-flow: row dense; }
.ace-sec:has(#secRemates) .ace-grid > .ace-promo { grid-column: -2 / -1; grid-row: 1; }
@media (max-width: 640px) { .ace-sec:has(#secRemates) .ace-grid > .ace-promo { grid-column: auto; grid-row: auto; order: 99; } }

/* Botón de producto — Opción 2 "Bloque": barra negra con celda celeste del carrito; al pasar, se llena de celeste */
.ace-card__add { position: relative; overflow: hidden; height: 44px; border-radius: 8px; border: 0; padding: 0 0 0 44px; justify-content: center; color: #fff;
  background: linear-gradient(90deg, #01A6FB, #01A6FB) left / 0 100% no-repeat, #0B0F14; transition: background-size .3s ease, color .3s ease; }
.ace-card__add::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 44px; background: #01A6FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0F14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / 20px no-repeat; }
a.ace-card__add::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0F14' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ace-card__add::after { content: "AGREGAR"; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
a.ace-card__add::after { content: "VER PRODUCTO"; }
.ace-card__add:hover { background-size: 100% 100%, auto; color: #0B0F14; }
.ace-page a.ace-card__add:hover { color: #0B0F14; }

/* Categorías — Opción 2 "Tarjetas RGB": tarjetas negras, cada categoría con su color neón y borde RGB al pasar */
.ace-cats { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
@media (min-width: 1100px) { .ace-cats { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ace-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
.ace-cat { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; min-height: 0; }
.ace-cat__top { justify-content: center; }
.ace-cat__code { display: none; }
.ace-cat { position: relative; isolation: isolate; background: linear-gradient(160deg, #141D27, #0B0F14 70%) !important; border: 1px solid #1E2A36 !important; border-radius: 16px; padding: 18px 10px 16px; gap: 12px; transition: transform .2s ease; overflow: hidden; }
.ace-cat::before { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: 16px; padding: 2px; opacity: 0; transition: opacity .2s ease;
  background: conic-gradient(from var(--cgs-ang, 0deg), #01A6FB, #7C3AED, #EC4899, #F59E0B, #22C55E, #01A6FB);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ace-cat::after { content: ""; position: absolute; left: 50%; top: 18px; width: 90px; height: 90px; transform: translateX(-50%); z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cgs-c, #01A6FB) 45%, transparent), transparent 70%); }
.ace-cat .ace-ci { --l: color-mix(in srgb, var(--c) 45%, #FFFFFF); --f: var(--c); --fo: .55; width: 64px; height: 64px; flex-basis: 64px; border-radius: 0; border: 0; box-shadow: none; background: transparent; }
.ace-cat .ace-ci svg { width: 46px; height: 46px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 80%, transparent)); }
/* colores neón por categoría (más vivos que los originales) */
.ace-cat .ace-ci--021 { --c: #38BDF8 !important; } .ace-cat .ace-ci--001 { --c: #A78BFA !important; } .ace-cat .ace-ci--002 { --c: #2DD4BF !important; } .ace-cat .ace-ci--003 { --c: #FB923C !important; }
.ace-cat .ace-ci--004 { --c: #4ADE80 !important; } .ace-cat .ace-ci--005 { --c: #FBBF24 !important; } .ace-cat .ace-ci--006 { --c: #F472B6 !important; } .ace-cat .ace-ci--007 { --c: #818CF8 !important; }
.ace-cat .ace-ci--008 { --c: #22D3EE !important; } .ace-cat .ace-ci--009 { --c: #01A6FB !important; } .ace-cat .ace-ci--010 { --c: #C084FC !important; } .ace-cat .ace-ci--011 { --c: #FB7185 !important; }
.ace-cat .ace-ci--012 { --c: #FDBA74 !important; } .ace-cat .ace-ci--013 { --c: #FACC15 !important; } .ace-cat .ace-ci--014 { --c: #94A3B8 !important; } .ace-cat .ace-ci--015 { --c: #5EEAD4 !important; }
.ace-cat .ace-ci--016 { --c: #A78BFA !important; } .ace-cat .ace-ci--017 { --c: #F87171 !important; } .ace-cat .ace-ci--018 { --c: #34D399 !important; } .ace-cat .ace-ci--019 { --c: #67E8F9 !important; } .ace-cat .ace-ci--020 { --c: #E879F9 !important; }
.ace-cat:has(.ace-ci--021) { --cgs-c: #38BDF8; } .ace-cat:has(.ace-ci--001) { --cgs-c: #A78BFA; } .ace-cat:has(.ace-ci--002) { --cgs-c: #2DD4BF; } .ace-cat:has(.ace-ci--003) { --cgs-c: #FB923C; }
.ace-cat:has(.ace-ci--004) { --cgs-c: #4ADE80; } .ace-cat:has(.ace-ci--005) { --cgs-c: #FBBF24; } .ace-cat:has(.ace-ci--006) { --cgs-c: #F472B6; } .ace-cat:has(.ace-ci--007) { --cgs-c: #818CF8; }
.ace-cat:has(.ace-ci--008) { --cgs-c: #22D3EE; } .ace-cat:has(.ace-ci--010) { --cgs-c: #C084FC; } .ace-cat:has(.ace-ci--011) { --cgs-c: #FB7185; } .ace-cat:has(.ace-ci--012) { --cgs-c: #FDBA74; }
.ace-cat:has(.ace-ci--013) { --cgs-c: #FACC15; } .ace-cat:has(.ace-ci--014) { --cgs-c: #94A3B8; } .ace-cat:has(.ace-ci--015) { --cgs-c: #5EEAD4; } .ace-cat:has(.ace-ci--016) { --cgs-c: #A78BFA; }
.ace-cat:has(.ace-ci--017) { --cgs-c: #F87171; } .ace-cat:has(.ace-ci--018) { --cgs-c: #34D399; } .ace-cat:has(.ace-ci--019) { --cgs-c: #67E8F9; } .ace-cat:has(.ace-ci--020) { --cgs-c: #E879F9; }
.ace-cat__name, .ace-page a.ace-cat .ace-cat__name { color: #E6EEF5; font-size: 13px; font-weight: 700; }
.ace-page a.ace-cat:hover { transform: translateY(-4px); }
.ace-page a.ace-cat:hover::before { opacity: 1; animation: cgsRgb 3s linear infinite; }
.ace-page a.ace-cat:hover .ace-cat__name { color: #fff; }
.ace-page a.ace-cat:hover .ace-ci { transform: scale(1.1); }
@property --cgs-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes cgsRgb { to { --cgs-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ace-cat::before { animation: none !important; } }
@media (max-width: 900px) { .ace-cat__name, .ace-page a.ace-cat .ace-cat__name { font-size: 11px !important; overflow-wrap: anywhere; } .ace-cat { padding: 12px 4px; border-radius: 12px; } .ace-cat .ace-ci { width: 48px; height: 48px; flex-basis: 48px; } .ace-cat .ace-ci svg { width: 34px; height: 34px; } .ace-cat__name { font-size: 11px; } .ace-cat::after { width: 64px; height: 64px; top: 10px; } }

/* ---------- Banner: franja oscura a todo el ancho, laterales animados ---------- */
.ace-hero--b, .ace-hero--clasico, .ace-hero--a { position: relative; isolation: isolate; padding-top: 28px; }
.ace-hero:not(.ace-hero--noslides)::before,
.ace-hero:not(.ace-hero--noslides)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: calc(min(min(100vw - 48px, 1272px) / var(--ace-hero-ratio, 1.86), 600px) + 28px + 64px); }
/* fondo: negro con el patrón de cubos del logo y luces celestes */
.ace-hero:not(.ace-hero--noslides)::before {
  background:
    radial-gradient(600px 320px at 8% 20%, rgba(1, 166, 251, .28), transparent 70%),
    radial-gradient(600px 320px at 92% 80%, rgba(1, 166, 251, .24), transparent 70%),
    linear-gradient(30deg, #121a23 12%, transparent 12.5%, transparent 87%, #121a23 87.5%),
    linear-gradient(150deg, #121a23 12%, transparent 12.5%, transparent 87%, #121a23 87.5%),
    linear-gradient(30deg, #121a23 12%, transparent 12.5%, transparent 87%, #121a23 87.5%),
    linear-gradient(150deg, #121a23 12%, transparent 12.5%, transparent 87%, #121a23 87.5%),
    linear-gradient(60deg, #0f161e 25%, transparent 25.5%, transparent 75%, #0f161e 75%),
    #0B0F14;
  background-size: auto, auto, 56px 98px, 56px 98px, 56px 98px, 56px 98px, 56px 98px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 28px 49px, 28px 49px, 0 0, 0 0;
  animation: cgsGrid 40s linear infinite;
}
/* laterales: cubos flotando y partículas celestes */
.ace-hero:not(.ace-hero--noslides)::after {
  --cubo-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 7v10l-9 5-9-5V7z' fill='%2301A6FB' fill-opacity='.18' stroke='%2301A6FB' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M3 7l9 5 9-5M12 12v10' fill='none' stroke='%2301A6FB' stroke-width='1.2'/%3E%3C/svg%3E");
  --cubo-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 7v10l-9 5-9-5V7z' fill='none' stroke='%23FFFFFF' stroke-opacity='.35' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M3 7l9 5 9-5M12 12v10' fill='none' stroke='%23FFFFFF' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E");
  background:
    var(--cubo-o) no-repeat, var(--cubo-b) no-repeat, var(--cubo-o) no-repeat, var(--cubo-o) no-repeat, var(--cubo-b) no-repeat, var(--cubo-o) no-repeat,
    radial-gradient(circle, rgba(1, 166, 251, .9) 0 1.5px, transparent 2px) 0 0 / 140px 120px,
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 1px, transparent 1.5px) 40px 60px / 180px 150px;
  background-size: 54px 54px, 30px 30px, 40px 40px, 60px 60px, 28px 28px, 42px 42px, 140px 120px, 180px 150px;
  background-position: 3% 18%, 7% 62%, 2% 86%, 97% 22%, 93% 55%, 98% 84%, 0 0, 40px 60px;
  animation: cgsFlotar 9s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 646px), transparent calc(50% - 636px), transparent calc(50% + 636px), #000 calc(50% + 646px));
  mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 646px), transparent calc(50% - 636px), transparent calc(50% + 636px), #000 calc(50% + 646px));
}
@keyframes cgsGrid { to { background-position: 0 0, 0 0, 0 -98px, 0 -98px, 28px -49px, 28px -49px, 0 -98px, 0 0; } }
@keyframes cgsFlotar {
  to { background-position: 4% 10%, 6% 70%, 3% 78%, 96% 30%, 94% 47%, 97% 92%, 0 -120px, 40px -90px; }
}
.ace-hero--b .ace-hero__stage, .ace-hero--clasico .ace-hero__stage, .ace-hero--a .ace-hero__stage {
  width: min(calc(100% - 48px), 1272px); max-height: 600px; border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(1, 166, 251, .35), 0 24px 70px rgba(1, 166, 251, .22);
}
.ace-hero__cards, .ace-hero--b .ace-hero__cards, .ace-hero--clasico .ace-hero__cards { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .ace-hero::before, .ace-hero::after { animation: none !important; } }
@media (max-width: 900px) {
  .ace-hero--b, .ace-hero--clasico, .ace-hero--a { padding-top: 16px; }
  .ace-hero:not(.ace-hero--noslides)::before, .ace-hero:not(.ace-hero--noslides)::after { height: calc((100vw - 32px) / var(--ace-hero-ratio, 1.86) + 16px + 40px); }
  .ace-hero:not(.ace-hero--noslides)::after { display: none; }
  .ace-hero--b .ace-hero__stage, .ace-hero--clasico .ace-hero__stage { width: calc(100% - 32px); }
}

/* ---------- Ajustes finales del tema "Cubo negro" ---------- */
/* banner centrado dentro de la franja */
.ace-hero--b .ace-hero__stage, .ace-hero--clasico .ace-hero__stage, .ace-hero--a .ace-hero__stage { margin: 0 auto; height: auto; aspect-ratio: var(--ace-hero-ratio); }
.ace-hero--b .ace-hero__stage::after { display: none; }
/* botón del producto a lo ancho de la tarjeta */
.ace-card__row { flex-direction: column; align-items: stretch; gap: 10px; }
.ace-card__add { width: 100%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 0; text-decoration: none; }
.ace-card__prices strong { font-family: var(--cgs-head); font-size: 22px; }
/* franja de suscripción: con borde celeste y botón celeste */
.ace-news { border-radius: 6px; box-shadow: 8px 8px 0 #01A6FB; }
.ace-news h3 { font-family: var(--cgs-head); text-transform: uppercase; }
.ace-news input { border-radius: 4px; }
.ace-news button, .ace-news .ace-btn { background: #01A6FB !important; border-color: #01A6FB !important; color: #0B0F14 !important; border-radius: 4px; }
.ace-news button:hover, .ace-news .ace-btn:hover { background: #3BBCFF !important; }
@media (max-width: 900px) {
  .ace-hero__cards, .ace-hero--b .ace-hero__cards, .ace-hero--clasico .ace-hero__cards { margin-top: 14px; grid-template-columns: 1fr; gap: 10px; }
  .ace-hcard, .ace-hero--b .ace-hcard { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "img title btn" "img name btn" "img price btn"; padding: 10px 12px; box-shadow: 4px 4px 0 #01A6FB; }
  .ace-hcard__img { height: 76px; }
  .ace-hcard__img img { max-height: 64px; }
  .ace-hcard .ace-btn--tint { align-self: center; margin-top: 0; }
  .ace-hcard__title { font-size: 11px; }
  .ace-cat__name, .ace-page a.ace-cat .ace-cat__name { hyphens: auto; overflow-wrap: break-word; }
}

/* =====================================================================
   v3 — Banner de borde a borde y laterales de la página con animación
   ===================================================================== */
/* ---------- Banner a todo el ancho (como el de siempre) ---------- */
.ace-hero:not(.ace-hero--noslides)::before, .ace-hero:not(.ace-hero--noslides)::after { content: none; }
.ace-hero--b, .ace-hero--clasico, .ace-hero--a { padding-top: 0; background: none; }
.ace-hero--b .ace-hero__stage, .ace-hero--clasico .ace-hero__stage, .ace-hero--a .ace-hero__stage {
  width: 100%; max-width: none; margin: 0; aspect-ratio: var(--ace-hero-ratio, 1.86); height: auto; max-height: clamp(240px, 29vw, 560px);
  border-radius: 0; box-shadow: none; background: #0B0F14; border-bottom: 3px solid var(--cgs-celeste); }
/* la imagen se ve completa; los costados se rellenan con la misma imagen difuminada */
.ace-hero .ace-hero__slide img.ace-hero__bg { display: block; filter: blur(34px) saturate(1.2) brightness(.5); }
.ace-hero .ace-hero__slide img.ace-hero__img { object-fit: contain; object-position: center; }
.ace-hero .ace-hero__arrow--prev { left: clamp(12px, 3vw, 48px); }
.ace-hero .ace-hero__arrow--next { right: clamp(12px, 3vw, 48px); }
.ace-hero__cards, .ace-hero--b .ace-hero__cards, .ace-hero--clasico .ace-hero__cards { margin-top: 24px; }
@media (max-width: 900px) {
  .ace-hero--b .ace-hero__stage, .ace-hero--clasico .ace-hero__stage, .ace-hero--a .ace-hero__stage { width: 100%; }
  .ace-hero__cards, .ace-hero--b .ace-hero__cards, .ace-hero--clasico .ace-hero__cards { margin-top: 14px; }
}

/* ---------- Laterales de la página: fondo gamer animado (solo donde no hay contenido) ---------- */
@media (min-width: 1380px) {
  body.ace-page::before, body.ace-page::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 700px), transparent calc(50% - 650px), transparent calc(50% + 650px), #000 calc(50% + 700px));
            mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 700px), transparent calc(50% - 650px), transparent calc(50% + 650px), #000 calc(50% + 700px)); }
  /* patrón de cubos del logo, luces celestes y partículas que suben */
  body.ace-page::before {
    background:
      radial-gradient(circle, rgba(1, 166, 251, .75) 0 1.6px, transparent 2.2px) 0 0 / 120px 140px,
      radial-gradient(circle, rgba(11, 15, 20, .35) 0 1.2px, transparent 1.8px) 60px 70px / 170px 190px,
      radial-gradient(520px 420px at 0% 25%, rgba(1, 166, 251, .20), transparent 70%),
      radial-gradient(520px 420px at 100% 75%, rgba(1, 166, 251, .20), transparent 70%),
      radial-gradient(420px 360px at 100% 10%, rgba(11, 15, 20, .07), transparent 70%),
      linear-gradient(30deg, rgba(11, 15, 20, .045) 12%, transparent 12.5%, transparent 87%, rgba(11, 15, 20, .045) 87.5%) 0 0 / 56px 98px,
      linear-gradient(150deg, rgba(11, 15, 20, .045) 12%, transparent 12.5%, transparent 87%, rgba(11, 15, 20, .045) 87.5%) 0 0 / 56px 98px,
      linear-gradient(30deg, rgba(11, 15, 20, .045) 12%, transparent 12.5%, transparent 87%, rgba(11, 15, 20, .045) 87.5%) 28px 49px / 56px 98px,
      linear-gradient(150deg, rgba(11, 15, 20, .045) 12%, transparent 12.5%, transparent 87%, rgba(11, 15, 20, .045) 87.5%) 28px 49px / 56px 98px,
      linear-gradient(60deg, rgba(1, 166, 251, .05) 25%, transparent 25.5%, transparent 75%, rgba(1, 166, 251, .05) 75%) 0 0 / 56px 98px;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat;
    animation: cgsLadoFondo 30s linear infinite;
  }
  /* cubos del logo flotando a cada lado */
  body.ace-page::after {
    --cubo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 7 12 12 3 7z' fill='%23fff' stroke='%230B0F14' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M3 7l9 5v10l-9-5z' fill='%2301A6FB' stroke='%230B0F14' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M21 7l-9 5v10l9-5z' fill='%230189D2' stroke='%230B0F14' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
    --linea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 21 7v10l-9 5-9-5V7z' fill='none' stroke='%2301A6FB' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M3 7l9 5 9-5M12 12v10' fill='none' stroke='%2301A6FB' stroke-width='1.3'/%3E%3C/svg%3E");
    background-image: var(--cubo), var(--linea), var(--cubo), var(--linea), var(--cubo), var(--linea), var(--cubo), var(--linea), var(--cubo), var(--linea);
    background-repeat: no-repeat;
    background-size: 46px, 34px, 28px, 58px, 38px, 52px, 30px, 40px, 56px, 26px;
    background-position: 4% 14%, 11% 38%, 6% 62%, 13% 84%, 3% 94%, 96% 10%, 89% 30%, 95% 52%, 88% 76%, 97% 90%;
    filter: drop-shadow(0 6px 10px rgba(1, 166, 251, .25));
    animation: cgsLadoCubos 12s ease-in-out infinite alternate;
  }
}
@keyframes cgsLadoFondo {
  to { background-position: 0 -280px, 60px -310px, 0 0, 0 0, 0 0, 0 -98px, 0 -98px, 28px -49px, 28px -49px, 0 -98px; }
}
@keyframes cgsLadoCubos {
  to { background-position: 5% 10%, 10% 44%, 7% 57%, 12% 89%, 4% 88%, 95% 15%, 90% 24%, 96% 58%, 87% 70%, 96% 96%; }
}
@media (prefers-reduced-motion: reduce) { body.ace-page::before, body.ace-page::after { animation: none !important; } }

/* =====================================================================
   v5 — Tarjeta de producto: blanca, etiqueta azul, precio azul y botón azul a lo ancho
   ===================================================================== */
.ace-card { border: 1px solid #DCE6F2 !important; border-radius: 16px !important; background: #fff; box-shadow: 0 4px 14px rgba(0, 60, 110, .06); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.ace-page .ace-card:hover { box-shadow: 0 12px 28px rgba(0, 90, 170, .16); transform: translateY(-3px); border-color: #9ED8FD !important; }
.ace-card__media { margin: 0; padding: 46px 16px 8px; background: #fff; border-radius: 16px 16px 0 0; }
.ace-card__media .ace-card__img2 { inset: 46px 16px 8px; width: calc(100% - 32px); height: calc(100% - 54px); }
/* etiqueta (DDR5, RTX…) y descuento: cinta azul inclinada */
.ace-card__tag, .ace-card__off { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-block; padding: 4px 12px; border-radius: 4px; transform: skewX(-12deg);
  background: linear-gradient(135deg, #0A6DE0, #01A6FB); color: #fff; font: 800 12px/1.3 var(--ace-font); letter-spacing: .03em; box-shadow: 0 3px 8px rgba(10, 109, 224, .3); }
.ace-card__off { background: linear-gradient(135deg, #E11D48, #F43F5E); box-shadow: 0 3px 8px rgba(225, 29, 72, .3); }
.ace-card__tag + .ace-card__off { left: auto; right: auto; top: 42px; }
.ace-card__cmp { top: 12px; right: 52px; height: 32px; border-radius: 999px; border: 1px solid #DCE6F2; background: #fff; color: var(--ace-text); }
.ace-card__fav { top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid #DCE6F2; background: #fff; }
/* cuerpo: nombre, precio, stock y botón */
.ace-card__body { padding: 8px 16px 16px; gap: 6px; }
.ace-card__brand { display: none; }
.ace-card__name { order: 1; font: 800 14.5px/1.3 var(--ace-font); color: #0B1B33; text-transform: uppercase; min-height: 2.6em; }
.ace-card__row { display: contents; }
.ace-card__prices { order: 2; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ace-card__prices strong { font: 800 24px/1.1 var(--ace-font); color: #0A6DE0; letter-spacing: -.01em; }
.ace-card__prices del { font-size: 13px; color: var(--ace-text-3b); order: 2; }
.ace-card .ace-stock { order: 3; font: 500 13px var(--ace-font); color: var(--ace-text-2); }
.ace-card__solo { order: 3; }
.ace-card__add, .ace-card__add:hover { order: 4; margin-top: 8px; width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; overflow: visible;
  background: linear-gradient(180deg, #1C8CF0, #0A6DE0); color: #fff; gap: 10px; box-shadow: 0 6px 14px rgba(10, 109, 224, .35); transition: filter .15s ease, box-shadow .15s ease; }
.ace-card__add::before { content: ""; position: static; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat; }
a.ace-card__add::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ace-card__add::after { content: "AGREGAR AL CARRITO"; font: 800 13px var(--ace-font); letter-spacing: .04em; }
a.ace-card__add::after { content: "VER PRODUCTO"; }
.ace-page .ace-card__add:hover, .ace-page a.ace-card__add:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 8px 20px rgba(10, 109, 224, .45); }
@media (max-width: 640px) {
  .ace-card__media { padding: 42px 10px 6px; }
  .ace-card__body { padding: 6px 10px 12px; }
  .ace-card__name { font-size: 12.5px; }
  .ace-card__prices strong { font-size: 19px; }
  .ace-card__add, .ace-card__add:hover { height: 38px; gap: 6px; }
  .ace-card__add::after { content: "AGREGAR"; font-size: 12px; }
  .ace-card__cmp [data-cmp-txt] { display: none; }
  .ace-card__cmp { padding: 0 9px; }
}
.ace-card { container-type: inline-size; }
.ace-card__add { white-space: nowrap; }
.ace-card__add::after { font-size: 12.5px; letter-spacing: .02em; }
@container (max-width: 205px) { .ace-card__add::after { content: "AGREGAR"; } a.ace-card__add::after { content: "VER"; } }

/* =====================================================================
   v6 — Panel del carrito (al agregar un producto)
   ===================================================================== */
.ace-drawer__panel { width: min(440px, 100%); background: #F4F7FB; border-left: 0; box-shadow: -18px 0 40px rgba(11, 15, 20, .25); }
.ace-drawer__head { background: #0B0F14; color: #fff; border-bottom: 3px solid var(--cgs-celeste); padding: 18px 20px; }
.ace-drawer__title { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 800 19px var(--cgs-head, var(--ace-font)); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.ace-drawer__tico { width: 24px; height: 24px; fill: none; stroke: var(--cgs-celeste); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ace-drawer__title small { font: 700 12px var(--ace-font); text-transform: none; letter-spacing: 0; color: #0B0F14; background: var(--cgs-celeste); padding: 3px 10px; border-radius: 999px; }
.ace-header .ace-drawer__close, .ace-drawer__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3A4652; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.ace-drawer__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ace-header .ace-drawer__close:hover, .ace-drawer__close:hover { background: var(--cgs-celeste); border-color: var(--cgs-celeste); color: #0B0F14; }
.ace-drawer__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ace-drawer__item { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; padding: 12px; background: #fff; border: 1px solid #DCE6F2; border-radius: 14px; box-shadow: 0 3px 10px rgba(0, 60, 110, .05); }
.ace-drawer__thumb { width: 76px; height: 76px; border-radius: 12px; background: #F4F7FB; }
.ace-drawer__name { font: 800 13px/1.3 var(--ace-font); color: #0B1B33; text-transform: uppercase; }
.ace-drawer__qty { font: 500 12.5px var(--ace-font); color: var(--ace-text-2c); }
.ace-drawer__linea { font: 800 17px var(--ace-font); color: #0A6DE0; }
.ace-drawer__rm { align-self: start; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ace-text-3); background: #F4F7FB; }
.ace-drawer__rm svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ace-drawer__rm:hover { color: #E11D48; background: #FFF1F2; }
.ace-drawer__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; margin: auto 0; color: var(--ace-text-2c); text-align: center; }
.ace-drawer__empty svg { width: 64px; height: 64px; fill: none; stroke: #9ED8FD; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ace-drawer__empty strong { font: 800 18px var(--ace-font); color: var(--ace-text); }
.ace-drawer__empty .ace-btn { margin-top: 6px; }
.ace-drawer__foot { background: #fff; border-top: 1px solid #DCE6F2; box-shadow: 0 -8px 20px rgba(0, 60, 110, .06); padding: 16px 18px 18px; gap: 12px; }
.ace-drawer__sub span { font: 700 14px var(--ace-font); color: var(--ace-text-2); text-transform: uppercase; letter-spacing: .04em; }
.ace-drawer__sub strong { font: 800 26px var(--ace-font); color: #0A6DE0; }
.ace-drawer__btns { grid-template-columns: 1fr 1.4fr; }
.ace-drawer__btns .ace-btn { height: 48px; border-radius: 10px; font-weight: 800; }
.ace-drawer__btns .ace-btn--ghost { border: 1.5px solid #0B0F14; color: #0B0F14; background: #fff; }
.ace-drawer__pagar, .ace-page a.ace-drawer__pagar { border: 0; color: #fff; background: linear-gradient(180deg, #1C8CF0, #0A6DE0); box-shadow: 0 6px 14px rgba(10, 109, 224, .35); text-transform: uppercase; letter-spacing: .04em; }
.ace-page a.ace-drawer__pagar:hover { color: #fff; filter: brightness(1.08); }
.ace-drawer__nota { margin: 0; font-size: 12px; color: var(--ace-text-3); text-align: center; }
.ace-drawer__nota::before { content: "✓ "; color: #16A34A; font-weight: 800; }
.ace-drawer__empty .ace-btn, .ace-page .ace-drawer__empty a.ace-btn { border: 0; color: #fff; background: linear-gradient(180deg, #1C8CF0, #0A6DE0); box-shadow: 0 6px 14px rgba(10, 109, 224, .3); border-radius: 10px; }