/* Sistema visual para las experiencias de compra: ficha de producto y armador.
   Mantiene la interacción propia de cada página y las alinea con el catálogo. */
:root{
  --bg:#181D23;--bg2:#1F242B;--surface:#1F242B;--card:#22252E;--card2:#2A2E37;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.14);
  --cyan:#0C95F3;--purple:#6947E6;--green:#22C55E;--orange:#F59E0B;--pink:#EF4444;
  --price:#3FA9F5;--text:#F5F9FA;--text2:#B6C0CB;--muted:#8C97A3;--wa:#25D366;
  --grad:linear-gradient(90deg,#0C95F3,#6947E6);
  --fd:"Schibsted Grotesk",system-ui,sans-serif;--fb:"Hanken Grotesk",system-ui,sans-serif;
}

body{background:var(--bg);color:var(--text);font-family:var(--fb);font-size:15px;}
:focus-visible{outline-color:var(--cyan);outline-offset:3px}

#prog{height:2px;background:var(--grad);z-index:500}
.navbar{background:var(--bg);border-color:var(--border);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.nav-inner{max-width:1120px;height:60px;padding:0 1rem}
.nav-brand img{height:34px;filter:none}
.nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-links a{color:var(--text2);border-radius:9px;padding:.48rem .6rem}
.nav-links a{min-height:44px;display:flex;align-items:center}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--card2)}
.nav-links a.active{box-shadow:inset 0 -2px var(--cyan)}
.nav-links a.nav-licencias,.nav-links a.nav-licencias:hover{background:var(--grad);color:#fff}
.nav-wa{background:var(--wa);border-color:var(--wa);color:#04120A;border-radius:999px;font-weight:700}
.nav-wa:hover{filter:brightness(1.07)}
.currency-toggle{background:var(--card);border-color:var(--border2);border-radius:999px;font-family:var(--fd)}
.cur-opt{color:var(--text2)}
.cur-opt.active{background:var(--grad);color:#fff}
@media(min-width:768px){.nav-links{gap:.15rem}.nav-inner{padding:0 1.5rem}}
@media(max-width:767px){.nav-links{background:var(--surface);border-color:var(--border);box-shadow:none}}

/* Ficha de producto */
.breadcrumb{font-family:var(--fb);font-size:.78rem;color:var(--muted);padding-top:1.05rem}
.breadcrumb a{color:var(--text2)}
.prod-page{max-width:1120px;padding-top:1.15rem}
.prod-hero{gap:clamp(1.5rem,4vw,3.5rem);margin-bottom:3.5rem}
.prod-img-main{background:var(--text);border-color:var(--border);border-radius:14px;box-shadow:none}
.prod-img-main::before,.prod-img-main::after{display:none}
.prod-photo{padding:1.25rem}
.prod-icon{filter:none;animation:none}
.img-badge,.pbadge,.pc-badge{border-radius:9px;font-family:var(--fd);letter-spacing:.055em}
.img-badge.bot-left{background:var(--surface);border-color:var(--border2)}
.img-badge.stock-ok,.pbadge.green{background:color-mix(in srgb,var(--green) 12%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent);color:var(--green)}
.img-badge.stock-low,.pbadge.orange{background:color-mix(in srgb,var(--orange) 13%,transparent);border-color:color-mix(in srgb,var(--orange) 30%,transparent);color:var(--orange)}
.img-badge.stock-out{background:color-mix(in srgb,var(--pink) 12%,transparent);border-color:color-mix(in srgb,var(--pink) 30%,transparent);color:var(--pink)}
.pbadge.cyan,.pc-badge{background:color-mix(in srgb,var(--cyan) 11%,transparent);border-color:color-mix(in srgb,var(--cyan) 27%,transparent);color:var(--price)}
.pbadge.purple{background:color-mix(in srgb,var(--purple) 13%,transparent);border-color:color-mix(in srgb,var(--purple) 31%,transparent);color:var(--text)}
.prod-info{gap:1rem;padding-block:.25rem}
.prod-name{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.08;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.prod-meta{gap:.8rem}.prod-stars{color:var(--orange)}.prod-ref{background:var(--card);border-color:var(--border);font-family:var(--fb)}
.prod-price-box{background:var(--card2);border-color:var(--border);border-radius:14px;box-shadow:none}
.prod-price-box::before{background:var(--grad)}
.price-label,.variants-title{font-family:var(--fd);color:var(--text2);letter-spacing:.08em}
.price-main,.pc-price{color:var(--price);text-shadow:none}
.price-disc,.pc-disc{background:#E6C661;color:#04120A;border-radius:9px}
.price-save{color:var(--green)}
.cta-main{border-radius:9px;box-shadow:none;background:var(--wa);color:#04120A}
.cta-main:hover{filter:brightness(1.07);box-shadow:none}
.cta-sec{min-height:44px;border-radius:9px;background:transparent;border-color:var(--border2);color:var(--text)}
.cta-sec:hover,.cta-atc:hover{border-color:var(--cyan);color:var(--text);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.cta-atc{border-radius:9px;border-color:color-mix(in srgb,var(--cyan) 38%,transparent);background:color-mix(in srgb,var(--cyan) 9%,transparent);color:var(--price)}
.prod-section{margin-bottom:3.25rem}.prod-section-hdr{font-size:1.2rem;letter-spacing:-.015em}.prod-section-hdr::before{display:none}
.desc-text{max-width:68ch;color:var(--text2);line-height:1.78}
.pc{background:var(--card2);border-color:var(--border);border-radius:14px;box-shadow:none}
.pc:hover{border-color:color-mix(in srgb,var(--cyan) 42%,transparent);box-shadow:none;transform:translateY(-3px)}
.pc-img{background:var(--text)}.pc-sweep{display:none}.pc-name{overflow-wrap:anywhere}.pc-consult{min-height:44px;border-radius:9px;border-color:color-mix(in srgb,var(--cyan) 32%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent);color:#4DB3FF}.pc-consult:hover{background:color-mix(in srgb,var(--cyan) 17%,transparent)}

/* Zona gaming: conserva la energía, elimina el ruido visual y comparte el mismo
   lenguaje de tarjetas, navegación y llamadas a la acción. */
.g-hero{background:var(--bg);border-color:var(--border)}
.g-hero::before{background:radial-gradient(ellipse 75% 65% at 50% -5%,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 70%)}
.g-hero::after,.g-hero-scan{display:none}
.g-tag{border-radius:9px;border-color:color-mix(in srgb,var(--cyan) 35%,transparent);background:color-mix(in srgb,var(--cyan) 10%,transparent);color:var(--price)}
.g-tag-dot{background:var(--cyan);box-shadow:none;animation:none}
.g-h1{animation:none;letter-spacing:-.035em}.g-h1 em{color:var(--price);text-shadow:none}
.g-sub{max-width:59ch}.g-hero-btns{gap:.6rem}.btn{border-radius:9px}.btn-primary{background:var(--cyan);box-shadow:none}.btn-primary:hover{opacity:.92;box-shadow:none}.btn-outline:hover{box-shadow:none}
.g-sec{max-width:1120px}.g-sec-lbl{color:var(--price)}.g-sec-lbl::before{color:var(--cyan)}.g-sec-h2{letter-spacing:-.025em}.tg{color:var(--price);text-shadow:none}
.cat-block-ico{border-radius:9px;background:color-mix(in srgb,var(--cyan) 8%,transparent);border-color:color-mix(in srgb,var(--cyan) 22%,transparent)}
.pc-add{border-radius:9px;background:color-mix(in srgb,var(--cyan) 8%,transparent);border-color:color-mix(in srgb,var(--cyan) 25%,transparent);color:var(--price)}.pc-add:hover{background:color-mix(in srgb,var(--cyan) 17%,transparent);border-color:color-mix(in srgb,var(--cyan) 55%,transparent);box-shadow:none}
.g-hero-stat-num{color:var(--price);text-shadow:none}

/* Armador de PC */
.hero{padding:clamp(3rem,7vw,5.4rem) 1.5rem 3.6rem;border-color:var(--border);text-align:left}
.hero::before{background:radial-gradient(46rem 22rem at 78% 0,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 70%)}
.hero-inner{max-width:820px;margin:0 auto}
.hero-tag{border-radius:9px;border-color:color-mix(in srgb,var(--cyan) 35%,transparent);background:color-mix(in srgb,var(--cyan) 10%,transparent);color:var(--price);font-family:var(--fd);letter-spacing:.075em}
.hero-dot{background:var(--cyan);box-shadow:none;animation:none}
.hero-h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;letter-spacing:-.035em;max-width:10ch}.hero-h1 em{color:var(--price);text-shadow:none}
.hero-sub{max-width:59ch;margin:0 0 1.75rem;color:var(--text2);font-size:1.05rem}
.use-cases{justify-content:flex-start}.uc-btn{min-height:44px;border-radius:9px;background:var(--card);border-color:var(--border2);color:var(--text2);font-family:var(--fd)}
.uc-btn:hover{border-color:color-mix(in srgb,var(--cyan) 55%,transparent);color:var(--text);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.uc-btn[data-case].active{background:var(--cyan);border-color:var(--cyan);box-shadow:none}
.uc-hint{font-family:var(--fb);font-size:.8rem;color:var(--muted);text-align:left}
.builder-section{max-width:1120px;padding-top:3rem}.builder-grid{gap:2rem}@media(min-width:960px){.builder-grid{grid-template-columns:minmax(0,1fr) 350px}}
.pc-case{border-color:var(--border2);border-radius:14px;background:var(--card2);box-shadow:none}
.pc-case::after{display:none}.pc-case.on{border-color:color-mix(in srgb,var(--cyan) 48%,transparent);box-shadow:none}.pc-case.complete{border-color:color-mix(in srgb,var(--green) 50%,transparent)}
.pc-case-tag{border-radius:9px;background:var(--surface);border-color:var(--border2);font-family:var(--fd)}
.pc-mobo{background:var(--surface);border-color:var(--border);box-shadow:none}.pc-mobo.on{border-color:color-mix(in srgb,var(--cyan) 42%,transparent);box-shadow:none}
.bay{border-color:var(--border2);background:var(--card);border-radius:9px}.bay:hover{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 7%,transparent)}.bay.on{border-color:color-mix(in srgb,var(--cyan) 58%,transparent);background:color-mix(in srgb,var(--cyan) 10%,transparent);box-shadow:none}
.pc-progress-fill{background:var(--grad)}.pc-progress-fill.done{background:var(--green);box-shadow:none}
.pc-stage-hint,.bay-name,.pc-mobo-tag{font-family:var(--fb)}
.slot{background:var(--card2);border-color:var(--border);border-radius:14px}.slot:hover{border-color:var(--border2)}.slot.filled{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent);box-shadow:none}.slot-label{overflow-wrap:anywhere}
.slot-ico{border-radius:9px;background:color-mix(in srgb,var(--purple) 13%,transparent);border-color:color-mix(in srgb,var(--purple) 28%,transparent)}.slot.filled .slot-ico{background:color-mix(in srgb,var(--cyan) 13%,transparent);border-color:color-mix(in srgb,var(--cyan) 38%,transparent);box-shadow:none}
.slot-num{background:var(--bg);border-color:var(--border2)}.slot.filled .slot-num{background:var(--cyan);border-color:var(--cyan);box-shadow:none}.slot-label,.slot-price{font-family:var(--fd)}.slot-price{color:var(--price)}
.slot-select{background:var(--surface);border-color:var(--border2);border-radius:9px}.slot-select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 15%,transparent)}
.optional-block{border-color:var(--border);border-radius:14px;background:var(--card2)}.optional-toggle{font-family:var(--fd)}
.build-panel{background:var(--card2);border-color:var(--border);border-radius:14px;box-shadow:none}
.bp-title,.budget-label,.total-lbl,.total-val{font-family:var(--fd)}.bp-title{letter-spacing:-.015em}.budget-input-row{background:var(--surface);border-color:var(--border2);border-radius:9px}.budget-input-row:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 14%,transparent)}
.budget-bar-fill{background:var(--grad)}.total-val{color:var(--price);text-shadow:none}.bp-cta{border-radius:9px;background:var(--wa);color:#04120A;box-shadow:none}.bp-cta:not(:disabled)::after{display:none}.bp-cta:not(:disabled):hover{filter:brightness(1.07);box-shadow:none}
.bp-share,.bp-reset{min-height:44px;border-radius:9px;background:var(--surface)}.bp-share:hover{border-color:var(--cyan);color:var(--text);background:color-mix(in srgb,var(--cyan) 11%,transparent)}.bp-reset:hover{border-color:var(--pink);color:var(--pink)}
.uc-panel{background:var(--surface);border-color:var(--border);border-radius:9px}.toast{background:var(--card2);border-color:var(--border2);box-shadow:none}

footer{background:var(--surface);border-color:var(--border);margin-top:0}.ft-top-line{background:var(--cyan)}.ft-brand-name{background:none;-webkit-text-fill-color:currentColor;color:var(--price)}.ft-col h3{font-family:var(--fd);color:var(--price)}.ft-col ul a,.ft-brand-sub,.ft-sched,.ft-bottom{color:var(--text2);font-family:var(--fb)}.ft-col ul a:hover{color:var(--text)}
.wa-btn{box-shadow:none}
@media(max-width:560px){.prod-page{padding-inline:1rem}.prod-img-main{border-radius:14px}.hero{padding-inline:1rem}.hero-h1{font-size:clamp(2.35rem,13vw,3.2rem)}.builder-section{padding-inline:1rem}.wa-float{bottom:1rem;right:1rem}}
@media(max-width:340px){.nav-inner{padding-inline:.75rem;gap:.75rem}}