/* Layout: workshop bench — 3D viewport as the work surface, instruction sheet docked at its side; stacks on phones. */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
:root{
  --bg:#f3f1ee; --surface:#fbfaf8; --stage:#e9e6e1; --line:#d9d4cc; --fg:#24221f; --muted:#6c675f;
  --stage-detail:#dfe3e6; --accent:#e2661f; --accent-ink:#b44a0e; --accent-soft:#fbe6d8; --on-accent:#ffffff;
  --display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1a1917; --surface:#22201e; --stage:#141311; --stage-detail:#10161a; --line:#38342f; --fg:#ece8e2; --muted:#a39d94;
  --accent:#f07a35; --accent-ink:#ff9a5c; --accent-soft:#3a2416; --on-accent:#1a1006; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1a1917; --surface:#22201e; --stage:#141311; --stage-detail:#10161a; --line:#38342f; --fg:#ece8e2; --muted:#a39d94;
  --accent:#f07a35; --accent-ink:#ff9a5c; --accent-soft:#3a2416; --on-accent:#1a1006; color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{height:100%;display:grid;grid-template-rows:auto 1fr;min-height:0}
header.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--accent-ink)}
.brand span{font-family:var(--display);font-weight:500;font-size:18px}
.dims{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.dims em{font-style:normal;color:var(--fg)}
main{display:grid;grid-template-columns:minmax(0,1fr) 420px;min-height:0}
.stage{position:relative;background:var(--stage);min-height:0;overflow:hidden}
canvas#gl{user-select:none;-webkit-user-select:none;position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;cursor:grab}
canvas#gl.drag{cursor:grabbing}
.tools{position:absolute;top:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chipbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500}
.chipbtn[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hint{position:absolute;left:12px;bottom:12px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:4px 10px;border-radius:6px}
.tag{position:absolute;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));background:var(--fg);color:var(--bg);padding:6px 10px;border-radius:8px;font-size:13px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tag code{font-family:var(--mono);font-size:12px;color:var(--accent);margin-right:6px}
.scenebadge{position:absolute;left:16px;top:112px;background:var(--fg);color:var(--bg);font-size:12.5px;padding:5px 10px;border-radius:999px;pointer-events:none}
.scenebadge b{color:var(--accent);font-weight:600}
.stage.detail{background:var(--stage-detail)}
.loader{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--stage) 82%,transparent);transition:opacity .35s ease}
.loader.off{opacity:0;pointer-events:none}
.loader .card{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:250px;max-width:calc(100% - 48px);padding:22px 28px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 12px 32px rgba(0,0,0,.16);text-align:center}
.loader .card b{font-family:var(--display);font-weight:600;font-size:15px}
.loader .card small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.loader .spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:loaderspin .8s linear infinite}
@keyframes loaderspin{to{transform:rotate(1turn)}}
.loader .bar{display:block;width:210px;max-width:100%;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.loader .bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent);transition:width .2s ease}
.loader .bar.ind i{width:38%;animation:loaderslide 1.1s ease-in-out infinite alternate}
@keyframes loaderslide{from{transform:translateX(-30%)}to{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.loader .spin,.loader .bar.ind i{animation:none}}
.planlink{margin-top:4px;border:1px solid var(--accent);color:var(--accent-ink);background:var(--accent-soft);border-radius:8px;padding:7px 12px;font-weight:600;font-size:13.5px}
.stepnum{position:absolute;left:16px;top:12px;font-family:var(--display);font-weight:700;font-size:64px;line-height:1;color:var(--accent);opacity:.9;pointer-events:none}
.stepnum small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
aside.sheet{border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;gap:4px;padding:10px 16px 0;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:8px 12px 10px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.pane{flex:1;overflow:auto;padding:18px 20px 24px;min-height:0}
.pager{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prog{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
.cnt{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.secs{position:relative;display:flex;gap:6px;overflow-x:auto;margin:0 -2px 16px;padding:2px;scrollbar-width:none;overscroll-behavior-x:contain}
.secs::-webkit-scrollbar{display:none}
.secs button{flex:none;border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:999px;padding:6px 12px;min-height:34px;font-size:13px;font-weight:500;white-space:nowrap}
.secs button.done{color:var(--fg)}
.secs button.cur{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hint{transition:opacity .4s ease}.hint.gone{opacity:0;pointer-events:none}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
/* Doble toque: en el HTML no hace zoom (iOS/Safari lo hace salvo que se indique; ignora user-scalable=no).
   "manipulation" deja el desplazamiento y el pellizco de accesibilidad pero quita el zoom por doble toque.
   El visor 3D (canvas#gl) sigue en touch-action:none: ahí el doble toque enfoca la pieza. */
*{touch-action:manipulation}
button,[role="tab"],.tag,.hint,.scenebadge,.stepnum,.loader{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas#gl{-webkit-touch-callout:none}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1.title{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.01em;margin:4px 0 12px;text-wrap:balance}
.desc p{margin:0 0 10px;max-width:60ch}
.desc ol{margin:0 0 10px;padding-left:20px}
.desc li{margin-bottom:6px}
h2.sub{font-size:12px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;font-weight:500}
.need{display:flex;flex-direction:column;gap:6px}
.need button{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:8px 10px}
.need button:hover{border-color:var(--accent)}
.need .q{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--accent-ink)}
.need button.photo{grid-template-columns:44px 1fr 64px}
.need button.photo img{width:64px;height:64px;object-fit:cover;border-radius:6px;background:#fff}
.bomph{display:flex;gap:6px;margin-top:6px}
.bomph img{width:56px;height:56px;object-fit:cover;border-radius:6px;background:#fff;border:1px solid var(--line)}
.kit{margin:12px 0 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.kit img{display:block;width:100%}
.kit figcaption{font-size:12.5px;color:var(--muted);padding:6px 10px;background:var(--surface);border-top:1px solid var(--line)}
.need .c{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tip{margin-top:16px;padding:10px 12px;border-radius:8px;background:var(--accent-soft);font-size:14px}
.tip b{color:var(--accent-ink)}
.nav{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.nav button{flex:1;border-radius:8px;padding:11px 12px;font-weight:600;border:1px solid var(--line);background:var(--bg)}
.nav button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.nav button.icon{flex:0 0 auto}
.nav button:disabled{opacity:.4;cursor:default}
table.bom{width:100%;border-collapse:collapse;font-size:14px}
table.bom th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:500;padding:6px 6px;border-bottom:1px solid var(--line)}
table.bom td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.bom tr.row{cursor:pointer}
table.bom tr.grp th{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--fg);padding:16px 6px 6px;border-bottom:2px solid var(--accent)}
table.bom tr.row:hover td{background:var(--bg)}
table.bom tr.sel td{background:var(--accent-soft)}
table.bom .n{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
table.bom .q{font-family:var(--mono);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
table.bom small{display:block;color:var(--muted);font-size:12.5px}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:baseline}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plans button{border:1px solid var(--line);border-radius:8px;background:#fff;padding:0;overflow:hidden;text-align:left}
.plans img{display:block;width:100%;aspect-ratio:1694/1238;object-fit:cover}
.plans span{display:block;padding:6px 8px;font-size:12.5px;background:var(--surface);color:var(--fg);border-top:1px solid var(--line)}
.plans span code{font-family:var(--mono);color:var(--accent-ink);margin-right:4px}
.note{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:60ch}
.lightbox{position:fixed;inset:0;z-index:20;background:rgba(15,14,12,.86);display:flex;flex-direction:column}
.lightbox .bar{display:flex;gap:8px;align-items:center;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));padding-top:calc(10px + env(safe-area-inset-top,0px));color:#f4f1ec}
.lightbox .bar strong{flex:1;font-weight:600;min-width:0}
.lightbox .bar button{border:1px solid #5b5650;background:#2a2725;color:#f4f1ec;border-radius:8px;padding:6px 12px}
.lightbox .scroll{flex:1;overflow:auto;padding:0 16px 16px}
.lightbox img{background:#fff;display:block;margin:0 auto;max-width:100%;border-radius:4px}
.lightbox.full img{max-width:none;width:2400px}
/* Celular vertical: la app ocupa toda la pantalla (sin scroll de página): visor arriba, hoja con su propio scroll abajo */
@media (max-width:880px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  .app{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr)}
  header.top{padding-block:8px;gap:2px 12px}
  .brand b{font-size:18px}.brand span{font-size:15px}
  .dims{display:none}
  main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(190px,42%) minmax(0,1fr)}
  aside.sheet{border-left:0;border-top:1px solid var(--line)}
  .pane{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .nav{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .stepnum{font-size:40px}
  .scenebadge{top:70px;left:12px}
  .tools{top:auto;bottom:10px;left:10px;right:10px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .tools::-webkit-scrollbar{display:none}
  .chipbtn{flex:none;padding:6px 11px;font-size:12.5px}
  .hint{bottom:52px;left:10px;right:10px;font-size:11.5px}
  .tag{max-width:80vw;white-space:normal}
}
/* Celular horizontal: dos columnas como en escritorio, con la hoja más angosta */
@media (max-width:880px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  .app{height:100vh;height:100dvh}
  header.top{padding-block:6px}.dims{display:none}
  main{grid-template-columns:minmax(0,1fr) minmax(300px,44%)}
  .stepnum{font-size:36px}.scenebadge{top:56px}
  .tools{top:auto;bottom:8px;left:8px;right:8px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .tools::-webkit-scrollbar{display:none}
  .chipbtn{flex:none;padding:6px 11px;font-size:12.5px}
  .hint{bottom:56px;left:8px;right:8px;font-size:11.5px}
}
/* Pantallas táctiles: objetivos de toque de al menos ~44 px */
@media (pointer:coarse){
  .chipbtn{min-height:40px}
  .tabs button{min-height:46px}
  .secs button{min-height:42px;padding:8px 14px}
  .need button{min-height:56px}
  table.bom tr.row td{padding-top:13px;padding-bottom:13px}
  .nav button{min-height:50px}
  .lightbox .bar button{min-height:44px;padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}