:root{
    --ink:#06070b; --graphite:#2a2f38;
    --chalk:#e9e5db; --chalk-dim:rgba(233,229,219,.5);
    --amber:#f2b25c; --hair:rgba(233,229,219,.16);
    --disp:"Mosvita",system-ui,sans-serif;
    --mono:"Mosvita",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--ink);color:var(--chalk);font-family:var(--disp);
    overflow:hidden;-webkit-font-smoothing:antialiased}
  canvas{display:block;position:fixed;inset:0;touch-action:none}
  .veil{position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.75) 100%)}
  .flash{position:fixed;inset:0;background:var(--chalk);opacity:0;pointer-events:none;z-index:8}

  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--chalk-dim)}

  .ui{position:fixed;inset:0;pointer-events:none;z-index:5;transition:opacity .5s}
  .ui > *{pointer-events:auto}
  .ui.hidden{opacity:0;pointer-events:none}

  header{position:absolute;top:26px;left:28px;max-width:44vw}
  header h1{margin:6px 0 0;font-size:clamp(20px,2.1vw,30px);font-weight:800;
    font-stretch:118%;letter-spacing:-.01em;line-height:1}
  header .sub{margin-top:8px;font-family:var(--mono);font-size:11px;
    color:var(--chalk-dim);letter-spacing:.08em}

  .modes{position:absolute;top:26px;right:28px;display:flex;border:1px solid var(--hair)}
  .modes button{appearance:none;background:transparent;border:0;border-right:1px solid var(--hair);
    color:var(--chalk-dim);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;padding:9px 14px;cursor:pointer;transition:.25s}
  .modes button:last-child{border-right:0}
  .modes button[aria-pressed="true"]{background:var(--chalk);color:var(--ink)}
  .modes button:hover{color:var(--chalk)}
  .modes button[aria-pressed="true"]:hover{color:var(--ink)}

  .index{position:absolute;right:28px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;width:186px;margin:0;padding:0}
  .index li{list-style:none}
  .index button{width:100%;display:flex;align-items:baseline;gap:12px;background:transparent;
    border:0;border-top:1px solid var(--hair);padding:11px 0 9px;color:var(--chalk-dim);
    cursor:pointer;text-align:left;transition:color .25s,padding .25s}
  .index button:last-child{border-bottom:1px solid var(--hair)}
  .index .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em}
  .index .t{font-size:13px;font-weight:600;font-stretch:105%}
  .index button:hover{color:var(--chalk);padding-left:6px}

  .titleblock{position:absolute;left:28px;bottom:26px;border:1px solid var(--hair);
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--chalk-dim);
    display:grid;grid-template-columns:auto auto}
  .titleblock div{padding:7px 12px;border-right:1px solid var(--hair)}
  .titleblock div:nth-child(even){border-right:0;color:var(--chalk)}
  .titleblock div:nth-child(-n+2){border-bottom:1px solid var(--hair)}

  .hint{position:absolute;bottom:30px;right:28px;font-family:var(--mono);font-size:10px;
    letter-spacing:.12em;color:rgba(233,229,219,.34);text-transform:uppercase}

  .spot{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
    background:var(--chalk);color:var(--ink);border:0;cursor:pointer;z-index:6;
    font-family:var(--disp);font-weight:800;font-size:19px;line-height:46px;text-align:center;
    padding:0;transition:transform .3s cubic-bezier(.2,.9,.25,1),background .3s,opacity .3s,box-shadow .3s;
    will-change:transform,left,top}
  .spot:hover{transform:scale(1.14);background:var(--amber)}
  .spot::after{content:"";position:absolute;inset:-9px;border-radius:50%;
    border:1px solid rgba(233,229,219,.28);opacity:0;transition:opacity .3s}
  .spot:hover::after{opacity:1}
  .spot.gone{opacity:0;pointer-events:none;transform:scale(2.2)}

  /* ---------- modal interior ---------- */
  .room{position:fixed;inset:0;z-index:10;background:rgba(6,7,11,.97);
    overflow-y:auto;overscroll-behavior:contain;opacity:0;pointer-events:none;
    transition:opacity .5s}
  .room.on{opacity:1;pointer-events:auto}
  .room-inner{max-width:1080px;margin:0 auto;padding:84px 28px 96px}

  .room-top{display:flex;justify-content:space-between;align-items:flex-end;
    gap:24px;padding-bottom:16px;border-bottom:1px solid var(--hair);margin-bottom:22px}
  .room-top h2{margin:6px 0 0;font-size:clamp(26px,3.4vw,42px);font-weight:800;
    font-stretch:118%;line-height:1;letter-spacing:-.02em}
  .closeX{flex:none;background:transparent;border:1px solid var(--hair);color:var(--chalk-dim);
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    padding:10px 16px;cursor:pointer;transition:.25s}
  .closeX:hover{border-color:var(--amber);color:var(--amber)}

  .hero{position:relative;aspect-ratio:16/9;background:#0c0e13;overflow:hidden}
  .hero img{width:100%;height:100%;object-fit:cover;display:block}
  .ph{position:absolute;inset:0;display:grid;place-content:center;gap:6px;justify-items:center;
    border:1px solid var(--hair);font-family:var(--mono);font-size:10px;letter-spacing:.18em;
    color:rgba(233,229,219,.3);text-transform:uppercase;background:
      repeating-linear-gradient(45deg,transparent 0 12px,rgba(233,229,219,.03) 12px 24px)}

  .thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
  .thumbs button{width:96px;aspect-ratio:4/3;padding:0;border:1px solid var(--hair);
    background:#0c0e13;cursor:pointer;overflow:hidden;opacity:.55;transition:.25s}
  .thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
  .thumbs button[aria-pressed="true"],.thumbs button:hover{opacity:1;border-color:var(--amber)}

  .amen{display:flex;flex-wrap:wrap;gap:30px;margin:34px 0 30px}
  .amen div{display:flex;flex-direction:column;align-items:center;gap:9px;width:60px}
  .amen svg{width:26px;height:26px;stroke:var(--chalk);fill:none;
    stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .amen span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--chalk-dim)}

  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
  .plan{position:relative;aspect-ratio:4/5;background:#0c0e13}
  .plan img{width:100%;height:100%;object-fit:contain;display:block}
  .copy p{margin:0 0 20px;font-size:14.5px;line-height:1.72;color:rgba(233,229,219,.76)}
  .copy dl{margin:26px 0 0;border-top:1px solid var(--hair);font-family:var(--mono);font-size:11px}
  .copy .row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
    border-bottom:1px solid var(--hair);letter-spacing:.06em}
  .copy dt{color:var(--chalk-dim);text-transform:uppercase}
  .copy dd{margin:0;text-align:right}

  .room-nav{display:flex;justify-content:space-between;gap:12px;margin-top:46px;
    padding-top:18px;border-top:1px solid var(--hair)}
  .room-nav button{background:transparent;border:0;color:var(--chalk-dim);cursor:pointer;
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    padding:6px 0;transition:.25s}
  .room-nav button:hover{color:var(--amber)}
  .room-nav button[disabled]{opacity:.25;cursor:default}

  :focus-visible{outline:2px solid var(--amber);outline-offset:3px}

  .boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--ink);z-index:20;
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--chalk-dim);
    text-transform:uppercase;transition:opacity .6s}
  .boot.off{opacity:0;pointer-events:none}

  @media (max-width:900px){
    header{max-width:70vw;top:18px;left:18px}
    .modes{top:18px;right:18px}
    .index{right:auto;left:0;top:auto;bottom:20px;transform:none;width:100%;
      flex-direction:row;padding:0 14px}
    .index button{flex-direction:column;gap:2px;align-items:center;border-top:0;
      border-bottom:1px solid var(--hair);padding:8px 4px}
    .index .t{display:none}
    .titleblock,.hint{display:none}
    .spot{width:38px;height:38px;line-height:38px;font-size:16px;margin:-19px 0 0 -19px}
    .room-inner{padding:26px 18px 60px}
    .cols{grid-template-columns:1fr;gap:28px}
    .amen{gap:20px;margin:26px 0 22px}
  }
  @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

@font-face{font-family:"Mosvita";src:url("../fonts/Mosvita-Regular.ttf") format("truetype");font-display:swap;font-weight:400}
@font-face{font-family:"Mosvita";src:url("../fonts/Mosvita-BlackExpanded.ttf") format("truetype");font-display:swap;font-weight:800}

body{background:#000}
.boot{background:#000}
.studio-brand{position:absolute;top:52px;left:50%;transform:translateX(-50%);max-width:none;display:flex;flex-direction:column;align-items:flex-start;z-index:9}
.studio-brand-trigger{display:flex;align-items:center;gap:.45rem;color:#fff;text-decoration:none;font-family:"Mosvita",sans-serif;font-size:1.5rem;font-weight:800;line-height:1}
.studio-brand-trigger img{display:block;width:auto;height:1.05em}
.studio-brand-menu{display:flex;flex-direction:column;align-items:flex-start;margin-left:calc(100% - 3.9rem);max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .38s ease,opacity .25s ease,margin-top .38s ease}
.studio-brand:hover .studio-brand-menu,.studio-brand:focus-within .studio-brand-menu{max-height:8rem;opacity:1;pointer-events:auto;margin-top:.65rem}
.studio-brand-menu a{color:#fff;text-decoration:none;font-size:1.5rem;font-weight:800;line-height:1.18;white-space:nowrap;transition:opacity .2s ease}
.studio-brand-menu a:hover,.studio-brand-menu a:focus-visible{opacity:.58}
.studio-fallback{position:fixed;inset:0;z-index:18;display:grid;place-items:center;background:#000;padding:clamp(70px,12vw,130px) 18px 90px}
.studio-fallback[hidden]{display:none}
.studio-fallback img{width:min(78vw,700px);height:min(68vh,720px);object-fit:contain;filter:contrast(1.08)}
.studio-fallback-copy{position:absolute;bottom:32px;text-align:center;color:rgba(255,255,255,.68);font-size:.72rem;letter-spacing:.08em}
.studio-fallback-copy button{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);padding:.7rem 1rem;font:inherit;cursor:pointer}
.room{visibility:hidden}
.room.on{visibility:visible}
.room[aria-hidden="true"]{pointer-events:none}

@media(max-width:900px){
  .studio-brand{top:34px;left:50%;transform:translateX(-50%)}
  .studio-brand-trigger,.studio-brand-menu a{font-size:1.15rem}
  .modes{top:92px;right:14px}
  .modes button{padding:8px 10px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.studio-brand-menu{transition:none}.spot:hover{transform:none}}
/* Fondo localizado: no modifica la posición de los demás controles. */
.studio-brand::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-34px;
  left:50%;
  width:clamp(250px,34vw,520px);
  height:130px;
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 35%,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.26) 68%,transparent 78%);
}
/* Alineación del desplegable con la palabra STUDIO. */
.studio-brand-trigger img{height:1em}
.studio-brand-menu{
  width:100%;
  margin-left:0;
  padding-left:6.45rem;
  align-items:flex-start;
}
.studio-brand-menu a{
  color:rgba(255,255,255,.62);
  opacity:1;
  line-height:1.08;
  transition:color .18s ease,transform .18s ease;
}
.studio-brand-menu a:hover,
.studio-brand-menu a:focus-visible{
  color:#fff;
  opacity:1;
  transform:translateX(3px);
}
@media(max-width:900px){
  .studio-brand-trigger,.studio-brand-menu a{font-size:1.5rem}
  .studio-brand-menu{padding-left:6.45rem}
}
/* Pulso secuencial de los puntos de acceso. */
.spot::before{
  content:"";
  position:absolute;
  inset:-2px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:50%;
  pointer-events:none;
  animation:studio-spot-pulse 2.4s cubic-bezier(.2,.7,.25,1) infinite;
  animation-delay:var(--pulse-delay,0s);
}
@keyframes studio-spot-pulse{
  0%,18%{transform:scale(.92);opacity:0}
  28%{opacity:.68}
  72%,100%{transform:scale(1.72);opacity:0}
}
@media(prefers-reduced-motion:reduce){.spot::before{animation:none;opacity:.32}}
/* Encabezado Studio alineado al borde superior izquierdo. */
.studio-brand{
  top:32px;
  left:28px;
  transform:none;
}
@media(max-width:900px){
  .studio-brand{
    top:22px;
    left:18px;
    transform:none;
  }
}
/* Composición específica para móviles. */
@media(max-width:900px){
  .studio-brand{
    top:24px;
    left:50%;
    transform:translateX(-50%);
  }
  .modes{
    top:auto;
    right:18px;
    bottom:82px;
  }
}
/* Perspectiva arquitectónica final de Vista 3D. */
canvas{transition:opacity .55s cubic-bezier(.22,1,.36,1)}
.studio-3d-reference{
  position:fixed;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  padding:clamp(18px,3vh,42px) clamp(10px,3vw,48px) clamp(12px,2vh,28px);
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.975) translateY(12px);
  filter:contrast(1.04);
  transition:opacity .58s ease,transform .8s cubic-bezier(.22,1,.36,1),visibility .58s;
}
body.studio-3d-active canvas{opacity:0}
body.studio-3d-active .studio-3d-reference{
  opacity:1;
  visibility:visible;
  transform:scale(1) translateY(0);
}
body.studio-3d-active .spot{opacity:0!important;pointer-events:none}
@media(max-width:900px){
  .studio-3d-reference{padding:86px 4px 70px}
}
@media(prefers-reduced-motion:reduce){
  canvas,.studio-3d-reference{transition:none}
}
/* Controles y cortes interactivos de la perspectiva 3D. */
.studio-3d-reference{
  width:min(calc((100vh - 36px)*.8034),calc(100vw - 36px));
  height:auto;
  aspect-ratio:1124/1399;
  padding:0;
  left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-48%) scale(.975);
  overflow:visible;
}
.studio-3d-reference>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
body.studio-3d-active .studio-3d-reference{transform:translate(-50%,-50%) scale(1)}
.studio-3d-divisions{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.studio-3d-divisions path{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.15;stroke-dasharray:8 10;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(255,255,255,.16))}
.studio-3d-level{
  position:absolute;left:var(--x);top:var(--y);z-index:3;
  width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;
  border:0;border-radius:50%;background:#fff;color:#050505;
  font-family:"Mosvita",sans-serif;font-size:19px;font-weight:800;line-height:46px;text-align:center;
  cursor:pointer;pointer-events:auto;box-shadow:0 0 0 1px rgba(255,255,255,.25);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
.studio-3d-level::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(255,255,255,.26);border-radius:50%;animation:studio-spot-pulse 2.4s ease-out infinite}
.studio-3d-level:hover,.studio-3d-level:focus-visible{transform:scale(1.12);background:var(--amber);box-shadow:0 0 24px rgba(242,178,92,.3)}
@media(max-width:900px){
  .studio-3d-reference{width:min(calc((100vh - 150px)*.8034),calc(100vw - 8px))}
  .studio-3d-level{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:16px;line-height:38px}
}
@media(prefers-reduced-motion:reduce){.studio-3d-level::after{animation:none}}
/* Áreas vectoriales sensibles por nivel. */
.studio-3d-areas polygon{fill:transparent;stroke:transparent}
.studio-3d-cuts{display:none}
body.studio-3d-active .studio-3d-reference{pointer-events:auto}
.studio-3d-reference>img,.studio-3d-divisions{pointer-events:none}
svg.studio-3d-color-level{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
svg.studio-3d-color-level image{mix-blend-mode:screen}
body:has(.studio-3d-level[data-studio-3d-level="1"]:is(:hover,:focus-visible)) [data-studio-3d-color="1"],
body:has(.studio-3d-level[data-studio-3d-level="2"]:is(:hover,:focus-visible)) [data-studio-3d-color="2"],
body:has(.studio-3d-level[data-studio-3d-level="3"]:is(:hover,:focus-visible)) [data-studio-3d-color="3"],
body:has(.studio-3d-level[data-studio-3d-level="4"]:is(:hover,:focus-visible)) [data-studio-3d-color="4"],
body:has(.studio-3d-level[data-studio-3d-level="5"]:is(:hover,:focus-visible)) [data-studio-3d-color="5"]{opacity:.96}
/* Entrada cinematográfica desde el plano 3D hacia cada espacio. */
.studio-3d-reference{transform-origin:var(--entry-x,50%) var(--entry-y,50%)}
body.studio-3d-active.studio-3d-entering .studio-3d-reference{
  transform:translate(-50%,-50%) scale(2.2);
  opacity:0;
  filter:contrast(1.22) brightness(1.28) blur(3px);
  transition:transform .72s cubic-bezier(.76,0,.24,1),opacity .3s ease .4s,filter .72s ease;
  pointer-events:none;
}
body.studio-3d-entering .studio-3d-level{opacity:0;transition:opacity .16s ease,transform .35s ease}
body.studio-3d-entering .flash{animation:studio-entry-exposure .72s cubic-bezier(.65,0,.35,1) both}
@keyframes studio-entry-exposure{
  0%,34%{opacity:0;background:#f2b25c}
  58%{opacity:.16;background:#f2b25c}
  78%{opacity:.42;background:#fff}
  100%{opacity:0;background:#000}
}
@media(max-width:900px){
  body.studio-3d-active.studio-3d-entering .studio-3d-reference{transform:translate(-50%,-50%) scale(1.85)}
}
@media(prefers-reduced-motion:reduce){
  body.studio-3d-active.studio-3d-entering .studio-3d-reference{transform:translate(-50%,-50%);opacity:1;filter:none}
  body.studio-3d-entering .flash{animation:none}
}
/* Controles de navegación en blanco para máximo contraste. */
.modes{border-color:rgba(255,255,255,.82)}
.modes button{
  color:#fff;
  border-right-color:rgba(255,255,255,.82);
}
.modes button:hover{color:#fff;background:rgba(255,255,255,.1)}
.modes button[aria-pressed="true"],
.modes button[aria-pressed="true"]:hover{background:#fff;color:#000}
.index button{
  color:#fff;
  border-top-color:rgba(255,255,255,.72);
}
.index button:last-child{border-bottom-color:rgba(255,255,255,.72)}
.index .n,.index .t{color:#fff;opacity:1}