:root {
  --bg: #060810;
  --bg-2: #0B0F1C;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --text: #F2F4FA;
  --text-soft: #9198B0;
  --text-faint: #5A6180;

  --accent1: #4E7CFF;
  --accent2: #9B6BFF;
  --accent-pix: #17E3B8;

  --grad-aurora: linear-gradient(135deg, var(--accent1), var(--accent2));
  --grad-pix: linear-gradient(135deg, var(--accent-pix), var(--accent1));

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* FIX aplicado: z-index: -1 garante que o fundo decorativo nunca
   fique por cima do header/rodapé (bug de empilhamento CSS que
   cobria completamente logo e rodapé antes). */
.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse at top, var(--bg-2), var(--bg) 60%);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  animation: derivar 18s ease-in-out infinite alternate;
}
.blob-1 { width: 480px; height: 480px; top: -160px; left: -120px; background: var(--accent1); }
.blob-2 { width: 420px; height: 420px; bottom: -140px; right: -100px; background: var(--accent2); animation-delay: -6s; }
@media (max-width: 480px) {
  .blob-1, .blob-2 { opacity: 0.18; }
}
@keyframes derivar {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.08); }
}
.grade-pontos {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%);
}

.topo { padding: 44px 24px 12px; display: flex; justify-content: center; text-align: center; position: relative; }
.marca { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.marca-glifo {
  display: grid;
  grid-template-columns: repeat(3, 9px);
  grid-template-rows: repeat(3, 9px);
  gap: 3px;
}
.marca-glifo i { background: var(--text-faint); border-radius: 2px; }
.marca-glifo i:nth-child(2), .marca-glifo i:nth-child(4),
.marca-glifo i:nth-child(6), .marca-glifo i:nth-child(8) { background: var(--accent1); }
.marca-glifo i:nth-child(5) { background: var(--accent2); }
.marca-logo-custom {
  max-height: 44px;
  max-width: 220px;
  object-fit: contain;
  background: rgba(255,255,255,0.92);
  padding: 8px 14px;
  border-radius: 12px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent1);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
}

.marca-texto strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.marca-texto small { display: block; color: var(--text-soft); font-family: var(--mono); font-size: 0.8rem; margin-top: 2px; }

.app { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; position: relative; }

.abas {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 22px; justify-content: center;
}
.aba {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  backdrop-filter: blur(6px);
}
.aba:hover { border-color: var(--border-strong); color: var(--text); }
.aba.ativa {
  background: var(--grad-aurora);
  color: #0A0D16;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 6px 24px -6px rgba(78,124,255,0.5);
}

.grade { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .grade { grid-template-columns: 1fr; } }

.painel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -30px rgba(0,0,0,0.6);
}
.painel-preview { position: sticky; top: 24px; text-align: center; }
@media (max-width: 860px) { .painel-preview { position: static; } }

.painel-titulo { font-size: 1rem; margin: 0 0 16px; font-weight: 600; color: var(--text); }

.conteudo-aba.oculto { display: none; }

.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: 0.76rem; color: var(--text-soft); margin-bottom: 6px; letter-spacing: 0.01em; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .linha-2 { grid-template-columns: 1fr; } }
.linha-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .linha-3 { grid-template-columns: 1fr 1fr; } }

.dica { display: block; color: var(--text-faint); font-size: 0.72rem; margin-top: 5px; }
.dica-arraste {
  font-size: 0.78rem;
  color: var(--text-soft);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin: 4px 0 14px;
}

/* ---------- Toggle switch ---------- */
.campo-toggle { margin-bottom: 6px; }
.campo-toggle .toggle { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle-trilho { display: inline-block; }
.toggle input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.toggle-trilho {
  position: relative;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: background .18s ease;
}
.toggle-trilho::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-soft);
  transition: transform .18s ease, background .18s ease;
}
.toggle input:checked + .toggle-trilho { background: var(--grad-aurora); border-color: transparent; }
.toggle input:checked + .toggle-trilho::after { transform: translateX(18px); background: #fff; }
.toggle-texto { font-size: 0.85rem; color: var(--text); }

/* ---------- Modo impressão: área de posicionamento ---------- */
.moldura-impressao { margin-bottom: 18px; }
.tela-impressao {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(45deg, #1b2030 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(-45deg, #1b2030 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(45deg, transparent 75%, #1b2030 75%) 0 0/18px 18px,
    linear-gradient(-45deg, transparent 75%, #1b2030 75%) 0 0/18px 18px,
    #12151f;
  touch-action: none;
}
.tela-impressao > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.tela-impressao > img.tem-imagem { display: block; }
.qr-arrastavel {
  position: absolute;
  left: 32%; top: 32%;
  width: 36%; aspect-ratio: 1 / 1;
  cursor: grab;
  border: 2px dashed rgba(255,255,255,0.55);
  border-radius: 6px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.12);
}
.qr-arrastavel:active { cursor: grabbing; }
.qr-arrastavel #qrPreviewImpressao { width: 100%; height: 100%; }
.qr-arrastavel #qrPreviewImpressao svg,
.qr-arrastavel #qrPreviewImpressao canvas { width: 100%; height: 100%; display: block; }

.texto-arrastavel {
  position: absolute;
  left: 10%;
  width: 80%;
  cursor: grab;
  border: 2px dashed rgba(255,255,255,0.55);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
}
.texto-arrastavel:active { cursor: grabbing; }
.texto-arrastavel.oculto { display: none; }
.titulo-logo-preview { max-width: 100%; max-height: 100%; object-fit: contain; display: none; }
.dica-proporcao {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}

input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 0.92rem;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=date]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px rgba(78,124,255,0.18);
}
select { color-scheme: dark; }
select option { background: #10131f; color: var(--text); }
input[type=date] { color-scheme: dark; }

/* ---------- Dropdown customizado (substitui a lista nativa do <select>) ---------- */
.select-custom { position: relative; }
.select-original-oculto {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.select-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
}
.select-toggle:hover { border-color: var(--border-strong); }
.select-toggle.aberto, .select-toggle:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px rgba(78,124,255,0.18);
}
.select-toggle-seta {
  color: var(--text-soft);
  font-size: 0.75rem;
  transition: transform .15s ease;
  flex-shrink: 0;
}
.select-toggle.aberto .select-toggle-seta { transform: rotate(180deg); }

.select-lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #10131f;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8);
  max-height: 240px;
  overflow-y: auto;
}
.select-lista.oculto { display: none; }
.select-opcao {
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}
.select-opcao:hover { background: rgba(255,255,255,0.06); }
.select-opcao.selecionada { background: var(--grad-aurora); color: #0A0D16; font-weight: 600; }
.select-opcao.desabilitada { color: var(--text-faint); cursor: not-allowed; }
input[type=color] { width: 100%; height: 42px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; background: rgba(255,255,255,0.03); }
input[type=range] { width: 100%; accent-color: var(--accent1); }
input[type=file] { font-size: 0.82rem; color: var(--text-soft); width: 100%; }
input[type=file]::file-selector-button {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin-right: 10px;
  cursor: pointer;
  font-family: var(--sans);
}

.aviso-privacidade {
  font-size: 0.78rem;
  color: var(--accent-pix);
  background: rgba(23,227,184,0.08);
  border: 1px solid rgba(23,227,184,0.22);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-top: 6px;
}

.divisor { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 24px 0; }

.avancado summary { cursor: pointer; font-size: 0.85rem; color: var(--text-soft); margin-bottom: 16px; list-style: none; }
.avancado summary::-webkit-details-marker { display: none; }
.avancado summary::before { content: "▸ "; color: var(--accent1); }
.avancado[open] summary::before { content: "▾ "; }
.avancado[open] summary { color: var(--text); }

.presets-lista { display: flex; flex-wrap: wrap; gap: 9px; }
.presets-carregando { font-size: 0.78rem; color: var(--text-faint); font-family: var(--mono); }
.preset-item {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, border-color .15s ease;
}
.preset-item:hover { transform: translateY(-2px); }
.preset-item.selecionado { outline: 2px solid var(--accent1); outline-offset: 2px; border-color: var(--accent1); }

.viewfinder {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
}
.canto {
  position: absolute;
  width: 26px; height: 26px;
  pointer-events: none;
  border-style: solid;
  border-width: 3px;
  border-image: var(--grad-aurora) 1;
  filter: drop-shadow(0 0 8px rgba(78,124,255,0.55));
}
.canto-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.canto-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.canto-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.canto-br { bottom: 6px; right: 6px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

.qr-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius-md); }
.qr-preview svg, .qr-preview canvas { max-width: 100%; height: auto; border-radius: 8px; }

.qr-vazio { font-family: var(--mono); font-size: 0.78rem; color: var(--text-faint); line-height: 1.5; background: transparent; }

.acoes-download { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.btn-download {
  flex: 1;
  padding: 12px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-download:hover { border-color: var(--accent1); box-shadow: 0 0 0 3px rgba(78,124,255,0.18); }

.btn-copiar {
  width: 100%;
  padding: 13px 0;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--grad-pix);
  color: #05130F;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(23,227,184,0.5);
  margin-bottom: 10px;
}
.btn-copiar:hover { filter: brightness(1.08); }
.btn-copiar.oculto { display: none; }

.btn-whatsapp {
  width: 100%;
  padding: 13px 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(37,211,102,0.4);
  background: rgba(37,211,102,0.12);
  color: #25D366;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-whatsapp:hover { background: rgba(37,211,102,0.2); }
.btn-whatsapp:disabled { opacity: 0.6; cursor: not-allowed; }

.bloco-acao { margin-bottom: 4px; }
.bloco-acao-titulo {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rodape { text-align: center; padding: 26px 20px 40px; font-size: 0.74rem; color: var(--text-soft); font-family: var(--mono); }

/* ---------- Seletor de idioma ---------- */
.seletor-idioma {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  backdrop-filter: blur(6px);
}
.seletor-idioma a {
  display: block;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  text-decoration: none;
  transition: all 0.15s ease;
}
.seletor-idioma a:hover { color: var(--text); }
.seletor-idioma a.ativo {
  background: var(--grad-aurora);
  color: #0A0D16;
}
@media (max-width: 560px) {
  .seletor-idioma { position: static; justify-content: center; margin: 0 auto 12px; width: fit-content; }
}

/* ---------- Modal (WhatsApp) — vem na Etapa 4, CSS já reservado ---------- */
.qr-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,6,12,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.qr-modal-overlay[hidden] { display: none; }
.qr-modal {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  max-width: 380px;
  width: 100%;
  position: relative;
}
.qr-modal-fechar {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: var(--text-soft);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}