/* Casa en 3D — el modelo ocupa toda la pantalla; arriba flotan la marca, el selector Hoy/Proyecto/Comparar y el contacto;
   a la izquierda (abajo en teléfono) el panel; al caminar, el panel se oculta y queda un HUD mínimo. */
:root{
  --escena:#e3e9ea; --superficie:rgb(250 251 250 / .95); --texto:#1a2326; --suave:#55636a; --linea:#d2dadb;
  --acento:#1b6670; --acento-texto:#ffffff; --nuevo:#d27a22; --wa:#1c7a45; --wa-texto:#ffffff;
  --rotulo:rgb(255 255 255 / .9); --sombra:0 10px 30px rgb(20 35 40 / .16);
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --escena:#151b1e; --superficie:rgb(22 28 31 / .94); --texto:#e3eaeb; --suave:#9aa8ac; --linea:#2d393d;
  --acento:#5cb4bc; --acento-texto:#0d1a1c; --nuevo:#eea04e; --wa:#36a56a; --wa-texto:#04140b;
  --rotulo:rgb(18 24 27 / .9); --sombra:0 10px 30px rgb(0 0 0 / .45); color-scheme:dark } }
:root[data-theme="dark"]{
  --escena:#151b1e; --superficie:rgb(22 28 31 / .94); --texto:#e3eaeb; --suave:#9aa8ac; --linea:#2d393d;
  --acento:#5cb4bc; --acento-texto:#0d1a1c; --nuevo:#eea04e; --wa:#36a56a; --wa-texto:#04140b;
  --rotulo:rgb(18 24 27 / .9); --sombra:0 10px 30px rgb(0 0 0 / .45); color-scheme:dark }

html,body{height:100%}
body{margin:0;background:var(--escena);color:var(--texto);font:400 14px/1.45 var(--body);overflow:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.app{position:fixed;inset:0;overflow:hidden}
#lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button,a{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,.cortina-asa:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* rótulos de los espacios */
.rotulos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rotulo{position:absolute;left:0;top:0;display:grid;gap:1px;justify-items:center;padding:3px 8px 4px;border-radius:6px;
  background:var(--rotulo);border:1px solid var(--linea);white-space:nowrap;will-change:transform;transition:opacity .18s;opacity:0}
.rotulo b{font:700 11px/1.15 var(--display);font-stretch:80%;letter-spacing:.07em;text-transform:uppercase;color:var(--texto)}
.rotulo span{font:500 10.5px/1.2 var(--body);color:var(--suave);font-variant-numeric:tabular-nums}
.rotulo.lejos span{display:none}
.rotulo.es-nuevo{border-color:var(--nuevo)}
.punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--nuevo);margin-right:5px;vertical-align:1px}

/* barra superior */
.barra{position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top,0px));left:calc(14px + env(safe-area-inset-left,0px));
  right:calc(14px + env(safe-area-inset-right,0px));display:flex;align-items:center;gap:10px;pointer-events:none}
.barra>*{pointer-events:auto}
.marca{display:grid;line-height:1.05;text-decoration:none;color:var(--texto);background:var(--superficie);border:1px solid var(--linea);
  border-radius:10px;padding:7px 12px;box-shadow:var(--sombra);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.marca b{font:800 17px/1.05 var(--display);font-stretch:78%;letter-spacing:.01em}
.marca span{font:500 11px/1.2 var(--body);color:var(--suave)}
.versiones{margin-inline:auto;display:flex;gap:3px;padding:3px;background:var(--superficie);border:1px solid var(--linea);border-radius:11px;
  box-shadow:var(--sombra);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.versiones button{border:0;background:transparent;color:var(--texto);font:600 13.5px/1 var(--body);padding:9px 14px;border-radius:8px;cursor:pointer}
.versiones button:hover{background:color-mix(in srgb,var(--acento) 12%,transparent)}
.versiones button[aria-pressed="true"]{background:var(--acento);color:var(--acento-texto)}
.versiones button:disabled{opacity:.4;cursor:not-allowed}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:600 13.5px/1.1 var(--body);
  color:var(--wa-texto);background:var(--wa);border-radius:10px;padding:10px 14px;box-shadow:var(--sombra)}
.cta:hover{filter:brightness(1.06)}
.cta-panel{display:none}

/* panel */
.panel{position:absolute;z-index:2;top:calc(74px + env(safe-area-inset-top,0px));left:calc(14px + env(safe-area-inset-left,0px));
  width:min(300px,calc(100% - 28px));max-height:calc(100% - 88px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow:auto;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
.panel>*,.cuerpo>*{min-width:0}
.cab{display:grid;gap:6px}
.cab-fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ceja{font:600 11px/1.2 var(--display);font-stretch:85%;letter-spacing:.09em;text-transform:uppercase;color:var(--suave);margin:0}
h1{font:800 25px/1.05 var(--display);font-stretch:78%;letter-spacing:.005em;margin:0;text-wrap:balance}
.lead{margin:0;color:var(--suave);font-size:13.5px}
h2{font:700 11px/1.2 var(--display);font-stretch:85%;letter-spacing:.09em;text-transform:uppercase;color:var(--suave);margin:0 0 8px}
.btn-plegar,.btn-mas{flex:0 0 auto;font:600 12px/1 var(--body);color:var(--acento);background:transparent;border:1px solid var(--linea);
  border-radius:7px;padding:7px 10px;cursor:pointer}
.btn-plegar:hover,.btn-mas:hover{border-color:var(--acento)}
.btn-mas{display:none}
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.panel.plegado .cuerpo,.panel.plegado .lead{display:none}
.panel.plegado{gap:4px}
.btn-caminar{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font:700 15px/1 var(--body);
  color:var(--acento-texto);background:var(--acento);border:0;border-radius:10px;padding:13px 14px;cursor:pointer}
.btn-caminar:hover{filter:brightness(1.07)}
.btn-caminar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-caminar svg circle{fill:currentColor;stroke:none}
.vistas{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vistas button{font:500 13px/1.2 var(--body);color:var(--texto);background:transparent;border:1px solid var(--linea);border-radius:8px;
  padding:8px 9px;text-align:left;cursor:pointer;min-width:0}
.vistas button:hover{border-color:var(--acento)}
.vistas button[aria-pressed="true"]{border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento);color:var(--acento)}
.mas{display:grid;gap:16px}
.interruptores{display:grid;gap:9px}
.sw{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;cursor:pointer;font-size:13.5px}
.sw input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;background:var(--linea);position:relative;margin:0;cursor:pointer;transition:background .15s}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .3);transition:transform .15s}
.sw input:checked{background:var(--acento)}
.sw input:checked::after{transform:translateX(14px)}
.sw input:disabled{opacity:.45;cursor:not-allowed}
.sw:has(input:disabled){color:var(--suave)}
.muestra{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;background:var(--nuevo)}
.cambios{margin:0;padding:0 0 0 18px;display:grid;gap:5px;font-size:13px}
.cambios li::marker{color:var(--nuevo)}
.nota{margin:0;font-size:12px;color:var(--suave)}

/* cortina de comparación */
.cortina{position:absolute;inset:0;z-index:1;pointer-events:none;--corte:50%}
.cortina-linea{position:absolute;top:0;bottom:0;left:var(--corte);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / .25)}
.cortina-asa{position:absolute;top:50%;left:var(--corte);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;
  color:#1a2326;display:grid;place-items:center;box-shadow:0 2px 10px rgb(0 0 0 / .3);pointer-events:auto;cursor:ew-resize;touch-action:none}
.cortina-asa svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cortina-tag{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));padding:5px 11px;border-radius:999px;font:600 12.5px/1 var(--body);
  background:rgb(20 26 30 / .78);color:#fff}
.cortina-tag.izq{right:calc(100% - var(--corte) + 12px)} .cortina-tag.der{left:calc(var(--corte) + 12px)}

/* recorrido a pie */
.hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-cuarto{position:absolute;top:calc(74px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);margin:0;padding:7px 14px;
  border-radius:999px;background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra);
  font:700 13px/1 var(--display);font-stretch:85%;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.hud-cuarto:empty{display:none}
.btn-salir{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  font:600 14px/1 var(--body);color:var(--texto);background:var(--superficie);border:1px solid var(--linea);border-radius:10px;
  padding:12px 16px;box-shadow:var(--sombra);cursor:pointer}
.hud-ayuda{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));margin:0;max-width:min(560px,calc(100% - 260px));
  text-align:center;font-size:12.5px;color:var(--texto);background:var(--superficie);border:1px solid var(--linea);border-radius:10px;padding:8px 12px;pointer-events:none}
.hud-ayuda{transition:opacity .5s}
.hud-ayuda.oculta{opacity:0}
.joystick{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));width:120px;height:120px;
  border-radius:50%;background:rgb(20 26 30 / .28);border:2px solid rgb(255 255 255 / .7);touch-action:none}
.joystick-pomo{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgb(0 0 0 / .35);pointer-events:none}

/* carga y avisos */
.cargando{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:var(--suave);
  font:700 13px/1 var(--display);font-stretch:85%;letter-spacing:.1em;text-transform:uppercase}
.aviso{position:absolute;left:0;right:0;bottom:0;z-index:5;margin:0;padding:16px max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));
  background:var(--superficie);text-align:center;font-size:14px}

/* teléfono */
@media (max-width:760px){
  .barra{top:calc(8px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));gap:8px}
  .marca{padding:6px 10px} .marca b{font-size:15px} .marca span{font-size:10px}
  .versiones{margin-inline:auto 0} .versiones button{padding:8px 10px;font-size:13px}
  .cta-barra{display:none}
  .cta-panel{display:flex}
  .panel{top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));
    width:auto;max-height:55%;gap:12px;padding:12px}
  .cuerpo{gap:12px}
  h1{font-size:20px} .lead{display:none}
  .vistas{display:flex;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none}
  .vistas button{flex:0 0 auto;white-space:nowrap}
  .btn-mas{display:block}
  .mas{display:none} .panel.abierto .mas{display:grid}
  .hud-cuarto{top:calc(62px + env(safe-area-inset-top,0px))}
  .btn-salir{bottom:auto;top:calc(104px + env(safe-area-inset-top,0px));padding:10px 13px;font-size:13px}
  .hud-ayuda{left:auto;right:calc(12px + env(safe-area-inset-right,0px));transform:none;bottom:calc(26px + env(safe-area-inset-bottom,0px));
    max-width:calc(100% - 180px);font-size:12px;text-align:left}
  .cortina-tag{bottom:auto;top:calc(62px + env(safe-area-inset-top,0px))}
}
@media (max-width:380px){ .marca span{display:none} }
@media (prefers-reduced-motion: reduce){ .rotulo,.sw input,.sw input::after{transition:none} }