/* Layout: web de tienda oscura tipo taller de forja. Cabecera fija, contenido en columna de 1160px, rejillas que pasan a una columna en móvil. */
:root{
  --bg:#0e0c0b; --bg2:#14110f; --bg3:#1a1613; --line:#2c2420; --line2:#4a3d34;
  --fg:#ece3d3; --fg2:#d6ccbb; --muted:#a89f92; --dim:#8f8679;
  --accent:#ff7a1a; --accent-ink:#120d0a; --ember:#6b3a1c;
  --display:'Grenze Gotisch',Georgia,'Times New Roman',serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --label:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;padding-inline:0;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:clamp(20px,5vw,72px)}
.lbl{font-family:var(--label);font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase}
.acc{color:var(--accent)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1;text-wrap:balance}
p{margin:0}

/* barra y cabecera */
.topbar{background:var(--bg3);padding:9px 16px;text-align:center;font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand span{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.4vw,38px);line-height:1}
.nav{display:flex;gap:clamp(18px,2.4vw,34px);font-family:var(--label);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase}
.nav a{padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.tools{display:flex;align-items:center;gap:4px}
.ibtn{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--fg)}
.ibtn:hover{color:var(--accent)}
.badge{position:absolute;right:2px;top:4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-family:var(--label);font-weight:600;font-size:13px;line-height:20px;text-align:center}
.menu-btn{display:none}
.glow-line{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border:1px solid transparent;cursor:pointer;font-family:var(--label);font-weight:600;font-size:17px;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink)}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--fg);border-color:#6b5a4d}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:transparent;border:1px solid var(--line2);color:var(--fg);cursor:pointer;font-family:var(--label);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:#2a1d14;border-color:var(--accent);color:var(--accent)}
.opt{min-height:46px;padding:0 20px;background:transparent;border:1px solid var(--line2);cursor:pointer;font-family:var(--body);font-weight:500;font-size:16px}
.opt:hover{border-color:var(--accent)}
.opt[aria-pressed="true"]{background:#2a1d14;border-color:var(--accent);color:var(--accent)}
.tag{display:inline-block;padding:4px 10px;background:var(--bg);border:1px solid var(--line2);font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.link-all{font-family:var(--label);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.link-all:hover{text-decoration:underline}

/* secciones */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec.alt{background:var(--bg2);border-block:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,40px)}
.sec-head h2{font-size:clamp(38px,5vw,60px)}
.sec-head .lbl{display:block;margin-bottom:12px;color:var(--accent);font-size:15px;letter-spacing:.2em}

/* héroe */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-8%;top:-10%;width:min(900px,90vw);aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,110,20,.22),rgba(255,110,20,0) 70%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;padding-block:clamp(32px,5vw,56px) clamp(40px,6vw,64px)}
.hero h1{font-size:clamp(46px,7vw,88px);line-height:.96;letter-spacing:-.01em}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:#b3aa9c;max-width:540px}
.hero-img{display:flex;justify-content:center}
.hero-img img{width:100%;max-width:620px;aspect-ratio:1;object-fit:contain}
.stack{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.row{display:flex;flex-wrap:wrap;gap:14px}

.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-block:30px}
.perk{display:flex;gap:14px;align-items:flex-start}
.perk svg{flex-shrink:0;color:var(--accent)}
.perk b{display:block;font-family:var(--label);font-weight:600;font-size:17px;letter-spacing:.12em;text-transform:uppercase}
.perk span{font-size:15px;color:var(--muted)}

/* mosaicos */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;padding:28px;overflow:hidden;border:1px solid var(--line);text-align:left;cursor:pointer;color:inherit}
.tile:hover{border-color:var(--accent)}
.tile img{position:absolute;right:-24px;top:-18px;width:210px;height:210px;object-fit:contain;opacity:.22}
.tile .bar{position:relative;width:36px;height:2px;background:var(--accent);margin-bottom:14px}
.tile h3{position:relative;font-size:clamp(28px,3vw,36px);line-height:1.05}
.tile p{position:relative;font-size:15px;color:#b3aa9c;margin-top:6px}
.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.cat{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--line2);text-align:left;background:none;border-inline:0;border-bottom:0;cursor:pointer;color:inherit}
.cat:hover{border-top-color:var(--accent)}
.cat h3{font-size:28px;line-height:1.05}
.cat p{font-size:14px;color:var(--muted)}

/* tarjetas de producto */
.pcard{display:flex;flex-direction:column;gap:14px;cursor:pointer;text-align:left;background:none;border:0;padding:0;color:inherit}
.pimg{position:relative;aspect-ratio:1/1.06;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 28%,#3a2c22 0%,#17120f 62%,#100d0b 100%)}
.pcard:hover .pimg{border-color:var(--accent)}
.pimg img.em{position:absolute;left:50%;top:14%;width:68%;transform:translateX(-50%);aspect-ratio:1;object-fit:contain;opacity:.92}
.pimg .shadow{position:absolute;left:50%;bottom:13%;width:66%;height:7%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0))}
.pimg .tag{position:absolute;left:12px;top:12px}
.pimg .ex{position:absolute;left:12px;bottom:10px;font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pcard h3{font-size:clamp(24px,2.2vw,28px);line-height:1.1}
.pcard .meta{font-size:14px;color:var(--muted);margin-top:2px}
.pcard .price{font-family:var(--label);font-weight:600;font-size:21px;letter-spacing:.06em;color:var(--accent);margin-top:6px}

/* banner */
.banner{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;padding:clamp(28px,5vw,56px) clamp(22px,5vw,64px);overflow:hidden;border:1px solid var(--ember);background:linear-gradient(110deg,#2c170c,#14100d 72%)}
.banner h2{font-size:clamp(36px,4.4vw,56px)}
.banner img{width:100%;max-width:360px;margin-inline:auto;aspect-ratio:1;object-fit:contain}

/* blog */
.bimg{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}
.bimg img{position:absolute;right:-16px;bottom:-26px;width:55%;aspect-ratio:1;object-fit:contain;opacity:.35}
.bimg .tag{position:absolute;left:14px;top:14px}
.bcard{display:flex;flex-direction:column;gap:12px;cursor:pointer;text-align:left;background:none;border:0;padding:0;color:inherit}
.bcard:hover h3{color:var(--accent)}
.bcard .meta{font-family:var(--label);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bcard h3{font-size:clamp(24px,2.4vw,30px);line-height:1.1}
.bcard p{font-size:16px;color:#b3aa9c}
.feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);background:var(--bg2);cursor:pointer;text-align:left;color:inherit;padding:0;width:100%}
.feature:hover{border-color:var(--accent)}
.feature .bimg{aspect-ratio:auto;min-height:340px;border:0}
.feature .bimg img{right:auto;left:50%;bottom:auto;top:50%;width:min(62%,340px);transform:translate(-50%,-50%);opacity:.85}
.feature .txt{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(24px,4vw,56px)}
.feature h2{font-size:clamp(34px,4vw,52px);line-height:1.02}

/* formularios */
.field{flex:1 1 220px;min-width:0;min-height:56px;padding:0 18px;background:var(--bg3);border:1px solid var(--line2);color:var(--fg);font-family:var(--body);font-size:17px}
.field::placeholder{color:var(--dim)}
.news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,64px);align-items:center}
.news h2{font-size:clamp(34px,4.2vw,50px)}
.note{font-size:13px;color:var(--dim)}
select.field{min-height:48px;font-size:16px}

/* pie */
.ftr{position:relative;overflow:hidden;background:#0a0807;border-top:1px solid var(--line);padding-top:clamp(40px,6vw,72px)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.ftr h4{margin:0 0 12px;font-family:var(--label);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ftr a,.ftr button.lnk{display:block;padding-block:5px;font-size:15px;background:none;border:0;cursor:pointer;color:var(--fg);text-align:left}
.ftr a:hover,.ftr button.lnk:hover{color:var(--accent)}
.mark{font-family:var(--display);font-weight:600;font-size:min(19.4vw,264px);line-height:.9;white-space:nowrap;color:var(--fg);opacity:.06;margin-block:40px 28px;user-select:none}
.copy{padding-block:20px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}

/* tienda */
.page-head{padding-block:clamp(36px,6vw,64px) 28px}
.page-head h1{font-size:clamp(48px,8vw,96px);letter-spacing:-.01em}
.filters{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.frow .lbl{width:92px;flex-shrink:0;font-size:13px;color:var(--muted)}
.empty{padding:56px 16px;text-align:center;border:1px dashed var(--line2);color:var(--muted)}

/* ficha */
.crumbs{padding-block:20px;font-family:var(--label);font-weight:500;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumbs button{background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted)}
.crumbs button:hover{color:var(--accent)}
.crumbs b{color:var(--fg);font-weight:500}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);align-items:start;padding-bottom:clamp(40px,6vw,72px)}
.stage{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 30%,#3a2c22 0%,#17120f 62%,#100d0b 100%)}
.stage.v3{background:radial-gradient(ellipse at 50% 38%,#2a2018 0%,#100d0b 70%);cursor:grab;touch-action:none;user-select:none}
.stage.v3:active{cursor:grabbing}
.stage .em{position:absolute;left:50%;top:13%;width:66%;transform:translateX(-50%);aspect-ratio:1;object-fit:contain}
.stage .v3img{position:absolute;left:50%;top:12%;width:60%;margin-left:-26%;aspect-ratio:1;object-fit:contain;will-change:transform;pointer-events:none}
.stage .shadow{position:absolute;left:50%;bottom:15%;width:58%;height:6%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0))}
.stage .ex{position:absolute;left:16px;bottom:14px;font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stage .open3d{position:absolute;right:14px;bottom:14px}
.stage .open3d .btn{min-height:46px;padding:0 18px;font-size:16px}
.v3bar{position:absolute;left:0;right:0;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:12px}
.v3bar small{font-size:13px;color:var(--muted);text-align:center}
.v3bar .row{justify-content:center;gap:8px}
.mini{min-height:44px;padding:0 16px;background:var(--bg);border:1px solid var(--line2);cursor:pointer;font-size:15px;color:var(--fg)}
.mini:hover{border-color:var(--accent)}
.mini[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.v3top{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.v3top .tag{display:inline-flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ruler{position:absolute;left:5%;top:16%;height:56%;display:flex;align-items:center;gap:8px;pointer-events:none}
.ruler i{display:block;width:2px;height:100%;background:var(--accent);opacity:.85}
.ruler span{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);line-height:1.2}
.ruler span b{display:block;font-size:22px;letter-spacing:.04em;text-transform:none}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.thumb{aspect-ratio:1.3/1;position:relative;overflow:hidden;border:2px solid var(--line);background:radial-gradient(ellipse at 50% 30%,#3a2c22 0%,#17120f 70%,#100d0b 100%);cursor:pointer;padding:0}
.thumb[aria-pressed="true"]{border-color:var(--accent)}
.thumb img{position:absolute;left:50%;top:50%;width:62%;transform:translate(-50%,-50%);aspect-ratio:1;object-fit:contain;opacity:.6}
.buy{display:flex;flex-direction:column;gap:22px;min-width:0}
.buy h1{font-size:clamp(40px,5.4vw,68px)}
.price-big{font-family:var(--label);font-weight:600;font-size:38px;letter-spacing:.04em;color:var(--accent)}
.opts{display:flex;flex-direction:column;gap:10px}
.opts .lbl{font-size:15px;letter-spacing:.16em}
.incl{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.incl div{display:flex;gap:12px;align-items:center}
.incl svg{flex-shrink:0;color:var(--accent)}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.spec{padding:20px;border:1px solid var(--line);background:#161310}
.spec .lbl{font-size:13px;color:var(--muted)}
.spec b{display:block;margin-top:6px;font-family:var(--display);font-weight:600;font-size:28px;line-height:1.1}
.demo-note{padding:12px 16px;background:#1a1410;border:1px solid #4a3326;font-size:14px;color:var(--fg2)}

/* artículo */
.art-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding-block:clamp(16px,3vw,24px) 36px}
.art-head h1{max-width:980px;font-size:clamp(38px,6vw,76px);line-height:1}
.art-hero{position:relative;height:clamp(180px,26vw,380px);overflow:hidden;border:1px solid var(--line);background:linear-gradient(150deg,#3a2813,#14100c 80%)}
.art-hero img{position:absolute;left:50%;top:50%;height:90%;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain;opacity:.85}
.art-grid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:clamp(32px,6vw,80px);justify-content:center;align-items:start;padding-block:56px clamp(56px,8vw,96px)}
.prose{display:flex;flex-direction:column;gap:22px;font-size:19px;line-height:1.75;color:var(--fg2);min-width:0}
.prose .lead{font-size:22px;line-height:1.6;color:var(--fg)}
.prose h2{margin-top:28px;font-size:clamp(28px,3.4vw,38px);line-height:1.1;color:var(--fg)}
.callout{padding:22px 26px;background:#1a1410;border:1px solid #4a3326}
.callout .lbl{display:block;margin-bottom:6px;color:var(--accent)}
.callout div{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.25;color:var(--fg)}
.checks{display:flex;flex-direction:column;gap:12px}
.checks div{display:flex;gap:14px;align-items:flex-start}
.checks svg{flex-shrink:0;margin-top:6px;color:var(--accent)}
.steps div{display:flex;gap:16px;align-items:flex-start}
.steps b{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--accent);font-family:var(--label);font-weight:600;font-size:17px;color:var(--accent)}
.aside{display:flex;flex-direction:column;gap:24px;position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.toc,.cta{padding:24px;border:1px solid var(--line);background:var(--bg2)}
.toc .lbl{display:block;margin-bottom:14px;color:var(--accent);font-size:15px}
.toc a{display:block;padding-block:5px;font-size:16px}
.toc a:hover{color:var(--accent)}
.cta{display:flex;flex-direction:column;gap:14px;border-color:var(--ember);background:linear-gradient(160deg,#2c170c,#14100d 80%)}
.cta img{width:180px;aspect-ratio:1;object-fit:contain;align-self:center}
.cta h3{font-size:30px;line-height:1.05}
.cta p{font-size:15px;color:#c9bfae}
.placeholder{padding:22px 26px;border:1px dashed var(--line2);color:var(--muted);font-size:17px}

/* carrito */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(420px,100%);display:flex;flex-direction:column;background:var(--bg2);border-left:1px solid var(--line2);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 12px 20px;border-bottom:1px solid var(--line)}
.drawer h2{font-size:32px}
.drawer .items{flex:1;overflow:auto;padding:8px 20px;min-height:0}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding-block:14px;border-bottom:1px solid var(--line)}
.item .th{position:relative;width:64px;aspect-ratio:1;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 30%,#3a2c22,#100d0b)}
.item .th img{position:absolute;inset:8%;width:84%;object-fit:contain}
.item b{display:block;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.1}
.item small{display:block;font-size:13px;color:var(--muted)}
.item .p{font-family:var(--label);font-weight:600;font-size:18px;color:var(--accent);text-align:right}
.item .rm{background:none;border:0;padding:6px 0 0;cursor:pointer;font-size:13px;color:var(--muted);text-decoration:underline}
.drawer footer{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.tot{display:flex;justify-content:space-between;font-family:var(--label);font-weight:600;font-size:20px;letter-spacing:.08em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;max-width:calc(100% - 32px);padding:12px 18px;background:var(--fg);color:var(--bg);font-weight:500;font-size:15px}

@media (max-width:1000px){
  .hero-in,.banner,.news,.pgrid,.feature{grid-template-columns:minmax(0,1fr)}
  .hero-img{order:-1}
  .hero-img img{max-width:380px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px clamp(16px,4vw,64px) 16px;background:var(--bg);border-bottom:1px solid var(--line2)}
  .nav.open{display:flex}
  .nav a{padding-block:14px;border-bottom:1px solid var(--line)}
  .menu-btn{display:flex}
  .feature .bimg{min-height:240px}
}
@media (max-width:560px){
  .grid3,.cats{grid-template-columns:minmax(0,1fr)}
  .grid4{gap:20px 14px}
  .frow .lbl{width:100%}
  .tile{min-height:200px}
  .btn{width:100%}
  .stage .open3d .btn{width:auto}
  .stage.v3{aspect-ratio:auto;height:500px}
  .stage .v3img{width:56%;margin-left:-20%;top:10%}
  .stage.v3 .shadow{bottom:auto;top:250px;height:16px}
  .ruler{left:4%;top:12%;height:38%}
  .ruler span{max-width:86px}
  .item{grid-template-columns:56px minmax(0,1fr)}
  .item .p{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* artículos */
.defs{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--bg2)}
.defs>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;padding:16px 22px;border-top:1px solid var(--line)}
.defs>div:first-child{border-top:0}
.defs b{font-family:var(--label);font-weight:600;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.defs span{font-size:17px;line-height:1.55}
.tbl{overflow-x:auto;border:1px solid var(--line)}
.tbl table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;min-width:520px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tbl thead th{border-top:0;background:var(--bg3);font-family:var(--label);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tbl tbody th{font-weight:600;color:var(--fg);white-space:nowrap}
/* creador de mesa */
.mesa-head{display:flex;flex-direction:column;gap:14px;padding-block:8px 28px;max-width:720px}
.mesa-head h1{font-size:clamp(44px,6vw,76px)}
.mesa-head p{font-size:19px;color:var(--muted)}
.mesa-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start;padding-bottom:clamp(56px,8vw,96px)}
.mbar{display:flex;flex-wrap:wrap;gap:10px 10px;align-items:center;margin-bottom:14px}
.mbar .sep{width:1px;height:28px;background:var(--line2);margin-inline:4px}
.mbar .lbl{color:var(--muted);font-size:13px}
.board-wrap{display:flex;justify-content:center;background:var(--bg2);border:1px solid var(--line);padding:clamp(8px,2vw,22px)}
.board{position:relative;width:min(100%,calc(78vh*var(--ar)));aspect-ratio:var(--ar);background-color:#1b1713;background-image:linear-gradient(rgba(236,227,211,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(236,227,211,.07) 1px,transparent 1px);background-size:var(--gx) var(--gy);border:2px solid var(--line2);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.board.nogrid{background-image:none}
.board:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.zone{position:absolute;left:0;right:0;height:20%;display:flex;align-items:center;justify-content:center;font-family:var(--label);font-weight:600;font-size:clamp(10px,1.4vw,15px);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,122,26,.75);pointer-events:none}
.zone.a{top:0;background:repeating-linear-gradient(135deg,rgba(255,122,26,.10) 0 8px,rgba(255,122,26,.03) 8px 16px);border-bottom:1px dashed rgba(255,122,26,.5)}
.zone.b{bottom:0;background:repeating-linear-gradient(135deg,rgba(150,160,175,.12) 0 8px,rgba(150,160,175,.03) 8px 16px);border-top:1px dashed rgba(170,180,195,.5);color:rgba(190,198,210,.8)}
.mp{position:absolute;cursor:grab;touch-action:none}
.mp:active{cursor:grabbing}
.mp svg{display:block;width:100%;height:100%;overflow:visible}
.mp:focus-visible{outline:none}
.mp.sel{z-index:3}
.mp.sel svg{filter:drop-shadow(0 0 5px rgba(255,122,26,.7))}
.mp svg .f{fill:#4a3b30;stroke:#9a7a60;stroke-width:1.5;vector-effect:non-scaling-stroke}
.mp svg .i{fill:#1b1713;stroke:#6b5545;stroke-width:1;vector-effect:non-scaling-stroke}
.mp svg .l{fill:none;stroke:#2a211b;stroke-width:1;vector-effect:non-scaling-stroke}
.mp svg .d{fill:none;stroke:#1b1713;stroke-width:3;vector-effect:non-scaling-stroke}
.mp svg .t{fill:#34402c;stroke:#6f8660;stroke-width:1.5;vector-effect:non-scaling-stroke}
.mp svg .o{fill:rgba(255,122,26,.25);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.mp.sel svg .f,.mp.sel svg .t{stroke:var(--accent)}
.mini .mp{cursor:default;pointer-events:none}
.mtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.mtools .chip{min-height:44px;padding:0 14px}
.mtools.off .chip{opacity:.4;pointer-events:none}
.msel{flex:1 1 220px;font-size:15px;color:var(--muted);min-height:24px}
.mhint{margin-top:10px;font-size:14px;color:var(--dim)}
.mside{display:flex;flex-direction:column;gap:28px}
.mside h2{font-size:30px;margin-bottom:14px}
.pal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pal button{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;min-height:64px;padding:8px 10px;text-align:left;background:var(--bg2);border:1px solid var(--line);color:var(--fg);cursor:pointer;font-family:var(--body)}
.pal button:hover{border-color:var(--accent)}
.pal .pi{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#1b1713;padding:5px}
.pal .pi svg{width:100%;height:100%}
.pal b{display:block;font-size:14px;line-height:1.15;font-weight:600}
.pal small{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.pal svg .f{fill:#4a3b30;stroke:#9a7a60;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pal svg .i{fill:#1b1713;stroke:#6b5545;stroke-width:1;vector-effect:non-scaling-stroke}
.pal svg .l{fill:none;stroke:#2a211b;stroke-width:1;vector-effect:non-scaling-stroke}
.pal svg .d{fill:none;stroke:#1b1713;stroke-width:3;vector-effect:non-scaling-stroke}
.pal svg .t{fill:#34402c;stroke:#6f8660;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pal svg .o{fill:rgba(255,122,26,.25);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.mlist{border:1px solid var(--line);background:var(--bg2)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-size:15px}
.mrow:first-child{border-top:0}
.mrow small{display:block;color:var(--dim);font-size:13px}
.mrow .q{font-family:var(--label);font-weight:600;font-size:16px;letter-spacing:.08em;color:var(--accent)}
.mempty{padding:22px 16px;color:var(--muted);font-size:15px}
.mtot{display:flex;flex-direction:column;gap:6px;padding:16px;border-top:1px solid var(--line2);font-size:15px}
.mtot div{display:flex;justify-content:space-between;gap:12px}
.mtot .big{font-family:var(--label);font-weight:600;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.mact{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.mnote{font-size:13px;color:var(--dim);line-height:1.45}
.mtease{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.mtease .board{width:min(100%,440px);margin-inline:auto}
@media (max-width:1000px){.mesa-grid{grid-template-columns:minmax(0,1fr)}.mtease{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.pal{grid-template-columns:minmax(0,1fr)}.defs>div{grid-template-columns:minmax(0,1fr);gap:4px}.mbar .sep{display:none}.mtools .chip{flex:1 1 40%}.board{width:100%}}

/* fotos reales */
.ph-bg,.ph-fg{position:absolute;display:block}
.ph-bg{left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;filter:blur(24px) brightness(.5);pointer-events:none}
.ph-bg{display:none}
.ph-fg{inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
.thumb img.cov{left:0;top:0;width:100%;height:100%;transform:none;aspect-ratio:auto;object-fit:cover;opacity:1}
.stage .v3img.photo{width:72%;margin-left:-34%;top:12%;mix-blend-mode:lighten}
.hero{background:linear-gradient(180deg,rgba(14,12,11,.80),rgba(14,12,11,.94)),url("../img/oxidoforge-textura-oxido.webp") center/cover}

/* banner regalo animado */
.gift{position:relative;overflow:hidden;border-block:1px solid #5a2f14;background:linear-gradient(100deg,#1a0f08,#3a1a0a 45%,#1a0f08);background-size:220% 100%;animation:giftbg 9s ease-in-out infinite alternate}
.gift::before{content:"";position:absolute;inset:0;background:url("../img/oxidoforge-textura-oxido.webp") center/cover;opacity:.18;mix-blend-mode:screen;pointer-events:none}
.gift-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;padding-block:28px}
.gift-emb{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.gift-emb img{position:relative;width:100%;height:100%;object-fit:contain;animation:giftpulse 2.6s ease-in-out infinite}
.gift-emb i{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,26,.55),rgba(255,122,26,0));animation:giftglow 2.6s ease-in-out infinite}
.gift-txt .lbl{display:block;color:var(--accent);font-size:15px;letter-spacing:.2em;margin-bottom:6px}
.gift-txt h2{font-size:clamp(30px,4vw,48px)}
.gift-txt p{margin:8px 0 0;font-size:17px;color:#d8c4b0}
.embers{position:absolute;inset:0;pointer-events:none}
.ember{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#ff9a3c;box-shadow:0 0 8px 2px rgba(255,122,26,.7);opacity:0;animation:rise var(--d) linear var(--w) infinite}
@keyframes rise{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(18px,-170px);opacity:0}}
@keyframes giftbg{to{background-position:100% 0}}
@keyframes giftpulse{50%{transform:scale(1.06)}}
@keyframes giftglow{50%{transform:scale(1.35);opacity:.6}}
@media (max-width:760px){.gift-in{grid-template-columns:auto minmax(0,1fr)}.gift-in .btn{grid-column:1/-1}.gift-emb{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.gift,.gift-emb img,.gift-emb i,.ember{animation:none}.ember{display:none}}

.hero-img img.hero-fig{width:auto;height:min(600px,62vh);max-width:100%;aspect-ratio:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
@media (max-width:900px){.hero-img img.hero-fig{height:380px}}
/* botones y tarjetas más compactos */
.tile{min-height:132px;padding:18px 20px}
.tile img{width:116px;height:116px;right:-14px;top:-12px}
.tile .bar{width:26px;margin-bottom:10px}
.tile h3{font-size:clamp(22px,2.2vw,27px)}
.tile p{font-size:14px;margin-top:4px}
.grid3{gap:16px}
.cat{padding-top:12px;gap:4px}
.cat h3{font-size:22px}
.cat p{font-size:13px}
.chip{min-height:38px;padding:0 14px;font-size:14px;letter-spacing:.1em}
.opt{min-height:40px;padding:0 16px;font-size:15px}
.btn{min-height:44px;padding:0 24px;font-size:15px}
.mtools .chip{min-height:40px}
.mesa-head p,.hero p.lead{font-size:18px}
@media (max-width:560px){.tile{min-height:104px}.btn{min-height:46px}}

.allin{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid var(--line2);background:var(--bg2)}
.allin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.allin-grid div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);background:var(--bg3)}
.allin-grid b{font-family:var(--label);font-weight:600;font-size:20px;letter-spacing:.06em;color:var(--fg)}
.allin-grid span{font-size:13px;color:var(--muted)}
.allin p{margin:0;font-size:15px;color:var(--muted)}

/* misiones */
.mis-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding-block:8px 20px}
.mis-head h1{font-size:clamp(40px,5.4vw,66px)}
.mis-head p{font-size:18px;color:var(--muted);max-width:640px}
.mis-frame{display:block;width:100%;height:max(640px,calc(100vh - 90px));border:1px solid var(--line2);background:#111315}
.mis-tease{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.mis-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mis-list li{padding:18px 20px;border:1px solid var(--line);background:var(--bg2);font-family:var(--label);font-weight:600;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mis-list b{display:block;font-family:var(--display);font-size:44px;line-height:1;letter-spacing:0;color:var(--accent)}
@media (max-width:1000px){.mis-tease{grid-template-columns:minmax(0,1fr)}}



html{margin-top:0!important}
body{margin:0}
.wp-site-blocks{padding:0!important}
.wp-site-blocks>*{margin-block-start:0!important}
.wp-block-template-part{display:contents}
.ibtn{text-decoration:none}
a.cat,a.tile,a.pcard,a.bcard{color:inherit}
.ftr a.lnk{display:block}
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:46px}}
.of-page .is-layout-flow>*,.of-page .is-layout-constrained>*{margin-block-start:0;margin-block-end:0}
.of-page,.of-page main{max-width:none}
.of-page .wrap{max-width:1160px!important;margin-inline:auto}
.of-page>.wrap{max-width:1160px}
.of-page p,.of-page h1,.of-page h2,.of-page h3{margin-top:0;margin-bottom:0}
/* blog */
.of-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px;list-style:none;margin:0;padding:0;max-width:none}
.of-grid>li{margin:0;padding:0;list-style:none}
@media (max-width:1000px){.of-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.of-grid{grid-template-columns:minmax(0,1fr)}}
.bcard{position:relative;cursor:pointer}
.bcard .bimg{display:block}
.bcard .wp-block-post-title,.feature .wp-block-post-title{margin:0;font-family:var(--display);font-weight:800}
.bcard .wp-block-post-title a:hover{color:var(--accent)}
.bcard .wp-block-post-title a::after,.feature .wp-block-post-title a::after{content:"";position:absolute;inset:0;z-index:2}
.feature{position:relative;cursor:pointer}
.feature .wp-block-post-title{font-size:clamp(34px,4vw,52px);line-height:1.02}
.bcard .wp-block-post-title{font-size:clamp(24px,2.4vw,30px);line-height:1.1}
.bcard .wp-block-post-excerpt,.bcard .wp-block-post-excerpt p,.feature .wp-block-post-excerpt p{margin:0;font-size:16px;color:#b3aa9c}
.feature .wp-block-post-excerpt p{font-size:18px}
.wp-block-post-excerpt__more-link{display:none}
.bcard .wp-block-post-date{font-family:var(--label);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.feature .wp-block-post-date{font-family:var(--label);font-weight:500;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bimg .wp-block-post-terms{position:absolute;left:14px;top:14px;z-index:1}
.bimg .tag a,.bimg .tag{color:var(--fg2)}
.of-featured{margin-bottom:0}
.of-featured .wp-block-post-template,.of-featured ul{list-style:none;margin:0;padding:0}
li.category-impresion .bimg,body.category-impresion .art-hero{background:linear-gradient(150deg,#2e2113,#14100c 82%)}
li.category-escalas .bimg,body.category-escalas .art-hero{background:linear-gradient(150deg,#142030,#14100c 82%)}
li.category-pintura .bimg,body.category-pintura .art-hero{background:linear-gradient(150deg,#2a1519,#14100c 82%)}
li.category-wargames .bimg,body.category-wargames .art-hero{background:linear-gradient(150deg,#2f2210,#14100c 82%)}
li.category-escenografia .bimg,body.category-escenografia .art-hero{background:linear-gradient(150deg,#102628,#14100c 82%)}
li.category-diseno .bimg,body.category-diseno .art-hero{background:linear-gradient(150deg,#2d1a10,#14100c 82%)}
.bimg{background:linear-gradient(150deg,#2e2113,#14100c 82%)}
.feature .bimg{display:block}
.art-head .wp-block-post-title{max-width:980px;font-size:clamp(38px,6vw,76px);line-height:1;margin:0;text-align:center;font-family:var(--display);font-weight:800}
.art-head .wp-block-post-terms{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.art-head .wp-block-post-terms a{display:inline-block;padding:4px 10px;border:1px solid var(--line2);background:var(--bg);color:var(--accent)}
.art-head .wp-block-post-terms a:hover{border-color:var(--accent)}
.art-head .tag{padding:0;border:0;background:none}
.artmeta{font-family:var(--label);font-weight:500;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);gap:8px}
.artmeta p,.artmeta .wp-block-post-date{margin:0;font-size:16px;color:var(--muted)}
.art-hero{margin-bottom:0}
.prose.wp-block-post-content,.entry-content.prose{display:flex;flex-direction:column;gap:22px;max-width:none;margin:0;padding:0}
.prose>*{margin:0!important;max-width:none}
.prose h2.wp-block-heading{margin-top:28px!important;font-size:clamp(28px,3.4vw,38px);line-height:1.1;color:var(--fg)}
.prose p{margin:0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.of-nav-pag{display:flex;gap:16px;justify-content:center;margin-top:40px;font-family:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.of-nav-pag a{color:var(--accent)}
.toc a{display:block}

/* titulos: mas finos y legibles, estilo gotico moderno */
h1,h2,h3,.wp-block-post-title{font-weight:500;letter-spacing:.015em;line-height:1.08;word-spacing:.04em}
h1{line-height:1.02;letter-spacing:.02em}
.brand span{font-weight:600}
/* menu Herramientas */
.nav-dd{position:relative;display:flex}
.nav-dd-btn{background:none;border:0;padding:6px 0;margin:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px}
.nav-dd-btn::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn,.nav-dd-btn[aria-current="true"]{color:var(--accent)}
.nav-dd-menu{display:none;position:absolute;left:-16px;top:100%;min-width:230px;padding:10px;background:var(--bg2);border:1px solid var(--line2);z-index:40}
.nav-dd.open .nav-dd-menu,.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{display:block}
.nav-dd-menu a{display:block;padding:12px 14px;border-bottom:0}
@media (max-width:860px){.nav-dd{display:block}.nav-dd-menu{display:block;position:static;border:0;background:none;padding:0 0 0 14px;min-width:0}.nav-dd-btn::after{display:none}}
.of-cart-badge:empty{display:none}
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{color:var(--fg)}
/* Creador de mesa: piezas con vista cenital real */
.mp img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.65))}
.mp.sel img{filter:drop-shadow(0 0 4px rgba(255,122,26,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.pal .pi img{max-width:100%;max-height:100%;object-fit:contain}
.mp img{filter:brightness(1.45) contrast(1.05) drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.mp.sel img{filter:brightness(1.45) drop-shadow(0 0 4px rgba(255,122,26,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.pal .pi img{filter:brightness(1.5)}

/* ===== Portada: Western y destacados ===== */
.of-west{font-family:'Rye','Grenze Gotisch',Georgia,serif!important;font-weight:400!important;letter-spacing:.02em;line-height:1.08!important;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.tile--west{grid-column:1/-1;min-height:260px;background:radial-gradient(120% 90% at 85% 10%,rgba(255,122,26,.22),transparent 60%),linear-gradient(155deg,#3a2412,#1a110a 70%),#1a110a!important;border-color:#8a5a2c;border-radius:6px}
.tile--west::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(224,176,110,.35);pointer-events:none;border-radius:3px}
.tile--west h3{font-size:clamp(40px,5.4vw,68px)!important;color:#f0d9b0}
.tile--west p{position:relative;max-width:34ch;color:#d9c3a0;margin:10px 0 0}
.tile--west .bar{background:#e0b06e;width:56px;height:3px}
.west-badge{position:absolute;left:28px;top:24px;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:4px 12px;border-radius:2px;z-index:1}
.west-cta{position:relative;margin-top:16px;font-family:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#e0b06e}
@media (max-width:900px){.tile--west{grid-column:1/-1}}
.of-feat{padding-block:clamp(40px,6vw,72px);background:linear-gradient(180deg,rgba(58,36,18,.35),rgba(14,12,11,0))}
.of-feat__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(22px,3.5vw,36px)}
.of-feat__lbl{display:block;margin-bottom:12px;color:var(--accent);font-family:var(--label);font-weight:600;font-size:15px;letter-spacing:.2em;text-transform:uppercase}
.of-feat__head h2{font-size:clamp(32px,4.6vw,56px);color:#f0d9b0}
.of-feat__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.of-feat__card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.of-feat__img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#0f0c0b;transition:transform .2s,border-color .2s}
.of-feat__img img{width:100%;height:100%;object-fit:cover;display:block}
.of-feat__img em{position:absolute;left:10px;top:10px;font-style:normal;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:#e0b06e;color:#1a110a;padding:3px 10px;border-radius:99px}
.of-feat__card:hover .of-feat__img{transform:translateY(-3px);border-color:var(--accent)}
.of-feat__name{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,24px);line-height:1.1}
.of-feat__price{font-family:var(--label);font-weight:600;font-size:18px;letter-spacing:.06em;color:var(--accent)}
@media (max-width:900px){.of-feat__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Creador de mesa 2.0: estudio con 2D/3D, barra de herramientas y listado frontal ===== */
#of-mesa .wrap{max-width:1480px!important}
.mesa-head.slim{padding-block:4px 16px;max-width:none;gap:8px}
.mesa-head.slim h1{font-size:clamp(34px,4.4vw,54px)}
.mesa-head.slim p{font-size:17px}
.studio{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start;padding-bottom:clamp(48px,7vw,88px)}
.stage{min-width:0}
.mtb{position:sticky;top:72px;z-index:30;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:8px 10px;margin-bottom:10px;background:rgba(20,16,13,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px}
.seg{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:2px;gap:2px}
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--fg);font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.sbtn:hover{background:rgba(255,255,255,.06)}
.sbtn.on{background:var(--accent);color:var(--accent-ink)}
.sbtn.ico{padding:0 9px;min-width:36px}
.sbtn[disabled]{opacity:.35;cursor:default;pointer-events:none}
.zv{min-width:46px;text-align:center;font-family:var(--label);font-weight:600;font-size:13px;color:var(--muted)}
.mdd{position:relative}
.mdd summary{list-style:none;background:var(--bg3);border:1px solid var(--line);border-radius:10px;min-height:42px}
.mdd summary::-webkit-details-marker{display:none}
.mdd-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:180px;display:flex;flex-direction:column;padding:6px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.mdd-pop button{text-align:left;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--fg);font-size:15px;cursor:pointer}
.mdd-pop button:hover{background:rgba(255,122,26,.14)}
.cv{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--bg2);overflow:hidden}
.cv .board-wrap{border:0;padding:clamp(8px,1.6vw,18px);max-height:min(78vh,820px);overflow:auto;display:flex;justify-content:flex-start}
.cv .board{width:calc(min(100%,calc(74vh*var(--ar)))*var(--z,1));flex:none;margin:auto;touch-action:none}
.cv .board-wrap[hidden],.v3[hidden]{display:none}
.v3{position:relative;height:clamp(440px,76vh,780px);background:#14100d}
.m3d{position:absolute;inset:0}
.v3msg{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:17px;pointer-events:none;background:rgba(20,16,13,.6)}
.v3msg[hidden]{display:none}
.v3hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--dim);pointer-events:none;background:rgba(20,16,13,.6);padding:3px 8px;border-radius:8px}
.pfloat{position:absolute;z-index:20;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.pfloat[hidden]{display:none}
.pfloat .pn{font-size:12px;font-weight:600;background:rgba(20,16,13,.92);border:1px solid var(--line2);padding:2px 9px;border-radius:99px;color:var(--fg);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.pfloat .pb{display:flex;gap:2px;padding:3px;background:rgba(20,16,13,.96);border:1px solid var(--accent);border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.55);pointer-events:auto}
.pfloat .pb button{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--fg);font-family:var(--label);font-weight:600;font-size:13px;cursor:pointer}
.pfloat .pb button:hover{background:rgba(255,122,26,.2);color:var(--accent)}
.pfloat .pb button.danger:hover{background:rgba(220,60,40,.25);color:#ff8a7a}
.mstat{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;margin-top:10px;font-size:14px;color:var(--muted)}
.mstat .mhint{font-size:12.5px;color:var(--dim);margin:0}
.studio .mside{position:sticky;top:72px;max-height:calc(100vh - 92px);overflow:auto;display:block;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
.stabs{display:flex;position:sticky;top:0;z-index:2;background:var(--bg2);border-bottom:1px solid var(--line)}
.stabs button{flex:1;min-height:48px;border:0;background:transparent;color:var(--muted);font-family:var(--label);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent}
.stabs button.on{color:var(--fg);border-bottom-color:var(--accent)}
.pbar{padding:12px 12px 4px;display:flex;flex-direction:column;gap:10px}
.pbar input{width:100%;min-height:42px;padding:0 14px;border-radius:10px;background:var(--bg3);border:1px solid var(--line);color:var(--fg);font-size:15px}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{padding:5px 12px;border-radius:99px;border:1px solid var(--line);background:var(--bg3);color:var(--fg);font-size:13px;cursor:pointer}
.pchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pal.pal-f{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px 14px}
.pal.pal-f button{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-height:0;padding:6px 6px 8px;text-align:center;border-radius:12px}
.pal.pal-f .pi{width:100%;height:104px;padding:4px;background:radial-gradient(ellipse at 50% 85%,#2b231c,#17120e);border-radius:9px}
.pal.pal-f .pi img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.pal.pal-f .pnoimg svg{width:70%;height:70%}
.pal.pal-f b{font-size:12.5px;line-height:1.15;margin-top:4px;min-height:2.3em}
.pal.pal-f small{font-size:11px}
.pal.pal-f button:hover .pi{outline:2px solid var(--accent)}
.studio .mlist{border:0;background:transparent}
.mrow{grid-template-columns:44px minmax(0,1fr) auto auto}
.mrow .mt{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#17120e;border-radius:8px;padding:3px}
.mrow .mt img{max-width:100%;max-height:100%;object-fit:contain}
.mrow .mt svg{width:70%;height:70%}
@media (max-width:1100px){.studio{grid-template-columns:minmax(0,1fr)}.studio .mside{position:static;max-height:none}.mtb{top:60px}.pal.pal-f{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.pal.pal-f{grid-template-columns:repeat(2,minmax(0,1fr))}.mstat .mhint{display:none}.sbtn{padding:0 9px;font-size:12px}.v3{height:62vh}}

/* ===== Terreno (texturas del tablero) ===== */
.board{background-image:none!important}
.btex{position:absolute;inset:0;pointer-events:none;background-repeat:repeat;background-color:#1b1713}
.btex::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--gc) 1px,transparent 1px),linear-gradient(90deg,var(--gc) 1px,transparent 1px);background-size:var(--gx) var(--gy)}
.board.nogrid .btex::after{display:none}
.board .zone{z-index:1}
.sw{display:inline-block;width:22px;height:22px;border-radius:6px;border:1px solid var(--line2);background-size:cover;background-position:center;flex:none;vertical-align:middle;margin-right:8px}
.mter summary .sw{width:18px;height:18px;margin-right:7px}
.ter-pop{display:grid!important;grid-template-columns:1fr 1fr;gap:4px;min-width:340px;padding:10px}
.ter-pop small{grid-column:1/-1;font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:4px 2px 0}
.ter-pop button{display:flex!important;align-items:center;text-align:left;padding:6px 8px!important;border-radius:8px;white-space:nowrap}
.ter-pop button.on{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:560px){.ter-pop{min-width:min(300px,88vw)}}

/* ===== Inventario estilo RPG ===== */
.inv{position:relative;margin-top:16px;padding:18px clamp(14px,2vw,24px) 18px;border-radius:14px;border:1px solid var(--line2);
 background:linear-gradient(180deg,rgba(255,122,26,.05),transparent 40%),repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px),#15110e;
 box-shadow:inset 0 0 0 4px #15110e,inset 0 0 0 5px #3a2e25,0 10px 30px rgba(0,0,0,.35)}
.inv::before,.inv::after{content:"";position:absolute;top:11px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9884f,#5b3a20);box-shadow:0 1px 2px #000}
.inv::before{left:11px}.inv::after{right:11px}
.ihead{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;margin:0 14px 14px}
.ihead h2{font-family:var(--display);font-size:clamp(28px,3vw,36px);color:var(--fg);text-shadow:0 2px 0 #000}
.ibag{display:flex;align-items:center;gap:10px;font-family:var(--label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--muted)}
.ibar{width:150px;height:10px;border-radius:6px;background:#0b0907;border:1px solid var(--line2);overflow:hidden}
.ibar i{display:block;height:100%;background:linear-gradient(90deg,#9a4a12,var(--accent))}
.ibag b{color:var(--fg);font-size:15px}
.ibody{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);gap:18px;align-items:start}
.igrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:10px;border-radius:10px;background:#0e0b09;box-shadow:inset 0 2px 8px rgba(0,0,0,.7);border:1px solid #2a2019}
.slot{--rc:#6b5545;position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;border:1px solid #3a2e25;background:radial-gradient(ellipse at 50% 90%,#2b231c,#16110d);cursor:pointer;color:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.slot.empty{cursor:default;background:#120e0b;border-style:dashed;border-color:#2a2019;box-shadow:none}
.slot img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.7))}
.slot .pnoimg svg{width:70%;height:70%}
.slot.chr{--rc:#d9a441}.slot.fau{--rc:#4fb3a6}.slot.veg{--rc:#79b64a}.slot.edi{--rc:#7d9cc0}.slot.atr{--rc:#d0763a}
.slot:not(.empty){border-color:color-mix(in srgb,var(--rc) 55%,#2a2019);box-shadow:inset 0 -14px 18px -12px color-mix(in srgb,var(--rc) 40%,transparent)}
.slot:not(.empty):hover{border-color:var(--rc);transform:translateY(-1px)}
.slot.on{outline:2px solid var(--rc);outline-offset:1px}
.slot.held::after{content:"";position:absolute;top:5px;left:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.qty{position:absolute;right:4px;bottom:3px;min-width:22px;padding:1px 5px;border-radius:6px;background:rgba(10,8,6,.88);border:1px solid var(--rc);font-style:normal;font-family:var(--label);font-weight:600;font-size:13px;line-height:1.25;text-align:center;color:var(--fg)}
.idet{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--rc,#6b5545) 50%,#2a2019);background:linear-gradient(135deg,rgba(255,255,255,.03),transparent),#120e0b;min-height:190px}
.idet.chr{--rc:#d9a441}.idet.fau{--rc:#4fb3a6}.idet.veg{--rc:#79b64a}.idet.edi{--rc:#7d9cc0}.idet.atr{--rc:#d0763a}
.idet.empty{display:grid;place-items:center;text-align:center;color:var(--muted);grid-template-columns:1fr}
.iimg{display:flex;align-items:center;justify-content:center;border-radius:8px;background:radial-gradient(ellipse at 50% 90%,#34291f,#14100c);border:1px solid #2a2019;min-height:150px;padding:8px}
.iimg img{max-width:100%;max-height:150px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.7))}
.itx h3{font-size:clamp(22px,2.2vw,28px);color:var(--rc);margin-bottom:8px}
.itags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.itags span{padding:3px 9px;border-radius:99px;border:1px solid var(--line2);font-size:12.5px;color:var(--muted);background:#0e0b09}
.iprice{font-family:var(--label);font-weight:600;font-size:24px;color:var(--accent);letter-spacing:.05em}
.iprice small{display:block;font-family:inherit;font-size:12px;font-weight:500;color:var(--dim);letter-spacing:.06em;text-transform:none}
.iact{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ib{min-height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:#1d1712;color:var(--fg);font-family:var(--label);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.ib:hover{border-color:var(--accent);color:var(--accent)}
.ib.danger:hover{border-color:#d24a38;color:#ff8a7a}
.ifoot{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid #2a2019}
.icats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.icats span{display:inline-flex;align-items:center;gap:6px}
.icats i{width:10px;height:10px;border-radius:3px;background:#6b5545}
.icats .chr i{background:#d9a441}.icats .fau i{background:#4fb3a6}.icats .veg i{background:#79b64a}.icats .edi i{background:#7d9cc0}.icats .atr i{background:#d0763a}
.icoin{display:flex;align-items:center;gap:10px;margin-left:auto;font-family:var(--label);font-weight:600;font-size:26px;letter-spacing:.05em}
.coin{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd78a,#b7791f 60%,#6b4410);box-shadow:0 0 0 2px #3a2610}
.ifoot .btn{min-height:46px}
@media (max-width:900px){.ibody{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.igrid{grid-template-columns:repeat(4,minmax(0,1fr))}.idet{grid-template-columns:minmax(0,1fr)}.iimg{min-height:120px}.ifoot .btn{width:100%}}

/* ===== Mapas, tamaños, cuadrículas y color ===== */
.btex::after{display:none!important}
.sz-pop{min-width:340px;display:grid!important;grid-template-columns:1fr 1fr;gap:4px;padding:10px}
.sz-pop small,.mgr .mdd-pop small{grid-column:1/-1;font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:4px 2px 0}
.mgr .mdd-pop small{display:block}
.sz-pop>button{display:flex!important;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px!important;border-radius:8px;white-space:nowrap}
.sz-pop>button b{font-size:14px}.sz-pop>button span{font-size:12px;color:var(--dim)}
.sz-pop>button.on,.mgr .mdd-pop button.on,.mmap .ter-pop button.on{outline:2px solid var(--accent);outline-offset:-2px}
.cust{grid-column:1/-1;display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.cust label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.cust input{width:84px;min-height:38px;padding:0 10px;border-radius:8px;background:var(--bg3);border:1px solid var(--line2);color:var(--fg);font-size:15px}
.cust span,.cust em{padding-bottom:9px;color:var(--muted);font-style:normal}
.cust .go{min-height:38px;padding:0 14px!important;border-radius:8px;background:var(--accent)!important;color:var(--accent-ink)!important;font-family:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.chint{grid-column:1/-1;margin:0;font-size:12px;color:var(--dim)}
.mgr .mdd-pop{min-width:300px}
.mgr .mdd-pop button{white-space:nowrap}
/* color de modelo */
.pfloat .colb{position:relative}
.cdot{display:block;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);background:#a3a89f}
.cpop{display:none;position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);z-index:5;width:236px;padding:10px;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 12px 30px rgba(0,0,0,.55)}
.pfloat.colopen .cpop{display:block}
.csw{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.csw button{aspect-ratio:1;border-radius:8px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.csw button:hover{outline:2px solid var(--accent);outline-offset:1px}
.cpick{display:block;aspect-ratio:1;border-radius:8px;border:1px dashed var(--line2);overflow:hidden;cursor:pointer;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.cpick input{opacity:0;width:100%;height:100%;cursor:pointer}
.crow{display:flex;gap:6px;margin-top:8px}
.crow button{flex:1;min-height:32px;border-radius:8px;border:1px solid var(--line2);background:var(--bg3);color:var(--fg);font-size:12.5px;cursor:pointer}
.crow button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mp.tint::after{content:"";position:absolute;inset:0;background:var(--tc);mix-blend-mode:color;-webkit-mask:var(--mk) center/100% 100% no-repeat;mask:var(--mk) center/100% 100% no-repeat;pointer-events:none}
.ib.go{display:inline-flex;align-items:center;text-decoration:none;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ib.go:hover{background:#ff8f3d;color:var(--accent-ink)}
.inote{margin:10px 0 0;font-size:12.5px;color:var(--dim);line-height:1.4}
.slot{padding:6px}

/* ===== HUD 3.0: visor y panel lateral en una sola pantalla ===== */
#of-mesa .wrap{max-width:1680px!important}
.mesa-head.slim{padding-block:0 12px;gap:4px}
.mesa-head.slim h1{font-size:clamp(30px,3.4vw,44px)}
.mesa-head.slim p{display:none}
.crumbs{padding-block:12px}
.studio{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(370px,29vw,470px)!important;gap:16px!important;align-items:stretch!important;height:clamp(600px,calc(100vh - 92px),1000px);padding-bottom:0!important;margin-bottom:clamp(40px,6vw,80px)}
.stage{display:flex;flex-direction:column;min-height:0;min-width:0}
.mtb{position:static!important;flex:none;margin-bottom:8px!important}
.cv{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.cv .board-wrap{flex:1 1 auto;min-height:0;max-height:none!important;height:100%;container-type:size;display:flex;align-items:flex-start;justify-content:flex-start;overflow:auto}
.cv .board{width:calc(min(100cqw,calc(100cqh*var(--ar)))*var(--z,1))!important;flex:none;margin:auto}
.cv .board-wrap[hidden],.v3[hidden]{display:none!important}
.v3{height:auto!important;flex:1 1 auto;min-height:0}
.mstat{flex:none;margin-top:8px!important}
.studio .mside{position:static!important;display:flex!important;flex-direction:column;height:100%;max-height:none!important;overflow:hidden!important;border-radius:14px}
.mside>div{flex:1 1 auto;min-height:0;overflow:auto}
.mside>div[hidden]{display:none}
.stabs{flex:none;position:static}
.stabs button{font-size:14px;letter-spacing:.07em;min-height:46px;padding:0 6px}
/* inventario dentro del panel */
.inv{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:14px 14px 18px!important;background:transparent!important}
.inv::before,.inv::after{display:none}
.ihead{margin:0 0 12px}
.ihead h2{font-size:28px}
.ibar{width:90px}
.igrid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px;padding:8px}
.icats{margin:10px 0 12px}
.idet{grid-template-columns:96px minmax(0,1fr)!important;gap:12px;padding:10px;min-height:0!important}
.iimg{min-height:96px!important;padding:4px}
.iimg img{max-height:96px}
.itx h3{font-size:21px;margin-bottom:6px}
.iprice{font-size:21px}
.icol{margin-top:12px;padding:10px;border-radius:10px;border:1px solid #2a2019;background:#100d0a}
.icol .ct{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:8px;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.icol .ct span{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--dim);font-size:12px}
.csw{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.csw button{aspect-ratio:1;border-radius:7px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.csw button:hover{outline:2px solid var(--accent);outline-offset:1px}
.cpick{display:block;aspect-ratio:1;border-radius:7px;border:1px dashed var(--line2);overflow:hidden;cursor:pointer;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.cpick input{opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.crow{display:flex;gap:6px;margin-top:8px}
.crow button{flex:1;min-height:32px;border-radius:8px;border:1px solid var(--line2);background:var(--bg3);color:var(--fg);font-size:12.5px;cursor:pointer}
.crow button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.iact{margin-top:12px}
.iact .ib{width:100%;justify-content:center}
/* catálogo y presupuesto en el panel */
.pal.pal-f{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;gap:8px;padding:10px 12px 16px}
.pal.pal-f .pi{height:92px}
.pal.pal-f b{font-size:12px}
.pbar{padding:12px 12px 4px}
.pbar input{flex:1 1 100%!important;width:100%}
.bhead{padding:14px 14px 4px}
.bhead h3{font-size:26px}
.bhead p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.mrow a{color:var(--fg);text-decoration:none}.mrow a:hover{color:var(--accent)}
.mnote{display:block;padding:0 14px;font-size:12.5px;color:var(--dim)}
.bact{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 0}
.bact .btn{grid-column:1/-1;min-height:46px}
.bact .ib{display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.mact{padding:10px 14px 18px}
.mact .btn{width:100%;min-height:46px}
.sbtn.share{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);margin-left:auto}
@media (max-width:1000px){
 .studio{display:block!important;height:auto}
 .stage{display:contents}
 .cv{position:sticky;top:60px;z-index:25;height:min(52vh,520px)}
 .mtb{margin-bottom:8px!important}
 .studio .mside{height:auto;overflow:visible!important;margin-top:12px}
 .mside>div{overflow:visible}
 .mstat{margin:8px 0 0!important}
 .stabs{position:sticky;top:calc(60px + min(52vh,520px));z-index:24;background:var(--bg2)}
}

/* ===== Mesa 4.0: imán, grupos, regla, alcance, escala, relieve, luz, "ya lo tengo" ===== */
.board .ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}
.ov .ring{fill:rgba(255,122,26,.07);stroke:var(--accent);stroke-width:2px;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}
.ov .rl{stroke:#ffd28a;stroke-width:2.5px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.ov .rd{fill:var(--accent);stroke:#120d0a;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.ov text{font:700 2.1px var(--font-body,system-ui),sans-serif;fill:#fff;paint-order:stroke;stroke:#120d0a;stroke-width:.55px;stroke-linejoin:round}
.ov .rt.big{font-size:2.6px;fill:#ffd28a}
.ov .ref circle{fill:rgba(216,207,184,.25);stroke:#d8cfb8;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.ov .ref line{stroke:#d8cfb8;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.board.rulermode{cursor:crosshair}.board.rulermode .mp{cursor:crosshair}
.mp.multi{z-index:3}
.mp.multi::after{content:"";position:absolute;inset:-3px;border:2px dashed var(--accent);border-radius:4px;pointer-events:none}
.board.showbuy .mp:not(.own){filter:drop-shadow(0 0 5px rgba(255,122,26,.85))}
.board.showbuy .mp.own{opacity:.5;filter:grayscale(.9)}
.ex-pop{min-width:290px}
.exrow{display:flex;gap:6px;align-items:stretch}
.exrow>button:first-child{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px}
.exrow>button b{font-weight:700}.exrow>button span{font-size:.78em;opacity:.7}
.exbuy{flex:none;font-size:.78em!important;white-space:nowrap;border:1px solid var(--accent)!important;color:var(--accent)!important;border-radius:6px}
.iown{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:9px 12px;border:1px dashed var(--line2);border-radius:8px;cursor:pointer;font-size:.92em}
.iown input{width:18px;height:18px;accent-color:var(--accent)}
.slot{position:relative}
.slot .ownb{position:absolute;top:3px;left:3px;background:#4f7a3a;color:#fff;font-style:normal;font-size:11px;line-height:1;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;font-weight:800}
.slot.own img{opacity:.7}
.owned{color:#8fc06f;font-style:normal;font-weight:700;font-size:.85em}
.pfloat .pb button.on{background:var(--accent);color:#120d0a}
.ov .obj{fill:rgba(224,168,46,.92);stroke:#120d0a;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.ov .obj2{fill:none;stroke:rgba(224,168,46,.7);stroke-width:1.5px;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.ov text.on{fill:#120d0a;stroke:none;font-size:2.5px}
.mdd-pop{max-height:min(72vh,560px);overflow-y:auto}