/* Configurador de colchones · estilos (colores Grup3D: verde #1F6F50 y azul petróleo #1F3A45) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(./assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(./assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --ground:#F2F5F3; --surface:#FFFFFF; --ink:#16252C; --soft:#56676E; --line:#DAE2DE; --line2:#C6D1CC;
  --green:#1F6F50; --green-d:#18583F; --green-l:#E2EFE8; --petrol:#1F3A45; --petrol-d:#172c35; --amber:#A86A12; --amber-l:#F7ECDA; --red:#A8412F;
  --display:"Archivo","Arial Narrow",Arial,sans-serif; --body:"Archivo","Segoe UI",Roboto,Arial,sans-serif; --mono:Consolas,"SF Mono",Menlo,monospace;
  --bar:60px; --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3{font-family:var(--display);font-stretch:108%;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
a{color:var(--green)}
.muted{color:var(--soft)}
.eyebrow{font:600 11.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.demo{display:inline-block;font:700 9.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--amber-l);color:var(--amber);padding:3px 5px;border-radius:4px;vertical-align:middle;font-style:normal}
.real{display:inline-block;font:700 9.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--green-l);color:var(--green);padding:3px 5px;border-radius:4px;vertical-align:middle}

/* ---------- barra superior ---------- */
.bar{position:relative;z-index:20;height:var(--bar);display:flex;align-items:center;gap:16px;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));background:var(--petrol);color:#fff}
.marca{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;min-width:0}
.marca img{height:34px;width:auto;display:block;flex:none}
.marca-t{border-left:1px solid rgba(255,255,255,.25);padding-left:14px;min-width:0}
.marca-t b{display:block;font:700 15.5px/1.15 var(--display);font-stretch:110%;white-space:nowrap}
.marca-t small{display:block;font-size:12px;opacity:.72;white-space:nowrap}
.bar-actions{margin-left:auto;display:flex;gap:8px;flex:none}
@media (max-width:820px){.marca-t small{display:none}#btnCompartir{display:none}}
@media (max-width:560px){.marca-t{display:none}.marca img{height:30px}.bar{gap:10px}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:var(--green);color:#fff;font-weight:700;padding:11px 18px;cursor:pointer;text-decoration:none;transition:background .15s;touch-action:manipulation}
.btn:hover{background:var(--green-d)}
.btn.sec{background:var(--petrol)} .btn.sec:hover{background:var(--petrol-d)}
.btn.ghost{background:transparent;color:var(--petrol);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.btn.ghost:hover{background:#e6ecee}
.bar .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)} .bar .btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.sm{padding:8px 13px;font-size:14px}
.btn.big{padding:15px 22px;font-size:17px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- estructura ---------- */
.cfg{position:fixed;inset:var(--bar) 0 0 0;display:grid;grid-template-columns:minmax(0,1fr) 430px;background:var(--ground)}
.stage{position:relative;min-height:0;min-width:0;overflow:hidden}
.canvas{position:absolute;inset:0}
.canvas canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.side{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface);border-left:1px solid var(--line)}
.portada{display:none}

/* ---------- portada ---------- */
.cfg.portada-on{grid-template-columns:minmax(380px,44%) minmax(0,1fr)}
.cfg.portada-on .side,.cfg.portada-on .tools,.cfg.portada-on .actions,.cfg.portada-on .navpad,.cfg.portada-on .hint{display:none}
.cfg.portada-on .portada{display:flex;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto}
.portada-in{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:20px;max-width:640px;margin:auto 0 auto auto}
.portada-logo{width:166px;height:auto}
.portada h1{font-size:clamp(28px,3.5vw,46px);font-weight:800;letter-spacing:-.015em;line-height:1.08}
.portada h1 em{font-style:normal;color:var(--green)}
.portada-pts{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.portada-pts li{background:var(--surface);padding:12px 16px;display:flex;flex-direction:column;line-height:1.3}
.portada-pts b{font:700 16px/1.25 var(--display);color:var(--petrol)}
.portada-pts span{font-size:14.5px;color:var(--soft)}
.portada-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.portada-nota{font-size:12.5px;color:var(--soft);line-height:1.45}
body.en-portada .bar-actions{display:none}

/* ---------- visor ---------- */
.dim{font:600 12px/1 var(--body);background:var(--green);color:#fff;padding:4px 7px;border-radius:4px;white-space:nowrap}
.tools{position:absolute;left:14px;top:14px;display:flex;gap:2px;z-index:4;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:9px;padding:3px;backdrop-filter:blur(6px)}
.tools button{border:0;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;font-weight:700;color:var(--soft)}
.tools button:hover{color:var(--ink)}
.tools button[aria-pressed="true"]{background:var(--petrol);color:#fff}
.demo-tag{position:absolute;right:14px;top:14px;z-index:4;font:700 10.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--amber-l);color:var(--amber);padding:6px 8px;border-radius:5px}
.actions{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;display:flex;gap:2px;align-items:stretch;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:14px;padding:5px;box-shadow:0 12px 30px -16px rgba(12,30,36,.45);backdrop-filter:blur(8px);max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none}
.actions::-webkit-scrollbar{display:none}
.actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;border:0;background:none;border-radius:10px;padding:7px 8px 6px;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap;flex:none;touch-action:manipulation}
.actions button:hover{background:var(--ground)}
.actions button[aria-pressed="true"]{background:var(--green-l);color:var(--green)}
.actions button.estrella{background:var(--petrol);color:#fff;padding-inline:13px;margin-left:4px}
.actions button.estrella:hover{background:var(--petrol-d)}
.actions button.estrella[aria-pressed="true"]{background:var(--petrol-d);color:#bfe6d4}
.actions button.primary{background:var(--green);color:#fff;padding-inline:14px;margin-left:4px}
.actions button.primary:hover{background:var(--green-d)}
.actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:3;background:rgba(22,37,44,.72);color:#fff;font-size:13px;padding:6px 12px;border-radius:99px;pointer-events:none;transition:opacity .6s;white-space:nowrap}
.navpad{position:absolute;right:14px;bottom:96px;z-index:4;display:flex;flex-direction:column;gap:2px;padding:3px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.1)}
.navpad button{width:36px;height:34px;border:0;background:transparent;border-radius:9px;color:var(--soft);display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.navpad button:hover{color:var(--green);background:#f0f5f2} .navpad button:active{transform:scale(.94)}
.navpad svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.credit{position:absolute;left:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border-radius:999px;padding:5px 12px;text-decoration:none;color:#6f7679;font-size:11px;font-weight:600}
.credit img{height:18px;width:auto;display:block}
.cfg:not(.portada-on) .credit{bottom:auto;top:54px}
@media (max-width:1180px){.cfg:not(.portada-on) .credit{display:none}}
.cargando{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:12px;background:var(--ground);color:var(--soft);font-size:14.5px;transition:opacity .5s}
.cargando span{width:34px;height:34px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--green);animation:gira 1s linear infinite}
.cargando.fuera{opacity:0;pointer-events:none}
@keyframes gira{to{transform:rotate(360deg)}}

/* etiquetas sobre el 3D (detalles) */
.tagw{pointer-events:none}
.tagl{position:relative;display:inline-block;transform:translate(14px,-50%);font:700 11.5px/1.2 var(--body);background:rgba(22,37,44,.86);color:#fff;padding:5px 9px;border-radius:6px;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.tagl::before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:8px;border-radius:50%;background:#43d17f;box-shadow:0 0 0 3px rgba(67,209,127,.35);transform:translateY(-50%)}

/* etiquetas de las capas */
.callouts{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;visibility:hidden}
.co-lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.co-lineas polyline{fill:none;stroke:rgba(22,37,44,.55);stroke-width:1.1}
.co-lineas circle{fill:var(--green);stroke:#fff;stroke-width:1.5}
.co-col{position:absolute;left:0;top:0;width:248px}
.co-item{position:absolute;left:0;top:0;width:100%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:8px;padding:4px 9px 4px 5px;box-shadow:0 8px 18px -14px rgba(12,30,36,.6);pointer-events:auto;cursor:default;min-height:36px}
.co-item.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.co-num{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--body);color:#16252C;background:var(--c,#ddd);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.co-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.co-nom{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-gro{font-size:11.5px;color:var(--soft)}
.co-gro i{font:700 9px/1 var(--body);letter-spacing:.08em;background:var(--amber-l);color:var(--amber);padding:2px 4px;border-radius:3px;font-style:normal;margin-left:3px}
.co-grupo{position:absolute;left:0;top:0;width:18px;border-left:2px solid var(--petrol);display:grid;place-items:center}
.co-grupo span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 9.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);white-space:nowrap;padding-right:5px}
.co-punto{display:none;position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;place-items:center;font:700 11px/1 var(--body);color:#16252C;background:var(--c,#fff);box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.35)}
.co-punto.on{box-shadow:0 0 0 2px var(--green),0 3px 8px rgba(0,0,0,.35)}
.callouts.compacto .co-col,.callouts.compacto .co-lineas{display:none}
.callouts.compacto .co-punto{display:grid}

/* ---------- panel ---------- */
.side-head{padding:16px 20px 0;display:flex;flex-direction:column;gap:5px}
.side-head h1{font-size:24px;font-weight:800}
.steps{list-style:none;margin:10px -20px 0;padding:0 12px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line)}
.steps li{min-width:0}
.steps button{width:100%;border:0;background:none;padding:6px 1px 9px;font-size:11.5px;font-weight:600;color:var(--soft);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1;touch-action:manipulation}
.steps button .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11.5px/1 var(--body);background:var(--ground);color:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line2)}
.steps button.hecho .n{background:var(--green-l);color:var(--green);box-shadow:inset 0 0 0 1.5px #b5d4c5}
.steps button[aria-current="step"]{color:var(--green);border-bottom-color:var(--green)}
.steps button[aria-current="step"] .n{background:var(--green);color:#fff;box-shadow:none}
.side-body{flex:1;overflow-y:auto;padding:18px 20px 24px;display:flex;flex-direction:column;gap:18px;min-height:0;-webkit-overflow-scrolling:touch}
.side-body>*{flex:none}
.side-foot{border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;background:var(--surface)}
.total{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.total small{font-size:11.5px;color:var(--soft)}
.total b{font:800 24px/1.1 var(--display);font-stretch:108%;font-variant-numeric:tabular-nums;color:var(--petrol)}
.foot-btns{margin-left:auto;display:flex;gap:8px}

.p{display:flex;flex-direction:column;gap:8px}
.lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;font-size:15px}
.lbl output,.lbl .val{font:600 13.5px/1 var(--body);color:var(--green);font-variant-numeric:tabular-nums}
.sub{font-size:13.5px;color:var(--soft);font-weight:400;line-height:1.4}
.note{font-size:13.5px;color:var(--soft);background:var(--ground);border-radius:8px;padding:10px 12px;line-height:1.45}
.warn{font-size:14px;background:var(--amber-l);color:#6d4508;border-radius:8px;padding:10px 12px;line-height:1.4}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.opts.tres{grid-template-columns:repeat(3,1fr)}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:10px 12px;cursor:pointer;font-size:14.5px;font-weight:600;line-height:1.25;touch-action:manipulation}
.opt small{font-weight:400;color:var(--soft);font-size:12.5px;line-height:1.3}
.opt:hover{border-color:var(--line2)}
.opt[aria-pressed="true"]{border-color:var(--green);background:var(--green-l);box-shadow:inset 0 0 0 1px var(--green)}
.opt.centro{align-items:center;text-align:center;padding:12px 6px;font-size:15px}
/* tarjetas de modelo */
.modelos{display:flex;flex-direction:column;gap:10px}
.mod{display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:12px 14px;cursor:pointer;touch-action:manipulation}
.mod:hover{border-color:var(--line2)}
.mod[aria-pressed="true"]{border-color:var(--green);background:var(--green-l);box-shadow:inset 0 0 0 1px var(--green)}
.mod h3{font-size:18px;font-weight:800}
.mod .col{font-size:12px;color:var(--green);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mod .pre{grid-row:1/3;grid-column:2;text-align:right;font:800 17px/1.1 var(--display);color:var(--petrol);white-space:nowrap}
.mod .pre small{display:block;font:400 11px/1.3 var(--body);color:var(--soft)}
.mod p{grid-column:1/-1;font-size:13.5px;color:var(--soft);line-height:1.4}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.chip{font-size:12px;font-weight:600;background:#fff;border:1px solid var(--line2);border-radius:99px;padding:3px 9px;color:var(--ink);white-space:nowrap}
.mod[aria-pressed="true"] .chip{border-color:#b5d4c5}
.enlace{font-size:13.5px;font-weight:600}
/* medida */
.amedida{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campo{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
.numbox{display:flex;align-items:center;border:1.5px solid var(--line2);border-radius:8px;overflow:hidden;background:#fff}
.numbox:focus-within{border-color:var(--green)}
.numbox input{width:100%;border:0;padding:10px 4px 10px 12px;font:600 17px var(--body);background:transparent;color:var(--ink);-moz-appearance:textfield;outline:0;min-width:0}
.numbox input::-webkit-inner-spin-button{-webkit-appearance:none}
.numbox span{font-size:13px;color:var(--soft);padding-right:12px}
.numbox button{border:0;background:var(--ground);width:40px;align-self:stretch;font-size:20px;font-weight:700;cursor:pointer;color:var(--petrol);touch-action:manipulation}
.numbox button:hover{background:var(--green-l)}
select{width:100%;border:1.5px solid var(--line2);border-radius:8px;padding:10px;background:#fff;font:inherit;color:var(--ink)}
.tgl{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;background:#fff}
.tgl b{font-size:14.5px;display:block}
.tgl input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;background:var(--line2);position:relative;cursor:pointer;flex:none;transition:background .15s;margin:0}
.tgl input::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tgl input:checked{background:var(--green)} .tgl input:checked::after{transform:translateX(18px)}
/* por dentro */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--petrol);border-radius:9px;overflow:hidden}
.seg button{border:0;background:#fff;padding:11px 6px;font-weight:700;font-size:14px;cursor:pointer;color:var(--petrol);border-left:1.5px solid var(--petrol);touch-action:manipulation}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--petrol);color:#fff}
.capas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.capas .grp{font:700 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);padding:12px 0 6px;border-bottom:2px solid var(--petrol)}
.capa{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--line);cursor:default;border-radius:6px}
.capa.on{background:var(--green-l)}
.capa .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--body);background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.capa b{font-size:14px;line-height:1.25;display:block}
.capa small{font-size:12.5px;color:var(--soft);display:block;line-height:1.3}
.capa .g{font-size:13px;font-weight:600;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
/* firmeza */
.firm{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff}
.firm-esc{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.firm-esc div{height:34px;border-radius:6px;background:var(--ground);display:grid;place-items:center;font:700 14px/1 var(--body);color:var(--soft);position:relative}
.firm-esc div.on{background:var(--green);color:#fff}
.firm-esc div.on::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--green);border-bottom:0}
.firm-ext{display:flex;justify-content:space-between;font-size:12px;color:var(--soft);margin-top:4px}
.firm h3{font-size:19px}
.lista{display:flex;flex-direction:column;gap:6px}
.fila{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px;cursor:pointer;text-align:left;font-size:14.5px;font-weight:600;touch-action:manipulation}
.fila[aria-pressed="true"]{border-color:var(--green);background:var(--green-l)}
.fila .pts{display:flex;gap:3px;margin-left:auto}
.fila .pts i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.fila .pts i.on{background:var(--green)}
.fila small{font-weight:400;color:var(--soft);font-size:13px}
/* tejidos y tapizados */
.tejidos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tej{display:flex;flex-direction:column;gap:6px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px;cursor:pointer;font-size:14px;font-weight:700;line-height:1.25;touch-action:manipulation}
.tej[aria-pressed="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--green-l)}
.tej .m{height:56px;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:linear-gradient(180deg,var(--a) 0 62%,var(--b) 62% 100%);position:relative;overflow:hidden}
.tej .m::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 32%,rgba(0,0,0,.16) 0 3px,transparent 4px),radial-gradient(circle at 75% 32%,rgba(0,0,0,.16) 0 3px,transparent 4px),radial-gradient(circle at 50% 12%,rgba(0,0,0,.12) 0 3px,transparent 4px)}
.tej small{font-weight:400;color:var(--soft);font-size:12.5px}
.sw{display:flex;flex-wrap:wrap;gap:9px}
.sw button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;position:relative;padding:0;touch-action:manipulation}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--green)}
.alturas{display:flex;gap:6px;flex-wrap:wrap}
.alturas button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-weight:700;font-size:14px;cursor:pointer;touch-action:manipulation}
.alturas button[aria-pressed="true"]{border-color:var(--green);background:var(--green-l);color:var(--green)}
h2.sec{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);padding-bottom:7px;border-bottom:2px solid var(--petrol);margin-top:4px}
/* resumen */
.sum{display:flex;flex-direction:column;gap:14px}
.kv{width:100%;border-collapse:collapse;font-size:14.5px}
.kv td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.kv td:first-child{color:var(--soft)}
.kv td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;padding-left:10px}
.kv tr.tot td{border-bottom:0;font-weight:800;font-size:17px;padding-top:10px;color:var(--petrol)}
.sum h3{font-size:16px;font-family:var(--body);font-weight:700;font-stretch:100%}
.sum-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pitch{background:var(--petrol);color:#fff;border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.pitch h3{font-size:20px;font-family:var(--display);font-stretch:108%}
.pitch p{color:#c9d8d3;font-size:14.5px;line-height:1.4}

/* ---------- diálogo ---------- */
.dlg{border:0;border-radius:14px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);color:var(--ink)}
.dlg::backdrop{background:rgba(12,22,26,.55)}
.dlg-close{position:absolute;right:8px;top:8px;margin:0;z-index:2}
.dlg-close button{border:0;background:var(--ground);width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
#dlgBody{padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px}
#dlgBody h2{font-size:25px;padding-right:34px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
.form input,.form select,.form textarea{border:1.5px solid var(--line2);border-radius:8px;padding:11px;font:inherit;font-weight:400;color:var(--ink);background:#fff;width:100%}
.form textarea{min-height:70px;resize:vertical}
.form .chk{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;font-size:13.5px;color:var(--soft)}
.form .chk input{width:auto;margin-top:3px}
.hp{position:absolute;left:-9999px}
.err{font-size:14px;color:var(--red)}
.pedido{background:var(--ground);border-radius:8px;padding:10px 12px;font-size:14px;line-height:1.45}
.pedido b{color:var(--petrol)}
.qr{display:flex;gap:16px;align-items:center}
.qr img{width:160px;height:160px;flex:none;image-rendering:pixelated;border:1px solid var(--line);border-radius:8px;background:#fff}
.qr p{font-size:14px}
.copyrow{display:flex;gap:8px}.copyrow input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:7px;padding:9px;font:13px var(--mono)}
model-viewer{width:100%;height:min(52vh,460px);background:#eef2f0;border-radius:10px;--poster-color:#eef2f0}
.ar-btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--green);color:#fff;border:0;border-radius:999px;padding:13px 22px;font:700 16px var(--body);white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--petrol);color:#fff;padding:11px 18px;border-radius:9px;z-index:50;font-size:15px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);max-width:calc(100vw - 32px);text-align:center}
@media (max-width:520px){.form{grid-template-columns:1fr}.qr{flex-direction:column;align-items:flex-start}}

/* ---------- tablet y móvil ---------- */
@media (max-width:1100px){.cfg{grid-template-columns:minmax(0,1fr) 380px}}
@media (max-width:900px){
  .cfg{grid-template-columns:minmax(0,1fr);grid-template-rows:46dvh minmax(0,1fr)}
  .cfg.portada-on{grid-template-columns:minmax(0,1fr);grid-template-rows:38dvh minmax(0,1fr)}
  .cfg.portada-on .stage{order:-1}
  .cfg.portada-on .portada{border-right:0;border-top:1px solid var(--line);align-items:flex-start}
  .portada-in{margin:0 auto;padding:22px 20px 28px;gap:14px}
  .portada-logo{display:none}
  .portada h1{font-size:clamp(25px,6.6vw,34px)}
  .portada-pts{order:4}
  .portada-pts li{padding:9px 14px}
  .portada-btns{order:3;margin-top:0}
  .portada-btns .btn{flex:1 1 100%}
  .portada-nota{order:5}
  .side{border-left:0;border-top:1px solid var(--line)}
  .side-head{padding:10px 16px 0}.side-head h1{font-size:20px}.side-head .eyebrow{display:none}
  .steps{margin:6px -16px 0;padding:0 8px}
  .steps button{font-size:10.5px;padding:4px 0 7px;gap:4px}
  .side-body{padding:14px 16px 18px}
  .side-foot{padding-inline:16px}
  .tools{left:8px;top:8px}.tools button{padding:5px 8px;font-size:12px}
  .demo-tag{right:8px;top:8px;font-size:9.5px;padding:5px 6px}
  .hint{display:none}
  .actions{bottom:8px;left:8px;right:8px;transform:none;max-width:none;border-radius:12px;padding:3px;justify-content:flex-start}
  .actions button{min-width:56px;padding:5px 6px 4px;font-size:10.5px}
  .actions button.estrella{order:-2;margin-left:0;margin-right:2px}
  .actions button.primary{order:-1;margin-left:0;margin-right:4px}
  .actions svg{width:18px;height:18px}
  .navpad{right:8px;bottom:72px}.navpad button{width:34px;height:32px}
  .total b{font-size:20px}
  .tagl{font-size:10px;padding:3px 6px}
  .dim{font-size:10.5px;padding:3px 5px}
}
@media (min-width:901px) and (max-width:1100px) and (orientation:landscape){.side-head h1{font-size:21px}}
@media (max-width:420px){.opts.tres{grid-template-columns:repeat(2,1fr)}.foot-btns .btn{padding:11px 13px}.sum-btns{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================================
   v2 · versión neutra y mejoras
   ===================================================================================== */
.marca-i{width:34px;height:34px;flex:none}
.marca-i rect{fill:var(--green)} .marca-i path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.marca-t{border-left:0;padding-left:0}
.bar-util{display:flex;gap:2px;margin-left:auto;flex:none}
.bar-util + .bar-actions{margin-left:8px}
.ico{display:flex;align-items:center;gap:6px;border:0;background:none;color:#cfe0da;border-radius:8px;padding:7px 9px;cursor:pointer;font-size:13px;font-weight:600;touch-action:manipulation}
.ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico:hover{background:rgba(255,255,255,.1);color:#fff}
.ico[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(159,224,194,.7)}
body.en-portada .bar-actions{display:none}
@media (max-width:1240px){.ico span{display:none}}
@media (max-width:820px){.bar-util #btnStand,.bar-util #btnDemo{display:none}}
@media (max-width:560px){.marca-t{display:block}.marca-t small{display:none}.marca-t b{font-size:14px}.bar-util{display:none}#btnPedirTop{padding:8px 10px;font-size:13px}}

.portada-mas{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:-6px}
.linkbtn{border:0;background:none;color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:15px;font-weight:600;padding:6px 0;touch-action:manipulation}
.linkbtn:hover{color:var(--green-d)}
@media (max-width:900px){.portada-mas{order:3}}

/* cartel de la demostración automática */
.cartel{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:6;background:rgba(22,37,44,.9);color:#fff;border-radius:12px;padding:10px 18px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);pointer-events:none;max-width:calc(100% - 24px);text-align:center}
.cartel b{font:800 20px/1.2 var(--display);font-stretch:108%}
.cartel span{font-size:12.5px;color:#bfd6cf}
.cfg.portada-on .cartel{top:18px}
body.demo-auto .hint{display:none}
@media (max-width:900px){.cartel{top:50px;padding:7px 12px}.cartel b{font-size:16px}.cartel span{font-size:11px}}

/* rótulos del comparador sobre el 3D */
.rot3d{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:99px;padding:4px 12px 4px 4px;font:700 13px/1 var(--body);color:var(--ink);white-space:nowrap;box-shadow:0 8px 18px -12px rgba(12,30,36,.6)}
.rot3d b,.letra{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--petrol);color:#fff;font:700 12px/1 var(--body);flex:none}

/* diálogo */
.dlg-in{display:flex;flex-direction:column;gap:14px}
.dlg-in h2{font-size:25px;padding-right:34px}
.dlg.ancho{width:min(720px,calc(100vw - 24px))}
.avance{height:5px;border-radius:99px;background:var(--ground);overflow:hidden}
.avance i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.porque{margin:0;padding:0 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:6px}
.porque li{position:relative;padding-left:24px;font-size:15px;line-height:1.35}
.porque li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.tiendas{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.tienda{display:grid;grid-template-columns:1fr auto;gap:0 10px;border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px;line-height:1.3}
.tienda span{color:var(--soft);font-size:13px;grid-column:1}
.tienda em{grid-column:2;grid-row:1/3;align-self:center;font:700 10.5px/1 var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:var(--green-l);padding:5px 7px;border-radius:5px}
.tienda.on{border-color:var(--green);background:#f4faf7}
.hfila{display:grid;grid-template-columns:1fr 190px;gap:8px;margin-bottom:8px}
.hfila .numbox input{font-size:16px;padding:9px 2px 9px 8px}
#hMas{align-self:flex-start}
@media (max-width:520px){.hfila{grid-template-columns:1fr 160px}}

/* panel */
.pts{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle}
.pts i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.pts i.on{background:var(--green)}
.fila .pts{margin-left:auto}
.dosbot{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dosbot .btn{padding:11px 8px;font-size:14.5px}
.seg.dos{grid-template-columns:repeat(2,1fr)}
.seg button{line-height:1.2}
.indep{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff}
.capa{cursor:pointer}
.capa:hover{background:var(--ground)}
.capa.abierta{background:var(--green-l)}
.capa-f{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.4;color:var(--ink);padding:4px 2px 4px 36px}
.capa-f b{display:inline;font-size:13.5px}
.co-item{cursor:pointer}
.pitch .firma{font:700 13px/1 var(--body);letter-spacing:.06em;color:#9fe0c2}

/* comparador */
.cmp-cab{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-sel{display:flex;align-items:center;gap:7px;min-width:0}
.cmp-sel select{padding:9px 8px;font-weight:700;min-width:0}
.cmp-t{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp-t th{font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);text-align:left;padding:6px 4px;border-bottom:2px solid var(--petrol)}
.cmp-t td{padding:7px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp-t td:first-child{color:var(--soft);width:34%}
.cmp-t td:not(:first-child){font-weight:600}
.cmp-t td .pts{margin-left:0}
.cmp-t td .pts:not(:first-child){margin-left:6px}
.cmp-t tr.dif td:not(:first-child){color:var(--green)}
.cmp-t tr.dif td:first-child{color:var(--ink);font-weight:700}
.cmp-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp-dos>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.cmp-dos h3{font:700 14.5px/1.2 var(--body);display:flex;align-items:center;gap:7px}
.cmp-capas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;flex:1}
.cmp-capas li{display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:center;font-size:12px;line-height:1.2}
.cmp-capas .n{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font:700 10.5px/1 var(--body);background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.cmp-capas em{font-style:normal;color:var(--soft);font-variant-numeric:tabular-nums}
.cmp-dos .btn{padding:10px 6px;font-size:14px}

/* ajustes tras las pruebas en móvil y tablet */
#btnPedirTop .corto{display:none}
@media (max-width:560px){
  #btnPedirTop .largo{display:none} #btnPedirTop .corto{display:inline}
  .marca{gap:10px}
  .marca-t b{white-space:normal;font-size:13px;line-height:1.1;max-width:9.5em}
}
@media (min-width:901px) and (max-width:1240px){
  .actions button{min-width:50px;padding:7px 5px 6px;font-size:11px}
  .actions button.estrella,.actions button.primary{padding-inline:9px;margin-left:2px}
}
@media (min-width:901px) and (max-width:1100px){
  .actions{justify-content:flex-start}
  .actions button.estrella{order:-2;margin-left:0;margin-right:2px}
  .actions button.primary{order:-1;margin-left:0;margin-right:4px}
}
.kv.num td:last-child{white-space:nowrap}
.kv.num td:first-child{padding-right:6px}

/* ---------- visor para la ficha de producto (ficha.html) ---------- */
body.ficha .cfg.fi{inset:0;display:block}
.fi .stage{position:absolute;inset:0}
.fi-cab{position:absolute;left:12px;top:12px;z-index:5;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 14px;box-shadow:0 10px 24px -16px rgba(12,30,36,.5);max-width:calc(100% - 24px)}
.fi-tit{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.fi-tit b{font:700 15.5px/1.2 var(--display);font-stretch:108%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-tit small{font-size:12px;color:var(--soft);white-space:nowrap}
.fi-cab select{width:auto;padding:8px 30px 8px 10px;font-size:14px;font-weight:700;flex:none}
.fi .credit,.fi.cfg:not(.portada-on) .credit{display:inline-flex;top:12px;right:12px;left:auto;bottom:auto}
.fi .demo-tag{top:48px;right:12px}
.fi-capas{position:absolute;left:12px;top:74px;z-index:4;list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;max-height:calc(100% - 184px);overflow:auto;width:min(250px,44%)}
.fi-capas li{display:grid;grid-template-columns:20px 1fr auto;gap:7px;align-items:center;font-size:12px;line-height:1.2;padding:3px 5px;border-radius:6px;cursor:default}
.fi-capas li.on{background:var(--green-l)}
.fi-capas .n{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font:700 10.5px/1 var(--body);background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.fi-capas em{font-style:normal;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.fi-firm{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:4;background:rgba(22,37,44,.88);color:#fff;font-size:13.5px;line-height:1.3;padding:7px 14px;border-radius:99px;white-space:nowrap;max-width:calc(100% - 76px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.fi .co-punto{pointer-events:auto;cursor:pointer}
.fi .actions a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;border-radius:10px;padding:7px 8px 6px;font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap;flex:none;text-decoration:none}
.fi .actions a:hover{background:var(--ground)}
@media (max-width:900px){.fi .actions a{min-width:56px;padding:5px 6px 4px;font-size:10.5px}.fi-firm{bottom:74px;font-size:12.5px}.fi-cab{left:8px;top:8px}.fi .credit,.fi.cfg:not(.portada-on) .credit{top:8px;right:8px}.fi .demo-tag{top:42px;right:8px}}
@media (max-width:599px){.fi-capas{display:none}.fi-tit small{display:none}.fi .credit span{display:none}.fi .credit{padding:5px 9px}.fi-cab{gap:8px;padding-left:11px}.fi-tit b{font-size:14px}}
.fi .actions{justify-content:safe center}
@media (max-width:599px){.fi .credit,.fi.cfg:not(.portada-on) .credit{top:58px;left:8px;right:auto}.fi .demo-tag{top:62px;right:8px}}


/* ---------- v3 · dormitorio completo ---------- */
.fam{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.fam button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font:600 12.5px/1 var(--body);cursor:pointer;touch-action:manipulation}
.fam button small{font-weight:400;color:var(--soft)}
.fam button[aria-pressed="true"]{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.fam button[aria-pressed="true"] small{color:#cfd8dc}
.sw.telas{gap:10px 12px}
.swi{display:flex;flex-direction:column;align-items:center;width:56px}
.swi .swn{font-size:10.5px;color:var(--soft);text-align:center;line-height:1.15;margin-top:4px}
.sw button.t-pana{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 5px)}
.sw button.t-boucle{background-image:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4) 0 1.5px,transparent 2.5px),radial-gradient(circle at 70% 65%,rgba(0,0,0,.16) 0 1.5px,transparent 2.5px);background-size:8px 8px}
.sw button.t-terciopelo{background-image:linear-gradient(135deg,rgba(255,255,255,.32),transparent 45%,rgba(0,0,0,.2))}
.sw button.t-chenilla{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px)}
.sw button.t-piel{background-image:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 42%)}
.portada-btns{flex-wrap:wrap}

/* v5 (8-oct): el texto de la casilla de privacidad va en un <span> para que no se reparta en columnas */
.form .chk span{flex:1;min-width:0}

/* v6 (8-oct) · móvil */
@media (max-width:900px){
  /* pestañas 3D/Frente/Lado/Planta: 36 px de alto para pulsarlas con el dedo (antes 28 px) */
  .tools button{min-height:36px;padding-block:6px}
  /* el cartel de la demostración automática queda por debajo de las pestañas, ahora más altas */
  .cartel{top:60px}
  /* la barra de acciones ya se desplaza con el dedo: que el rebote del final no arrastre la página */
  .actions{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  /* campos de las ventanas con letra de 16 px: así el iPhone no hace zoom al tocarlos (antes 14 px / 13 px) */
  .form input,.form select,.form textarea,.copyrow input{font-size:16px}
}
@media (max-width:400px){
  /* la píldora «Modelos y precios DEMO» en dos líneas: a 360 px pisaba la pestaña «Planta» (14 px) */
  .demo-tag{max-width:112px;white-space:normal;text-align:center;line-height:1.3}
  .cfg.portada-on .demo-tag{max-width:none;white-space:nowrap}
}
@media (max-width:375px){
  /* el paso «Por dentro» medía 50 px en una celda de 49 */
  .steps button{font-size:10px}
}