/* Localizacao: /projetor/assets/css/projetor.css
   Nome: projetor.css
   Linguagem: CSS */

:root{
  --ink-0:#FFFFFF; --ink-1:#F5F6F8; --ink-2:#EBEDF0; --ink-3:#E0E3E8;
  --line:rgba(0,0,0,.07); --line-2:rgba(0,0,0,.12);
  --green:#009739; --green-bright:#00A844; --green-soft:rgba(0,151,57,.12);
  --yellow:#FFCC29; --yellow-bright:#FFD700; --yellow-soft:rgba(255,204,41,.15);
  --blueprint:#3BA7E0; --blueprint-soft:rgba(59,167,224,.14);
  --ok:#34C759;
  --txt:#1A1A1A; --txt-dim:#4B5563; --txt-mute:#6B7280;
  --ff-display:"Anton",sans-serif;
  --ff-mono:"JetBrains Mono",monospace;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:14px; --r-sm:10px;
}

/* ===== DARK MODE ===== */
[data-theme="dark"]{
  --ink-0:#0A0B0E; --ink-1:#0E1014; --ink-2:#13161B; --ink-3:#181C22;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --txt:#F0EDE8; --txt-dim:#B7B3AC; --txt-mute:#76726B;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink-0); color:var(--txt); font-family:var(--ff-body);
  line-height:1.55; min-height:100vh; position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 80%);
}
[data-theme="dark"] body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
}
a{color:inherit;text-decoration:none}

/* ---------- TOPO ---------- */
.pj-top{
  position:sticky; top:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; padding:14px 24px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] .pj-top{background:rgba(10,11,14,.82);}
.pj-brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-display);
  font-size:22px; letter-spacing:.5px; text-transform:uppercase}
.pj-brand b{color:var(--green-bright)}
.pj-brand .mark{width:38px; height:38px; display:grid; place-items:center;
  background:var(--green); color:#FFFFFF; border-radius:9px; font-size:20px}
.pj-top .voltar{display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:13px; color:var(--txt-dim);
  padding:8px 14px; border:1px solid var(--line-2); border-radius:99px; transition:.2s}
.pj-top .voltar:hover{color:var(--green-bright); border-color:var(--green)}

/* ---------- CABECALHO ---------- */
.pj-head{position:relative; z-index:1; padding:48px 24px 8px; max-width:1180px; margin:0 auto}
.pj-eyebrow{font-family:var(--ff-mono); font-size:12px; letter-spacing:2px;
  color:var(--green); text-transform:uppercase}
.pj-head h1{font-family:var(--ff-display); font-weight:400; font-size:clamp(34px,6vw,62px);
  text-transform:uppercase; letter-spacing:1px; line-height:1; margin:12px 0 14px}
.pj-head h1 b{color:var(--green-bright)}
.pj-head p{color:var(--txt-dim); max-width:680px; font-size:16px}

/* ---------- HUB ---------- */
.pj-hub{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:36px 24px 0}
.pj-hub-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.pj-hub-card{display:flex; flex-direction:column; background:var(--ink-1);
  border:1px solid var(--line); border-radius:var(--r); padding:30px; transition:.25s;
  position:relative; overflow:hidden}
.pj-hub-card::after{content:""; position:absolute; inset:0;
  background:radial-gradient(600px circle at 100% 0%,var(--green-soft),transparent 60%);
  opacity:0; transition:.25s}
.pj-hub-card:hover{border-color:var(--green); transform:translateY(-4px)}
.pj-hub-card:hover::after{opacity:1}
.pj-hub-card .hc-ico{width:60px; height:60px; display:grid; place-items:center; border-radius:14px;
  background:var(--ink-3); border:1px solid var(--line-2); color:var(--green-bright);
  font-size:28px; margin-bottom:20px}
.pj-hub-card .hc-code{font-family:var(--ff-mono); font-size:12px; color:var(--green); letter-spacing:1px}
.pj-hub-card h3{font-family:var(--ff-display); font-weight:400; font-size:30px; text-transform:uppercase;
  letter-spacing:.5px; margin:6px 0 10px; line-height:1}
.pj-hub-card p{color:var(--txt-dim); flex-grow:1}
.pj-hub-card .hc-feats{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px}
.pj-hub-card .hc-feats span{font-family:var(--ff-mono); font-size:11px; color:var(--txt-mute);
  padding:5px 9px; border:1px solid var(--line-2); border-radius:99px}
.pj-hub-card .hc-go{display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-weight:700; color:var(--green-bright)}
.pj-hub-card .hc-go i{transition:.2s}
.pj-hub-card:hover .hc-go i{transform:translateX(5px)}

/* ---------- LAYOUT DO PROJETOR ---------- */
.pj-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:28px 24px 60px;
  display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:26px; align-items:start}

.pj-canvas-col{position:sticky; top:84px}
.pj-preview{background:var(--ink-1); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px 14px; position:relative; overflow:hidden}
.pj-preview #svgHost{width:100%; overflow-x:auto}
.pj-preview svg{width:100%; height:auto; display:block; min-width:320px}
.pj-preview-foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:10px; padding-top:8px; border-top:1px solid var(--line);
  font-family:var(--ff-mono); font-size:10px; color:var(--txt-mute)}
.pj-preview-foot .dot{display:inline-flex; align-items:center; gap:6px}
.pj-preview-foot .dot i{width:11px; height:3px; border-radius:2px; display:inline-block}

.pj-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.pj-metric{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px}
.pj-metric .k{font-family:var(--ff-mono); font-size:11px; color:var(--txt-mute); letter-spacing:.5px}
.pj-metric .v{font-family:var(--ff-display); font-size:26px; color:var(--green-bright); margin-top:4px}
.pj-metric .v small{font-family:var(--ff-mono); font-size:12px; color:var(--txt-dim)}

/* ---------- PAINEL DE CONTROLES ---------- */
.pj-panel{display:flex; flex-direction:column; gap:18px}
.pj-card{background:var(--ink-1); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.pj-card-head{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.pj-card-head h2{font-family:var(--ff-mono); font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--green); font-weight:500}
.pj-card-head .step{width:24px; height:24px; display:grid; place-items:center; border-radius:7px;
  background:var(--green-soft); color:var(--green-bright); font-family:var(--ff-mono); font-size:12px}

/* tipos / opcoes em grade */
.pj-opts{display:grid; gap:10px}
.pj-opts.cols-2{grid-template-columns:1fr 1fr}
.pj-opts.cols-3{grid-template-columns:repeat(3,1fr)}
.pj-opt{cursor:pointer; background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:12px; transition:.18s; display:flex; flex-direction:column; gap:4px}
.pj-opt:hover{border-color:var(--green)}
.pj-opt.sel{border-color:var(--green); background:var(--green-soft)}
.pj-opt .oi{font-size:20px; color:var(--green-bright)}
.pj-opt .on{font-weight:600; font-size:13px}
.pj-opt .od{font-size:11px; color:var(--txt-mute); line-height:1.35}

/* sliders */
.pj-range{margin-bottom:16px}
.pj-range:last-child{margin-bottom:0}
.pj-range .rl{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px}
.pj-range .rl .name{font-size:13px; color:var(--txt-dim)}
.pj-range .rl .val{font-family:var(--ff-mono); font-size:14px; color:var(--green-bright)}
.pj-range input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:5px;
  border-radius:99px; background:var(--ink-3); outline:none}
.pj-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%; background:var(--green-bright);
  border:3px solid var(--ink-0); cursor:pointer; box-shadow:0 0 0 1px var(--green)}
.pj-range input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%;
  background:var(--green-bright); border:3px solid var(--ink-0); cursor:pointer}

/* checkboxes extras */
.pj-checks{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pj-check{display:flex; align-items:center; gap:9px; cursor:pointer; background:var(--ink-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:10px 12px; transition:.18s}
.pj-check:hover{border-color:var(--green)}
.pj-check.sel{border-color:var(--green); background:var(--green-soft)}
.pj-check input{display:none}
.pj-check .box{width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-2);
  display:grid; place-items:center; flex-shrink:0; color:#FFFFFF; font-size:12px}
.pj-check.sel .box{background:var(--green-bright); border-color:var(--green-bright)}
.pj-check .lbl{font-size:12.5px}

/* qtd dorm/banho */
.pj-stepper{display:flex; align-items:center; justify-content:space-between;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:10px 12px; margin-bottom:10px}
.pj-stepper .sl{font-size:13px; color:var(--txt-dim)}
.pj-stepper .ctrl{display:flex; align-items:center; gap:12px}
.pj-stepper button{width:30px; height:30px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--ink-3); color:var(--green-bright); font-size:16px; cursor:pointer; transition:.15s}
.pj-stepper button:hover{border-color:var(--green)}
.pj-stepper .num{font-family:var(--ff-mono); min-width:22px; text-align:center; font-size:15px}

/* resumo */
.pj-resumo{font-family:var(--ff-mono); font-size:12.5px}
.pj-resumo .row{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px dashed var(--line)}
.pj-resumo .row:last-child{border-bottom:none}
.pj-resumo .row .k{color:var(--txt-mute)}
.pj-resumo .row .v{color:var(--txt); text-align:right}

/* envio */
.pj-send{display:flex; flex-direction:column; gap:12px}
.pj-input{width:100%; background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:12px 14px; color:var(--txt); font-family:var(--ff-body); font-size:14px}
.pj-input:focus{outline:none; border-color:var(--green)}
textarea.pj-input{resize:vertical; min-height:72px}
.pj-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--green); color:#FFFFFF; font-weight:700; font-size:15px;
  border:none; border-radius:99px; padding:14px 22px; cursor:pointer; transition:.2s}
.pj-btn:hover{background:var(--green-bright); transform:translateY(-2px)}
.pj-btn i{font-size:18px}
.pj-btn.ghost{background:transparent; border:1px solid var(--line-2); color:var(--txt-dim)}
.pj-btn.ghost:hover{border-color:var(--green); color:var(--green-bright); background:transparent}
.pj-note{font-family:var(--ff-mono); font-size:11px; color:var(--txt-mute); text-align:center}

/* ---------- RODAPE ---------- */
.pj-foot{position:relative; z-index:1; border-top:1px solid var(--line); margin-top:8px;
  padding:28px 24px; text-align:center; color:var(--txt-mute);
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.5px}
.pj-foot b{color:var(--green-bright)}

/* ---------- RESPONSIVO ---------- */
@media (max-width:980px){
  .pj-wrap{grid-template-columns:1fr}
  .pj-canvas-col{position:static}
  .pj-hub-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pj-top{padding:12px 16px}
  .pj-brand{font-size:18px}
  .pj-head{padding:32px 16px 4px}
  .pj-hub,.pj-wrap{padding-left:16px; padding-right:16px}
  .pj-checks{grid-template-columns:1fr}
  .pj-opts.cols-3{grid-template-columns:1fr 1fr}
  .pj-metric .v{font-size:22px}
}