/* =========================================================
   ZYRION — Store design system
   Strict monochrome. Light base, black accents, dark banner.
   Real product photography only — no drawn hardware.
   ========================================================= */

:root{
  --ink:    #101012;
  --ink-2:  #17171a;
  --body:   #4c4c52;
  --muted:  #74747c;
  --line:   #e4e4e7;
  --gray:   #f4f4f5;
  --gray-2: #ebebee;
  --white:  #ffffff;
  /* ZYRION colour system — pastel tints + dusty accents over the
     monochrome base. Soft fills, ink text, nothing electric. */
  --accent:      #8d7ac9;   /* dusty lavender — small text accents */
  --tint-lilac:  #ece5fa;
  --tint-mint:   #e2f1e7;
  --tint-butter: #fdf4da;
  --tint-rose:   #fbe7ee;
  --deep-lilac:  #7c6cc4;
  --deep-mint:   #3f8f63;
  --deep-butter: #a8811f;
  --deep-rose:   #c26a89;
  --sale:        #e0483e;   /* discounts, % chips, sale badges */

  --shell: 1560px;
  --pad:   clamp(18px, 4vw, 40px);
  --edge:  clamp(14px, 1.8vw, 32px);   /* full-bleed gutters (header, PC Lab) */

  --f-disp: "Sora", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --e: cubic-bezier(.2,.7,.3,1);

  --shadow:    0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06);

  --nav-h:  74px;
  --row-h:  50px;
  --r-card: 18px;
  --r-mid:  12px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;
     stroke-linecap:round; stroke-linejoin:round; }
::selection{ background:var(--tint-lilac); color:var(--ink); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:900;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px;
  font-weight:700; font-size:14px; transition:top .2s var(--e);
}
.skip:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(var(--shell), 100% - var(--pad)*2); margin-inline:auto; }
.wrap--narrow{ width:min(860px, 100% - var(--pad)*2); }

h1,h2,h3,h4{ margin:0; font-family:var(--f-disp); font-weight:700; letter-spacing:-.025em; line-height:1.08; }
h1{ font-size:clamp(2.1rem, 3.8vw, 3.4rem); font-weight:800; }
h2{ font-size:clamp(1.7rem, 3vw, 2.8rem); }
h3{ font-size:1.25rem; letter-spacing:-.018em; }

.eyebrow{
  font-family:var(--f-body);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
.lead{ font-size:16px; color:var(--body); line-height:1.7; margin:14px 0 26px; max-width:56ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 24px; border-radius:999px;
  font-family:var(--f-body); font-size:14.5px; font-weight:700;
  white-space:nowrap; border:1.5px solid transparent;
  transition:background-color .22s var(--e), color .22s var(--e),
             border-color .22s var(--e), transform .22s var(--e), box-shadow .22s var(--e);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ height:38px; padding:0 18px; font-size:13.5px; }

.btn--dark{ background:var(--ink); color:var(--white); }
.btn--dark:hover{ background:#2c2c31; box-shadow:0 6px 18px rgba(0,0,0,.2); }

.btn--white{ background:#fff; color:var(--ink); }
.btn--white:hover{ box-shadow:0 6px 18px rgba(0,0,0,.3); }

.btn--glass{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.45); }
.btn--glass:hover{ background:rgba(255,255,255,.18); border-color:#fff; }

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; height:24px; padding:0 11px;
  border-radius:999px; background:var(--gray-2); color:var(--ink);
  font-size:11.5px; font-weight:700; letter-spacing:.02em; font-style:normal;
}
.chip--dark{ background:var(--ink); color:var(--white); }
.chip--ghost{ background:transparent; border:1.5px solid var(--line); color:var(--muted); }

/* ---------- Segmented control ---------- */
.seg{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px; }
.seg__label{
  font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.seg__set{
  display:flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--gray); border:1.5px solid var(--line);
}
.seg__opt{
  height:32px; padding:0 15px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--muted);
  transition:background-color .25s var(--e), color .25s var(--e);
}
.seg__opt[aria-pressed="true"]{ background:var(--white); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12); }

/* =========================================================
   NAV
   ========================================================= */

.nav{
  position:sticky; top:0; z-index:400;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--e);
}

/* row 1: burger · logo · search · cart — full-bleed like a real storefront */
.nav__top{
  width:100%; padding-inline:var(--edge);
  height:var(--nav-h); display:flex; align-items:center; gap:clamp(18px,2vw,34px);
}
.nav__brand{ display:flex; align-items:center; flex:0 0 auto; }
/* the wordmark art is white on transparency — inverted so it reads on light backgrounds */
.nav__wordmark{
  height:28px; width:auto;
  filter:invert(1) brightness(.14);
  transition:opacity .25s var(--e);
}
.nav__brand:hover .nav__wordmark{ opacity:.6; }

.search{
  flex:1; display:flex; align-items:center; min-width:0;
  max-width:900px; margin-inline:auto;
  height:48px; border-radius:999px;
  background:var(--gray); border:1.5px solid transparent;
  transition:border-color .2s var(--e), background-color .2s var(--e);
}
.search:focus-within{ border-color:var(--ink); background:var(--white); }
.search input{
  flex:1; min-width:0; height:100%; padding:0 6px 0 20px;
  background:transparent; border:0; outline:0;
  font-family:inherit; font-size:14.5px; color:var(--ink);
}
.search input::placeholder{ color:#9a9aa2; }
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.search button{
  width:44px; height:100%; display:grid; place-items:center; color:var(--ink);
  border-radius:0 999px 999px 0;
}
.search button:hover{ background:var(--gray-2); }
.search svg{ width:18px; height:18px; }

/* row 2: category nav with mega menus — full-bleed */
.nav__row{
  width:100%; padding-inline:var(--edge);
  height:var(--row-h); display:flex; align-items:stretch; gap:18px;
  border-top:1px solid var(--line);
}
.nav__menu{ display:flex; align-items:stretch; gap:clamp(2px,.6vw,10px); margin-right:auto; }
.nav__item{ display:flex; }
.nav__link{
  display:flex; align-items:center; gap:6px; padding:0 clamp(13px,1.2vw,20px);
  font-size:14.5px; font-weight:700; color:var(--ink);
  border-bottom:2px solid transparent;
  transition:border-color .2s var(--e), background-color .2s var(--e);
}
.nav__link i{
  width:5px; height:5px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .25s var(--e);
}
.nav__item:hover .nav__link,
.nav__link[aria-expanded="true"]{ border-bottom-color:var(--ink); background:var(--gray); }
.nav__link[aria-expanded="true"] i{ transform:rotate(225deg) translateY(-1px); }

.nav__side{ display:flex; align-items:center; gap:10px; }
.nav__side .nav__link{ border-bottom:0; padding:0 6px; color:var(--body); }
.nav__side .nav__link:hover{ color:var(--ink); background:none; }
.nav__sep{ color:var(--line); }

/* mega panels */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--white); border-bottom:1px solid var(--line);
  box-shadow:0 20px 36px rgba(0,0,0,.08);
  overflow:hidden; max-height:0; visibility:hidden;
  transition:max-height .35s var(--e), visibility 0s linear .35s;
}
/* overflow-y on open: an admin-grown taxonomy scrolls instead of clipping */
.mega.is-open{ max-height:420px; visibility:visible; overflow-y:auto; transition:max-height .35s var(--e), visibility 0s; }
.mega__inner{
  width:100%; padding:30px var(--edge) 36px;
  max-width:1200px; margin-right:auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 260px)); gap:36px;
}
.mega__col h4{
  font-family:var(--f-body); font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 12px;
}
.mega__col a{ display:block; padding:7px 0; transition:transform .25s var(--e); }
.mega__col a:hover{ transform:translateX(5px); }
.mega__col b{ display:block; font-size:14.5px; font-weight:700; }
.mega__col em{ font-style:normal; font-size:12.5px; color:var(--muted); }

.mega__inner--wide{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }

/* strikethrough deal pricing */
.was{ display:inline-flex; align-items:center; gap:8px; margin-left:10px; }
.was s{ font-family:var(--f-body); font-size:.55em; font-weight:600; color:var(--muted); }
.offchip{
  font-style:normal; font-family:var(--f-body); font-size:11px; font-weight:800;
  background:var(--sale); color:#fff; border-radius:999px; padding:3px 8px;
}
/* corner badge on card media for discounted products */
.salebadge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-style:normal; font-size:12px; font-weight:800; letter-spacing:.02em;
  background:var(--sale); color:#fff; border-radius:999px; padding:4px 10px;
  box-shadow:0 3px 8px rgba(224,72,62,.35);
}
/* coupon code chips — click to copy */
.codes{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; }
.codes--hero{ justify-content:center; margin:20px 0 0; }
.code{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px; border-radius:12px;
  border:1.5px dashed var(--deep-rose); background:rgba(255,255,255,.65);
  font-size:12.5px; text-align:left;
  transition:background-color .2s var(--e), transform .2s var(--e);
}
.code:hover{ background:var(--tint-rose); transform:translateY(-1px); }
.code b{ font-weight:800; letter-spacing:.07em; color:var(--deep-rose); }
.code span{ font-weight:600; color:var(--body); }
/* home sale band */
.band--sale{
  background:linear-gradient(150deg, #faf7ff, #fff4f6 55%, #fffaef);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}

.cartbtn{
  position:relative; width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; color:var(--ink);
  transition:background-color .2s var(--e);
}
.cartbtn:hover{ background:var(--gray); }
.cartbtn__count{
  position:absolute; top:2px; right:0; min-width:18px; height:18px;
  display:grid; place-items:center; border-radius:999px; padding:0 5px;
  background:var(--ink); color:#fff; font-size:10.5px; font-weight:700;
  transition:transform .25s var(--e);
}
.cartbtn__count.is-bump{ transform:scale(1.35); }

/* flex column, not grid: grid rows would space the two bars 20px apart and
   the "close" state would render as a chevron instead of an X */
.burger{
  display:none; width:40px; height:40px; border-radius:999px;
  flex-direction:column; align-items:center; justify-content:center;
}
.burger span{ display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.28s var(--e); }
.burger span+span{ margin-top:5px; }

/* =========================================================
   HERO BANNER CAROUSEL — one edge-to-edge banner image per
   slide (pre-composited 3000x800 / 1080x1350 in assets/), the
   copy floats on top. No split columns, no visible seams.
   ========================================================= */
.hero{ padding:0; border-bottom:1px solid var(--line); }
/* capped like iBuyPower's TV wall: full-bleed up to the shell width, then a
   centered, bottom-rounded banner — the 3000x800 art never over-stretches */
.herocar{ width:100%; max-width:var(--shell); margin-inline:auto; }
@media (min-width:1680px){
  .herocar{ border-radius:0 0 18px 18px; overflow:hidden; }
  /* the banner detaches from the page edges here, so the hero's full-width
     rule stops being its bottom edge and reads as a stray line under it */
  .hero{ border-bottom:0; }
}
.herocar__viewport{ overflow:hidden; }
.herocar__track{ display:flex; transition:transform .55s var(--e); }

.hslide{
  position:relative; flex:0 0 100%; min-width:0; overflow:hidden;
  display:flex; align-items:center;
  background:var(--white); color:var(--ink);
  min-height:clamp(400px, 52vh, 600px);
  padding:clamp(20px,2.5vw,40px) var(--edge);
}
/* subtle scrim between the banner image and the copy — keeps
   text readable wherever the image lands behind it */
.hslide::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.55) 20%, rgba(255,255,255,.3) 38%, rgba(255,255,255,0) 58%);
}
.hslide__copy{ position:relative; z-index:2; max-width:520px; }
.hslide__kicker{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 14px;
  border-radius:999px; background:var(--gray-2);
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
}
.hslide__kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--deep-rose);
  animation:blink 2.2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.hslide h1,.hslide__h{
  font-size:clamp(2.2rem, 4vw, 3.7rem); font-weight:800; font-family:var(--f-disp);
  letter-spacing:-.025em; line-height:1.05; margin:0 0 16px;
}
.hslide__sub{ font-size:16.5px; color:var(--body); line-height:1.65; max-width:44ch; margin:0 0 26px; }
.hslide__cta{ display:flex; gap:12px; flex-wrap:wrap; }

.hslide__media{ position:absolute; inset:0; z-index:0; }
.hslide__media picture{ display:block; width:100%; height:100%; }
/* the banner IS the whole slide: cover, anchored right so the
   product side survives any crop at narrow desktop widths */
.hslide__media img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:right center;
}

/* bullets overlaid on the banner, iBuyPower-style — no arrows */
.herocar{ position:relative; }
.herocar__dots{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:3;
}
.carousel__dots{ display:flex; gap:8px; }
.carousel__dots button{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:rgba(16,16,18,.22);
  transition:background-color .25s var(--e), transform .25s var(--e);
}
.carousel__dots button:hover{ background:rgba(16,16,18,.45); }
.carousel__dots button[aria-current="true"]{ background:var(--accent); transform:scale(1.25); }

/* =========================================================
   FREE SHIPPING STRIP
   ========================================================= */
.freeship{
  display:flex; align-items:center; justify-content:center;
  min-height:50px; padding:12px 16px; text-align:center;
  background:var(--white); border-bottom:1px solid var(--line);
}
.freeship p{ margin:0; font-size:13.5px; font-weight:600; letter-spacing:.01em; }
.freeship p span{
  display:inline-block; margin-right:6px; padding:3px 12px; border-radius:999px;
  background:var(--tint-rose); color:var(--deep-rose);
  font-weight:800; letter-spacing:.06em;
}
.freeship:hover p{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   CURRENT PROMOTIONS — cards built by JS from <template>s.
   Soft tinted cards; product JPGs sit on them via
   mix-blend-mode:multiply + an edge fade, so no hard boxes.
   ========================================================= */
/* CURRENT PROMOTIONS — carrusel paginado. El raíl es scroll nativo (swipe
   gratis en móvil) y JS lo pagina de vista en vista. DOS tarjetas por vista
   en escritorio a propósito: con 3 promos eso son 2 páginas, así que las
   flechas y los puntos hacen algo de verdad en vez de quedarse muertos. */
.dealcar{ position:relative; }
.dealcar:focus-visible{
  outline:2px solid var(--ink); outline-offset:8px; border-radius:var(--r-card);
}
.dealcar__dots{ justify-content:center; margin-top:18px; }
/* si todo cabe en una vista no hay páginas: fuera los puntos */
.dealcar.is-static .dealcar__dots{ display:none; }
.deals{
  display:flex; gap:18px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding-bottom:4px;
  scrollbar-width:none;
}
.deals::-webkit-scrollbar{ display:none; }
.deal{
  flex:0 0 calc(50% - 9px);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  border-radius:var(--r-card); overflow:hidden;
  border:1px solid rgba(16,16,18,.05);
}
/* tarjeta ancha = foto a la izquierda y texto a la derecha; en vertical
   solo cabe bien por debajo del móvil grande */
@media (min-width:601px){
  .deal{ flex-direction:row; }
  .deal__media{ flex:0 0 38%; aspect-ratio:auto; min-height:210px; }
  .deal__media img{ padding:22px; }
  .deal__body{
    justify-content:center; padding:22px 24px;
    border-top:0; border-left:1px solid rgba(16,16,18,.07);
  }
}
@media (max-width:1100px){ .deal{ flex-basis:100%; } }

.deal--lilac{ background:linear-gradient(115deg,var(--tint-lilac),#f6e7f4); }
.deal--mint{ background:var(--tint-mint); }
.deal--butter{ background:var(--tint-butter); }
.deal--rose{ background:var(--tint-rose); }
/* acento arcoíris pastel — para la promo con tiempo limitado */
.deal--rainbow{
  background:linear-gradient(135deg,#fde9ec,#fdf2dd 26%,#e6f4e6 52%,#e2eef9 74%,#efe6f8);
}
/* each card's tag picks up the deep version of its own pastel */
.deal--lilac .deal__tag{ color:var(--deep-lilac); }
.deal--mint .deal__tag{ color:var(--deep-mint); }
.deal--butter .deal__tag{ color:var(--deep-butter); }
.deal--rose .deal__tag{ color:var(--deep-rose); }

/* el color va en TODO el panel, no solo en la foto */
.deal__media{ position:relative; aspect-ratio:4/3; overflow:hidden; padding:0; }
.deal__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:16px; max-width:none; aspect-ratio:auto;
  filter:drop-shadow(0 14px 22px rgba(16,16,18,.16));
}
.deal__body{
  flex:1; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  padding:16px 18px 18px; border-top:1px solid rgba(16,16,18,.07);
}
.deal__tag{
  margin:0; font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.deal__h{ width:100%; margin:0; font-size:1.15rem; letter-spacing:-.015em; }
.deal__sub{ width:100%; margin:0; font-size:13.5px; color:var(--body); line-height:1.55; }
.deal__more{
  margin-top:auto; padding-top:6px;
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700;
}
.deal__more svg{ width:15px; height:15px; transition:transform .25s var(--e); }
.deal__more:hover{ text-decoration:underline; text-underline-offset:3px; }
.deal__more:hover svg{ transform:translateX(4px); }

/* contador de la promo */
.deal__clock[hidden]{ display:none; }
.deal__clock{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:0 0 auto;
  padding:5px 12px; border-radius:999px;
  background:#fff; border:1px solid rgba(224,72,62,.3);
  font-size:11.5px; font-weight:800; letter-spacing:.03em; color:var(--sale);
}
.deal__clock svg{ width:14px; height:14px; stroke:var(--sale); }

/* flechas del carrusel, junto al botón "All deals" */
.railnav{ display:flex; gap:8px; }
.railnav button{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center;
  transition:border-color .2s var(--e);
}
.railnav button:hover{ border-color:var(--ink); }
.railnav button:last-child{ border-color:var(--ink); }
.railnav svg{ width:16px; height:16px; }

/* =========================================================
   PROMO MODAL
   ========================================================= */
/* [hidden] must beat display:grid, or the closed modal sits invisibly
   over the whole page and eats every click */
.pmodal[hidden]{ display:none; }
.pmodal{ position:fixed; inset:0; z-index:620; display:grid; place-items:center; padding:20px; }
.pmodal__back{
  position:absolute; inset:0; background:rgba(16,16,18,.5);
  opacity:0; transition:opacity .3s var(--e);
}
.pmodal__card{
  position:relative; width:min(520px, 100%);
  max-height:min(86svh, 720px); overflow:auto;
  background:var(--white); border-radius:20px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .3s var(--e), transform .3s var(--e);
}
.pmodal.is-on .pmodal__back{ opacity:1; }
.pmodal.is-on .pmodal__card{ opacity:1; transform:none; }
.pmodal__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1px solid var(--line);
  display:grid; place-items:center;
  transition:background-color .2s var(--e), color .2s var(--e), border-color .2s var(--e);
}
.pmodal__close:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pmodal__close svg{ width:17px; height:17px; }
.pmodal__media{ display:grid; place-items:center; padding:26px; }
.pmodal__media img{
  width:100%; max-width:300px; aspect-ratio:4/3; object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(16,16,18,.16));
}
.pmodal__media--lilac{ background:linear-gradient(115deg,var(--tint-lilac),#f6e7f4); }
.pmodal__media--mint{ background:var(--tint-mint); }
.pmodal__media--butter{ background:var(--tint-butter); }
.pmodal__media--rose{ background:var(--tint-rose); }
.pmodal__body{ padding:22px 26px 28px; }
.pmodal__tag{
  margin:0 0 6px; font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.pmodal__body h3{ margin:0 0 10px; font-size:1.5rem; letter-spacing:-.02em; }
.pmodal__sub{ margin:0 0 16px; font-size:14.5px; color:var(--body); line-height:1.6; }
.pmodal__list{ margin:0 0 16px; padding:0; list-style:none; display:grid; gap:9px; }
.pmodal__list li{ position:relative; padding-left:26px; font-size:13.5px; line-height:1.5; }
.pmodal__list li::before{
  content:"✓"; position:absolute; left:0; top:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--ink); color:#fff;
  font-size:9.5px; font-weight:700; line-height:16px; text-align:center;
}
.pmodal__fine{ margin:0 0 20px; font-size:12px; color:var(--muted); line-height:1.5; }
.pmodal__cta{ width:100%; }

/* =========================================================
   DEALS HERO — sale banner + category strip, same cap and
   rounding behaviour as the home carousel
   ========================================================= */
.dealhero{ background:var(--white); border-bottom:1px solid var(--line); }
.dealhero__banner{
  position:relative; overflow:hidden;
  max-width:var(--shell); margin-inline:auto;
  min-height:clamp(260px, 36vh, 400px);
  display:grid; place-items:center; text-align:center;
  padding:44px var(--edge);
  background:linear-gradient(115deg, var(--tint-lilac), var(--tint-rose) 48%, var(--tint-butter));
}
@media (min-width:1520px){
  .dealhero__banner{ border-radius:0 0 18px 18px; }
}
.dealhero__copy{ position:relative; z-index:1; }
.dealhero__kicker{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:6px 14px;
  border-radius:999px; background:rgba(255,255,255,.65);
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
}
.dealhero__kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--deep-rose);
  animation:blink 2.2s ease-in-out infinite;
}
.dealhero__banner h1{
  margin:0 0 14px;
  font-size:clamp(2.6rem, 5.5vw, 4.6rem); font-weight:800; letter-spacing:-.03em;
}
.dealhero__sub{
  display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
  margin:0; font-size:15.5px; font-weight:600; color:var(--body);
}
.dealhero__sub svg{ width:19px; height:19px; flex:0 0 auto; }
.dealhero__sub a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
.dealhero__cut{
  position:absolute; bottom:-4%; z-index:0;
  width:clamp(150px, 17vw, 250px); height:auto;
  filter:drop-shadow(0 18px 28px rgba(16,16,18,.18));
}
.dealhero__cut--a{ left:4%; }
.dealhero__cut--b{ right:4%; }

.dealhero__cats-h{ margin:28px 0 0; text-align:center; font-size:1.15rem; }
.dealhero__cats{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(16px, 3vw, 44px); padding:22px 0 30px;
}
.dealhero__cats a{
  display:grid; justify-items:center; gap:10px;
  font-size:13.5px; font-weight:700;
  transition:transform .25s var(--e);
}
.dealhero__cats a:hover{ transform:translateY(-3px); }
.dealhero__thumb{
  width:88px; height:88px; border-radius:26px;
  display:grid; place-items:center; padding:12px;
}
.dealhero__thumb--0{ background:var(--tint-lilac); }
.dealhero__thumb--1{ background:var(--tint-mint); }
.dealhero__thumb--2{ background:var(--tint-butter); }
.dealhero__thumb--3{ background:var(--tint-rose); }
.dealhero__thumb img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(16,16,18,.14));
}
@media (max-width:900px){
  .dealhero__cut{ display:none; }
  .dealhero__thumb{ width:72px; height:72px; border-radius:20px; }
}

/* prebuilt parts list — plain component rows, no links */
.pdp__parts{ margin-top:38px; }
.parts{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--white); overflow:hidden;
}
.parts__row{
  display:grid; grid-template-columns:132px 1fr; gap:14px; align-items:center;
  padding:13px 18px; border-top:1px solid var(--line);
}
.parts__row:first-child{ border-top:0; }
.parts__type{
  font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.parts__name{ font-size:14.5px; font-weight:700; }
@media (max-width:700px){
  .parts__row{ grid-template-columns:1fr; gap:3px; padding:12px 16px; }
}

/* "+ tax" note beside a PDP price (and in the sticky buybar) */
.pdp__taxnote{
  font-family:var(--f-body); font-size:.42em; font-weight:700;
  color:var(--body); letter-spacing:0; vertical-align:middle;
}
.buybar__tax{ font-size:.68em; font-weight:700; color:var(--body); }

/* round browse options above a listing — subcategories or gear categories */
.subcircles{
  display:flex; flex-wrap:wrap;
  gap:clamp(14px, 2.2vw, 30px);
  margin:20px 0 8px;
}
.subcircles a{
  display:grid; justify-items:center; gap:8px;
  font-size:13px; font-weight:700; text-align:center;
  color:var(--body);
  transition:transform .25s var(--e), color .25s;
}
.subcircles a:hover{ transform:translateY(-3px); color:var(--ink); }
.subcircle__thumb{
  width:76px; height:76px; border-radius:50%;
  background:var(--white); border:2px solid var(--line);
  display:grid; place-items:center; padding:12px; overflow:hidden;
  transition:border-color .25s var(--e);
}
.subcircles a:hover .subcircle__thumb{ border-color:var(--muted); }
.subcircles a.is-on{ color:var(--ink); }
.subcircles a.is-on .subcircle__thumb{ border-color:var(--ink); }
.subcircle__thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.subcircle__thumb b{ font-family:var(--f-disp); font-size:24px; color:var(--muted); }
@media (max-width:700px){
  .subcircle__thumb{ width:62px; height:62px; padding:9px; }
  .subcircles{ gap:14px; }
}

/* =========================================================
   BANDS
   ========================================================= */
.band{ padding:clamp(54px,6vw,84px) 0; }
.band--tight{ padding:clamp(30px,3.5vw,48px) 0; }
.band--white{ background:var(--white); }
.band--gray{ background:var(--gray); }

.center-col{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.center-col .lead{ margin-inline:auto; }

.sechead{ margin-bottom:34px; max-width:70ch; }
.sechead h2{ margin-bottom:12px; }
.sechead p{ margin:0; color:var(--body); font-size:16px; }
.sechead .eyebrow{ color:var(--accent); font-size:12px; }
.sechead--center{ text-align:center; margin-inline:auto; }
.sechead--row{
  max-width:none; display:flex; justify-content:space-between;
  align-items:flex-end; gap:28px; flex-wrap:wrap;
}
.sechead--row>div{ max-width:62ch; }

/* ---------- Split (A1) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.split__media{ display:grid; place-items:center; }

.aioart{
  position:relative; width:100%; aspect-ratio:1; overflow:hidden;
  border-radius:var(--r-card); box-shadow:var(--shadow);
}
.aioart img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s var(--e); }
.aioart img.is-swapping{ opacity:0; }

.specs{ margin:0 0 22px; }
.specs div{ display:grid; grid-template-columns:120px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.specs dt{ font-size:13px; font-weight:700; color:var(--muted); }
.specs dd{ margin:0; font-size:15px; }

.pricenote{ margin:0 0 18px; font-size:13.5px; font-weight:700; color:var(--muted); }

/* =========================================================
   CATEGORY TILES
   ========================================================= */
/* 3x2 on desktop; every tile shares one structure: pastel tint,
   product cutout (or brand mark for unreleased lines), name bar */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cat{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-card); background:var(--gray); box-shadow:var(--shadow);
  transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.cat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.cat--lilac{ background:var(--tint-lilac); }
.cat--mint{ background:var(--tint-mint); }
.cat--butter{ background:var(--tint-butter); }
.cat--rose{ background:var(--tint-rose); }
.cat--gray{ background:var(--gray); }
.cat__media{
  aspect-ratio:16/9; display:grid; place-items:center;
  padding:18px 18px 6px; overflow:hidden;
}
.cat__cut{
  max-width:78%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(16,16,18,.15));
  transition:transform .5s var(--e);
}
.cat:hover .cat__cut{ transform:scale(1.05); }
.cat__soon{
  display:grid; place-items:center; gap:8px; align-content:center; height:100%;
}
.cat__soon img{
  width:64px; height:64px; object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(16,16,18,.14));
  transition:transform .5s var(--e);
}
.cat:hover .cat__soon img{ transform:scale(1.08); }
.cat__soon span{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.cat__body{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-top:1px solid rgba(16,16,18,.06);
}
.cat__body span{ font-size:13.5px; font-weight:700; color:var(--ink); opacity:.72; white-space:nowrap; }

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pcard{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-card); background:var(--white); box-shadow:var(--shadow);
  transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.pcard--hot{ box-shadow:0 0 0 2px var(--tint-lilac), 0 0 0 3.5px var(--accent), 0 2px 8px rgba(0,0,0,.06); }
.pcard--hot:hover{ box-shadow:0 0 0 2px var(--tint-lilac), 0 0 0 3.5px var(--accent), var(--shadow-lg); }

.pcard__media{ display:block; position:relative; aspect-ratio:4/3; background:#fff; overflow:hidden; }
.pcard__body h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.status{ margin:0; font-size:13.5px; font-weight:700; color:var(--muted); }
.pcard__media img{
  width:100%; height:100%; object-fit:contain;
  padding:12px; border-radius:18px;   /* las fotos con fondo no se cortan contra la tarjeta */
  transition:opacity .3s var(--e), transform .5s var(--e);
}
.pcard:hover .pcard__media img{ transform:scale(1.03); }
.pcard__media img.is-swapping{ opacity:0; }

.pcard__body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; border-top:1px solid var(--line); }
.pcard__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.pcard__body h3{ margin-bottom:6px; }
.pcard__spec{ margin:0 0 18px; font-size:13.5px; color:var(--body); line-height:1.55; }
.pcard__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.price{ margin:0; font-family:var(--f-disp); font-size:24px; font-weight:800; letter-spacing:-.025em; }

/* product gallery — one big box, thumbs down the side */
.pdp__gal{ display:grid; gap:14px; }
.pdp__gal--thumbs{ grid-template-columns:118px minmax(0,1fr); align-items:start; }
.pdp__thumbs{
  display:flex; flex-direction:column; gap:12px;
  /* many photos: the rail scrolls within the stage's height cap instead
     of stretching the sticky gallery past short viewports — with NO
     visible scrollbar (it caused an ugly bar inside the rail) */
  max-height:calc(100vh - 190px); overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
}
.pdp__thumbs::-webkit-scrollbar{ display:none; }
.pdp__thumb{
  position:relative; width:118px; height:96px; padding:9px;
  flex:none;   /* the scrolling rail must never squish the thumbs */
  border:2px solid var(--line); border-radius:14px; background:#fff;
  display:grid; place-items:center; overflow:hidden;
  transition:border-color .2s var(--e), transform .2s var(--e);
}
.pdp__thumb:hover{ transform:translateY(-2px); }
.pdp__thumb[aria-pressed="true"]{ border-color:var(--ink); }
.pdp__thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pdp__thumbdot{
  position:absolute; right:6px; bottom:6px;
  width:13px; height:13px; border-radius:50%;
  border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(16,16,18,.18);
}
@media (max-width:1100px){
  .pdp__gal--thumbs{ grid-template-columns:1fr; }
  .pdp__thumbs{ flex-direction:row; flex-wrap:wrap; order:2; }
}

/* finish swatches */
.swatches{ display:flex; gap:6px; }
/* detail page colour picker — label + dots on one row, apart from the gallery */
.pdp__swatches{ display:flex; align-items:center; gap:12px; margin:2px 0 6px; }
.pdp__swatches .pdp__pricenote{ margin:0; }
.pdp__swatches .swatch{ width:26px; height:26px; }
.swatch{
  width:22px; height:22px; border-radius:50%; padding:0;
  border:2px solid var(--line);
  transition:border-color .2s var(--e), transform .2s var(--e);
}
.swatch:hover{ transform:scale(1.12); }
.swatch[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 2px #fff; }
.swatch--black{ background:#131316; }
.swatch--white{ background:#f2f2ee; }

.shopnote{ margin:22px 0 0; font-size:13.5px; color:var(--muted); }
.shopnote a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; color:var(--ink); }

/* placeholder art for products without renders yet — quiet, light,
   on-brand: soft neutral gradient, ghosted model code, muted label */
.ph{
  width:100%; height:100%; display:grid; place-items:center; align-content:center; gap:6px;
  background:linear-gradient(165deg,#f8f8f9,#ececef);
}
.ph b{
  font-family:var(--f-disp); font-size:clamp(34px,4vw,48px); font-weight:800;
  letter-spacing:-.02em; color:#c9c9d1;
}
.ph span{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* =========================================================
   CATEGORY & PRODUCT PAGES (routed views)
   ========================================================= */
.crumbs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; font-weight:600; color:var(--muted); margin-bottom:22px;
}
.crumbs a{ color:var(--ink); }
.crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }
.crumbs i{ font-style:normal; opacity:.5; }

/* colour dot + sale marker in the filter sidebar */
.fdot{
  display:inline-grid; place-items:center;
  width:13px; height:13px; border-radius:50%;
  border:1px solid rgba(16,16,18,.22);
  margin-right:3px; vertical-align:-2px;
  font-size:8px; font-style:normal; font-weight:800; color:#fff;
}
.fdot--sale{ background:var(--sale); border-color:var(--sale); }

/* sticky add-to-cart bar on the product page (mobile) */
.buybar{ display:none; }
/* the PDP stacks to one column below 1100px — the sticky buybar must
   cover that whole range, not just phones */
@media (max-width:1100px){
  .buybar{
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--white); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(16,16,18,.10);
  }
  .buybar__info{ display:grid; line-height:1.3; min-width:0; }
  .buybar__info b{ font-family:var(--f-disp); font-size:18px; letter-spacing:-.02em; }
  .buybar__info span{
    font-size:12px; color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .buybar .btn{ flex:0 0 auto; }
  section:has(> .buybar){ padding-bottom:76px; }
}

/* empty category — branded panel, no filter skeleton */
.emptycat{
  display:grid; justify-items:center; gap:10px; text-align:center;
  padding:clamp(48px,8vw,90px) 24px;
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow);
}
.emptycat img{ width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(16,16,18,.14)); }
.emptycat h1{ font-size:clamp(1.7rem,3vw,2.5rem); }
.emptycat p{ margin:0; max-width:52ch; color:var(--body); font-size:15.5px; line-height:1.65; }
.emptycat__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:14px; }

.cathead{ margin-bottom:34px; max-width:70ch; }
.cathead h1{ font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:10px; }
.cathead p{ margin:0; color:var(--body); font-size:16px; }
.cathead .chip{ margin-bottom:14px; }

/* product detail page */
.pdp{ display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(24px,3.4vw,52px); align-items:start; }
.pdp__gallery{ position:sticky; top:calc(var(--nav-h) + var(--row-h) + 20px); }
.pdp__main{
  /* square stage — portrait chassis shots fill it instead of floating
     small inside a wide 4:3 box; capped so the sticky gallery always
     fits short laptop viewports and never buries the price column */
  /* el min-height nunca puede pasar del ancho disponible: con aspect-ratio 1/1
     un suelo mayor que la columna ensancharia el cuadro y sacaria scroll
     horizontal en movil */
  aspect-ratio:1/1; max-height:calc(100vh - 190px); min-height:320px;
  border-radius:var(--r-card); overflow:hidden;
  background:#fff; box-shadow:var(--shadow); padding:clamp(12px,1.4vw,20px);
}
.pdp__main img{ margin:0 auto; }
.pdp__main img{ width:100%; height:100%; object-fit:contain; transition:opacity .3s var(--e); }
.pdp__main img.is-swapping{ opacity:0; }
.pdp__main .ph{ border-radius:var(--r-card); }
.pdp__thumb[aria-pressed="true"]{ border-color:var(--ink); }

.pdp__info .chip{ margin-bottom:14px; }
.pdp__info h1{ font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:8px; }
.pdp__cat{ margin:0 0 18px; font-size:13.5px; font-weight:700; color:var(--muted); }
.pdp__price{
  font-family:var(--f-disp); font-size:34px; font-weight:800; letter-spacing:-.025em;
  margin:0 0 4px;
}
.pdp__pricenote{ margin:0 0 22px; font-size:13px; font-weight:600; color:var(--muted); }
/* deal presentation (iBuyPower-style): savings pill, struck compare-at,
   green stock line, red add-to-cart */
.pdp__savings{ margin:0 0 8px; }
.savechip{
  display:inline-block; border:1.5px solid #e8823b; color:#d96f24;
  border-radius:999px; padding:3px 12px; font-size:13px; font-weight:800;
  background:#fff;
}
.pdp__strike{
  font-family:var(--f-body); font-size:.5em; font-weight:600;
  color:var(--muted); margin-left:10px; vertical-align:middle;
}
.pdp__stock{
  display:flex; align-items:center; gap:8px;
  margin:0 0 4px; font-size:14.5px; font-weight:800; color:#1e9e50;
}
.pdp__stock i{
  width:8px; height:8px; border-radius:50%; background:#1e9e50; flex:none;
}
.btn--buy{
  background:#f42a2a; border-color:#f42a2a; color:#fff;   /* iBuyPower-style vivid red */
  flex:1 1 200px;
}
.btn--buy:hover{ background:#d61c1c; border-color:#d61c1c; }

/* badges above the title — OS the machine ships with + RGB lighting */
.pdp__badges{
  display:flex; align-items:center; gap:16px; margin-bottom:14px;
}
.osbadge{ display:flex; align-items:center; gap:9px; }
.osbadge svg{ width:26px; height:26px; flex:none; }
.osbadge b{
  display:block; font-family:var(--f-disp); font-size:15.5px;
  font-weight:800; letter-spacing:-.01em; color:#0078d4; line-height:1.15;
}
.osbadge em{
  display:block; font-style:normal; font-size:10.5px; font-weight:700;
  letter-spacing:.02em; color:var(--body);
}
.rgbbadge{
  width:52px; height:52px; border-radius:10px; object-fit:cover;
}
.pdp__desc{ margin:0 0 24px; font-size:15.5px; color:var(--body); line-height:1.7; max-width:52ch; }
.pdp__buy{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:28px; }
.pdp__specs{ margin:0; border-top:1px solid var(--line); }
.pdp__specs div{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.pdp__specs dt{ font-size:13px; font-weight:700; color:var(--muted); }
.pdp__specs dd{ margin:0; font-size:14.5px; }

.pdp__finish{ margin-bottom:24px; }
.pdp__finish .seg__label{ display:block; margin-bottom:10px; }

/* =========================================================
   ZYRION PERFORMANCE — FPS estimados desde las piezas.
   El bloque enseña de dónde sale cada cifra (puntuación de
   la GPU, de la CPU y fuente) para que se lea como lo que
   es: una estimación, no una prueba de esta máquina.
   ========================================================= */
.fpsbox{
  margin-top:28px; padding:22px 24px 20px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--white);
}
/* cabecera centrada: el wordmark hace de marca, igual que en la web —
   el arte es blanco sobre transparencia, se invierte para fondo claro */
.fpsbox__head{ text-align:center; margin-bottom:18px; }
.fpsbox__brand{
  margin:0 0 8px; display:flex; align-items:center; justify-content:center; gap:9px;
}
.fpsbox__logo{ height:17px; width:auto; filter:invert(1) brightness(.14); }
.fpsbox__brand span{
  font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.fpsbox__h{ margin:0 0 10px; font-size:1.35rem; letter-spacing:-.02em; }

/* una sola línea con la puntuación y el enlace al detalle: el resto de la
   explicación vive en el modal para no comerse la columna */
.fpsbox__score{
  margin:0; display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  justify-content:center;
  padding:7px 14px; border-radius:999px; background:var(--gray);
}
.fpsbox__scorelabel{
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.fpsbox__score b{
  font-family:var(--f-disp); font-size:21px; font-weight:800;
  letter-spacing:-.03em; color:#1e9e50; line-height:1;
}
.fpsbox__more{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; color:var(--accent);
}
.fpsbox__more svg{ width:13px; height:13px; transition:transform .25s var(--e); }
.fpsbox__more:hover{ text-decoration:underline; text-underline-offset:3px; }
.fpsbox__more:hover svg{ transform:translateX(3px); }

/* selector de resolución + leyenda de colores, en la misma línea */
.fpsbox__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:4px;
}
.fpsbox__seg{ margin:0; }
.fpsbox__legend{
  margin:0; display:flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap;
}
.fpsbox__legend i{
  width:8px; height:8px; border-radius:50%; margin-left:7px;
}
.fpsbox__legend i:first-child{ margin-left:0; }
.fpsbox__legend .is-lo{ background:var(--sale); }
.fpsbox__legend .is-mid{ background:#c9761f; }
.fpsbox__legend .is-hi{ background:#1e9e50; }
.fpsbox__list{ margin:0; padding:0; list-style:none; }
.fpsbox__row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.fpsbox__game{ font-size:14px; font-weight:600; }
.fpsbox__game em{
  display:block; font-style:normal; font-size:11px; font-weight:600; color:var(--muted);
}
.fpsbox__val{
  flex:none; font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap;
}
.fpsbox__val b{
  font-family:var(--f-disp); font-size:19px; font-weight:800;
  letter-spacing:-.02em; color:var(--ink); margin-right:3px;
}
/* el color sitúa la cifra de un vistazo: rojo por debajo de 60,
   naranja de 60 a 90, verde por encima de 90 */
.fpsbox__val.is-lo  b{ color:var(--sale); }
.fpsbox__val.is-mid b{ color:#c9761f; }
.fpsbox__val.is-hi  b{ color:#1e9e50; }
.fpsbox__val.is-pending{ color:var(--muted); font-size:17px; }
.fpsbox__fine{
  margin:14px 0 0; font-size:11.5px; color:var(--muted); line-height:1.55;
}

/* ---- detalle dentro del modal de "Learn more" ---- */
.fdetail{ margin:0 0 18px; border-top:1px solid var(--line); }
.fdetail__row{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px; row-gap:2px; padding:11px 0; border-bottom:1px solid var(--line);
}
.fdetail__kind{
  font-size:9.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.fdetail__score{
  text-align:right; font-family:var(--f-disp);
  font-size:16px; font-weight:800; letter-spacing:-.02em; white-space:nowrap;
}
.fdetail__score b{ font-weight:800; }
.fdetail__name{ font-size:13px; font-weight:700; line-height:1.35; }
.fdetail__src{
  text-align:right; font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.fdetail__row--total .fdetail__score b{ color:#1e9e50; }
.fdetail__row--total .fdetail__name{
  font-family:var(--f-body); font-size:11.5px; font-weight:600; color:var(--muted);
}

.fmodal__legend{
  margin:0 0 16px; display:grid; gap:6px;
  font-size:12px; font-weight:600; color:var(--body);
}
.fmodal__legend span{ display:flex; align-items:center; gap:8px; }
.fmodal__legend i{ width:9px; height:9px; border-radius:50%; flex:none; }
.fmodal__legend .is-lo{ background:var(--sale); }
.fmodal__legend .is-mid{ background:#c9761f; }
.fmodal__legend .is-hi{ background:#1e9e50; }

/* ---------------------------------------------------------
   ZYRION VERIFIED PERFORMANCE — tabla de FPS medidos en casa
   con PresentMon/CapFrameX. Mismo formato que el bloque de
   3DMark de iBUYPOWER pero con datos propios: cabecera, un
   selector de resolución y una fila por juego.
   --------------------------------------------------------- */
.fpsbox{
  margin-top:34px; padding:22px 22px 18px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--white); text-align:center;
}
.fpsbox__brand{
  margin:0 0 5px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.fpsbox__brand b{
  font-family:var(--f-disp); font-size:15.5px; font-weight:800;
  letter-spacing:-.01em; text-transform:none; color:var(--ink);
}
.fpsbox__h{ margin:0 0 4px; font-size:1.15rem; letter-spacing:-.015em; }
.fpsbox__meta{ margin:0 0 16px; font-size:12.5px; font-weight:600; color:var(--muted); }
.fpsbox__seg{ display:inline-flex; }
.fpsbox__list{ list-style:none; margin:16px 0 0; padding:0; text-align:left; }
.fpsbox__row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 2px; border-top:1px solid var(--line);
}
.fpsbox__row:first-child{ border-top:0; }
.fpsbox__game{ font-size:14.5px; }
.fpsbox__val{ flex:none; font-size:13px; font-weight:700; color:var(--body); white-space:nowrap; }
.fpsbox__val b{
  font-family:var(--f-disp); font-size:17px; font-weight:800; letter-spacing:-.02em;
}
.fpsbox__val em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--muted); }
/* verde = va sobrado, ámbar = correcto, rojo = justo. Ver fpsTone() */
.fpsbox__val.is-hi b{ color:#1e9e50; }
.fpsbox__val.is-mid b{ color:#c9761f; }
.fpsbox__val.is-lo b{ color:var(--sale); }
.fpsbox__val.is-pending{ font-size:17px; color:var(--muted); }
.fpsbox__fine{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.6; color:var(--muted); text-align:left;
}

/* "more from category" strip */
.morehead{ margin:56px 0 22px; display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.morehead h2{ font-size:clamp(1.3rem,2.2vw,1.8rem); }
.morehead a{ font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

/* =========================================================
   LISTING PAGE (filters sidebar + horizontal cards)
   ========================================================= */
.listing{ display:grid; grid-template-columns:250px 1fr; gap:clamp(22px,3vw,40px); align-items:start; }

.filters{
  position:sticky; top:calc(var(--nav-h) + var(--row-h) + 16px);
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:20px 22px;
}
.filters__head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px;
}
.filters__head h2{ font-size:17px; }
.filters__reset{
  font-size:12.5px; font-weight:700; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.filters__reset:hover{ color:var(--ink); }
/* disclosure control — mobile only, see the max-width:900px block */
.filters__toggle{ display:none; }
.fgroup{ padding:14px 0; border-top:1px solid var(--line); border-left:0; border-right:0; border-bottom:0; margin:0; min-width:0; }
.fgroup:first-of-type{ border-top:0; }
/* an h3 inside the fieldset, not a <legend> — a rendered legend is laid out
   in the block-start border area, which clipped the group divider in half */
.fgroup h3{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-family:var(--f-body); }
.fgroup__h{ margin:0; }
/* the whole title row is the accordion control */
.fgroup__t{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:0 0 12px; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
}
.fgroup__t:hover{ color:var(--ink); }
.fgroup__t:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.fgroup__chev{
  width:8px; height:8px; flex:none; margin-bottom:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s;
}
.fgroup.is-shut .fgroup__chev{ transform:rotate(-135deg); margin-bottom:-3px; }
.fgroup.is-shut .fgroup__b{ display:none; }
/* the title carried the group's bottom spacing; when shut, the button's own
   padding is all that remains, so drop it to keep the rows evenly pitched */
.fgroup.is-shut .fgroup__t{ padding-bottom:0; }
.fprice{ display:flex; align-items:center; gap:8px; }
.fprice input{
  width:100%; min-width:0; height:38px; padding:0 10px; border-radius:10px;
  border:1.5px solid var(--line); font-family:inherit; font-size:14px; outline:0;
}
.fprice input:focus{ border-color:var(--ink); }
.fprice input:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.fprice span{ color:var(--muted); }
.fcheck{ display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:14px; font-weight:600; }
.fcheck input{ appearance:none; width:18px; height:18px; margin:0; border:1.5px solid var(--line); border-radius:5px; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.fcheck input:checked{ background:var(--ink); border-color:var(--ink); }
.fcheck input:checked::after{ content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); }
.fcount{ color:var(--muted); font-weight:600; font-size:12.5px; }
/* an option that would return nothing stays clickable but reads as spent */
.fcheck.is-empty{ opacity:.45; }

/* count of active constraints, next to the panel title */
.fbadge{
  display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--ink); color:#fff;
  font-family:var(--f-body); font-size:11.5px; font-weight:800; vertical-align:2px;
}
/* an author display: wins over the UA [hidden] rule — same guard the
   .deal__clock, .pmodal and .scrim rules already carry */
.fbadge[hidden]{ display:none; }
/* one chip per active constraint, each removable on its own */
.fchips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.fchips[hidden]{ display:none; }
.fchip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white); color:var(--ink);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.18s;
}
.fchip:hover{ border-color:var(--ink); }
.fchip i{ font-style:normal; font-size:14px; line-height:1; color:var(--muted); }
.fchip:hover i{ color:var(--ink); }
.noresults [data-clearall]{ margin-top:14px; }

.listbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:18px; flex-wrap:wrap;
}
.listbar__count{ font-size:14px; font-weight:600; color:var(--muted); }
.sort{ display:flex; align-items:center; gap:10px; }
.sort label{ font-size:13px; font-weight:700; color:var(--muted); }
.sort select{
  border:1.5px solid var(--line); border-radius:999px; padding:9px 16px;
  font-family:inherit; font-size:14px; font-weight:600; background:var(--white); color:var(--ink);
}
.sort select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-color:var(--ink); }

.plist{ display:flex; flex-direction:column; gap:18px; }
.hcard{
  display:grid; grid-template-columns:250px 1fr 230px; gap:clamp(16px,2vw,28px);
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:20px; align-items:center;
  transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.hcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.hcard--hot{ box-shadow:0 0 0 2px var(--tint-lilac), 0 0 0 3.5px var(--accent), 0 2px 8px rgba(0,0,0,.06); }
.hcard__media{
  display:block; position:relative; aspect-ratio:4/3; border-radius:var(--r-mid); overflow:hidden; background:#fff;
}
.hcard__media img{ width:100%; height:100%; object-fit:contain; padding:12px; border-radius:18px; transition:opacity .3s var(--e), transform .5s var(--e); }
.hcard:hover .hcard__media img{ transform:scale(1.03); }
.hcard__media img.is-swapping{ opacity:0; }
.hcard__media .ph{ border-radius:var(--r-mid); }

.pbrand{
  margin:8px 0 -4px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.hcard__info h3{ font-size:19px; margin:8px 0 10px; }
.hcard__info h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.hcard__specs{ list-style:none; margin:0 0 12px; padding:0; }
.hcard__specs li{
  position:relative; padding:4px 0 4px 24px; font-size:13.5px; color:var(--body);
}
.hcard__specs li::before{
  content:""; position:absolute; left:2px; top:.72em; width:10px; height:6px;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}
.hcard__swatches{ display:flex; align-items:center; gap:8px; }
.hcard__swatches span{ font-size:12px; font-weight:700; color:var(--muted); }

.hcard__buy{
  align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding-left:clamp(16px,2vw,28px); border-left:1px solid var(--line);
}
.hcard__ship{ font-size:12.5px; font-weight:600; color:var(--muted); }
.hcard__price{ font-family:var(--f-disp); font-size:26px; font-weight:800; letter-spacing:-.025em; }
.hcard__status{ font-family:var(--f-disp); font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--muted); }
.hcard__buy .btn{ margin-top:10px; width:100%; }

.noresults{
  padding:44px 24px; text-align:center; background:var(--white);
  border-radius:var(--r-card); box-shadow:var(--shadow);
  font-size:15px; color:var(--body);
}
.noresults b{ display:block; font-family:var(--f-disp); font-size:19px; color:var(--ink); margin-bottom:6px; }

/* =========================================================
   BUILD YOUR OWN — PC-Lab-style wizard
   ========================================================= */
/* Full-bleed: the wizard owns the whole viewport width, like a real
   configurator — only the --edge gutters hold it off the glass. */
.lab-wrap{ background:var(--gray); padding:16px var(--edge) 32px; }
.lab{
  width:100%;
  display:grid; grid-template-columns:250px minmax(0,1fr) clamp(320px, 25vw, 420px);
  gap:16px; align-items:start;
}

/* left: step rail */
.lab__nav{
  position:sticky; top:calc(var(--nav-h) + var(--row-h) + 14px);
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:16px 0 12px; display:flex; flex-direction:column;
}
.lab__nav h3{
  font-family:var(--f-body); font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:10px 18px 6px; border-top:1px solid var(--line); margin-top:6px;
}
.lab__nav h3:first-child{ border-top:0; margin-top:0; }
.lab__step{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:9px 18px; text-align:left; border-left:3px solid transparent;
  transition:background-color .2s var(--e), border-color .2s var(--e);
}
.lab__step:hover{ background:var(--gray); }
.lab__step[aria-current="true"]{ border-left-color:var(--ink); background:var(--gray); }
.lab__step span{ font-size:13.5px; font-weight:700; }
.lab__step em{ font-style:normal; font-size:11.5px; color:var(--muted); font-weight:600; min-height:14px; }
.lab__reset{
  margin:12px 18px 4px; padding:9px 0; border-top:1px solid var(--line);
  font-size:12.5px; font-weight:700; color:var(--muted); text-align:left;
}
.lab__reset:hover{ color:var(--ink); }

/* middle: options for the current step */
.lab__main{
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  min-height:calc(100svh - var(--nav-h) - var(--row-h) - 110px);
}
.lab__head{ padding:20px 24px 12px; border-bottom:1px solid var(--line); }
.lab__head h1{ font-size:clamp(1.4rem,2.2vw,1.9rem); margin-bottom:2px; }
.lab__head p{ margin:0; font-size:13.5px; font-weight:600; color:var(--muted); }
.lab__opts{ flex:1; padding:16px 24px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }

.brow{
  display:grid; grid-template-columns:86px 1fr auto; gap:16px; align-items:center;
  padding:12px 14px; text-align:left;
  border:1.5px solid var(--line); border-radius:var(--r-mid); background:var(--white);
  transition:border-color .2s var(--e), background-color .2s var(--e);
}
.brow:hover{ border-color:var(--ink); }
.brow.is-sel{ border-color:var(--ink); background:var(--gray); box-shadow:inset 0 0 0 1px var(--ink); }
.brow__thumb{
  width:86px; height:64px; border-radius:9px; overflow:hidden;
  background:var(--gray); display:grid; place-items:center;
}
.brow__thumb img{ width:100%; height:100%; object-fit:contain; }
.ph--sm b{ font-size:18px; }
.brow__body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.brow__name{ font-family:var(--f-disp); font-size:15px; font-weight:700; letter-spacing:-.01em; }
.brow__meta{ font-size:12.5px; font-weight:600; color:var(--muted); }
.brow__price{ font-family:var(--f-disp); font-size:15.5px; font-weight:800; white-space:nowrap; }
.brow--none .brow__name{ color:var(--muted); }

/* overview rows */
.orow{
  display:grid; grid-template-columns:120px 1fr auto auto; gap:14px; align-items:center;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-mid);
}
.orow__label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.orow__pick{ font-size:14.5px; font-weight:700; }
.orow__price{ font-family:var(--f-disp); font-size:14.5px; font-weight:800; }
.orow__edit{
  font-size:12.5px; font-weight:700; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.orow__edit:hover{ color:var(--ink); }
.lab__ovcta{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.lab__ovcta p{ margin:0; font-size:12.5px; color:var(--muted); }
.lab__ovcta .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* bottom bar: total + back/next */
.lab__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.lab__totalbox{ display:flex; flex-direction:column; }
.lab__totalbox span{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.lab__totalbox b{ font-family:var(--f-disp); font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.lab__totalbox small{ font-size:11.5px; color:var(--muted); font-weight:600; }
.lab__navbtns{ display:flex; gap:10px; }
.lab__navbtns .btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* right: spec panel */
.lab__detail{
  position:sticky; top:calc(var(--nav-h) + var(--row-h) + 14px);
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:20px 22px;
}
.lab__dmedia{
  aspect-ratio:4/3; border-radius:var(--r-mid); overflow:hidden;
  background:var(--gray); margin-bottom:14px; display:grid; place-items:center;
}
.lab__dmedia img{ width:100%; height:100%; object-fit:contain; }
.lab__detail h2{ font-size:18px; margin-bottom:2px; }
.lab__dprice{ margin:0 0 14px; font-family:var(--f-disp); font-size:16px; font-weight:800; color:var(--muted); }
.lab__detail h4{
  font-family:var(--f-body); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.dspec{ margin:0 0 14px; }
.dspec div{
  display:grid; grid-template-columns:92px 1fr; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px;
}
.dspec dt{ font-weight:700; color:var(--muted); }
.dspec dd{ margin:0; }
.lab__dlink{ font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.lab__hint{ margin:0; font-size:13.5px; color:var(--muted); }

/* =========================================================
   PDP extras: gallery grid + qty stepper + meta rows
   ========================================================= */
.pdp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pdp__tile{
  aspect-ratio:1/.9; border-radius:var(--r-mid); overflow:hidden; padding:0;
  background:#fff; border:2px solid var(--line); cursor:pointer;
  transition:border-color .2s var(--e);
}
.pdp__tile img{ width:100%; height:100%; object-fit:contain; }
.pdp__tile[aria-pressed="true"]{ border-color:var(--ink); }
.pdp__tile--single{ grid-column:1 / -1; aspect-ratio:4/3; cursor:default; }
.pdp__tile .ph{ border-radius:0; }

.pdp__meta{ margin:0 0 24px; border-top:1px solid var(--line); }
.pdp__meta div{
  display:grid; grid-template-columns:110px 1fr; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:14px;
}
.pdp__meta dt{ font-weight:700; color:var(--muted); }
.pdp__meta dd{ margin:0; }

.qty{
  display:inline-flex; align-items:center; gap:2px;
  border:1.5px solid var(--line); border-radius:999px; padding:3px;
}
.qty button{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:17px; font-weight:700; line-height:1;
  transition:background-color .2s;
}
.qty button:hover{ background:var(--gray); }
.qty b{ min-width:34px; text-align:center; font-size:15px; }

/* =========================================================
   ROADMAP
   ========================================================= */
.roadmap{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rm{
  display:flex; align-items:center; gap:16px; padding:20px;
  border:1.5px solid var(--line); border-radius:var(--r-card); background:var(--white);
  transition:border-color .25s var(--e), transform .25s var(--e);
}
.rm:hover{ border-color:var(--ink); transform:translateY(-3px); }
.rm__code{
  flex:0 0 auto; width:48px; height:48px; border-radius:12px;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  font-family:var(--f-disp); font-size:17px; font-weight:800; letter-spacing:-.02em;
}
.rm h3{ font-size:15.5px; margin-bottom:2px; }
.rm p{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
.rm .chip{ margin-left:auto; flex:0 0 auto; }

/* =========================================================
   WHY ZYRION
   ========================================================= */
.proms{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prom{ padding:28px; border-radius:var(--r-card); background:var(--gray); }
.band--gray .prom{ background:var(--white); box-shadow:var(--shadow); }
.prom__icon{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:16px; box-shadow:var(--shadow);
}
/* the four promises rotate through the pastel family */
.prom:nth-child(1) .prom__icon{ background:var(--tint-lilac); color:var(--deep-lilac); }
.prom:nth-child(2) .prom__icon{ background:var(--tint-mint); color:var(--deep-mint); }
.prom:nth-child(3) .prom__icon{ background:var(--tint-butter); color:var(--deep-butter); }
.prom:nth-child(4) .prom__icon{ background:var(--tint-rose); color:var(--deep-rose); }
.prom__icon svg{ width:22px; height:22px; }
.prom h3{ font-size:16.5px; margin-bottom:8px; }
.prom p{ margin:0; font-size:14.5px; color:var(--body); line-height:1.65; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px; cursor:pointer; list-style:none;
  font-family:var(--f-disp); font-size:17px; font-weight:700; letter-spacing:-.018em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{ flex:0 0 auto; position:relative; width:16px; height:16px; }
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; left:0; top:7px; width:16px; height:2px;
  background:var(--ink); border-radius:2px; transition:transform .3s var(--e);
}
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i::after{ transform:rotate(0); }
.qa p{ margin:0 0 22px; padding-right:36px; font-size:15px; color:var(--body); line-height:1.7; }

/* =========================================================
   NOTIFY
   ========================================================= */
.news__form{ display:flex; gap:10px; margin-top:6px; width:min(470px,100%); }
.news__form input{
  flex:1; min-width:0; height:44px; padding:0 20px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white);
  font-family:inherit; font-size:15px; color:var(--ink); outline:0;
  transition:border-color .2s;
}
.news__form input:focus{ border-color:var(--ink); }
.news__form input::placeholder{ color:#a8a8b0; }
.news small{ display:block; margin-top:12px; min-height:20px; font-size:13.5px; font-weight:600; color:var(--body); }
.news small.is-bad{ color:#8a1f1f; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background:var(--white); border-top:1px solid var(--line); padding:54px 0 0; }
.foot__top{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,70px); align-items:start; padding-bottom:34px; }
.foot__brand{ display:flex; align-items:center; }
.foot__wordmark{ height:28px; width:auto; filter:invert(1) brightness(.14); }
.foot__claim{ margin:0; max-width:56ch; font-size:14.5px; color:var(--body); line-height:1.7; }

.foot__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:34px 0; border-top:1px solid var(--line); }
.foot__cols h4{ font-family:var(--f-body); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.foot__cols a{ display:block; padding:6px 0; font-size:14.5px; transition:opacity .2s; }
.foot__cols a:hover{ opacity:.55; }

.foot__bar{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:22px 0; border-top:1px solid var(--line); }
.social{ display:flex; gap:8px; }
.social a{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:var(--gray); transition:.22s var(--e);
}
.social a:hover{ background:var(--ink); color:#fff; }
.region{ display:flex; align-items:center; gap:10px; }
.region span{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.region select{
  border:1.5px solid var(--line); border-radius:999px; padding:9px 16px;
  font-family:inherit; font-size:14px; background:var(--white); color:var(--ink); outline:0;
}
.foot__legal{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:20px 0 40px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.foot__legal p{ margin:0; max-width:70ch; }
.foot__legal nav{ display:flex; gap:20px; flex-wrap:wrap; }
.foot__legal a:hover{ color:var(--ink); }

/* =========================================================
   CART DRAWER
   ========================================================= */
/* [hidden] must beat the component display values, or the closed drawer
   sits off-canvas and stretches the document 400px sideways */
.scrim[hidden],.drawer[hidden]{ display:none; }

.scrim{
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,.4);
  opacity:0; transition:opacity .3s var(--e);
}
.scrim.is-on{ opacity:1; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:610;
  width:min(420px, 100vw);
  display:flex; flex-direction:column;
  background:var(--white); box-shadow:-16px 0 44px rgba(0,0,0,.18);
  transform:translateX(102%); transition:transform .38s var(--e);
}
.drawer.is-on{ transform:none; }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--line);
}
.drawer__head h2{ font-size:19px; }
.drawer__close{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  transition:background-color .2s;
}
.drawer__close:hover{ background:var(--gray); }

.drawer__items{ flex:1; overflow-y:auto; padding:8px 22px; }
.citem{
  display:grid; grid-template-columns:74px 1fr auto; gap:14px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.citem__img{
  width:74px; height:56px; border-radius:10px; overflow:hidden;
  background:var(--gray); border:1px solid var(--line);
  display:grid; place-items:center;
}
.citem__img img{ width:100%; height:100%; object-fit:contain; }
.citem__img b{ font-family:var(--f-disp); font-size:18px; color:var(--muted); }
.citem__name{ font-family:var(--f-disp); font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.citem__meta{ font-size:12.5px; color:var(--muted); font-weight:600; }
.citem__qty{
  display:inline-flex; align-items:center; gap:2px; margin-top:8px;
  border:1.5px solid var(--line); border-radius:999px; padding:2px;
}
.citem__qty button{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:700; line-height:1;
  transition:background-color .2s;
}
.citem__qty button:hover{ background:var(--gray); }
.citem__qty b{ min-width:26px; text-align:center; font-size:13.5px; }
.citem__right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.citem__price{ font-family:var(--f-disp); font-size:15px; font-weight:800; }
.citem__rm{
  font-size:12px; font-weight:700; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.citem__rm:hover{ color:var(--ink); }

.drawer__empty{ padding:26px 22px; font-size:14.5px; color:var(--body); }
.drawer__empty a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

.drawer__foot{ padding:18px 22px 22px; border-top:1px solid var(--line); }
.drawer__coupon{ display:flex; gap:8px; margin-bottom:8px; }
.drawer__coupon input{
  flex:1; min-width:0; padding:10px 12px; font:inherit; font-size:13.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  border:1.5px dashed var(--line); border-radius:10px; background:var(--gray);
}
.drawer__coupon input:focus{ border-color:var(--deep-rose); outline:none; background:#fff; }
.drawer__applied{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.codechip{
  display:inline-block; padding:7px 13px; border-radius:10px;
  border:1.5px dashed var(--deep-mint); background:var(--tint-mint);
  font-size:12.5px; font-weight:800; letter-spacing:.07em; color:var(--deep-mint);
}
.drawer__applied button{
  font-size:12.5px; font-weight:700; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.drawer__applied button:hover{ color:var(--sale); }
.drawer__couponmsg{ margin:0 0 10px; min-height:16px; font-size:12.5px; font-weight:700; }
.drawer__couponmsg.is-ok{ color:var(--deep-mint); }
.drawer__couponmsg.is-err{ color:var(--sale); }
.drawer__row{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;
}
.drawer__row span{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.drawer__row b{ font-family:var(--f-disp); font-size:22px; font-weight:800; letter-spacing:-.02em; }
.drawer__row--sub b{ font-size:15.5px; }
.drawer__row--off b{ color:var(--deep-mint); }
.drawer__row--total{ border-top:1px solid var(--line); padding-top:10px; margin-top:8px; }
.drawer__note{ margin:0 0 14px; font-size:12.5px; color:var(--muted); }
.drawer__checkout{ width:100%; }
.drawer__msg{ margin:12px 0 0; min-height:18px; font-size:13px; font-weight:600; color:var(--body); }
.drawer__msg a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:650;
  transform:translate(-50%, 140%);
  background:var(--ink); color:#fff;
  padding:12px 22px; border-radius:999px;
  font-size:14px; font-weight:700; white-space:nowrap;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  transition:transform .35s var(--e);
  pointer-events:none;
}
.toast.is-on{ transform:translate(-50%, 0); }

/* ---------- Back to top ---------- */
.totop{
  position:fixed; right:20px; bottom:20px; z-index:300;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--e), transform .3s var(--e), visibility 0s linear .3s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--e), transform .3s var(--e), visibility 0s; }
.totop:hover{ background:#2c2c31; }

/* =========================================================
   REVEAL — fail-safe: without JS everything is visible
   ========================================================= */
.js-anim .rv{ opacity:0; transform:translateY(18px); }
.js-anim .rv.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--e), transform .7s var(--e);
}
.js-anim .hslide .rv.in{ transition-delay:calc(var(--d,0) * 80ms); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .hslide{
    aspect-ratio:4/5; min-height:440px; max-height:640px;
    align-items:flex-start; justify-content:center; text-align:center;
    padding-top:26px;
  }
  .hslide::before{
    background:linear-gradient(180deg,
      rgba(255,255,255,.65) 0, rgba(255,255,255,.35) 36%, rgba(255,255,255,0) 62%);
  }
  .hslide__media img{ object-position:center bottom; }
  .hslide h1,.hslide__h{ font-size:clamp(1.7rem, 5vw, 2.6rem); margin-bottom:10px; }
  .hslide__sub{ font-size:14.5px; margin-bottom:16px; max-width:38ch; }
  .hslide__kicker{ margin-bottom:12px; }
  .hslide__copy{ margin-inline:auto; }
  .hslide__cta{ justify-content:center; }
  .hslide__sub{ margin-inline:auto; }
  .cats{ grid-template-columns:1fr 1fr; }
  .pgrid,.proms{ grid-template-columns:repeat(2,1fr); }
  .roadmap{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:repeat(2,1fr); }
  .foot__top{ grid-template-columns:1fr; }
  .pdp{ grid-template-columns:1fr; }
  .pdp__gallery{ position:static; }
}

@media (max-width:900px){
  /* the category row collapses into a burger dropdown anchored to the nav
     itself (top:100%) — no hardcoded offsets, so the wrapping promo bar
     can't push it out of place. Mega panels are desktop-only. */
  .nav__row{
    position:absolute; left:0; right:0; top:100%; height:auto;
    flex-direction:column; align-items:stretch; gap:0; border-top:0;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(0,0,0,.09);
    padding:0 var(--pad); max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .38s var(--e), padding .38s var(--e), visibility 0s linear .38s;
  }
  .nav__row.is-open{
    max-height:min(70svh, 520px); padding:8px var(--pad) 14px;
    overflow-y:auto; visibility:visible;
    transition:max-height .38s var(--e), padding .38s var(--e), visibility 0s;
  }
  .nav__menu{ flex-direction:column; align-items:stretch; }
  .nav__link{ padding:14px 8px; font-size:15px; border-radius:10px; border-bottom:0; }
  .nav__link i{ display:none; }
  .nav__item:hover .nav__link,.nav__link[aria-expanded="true"]{ border-bottom:0; }
  .nav__side{ flex-direction:column; align-items:stretch; gap:0; padding-bottom:6px; }
  .nav__side .nav__link{ padding:14px 8px; }
  .nav__sep{ display:none; }
  .mega{ display:none; }
  .burger{ display:flex; }
  .burger.is-x span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .burger.is-x span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
  .search input{ padding-left:14px; }
  .pgrid,.proms,.roadmap{ grid-template-columns:1fr; }
  .cats{ grid-template-columns:1fr; }
  .sechead--row{ align-items:flex-start; }
  .nav__wordmark{ height:20px; }
  .listing{ grid-template-columns:1fr; }
  .filters{ position:static; }
  /* six facet groups stack to ~1000px — collapse them behind one control
     so the first product is reachable without a long scroll */
  .filters__toggle{
    display:inline-block; border:1.5px solid var(--line); border-radius:999px;
    padding:6px 14px; font-family:inherit; font-size:12.5px; font-weight:700;
    background:var(--white); color:var(--ink); cursor:pointer;
  }
  .filters__body{ display:none; }
  .filters.is-open .filters__body{ display:block; }
  .lab{ grid-template-columns:1fr; }
  .lab__nav{
    position:static; flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:2px; padding:10px 12px;
  }
  .lab__nav h3{ display:none; }
  .lab__step{ border-left:0; border-radius:999px; padding:8px 13px; }
  .lab__step[aria-current="true"]{ background:var(--ink); }
  .lab__step[aria-current="true"] span{ color:#fff; }
  .lab__step em{ display:none; }
  .lab__reset{ margin:0 0 0 auto; border-top:0; padding:8px 10px; }
  .lab__detail{ position:static; }
  .lab__main{ min-height:0; }
  .hcard{ grid-template-columns:1fr; }
  .hcard__buy{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:14px; }
  .pdp__grid{ grid-template-columns:1fr; }
  .pdp__tile{ aspect-ratio:4/3; }
}

@media (max-width:560px){
  .foot__cols{ grid-template-columns:1fr; }
  .news__form{ flex-direction:column; }
  .news__form .btn{ width:100%; }
  .specs div{ grid-template-columns:1fr; gap:2px; }
  .foot__legal{ flex-direction:column; }
  .rm{ flex-wrap:wrap; }
  .rm .chip{ margin-left:64px; }
  .totop{ right:14px; bottom:14px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js-anim .rv{ opacity:1; transform:none; }
}

/* =========================================================
   HOME 2.0 — mejora integrada: cajas de
   ofertas/best sellers/novedades, garantía, computers,
   gear + subcategorías, banco de trabajo. Los tiles de
   categoría pasan a neutro grande (2 columnas).
   ========================================================= */

/* Deals en rojo en el nav, como la referencia */
#navmenu .nav__link[href="#/deals"]{ color:var(--sale); }

/* --- cajas On sale / Best sellers / Latest --- */
.homeboxes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hbox{
  background:var(--white); border:1px solid rgba(16,16,18,.06);
  border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-width:0;
}
.hbox__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.hbox__head h2{ font-size:1.3rem; }
.hbox__tools{ display:flex; align-items:center; gap:12px; }
.hbox__all{ font-size:13.5px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.hbox__rail{
  flex:1;
  display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:2px;
}
.hbox__rail::-webkit-scrollbar{ display:none; }

/* mini tarjeta — mismo ancho exacto en las tres cajas: dos por vista */
.mcard{
  flex:0 0 calc(50% - 6px); min-width:0; scroll-snap-align:start;
  display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:var(--r-mid); overflow:hidden; background:var(--white);
  transition:transform .25s var(--e), box-shadow .25s var(--e);
}
.mcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.mcard__media{ position:relative; aspect-ratio:1; background:var(--tint-lilac); }
.hbox:nth-child(2) .mcard__media{ background:var(--tint-mint); }
.hbox:nth-child(3) .mcard__media{ background:var(--tint-butter); }
/* absolutas: la caja siempre es cuadrada, la foto nunca la deforma */
.mcard__media img, .mcard__media .ph{
  position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px);
  object-fit:contain; filter:drop-shadow(0 10px 16px rgba(16,16,18,.15));
}
.mcard__media .ph{ border-radius:10px; }
.mcard__media .salebadge{ top:8px; left:8px; }
.mcard__chip{
  position:absolute; top:8px; left:8px;
  background:var(--ink); color:#fff; font-size:11px; font-weight:800;
  padding:4px 10px; border-radius:999px;
}
.mcard__body{ flex:1; display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px; }
.mcard__brand{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); min-height:13px; }
.mcard__name{
  font-size:14px; font-weight:800; letter-spacing:-.01em; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.5em;
}
.mcard__spec{
  font-size:12px; color:var(--body); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.8em;
}
.mcard__price{ margin-top:auto; padding-top:6px; font-family:var(--f-disp); font-size:18px; font-weight:800; letter-spacing:-.02em; }
.mcard__price .was{ margin-left:6px; }
.mcard__ship{ font-size:11.5px; color:var(--muted); font-weight:600; }

/* --- garantía --- */
.warrband{ background:linear-gradient(120deg,#fdf6dd,#fefaef 60%,#fff); border-bottom:1px solid var(--line); }
.warrband__in{ display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); align-items:center; gap:clamp(18px,3vw,44px); }
.warrband__img{ width:100%; max-width:340px; object-fit:contain; filter:drop-shadow(0 16px 24px rgba(16,16,18,.18)); }
.warrband__copy h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); margin-bottom:10px; }
.warrband__copy p{ margin:0 0 8px; color:var(--body); font-size:15px; line-height:1.6; max-width:64ch; }
.warrband__fine{ color:var(--deep-butter) !important; font-weight:700; font-size:13px !important; margin-bottom:18px !important; }

/* --- tiles de categoría: neutro grande, 2 columnas --- */
.cats{ grid-template-columns:repeat(2,1fr); }
.cat, .cat--lilac, .cat--mint, .cat--butter, .cat--rose, .cat--gray{ background:var(--gray); }
.cat__media{ aspect-ratio:16/9.5; }
.cat__cut{ max-width:56%; max-height:88%; }
.cat__body{ background:var(--white); }

/* --- every computer --- */
.compband{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center; gap:clamp(20px,3.5vw,48px);
  border-radius:var(--r-card); overflow:hidden; background:var(--gray);
  padding:clamp(22px,3.5vw,44px); margin-bottom:18px;
}
.compband__copy h2{ margin-bottom:12px; }
.compband__copy p:not(.eyebrow){ margin:0 0 22px; color:var(--body); font-size:15.5px; line-height:1.65; max-width:48ch; }
.compband__media{ border-radius:var(--r-mid); overflow:hidden; }
.compband__media img{ width:100%; height:100%; object-fit:cover; }
.featduo{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.featcard{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  border-radius:var(--r-card); overflow:hidden; padding:clamp(22px,3vw,34px);
  min-height:340px; transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.featcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.featcard h3{ font-size:clamp(1.4rem,2vw,1.9rem); letter-spacing:-.02em; max-width:9em; position:relative; z-index:1; }
.featcard p{ margin:0; font-size:14px; line-height:1.6; max-width:34ch; position:relative; z-index:1; }
.featcard__cta{ margin-top:auto; font-size:14px; font-weight:800; position:relative; z-index:1; }
.featcard img{
  position:absolute; right:-4%; bottom:-6%; width:52%; max-height:78%; object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(16,16,18,.25));
}
.featcard--dark{ background:radial-gradient(120% 120% at 20% 0%, #26262b, #101013); color:#fff; }
.featcard--dark p{ color:rgba(255,255,255,.72); }
.featcard--mint{ background:var(--tint-mint); }
.chip--ghostlight{ background:rgba(255,255,255,.14); color:#fff; }

/* --- gear --- */
.gearcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:26px; }
.gearcard{
  display:flex; flex-direction:column; text-align:center; gap:8px;
  border-radius:var(--r-card); overflow:hidden; padding:26px 22px 0;
  transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.gearcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.gearcard h3{ font-size:1.35rem; }
.gearcard p{ margin:0 auto; font-size:13.5px; color:var(--body); line-height:1.55; max-width:38ch; }
.gearcard__go{ font-size:13.5px; font-weight:800; margin:4px 0 10px; }
.gearcard img{
  width:78%; margin:auto auto 0; object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(16,16,18,.16));
}
.gearcard--butter{ background:var(--tint-butter); }
.gearcard--butter .gearcard__go{ color:var(--deep-butter); }
.gearcard--rose{ background:var(--tint-rose); }
.gearcard--rose .gearcard__go{ color:var(--deep-rose); }
.gearcard--lilac{ background:var(--tint-lilac); }
.gearcard--lilac .gearcard__go{ color:var(--deep-lilac); }

/* --- banco de trabajo --- */
.bench{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,44px); align-items:center;
  background:var(--gray); border-radius:var(--r-card);
  padding:clamp(22px,3vw,36px);
}
.bench__head h3{ font-size:clamp(1.4rem,2.2vw,2rem); margin-bottom:10px; }
.bench__head p:not(.eyebrow){ margin:0 0 16px; color:var(--body); font-size:14.5px; line-height:1.6; max-width:44ch; }
.bench__all{ font-size:13.5px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.pgrid--bench{ grid-template-columns:1fr 1fr; }

@media (max-width:1100px){
  .homeboxes{ grid-template-columns:1fr; }
  .mcard{ flex-basis:calc(25% - 9px); }
  .warrband__in, .compband, .bench{ grid-template-columns:1fr; text-align:left; }
  .warrband__img{ max-width:240px; }
  .featduo, .gearcards{ grid-template-columns:1fr; }
  .featcard{ min-height:300px; }
}
@media (max-width:640px){
  .cats{ grid-template-columns:1fr; }
  .mcard{ flex-basis:calc(50% - 6px); }
  .pgrid--bench{ grid-template-columns:1fr; }
}


/* =========================================================
   FOTOS A SANGRE — una foto (jpg, subida del admin o *-scene.*)
   llena su cuadro por completo; los recortes transparentes
   mantienen padding y radio. Se autoaplica al cambiar el src.
   ========================================================= */
.pcard__media img[src$=".jpg"], .pcard__media img[src^="data:image/jpeg"], .pcard__media img[src*="-scene."],
.hcard__media img[src$=".jpg"], .hcard__media img[src^="data:image/jpeg"], .hcard__media img[src*="-scene."]{
  padding:0; border-radius:0; object-fit:cover;
}
.pdp__main img[src$=".jpg"], .pdp__main img[src^="data:image/jpeg"], .pdp__main img[src*="-scene."]{
  object-fit:cover;
}
/* la foto a sangre llega al borde del cuadro: sin padding, la imagen ocupa
   el recuadro entero. Los recortes transparentes conservan su margen. */
.pdp__main:has(> img[src$=".jpg"]),
.pdp__main:has(> img[src^="data:image/jpeg"]),
.pdp__main:has(> img[src*="-scene."]){ padding:0; }
.pdp__thumb img[src$=".jpg"], .pdp__thumb img[src^="data:image/jpeg"], .pdp__thumb img[src*="-scene."]{
  width:100%; height:100%; object-fit:cover; border-radius:7px;
}
.pdp__thumb:has(> img[src$=".jpg"]),
.pdp__thumb:has(> img[src^="data:image/jpeg"]),
.pdp__thumb:has(> img[src*="-scene."]){ padding:0; }
.pdp__thumb:has(> img[src$=".jpg"]) img,
.pdp__thumb:has(> img[src^="data:image/jpeg"]) img,
.pdp__thumb:has(> img[src*="-scene."]) img{ border-radius:10px; }
.mcard__media img[src$=".jpg"], .mcard__media img[src^="data:image/jpeg"], .mcard__media img[src*="-scene."]{
  inset:0; width:100%; height:100%; object-fit:cover;
}