/* ════════════════════════════════════════════════════════════════════════════
   E-TECH Imersivo — interface por cima da cena 3D.
   A cor da marca (--brand) é trocada em tempo de execução pela cor do CRM.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --brand: #3d7bff;
  --brand-rgb: 61, 123, 255;
  --fundo: #04070d;
  --vidro: rgba(10, 18, 34, .72);
  --borda: rgba(255, 255, 255, .12);
  --txt: #eef3fb;
  --txt-2: #9fb0c8;
  --ok: #22c55e;
  --fonte-t: 'Sora', system-ui, sans-serif;
  --fonte: 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fundo); color: var(--txt); font: 400 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; }

.palco { position: fixed; inset: 0; touch-action: none; }
.palco canvas { display: block; width: 100%; height: 100%; outline: none; }

/* ── Topo ─────────────────────────────────────────────────────────────── */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; pointer-events: none; }
.topo > * { pointer-events: auto; }
/* Seletor Site padrão × Site interativo — igual ao do site principal */
.modo-site { display: flex; flex: none; padding: 4px; gap: 2px; border-radius: 999px; background: var(--vidro); border: 1px solid var(--borda); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modo-site a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--txt-2); transition: color .2s, background .2s; }
.modo-site a:hover { color: var(--txt); }
.modo-site a[aria-current="page"] { background: var(--brand); color: #fff; }
.marca { font: 800 17px/1 var(--fonte-t); letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.marca em { font-style: normal; font-weight: 600; color: color-mix(in srgb, var(--brand) 55%, #fff); }
.xr { margin-left: auto; display: flex; gap: 8px; }
.btn-xr { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--borda); background: var(--vidro); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none; transition: transform .15s, border-color .15s; }
.btn-xr:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb), .8); }
.btn-xr.cheio { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .25), transparent 60%), var(--brand); border-color: transparent; color: #fff; box-shadow: 0 10px 28px -10px rgba(var(--brand-rgb), .9); }
.btn-xr[hidden] { display: none; }

/* ── Painel de informações ────────────────────────────────────────────── */
.painel { position: fixed; z-index: 4; left: 16px; top: 76px; width: 340px; max-height: calc(100% - 170px); overflow: auto; padding: 20px; border-radius: 20px; background: var(--vidro); border: 1px solid var(--borda); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); animation: entrar .4s ease; }
.painel.trocando { animation: none; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
.painel h2 { margin: 0 0 6px; font: 700 21px/1.2 var(--fonte-t); letter-spacing: -.02em; }
.painel p { margin: 0 0 12px; color: var(--txt-2); }
.painel small { display: block; color: var(--txt-2); font-size: 12px; margin-top: 10px; }
.painel .etapa { display: inline-block; margin-bottom: 8px; font: 600 11px/1 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--brand) 55%, #fff); }
.painel ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.painel li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--borda); }
.painel li i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); flex: none; }
.acao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 0; background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; }
.acao:hover { filter: brightness(1.12); }

.modos { display: grid; gap: 6px; margin-bottom: 12px; }
.modos button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: rgba(255, 255, 255, .04); cursor: pointer; text-align: left; font-weight: 600; }
.modos button small { margin: 0; font-weight: 400; }
.modos button[aria-pressed="true"] { border-color: var(--brand); background: rgba(var(--brand-rgb), .22); }
.status-casa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-weight: 600; }
.status-casa b { font: 800 22px/1 var(--fonte-t); color: var(--ok); }
.legenda { display: flex; gap: 14px; margin-top: 8px; color: var(--txt-2); font-size: 12px; }
.legenda span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ok); }
.legenda span + span::before { background: #ef4444; }

.plano-det { padding: 14px; border-radius: 14px; background: rgba(var(--brand-rgb), .14); border: 1px solid rgba(var(--brand-rgb), .5); margin-bottom: 12px; }
.plano-det .vel { font: 800 34px/1 var(--fonte-t); }
.plano-det .vel span { font-size: 16px; font-weight: 600; margin-left: 4px; }
.plano-det .nome { color: color-mix(in srgb, var(--brand) 55%, #fff); font-weight: 600; margin: 4px 0 10px; }
.plano-det .preco { font: 700 22px/1 var(--fonte-t); margin-bottom: 10px; }
.plano-det .preco span { font: 400 13px var(--fonte); color: var(--txt-2); }
.plano-det ul { margin: 0; }
.plano-det li { padding: 6px 10px; font-size: 13px; }

/* Botão de recolher: só no celular */
.recolher { display: none; }

/* ── Paradas ──────────────────────────────────────────────────────────── */
.paradas { position: fixed; z-index: 5; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--vidro); border: 1px solid var(--borda); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.paradas button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 9px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--txt-2); transition: background .2s, color .2s; }
.paradas button b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 12px; }
.paradas button:hover { color: var(--txt); }
.paradas button[aria-current="true"] { background: var(--brand); color: #fff; }
.paradas button[aria-current="true"] b { background: rgba(255, 255, 255, .25); }

.dica { position: fixed; z-index: 3; right: 16px; bottom: max(22px, env(safe-area-inset-bottom)); margin: 0; font-size: 12px; color: var(--txt-2); text-shadow: 0 1px 6px #000; transition: opacity .6s; pointer-events: none; }
.dica.sumir { opacity: 0; }

/* ── Carregando / sem 3D ──────────────────────────────────────────────── */
.carregando, .sem-3d { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: var(--fundo); transition: opacity .6s; }
.carregando.sumir { opacity: 0; pointer-events: none; }
.carregando p { margin: 0; color: var(--txt-2); }
.anel { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--brand); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }
.sem-3d[hidden] { display: none; }
.sem-3d h1 { margin: 0; font: 700 24px/1.2 var(--fonte-t); }
.sem-3d p { margin: 0; max-width: 420px; color: var(--txt-2); }

/* ── Celular ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .marca { display: none; }
  .btn-xr { padding: 8px 12px; }
  .painel { left: 16px; right: 16px; top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px); width: auto; max-height: 40%; padding: 16px; }
  .painel h2 { font-size: 18px; }
  .painel p { font-size: 14px; margin-bottom: 10px; }
  .paradas { left: 16px; right: 16px; transform: none; justify-content: space-between; }
  .paradas button { flex: 1; justify-content: center; padding: 9px 6px; font-size: 12px; gap: 5px; }
  .paradas button b { display: none; }
  .dica { display: none; }
  .recolher { display: grid; place-items: center; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--borda); background: rgba(255, 255, 255, .06); cursor: pointer; }
  .recolher::before { content: ''; width: 9px; height: 9px; margin-top: 5px; border: solid currentColor; border-width: 2px 0 0 2px; transform: rotate(225deg); margin-top: -4px; }
  .painel.recolhido .recolher::before { transform: rotate(45deg); margin-top: 5px; }
  .painel.recolhido { padding-bottom: 12px; }
  .painel.recolhido > :not(.recolher):not(.etapa):not(h2) { display: none; }
  .painel.recolhido h2 { margin: 0; }
}
@media (max-width: 720px) {
  .modo-site a { padding: 7px 11px; font-size: 13px; }
}
@media (max-width: 400px) {
  .btn-xr span, .modo-site a span { display: none; }
  .modo-site a:last-child { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .painel, .anel { animation: none; }
}

.acao.secundaria { margin-top: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--borda); }
.acao:disabled { opacity: .4; cursor: default; filter: none; }
.painel h3 { margin: 0 0 6px; font: 700 16px/1.3 var(--fonte-t); }
.saiba { margin: 4px 0 14px; padding: 14px; border-radius: 14px; background: rgba(var(--brand-rgb), .12); border: 1px solid rgba(var(--brand-rgb), .4); }
.saiba p { font-size: 14px; }
.tour-n { font: 600 12px/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-2); margin-bottom: 8px; }
.tour-barra { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-bottom: 14px; overflow: hidden; }
.tour-barra i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width .4s; }
.tour h3 { font-size: 18px; }
.tour ul li { font-size: 14px; align-items: flex-start; }
.tour ul li i { margin-top: 6px; }
.tour-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.tour-nav .acao.secundaria { margin-top: 0; }
.tour-sair { display: block; width: 100%; margin-bottom: 12px; padding: 6px; border: 0; background: none; color: var(--txt-2); font-size: 13px; text-decoration: underline; cursor: pointer; }