/* ============================================================
   WIZARD — 5 etapas. Mobile-first: o link chega por WhatsApp,
   a maioria abre no celular. Desktop é o mesmo fluxo centrado.
   ============================================================ */

/* ---------- Casca ---------- */
.wrap{
  max-width:660px;
  margin:0 auto;
  padding:0 1.15rem 3.5rem;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* ---------- Topo ---------- */
.topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:1.5rem 0 1.1rem;
}
.topo-logo{
  height:46px;width:auto;
  flex-shrink:0;
}
.wz-voltar{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  padding:.5rem .9rem;
  background:transparent;border:1px solid var(--hair);border-radius:8px;
  color:var(--ink-2);font-size:.85rem;font-weight:500;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wz-voltar:hover{background:var(--paper-3);color:var(--ink)}
.wz-voltar[hidden]{display:none}

/* ---------- Progresso ---------- */
.wz-prog{
  height:3px;
  background:var(--hair-soft);
  border-radius:99px;
  overflow:hidden;
  margin-bottom:.55rem;
}
.wz-prog i{
  display:block;height:100%;width:20%;
  background:linear-gradient(90deg,var(--rs-green),var(--rs-red) 62%,var(--rs-yellow));
  border-radius:99px;
  transition:width .5s var(--ease);
}
.wz-etapa{
  font-family:var(--mono);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:1.6rem;
}

/* ---------- Palco / transição entre etapas ---------- */
.wz-palco{position:relative;flex:1}

.wz-passo{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .42s var(--ease),transform .5s var(--ease);
}
.wz-passo.on{opacity:1;transform:translateY(0)}

/* ---------- Cabeçalho de etapa ---------- */
.wz-perg{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem,5.4vw,2.5rem);
  line-height:1.06;
  letter-spacing:-.03em;
  margin-bottom:.9rem;
  text-wrap:balance;
}
.wz-perg em{font-style:italic;color:var(--carpet)}

.wz-sub{
  color:var(--ink-2);
  font-size:.96rem;
  line-height:1.55;
  margin:.9rem 0 1.5rem;
  max-width:46ch;
}

/* ---------- ETAPA 1 · Datas e horários ----------
   A fita rola no eixo X. O respiro à direita e a máscara de
   esmaecimento avisam que há mais dias adiante — sem isso o
   último cartão fica cortado no talho e parece defeito. */
.wz-datas{
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  padding:.15rem 1.6rem 1rem .15rem;
  margin:0 -.15rem;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.4rem),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 2.4rem),transparent 100%);
}
/* Sem máscara quando tudo já cabe na tela. */
@supports (animation-timeline:scroll()){
  .wz-datas{animation:desmascarar linear both;animation-timeline:scroll(self inline);}
  @keyframes desmascarar{
    to{-webkit-mask-image:linear-gradient(to right,#000 100%,#000 100%);
               mask-image:linear-gradient(to right,#000 100%,#000 100%);}
  }
}
.wz-data{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;
  min-width:76px;min-height:var(--touch);
  padding:.7rem .55rem;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:11px;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),
             transform .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wz-data:hover{border-color:var(--ink-3)}
.wz-data.sel{
  border-color:var(--carpet);
  background:var(--carpet-soft);
  box-shadow:inset 0 0 0 1px var(--carpet);
}
.wz-data-sem{
  font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.wz-data.sel .wz-data-sem{color:var(--carpet)}
.wz-data-dia{
  font-family:var(--serif);
  font-size:1.5rem;line-height:1.1;
  font-variant-numeric:lining-nums tabular-nums;
}
.wz-data-mes{
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.wz-data.sel .wz-data-mes{color:var(--carpet)}

/* Dia sem nenhum horário livre */
.wz-data.lotado{
  opacity:.34;
  cursor:not-allowed;
  background:var(--paper-3);
}
.wz-data.lotado .wz-data-dia{text-decoration:line-through}

/* Gancho de conversão da etapa 1 */
.wz-gancho{
  display:block;
  margin:0 0 1.5rem;
  padding:.85rem 1.05rem;
  background:#FFFBEB;
  border-left:3px solid var(--rs-yellow);
  border-radius:0 9px 9px 0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--ink-2);
}
.wz-gancho strong{color:var(--ink);font-weight:650}

.wz-horarios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:.6rem;
  margin-top:.3rem;
}
.wz-hora{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--touch);
  padding:.85rem .7rem;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:10px;
  font-size:1rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wz-hora:hover:not(:disabled){border-color:var(--ink-3)}
.wz-hora.sel{
  background:var(--carpet);
  border-color:var(--carpet);
  color:#fff;
}
.wz-hora:disabled{
  opacity:.38;cursor:not-allowed;
  text-decoration:line-through;
}

.wz-rotulo{
  font-family:var(--mono);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
  margin:1.5rem 0 .7rem;
}

/* ---------- Campos ---------- */
.wz-campo{
  display:block;width:100%;
  min-height:var(--touch);
  padding:.85rem 1rem;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:10px;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.wz-campo::placeholder{color:var(--ink-3)}
/* Foco = atenção (neutro). Vermelho só quando há erro de fato. */
.wz-campo:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(20,18,16,.09);
}
.wz-campo.miss:focus{
  border-color:var(--rs-red);
  box-shadow:0 0 0 3px var(--carpet-soft);
}
.wz-campo.miss{
  border-color:var(--rs-red);
  background:var(--carpet-soft);
}

select.wz-campo{
  cursor:pointer;
  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 d='M1 1.5L6 6.5L11 1.5' stroke='%237C746C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.6rem;
}

.wz-label{
  display:block;
  font-size:.8rem;font-weight:600;
  color:var(--ink-2);
  margin:0 0 .4rem;
}
.wz-campo-grupo{margin-bottom:1.05rem}

/* ---------- Opções (cards de escolha única) ---------- */
.wz-opcoes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:.6rem;
}
.wz-opcao{
  display:flex;align-items:center;
  min-height:var(--touch);
  padding:.9rem 1.05rem;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:10px;
  font-size:.94rem;font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wz-opcao:hover{border-color:var(--ink-3)}
.wz-opcao.sel{
  border-color:var(--carpet);
  background:var(--carpet-soft);
  box-shadow:inset 0 0 0 1px var(--carpet);
  color:var(--carpet-deep);
  font-weight:600;
}

/* Metragem do cartão de tamanho */
.wz-opcao{position:relative}
.wz-opcao-m2{
  margin-left:auto;
  padding-left:.7rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  color:var(--ink-3);
  font-weight:500;
}
.wz-opcao.sel .wz-opcao-m2{color:var(--carpet)}

/* ---------- Personalizado: frente × profundidade ---------- */
.wz-medidas{margin-top:.85rem}
.wz-medidas[hidden]{display:none}
.wz-medidas-campos{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:.6rem;
}
.wz-medidas-x{
  padding-bottom:.85rem;
  font-size:1.05rem;
  color:var(--ink-3);
}

/* ---------- Previsão de investimento ---------- */
.wz-orc{
  margin-top:1.4rem;
  padding:1.15rem 1.25rem;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-left:3px solid var(--rs-green);
  border-radius:0 12px 12px 0;
}
.wz-orc[hidden]{display:none}
.wz-orc-rot{
  font-family:var(--mono);
  font-size:.61rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:.35rem;
}
.wz-orc-valor{
  font-family:var(--serif);
  font-size:clamp(2rem,7vw,2.7rem);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--green-deep);
  font-variant-numeric:lining-nums tabular-nums;
}
.wz-orc-ast{
  font-size:.5em;
  vertical-align:super;
  color:var(--ink-3);
  margin-left:.08em;
}
.wz-orc-m2{
  margin-top:.3rem;
  font-size:.84rem;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.wz-orc-nota{
  margin-top:.75rem;
  font-size:.76rem;
  line-height:1.5;
  color:var(--ink-3);
}
.wz-orc-nota--solta{margin-top:.7rem;padding:0 .2rem}

.wz-orc--neutro{border-left-color:var(--hair)}
.wz-orc-neutro{font-size:.9rem;line-height:1.55;color:var(--ink-2)}

/* Linha de destaque no resumo */
.wz-linha--destaque{background:var(--green-soft)}
.wz-linha--destaque .wz-linha-rot{color:var(--green-deep)}
.wz-linha--destaque .wz-linha-val{
  color:var(--green-deep);
  font-weight:700;
  font-size:1.05rem;
}

/* ---------- Chips (múltipla escolha) ---------- */
.wz-chips{display:flex;flex-wrap:wrap;gap:.55rem}
.wz-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:var(--touch);
  padding:.7rem 1.15rem;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:99px;
  font-size:.92rem;font-weight:500;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wz-chip:hover{border-color:var(--ink-3)}
.wz-chip.sel{
  border-color:var(--rs-green);
  background:var(--green-soft);
  color:var(--green-deep);
  font-weight:600;
}
.wz-chip-marca{
  width:15px;height:15px;flex-shrink:0;
  border:1.5px solid var(--hair);
  border-radius:4px;
  position:relative;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.wz-chip.sel .wz-chip-marca{
  background:var(--rs-green);border-color:var(--rs-green);
}
.wz-chip.sel .wz-chip-marca::after{
  content:'';position:absolute;
  left:4.4px;top:1.4px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ---------- Ações ---------- */
.wz-acao{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin-top:1.7rem;
}
.wz-acao .btn-primary{flex:1 1 auto;min-width:180px}

.wz-aviso{
  flex:1 0 100%;
  font-size:.86rem;
  color:var(--carpet);
  font-weight:500;
}
.wz-aviso[hidden]{display:none}

/* ---------- ETAPA 5 · Resumo ---------- */
.wz-resumo{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:13px;
  overflow:hidden;
}
.wz-resumo-topo{
  padding:1.15rem 1.25rem;
  background:var(--paper-3);
  border-bottom:1px solid var(--hair);
}
.wz-resumo-quando{
  font-family:var(--serif);
  font-size:1.32rem;line-height:1.2;
  letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
.wz-resumo-hora{color:var(--carpet);font-style:italic}

.wz-linha{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.1rem;
  padding:.82rem 1.25rem;
  border-bottom:1px solid var(--hair-soft);
}
.wz-linha:last-child{border-bottom:0}
.wz-linha-rot{
  font-family:var(--mono);
  font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
  flex-shrink:0;
}
.wz-linha-val{
  font-size:.94rem;font-weight:500;
  text-align:right;
  overflow-wrap:anywhere;
}

.wz-nota{
  display:flex;gap:.7rem;
  margin-top:1.15rem;padding:.95rem 1.1rem;
  background:var(--green-soft);
  border-left:3px solid var(--rs-green);
  border-radius:0 9px 9px 0;
  font-size:.88rem;line-height:1.5;
  color:var(--green-deep);
}

/* ---------- Sucesso ---------- */
.wz-ok{text-align:center;padding:2rem 0 1rem}
.wz-ok-selo{
  width:66px;height:66px;
  margin:0 auto 1.5rem;
  border-radius:50%;
  background:var(--green-soft);
  border:2px solid var(--rs-green);
  display:flex;align-items:center;justify-content:center;
}
.wz-ok-selo::after{
  content:'';
  width:15px;height:27px;
  border:solid var(--rs-green);border-width:0 3px 3px 0;
  transform:rotate(45deg) translate(-2px,-3px);
}
.wz-ok .wz-sub{margin-left:auto;margin-right:auto}
.wz-ok .wz-resumo{text-align:left;margin-top:1.6rem}

/* ---------- Overlay de envio ---------- */
.wz-enviando{
  position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;
  background:rgba(251,250,248,.94);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s .3s;
}
.wz-enviando.on{opacity:1;visibility:visible;transition-delay:0s}
.wz-pulso{
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--hair);
  border-top-color:var(--carpet);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.wz-enviando p{
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- Rodapé ---------- */
.rodape{
  margin-top:2.5rem;padding-top:1.3rem;
  border-top:1px solid var(--hair-soft);
  font-size:.76rem;
  color:var(--ink-3);
  line-height:1.5;
}

/* ---------- Desktop ---------- */
@media (min-width:760px){
  .wrap{padding:0 2rem 4rem}
  .topo{padding:2.2rem 0 1.4rem}
  .topo-logo{height:58px}
  .wz-etapa{margin-bottom:2.2rem}
  .wz-datas{flex-wrap:nowrap}
}

/* Telas muito estreitas (≤360px) */
@media (max-width:380px){
  .wz-opcoes{grid-template-columns:1fr}
  .wz-horarios{grid-template-columns:1fr 1fr}
  .wz-acao .btn-primary{min-width:100%}
}
