/* ===========================================================
   Configurador de orçamento (/criar)

   Mesma linguagem da home: fundo escuro, vidro, coral de destaque.
   Tudo escopado em .criar.
   =========================================================== */

.criar {
  --c-void: #05050a;
  --c-pane: rgba(12, 12, 18, .62);
  --c-pane-2: rgba(255, 255, 255, .045);
  --c-ink: #ffffff;
  --c-ink-2: rgba(255, 255, 255, .72);
  --c-ink-3: rgba(255, 255, 255, .5);
  --c-ink-4: rgba(255, 255, 255, .3);
  --c-line: rgba(255, 255, 255, .12);
  --c-line-2: rgba(255, 255, 255, .24);
  --c-accent: var(--primary, #dc4646);
  --c-ease: cubic-bezier(.22, .68, .28, 1);

  position: relative;
  z-index: 2;
  color: var(--c-ink-2);
  /* A barra inferior do tema é fixa (71px) e cobria o "Avançar" quando ele
     caía no fim da página. O respiro extra tira os botões de baixo dela. */
  padding-bottom: calc(clamp(70px, 10vh, 130px) + 90px);
}

/* ---------- Cabeçalho ---------- */
.criar-head { padding: clamp(50px, 9vh, 100px) 0 clamp(30px, 5vh, 54px); }
.criar-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 0 0 16px;
}
.criar-eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent);
}
.criar-title {
  color: var(--c-ink); font-size: clamp(30px, 5vw, 58px); line-height: 1.04;
  letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; max-width: 17ch;
}
.criar-lede { color: var(--c-ink-2); font-size: clamp(15px, 1.3vw, 17.5px); line-height: 1.7; max-width: 60ch; margin: 0; }

/* ---------- Trilha de progresso ---------- */
.criar-progress {
  list-style: none; margin: clamp(32px, 5vh, 54px) 0 0; padding: 0;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.criar-progress::-webkit-scrollbar { display: none; }
.criar-progress-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap; flex: none;
  transition: background .3s var(--c-ease), border-color .3s;
}
.criar-progress-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600;
  background: rgba(255, 255, 255, .08); color: var(--c-ink-3);
  transition: background .3s, color .3s;
}
.criar-progress-label { font-size: 12.5px; color: var(--c-ink-4); transition: color .3s; }
.criar-progress-item.is-done .criar-progress-dot { background: color-mix(in srgb, var(--c-accent) 32%, transparent); color: #fff; }
.criar-progress-item.is-done .criar-progress-label { color: var(--c-ink-3); }
.criar-progress-item.is-current {
  background: rgba(255, 255, 255, .06); border-color: var(--c-line-2);
}
.criar-progress-item.is-current .criar-progress-dot { background: var(--c-accent); color: #fff; }
.criar-progress-item.is-current .criar-progress-label { color: var(--c-ink); font-weight: 500; }

/* ---------- Grade ---------- */
.criar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

/* ---------- Passo ---------- */
.criar-step { animation: criar-entra .45s var(--c-ease) both; }
@keyframes criar-entra { from { opacity: 0; transform: translateY(14px); } }
.criar-step-n { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-ink-4); margin: 0 0 10px; }
.criar-step-title { color: var(--c-ink); font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; margin: 0 0 8px; }
.criar-step-sub { color: var(--c-ink-3); margin: 0 0 26px; font-size: 15px; }
.criar-dica { font-size: 13px; color: var(--c-ink-4); margin: -14px 0 18px; }

/* ---------- Cartões selecionáveis ---------- */
.criar-cards { display: grid; gap: 12px; }
.criar-cards--3 { grid-template-columns: repeat(3, 1fr); }
.criar-cards--2 { grid-template-columns: repeat(2, 1fr); }

.criar-card {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  text-align: left; width: 100%;
  background: var(--c-pane); border: 1px solid var(--c-line);
  border-radius: 14px; padding: 18px 18px 20px;
  color: var(--c-ink-2); cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color .3s, background .3s, transform .3s var(--c-ease);
}
.criar-card:hover { border-color: var(--c-line-2); transform: translateY(-3px); }
.criar-card > .ico { color: var(--c-accent); margin-bottom: 4px; }
.criar-card strong { color: var(--c-ink); font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.criar-card > span { font-size: 13px; line-height: 1.55; color: var(--c-ink-3); }

.criar-card.is-on {
  border-color: var(--c-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 60%), var(--c-pane);
}
.criar-card.is-on::after {
  content: "✓"; position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-accent); color: #fff;
  font-size: 11px; display: grid; place-items: center;
}
.criar-check { display: none; }

/* ---------- Chips (nicho) ---------- */
.criar-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.criar-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  background: var(--c-pane); border: 1px solid var(--c-line);
  color: var(--c-ink-2); font-size: 14px; cursor: pointer;
  transition: all .25s var(--c-ease);
}
.criar-chip .ico { color: var(--c-ink-3); transition: color .25s; flex: none; }
.criar-chip:hover { border-color: var(--c-line-2); color: var(--c-ink); }
.criar-chip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.criar-chip.is-on .ico { color: #fff; }

/* ---------- Prévia de layout ----------
   Um mock da página desenhado em CSS com a paleta do próprio estilo. */
.criar-preview {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 9px; overflow: hidden; margin-bottom: 12px;
  background: var(--p0); padding: 7px;
  display: grid; gap: 5px; grid-template-rows: 8px 1fr;
  border: 1px solid rgba(0, 0, 0, .1);
}
.criar-preview i { display: block; border-radius: 3px; background: var(--p1); opacity: .16; }
.criar-preview i:first-child { opacity: .3; }
.criar-preview i:nth-child(2) { background: var(--p2); opacity: .9; }
.criar-preview--solto { grid-template-rows: 8px 1fr 10px; }
.criar-preview--denso { grid-template-rows: 8px 1fr 1fr; gap: 4px; }
.criar-preview--revista { grid-template-rows: 8px 1fr; grid-template-columns: 1.4fr 1fr; }
.criar-preview--revista i:nth-child(1) { grid-column: 1 / -1; }
.criar-preview--blocos { grid-template-rows: 8px 1fr 1fr; grid-template-columns: 1fr 1fr; }
.criar-preview--blocos i:nth-child(1) { grid-column: 1 / -1; }

/* ---------- Upload da logo ---------- */
.criar-upload { display: block; cursor: pointer; }
.criar-upload-alvo {
  display: grid; place-items: center; gap: 8px; text-align: center;
  min-height: 230px; padding: 30px;
  border: 1.5px dashed var(--c-line-2); border-radius: 16px;
  background: var(--c-pane-2);
  transition: border-color .3s, background .3s;
}
.criar-upload:hover .criar-upload-alvo { border-color: var(--c-accent); background: rgba(255, 255, 255, .06); }
.criar-upload-alvo .ico { color: var(--c-accent); }
.criar-upload-alvo strong { color: var(--c-ink); font-weight: 500; }
.criar-upload-alvo span { font-size: 13px; color: var(--c-ink-4); }
.criar-upload-alvo img { max-width: 240px; max-height: 150px; object-fit: contain; }

/* ---------- Recursos especiais ---------- */
.criar-especiais { display: grid; gap: 16px; }
.criar-especial {
  position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 20px;
  align-items: center; text-align: left; width: 100%; cursor: pointer;
  background: var(--c-pane); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 20px; color: var(--c-ink-2);
  backdrop-filter: blur(10px);
  transition: border-color .3s, background .3s, transform .3s var(--c-ease);
}
.criar-especial:hover { border-color: var(--c-line-2); transform: translateY(-3px); }
.criar-especial.is-on {
  border-color: var(--c-accent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c-accent) 13%, transparent), transparent 55%), var(--c-pane);
}
.criar-especial.is-on::after {
  content: "✓"; position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-accent); color: #fff; font-size: 12px;
  display: grid; place-items: center;
}
.criar-especial-txt { display: flex; flex-direction: column; gap: 7px; }
.criar-especial-txt .ico { color: var(--c-accent); }
.criar-especial-txt strong { color: var(--c-ink); font-size: 17px; font-weight: 500; }
.criar-especial-txt > span { font-size: 13.5px; line-height: 1.6; color: var(--c-ink-3); }
.criar-especial-txt em {
  font-style: normal; font-size: 12px; color: var(--c-ink-4);
  border-left: 2px solid var(--c-line-2); padding-left: 10px; margin-top: 4px;
}

/* Demonstração desenhada em CSS — identifica o recurso sem simular resultado real */
.criar-especial-demo {
  display: block; aspect-ratio: 1; border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .07), transparent 70%), #0a0a12;
  border: 1px solid var(--c-line); position: relative; overflow: hidden;
}
/* 3D: peças isométricas empilhando */
.criar-especial-demo--montagem_3d::before,
.criar-especial-demo--montagem_3d::after {
  content: ""; position: absolute; left: 50%; width: 54px; height: 54px;
  transform: translateX(-50%) rotateX(58deg) rotateZ(45deg);
  border: 1.5px solid var(--c-accent); border-radius: 4px;
  background: color-mix(in srgb, var(--c-accent) 16%, transparent);
}
.criar-especial-demo--montagem_3d::before { top: 36%; }
.criar-especial-demo--montagem_3d::after {
  top: 54%; border-color: #6e6bd6;
  background: color-mix(in srgb, #6e6bd6 16%, transparent);
}
/* Provador: silhueta + peça sobreposta */
.criar-especial-demo--provador_ia::before {
  content: ""; position: absolute; left: 50%; top: 24%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.criar-especial-demo--provador_ia::after {
  content: ""; position: absolute; left: 50%; top: 44%; transform: translateX(-50%);
  width: 62px; height: 60px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-accent) 70%, transparent), color-mix(in srgb, #c0567f 60%, transparent));
  box-shadow: 0 0 0 1px var(--c-line);
}

/* ---------- Campos ---------- */
.criar-textarea,
.criar-campos input {
  width: 100%; background: var(--c-pane-2); color: var(--c-ink);
  border: 1px solid var(--c-line-2); border-radius: 12px;
  padding: 14px 16px; font-size: 14.5px; font-family: inherit;
}
.criar-textarea::placeholder, .criar-campos input::placeholder { color: var(--c-ink-4); }
.criar-textarea:focus, .criar-campos input:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 20%, transparent);
}
.criar-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.criar-campos label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--c-ink-3); }
.criar-nota { font-size: 12.5px; color: var(--c-ink-4); margin: 14px 0 0; }
.criar-erro { color: #ff8a8a; font-size: 13.5px; margin: 14px 0 0; }
.criar-final { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* ---------- Botões ---------- */
.criar-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  padding: 12px 28px; border: 1px solid transparent; cursor: pointer;
  transition: all .3s var(--c-ease);
}
.criar-btn--primary { background: var(--c-accent); color: #fff; }
.criar-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px var(--c-accent); }
.criar-btn--primary[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.criar-btn--ghost { border-color: var(--c-line-2); color: var(--c-ink-2); background: transparent; }
.criar-btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }
.criar-btn--lg { padding: 15px 38px; font-size: 15px; }
.criar-nav { display: flex; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.criar-nav [data-avancar] { margin-left: auto; }

/* ---------- Resumo lateral ---------- */
.criar-resumo-sticky { position: sticky; top: 100px; display: grid; gap: 16px; }
.criar-monta {
  position: relative; aspect-ratio: 1;
  background: var(--c-pane); border: 1px solid var(--c-line);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px);
}
.criar-monta canvas { width: 100%; height: 100%; display: block; }
.criar-monta-vazio {
  position: absolute; inset: 0; display: grid; place-items: center;
  margin: 0; padding: 24px; text-align: center;
  font-size: 13px; color: var(--c-ink-4);
}

.criar-porte { background: var(--c-pane); border: 1px solid var(--c-line); border-radius: 14px; padding: 16px 18px; }
.criar-porte-barra { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.criar-porte-barra i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-accent), #e87a4d, #6e6bd6);
  transition: width .6s var(--c-ease);
}
.criar-porte p { margin: 10px 0 0; font-size: 12.5px; color: var(--c-ink-3); }

.criar-lista {
  list-style: none; margin: 0; padding: 16px 18px;
  background: var(--c-pane); border: 1px solid var(--c-line); border-radius: 14px;
  display: grid; gap: 10px; max-height: 300px; overflow-y: auto;
}
.criar-lista li { font-size: 13px; color: var(--c-ink-2); display: flex; gap: 9px; align-items: baseline; }
.criar-lista li b { color: var(--c-ink-4); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; min-width: 74px; }
.criar-lista-vazia { color: var(--c-ink-4) !important; }

/* ---------- Sucesso ---------- */
.criar-sucesso { text-align: center; padding: clamp(40px, 8vh, 80px) 0; }
.criar-sucesso .ico { color: var(--c-accent); }
.criar-sucesso h2 { color: var(--c-ink); margin: 18px 0 10px; font-size: clamp(22px, 3vw, 32px); }
.criar-sucesso p { color: var(--c-ink-2); max-width: 46ch; margin: 0 auto 26px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .criar-grid { grid-template-columns: 1fr; }
  .criar-resumo-sticky { position: static; grid-template-columns: 240px 1fr; align-items: start; }
  .criar-monta { grid-row: span 2; }
}
@media (max-width: 860px) {
  .criar-cards--3 { grid-template-columns: repeat(2, 1fr); }
  .criar-especial { grid-template-columns: 1fr; }
  .criar-especial-demo { max-width: 170px; }
}
@media (max-width: 560px) {
  .criar-cards--3, .criar-cards--2 { grid-template-columns: 1fr; }
  .criar-campos { grid-template-columns: 1fr; }
  .criar-resumo-sticky { grid-template-columns: 1fr; }
  .criar-progress-label { display: none; }
  .criar-progress-item { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .criar-step { animation: none; }
  .criar-card, .criar-chip, .criar-especial, .criar-btn, .criar-porte-barra i { transition: none; }
}

/* ===========================================================
   Complementos: cor da marca, agendamento, pular etapa
   =========================================================== */

.criar-subtitulo {
  color: var(--c-ink); font-size: 15px; font-weight: 500;
  margin: 28px 0 4px; letter-spacing: -.01em;
}

/* Botão discreto para seguir sem preencher a etapa */
.criar-btn--texto {
  background: none; border: 0; color: var(--c-ink-4);
  text-decoration: underline; text-underline-offset: 3px; padding: 12px 6px;
}
.criar-btn--texto:hover { color: var(--c-ink-2); }

/* ---------- Cor da marca ---------- */
.criar-cores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.criar-cor {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--amostra); border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset;
  transition: transform .2s var(--c-ease), border-color .2s;
}
.criar-cor:hover { transform: scale(1.08); }
.criar-cor.is-on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.criar-cor--livre {
  display: grid; place-items: center; overflow: hidden;
  background: conic-gradient(red, orange, yellow, lime, aqua, blue, magenta, red);
}
.criar-cor--livre input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ---------- Agendamento ---------- */
.criar-reuniao {
  width: 100%; margin-top: 10px; padding: 20px;
  background: var(--c-pane); border: 1px solid var(--c-line); border-radius: 14px;
}
.criar-dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; }
.criar-dia {
  flex: none; display: grid; justify-items: center; gap: 1px; cursor: pointer;
  min-width: 58px; padding: 10px 6px; border-radius: 11px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--c-line); color: var(--c-ink-3);
  transition: all .2s var(--c-ease);
}
.criar-dia i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.criar-dia b { font-size: 17px; color: var(--c-ink); font-weight: 500; }
.criar-dia u { text-decoration: none; font-size: 10px; }
.criar-dia:hover { border-color: var(--c-line-2); }
.criar-dia.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.criar-dia.is-on b { color: #fff; }

.criar-horarios { display: flex; flex-wrap: wrap; gap: 8px; }
.criar-hora {
  padding: 9px 17px; border-radius: 999px; cursor: pointer; font-size: 13px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--c-line); color: var(--c-ink-2);
  transition: all .2s var(--c-ease);
}
.criar-hora:hover { border-color: var(--c-line-2); color: var(--c-ink); }
.criar-hora.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.criar-reuniao-resumo { margin: 14px 0 0; font-size: 13px; color: var(--c-ink-4); }
.criar-reuniao-resumo.is-ok { color: #8fe3b4; }

/* ---------- Campos ---------- */
.criar-campos label em { font-style: normal; color: var(--c-accent); }
.criar-campo--largo { grid-column: 1 / -1; }

/* ---------- Demos dos recursos especiais ---------- */
.criar-especial-demo--ia_personalizada::before {
  content: ""; position: absolute; inset: 28% 24% auto 24%; height: 46%;
  border-radius: 12px; border: 1.5px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
}
.criar-especial-demo--ia_personalizada::after {
  content: "✦"; position: absolute; left: 50%; top: 42%; transform: translateX(-50%);
  color: var(--c-accent); font-size: 22px;
}
.criar-especial-demo--disparo_whatsapp::before,
.criar-especial-demo--disparo_whatsapp::after {
  content: ""; position: absolute; left: 22%; width: 56%; height: 15%;
  border-radius: 10px 10px 10px 2px; background: color-mix(in srgb, #2e9e6b 55%, transparent);
}
.criar-especial-demo--disparo_whatsapp::before { top: 30%; }
.criar-especial-demo--disparo_whatsapp::after { top: 54%; left: 30%; width: 48%; opacity: .55; }

.criar-especial-demo--marketing_api::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px dashed var(--c-accent);
}
.criar-especial-demo--marketing_api::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 5px; background: var(--c-accent);
  box-shadow: -30px -18px 0 -3px #3f8fd0, 30px -18px 0 -3px #c0567f, 0 32px 0 -3px #e87a4d;
}

.criar-especial-demo--fluxo_ia::before {
  content: ""; position: absolute; left: 26%; top: 30%; width: 48%; height: 40%;
  border-left: 1.5px solid var(--c-accent); border-bottom: 1.5px solid var(--c-accent);
  border-bottom-left-radius: 10px;
}
.criar-especial-demo--fluxo_ia::after {
  content: ""; position: absolute; left: 22%; top: 26%; width: 12px; height: 12px;
  border-radius: 3px; background: var(--c-accent);
  box-shadow: 46px 44px 0 0 #6e6bd6;
}

.criar-especial-demo--gateway::before {
  content: ""; position: absolute; left: 24%; top: 34%; width: 52%; height: 32%;
  border-radius: 8px; border: 1.5px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}
.criar-especial-demo--gateway::after {
  content: ""; position: absolute; left: 24%; top: 44%; width: 52%; height: 5px;
  background: var(--c-accent); opacity: .7;
}

/* Aviso de etapa obrigatória, logo acima da navegação do passo. */
.criar-nav-erro {
    margin: 0 0 .75rem;
    padding: .6rem .85rem;
    border-radius: .5rem;
    border: 1px solid color-mix(in srgb, #ff6b6b 45%, transparent);
    background: color-mix(in srgb, #ff6b6b 12%, transparent);
    color: #ffb3b3;
    font-size: .9rem;
}