/* Allien3D v2 — topo 3D ao vivo, showroom e galeria de renders. Em cima do styles.css. */

/* ---------- TOPO 3D ---------- */
.hero3d{position:relative;min-height:100svh;overflow:hidden;display:grid;align-items:center;
  padding:110px clamp(16px,4vw,40px) 90px;background:radial-gradient(1200px 700px at 70% 55%,#10202a 0%,#07090d 62%)}
#heroGL{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.gl-ok #heroGL{opacity:1}
.hero3d-vinheta{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,9,13,.92) 0%,rgba(7,9,13,.55) 34%,rgba(7,9,13,0) 58%),
             linear-gradient(0deg,rgba(7,9,13,1) 0%,rgba(7,9,13,0) 22%)}
.hero3d-txt{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;pointer-events:none}
.hero3d-txt > *{max-width:600px}
.hero3d-txt a,.hero3d-txt button{pointer-events:auto}
.hero3d h1{font-size:clamp(40px,6.4vw,82px);margin-bottom:22px;line-height:1.02}
.hero3d .sub{font-size:clamp(16px,1.5vw,19px);color:var(--txt-2);margin:0 0 34px}
.hero3d .eyebrow,.hero3d h1,.hero3d .sub,.hero3d .hero-cta{animation:subir .9s cubic-bezier(.2,.7,.3,1) both}
.hero3d h1{animation-delay:.08s}.hero3d .sub{animation-delay:.16s}.hero3d .hero-cta{animation-delay:.24s}
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.hud{position:absolute;z-index:3;right:clamp(16px,4vw,40px);bottom:96px;min-width:250px;
  font:500 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--txt-2);
  background:rgba(7,9,13,.62);border:1px solid rgba(93,242,160,.22);border-radius:12px;padding:12px 14px;backdrop-filter:blur(10px)}
.hud-linha{display:flex;gap:8px;align-items:center;white-space:nowrap}
.hud-linha b{color:var(--neon);font-weight:700;letter-spacing:.06em}
.hud-num b{color:var(--txt)}
.hud-dot{width:8px;height:8px;border-radius:50%;background:#ff6a1a;box-shadow:0 0 10px #ff6a1a;animation:pisca 1.1s infinite}
@keyframes pisca{50%{opacity:.25}}
.hud-barra{height:3px;border-radius:3px;background:var(--linha);margin-top:8px;overflow:hidden}
.hud-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--neon),var(--neon-2),var(--violeta))}

.hero3d-modelos{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:30px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:92vw}
.hero3d-modelos button{background:rgba(7,9,13,.6);border:1px solid var(--linha);color:var(--txt-2);border-radius:999px;padding:7px 14px;font-size:13px;backdrop-filter:blur(8px);transition:.2s}
.hero3d-modelos button:hover{color:var(--txt);border-color:var(--neon)}
.hero3d-modelos button.sel{color:#04120b;background:var(--neon);border-color:var(--neon)}
.hero3d .scroll-hint{display:none}
.sem-gl .hero3d{background:radial-gradient(900px 600px at 70% 50%,#14303a 0%,#07090d 65%)}
.sem-gl .hud,.sem-gl .hero3d-modelos{display:none}

@media (max-width:999px){
  .hero3d{align-items:start;padding-top:min(62vh,560px);padding-bottom:84px;min-height:auto}
  #heroGL{height:min(78vh,700px)}
  .hero3d-vinheta{background:linear-gradient(0deg,rgba(7,9,13,1) 0%,rgba(7,9,13,1) calc(100% - min(78vh,700px)),rgba(7,9,13,.6) calc(100% - min(78vh,700px) + 120px),rgba(7,9,13,0) calc(100% - min(66vh,600px)))}
  .hero3d-modelos{top:calc(min(62vh,560px) - 50px);bottom:auto}
  .hud{top:84px;bottom:auto;right:16px;min-width:0;font-size:11.5px}
}
@media (max-width:560px){
  .hero3d h1{font-size:38px}
  .hud{left:16px;right:16px}
  .hero3d-modelos{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 16px;max-width:100vw;width:100%;scrollbar-width:none}
  .hero3d-modelos button{flex:none}
}

/* ---------- SHOWROOM ---------- */
.showroom{max-width:1400px}
.sr{display:grid;grid-template-columns:230px minmax(0,1fr) 330px;gap:18px;align-items:stretch}
.sr-lista{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow:auto;padding-right:4px;scrollbar-width:thin}
.sr-item{display:flex;gap:12px;align-items:center;text-align:left;background:var(--bg-2);border:1px solid var(--linha);border-radius:12px;padding:8px;color:var(--txt);transition:.18s}
.sr-item:hover{border-color:var(--linha-2);transform:translateX(3px)}
.sr-item.sel{border-color:var(--neon);box-shadow:0 0 0 3px rgba(93,242,160,.12)}
.sr-item b{display:block;font-size:14px;font-weight:600}
.sr-item small{color:var(--txt-3);font-size:12px}
.sr-thumb{flex:none;width:52px;height:52px;border-radius:9px;background:#0e131b center/cover no-repeat;border:1px solid var(--linha)}
.sr-palco{position:relative;min-height:620px;border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);background:#07090d}
#srGL{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;transition:filter .6s}
#srGL:active{cursor:grabbing}
.sr-acoes{position:absolute;top:12px;left:12px;display:flex;gap:8px;z-index:2}
.sr-dica{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--txt-3);pointer-events:none;white-space:nowrap}
.sr-painel{background:var(--bg-2);border:1px solid var(--linha);border-radius:var(--raio);padding:22px;display:flex;flex-direction:column;gap:12px}
.sr-painel h3{font-size:24px}
.sr-fils{display:flex;flex-wrap:wrap;gap:6px}
.sr-fil{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--linha);color:var(--txt-2);border-radius:999px;padding:6px 11px;font-size:12.5px;transition:.18s}
.sr-fil:hover{color:var(--txt);border-color:var(--linha-2)}
.sr-fil.sel{color:var(--txt);border-color:var(--neon);background:rgba(93,242,160,.07)}
.amostra{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}
.amostra-seda{background:radial-gradient(circle at 30% 30%,#fff 0,var(--c) 45%,#00000088 100%)}
.amostra-arco{background:conic-gradient(#ff4d6d,#ffb703,#5df2a0,#2ad4d4,#9b6bff,#ff4d6d)}
.amostra-vidro{background:radial-gradient(circle at 30% 30%,#fff,#9fd8ff 50%,#3d7aa866);opacity:.85}
.amostra-glow{background:#b6ff9e;box-shadow:0 0 8px #6dff8a}
.sr-medidas{font:500 12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--txt-3);margin:0}
.sr-preco{border:1px solid var(--linha);border-radius:12px;padding:12px 14px;background:var(--bg)}
.sr-preco small{display:block;color:var(--txt-3);font-size:12px}
.sr-preco b{display:block;font-family:var(--fonte-t);font-size:30px;margin:2px 0}
@media (max-width:1180px){.sr{grid-template-columns:200px minmax(0,1fr)}.sr-painel{grid-column:1/-1}}
@media (max-width:760px){
  .sr{grid-template-columns:1fr}
  .sr-lista{flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:6px}
  .sr-item{flex:none;width:200px}
  .sr-palco{min-height:420px}
}

/* ---------- GALERIA DE RENDERS ---------- */
.galeria-v2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.galeria-v2 .gal{aspect-ratio:16/9;margin:0}
.galeria-v2 figcaption{position:absolute;bottom:10px;left:12px;font-size:12px;color:var(--txt-2);background:rgba(7,9,13,.7);padding:3px 9px;border-radius:999px}
.galeria-v2:empty::before{content:'Renders a caminho.';color:var(--txt-3)}

/* ---------- PARA QUEM ---------- */
.para-quem{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:34px}
.pq{background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio);padding:22px}
.pq h3{font-size:18px;margin-bottom:8px}
.pq p{margin:0;color:var(--txt-2);font-size:14.5px}

.bancos{margin-top:0}

/* ---------- ENCONTRAR PECAS ---------- */
.enc-busca{display:flex;gap:10px;max-width:760px;margin-bottom:10px}
.enc-busca input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--linha-2);border-radius:999px;padding:14px 20px;color:var(--txt);font:inherit;font-size:16px}
.enc-busca input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(93,242,160,.15)}
.enc-traducao{margin:0 0 14px;min-height:20px}
.enc-traducao b{color:var(--neon)}
.enc-sugestoes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.enc-bancos{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.enc-banco{background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;display:flex;flex-direction:column;gap:10px;transition:.2s}
.enc-banco:hover{border-color:var(--linha-2);transform:translateY(-3px)}
.enc-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.enc-topo h3{font-size:19px}
.enc-tipo{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--neon-2);border:1px solid var(--linha);border-radius:999px;padding:2px 9px;white-space:nowrap}
.enc-banco p{margin:0;color:var(--txt-2);font-size:14px;flex:1}
.enc-links{display:flex;gap:8px;flex-wrap:wrap}
.enc-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:28px 0 14px;padding:0;list-style:none;counter-reset:p}
.enc-passos li{counter-increment:p;background:var(--bg);border:1px dashed var(--linha-2);border-radius:12px;padding:14px 16px 14px 50px;position:relative;color:var(--txt-2);font-size:14.5px}
.enc-passos li::before{content:counter(p);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--neon);color:#04120b;font-weight:700;font-size:13px}
.enc-passos b{color:var(--txt)}
@media (max-width:560px){.enc-busca{flex-direction:column}.enc-busca .btn{justify-content:center}}

/* ---------- MENU com 6 itens: aperta antes de quebrar em 2 linhas, some antes de estourar ---------- */
.nav-links{white-space:nowrap}
@media (max-width:1240px){.nav-links{gap:16px;font-size:13.5px}}
@media (max-width:1100px){.nav-links{display:none}.nav>.btn{margin-left:auto}}

/* ---------- QUALIDADE: preco por altura de camada ---------- */
.q-preco{display:block;font-style:normal;font-size:12px;color:var(--neon);margin-top:4px;min-height:16px;font-weight:600}
.qual-nota{margin-top:8px;line-height:1.5}
.qual-nota b{color:var(--txt-2)}

/* busca levou aos cards: os botoes de buscar acendem 2x */
.enc-bancos{scroll-margin-top:90px}
.enc-bancos.acende .btn-primary{animation:acende 1.1s ease 2}
@keyframes acende{50%{box-shadow:0 0 0 6px rgba(93,242,160,.35),0 10px 30px rgba(93,242,160,.4);transform:translateY(-2px)}}