/* =====================================================================
   KNX do Brasil — Orçamentos  ·  Tema CLARO CORPORATIVO
   Branco + azul KNX. Sem preto: textos em ardósia (slate).
   Mesmas classes do tema anterior — só muda a pele.
   ===================================================================== */

:root{
  --bg:        #eef3f8;   /* fundo da página (azul-acinzentado bem claro) */
  --bg-2:      #f6f9fc;   /* insets/faixas suaves                        */
  --surface:   #ffffff;   /* fundo de inputs                             */
  --panel:     #ffffff;   /* cartões                                     */
  --panel-2:   #f7fafd;   /* cartão secundário / inset                   */
  --line:      #e4eaf1;   /* borda suave                                 */
  --line-2:    #cdd8e4;   /* borda mais firme                            */

  --ink:       #16293c;   /* texto principal (ardósia escura, NÃO preto) */
  --muted:     #5b6b7d;   /* texto secundário                            */
  --faint:     #90a0b0;   /* dicas / apoio                               */

  --blue:      #009fe3;   /* azul KNX corporativo                        */
  --blue-2:    #0072b0;   /* azul escuro (hover/gradiente)               */
  --blue-soft: #e7f5fc;   /* azul bem claro (círculos/nº, chips)         */
  --blue-line: #bfe4f7;   /* borda azul clara                            */

  --green:     #1fa457;   /* verde KNX (gratuito/garantia)               */
  --green-2:   #15803d;
  --green-soft:#e8f6ee;
  --amber:     #c98a00;   /* investimento                                */
  --amber-soft:#fbf3e0;
  --red:       #dc2f4b;   /* obrigatório / erro                          */

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(16,42,67,.05), 0 14px 34px -18px rgba(16,42,67,.20);
  --shadow-sm: 0 1px 2px rgba(16,42,67,.05), 0 6px 16px -10px rgba(16,42,67,.16);

  --ff-display:'Sora', system-ui, sans-serif;
  --ff-body:   'Inter', system-ui, sans-serif;
  --ff-mono:   'JetBrains Mono','Courier New', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 680px at 82% -12%, rgba(0,159,227,.10), transparent 60%),
    radial-gradient(1000px 600px at -10% 12%, rgba(0,159,227,.06), transparent 55%),
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:min(1120px, 92vw); margin-inline:auto; }

/* eyebrow / rótulos técnicos ------------------------------------------- */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue); font-weight:500;
  display:inline-flex; align-items:center; gap:.55rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),transparent);
}

/* ===================== TOPBAR ===================== */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(16,42,67,.04);
}
.topbar .wrap{ display:flex; align-items:center; gap:1.2rem; padding:.6rem 0; }
.brand{ display:flex; align-items:center; gap:.8rem; }
.brand img{ height:50px; width:auto; }
.brand-txt{ line-height:1.08; }
.brand-txt b{ font-family:var(--ff-display); font-weight:800; letter-spacing:.01em; font-size:1.02rem; color:var(--ink); }
.brand-txt span{ display:block; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.2em; color:var(--faint); text-transform:uppercase; }
.topbar nav{ margin-left:auto; display:flex; gap:.3rem; align-items:center; }
.topbar nav a{
  font-size:.84rem; color:var(--muted); padding:.5rem .8rem; border-radius:8px;
  transition:.2s; font-weight:500;
}
.topbar nav a:hover{ color:var(--blue); background:var(--blue-soft); }
.btn-wpp-top{
  color:#fff !important; font-weight:600;
  background:var(--green);
  box-shadow:0 6px 16px -8px rgba(31,164,87,.6);
}
.btn-wpp-top:hover{ background:var(--green-2); }

/* ===================== HERO ===================== */
.hero{ padding:4rem 0 2.2rem; position:relative; overflow:hidden; }
.hero h1{
  font-family:var(--ff-display); font-weight:800; color:var(--ink);
  font-size:clamp(2.1rem, 5vw, 3.5rem); line-height:1.06; letter-spacing:-.02em;
  margin:1rem 0 .8rem;
}
.hero h1 .chrome{
  background:linear-gradient(90deg,var(--blue),var(--blue-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ font-size:1.1rem; color:var(--muted); max-width:60ch; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.badge{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--muted); border:1px solid var(--line-2); border-radius:999px;
  padding:.4rem .85rem; background:var(--surface);
}
.badge b{ color:var(--blue); }

/* ===================== TABS ===================== */
.tabs{
  position:sticky; top:68px; z-index:30;
  display:flex; gap:.35rem; padding:.4rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; width:max-content; margin:0 auto 2.6rem;
  box-shadow:var(--shadow-sm);
}
.tab-btn{
  font-family:var(--ff-display); font-weight:600; font-size:.92rem;
  color:var(--muted); border:0; background:transparent; cursor:pointer;
  padding:.7rem 1.4rem; border-radius:999px; transition:.2s; white-space:nowrap;
}
.tab-btn .n{ font-family:var(--ff-mono); font-size:.72rem; color:var(--faint); margin-right:.5rem; }
.tab-btn:hover{ color:var(--ink); background:var(--bg-2); }
.tab-btn.active{
  color:#fff;
  background:linear-gradient(180deg,var(--blue),var(--blue-2));
  box-shadow:0 8px 20px -8px rgba(0,159,227,.55);
}
.tab-btn.active:hover{ color:#fff; }
.tab-btn.active .n{ color:rgba(255,255,255,.65); }

.tab-panel{ display:none; animation:fade .4s ease; }
.tab-panel.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ===================== SECTION HEADS ===================== */
.sec-head{ max-width:64ch; margin-bottom:2.2rem; }
.sec-head h2{
  font-family:var(--ff-display); font-weight:700; color:var(--ink);
  font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.01em; margin:.7rem 0 .6rem;
}
.sec-head p{ color:var(--muted); }

/* ===================== PROCESS RAIL (jornada) ===================== */
.rail{ position:relative; margin:1rem 0 3rem; }
.rail::before{
  content:""; position:absolute; left:31px; top:16px; bottom:16px; width:2px;
  background:linear-gradient(180deg,var(--blue),var(--blue-line));
}
.step{
  position:relative; display:grid; grid-template-columns:64px 1fr; gap:1.4rem;
  padding:0 0 1.6rem;
}
.step:last-child{ padding-bottom:0; }
.node{
  position:relative; z-index:2;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:800; font-size:1.3rem; color:var(--blue);
  background:var(--blue-soft);
  border:1px solid var(--blue-line);
  box-shadow:0 6px 16px -10px rgba(0,159,227,.5);
}
.node small{ position:absolute; top:-9px; right:-8px;
  font-family:var(--ff-mono); font-size:.56rem; color:var(--blue); font-weight:500;
  background:var(--surface); border:1px solid var(--blue-line); border-radius:6px; padding:2px 5px; }
.step-card{
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow-sm); transition:.25s;
}
.step-card:hover{ border-color:var(--blue-line); transform:translateY(-2px); box-shadow:var(--shadow); }
.step-card h3{ font-family:var(--ff-display); font-weight:700; font-size:1.16rem; margin:0 0 .35rem; color:var(--ink); }
.step-card p{ color:var(--muted); margin:.2rem 0; font-size:.96rem; }
.step-tag{
  display:inline-block; margin-top:.7rem; font-family:var(--ff-mono);
  font-size:.72rem; letter-spacing:.03em; padding:.34rem .7rem; border-radius:7px; font-weight:500;
}
.tag-blue{ color:var(--blue-2); border:1px solid var(--blue-line); background:var(--blue-soft); }
.tag-green{ color:var(--green-2); border:1px solid #c7e9d5; background:var(--green-soft); }
.tag-amber{ color:var(--amber); border:1px solid #f0dcae; background:var(--amber-soft); }

/* pricing dentro da etapa 2 */
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.price-cell{
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.9rem 1rem; background:var(--panel-2);
}
.price-cell .k{ font-family:var(--ff-mono); font-size:.7rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.price-cell .v{ font-family:var(--ff-display); font-weight:800; font-size:1.5rem; margin-top:.2rem; color:var(--blue); }
.price-cell .v small{ font-size:.85rem; color:var(--muted); font-weight:600; }

/* ===================== WHY BOX ===================== */
.why{
  margin:2.4rem 0; padding:1.6rem 1.8rem;
  border-left:4px solid var(--blue);
  background:var(--blue-soft);
  border-radius:0 var(--radius) var(--radius) 0;
}
.why h4{ font-family:var(--ff-display); margin:0 0 .5rem; font-size:1.15rem; color:var(--ink); }
.why p{ color:var(--muted); margin:.3rem 0; }

/* ===================== ECOSSISTEMA ===================== */
.eco{ margin:2.6rem 0 1rem; }
.eco-title{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.eco-brands{ display:flex; flex-wrap:wrap; gap:.5rem; }
.eco-brands span{
  font-family:var(--ff-mono); font-size:.8rem; color:var(--muted);
  border:1px solid var(--line); border-radius:8px; padding:.42rem .8rem; background:var(--surface);
}

/* ===================== FORM ===================== */
.form-shell{
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.form-shell > .fs-head{
  padding:1.4rem 1.8rem; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.form-shell > .fs-head h2{ font-family:var(--ff-display); font-size:1.3rem; margin:0; color:var(--ink); }
.form-body{ padding:1.8rem; }

.fieldset{ border:0; margin:0 0 2rem; padding:0; }
.fieldset > legend{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; width:100%;
}
.fieldset > legend .ln{ flex:1; height:1px; background:var(--line); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field.col-2{ grid-column:span 2; }
.field label{ font-size:.84rem; color:var(--ink); font-weight:600; }
.field label .req{ color:var(--red); }
.field input, .field select, .field textarea{
  font-family:var(--ff-body); font-size:.95rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.72rem .85rem; transition:.2s; width:100%;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,159,227,.15);
}
.field .hint{ font-size:.76rem; color:var(--faint); }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6b7d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.2rem; }

/* segmentado (residencial/comercial) */
.segmented{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.seg{ position:relative; }
.seg input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.seg label{
  display:block; cursor:pointer; padding:1.1rem 1.2rem; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:var(--surface); transition:.2s;
}
.seg label b{ font-family:var(--ff-display); font-size:1.05rem; display:block; color:var(--ink); }
.seg label span{ font-size:.82rem; color:var(--muted); }
.seg input:checked + label{
  border-color:var(--blue); background:var(--blue-soft);
  box-shadow:0 0 0 3px rgba(0,159,227,.14);
}
.seg input:focus-visible + label{ border-color:var(--blue); }

/* dropzones de upload */
.drop{
  border:1.5px dashed var(--line-2); border-radius:var(--radius-sm);
  padding:1.3rem; text-align:center; background:var(--panel-2); transition:.2s; cursor:pointer;
  display:block;
}
.drop:hover{ border-color:var(--blue); background:var(--blue-soft); }
.drop .ic{ font-size:1.6rem; }
.drop b{ display:block; font-family:var(--ff-display); margin-top:.3rem; color:var(--ink); }
.drop span{ font-size:.78rem; color:var(--muted); }
.drop input[type=file]{ display:none; }
.file-list{ list-style:none; padding:0; margin:.7rem 0 0; }
.file-list li{ font-family:var(--ff-mono); font-size:.78rem; color:var(--muted);
  display:flex; justify-content:space-between; gap:.5rem; padding:.35rem .5rem;
  border-bottom:1px dashed var(--line); }

/* cartão de preço fixo (lateral, se usado) */
.quote-card{
  position:sticky; top:150px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--panel);
  padding:1.4rem; box-shadow:var(--shadow);
}
.quote-card .qc-h{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.quote-card .qc-v{ font-family:var(--ff-display); font-weight:800; font-size:2.2rem; margin:.4rem 0 .1rem; color:var(--blue); }
.quote-card .qc-sub{ font-size:.82rem; color:var(--muted); }
.quote-card ul{ list-style:none; padding:0; margin:1rem 0 0; }
.quote-card li{ font-size:.82rem; color:var(--muted); padding:.32rem 0; display:flex; gap:.55rem; }
.quote-card li::before{ content:"✓"; color:var(--green); font-weight:800; }

.checkbox-row{ display:flex; gap:.65rem; align-items:flex-start; margin:.6rem 0; }
.checkbox-row input{ margin-top:.2rem; width:18px; height:18px; accent-color:var(--blue); flex:none; }
.checkbox-row label{ font-size:.88rem; color:var(--muted); }
.checkbox-row a{ color:var(--blue); text-decoration:underline; }

.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }

.btn{
  font-family:var(--ff-display); font-weight:700; font-size:1rem; cursor:pointer;
  border:0; border-radius:var(--radius-sm); padding:.9rem 1.6rem; transition:.2s;
  display:inline-flex; align-items:center; gap:.6rem;
}
.btn-primary{
  color:#fff; background:linear-gradient(180deg,var(--blue),var(--blue-2));
  box-shadow:0 10px 24px -10px rgba(0,159,227,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,159,227,.65); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn-ghost{ color:var(--ink); background:var(--surface); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }

.form-actions{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:.6rem; }

.alert{ padding:.9rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1.2rem; font-size:.9rem; }
.alert-error{ color:#a3182c; border:1px solid #f3c6cd; background:#fdeef0; }

/* ===================== WHATSAPP FLUTUANTE ===================== */
.wpp-float{
  position:fixed; right:20px; bottom:22px; z-index:50;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green);
  box-shadow:0 12px 28px -8px rgba(31,164,87,.6);
  transition:.2s;
}
.wpp-float:hover{ transform:scale(1.08); background:var(--green-2); }
.wpp-float svg{ width:30px; height:30px; fill:#fff; }

/* ===================== CONTATO / QR ===================== */
.contact{
  display:grid; grid-template-columns:1.5fr auto; gap:2rem; align-items:center;
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 2rem;
  box-shadow:var(--shadow); margin:3rem 0;
}
.contact h3{ font-family:var(--ff-display); font-size:1.5rem; margin:.4rem 0 .5rem; color:var(--ink); }
.contact p{ color:var(--muted); }
.qr-box{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.qr-box img{ width:180px; max-width:100%; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.qr-box .num{ font-family:var(--ff-mono); font-size:.78rem; color:var(--muted); }

/* ===================== RODAPÉ ===================== */
footer.site{
  border-top:1px solid var(--line); margin-top:3rem; padding:2.4rem 0;
  color:var(--muted); font-size:.86rem; background:var(--surface);
}
footer.site .wrap{ display:flex; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; align-items:center; }
footer.site a{ color:var(--muted); }
footer.site a:hover{ color:var(--blue); }
.foot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.foot-wpp a{ font-family:var(--ff-mono); font-size:.86rem; color:var(--ink);
  border:1px solid var(--line-2); border-radius:999px; padding:.5rem .9rem; transition:.2s; white-space:nowrap; }
.foot-wpp a:hover{ border-color:var(--green); color:var(--green); }
.foot-note{ font-family:var(--ff-mono); font-size:.7rem; color:var(--faint); margin-top:.6rem; width:100%; }

/* ===================== PÁGINAS LEGAIS ===================== */
.legal{ max-width:78ch; margin:3rem auto; }
.legal h1{ font-family:var(--ff-display); font-size:2rem; margin-bottom:.4rem; color:var(--ink); }
.legal h2{ font-family:var(--ff-display); font-size:1.2rem; margin:2rem 0 .6rem; color:var(--blue); }
.legal p, .legal li{ color:var(--muted); }
.legal .updated{ font-family:var(--ff-mono); font-size:.76rem; color:var(--faint); }

/* página de sucesso */
.done{ text-align:center; max-width:60ch; margin:5rem auto; }
.done .ring{ width:96px; height:96px; border-radius:50%; margin:0 auto 1.4rem; display:grid; place-items:center;
  background:var(--green); color:#fff;
  box-shadow:0 16px 36px -12px rgba(31,164,87,.6); font-size:2.4rem; }
.done h1{ font-family:var(--ff-display); font-size:2rem; color:var(--ink); }
.done .proto{ font-family:var(--ff-mono); font-size:1.1rem; color:var(--blue);
  border:1px dashed var(--blue-line); border-radius:10px; padding:.6rem 1rem; display:inline-block; margin:1rem 0; background:var(--blue-soft); }

/* ===================== RESPONSIVO ===================== */
@media (max-width:860px){
  .grid-2,.grid-3,.price-grid,.segmented,.contact{ grid-template-columns:1fr; }
  .form-with-aside{ grid-template-columns:1fr !important; }
  .quote-card{ position:static; }
  .topbar nav a:not(.btn-wpp-top){ display:none; }
  .tabs{ top:62px; width:94vw; }
  .tab-btn{ flex:1; padding:.7rem .6rem; font-size:.82rem; }
  .rail::before{ left:23px; }
  .step{ grid-template-columns:48px 1fr; gap:1rem; }
  .node{ width:48px; height:48px; font-size:1.05rem; }
}

.form-with-aside{ display:grid; grid-template-columns:1fr 320px; gap:1.6rem; align-items:start; }

/* =====================================================================
   WIZARD MULTI-ETAPAS
   ===================================================================== */
.wizard{ position:relative; }

/* barra de progresso */
.wz-top{
  position:sticky; top:128px; z-index:20;
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.2rem; margin-bottom:1.4rem; box-shadow:var(--shadow-sm);
}
.wz-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.7rem; flex-wrap:wrap; }
.wz-meta .step-name{ font-family:var(--ff-display); font-weight:700; font-size:1.05rem; color:var(--ink); }
.wz-meta .step-count{ font-family:var(--ff-mono); font-size:.74rem; color:var(--muted); letter-spacing:.06em; display:flex; align-items:center; gap:.6rem; }
.wz-meta .step-pct{ font-family:var(--ff-display); font-weight:800; font-size:1.3rem; color:var(--blue); }
.wz-bar{ height:7px; border-radius:999px; background:var(--bg); overflow:hidden; border:1px solid var(--line); }
.wz-fill{ height:100%; width:0%; border-radius:999px; transition:width .35s ease;
  background:linear-gradient(90deg,var(--blue),#4fc3f0); }

/* navegação por pílulas (mapa de seções) */
.wz-pills{
  display:flex; gap:.35rem; flex-wrap:nowrap; overflow-x:auto; margin-top:.85rem;
  padding-bottom:.3rem; scrollbar-width:thin;
}
.wz-pills::-webkit-scrollbar{ height:5px; }
.wz-pills::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.wz-pill{
  flex:none; display:flex; align-items:center; gap:.4rem;
  font-family:var(--ff-mono); font-size:.72rem; color:var(--muted);
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:.38rem .75rem .38rem .55rem; cursor:pointer; transition:.18s; white-space:nowrap;
}
.wz-pill .num{
  width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  font-size:.6rem; background:var(--bg); color:var(--muted); flex:none;
}
.wz-pill:hover{ border-color:var(--blue-line); color:var(--ink); background:var(--blue-soft); }
.wz-pill.done{ color:var(--green-2); border-color:#c7e9d5; background:var(--green-soft); }
.wz-pill.done .num{ background:var(--green); color:#fff; }
.wz-pill.current{ color:var(--blue-2); border-color:var(--blue); background:var(--blue-soft); font-weight:500; }
.wz-pill.current .num{ background:var(--blue); color:#fff; }

/* etapas */
.wz-step{ display:none; animation:fade .35s ease; }
.wz-step.active{ display:block; }
.wz-step > .wz-head{ margin-bottom:1.5rem; position:relative; padding:0 0 1.1rem 74px; min-height:56px;
  border-bottom:1px solid var(--line); }
.wz-step > .wz-head .wz-num{
  position:absolute; left:0; top:0;
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:800; font-size:1.35rem; color:var(--blue);
  background:var(--blue-soft);
  border:1px solid var(--blue-line);
}
.wz-step > .wz-head .eyebrow{ display:flex; }
.wz-step > .wz-head h3{ font-family:var(--ff-display); font-weight:700; font-size:1.4rem; margin:.35rem 0 .35rem; color:var(--ink); }
.wz-step > .wz-head p{ color:var(--muted); font-size:.94rem; max-width:66ch; }

/* caixas de informação (política, avisos, dicas) */
.infobox{
  display:flex; gap:.75rem; align-items:flex-start;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.9rem 1.05rem; margin:0 0 1.3rem; background:var(--panel-2); font-size:.9rem; color:var(--muted);
}
.infobox .ic{ font-size:1.15rem; line-height:1; flex:none; }
.infobox b{ color:var(--ink); }
.infobox.tip{ border-color:var(--blue-line); background:var(--blue-soft); }
.infobox.warn{ border-color:#f0dcae; background:var(--amber-soft); }
.infobox.warn .ic{ color:var(--amber); }

/* ranking de prioridades (1 a 9) */
.rank-grid{ display:grid; gap:.55rem; }
.rank-row{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.7rem .9rem; background:var(--surface);
}
.rank-row:hover{ border-color:var(--blue-line); }
.rank-row .rk-lbl{ font-size:.92rem; display:flex; align-items:center; gap:.6rem; color:var(--ink); }
.rank-row .rk-ic{ font-size:1.1rem; }
.rank-row select{
  font-family:var(--ff-mono); font-size:.85rem; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:8px;
  padding:.4rem .6rem; width:74px; text-align:center;
}
.rank-row select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,159,227,.15); }

/* navegação */
.wz-nav{ display:flex; justify-content:space-between; gap:.8rem; margin-top:1.8rem;
  padding-top:1.4rem; border-top:1px solid var(--line); }
.wz-nav .spacer{ flex:1; }

/* grid de checkboxes */
.checkgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.55rem; }
.chk{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.7rem .8rem; background:var(--surface); transition:.18s; }
.chk:hover{ border-color:var(--blue); background:var(--blue-soft); }
.chk:has(input:checked){ border-color:var(--blue); background:var(--blue-soft);
  box-shadow:inset 0 0 0 1px var(--blue); }
.chk input{ margin-top:.15rem; width:17px; height:17px; accent-color:var(--blue); flex:none; }
.chk .lbl{ font-size:.88rem; line-height:1.35; }
.chk .lbl b{ display:block; font-weight:600; color:var(--ink); }
.chk .lbl small{ color:var(--muted); font-size:.78rem; font-weight:400; }

/* radio cards (sensações / nível) */
.radio-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.6rem; }
.rc{ position:relative; }
.rc input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.rc label{ display:block; cursor:pointer; height:100%;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.85rem 1rem; background:var(--surface); transition:.18s; }
.rc label b{ font-family:var(--ff-display); font-size:.98rem; display:block; margin-bottom:.15rem; color:var(--ink); }
.rc label span{ font-size:.8rem; color:var(--muted); }
.rc input:checked + label{ border-color:var(--blue); background:var(--blue-soft);
  box-shadow:0 0 0 3px rgba(0,159,227,.14); }
.rc input:focus-visible + label{ border-color:var(--blue); }

/* sub-grupos dentro de uma etapa */
.subgroup{ margin:1.4rem 0; }
.subgroup > h4{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue); margin:0 0 .8rem;
  display:flex; align-items:center; gap:.6rem; }
.subgroup > h4::after{ content:""; flex:1; height:1px; background:var(--line); }

/* revisão */
.review{ display:grid; gap:.7rem; }
.review .r-row{ display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); font-size:.9rem; }
.review .r-row .k{ color:var(--muted); }
.review .r-row .v{ font-weight:600; text-align:right; color:var(--ink); }
.review-price{ border:1px solid var(--blue-line); border-radius:var(--radius);
  background:var(--blue-soft); padding:1.4rem; margin:1.2rem 0; }
.review-price .rp-h{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.review-price .rp-v{ font-family:var(--ff-display); font-weight:800; font-size:2rem; margin:.3rem 0 .1rem; color:var(--blue-2); }
.review-price .rp-sub{ font-size:.84rem; color:var(--muted); }

@media (max-width:860px){
  .wz-top{ top:116px; }
  .checkgrid, .radio-cards{ grid-template-columns:1fr; }
  .wz-step > .wz-head{ padding-left:60px; }
  .wz-step > .wz-head .wz-num{ width:44px; height:44px; font-size:1.1rem; border-radius:12px; }
  .rank-row{ flex-direction:row; }
  .rank-row .rk-lbl{ font-size:.86rem; }
}

/* =====================================================================
   VERSÃO 6 — termos, modo simples/técnico, resumo vivo
   Tema CLARO: usa as variáveis do topo deste arquivo.
   ===================================================================== */

/* ---------- Termo (ℹ️) e balão de explicação ---------- */
.termo{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:.35rem;flex:none;
  border:1px solid var(--blue-line);border-radius:50%;
  background:var(--blue-soft);color:var(--blue-2);
  font:700 11px/1 var(--ff-body);cursor:pointer;
  vertical-align:middle;transition:.15s;
}
.termo:hover,.termo:focus-visible{
  background:var(--blue);border-color:var(--blue);color:#fff;
}
.termo-balao{
  position:absolute;z-index:60;padding:.9rem 2.2rem .9rem 1rem;
  background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.termo-balao .tb-titulo{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.1rem}
.termo-balao .tb-tecnico{
  display:block;font:500 .72rem/1.3 var(--ff-mono);
  color:var(--blue-2);margin-bottom:.5rem;
}
.termo-balao .tb-ajuda{margin:0;font-size:.85rem;line-height:1.5;color:var(--muted)}
.termo-balao .tb-fechar{
  position:absolute;top:.4rem;right:.5rem;width:24px;height:24px;
  border:0;background:transparent;color:var(--faint);
  font-size:1.2rem;line-height:1;cursor:pointer;
}
@media (max-width:420px){ .termo-balao{padding-right:2rem} }

/* ---------- Chave Simples ⇄ Técnico ---------- */
.modo-chave{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.modo-chave .mc-lbl{font-size:.78rem;color:var(--faint);transition:.15s}
body[data-modo="simples"] .mc-simples,
body[data-modo="tecnico"] .mc-tecnico{color:var(--blue-2);font-weight:700}
.mc-switch{
  width:42px;height:22px;padding:2px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-2);transition:.18s;
}
body[data-modo="tecnico"] .mc-switch{background:var(--blue-soft);border-color:var(--blue-line)}
.mc-knob{
  display:block;width:16px;height:16px;border-radius:50%;
  background:var(--faint);transition:.18s;
}
body[data-modo="tecnico"] .mc-knob{transform:translateX(20px);background:var(--blue)}
.mc-dica{flex-basis:100%;font-size:.72rem;color:var(--faint)}
body[data-modo="tecnico"] .mc-dica{visibility:hidden}

/* Campos avançados: escondidos até alguém pedir */
body[data-modo="simples"] .nivel-tecnico{display:none !important}
body[data-modo="tecnico"] .nivel-tecnico{
  outline:1px dashed var(--blue-line);outline-offset:3px;border-radius:var(--radius-sm);
}

/* ---------- Resumo vivo ---------- */
.form-shell{position:relative}
@media (min-width:1080px){
  .form-shell{display:grid;grid-template-columns:1fr 300px;gap:1.6rem;align-items:start}
  .resumo{position:sticky;top:24px}
  .resumo-puxador{display:none}
  .resumo-corpo{display:block !important}
}
.resumo{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
}
.resumo-corpo{padding:1.1rem}
.resumo h4{margin:0 0 .2rem;font:700 .95rem/1.2 var(--ff-display);color:var(--ink)}
.resumo-obra{margin:0 0 .9rem;font-size:.8rem;color:var(--muted)}
.resumo-itens{list-style:none;margin:0 0 1rem;padding:0}
.resumo-itens li{
  display:flex;align-items:center;gap:.5rem;
  padding:.34rem 0;font-size:.83rem;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.resumo-itens li:last-child{border-bottom:0}
.resumo-itens li.vazio{color:var(--faint)}
.resumo-itens .ri-nome{flex:1}
.resumo-itens .ri-qtd{font:600 .8rem/1 var(--ff-mono);color:var(--blue-2)}
.resumo-itens li.vazio .ri-qtd{color:var(--faint);font-weight:400}
.resumo-porte,.resumo-faixa{
  padding:.75rem;margin-bottom:.6rem;border-radius:var(--radius-sm);
  background:var(--blue-soft);border:1px solid var(--blue-line);
}
.rp-rotulo,.rf-rotulo{
  display:block;font:600 .64rem/1 var(--ff-body);letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-2);margin-bottom:.25rem;
}
.resumo-porte strong,.resumo-faixa strong{font:700 1rem/1.2 var(--ff-display);color:var(--ink)}
.rp-bolinhas{margin-left:.45rem;color:var(--blue);letter-spacing:.14em;font-size:.8rem}
.resumo-aviso{margin:0;font-size:.7rem;line-height:1.45;color:var(--faint)}

/* Celular: barra retrátil colada no rodapé */
@media (max-width:1079px){
  .resumo{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    border-radius:var(--radius) var(--radius) 0 0;border-bottom:0;
    box-shadow:0 -8px 28px -12px rgba(16,42,67,.28);
  }
  .resumo-puxador{
    width:100%;padding:.8rem 1rem;border:0;background:transparent;
    color:var(--ink);font:700 .85rem/1 var(--ff-body);
    text-align:left;cursor:pointer;
  }
  .resumo-puxador::after{content:'▲';float:right;font-size:.7rem;color:var(--faint)}
  .resumo.aberto .resumo-puxador::after{content:'▼'}
  .resumo-corpo{display:none;max-height:58vh;overflow-y:auto;padding-top:0}
  .resumo.aberto .resumo-corpo{display:block}
  .resumo-corpo h4{display:none}     /* o puxador já diz "Seu projeto" */
  .form-body{padding-bottom:4.5rem}  /* a barra não pode cobrir o botão Avançar */
  .wpp-float{bottom:5rem}            /* nem o botão do WhatsApp */
  .resumo.aberto ~ .wpp-float,
  body:has(.resumo.aberto) .wpp-float{display:none}  /* aberto, some de vez */
}

/* ---------- Faixa de retomada do rascunho ---------- */
/* O atributo "hidden" tem que vencer o display:flex abaixo — senão a faixa
   fica na tela para todo mundo, inclusive quem nunca começou. */
.retomar[hidden]{display:none !important}
.retomar{
  display:flex;gap:.9rem;align-items:flex-start;flex-wrap:wrap;
  padding:1rem 1.1rem;margin-bottom:1.2rem;border-radius:var(--radius);
  background:var(--amber-soft);border:1px solid #edd9a8;
}
.retomar .rt-ic{font-size:1.4rem;line-height:1.2}
.retomar .rt-txt{flex:1;min-width:210px;display:flex;flex-direction:column;gap:.15rem}
.retomar .rt-txt b{font-size:.92rem;color:var(--ink)}
.retomar .rt-txt span{font-size:.83rem;color:var(--muted)}
.retomar .rt-txt small{font-size:.73rem;color:var(--faint);line-height:1.4}
.retomar .rt-bts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
@media (max-width:520px){ .retomar .rt-bts{width:100%} .retomar .rt-bts .btn{flex:1} }

/* ---------- Simuladores (ambientes desenhados) ---------- */
.sim{
  margin:1rem 0 1.4rem;padding:1rem;border-radius:var(--radius);
  background:var(--panel-2);border:1px solid var(--line);
}
.sim-svg{width:100%;height:auto;border-radius:var(--radius-sm);display:block;background:#141a22}
.sim-svg rect,.sim-svg circle{transition:fill .25s,fill-opacity .25s}
.sim-ctrl{display:flex;align-items:center;gap:.8rem;margin-top:.85rem;font-size:.8rem}
.sim-ctrl>span{min-width:140px;color:var(--muted)}
.sim-ctrl input[type="range"]{flex:1;accent-color:var(--blue)}
.sim-cores,.sim-cenas{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem}
.sim-cor,.sim-cena{
  padding:.45rem .85rem;border-radius:999px;cursor:pointer;font-size:.78rem;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:.15s;
}
.sim-cor:hover,.sim-cena:hover{border-color:var(--blue-line)}
.sim-cor.on,.sim-cena.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sim-teclas{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:.7rem}
.sim-tecla{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.7rem .45rem;border-radius:var(--radius-sm);cursor:pointer;text-align:center;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:.15s;
}
.sim-tecla svg{width:46px;height:auto;border-radius:5px}
.sim-tecla b{font-size:.76rem;line-height:1.2}
.sim-tecla small{font-size:.66rem;color:var(--muted);line-height:1.25}
.sim-tecla:hover{border-color:var(--blue-line)}
.sim-tecla.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.sim-eco{
  margin:.9rem 0 0;padding:.6rem .85rem;border-radius:var(--radius-sm);font-size:.83rem;
  background:var(--blue-soft);border:1px solid var(--blue-line);color:var(--ink);
}
.sim-reserva{margin-top:.7rem}
.sim-reserva summary{font-size:.76rem;color:var(--muted);cursor:pointer}
.sim-reserva summary:hover{color:var(--blue-2)}
@media (max-width:520px){ .sim-ctrl{flex-wrap:wrap} .sim-ctrl>span{min-width:100%} }

/* ---------- Grade de horas (agenda de climatização) ---------- */
.sim-legenda{margin:0 0 .75rem;font-size:.8rem;color:var(--muted)}
.sim-grade{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.sim-hora{
  padding:.45rem 0;border-radius:5px;cursor:pointer;
  font:600 .66rem/1 var(--ff-mono);
  border:1px solid var(--line-2);background:var(--surface);color:var(--faint);transition:.12s;
}
.sim-hora:hover{border-color:var(--blue-line)}
.sim-hora.on{background:var(--blue);border-color:var(--blue);color:#fff}
@media (max-width:520px){ .sim-grade{grid-template-columns:repeat(6,1fr)} }

/* ---------- Revisão: espelho do pré-projeto ---------- */
.rev-topo{
  padding:.9rem 1.1rem;margin-bottom:1rem;border-radius:var(--radius);
  background:var(--blue-soft);border:1px solid var(--blue-line);
}
.rev-topo b{display:block;font:700 1rem/1.3 var(--ff-display);color:var(--ink)}
.rev-topo span{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted)}
.rev-bloco{
  padding:.9rem 1.1rem;margin-bottom:.7rem;border-radius:var(--radius);
  background:var(--panel-2);border:1px solid var(--line);
}
.rev-bloco header{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.rev-bloco h4{margin:0;flex:1;font:700 .92rem/1.2 var(--ff-display);color:var(--ink)}
.rev-corrigir{
  padding:.28rem .75rem;border-radius:999px;cursor:pointer;font-size:.72rem;
  border:1px solid var(--line-2);background:var(--surface);color:var(--blue-2);transition:.15s;
}
.rev-corrigir:hover{border-color:var(--blue);background:var(--blue-soft)}
.rev-linha{
  display:flex;gap:.9rem;padding:.4rem 0;font-size:.82rem;
  border-top:1px solid var(--line);
}
.rev-k{flex:0 0 34%;color:var(--muted)}
.rev-v{flex:1;color:var(--ink)}
.rev-vazio{font-size:.85rem;color:var(--muted)}
@media (max-width:560px){ .rev-linha{flex-direction:column;gap:.1rem} .rev-k{flex:none} }

/* ---------- Sem JavaScript: nada pode sumir ----------
   O CSS crítico do <head> esconde as etapas para o assistente funcionar.
   Se o JavaScript não subir, ninguém troca de etapa — então mostramos tudo
   de uma vez. Mais feio, mas a pessoa consegue pedir o orçamento. */
/* O formulário mora dentro de uma ABA. Sem JavaScript ninguém troca de aba,
   então a aba some junto com o formulário inteiro. Este é o conserto: sem JS,
   as duas abas aparecem uma embaixo da outra. */
.sem-js .tab-panel{display:block !important}
.sem-js .tabs{display:none !important}
.sem-js .wz-step{display:block !important;margin-bottom:2.2rem}
.sem-js .wz-nav,
.sem-js .wz-pills,
.sem-js .resumo,
.sem-js .modo-chave,
.sem-js .retomar,
.sem-js .sim-palco{display:none !important}
.sem-js .nivel-tecnico{display:block !important}   /* é a única chance de responder */
.sem-js .sim-reserva{margin-top:0}
.sem-js .sim-reserva summary{display:none}
.sem-js #btnSubmit{display:inline-flex !important}
.sem-js .wz-nav{display:flex !important}
.sem-js #btnPrev,.sem-js #btnNext{display:none !important}

/* ---------- Folga para o cabeçalho fixo ----------
   O topo do site e a barra de abas ficam grudados no alto. Sem esta folga,
   qualquer rolagem automática encosta o conteúdo embaixo deles — e o botão
   fica visível mas não clicável. */
.wz-step,.wz-nav,.retomar,.sim{scroll-margin-top:150px}

/* ---------- Aviso da cobrança no aceite ---------- */
.pop-fundo{position:fixed;inset:0;background:rgba(10,20,35,.55);display:flex;
  align-items:center;justify-content:center;padding:1rem;z-index:9999}
.pop-fundo[hidden]{display:none}
.pop-caixa{background:#fff;border-radius:14px;padding:1.6rem;max-width:460px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pop-caixa h3{margin:0 0 .8rem;font-size:1.15rem}
.pop-caixa p{margin:.4rem 0;line-height:1.5}
.pop-sub{font-size:.9rem;color:var(--muted)}
.pop-botoes{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem;flex-wrap:wrap}
@media (max-width:420px){ .pop-botoes .btn{flex:1} }

/* ---------- Capa: por que só KNX (catálogo) ---------- */
.capa{background:linear-gradient(160deg,#0d2b45 0%,#0a1c2e 60%,#0f3550 100%);
  color:#eaf2f8;border-radius:16px;padding:2.2rem;margin:1.6rem 0 2.4rem;
  border:1px solid rgba(255,255,255,.08)}
.capa .eyebrow{color:#7fd1c8;letter-spacing:.08em}
.capa h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.18;margin:.5rem 0 1rem}
.capa p{color:#c9d8e4;max-width:70ch;line-height:1.6}
.capa b{color:#fff}
.capa-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;margin:1.6rem 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12)}
.capa-nums b{display:block;font-size:1.25rem;color:#fff;margin-bottom:.25rem}
.capa-nums span{font-size:.82rem;color:#9fb5c6;line-height:1.4;display:block}
.capa-acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.capa-nota{font-size:.82rem;color:#9fb5c6;margin-top:.9rem}
@media (max-width:520px){ .capa{padding:1.4rem} .capa-acoes .btn{width:100%;text-align:center} }