/* ==========================================================================
   EcoMAPP — Tour 360° : palco, abas, cenas e ferramentas
   (estrutura e proporções do MAPP, cores do EcoMAPP)
   ========================================================================== */
.t3-sec{padding:80px 0 90px !important;background:#0F300C !important}
.t3-sec .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- palco do tour ---------- */
.t3-palco{position:relative;width:100%;aspect-ratio:16/9;min-height:420px;
  border-radius:22px;overflow:hidden;background:#08190B;
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.t3-view{position:absolute;inset:0}
#tourCanvas{display:block;width:100% !important;height:100% !important;cursor:grab;touch-action:none}
#tourCanvas.arrastando{cursor:grabbing}

/* topo: nome da cena + ferramentas */
.t3-topo{position:absolute;top:16px;left:16px;right:16px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.t3-badge{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;
  background:rgba(8,26,8,.74);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;color:#EAF5E4;font-size:13px;font-weight:700;pointer-events:auto}
.t3-badge svg{width:16px;height:16px;stroke:#8FD36A}
.t3-badge b{font-weight:800;color:#fff}
.t3-tools{display:flex;gap:8px;pointer-events:auto}
.t3-tool{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(8,26,8,.74);backdrop-filter:blur(10px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.18s}
.t3-tool:hover{background:#8FD36A;color:#123A0F;border-color:#8FD36A}
.t3-tool svg{width:19px;height:19px}

/* rodapé: dica + contador */
.t3-rodape{position:absolute;bottom:14px;left:16px;right:16px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.t3-dica{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;
  background:rgba(8,26,8,.74);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;color:#DCEDD3;font-size:12px;font-weight:600}
.t3-dica svg{width:15px;height:15px;stroke:#8FD36A}
.t3-cont{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:32px;
  padding:0 12px;background:rgba(8,26,8,.74);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  color:#DCEDD3;font-size:12px;font-weight:700}

/* carregando */
.t3-carregando{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  background:#08190B;transition:opacity .5s}
.t3-carregando.saiu{opacity:0;pointer-events:none}
.t3-ring{width:44px;height:44px;border-radius:50%;border:3px solid rgba(143,211,106,.25);
  border-top-color:#8FD36A;animation:giraT .85s linear infinite}
@keyframes giraT{to{transform:rotate(360deg)}}

/* ---------- abas por ambiente ---------- */
.t3-abas{display:flex;gap:10px;justify-content:center;margin:26px 0 18px;flex-wrap:wrap}
.t3-aba{height:42px;padding:0 24px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#DCEDD3;font-family:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;transition:.18s}
.t3-aba:hover{background:rgba(255,255,255,.14);color:#fff}
.t3-aba.on{background:#8FD36A;color:#123A0F;border-color:#8FD36A;
  box-shadow:0 8px 20px rgba(143,211,106,.35)}

/* ---------- lista de cenas ---------- */
.t3-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.t3-cena{position:relative;padding:0;border:0;background:#122B12;border-radius:16px;
  overflow:hidden;cursor:pointer;text-align:left;transition:transform .22s,box-shadow .22s;
  border:2px solid transparent}
.t3-cena img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .5s}
.t3-cena:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.t3-cena:hover img{transform:scale(1.06)}
.t3-cena.on{border-color:#8FD36A;box-shadow:0 0 0 3px rgba(143,211,106,.3)}
.t3-ct{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;
  background:linear-gradient(transparent,rgba(6,22,7,.92));display:block}
.t3-ct strong{display:block;font-size:14.5px;font-weight:800;color:#fff}
.t3-ct em{display:block;font-style:normal;font-size:11.5px;color:#B6D9A6;margin-top:3px;
  line-height:1.4}
.t3-cena:not(.on){opacity:.62;filter:saturate(.85)}
.t3-cena.on{opacity:1}

/* esconde cenas de outro grupo */
.t3-cena[hidden]{display:none !important}

@media(max-width:980px){
  .t3-sec{padding:56px 0 70px !important}
  .t3-lista{grid-template-columns:repeat(2,1fr);gap:12px}
  .t3-palco{aspect-ratio:4/3;min-height:340px;border-radius:18px}
  .t3-dica{display:none}
}
@media(max-width:600px){
  .t3-lista{grid-template-columns:1fr}
  .t3-palco{aspect-ratio:1/1;min-height:300px;border-radius:16px}
  .t3-badge{height:34px;padding:0 13px;font-size:12px}
  .t3-tool{width:38px;height:38px}
  .t3-aba{height:38px;padding:0 18px;font-size:12.5px}
  .t3-ct strong{font-size:13.5px}
}

/* grade de cenas em 4 colunas (igual ao MAPP) */
.t3-lista{grid-template-columns:repeat(4,1fr) !important;gap:14px !important}
@media(max-width:1100px){.t3-lista{grid-template-columns:repeat(3,1fr) !important}}
@media(max-width:820px){.t3-lista{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:520px){.t3-lista{grid-template-columns:1fr !important}}

/* selo 360 nas cenas panoramicas */
.t3-360{position:absolute;top:10px;right:10px;background:rgba(143,211,106,.95);
  color:#123A0F;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px}

/* hero do tour: deixa o texto sempre legivel */
.phero .pb-bg img{object-fit:cover}
.phero::after{background:linear-gradient(100deg,rgba(8,26,8,.94) 0%,rgba(8,26,8,.82) 45%,rgba(8,26,8,.45) 100%) !important}
.phero h1{color:#fff !important;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.phero p{color:#DCEDD3 !important}
.phero .eyebrow{color:#B4EE8E !important}

/* CTA final em areia com botao verde escuro */
.sec.sec-sand .center h2.title{color:#163D12 !important}
.sec.sec-sand .btn-blue.big{background:#163D12 !important;color:#fff !important;
  padding:16px 34px !important;border-radius:999px !important;font-weight:800 !important;
  text-decoration:none !important;display:inline-block !important;font-size:15px !important}
.sec.sec-sand .btn-blue.big:hover{background:#2F7D22 !important}