:root{
  --ink:#17281f;--ink-2:#3f5a4b;--leaf:#2f5a46;--paper:rgba(246,250,240,.86);--line:rgba(47,90,70,.22);--acc:#f26a0f;
  --bg0:#eef4e8;--bg1:#cfdfc8;
  --sans:Archivo,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg1);scroll-behavior:auto}
body{margin:0;color:var(--ink);font:500 17px/1.5 var(--sans);background:radial-gradient(120% 90% at 50% 18%,var(--bg0),var(--bg1) 72%) fixed;overflow-x:hidden}
body.mirror,body.visit{overflow:hidden}
a{color:inherit}
:is(a,button,input,canvas):focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.room-site-header{position:fixed;z-index:20;top:14px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:6px 16px;border-radius:18px;background:#080c0df0;backdrop-filter:blur(14px);color:#e2e7df}
.room-site-brand{display:flex;align-items:center;min-height:44px;color:#e82f43;font:800 29px/1 var(--sans);letter-spacing:-1.8px;text-decoration:none}
.room-site-header nav{display:flex;align-items:center;gap:18px}
.room-site-header nav a{display:flex;align-items:center;min-height:44px;font:500 12px var(--mono);text-transform:uppercase;text-decoration:none}
.room-site-header nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.detail-close{position:fixed;z-index:18;top:90px;left:24px;width:46px;height:46px;border:1px solid #ffffff80;border-radius:50%;background:#163b2ae8;color:#fff;font-size:27px;cursor:pointer}
.cola-banner{position:fixed;z-index:18;left:24px;bottom:240px;width:280px;max-width:calc(100vw - 32px);margin:0;padding:15px 18px;border-radius:12px;background:#b81e29;color:#fff;font:700 18px/1.25 var(--sans);box-shadow:0 10px 30px #0003;text-align:center;pointer-events:none}
.cola-info{position:fixed;z-index:18;left:24px;bottom:88px;width:280px;max-width:calc(100vw - 48px);padding:17px 20px;border-radius:16px;background:var(--paper);backdrop-filter:blur(12px);box-shadow:0 8px 24px #17281f20;color:var(--ink)}
.cola-info[hidden]{display:none!important}
.cola-info p{margin:0 0 5px;font:700 13px/1.2 var(--sans)}
.cola-info strong{display:block;font:700 25px/1.2 var(--sans);letter-spacing:-.035em}
.cola-info strong span{font:500 11px/1.3 var(--mono);letter-spacing:0;white-space:nowrap}
.cola-info a{display:flex;align-items:center;min-height:44px;margin-top:6px;font:600 12px/1.3 var(--sans);text-underline-offset:4px}
@media(max-width:700px){.cola-info{left:18px;right:18px;bottom:138px;width:auto;max-width:none;padding:13px 17px}.cola-info strong{font-size:23px}.cola-info a{min-height:36px;margin-top:2px}.cola-banner{top:148px;bottom:auto;left:50%;transform:translateX(-50%);width:max-content;font-size:16px;padding:12px 16px}}

#stage{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;touch-action:pan-y;cursor:default}
body.mirror #stage,body.visit #stage{touch-action:none}
.status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:500 14px var(--mono);color:var(--ink-2);z-index:2}
.status[hidden]{display:none}

/* Una pantalla: sin barras, todo flota sobre la escena */
.hud-room{position:fixed;inset:0;pointer-events:none;z-index:3;transition:opacity .35s}
body.scrolled .hud-room,body.mirror .hud-room{opacity:0;visibility:hidden}
body.visit .title,body.visit .scroll-cue,body.visit .room-actions,body.visit .mark{display:none}
.mark{color:#fff;text-shadow:0 1px 10px rgba(23,40,31,.5);position:absolute;left:clamp(16px,2.4vw,32px);top:clamp(14px,2.2vw,28px);pointer-events:auto;font:800 17px var(--sans);letter-spacing:-.01em;text-decoration:none}
.title{position:absolute;left:clamp(16px,2.4vw,32px);bottom:clamp(14px,2vw,24px);margin:0;font:800 clamp(26px,3.2vw,46px)/.98 var(--sans);letter-spacing:-.03em;max-width:7ch;color:#fff;text-shadow:0 2px 14px rgba(23,40,31,.55)}
.scroll-cue{position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(14px,2vw,24px);margin:0;padding:6px 10px;border-radius:999px;background:var(--paper);font:500 12px var(--mono);color:var(--ink-2)}
.room-actions{position:absolute;right:clamp(16px,2.4vw,32px);top:clamp(14px,2.2vw,28px);display:flex;gap:8px;pointer-events:auto}
.pill{border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:600 15px var(--sans);padding:10px 18px;min-height:44px;cursor:pointer;box-shadow:0 6px 20px rgba(23,40,31,.16)}
.pill.solid{background:var(--ink);color:#fff}
.pill[hidden]{display:none}
.spot[hidden]{display:none}
.visit-ui{position:fixed;inset:0;z-index:4;pointer-events:none}
.visit-ui[hidden]{display:none}
.visit-ui .pill{position:absolute;right:clamp(14px,3vw,32px);top:clamp(14px,3vh,28px);pointer-events:auto}
.visit-hint{position:absolute;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:var(--paper);font:500 13px var(--sans);text-align:center;width:max-content;max-width:calc(100vw - 32px)}
.scroll-cue span{display:inline-block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(5px)}}

.spot{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border:0;border-radius:999px;background:var(--paper);backdrop-filter:blur(8px);color:var(--ink);font:600 14px var(--sans);cursor:pointer;box-shadow:0 6px 20px rgba(23,40,31,.16);white-space:nowrap;min-height:36px;will-change:transform}
.spot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(242,106,15,.5);animation:ping 2.2s ease-out infinite}
.spot:hover{background:#fff}
@keyframes ping{70%,100%{box-shadow:0 0 0 10px rgba(242,106,15,0)}}

/* El espejo */
.mirror-ui{position:fixed;inset:0;z-index:4;pointer-events:none}
.mirror-ui[hidden]{display:none}
.float{position:absolute;top:50%;transform:translateY(-50%);width:min(286px,26vw);max-height:90vh;overflow:auto;pointer-events:auto;background:var(--paper);backdrop-filter:blur(12px);padding:18px;border-radius:14px;box-shadow:0 14px 44px rgba(23,40,31,.2);animation:rise .4s ease both}
.float.left{left:clamp(14px,3.5vw,56px)}.float.right{right:clamp(14px,3.5vw,56px)}
@keyframes rise{from{opacity:0;margin-top:14px}}
.float h2{margin:16px 0 8px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.float h2:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:transparent;color:var(--ink);font:600 14px var(--sans);padding:7px 11px;border-radius:999px;cursor:pointer;min-height:36px}
.chip:hover{background:rgba(47,90,70,.09)}
.chip[aria-checked=true]{background:var(--leaf);border-color:var(--leaf);color:#fff}
.swatches{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.sw[aria-checked=true]{box-shadow:0 0 0 2.5px var(--leaf)}
.range{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 13px var(--sans);margin-top:12px}
.range input{width:60%;accent-color:var(--leaf)}
.mirror-top{position:absolute;left:clamp(14px,3.5vw,56px);top:88px;display:flex;gap:8px;pointer-events:auto}
.close{pointer-events:auto;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 15px var(--sans);padding:12px 22px;cursor:pointer;min-height:44px}

/* Tecnología: tarjetas que flotan junto al modelo que gira */
main{position:relative;z-index:2;pointer-events:none}
.sec{pointer-events:auto}
.spacer{height:170vh;pointer-events:none}
.sec{position:relative;width:min(470px,calc(100vw - 32px));margin:0 0 72vh;padding:26px 28px;background:var(--paper);backdrop-filter:blur(12px);border-radius:16px;box-shadow:0 18px 56px rgba(23,40,31,.16)}
.sec[data-side=left]{margin-left:clamp(16px,6vw,110px)}
.sec[data-side=right]{margin-left:auto;margin-right:clamp(16px,6vw,110px)}
.sec[data-side=center]{margin:0 auto 12vh;width:min(640px,calc(100vw - 32px));text-align:left}
.k{margin:0 0 10px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#0c7a4e}
.sec h2{margin:0 0 14px;font:800 clamp(27px,3vw,38px)/1.06 var(--sans);letter-spacing:-.022em}
.sec p{margin:0 0 12px}
.m{font:400 13px/1.55 var(--mono);color:var(--ink-2);margin-top:14px!important}
.styles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0 4px}
.style{border:1px solid var(--line);background:transparent;font:600 15px var(--sans);color:var(--ink);padding:11px;border-radius:10px;cursor:pointer;min-height:44px}
.style[aria-checked=true]{background:var(--leaf);color:#fff;border-color:var(--leaf)}
.gens{list-style:none;margin:6px 0 14px;padding:0}
.gens li{padding:10px 0;border-top:1px solid var(--line)}
.gens strong{display:block;font:700 15px var(--sans)}
.gens span{font-size:15px;color:var(--ink-2)}
.sec video{width:100%;display:block;border-radius:10px;background:#16231d;margin:6px 0 2px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--leaf);font:700 15px var(--sans);text-decoration:none;color:var(--leaf)}
.btn.solid{background:var(--acc);border-color:var(--acc);color:#1b0f06}
.fine{font-size:14px;color:var(--ink-2);margin:0!important}

@media (max-width:820px){
  body{font-size:16px}
  .sec,.sec[data-side]{margin:0 auto 60vh;width:calc(100vw - 32px);padding:20px}
  .spacer{height:150vh}
  .float{top:auto;bottom:12px;transform:none;left:12px!important;right:12px!important;width:auto;max-height:36vh;padding:14px;border-radius:12px}
  .float.left{display:none}.float.right{display:none}
  .float.on{display:block}
  .tabs{display:flex}
  .mirror-top{top:78px;left:12px}
  .close,.mirror-top .pill{padding:10px 14px;min-height:40px;font-size:14px}
  .title{font-size:26px}
  .scroll-cue{max-width:52vw;border-radius:12px;font-size:11px;text-align:right}
}
.m-tabs{display:none;position:absolute;left:12px;right:12px;bottom:calc(36vh + 20px);justify-content:center;gap:6px;pointer-events:auto}
.m-tabs button{border:0;border-radius:999px;background:var(--paper);font:600 14px var(--sans);padding:8px 14px;min-height:38px;color:var(--ink);cursor:pointer}
.m-tabs button[aria-selected=true]{background:var(--leaf);color:#fff}
@media (max-width:820px){.m-tabs{display:flex}}
@media (prefers-reduced-motion:reduce){.scroll-cue span,.spot::before{animation:none}}

/* Cámara libre y presentación desde la computadora. */
body{height:100dvh;overflow:hidden}
body.presentation{height:auto;min-height:100dvh;overflow-y:auto}
#stage{touch-action:none;height:100dvh}
body.presentation #stage{touch-action:pan-y;pointer-events:none}
.room-actions{max-width:calc(100vw - 120px);flex-wrap:wrap;justify-content:flex-end}
.zoom-controls{position:absolute;right:24px;bottom:68px;display:flex;gap:4px;pointer-events:auto;padding:4px;background:var(--paper);border-radius:999px;box-shadow:0 6px 24px #17281f22}
.zoom-controls button{border:0;background:transparent;border-radius:50%;width:44px;height:44px;font:500 26px var(--sans);color:var(--ink);cursor:pointer}
.zoom-controls button:hover{background:#fff}
.room-status{position:fixed;z-index:7;bottom:26px;left:50%;transform:translateX(-50%);background:#17281fec;color:#fff;border-radius:30px;padding:10px 20px;font-size:14px;pointer-events:none}
.room-status[hidden]{display:none}
.outfit-preset{width:100%;border:1px solid var(--leaf);border-radius:9px;padding:11px 8px;background:#e2eade;color:var(--ink);font:600 13px var(--sans);cursor:pointer}
body.presentation .hud-room{visibility:hidden;opacity:0}
#tec[hidden],.sec[hidden],.presentation-controls[hidden],.presentation-close[hidden]{display:none!important}
#tec{position:relative;pointer-events:auto;outline:none;touch-action:pan-y}
#tec .sec{position:relative;display:flex;align-items:center;min-height:110svh;width:100%;margin:0;padding:144px clamp(20px,5vw,100px) 94px;transform:none;background:none;box-shadow:none;backdrop-filter:none;overflow:visible;animation:none}
#tec .story-card{width:min(310px,31vw);padding:22px;border-radius:16px;background:var(--paper);backdrop-filter:blur(12px);box-shadow:0 18px 56px #17281f18;font-size:15px;line-height:1.5}
#tec .story-card h2{font-size:30px;margin-bottom:12px}
#tec .story-card .fine{font-size:11px;line-height:1.5;margin-top:15px!important}
#tec .sec-custom{min-height:240svh;align-items:flex-start}
#tec .sec-custom .story-card{position:sticky;top:calc(50svh - 110px)}
.look-name{font:500 12px var(--mono);margin:18px 0 8px!important}
.look-stops{display:flex;gap:5px}.look-stops i{height:3px;flex:1;background:var(--line);border-radius:2px}.look-stops i.active{background:var(--acc)}
#tec .contact-end{min-height:115svh;justify-content:center;padding:120px 24px 80px}
.presentation-close{position:fixed;top:88px;left:clamp(20px,5vw,100px);z-index:6}
.presentation-controls{position:fixed;z-index:6;left:clamp(20px,5vw,100px);bottom:22px;display:flex;align-items:center;gap:16px;padding:10px 15px;border-radius:99px;background:var(--paper);backdrop-filter:blur(12px);font:500 12px var(--mono);pointer-events:none}
.sec h2{font-size:clamp(25px,2.8vw,36px)}
@media(max-width:820px){
 .room-actions{max-width:calc(100vw - 88px);gap:5px;right:12px;top:12px}.room-actions .pill{padding:8px 12px;font-size:12px;min-height:36px}
 .zoom-controls{right:12px;bottom:78px}.scroll-cue{max-width:63vw}.mark{font-size:14px;top:20px}
 #tec .sec{padding:52svh 12px 84px;align-items:flex-start;min-height:105svh}
 #tec .story-card{width:min(310px,100%);padding:18px;background:rgba(246,250,240,.94);font-size:14px}
 #tec .story-card h2{font-size:26px}
 #tec .sec-custom{min-height:260svh}
 #tec .sec-custom .story-card{top:52svh}
 #tec .contact-end{padding:100px 12px 80px;align-items:center}
 .presentation-close{top:78px;left:12px}.presentation-controls{left:12px;bottom:16px;padding:8px 12px}
 .presentation-controls span:last-child{display:none}
 .room-site-header{top:8px;left:10px;right:10px;padding:4px 12px;gap:12px}
 .room-site-brand{font-size:23px}.room-site-header nav{gap:12px}.room-site-header nav a{font-size:12px}
 .room-status{max-width:90vw;white-space:nowrap;font-size:12px}
}

.routine-ui{position:fixed;left:22px;bottom:102px;z-index:3;width:246px;padding:12px 14px;background:var(--paper);backdrop-filter:blur(12px);border-radius:14px;box-shadow:0 8px 28px #17281f1c}
.routine-caption{margin:0 0 3px;font:500 9px var(--mono);letter-spacing:.13em;color:var(--ink-2)}
#routine-state{font:600 13px/1.3 var(--sans);margin:0 0 10px;min-height:17px}
.routine-controls{display:flex;gap:6px}
.routine-controls button,.routine-controls select{border:1px solid var(--line);border-radius:8px;padding:7px 8px;font:600 11px var(--sans);color:var(--ink);background:#f7faef;min-height:34px;cursor:pointer}
.routine-controls select{min-width:0;flex:1}
.routine-controls button[aria-pressed=true]{background:var(--leaf);color:white}
body.mirror .routine-ui,body.presentation .routine-ui,body.visit .routine-ui{display:none}
@media(max-width:820px){.routine-ui{left:12px;bottom:90px;width:225px;padding:10px 12px}.routine-controls button,.routine-controls select{font-size:10px;padding:6px}}

/* Descubrimiento: los objetos son la interfaz; no hay rótulos sobre el cuarto. */
.hud-room .mark,.hud-room .title,.hud-room .room-actions,.hud-room .scroll-cue,#spots,#routine-ui,#room-status{display:none!important}
.zoom-controls{bottom:82px;right:20px;box-shadow:none;background:rgba(246,250,240,.64)}
.discovery-tools{position:fixed;z-index:3;left:20px;bottom:20px;display:flex;gap:6px;opacity:.65;transition:opacity .2s}
.discovery-tools:hover,.discovery-tools:focus-within{opacity:1}
.discovery-tools button{display:grid;place-items:center;width:38px;height:38px;padding:9px;border:0;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer}
.discovery-tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.discovery-tools [data-playing=true] .play-symbol,.discovery-tools [data-playing=false] .pause-symbol{display:none}
body.mirror .discovery-tools,body.presentation .discovery-tools,body.visit .discovery-tools{display:none}
@media(max-width:820px){.zoom-controls{bottom:78px;right:14px}.discovery-tools{bottom:14px;left:14px}}