/* Look «Caja»: the part arrives as if it came in its own box. Pearl surfaces lifted like lids, moulded trays where the
   pieces sit, one deep blue printed on the box. When you add a part it leaves its tray for the order box. */
:root {
  --bg: #f3f4f7; --surface: #fff; --surface-2: #f8f9fb; --sunk: #eceef2;
  --ink: #0b0d12; --ink-2: #525866; --ink-3: #636976;
  --line: #e3e6eb; --line-2: #cdd2da;
  --klein: #1a33c9; --klein-2: #1328a6;
  --brand: var(--klein); --brand-ink: #fff;
  --action: var(--klein); --action-ink: #fff; --action-hover: var(--klein-2);
  --accent: var(--klein); --accent-ink: #fff;
  --focus: var(--klein);
  --head-bg: rgba(255, 255, 255, .86); --head-ink: var(--ink); --head-line: var(--line); --head-hover: var(--sunk);
  --nav-bg: transparent; --nav-ink: var(--ink-2); --nav-line: var(--line); --nav-on: var(--sunk); --nav-on-ink: var(--ink);
  --search-bg: var(--sunk); --search-line: transparent; --search-go: var(--ink); --search-go-ink: #fff;
  --cart-bg: var(--klein); --cart-ink: #fff;
  --chip-on: var(--ink); --chip-on-ink: #fff;
  --bars-on: var(--klein); --meter: var(--klein);
  --well: #eceef2;
  --well-shadow: inset 0 2px 5px rgba(16, 20, 28, .09), inset 0 0 0 1px rgba(16, 20, 28, .035);
  --lid: 0 1px 1px rgba(16, 20, 28, .04), 0 2px 4px rgba(16, 20, 28, .04), 0 10px 24px rgba(16, 20, 28, .06);
  --tile-bg: var(--well); --pic-bg: var(--well); --pic-shadow: var(--well-shadow); --gal-bg: var(--well); --mvis-bg: var(--well); --mvis-shadow: var(--well-shadow);
  --zone-bg: var(--well); --zone-ink: var(--klein);
  --font-display: "Albert Sans", system-ui, sans-serif;
  --font-ui: "Albert Sans", system-ui, sans-serif;
  --font-code: "Geist Mono", ui-monospace, monospace;
  --display-wght: 650; --display-track: -0.03em;
  --r-s: 4px; --r-m: 6px; --r-l: 8px;
}
body { font-size: 15.5px }
.top { backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px) }
.top-nav { border-top: 0 }
.brand { color: var(--klein); font-weight: 650; letter-spacing: -0.035em; font-size: 23px }
.brand .mk { width: 28px; height: 28px }
.foot .brand { color: var(--klein) }

/* lids and trays */
.kind, .mtile, .brandt, .zone-t, .pcard, .tgi, .qv, .buybox, .summary, .card, .facts, .oline, .ql, .mz { box-shadow: var(--lid) }
.mtile .ph, .pc-pic, .gal, .mvis, .zone-t .zi { box-shadow: var(--well-shadow) }
.kind { background: var(--surface) }
.kind img { filter: drop-shadow(0 14px 18px rgba(16, 20, 28, .12)) }
.mtile .ph img, .mvis > img { filter: drop-shadow(0 10px 14px rgba(16, 20, 28, .14)) }
.pc-pic img { outline: 0; mix-blend-mode: multiply }
@media (hover: hover) {
  .kind:hover, .mtile:hover, .brandt:hover, .zone-t:hover, .mz:hover { box-shadow: 0 2px 4px rgba(16, 20, 28, .05), 0 16px 32px rgba(16, 20, 28, .1) }
  .mtile:hover .ph img { transform: translateY(-6px) scale(1.02) }
}
.oline + .oline { margin-top: 0; border-top: 1px solid var(--line) }
.chip { box-shadow: none; background: var(--surface); box-shadow: var(--lid) }
.chip.on, .chip[aria-pressed="true"] { box-shadow: none }
.znav { background: color-mix(in oklab, var(--bg) 86%, transparent) }
.add { border-radius: 6px }
.stepper { --step-bg: var(--well); box-shadow: var(--well-shadow) }
.price { color: var(--ink) }
.fly { border-radius: 8px; box-shadow: 0 12px 30px rgba(16, 20, 28, .22) !important; background: #fff }

/* hero: the parts box */
.hero-caja { background: var(--bg); overflow: hidden }
.hc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: center; min-height: min(700px, calc(100dvh - var(--head-h) - var(--nav-h))) }
.hc-copy { padding-block: 48px 56px; position: relative; z-index: 2 }
.hero-caja h1 { font-size: clamp(44px, 5.2vw, 84px); line-height: .98; font-weight: 650; letter-spacing: -0.045em; max-width: 11ch }
.hero-caja .lead { margin-top: 20px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 44ch }
.search.big { height: 60px; max-width: 540px; margin-top: 28px; justify-self: start; background: #fff; border-radius: 8px; box-shadow: var(--lid), 0 0 0 1px var(--line) }
.search.big:focus-within { box-shadow: var(--lid), 0 0 0 2px var(--klein) }
.search.big input { font-size: 17px }
.search.big .go { height: 48px; padding: 0 20px; margin-right: 6px; border-radius: 6px; background: var(--klein) }
.hc-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink-2); font-size: 14px }
.want { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: 4px; padding: 0 8px 0 10px; border-radius: 5px; background: var(--klein); color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; flex: none; animation: want-in 240ms var(--ease-out) }
@keyframes want-in { from { transform: translateY(4px); opacity: 0 } }
.hc-stage { position: relative; align-self: stretch; min-height: 560px; margin-right: calc(var(--gut) * -1) }
.hc-3d { position: absolute; inset: 0 }
.hc-stage .d3-poster { position: absolute; inset: 2% 0 2% 0; width: 100%; height: 96%; object-fit: contain; pointer-events: none }
.hc-stage.live .d3-poster { opacity: 0 }
.hc-3d .d3-label { font: 600 13px/1 var(--font-ui); color: var(--ink); padding: 7px 10px; border-radius: 5px; background: rgba(255, 255, 255, .78); box-shadow: 0 1px 2px rgba(16, 20, 28, .08); transition: background-color 160ms ease, color 160ms ease }
.hc-3d .d3-label.on, .hc-3d .d3-label:focus-visible { background: var(--klein); color: #fff }
.hc-3d .d3-lines path { stroke: var(--ink); stroke-opacity: .28 }
.hc-3d .d3-lines path.on { stroke: var(--klein); stroke-opacity: 1 }
.hc-3d .d3-lines circle { fill: var(--klein); r: 3.5px }
.hc-3d.d3-hot .d3-label:not(.on) { opacity: .5 }
.done-mark { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 10px; display: grid; place-items: center; background: var(--klein); color: #fff; box-shadow: 0 12px 28px rgba(26, 51, 201, .3) }
.wa { --wa-bg: #eef1fb; color: var(--ink) }

@media (max-width: 900px) {
  .hc-grid { grid-template-columns: minmax(0, 1fr); min-height: 0 }
  .hc-copy { padding-block: 28px 0 }
  .hc-stage { min-height: 360px; margin: 0 calc(var(--gut) * -1) }
}