/* =====================================================================
   QUBOS · Catálogo de juegos (qubos.cl/catalogo)
   Estilos extraídos del catálogo original. Al final: barra superior y
   reglas de impresión usadas para generar el PDF descargable.
   ===================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ground:#F2F6F5; --surface:#FFFFFF; --panel:#6C9497; --ink:#2F3C44; --ink-soft:#63757C;
  --line:#DDE7E6; --teal:#527B7F; --menta:#78CDB3; --on-panel:#F4FAF9; --on-panel-soft:#CFE2E1;
  --wa:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.21 8.21 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23a8.2 8.2 0 0 1 8.24 8.24c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.53.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.71-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.21.88 2.39 1.01 2.55.12.17 1.74 2.65 4.21 3.72.59.25 1.05.4 1.4.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.16-.48-.29Z'/></svg>");
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1A2327; --surface:#222E33; --panel:#2B3C41; --ink:#E4EDEB; --ink-soft:#9DB0B3;
    --line:#32444A; --teal:#8FC0C2; --menta:#78CDB3; --on-panel:#E9F3F1; --on-panel-soft:#A9C2C3;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#1A2327; --surface:#222E33; --panel:#2B3C41; --ink:#E4EDEB; --ink-soft:#9DB0B3;
  --line:#32444A; --teal:#8FC0C2; --menta:#78CDB3; --on-panel:#E9F3F1; --on-panel-soft:#A9C2C3;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}

/* ---------- bandas de foto a sangre ---------- */
.banda{position:relative;overflow:hidden;background:var(--panel)}
.banda>img{width:100%;height:clamp(340px,50vw,620px);object-fit:cover}
.banda--alta>img{height:clamp(400px,62vw,720px)}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,34,38,.58) 0%,rgba(22,34,38,.12) 42%,rgba(22,34,38,.82) 100%)}
.banda__in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding-block:clamp(24px,4vw,52px)}
.banda__in .wrap{width:100%}
.eyebrow-w{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--menta);margin:0 0 10px;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.banda h2,.banda blockquote,.banda h1{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.banda h2,.banda blockquote{font-size:clamp(26px,4.6vw,50px);font-weight:600;letter-spacing:-.028em;line-height:1.08;margin:0;color:#fff;text-wrap:balance;max-width:17ch}
.banda blockquote{font-weight:300}
.banda .nota{margin:16px 0 0;font-size:clamp(14px,1.7vw,17px);font-weight:300;color:rgba(255,255,255,.94);max-width:54ch;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* marca sobre la portada */
.hero__top{position:absolute;left:0;right:0;top:0;padding-block:clamp(20px,3.6vw,34px)}
.banda__logo{position:absolute;top:clamp(18px,3vw,30px);right:clamp(20px,3vw,34px);z-index:2}
.banda__logo img{width:clamp(96px,10vw,138px);height:auto;opacity:.9;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.mark img{width:clamp(126px,15vw,186px);height:auto}
.banda h1{font-size:clamp(32px,6.6vw,66px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0;color:#fff;text-wrap:balance;max-width:14ch}

/* ---------- paneles de texto ---------- */
.panel{background:var(--surface);border-bottom:1px solid var(--line)}
.panel .wrap{padding-block:clamp(32px,4.6vw,56px)}
.razones{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 30px}
@media(max-width:620px){.razones{grid-template-columns:1fr}}
.razones li{font-size:14.5px;color:var(--ink-soft);font-weight:300;padding-left:19px;position:relative;line-height:1.45}
.razones li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:1px;background:var(--menta)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,44px)}
@media(max-width:640px){.cols{grid-template-columns:1fr}}
.col h3{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 11px}
.col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.col li{font-size:13.5px;color:var(--ink-soft);font-weight:300;padding-left:16px;position:relative;line-height:1.45}
.col li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--teal)}

/* ---------- modelos ---------- */
.sec{padding-block:clamp(40px,5.6vw,72px)}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 9px}
h2.t{font-size:clamp(23px,3.2vw,34px);font-weight:600;letter-spacing:-.025em;margin:0;text-wrap:balance;max-width:22ch;line-height:1.14}
.grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(14px,1.9vw,22px);row-gap:0;margin-top:26px}
@media(max-width:940px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  grid-row:span 6;display:grid;grid-template-rows:subgrid;margin-bottom:clamp(14px,1.9vw,22px)}
@supports not (grid-template-rows:subgrid){.card{display:flex;flex-direction:column}.precio{margin-top:auto!important}}
.card__head{padding:18px 18px 0}
.desc{padding:11px 18px 0;margin:0}
.card__img{background:var(--panel);padding:16px;display:flex;align-items:center;justify-content:center;min-height:200px}
.card__img img{max-height:184px;width:auto;object-fit:contain}
.card h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.set{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-top:-6px}
.specs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:11px 18px 0;margin:0;align-content:flex-start}
.specs li{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-variant-numeric:tabular-nums;
  background:var(--ground);border:1px solid var(--line);border-radius:2px;padding:4px 8px;color:var(--ink-soft)}
.card p{margin:0;font-size:13.5px;color:var(--ink-soft);font-weight:300;line-height:1.55}
.arbol{border-left:2px solid var(--menta);margin:12px 18px 0;padding-left:11px;font-size:12.5px;color:var(--ink-soft);font-weight:300;line-height:1.5}
.arbol b{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:3px}
.precio{margin:14px 18px 18px;border-top:1px solid var(--line);padding-top:13px}
.precio strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.1}
.precio small{display:block;font-size:11px;color:var(--ink-soft);font-weight:300;margin-top:3px}
.wa-mini{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;text-decoration:none;
  color:#08331C;background:#25D366;border-radius:3px;padding:9px 14px}
.wa-mini svg{flex:none}
.wa-mini:hover{background:#1FBE5B}

.piezas{background:var(--panel);border-radius:4px;padding:clamp(22px,3.4vw,40px);margin-top:22px;color:var(--on-panel)}
.piezas h3{margin:0 0 7px;font-size:clamp(18px,2.4vw,25px);font-weight:600;letter-spacing:-.02em;color:#fff}
.piezas p{margin:0;font-size:14px;font-weight:300;color:var(--on-panel-soft);max-width:58ch;line-height:1.5}
.piezas__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.6vw,20px);margin-top:26px}
@media(max-width:940px){.piezas__grid{grid-template-columns:repeat(3,1fr)}}
.pieza{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;margin:0}
.pieza .box{height:clamp(78px,9vw,104px);width:100%;min-width:0;display:flex;align-items:flex-end;justify-content:center}
.pieza img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.pieza span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-panel-soft);text-align:center;line-height:1.35}

/* ---------- zonas ---------- */
.zonas{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px);margin-top:26px}
@media(max-width:900px){.zonas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.zonas{grid-template-columns:1fr}}
.zona{border-top:2px solid var(--menta);padding-top:13px}
.zona dt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.zona dd{margin:0;font-size:13.5px;color:var(--ink-soft);font-weight:300;line-height:1.5}
.lede{font-size:clamp(15px,1.8vw,17.5px);color:var(--ink-soft);font-weight:300;max-width:62ch;margin:12px 0 0}

/* ---------- cierre ---------- */
.wa-btn{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#08331C;text-decoration:none;
  font-weight:600;font-size:15.5px;padding:15px 26px;border-radius:4px;margin-top:22px;
  box-shadow:0 6px 22px rgba(0,0,0,.28)}
.wa-btn:hover{background:#1FBE5B;color:#04240F}
.wa-btn .i{display:block;width:21px;height:21px;flex:none;background:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat;mask:var(--wa) center/contain no-repeat}
.wa-btn--sm{font-size:13.5px;padding:11px 18px;margin-top:4px;box-shadow:none}
.wa-btn--sm .i{width:17px;height:17px}
.telw{margin-top:13px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(--line);background:var(--surface)}
footer .wrap{padding-block:clamp(30px,4vw,48px);display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(24px,4vw,52px)}
@media(max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .wrap{grid-template-columns:1fr}}
.fcol h4{margin:0 0 9px;font-size:14px;font-weight:600;letter-spacing:-.01em}
footer p{margin:0 0 11px;font-size:13px;color:var(--ink-soft);font-weight:300;line-height:1.55}
.ft{font-size:12px!important}
.enlaces{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px}
.enlaces a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--teal)}
.enlaces a:hover{text-decoration:underline}
.enlaces svg{flex:none}
.tarjetas{display:flex;gap:9px;color:var(--ink-soft);margin:2px 0 12px}
.fbase{padding-block:0 26px!important;display:block!important;border-top:1px solid var(--line);padding-top:18px!important}
.fbase p{margin:0;font-size:11.5px}
footer .fcol>img{width:126px;height:auto;margin-bottom:12px}
:root:not([data-theme="light"]) footer img.d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer img.l{display:none}:root:not([data-theme="light"]) footer img.d{display:block}}
:root[data-theme="dark"] footer img.l{display:none}
:root[data-theme="dark"] footer img.d{display:block}
:root[data-theme="dark"] footer img.d{display:block}
footer img.d{display:none}
:where(a,.btn):focus-visible{outline:2px solid var(--menta);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- barra superior del catálogo (solo pantalla) ---------- */
.cat-bar{position:sticky;top:0;z-index:10;background:rgba(47,60,68,.94);backdrop-filter:blur(6px);color:#fff}
.cat-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.cat-bar a{text-decoration:none;font-size:14px;font-weight:600}
.cat-bar .volver{opacity:.9}
.cat-bar .volver:hover{opacity:1;text-decoration:underline}
.cat-bar .pdf{display:inline-flex;align-items:center;gap:8px;background:var(--menta);color:#2F3C44;border-radius:999px;padding:8px 16px}
.cat-bar .pdf svg{width:16px;height:16px}
.oms-img{object-position:center 22%}

/* ---------- modo PDF (lo activa herramientas/generar-pdf.mjs) ---------- */
.modo-pdf .cat-bar{display:none}
/* En el PDF no se usan sombras ni filtros: generan transparencias que
   algunos visores tiñen de morado. El velo ya va horneado en la foto. */
.modo-pdf .banda h1,.modo-pdf .banda h2,.modo-pdf .banda blockquote,
.modo-pdf .banda .nota,.modo-pdf .eyebrow-w{text-shadow:none}
.modo-pdf .banda__logo img{filter:none;opacity:1}
.modo-pdf .wa-btn{box-shadow:none}
.modo-pdf body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media print{.cat-bar{display:none}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}