:root{
  --bg:#edf2f7;
  --ink:#1f2b3a;
  --muted:#6a7a8d;
  --line:rgba(33,49,73,.10);
  --shadow:0 18px 42px rgba(15,23,42,.12);
  --soft-shadow:0 10px 24px rgba(15,23,42,.09);
  --left-col:620px;
  --accent:#cb1f2f;
  --accent-soft:rgba(203,31,47,.18);
  --hall-h:calc(100dvh - 28px);
  --door-speed:420ms;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f8fafc,#ebf1f6);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;
  background:
    repeating-linear-gradient(0deg, rgba(38,56,82,.03) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(38,56,82,.02) 0 1px, transparent 1px 18px);
}
.app-shell{
  height:100dvh;
  display:grid;
  grid-template-columns:var(--left-col) minmax(0,1fr);
  gap:14px;
  padding:14px;
}
.elevator-side,.content-side{min-width:0;min-height:0}
.hall-card,.content-topbar,.content-viewport{
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}
.hall-card{
  --hall-side-tone: rgba(85,100,122,.12);
  --hall-side-glow: rgba(255,255,255,.06);
  --hall-plinth-top: rgba(83,69,52,.16);
  --hall-plinth-bottom: rgba(88,72,54,.34);
  height:var(--hall-h);
  border-radius:30px;
  overflow:hidden;
  position:relative;
  padding:18px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(236,242,248,.88));
}
.hall-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:
    linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 18%),
    linear-gradient(90deg, var(--hall-side-tone) 0 12px, var(--hall-side-glow) 12px calc(100% - 12px), var(--hall-side-tone) calc(100% - 12px) 100%),
    linear-gradient(180deg, transparent 0 calc(100% - 66px), var(--hall-plinth-top) calc(100% - 66px) calc(100% - 54px), var(--hall-plinth-bottom) calc(100% - 54px) 100%);
}
.hall-floor-7{
  --hall-side-tone: rgba(82,132,101,.14);
  --hall-side-glow: rgba(255,255,255,.08);
  --hall-plinth-top: rgba(66,112,84,.16);
  --hall-plinth-bottom: rgba(58,98,73,.30);
  background:linear-gradient(180deg,#f1fbf4,#d9efdf);
}
.hall-floor-6{
  --hall-side-tone: rgba(118,136,170,.13);
  --hall-side-glow: rgba(255,255,255,.08);
  --hall-plinth-top: rgba(105,124,160,.14);
  --hall-plinth-bottom: rgba(97,115,148,.28);
  background:linear-gradient(180deg,#f4f9ff,#dde7f6);
}
.hall-floor-5{
  --hall-side-tone: rgba(134,112,84,.13);
  --hall-side-glow: rgba(255,255,255,.07);
  --hall-plinth-top: rgba(114,92,67,.16);
  --hall-plinth-bottom: rgba(104,80,58,.32);
  background:linear-gradient(180deg,#faf7f2,#ebe0d0);
}
.hall-floor-4{
  --hall-side-tone: rgba(155,128,69,.13);
  --hall-side-glow: rgba(255,255,255,.07);
  --hall-plinth-top: rgba(129,102,48,.16);
  --hall-plinth-bottom: rgba(118,90,40,.32);
  background:linear-gradient(180deg,#fff9ee,#f7e6b8);
}
.hall-floor-3{
  --hall-side-tone: rgba(86,124,104,.13);
  --hall-side-glow: rgba(255,255,255,.07);
  --hall-plinth-top: rgba(70,109,86,.16);
  --hall-plinth-bottom: rgba(62,100,78,.31);
  background:linear-gradient(180deg,#effbf6,#dcf3e7);
}
.hall-floor-2{
  --hall-side-tone: rgba(166,136,58,.14);
  --hall-side-glow: rgba(255,255,255,.08);
  --hall-plinth-top: rgba(140,112,42,.16);
  --hall-plinth-bottom: rgba(124,96,34,.31);
  background:linear-gradient(180deg,#fff8e8,#f2dfad);
}
.hall-floor-1{
  --hall-side-tone: rgba(145,117,94,.13);
  --hall-side-glow: rgba(255,255,255,.07);
  --hall-plinth-top: rgba(122,95,72,.16);
  --hall-plinth-bottom: rgba(108,83,61,.32);
  background:linear-gradient(180deg,#fff8f2,#f6e9dd);
}
.hall-floor-t{
  --hall-side-tone: rgba(96,112,136,.13);
  --hall-side-glow: rgba(255,255,255,.08);
  --hall-plinth-top: rgba(84,99,121,.15);
  --hall-plinth-bottom: rgba(78,92,112,.31);
  background:linear-gradient(180deg,#f3f7fc,#dfe7f1);
}
.hall-badge{
  position:relative;z-index:2;align-self:flex-start;
  padding:10px 14px;border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(33,49,73,.08);
  box-shadow:var(--soft-shadow);
}
.hall-badge span{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800}
.hall-badge strong{display:block;margin-top:4px;font-size:1.05rem}
.elevator-zone{
  position:relative;z-index:2;
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 185px;
  gap:18px;
  align-items:stretch;
  padding-top:14px;
}
.shaft-wrap{
  position:relative;
  min-height:0;
  border-radius:30px;
  padding:30px 26px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, #c8d0da 0%, #aeb8c4 10%, #dbe2ea 11%, #c3ccd7 52%, #aab5c1 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(39,52,70,.16),
    inset 0 0 0 1px rgba(44,58,76,.08);
}

.shaft-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(58,72,90,.08) 0 2px,
      transparent 2px 56px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 18%,
      rgba(0,0,0,.03) 50%,
      rgba(255,255,255,.06) 82%,
      rgba(255,255,255,.18) 100%
    );
  opacity:.9;
}

.shaft-wrap::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:22px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0 36px,
      rgba(0,0,0,.025) 36px 37px
    );
  box-shadow:
    inset 0 0 0 1px rgba(68,82,102,.08),
    inset 0 18px 22px rgba(255,255,255,.10),
    inset 0 -18px 24px rgba(0,0,0,.05);
  opacity:.85;
}

.shaft-rail{
  position:absolute;
  top:18px;
  bottom:18px;
  width:14px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #6f7b89 0%,
      #d8e0e8 22%,
      #9ea9b6 48%,
      #eef3f7 52%,
      #8a96a3 78%,
      #697482 100%
    );
  box-shadow:
    inset 1px 0 1px rgba(255,255,255,.45),
    inset -1px 0 1px rgba(0,0,0,.12),
    0 0 0 1px rgba(49,62,80,.08);
  opacity:.82;
}

.shaft-rail.left{ left:14px; }
.shaft-rail.right{ right:14px; }

.shaft-rail::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 18%, rgba(0,0,0,.08) 100%);
  opacity:.8;
}

.elevator-machine-top{
  position:absolute;
  top:12px;
  left:34px;
  right:34px;
  height:26px;
  border-radius:999px;
  background:
    linear-gradient(180deg, #e7edf3 0%, #b6c0cb 38%, #8f9aa8 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(0,0,0,.10),
    0 4px 10px rgba(26,38,54,.10);
}

.elevator-machine-top::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(90,102,118,.15), rgba(255,255,255,.45), rgba(90,102,118,.15));
}

.elevator-machine-top::after{
  content:"";
  position:absolute;
  top:6px;
  left:22%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#7f8b99;
  box-shadow:
    48px 0 0 #7f8b99,
    96px 0 0 #7f8b99,
    144px 0 0 #7f8b99,
    192px 0 0 #7f8b99;
  opacity:.7;
}
.elevator-cabin{
  position:relative;
  width:min(100%, 368px);
  aspect-ratio: 1 / 1.58;
  align-self:center;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(70,78,92,.18);
  background:linear-gradient(180deg,#efe6d8 0%,#ddcfbb 44%,#c8b394 100%);
  box-shadow:inset 0 8px 26px rgba(93,74,50,.11),0 24px 34px rgba(26,36,52,.12);
}
.elevator-cabin{
  position:relative;
  z-index:2;
}
.shaft-wrap .elevator-cabin::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:30px;
  z-index:-1;
  background:radial-gradient(circle at center, rgba(0,0,0,.12), rgba(0,0,0,0) 70%);
  filter:blur(10px);
}
.elevator-cabin::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 22%,rgba(0,0,0,.05) 100%), repeating-linear-gradient(90deg, rgba(114,93,66,.06) 0 3px, transparent 3px 24px);
}
.cabin-indicator{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:8;
  min-width:98px;padding:8px 14px;border-radius:999px;text-align:center;
  color:#f1f6ff;background:linear-gradient(180deg,#18273d,#0f1828);box-shadow:0 10px 22px rgba(10,18,32,.24);
}
.cabin-indicator span{display:block;font-size:.62rem;letter-spacing:.22em;opacity:.72}
.cabin-indicator strong{display:block;margin-top:2px;font-size:1.15rem;letter-spacing:.20em}
.cabin-glow{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:78%;height:28%;pointer-events:none;background:radial-gradient(circle, rgba(255,248,213,.98) 0%, rgba(255,221,124,.55) 28%, rgba(255,221,124,.18) 48%, rgba(255,221,124,0) 72%);filter:blur(9px)}
.person-stage{
  position:absolute;left:20px;right:20px;top:76px;bottom:22px;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
}
.person-stage img{
  width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain;
  user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 14px 18px rgba(49,34,24,.20));
}
.door{
  position:absolute;top:0;bottom:0;width:50%;z-index:5;transition:transform var(--door-speed) cubic-bezier(.28,.74,.24,1);
  background:linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,.08) 12%, rgba(41,52,70,.04) 100%), linear-gradient(180deg,#cad1db,#aeb8c7 24%,#d2d9e3 25%,#bbc4d2 53%,#ced4de 54%,#a4adbb 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.86), inset 1px 0 0 rgba(56,69,89,.08);
}
.door::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.62)}
.door-left{left:0}.door-left::before{right:12px}
.door-right{right:0}.door-right::before{left:12px}
.elevator-side.open .door-left{transform:translateX(-84%)}
.elevator-side.open .door-right{transform:translateX(84%)}
.cabin-floor{position:absolute;left:0;right:0;bottom:0;height:15%;z-index:1;background:linear-gradient(180deg,#936d46,#725333)}
.cabin-floor::before{content:"";position:absolute;inset:0;opacity:.16;background:repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 18px)}
.call-panel{
  min-height:0;height:100%;
  border-radius:24px;padding:14px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(239,244,249,.90));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.call-panel-top small{display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.20em;font-size:.70rem;color:#7c8ba0;font-weight:800}
.call-panel-top h2{margin:0 0 14px;font-size:1rem;line-height:1.2}
.button-list{display:flex;flex-direction:column;gap:12px;min-height:0;padding:3px 2px}
.floor-call{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:9px 8px;border-radius:18px;border:1px solid rgba(32,49,73,.08);background:rgba(255,255,255,.72);overflow:visible}
.floor-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  border-radius:50%;
  border:2px solid rgba(55,68,92,.16);
  background:linear-gradient(180deg,#ffffff,#dde4ed 58%,#cdd6e2 100%);
  background-clip:padding-box;
  color:#23344f;
  font-size:1rem;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.95), inset 0 -3px 5px rgba(91,104,124,.14), 0 8px 16px rgba(33,45,67,.10);
  transition:transform .15s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  -webkit-appearance:none;
  appearance:none;
  overflow:visible;
  vertical-align:middle;
}
.floor-btn::after{
  content:"";position:absolute;inset:8px;border-radius:50%;border:2px solid transparent;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.75);
}
.floor-btn:hover{transform:translateY(-1px)}
.floor-btn.waiting,.floor-btn.active{border-color:rgba(203,31,47,.22)}
.floor-btn.waiting::after,.floor-btn.active::after{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft), inset 0 1px 2px rgba(255,255,255,.65)}
.floor-btn.active{color:var(--accent)}
.floor-call-text{font-size:.90rem;font-weight:700;color:#314156}
.content-side{height:var(--hall-h);display:flex;flex-direction:column;gap:14px}
.content-topbar{padding:18px 22px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,247,251,.88));display:flex;justify-content:space-between;align-items:center;gap:16px}
.content-topbar h1{margin:0;font-size:clamp(1.45rem,2vw,2rem);letter-spacing:-.04em}.content-topbar p{margin:.2rem 0 0;color:var(--muted)}
.topbar-floor-display{min-width:110px;padding:10px 14px;border-radius:20px;text-align:center;color:#e8f1ff;background:linear-gradient(180deg,#192740,#0f1728);box-shadow:0 14px 26px rgba(12,20,36,.16)}
.topbar-floor-display span{display:block;font-size:.70rem;letter-spacing:.14em;text-transform:uppercase;opacity:.74}.topbar-floor-display strong{display:block;margin-top:4px;font-size:1.55rem;letter-spacing:.12em}
.content-viewport{flex:1;min-height:0;overflow:hidden;border-radius:30px;background:rgba(255,255,255,.32)}
.content-track{height:100%;transition:transform 1200ms cubic-bezier(.26,.73,.26,1);will-change:transform}
.floor{height:100%;padding:24px;position:relative;overflow:auto}
.floor::before,.floor::after{content:"";position:absolute;inset:0;pointer-events:none}.floor::before{z-index:-2}.floor::after{z-index:-1}
.floor-7::before{background:linear-gradient(180deg,rgba(248,252,255,.52),rgba(255,255,255,.06)), linear-gradient(135deg,#eef7ff,#dbeaff)}
.floor-7::after{background:linear-gradient(135deg,rgba(6,17,24,.16),transparent 35%,rgba(255,255,255,.12) 80%)}
.floor-6::before{background:linear-gradient(135deg,#f7fbff,#edf4fb 55%,#f6faff)}
.floor-5::before{background:linear-gradient(135deg,#fbf5ec,#efe1ce 55%,#f8f0e5)}
.floor-4::before{background:linear-gradient(135deg,#fff9ef,#f3e7cb 54%,#fcf4e2)}
.floor-3::before{background:linear-gradient(135deg,#eefbf6,#e1f5eb 52%,#f4fbf7)}
.floor-2::before{background:linear-gradient(135deg,#f4f8ff,#e7eefb 54%,#f5f8ff)}
.floor-1::before{background:linear-gradient(135deg,#fff8f4,#f8ece6 48%,#f7efe8)}
.floor-t::before{background:linear-gradient(135deg,#f8fafc,#edf2f8 48%,#eef3f8)}
.kicker{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:800;color:#63758e}
.floor-head h2,.floor-hero h2{margin:.3rem 0 .45rem;font-size:clamp(1.7rem,3.1vw,3rem);letter-spacing:-.04em}
.floor-head p,.floor-hero p{max-width:860px;margin:0;color:#617187;line-height:1.6}
.floor-hero{max-width:760px;padding:26px 28px;border-radius:28px;background:rgba(255,255,255,.24)}
.floor-hero.glass{border:1px solid rgba(255,255,255,.35);box-shadow:var(--soft-shadow);backdrop-filter:blur(8px)}
.center-hero{margin:auto;text-align:center;background:none;border:none;box-shadow:none;backdrop-filter:none}.center-hero h2{font-size:clamp(3rem,8vw,6.4rem);line-height:.94}.center-hero p{margin-top:10px;font-size:clamp(1rem,2vw,1.2rem)}

@media (max-width:1180px){:root{--left-col:570px}}
@media (max-width:980px){
  body{overflow:auto}
  .app-shell{height:auto;min-height:100vh;grid-template-columns:1fr}
  .hall-card,.content-side{height:auto;min-height:auto}
  .elevator-zone{grid-template-columns:minmax(0,1fr) 185px}
  .cabin-indicator{display:none !important}
}
@media (max-width:760px){
  .app-shell{padding:10px;gap:10px}
  .elevator-zone{grid-template-columns:1fr;gap:12px}
  .hall-card,.content-topbar,.content-viewport,.call-panel{border-radius:22px}
  .hall-card{padding:12px;height:auto;min-height:unset}
  .shaft-wrap{padding:18px 12px;min-height:470px}
  .elevator-cabin{width:min(100%,300px)}
  .content-side{height:auto;min-height:62vh}
  .content-topbar{padding:14px 16px}
  .content-topbar h1{font-size:1.2rem}
  .content-topbar p{font-size:.82rem}
  .topbar-floor-display{min-width:78px;padding:8px 10px}
  .topbar-floor-display strong{font-size:1.15rem}
  .floor{padding:16px}
}


.about-scroll.dragging{
  cursor:grabbing;
  user-select:none;
}






/* ===== TÉRREO / HALL ===== */

.floor-t{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, #d9dee4 0%, #cfd6de 22%, #c7ced7 23%, #c5ccd4 68%, #afb8c2 69%, #9ea8b4 100%);
}

.floor-t::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(
      90deg,
      rgba(80,92,108,.05) 0 2px,
      transparent 2px 56px
    );
  pointer-events:none;
}

.floor-t::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:28%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.10)),
    repeating-linear-gradient(
      90deg,
      #7a858f 0 2px,
      #8c98a3 2px 68px
    );
  box-shadow:inset 0 10px 24px rgba(255,255,255,.08);
  pointer-events:none;
}

.hall-scene{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hall-terreo{
  isolation:isolate;
}

.hall-light{
  position:absolute;
  top:5.5%;
  left:50%;
  transform:translateX(-50%);
  width:min(560px, 64%);
  height:170px;
  border-radius:999px;
  background:
    radial-gradient(circle, rgba(255,228,135,.42) 0%, rgba(255,220,120,.22) 32%, rgba(255,216,112,.08) 52%, rgba(255,216,112,0) 72%);
  filter:blur(8px);
  pointer-events:none;
  z-index:1;
}

.hall-light::before{
  content:"";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  width:180px;
  height:20px;
  border-radius:999px;
  background:linear-gradient(180deg, #fff6bf, #d6c676);
  box-shadow:
    0 0 18px rgba(255,224,120,.28),
    0 2px 5px rgba(0,0,0,.10);
}

.hall-light::after{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:min(520px, 58vw);
  height:360px;
  background:radial-gradient(ellipse at top, rgba(255,230,145,.18) 0%, rgba(255,223,130,.10) 24%, rgba(255,223,130,.04) 46%, rgba(255,223,130,0) 72%);
  clip-path:polygon(38% 0, 62% 0, 80% 100%, 20% 100%);
  filter:blur(6px);
}

.hall-light-flicker{
  animation:hallFlicker 10s infinite;
}

.terreo-frame-wrap{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:6%;
}

.terreo-frame-shadow{
  position:absolute;
  inset:auto;
  width:min(760px, 72vw);
  height:min(290px, 42vh);
  border-radius:18px;
  background:rgba(0,0,0,.18);
  filter:blur(22px);
  transform:translateY(14px) scale(.96);
  z-index:0;
}

.terreo-frame{
  position:relative;
  z-index:1;
  width:min(760px, 72vw);
  min-height:min(260px, 36vh);
  padding:18px;
  border-radius:8px;
  background:
    linear-gradient(135deg, #7d6647 0%, #b0936d 26%, #d6ba8e 45%, #9e825f 64%, #6b563f 100%);
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 2px 2px rgba(255,255,255,.24),
    inset 0 -2px 4px rgba(0,0,0,.18);
}

.terreo-frame::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,245,215,.28);
  border-radius:6px;
  pointer-events:none;
}

.terreo-frame-inner{
  min-height:calc(min(280px, 40vh) - 36px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  border-radius:3px;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f2f6fa 100%);
  box-shadow:
    inset 0 0 0 1px rgba(78,92,112,.12),
    inset 0 20px 30px rgba(255,255,255,.55),
    inset 0 -14px 28px rgba(0,0,0,.035);
  padding:28px 34px;
  position:relative;
}

.terreo-frame-inner h2{
  margin:0;
  font-size:clamp(2.3rem, 5.4vw, 5.4rem);
  line-height:.95;
  letter-spacing:-.06em;
  font-weight:800;
  color:#1d2632;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

.terreo-frame-inner p{
  margin:14px 0 0;
  font-size:clamp(.95rem, 1.45vw, 1.28rem);
  color:#5d6a7a;
  font-weight:500;
}















@keyframes hallFlicker{
  0%, 95%, 100%{
    opacity:1;
    filter:blur(8px) brightness(1);
  }
  96%{
    opacity:.46;
    filter:blur(8px) brightness(.62);
  }
  97%{
    opacity:1;
    filter:blur(8px) brightness(1);
  }
}
  88%{
    opacity:.42;
    filter:blur(8px) brightness(.6);
  }
  90%{
    opacity:.88;
    filter:blur(8px) brightness(.92);
  }
  92%{
    opacity:.28;
    filter:blur(8px) brightness(.5);
  }
  94%{
    opacity:1;
    filter:blur(8px) brightness(1);
  }
}

.floor-t .hall-scene,
.floor-t .terreo-frame,
.floor-t .terreo-frame-inner{
  animation:hallDim 10s infinite;
}

@keyframes hallDim{
  0%, 95%, 100%{
    filter:brightness(1);
  }
  96%{
    filter:brightness(.84);
  }
  97%{
    filter:brightness(1);
  }
}
  88%{
    filter:brightness(.86);
  }
  92%{
    filter:brightness(.78);
  }
  94%{
    filter:brightness(1);
  }
}

@media (max-width: 900px){
  .terreo-frame,
  .terreo-frame-shadow{
    width:min(86vw, 640px);
  }

  .terreo-objeto{
    left:7%;
    bottom:5%;
    transform:rotate(-8deg) scale(.92);
  }
}

@media (max-width: 640px){
  .hall-light{
    width:78%;
    top:7%;
  }

  .hall-light::before{
    width:130px;
    height:16px;
  }

  .hall-light::after{
    width:72vw;
    height:280px;
  }

  .terreo-frame,
  .terreo-frame-shadow{
    width:min(90vw, 520px);
    min-height:220px;
  }

  .terreo-frame-inner{
    min-height:184px;
    padding:22px 18px;
  }

  .terreo-objeto{
    width:58px;
    left:8%;
    bottom:6%;
  }

  .quadro-acessorios{
    right:calc(50% - min(760px, 72vw)/2 + 22px);
    bottom:calc(50% - min(280px, 40vh)/2 - 8px);
    transform:scale(.92);
  }
}
.floor-t.hall-flick-once{
  filter:brightness(.93);
}




/* ===== ANDAR 1 / BIBLIOTECA MINIMALISTA ===== */

.about-floor{
  overflow:hidden;
  background:
    linear-gradient(180deg,#d9ddd9 0%, #d3d8d4 52%, #bab6ae 53%, #a49d93 100%);
}

.about-floor::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(
      90deg,
      rgba(72,82,88,.035) 0 2px,
      transparent 2px 68px
    );
  pointer-events:none;
}

.about-floor::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:24%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.12)),
    repeating-linear-gradient(
      90deg,
      #7a7064 0 3px,
      #928677 3px 82px
    );
  pointer-events:none;
}

.about-library{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  padding:22px 22px 18px;
}

.about-title-panel{
  position:absolute;
  top:20px;
  left:20px;
  z-index:5;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.about-title-panel h2{
  margin:.25rem 0 0;
  font-size:clamp(1.8rem,3vw,2.8rem);
  letter-spacing:-.04em;
}

.about-scroll{
  position:absolute;
  inset:104px 210px 26px 18px;
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 8px 10px;
  scroll-behavior:smooth;
}

.about-scroll::-webkit-scrollbar{
  height:10px;
}
.about-scroll::-webkit-scrollbar-thumb{
  background:rgba(62,68,74,.20);
  border-radius:999px;
}

.library-zone{
  flex:0 0 auto;
  width:min(900px, 82vw);
  height:100%;
  padding:16px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(4px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.library-zone-formation{
  width:min(980px, 88vw);
}

.zone-label{
  display:inline-flex;
  align-self:flex-start;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(58,67,73,.10);
  border:1px solid rgba(58,67,73,.08);
  color:#4d565d;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
  font-weight:800;
}

.library-shelves{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  padding:18px 16px 20px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(82,73,61,.05), rgba(82,73,61,.02));
  overflow:hidden;
}

.library-shelves::before,
.library-shelves::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:14px;
  border-radius:8px;
  background:linear-gradient(180deg,#8c8174,#6d6255);
  box-shadow:0 5px 12px rgba(0,0,0,.12);
}

.library-shelves::before{
  top:44%;
}
.library-shelves::after{
  bottom:16px;
}

.shelf-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  gap:10px;
  min-height:44%;
}

.shelf-row-top{
  padding-top:6px;
}

.shelf-row-bottom{
  padding-bottom:18px;
}

.knowledge-box{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:12px 12px 14px;
  border-radius:10px 10px 5px 5px;
  color:#f5f7fa;
  box-shadow:
    0 10px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
}

.knowledge-box span{
  display:block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:.86;
  font-weight:800;
}

.knowledge-box strong{
  display:block;
  margin-top:8px;
  font-size:.98rem;
  line-height:1.15;
  font-weight:700;
}

.knowledge-box small{
  display:block;
  margin-top:8px;
  font-size:.82rem;
  line-height:1.3;
  color:rgba(245,247,250,.86);
}

/* tamanhos formação */
.kb-tall{ width:140px; height:220px; }
.kb-wide{ width:210px; height:150px; border-radius:12px; }
.kb-mid{ width:138px; height:178px; }
.kb-large{ width:220px; height:210px; border-radius:12px; }
.kb-midwide{ width:190px; height:166px; }
.kb-exp{ width:160px; height:136px; border-radius:12px; }
.kb-exp-lg{ width:210px; height:146px; border-radius:12px; }

/* paleta */
.tone-slate{
  background:linear-gradient(180deg,#667585,#475361);
}
.tone-stone{
  background:linear-gradient(180deg,#9b8e80,#74685d);
}
.tone-blue{
  background:linear-gradient(180deg,#5f7286,#3d4d5d);
}
.tone-charcoal{
  background:linear-gradient(180deg,#5e646b,#3d4248);
}
.tone-sand{
  background:linear-gradient(180deg,#a39686,#7f7264);
}
.tone-smoke{
  background:linear-gradient(180deg,#7f878d,#5a6268);
}

/* mesa discreta */
.library-desk{
  position:absolute;
  right:26px;
  bottom:18px;
  width:178px;
  height:176px;
  z-index:4;
}

.desk-surface{
  position:absolute;
  left:0;
  right:0;
  bottom:58px;
  height:16px;
  border-radius:8px;
  background:linear-gradient(180deg,#7d7163,#5e5348);
  box-shadow:0 6px 14px rgba(0,0,0,.14);
}

.desk-leg{
  position:absolute;
  bottom:0;
  width:10px;
  height:62px;
  border-radius:6px;
  background:linear-gradient(180deg,#5f5347,#43392f);
}
.desk-leg.left{ left:16px; }
.desk-leg.right{ right:16px; }

.desk-laptop{
  position:absolute;
  right:16px;
  bottom:78px;
  width:76px;
  height:48px;
  border-radius:8px;
  background:linear-gradient(180deg,#515962,#31373e);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.04);
}
.desk-laptop::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-8px;
  width:82px;
  height:8px;
  border-radius:6px;
  background:#8f9397;
}

.desk-lamp{
  position:absolute;
  left:18px;
  bottom:88px;
  width:12px;
  height:48px;
  border-radius:8px;
  background:linear-gradient(180deg,#61656b,#3a3f45);
  transform:rotate(20deg);
}
.desk-lamp::before{
  content:"";
  position:absolute;
  top:-9px;
  left:-7px;
  width:28px;
  height:13px;
  border-radius:8px;
  background:linear-gradient(180deg,#ddd3a2,#aa9c62);
  box-shadow:0 0 14px rgba(244,223,138,.14);
}

.desk-stack{
  position:absolute;
  left:58px;
  bottom:76px;
  width:36px;
  height:24px;
  border-radius:4px;
  background:
    linear-gradient(180deg,#5f7286 0 33%, #8f8477 33% 66%, #646b72 66% 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* responsivo */
@media (max-width: 900px){
  .about-scroll{
    inset:110px 14px 104px 14px;
  }

  .library-zone,
  .library-zone-formation{
    width:min(92vw, 980px);
  }

  .library-desk{
    right:10px;
    bottom:8px;
    transform:scale(.88);
    transform-origin:bottom right;
  }
}

@media (max-width: 640px){
  .about-library{
    padding:14px 10px 12px;
  }

  .about-title-panel{
    top:10px;
    left:10px;
    padding:12px 14px;
  }

  .about-scroll{
    inset:100px 4px 98px 4px;
  }

  .library-zone{
    padding:12px;
    border-radius:22px;
  }

  .library-shelves{
    padding:14px 10px 18px;
  }

  .knowledge-box strong{
    font-size:.9rem;
  }

  .knowledge-box small{
    font-size:.76rem;
  }

  .kb-tall{ width:128px; height:198px; }
  .kb-wide{ width:188px; height:138px; }
  .kb-mid{ width:126px; height:166px; }
  .kb-large{ width:198px; height:190px; }
  .kb-midwide{ width:174px; height:154px; }
  .kb-exp{ width:146px; height:128px; }
  .kb-exp-lg{ width:188px; height:138px; }

  .library-desk{
    transform:scale(.70);
    right:0;
    bottom:0;
  }
}

/* ===== REFINO DO QUADRO DO TÉRREO ===== */

.terreo-frame-wrap{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2.8%;
}

.terreo-frame-shadow{
  transform:translateY(18px) scale(.965);
}

.terreo-frame{
  min-height:min(252px, 34vh);
  border-radius:10px;
  background:
    linear-gradient(135deg, #7b6241 0%, #a98a63 24%, #d4b286 46%, #987856 66%, #65503c 100%);
}

.school-board{
  position:relative;
}

.school-board::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:10px;
  height:12px;
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#8d7251,#624b35);
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}

.terreo-frame-inner.board-surface{
  min-height:calc(min(252px, 34vh) - 36px);
  border-radius:4px;
  padding:20px 26px 52px;
  justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
  box-shadow:
    inset 0 0 0 1px rgba(92,106,124,.14),
    inset 0 0 0 10px rgba(255,255,255,.30),
    inset 0 18px 24px rgba(255,255,255,.55),
    inset 0 -10px 20px rgba(0,0,0,.03);
}

.terreo-frame-inner.board-surface::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 24%),
    repeating-linear-gradient(180deg, transparent 0 42px, rgba(89,123,176,.035) 42px 43px);
}

.board-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  cursor:crosshair;
}

.board-content{
  position:relative;
  z-index:2;
  pointer-events:none;
}

.terreo-frame-inner h2{
  margin:0;
  font-family:"Cabin Sketch", system-ui, sans-serif;
  font-size:clamp(2.5rem, 5.5vw, 5.8rem);
  line-height:.96;
  letter-spacing:-.03em;
  font-weight:700;
  color:#111111;
  text-shadow:none;
}

.terreo-frame-inner p{
  margin:14px 0 0;
  font-family:"Patrick Hand", "Comic Sans MS", cursive;
  font-size:clamp(1rem, 1.55vw, 1.34rem);
  line-height:1.22;
  letter-spacing:.01em;
  color:#203957;
  font-weight:400;
}

.board-tools{
  position:absolute;
  right:26px;
  bottom:12px;
  z-index:3;
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.board-eraser{
  position:relative;
  width:44px;
  height:16px;
  border-radius:6px;
  background:linear-gradient(180deg,#4b5968,#2d3640);
  box-shadow:0 5px 12px rgba(0,0,0,.18);
  transform:rotate(-7deg) translateY(-1px);
}

.board-eraser::before{
  content:"";
  position:absolute;
  inset:3px 5px 5px;
  border-radius:4px;
  background:linear-gradient(180deg,#d7dde6,#aeb8c4);
}

.board-marker{
  appearance:none;
  border:none;
  width:54px;
  height:8px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
  cursor:pointer;
  padding:0;
  background:transparent;
  position:relative;
  transform-origin:center;
  transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease;
  opacity:.86;
}

.board-marker:hover,
.board-marker.active{
  opacity:1;
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

.board-marker::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
}

.marker-black{
  transform:rotate(-10deg);
}
.marker-black:hover,
.marker-black.active{
  transform:translateY(-1px) rotate(-10deg);
}
.marker-black::before{
  background:linear-gradient(90deg,#eef3f8 0 66%, #313f51 66% 82%, #111111 82% 100%);
}

.marker-blue{
  transform:rotate(-4deg);
}
.marker-blue:hover,
.marker-blue.active{
  transform:translateY(-1px) rotate(-4deg);
}
.marker-blue::before{
  background:linear-gradient(90deg,#eef3f8 0 66%, #31445a 66% 82%, #1f5fa9 82% 100%);
}

.marker-red{
  transform:rotate(4deg);
}
.marker-red:hover,
.marker-red.active{
  transform:translateY(-1px) rotate(4deg);
}
.marker-red::before{
  background:linear-gradient(90deg,#eef3f8 0 66%, #5e2a2a 66% 82%, #c62828 82% 100%);
}

@media (max-width: 900px){
  .terreo-frame-wrap{
    padding-top:4.2%;
  }
}

@media (max-width: 640px){
  .terreo-frame-wrap{
    padding-top:5.5%;
  }

  .board-tools{
    right:16px;
    bottom:10px;
    gap:8px;
    transform:scale(.92);
    transform-origin:bottom right;
  }

  .terreo-frame-inner.board-surface{
    padding:16px 14px 48px;
  }
}

.board-eraser:hover{transform:rotate(-7deg) translateY(-2px);box-shadow:0 7px 14px rgba(0,0,0,.22)}


.floor-btn.current{
  border-color:rgba(203,31,47,.24);
  color:var(--accent);
}
.floor-btn.current::after{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft), inset 0 1px 2px rgba(255,255,255,.65);
}


/* ===== Ajuste intermediário: a partir de ~980px, botoeira em 2 colunas ao lado do elevador ===== */
@media (max-width: 980px){
  .hall-card{
    padding:12px;
  }

  .elevator-zone{
    grid-template-columns:minmax(0,1fr) 210px !important;
    gap:12px;
    align-items:stretch;
  }

  .shaft-wrap{
    min-height:340px;
    padding:18px 16px 14px;
  }

  .elevator-cabin{
    width:min(100%, 250px) !important;
  }

  .call-panel{
    padding:12px 10px;
    border-radius:22px;
    overflow:hidden;
  }

  .call-panel-top h2{
    font-size:.95rem;
    margin:0 0 10px;
  }

  .button-list{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    align-content:start;
    padding:0;
  }

  .floor-call{
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    justify-items:center;
    align-content:start;
    text-align:center;
    padding:8px 6px;
    border-radius:16px;
  }

  .floor-btn{
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    font-size:.86rem;
  }

  .floor-call-text{
    font-size:.64rem;
    line-height:1.18;
    font-weight:700;
  }
}

@media (max-width: 760px){
  .elevator-zone{
    grid-template-columns:minmax(0,1fr) 170px !important;
  }

  .elevator-cabin{
    width:min(100%, 220px) !important;
  }
}


/* ===== Correção de altura do conteúdo no layout quebrado/mobile ===== */
@media (max-width: 980px){
  .content-side{
    height:auto !important;
    min-height:0 !important;
  }

  .content-viewport{
    flex:0 0 auto !important;
    height:80dvh !important;
    min-height:80dvh !important;
    max-height:80dvh !important;
    overflow:hidden !important;
  }

  .content-track{
    height:100% !important;
  }

  .floor{
    height:100% !important;
    min-height:0 !important;
    overflow:auto !important;
    align-content:start;
  }

  .showcase-shell,
  .lessons-shell,
  .contact-shell,
  .rooftop-shell,
  .about-library,
  .wall-library-scene,
  .wall-columns,
  .contact-grid{
    height:auto !important;
    min-height:0 !important;
  }
}

@media (max-width: 760px){
  .content-viewport{
    height:80dvh !important;
    min-height:80dvh !important;
    max-height:80dvh !important;
  }

  .shaft-wrap{
    min-height:320px !important;
  }

  .showcase-card,
  .fun-floor .showcase-card,
  .showcase-grid-links .showcase-card,
  .showcase-grid-fun .showcase-card{
    min-height:unset !important;
    height:auto !important;
  }

  .rooftop-floor,
  .rooftop-shell,
  .rooftop-scene{
    height:100% !important;
    min-height:0 !important;
  }

  .rooftop-scene{
    background-size:cover !important;
    background-position:center center !important;
  }
}


.board-expand-toggle{
  position:absolute;
  top:14px;
  right:14px;
  z-index:4;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.86);
  color:#223146;
  font-size:1.1rem;
  font-weight:800;
  box-shadow:0 8px 18px rgba(31,43,58,.12), inset 0 0 0 1px rgba(53,72,99,.10);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.board-expand-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(31,43,58,.16), inset 0 0 0 1px rgba(53,72,99,.10);
}
.hall-terreo.board-expanded .terreo-frame-wrap{
  position:absolute;
  inset:16px;
  padding-top:0;
  align-items:stretch;
}
.hall-terreo.board-expanded .terreo-frame-shadow{
  width:auto;
  height:auto;
  inset:14px;
  transform:none;
  border-radius:28px;
}
.hall-terreo.board-expanded .terreo-frame{
  width:100%;
  min-height:100%;
  height:100%;
  padding:14px;
  border-radius:24px;
}
.hall-terreo.board-expanded .terreo-frame-inner.board-surface{
  min-height:100%;
  height:100%;
  padding:24px 26px 58px;
  border-radius:16px;
}
.hall-terreo.board-expanded .board-expand-toggle{
  transform:rotate(180deg);
}
@media (max-width: 640px){
  .board-expand-toggle{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
    font-size:1rem;
  }
  .hall-terreo.board-expanded .terreo-frame-wrap{
    inset:8px;
  }
  .hall-terreo.board-expanded .terreo-frame{
    padding:10px;
    border-radius:18px;
  }
  .hall-terreo.board-expanded .terreo-frame-inner.board-surface{
    padding:16px 14px 50px;
    border-radius:12px;
  }
}

/* ===== Correção final: personagem do elevador não encolhe no mobile ===== */
@media (max-width: 760px){
  .shaft-wrap{
    min-height: 430px !important;
    overflow: hidden !important;
  }

  .elevator-cabin{
    width: 300px !important;
    max-width: none !important;
    min-width: 300px !important;
  }

  .person-stage{
    left: 16px !important;
    right: 16px !important;
    top: 76px !important;
    bottom: 22px !important;
  }

  .person-stage img{
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    max-height: 100% !important;
  }
}

@media (max-width: 420px){
  .shaft-wrap{
    min-height: 410px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .elevator-cabin{
    width: 290px !important;
    min-width: 290px !important;
  }
}