/* Folha única, tudo em variáveis. O valor de cada variável chega no , vindo do cadastro do tenant — trocar uma cor no painel muda o site inteiro. Os fallbacks são a identidade smartprint3d (paleta Bambu Lab). */ :root{ --primary:#00ae42; --primary-hover:#1aaf5d; --link:#00ae42; --bg:#f5f5f5; --surface:#ffffff; --border:#e4e4e4; --text-primary:#333333; --text-secondary:#9e9e9e; --largura:1100px; --raio:10px; } *{box-sizing:border-box;margin:0;padding:0} /* Fundo de tela: os papéis fundo-tela-1/2 (bgFrom/bgTo) existem para isto. Sem eles o degradê fica transparente e sobra a cor sólida de --bg. */ body{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif; background-color:var(--bg); background-image:linear-gradient(180deg,var(--bg-0,transparent),var(--bg-1,transparent)); background-attachment:fixed; color:var(--text-primary);line-height:1.6} main{max-width:var(--largura);margin:0 auto;padding:0 1.25rem 4rem} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} h1{font-size:2rem;font-weight:700;line-height:1.2} h2{font-size:1.4rem;font-weight:700;margin-bottom:1rem} h3{font-size:1.05rem;font-weight:700} p{color:var(--text-primary)} .sec{color:var(--text-secondary)} .topo{display:flex;align-items:center;gap:1.5rem;max-width:var(--largura); margin:0 auto;padding:1rem 1.25rem} .marca{display:flex;align-items:center;gap:.6rem;color:var(--text-primary);font-size:1.05rem} .marca-quadro{width:22px;height:22px;border-radius:6px;background:var(--primary);display:inline-block} .topo nav{display:flex;gap:1.25rem;margin-left:auto;flex-wrap:wrap} .topo nav a{color:var(--text-primary);font-size:.95rem} /* O gradiente da marca pinta por cima da cor sólida quando o tenant o define. Sem gradiente cadastrado, background-image vira "none" e sobra a --primary. */ .btn{display:inline-block;background-color:var(--primary); background-image:var(--brand-gradient,none);color:#fff;border:0; border-radius:var(--raio);padding:.7rem 1.4rem;font-weight:500;font-size:.95rem; cursor:pointer;font-family:inherit} .btn:hover{background-color:var(--primary-hover);background-image:none;text-decoration:none} .btn-linha{background:transparent;color:var(--primary);border:1px solid var(--primary);padding:.5rem 1rem} .btn-linha:hover{background:transparent;text-decoration:none;border-color:var(--primary-hover)} /* Alternador de tema. Os dois ícones ficam no HTML e o CSS mostra um por vez: no claro aparece a lua (clicar escurece) e no escuro, o sol. Fazer isso por CSS e não por JavaScript evita o ícone errado aparecer antes do script rodar. */ .btn-tema{display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;padding:0;border-radius:var(--raio);cursor:pointer; background:transparent;color:var(--text-primary); border:1px solid var(--border);font-family:inherit} .btn-tema:hover{border-color:var(--primary);color:var(--primary)} .icone-sol{display:none} .dark .icone-sol{display:block} .dark .icone-lua{display:none} .hero{background:var(--surface);border-radius:var(--raio);padding:3rem 2rem;margin-bottom:2rem} .hero p{color:var(--text-secondary);margin:.5rem 0 1.5rem;max-width:38rem} .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--raio); padding:1.25rem;display:flex;flex-direction:column} .card .arte{color:var(--text-secondary);margin-bottom:.75rem} .card .arte svg{width:100%;height:auto;max-height:150px} .card p{color:var(--text-secondary);font-size:.9rem;margin:.35rem 0 1rem;flex:1} .ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem; background:var(--surface);border-radius:var(--raio);padding:2rem;margin-bottom:2rem} .ficha .arte{color:var(--text-secondary)} .ficha .arte svg{width:100%;height:auto;max-height:280px} .specs{list-style:none;margin:1.25rem 0} .specs li{display:flex;justify-content:space-between;gap:1rem; padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.92rem} .specs li span:first-child{color:var(--text-secondary)} .acoes{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem} form{display:grid;gap:.85rem;max-width:32rem} label{font-size:.9rem;color:var(--text-secondary)} input,textarea{width:100%;font:inherit;padding:.7rem .9rem;border-radius:var(--raio); border:1px solid var(--border);background:var(--surface);color:var(--text-primary)} textarea{min-height:8rem;resize:vertical} .aviso{border-radius:var(--raio);padding:.9rem 1rem;font-size:.92rem; border:1px solid var(--border);background:var(--surface)} .aviso-erro{border-color:var(--primary)} .rodape{border-top:1px solid var(--border);margin-top:2rem;padding:2rem 1.25rem; max-width:var(--largura);margin-inline:auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem; color:var(--text-secondary);font-size:.9rem} .rodape strong{color:var(--text-primary)} .redes{display:flex;gap:1rem;text-transform:capitalize}