/* =====================================================================
   ICÔNICO — tour 360 (interface)
   Escura, discreta, tudo por cima do panorama. Usada por /tour/<slug>/.
   ===================================================================== */
.t3, .t3 * { box-sizing: border-box; }
.t3 {
  --t3-tinta: #0F110C;
  --t3-claro: #F4F2EE;
  --t3-vidro: rgba(15, 17, 12, .72);
  --t3-borda: rgba(244, 242, 238, .22);
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: #1a1a1a; color: var(--t3-claro);
  font-family: 'Acumin Pro', system-ui, -apple-system, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.t3 [hidden] { display: none !important; }   /* as classes abaixo usam display, que ganharia do hidden */
.t3-canvas { position: absolute; inset: 0; display: block; cursor: grab; }
.t3.arrastando .t3-canvas { cursor: grabbing; }
.t3 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.t3 a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------- topo */
.t3-topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 26px; padding: 14px 20px;
  background: linear-gradient(rgba(15, 17, 12, .78), rgba(15, 17, 12, 0));
}
.t3-marca { font-family: 'Syncopate', system-ui, sans-serif; font-size: 15px; letter-spacing: .28em; }
/* logotipo do empreendimento: altura fixa, largura pelo desenho */
.t3-marca-img { height: 26px; width: auto; max-width: 180px; flex: none; display: block; }
.t3-nav { display: flex; gap: 4px; margin-right: auto; flex-wrap: wrap; }
.t3-nav button {
  padding: 7px 14px; border-radius: 999px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .82;
}
.t3-nav button:hover { opacity: 1; background: rgba(244, 242, 238, .12); }
.t3-nav button.on { background: var(--t3-claro); color: var(--t3-tinta); opacity: 1; }
.t3-ic {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--t3-borda);
  display: grid; place-items: center; font-size: 14px; line-height: 1; flex: none;
}
.t3-ic:hover { background: rgba(244, 242, 238, .14); }

/* ------------------------------------------- lista de ambientes */
.t3-lista {
  position: absolute; top: 60px; left: 20px; z-index: 22; width: 280px; max-height: 70%;
  overflow-y: auto; padding: 10px; border-radius: 16px;
  background: var(--t3-vidro); backdrop-filter: blur(14px); border: 1px solid var(--t3-borda);
}
.t3-lista b {
  display: block; padding: 10px 12px 4px; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; opacity: .5; font-weight: 700;
}
.t3-lista button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 14px;
}
.t3-lista button:hover { background: rgba(244, 242, 238, .12); }
.t3-lista button.on { background: var(--t3-claro); color: var(--t3-tinta); font-weight: 700; }

/* --------------------------------------------------------- hotspots */
.t3-hotspots { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.t3-hs {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  display: grid; place-items: center; gap: 7px; padding: 6px;
}
.t3-hs-seta {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(244, 242, 238, .9);
  background: rgba(15, 17, 12, .28); display: block; position: relative;
  transition: transform .18s, background .18s;
}
.t3-hs-seta::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px;
  border-right: 2px solid var(--t3-claro); border-bottom: 2px solid var(--t3-claro);
  transform: translateY(-2px) rotate(45deg);
}
.t3-hs-seta::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(244, 242, 238, .35); animation: t3pulso 2.4s ease-out infinite;
}
@keyframes t3pulso { 0% { transform: scale(.8); opacity: .8 } 70%, 100% { transform: scale(1.25); opacity: 0 } }
.t3-hs:hover .t3-hs-seta { transform: scale(1.12); background: rgba(15, 17, 12, .55); }
.t3-hs-rot {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; background: rgba(15, 17, 12, .6);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

/* ----------------------------------------------- planta no canto */
.t3-planta {
  position: absolute; right: 18px; bottom: 18px; z-index: 18; width: 260px;
  border-radius: 14px; overflow: hidden; background: var(--t3-vidro);
  backdrop-filter: blur(14px); border: 1px solid var(--t3-borda);
}
.t3-planta-cab {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.t3-planta-cab span { margin-right: auto; }
.t3-planta-cab .t3-ic { width: 26px; height: 26px; font-size: 16px; }
.t3-planta-img { position: relative; line-height: 0; }
.t3-planta-img img { width: 100%; display: block; }
.t3-planta.recolhida .t3-planta-img { display: none; }
.t3-pinos { position: absolute; inset: 0; }
.t3-pino {
  position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px;
  display: grid; place-items: center;
}
.t3-pino i {
  width: 12px; height: 12px; border-radius: 50%; background: var(--t3-claro);
  box-shadow: 0 0 0 2px rgba(15, 17, 12, .6); display: block; transition: transform .2s;
}
.t3-pino:hover i { transform: scale(1.35); }
.t3-pino.on i { background: #F2A93B; box-shadow: 0 0 0 3px rgba(242, 169, 59, .35); }
.t3-pino.on::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid #F2A93B; animation: t3pulso 2.4s ease-out infinite;
}

/* ------------------------------------------------ nome e carga */
.t3-nome {
  position: absolute; left: 20px; bottom: 22px; z-index: 15; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.t3-nome.some { animation: t3entra 4.5s ease forwards; }
@keyframes t3entra { 0% { opacity: 0; transform: translateY(6px) } 12%, 70% { opacity: 1; transform: none } 100% { opacity: .35 } }
.t3-carga {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 30; background: rgba(244, 242, 238, .15);
}
.t3-carga i { display: block; height: 100%; width: 40%; background: var(--t3-claro); animation: t3carga 1.1s infinite; }
@keyframes t3carga { 0% { margin-left: -40% } 100% { margin-left: 100% } }

/* ------------------------------------------------------ painéis */
.t3-painel {
  position: absolute; inset: 0; z-index: 25; overflow-y: auto; padding: 84px 28px 40px;
  background: rgba(15, 17, 12, .93); backdrop-filter: blur(10px);
}
.t3-painel h2 {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  margin: 0 0 18px; opacity: .6;
}
.t3-fechar { position: absolute; top: 18px; right: 20px; }
.t3-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.t3-grade figure { margin: 0; cursor: pointer; }
.t3-grade img { width: 100%; display: block; border-radius: 10px; background: #222; aspect-ratio: 4/3; object-fit: cover; }
.t3-grade-plantas img { object-fit: contain; background: #fff; }
.t3-grade figcaption { padding: 7px 2px; font-size: 12px; opacity: .7; }
.t3-texto { max-width: 62ch; font-size: 15px; line-height: 1.7; }
.t3-texto p { margin: 0 0 14px; }

/* --------------------------------------------------------- lupa */
.t3-lupa {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(10, 11, 8, .96); padding: 60px 70px;
}
.t3-lupa figure { margin: 0; max-height: 100%; display: flex; flex-direction: column; gap: 10px; }
.t3-lupa img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 6px; }
.t3-lupa figcaption { text-align: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.t3-seta {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  font-size: 30px; line-height: 1; opacity: .7;
}
.t3-seta:hover { opacity: 1; }
.t3-seta.ant { left: 14px; } .t3-seta.prox { right: 14px; }

/* ------------------------------------------------------- splash */
.t3-splash {
  position: absolute; inset: 0; z-index: 35; display: grid; place-items: center;
  background: rgba(15, 17, 12, .55); backdrop-filter: blur(3px);
  transition: opacity .6s, visibility .6s;
}
.t3-splash.saiu { opacity: 0; visibility: hidden; }
.t3-splash-cx {
  text-align: center; padding: 40px 46px; max-width: 460px;
  background: rgba(15, 17, 12, .55); border: 1px solid var(--t3-borda); border-radius: 22px;
  backdrop-filter: blur(16px);
}
.t3-splash-cx h1 { font-family: 'Syncopate', system-ui, sans-serif; font-size: 22px; letter-spacing: .16em; margin: 0 0 6px; }
.t3-splash-cx p { margin: 0 0 22px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.t3 .t3-btn {
  display: inline-block; padding: 13px 30px; border-radius: 999px; background: var(--t3-claro);
  color: var(--t3-tinta); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.t3 .t3-btn:hover { background: #fff; }
.t3-splash-links { display: flex; justify-content: center; gap: 6px; margin: 18px 0 20px; }
.t3-splash-links button, .t3-splash-links a {
  padding: 9px 16px; border: 1px solid var(--t3-borda); border-radius: 999px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85;
}
.t3-splash-links button:hover, .t3-splash-links a:hover { background: rgba(244, 242, 238, .12); opacity: 1; }
.t3-splash-cx small { display: block; font-size: 11px; line-height: 1.7; opacity: .5; }

/* --------------------------------------------------- assinatura */
.t3-assinatura {
  position: absolute; right: 18px; top: 62px; z-index: 16; display: flex; flex-direction: column;
  align-items: flex-end; line-height: 1.3; opacity: .55; transition: opacity .2s;
}
.t3-assinatura:hover { opacity: 1; }
.t3-assinatura span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.t3-assinatura b { font-family: 'Syncopate', system-ui, sans-serif; font-size: 10px; letter-spacing: .14em; }

/* ------------------------------------------------------ celular */
@media (max-width: 760px) {
  .t3-topo { gap: 8px; padding: 9px 10px; flex-wrap: nowrap; }
  .t3-marca { font-size: 10px; letter-spacing: .16em; flex: none; }
  .t3-marca-img { height: 18px; max-width: 110px; }
  .t3-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .t3-nav::-webkit-scrollbar { display: none; }
  .t3-nav button { padding: 6px 9px; font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
  .t3-ic { width: 30px; height: 30px; font-size: 12px; }
  .t3-vr { padding: 0 9px; font-size: 10px; }
  .t3-lista { left: 12px; right: 12px; width: auto; top: 54px; }
  .t3-planta { width: 150px; right: 10px; bottom: 10px; }
  .t3-planta-cab { font-size: 9px; padding: 6px 6px 6px 10px; }
  .t3-hs-seta { width: 38px; height: 38px; }
  .t3-hs-rot { font-size: 9px; padding: 3px 8px; }
  .t3-nome { font-size: 11px; left: 12px; bottom: 12px; }
  .t3-painel { padding: 70px 14px 30px; }
  .t3-lupa { padding: 50px 10px; }
  .t3-assinatura { top: auto; bottom: 10px; right: 10px; }
  .t3-splash-cx { padding: 28px 22px; margin: 0 14px; }
}

/* --------------------------------------------- giroscópio e óculos */
.t3-ic.on { background: var(--t3-claro); color: var(--t3-tinta); }
.t3-vr { width: auto; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; }