/* ============================================================
   Cadastro: formulário, tabela que se revela, botão-jornada,
   comprovante carimbado (micro-interações do brief §3)
   ============================================================ */

/* ---------- Tabela que se revela (preview borrado) ---------- */
.tabela-preview {
  background: var(--c50);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.tabela-preview .lock-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--gray6);
  font-size: var(--fs-14);
  margin-bottom: var(--sp-4);
}
.tabela-preview .lock-row svg { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.tabela-preview .lock-row.unlocked { color: var(--success); font-weight: 600; }
.tabela-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}
.tabela-preview th {
  text-align: left;
  font-size: var(--fs-12);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gray6);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1.5px solid var(--g100);
}
.tabela-preview td {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--g50);
}
.tabela-preview td.preco {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  filter: blur(5px);
  transition: filter .45s var(--ease);
  user-select: none;
}
.tabela-preview tr.revealed td.preco { filter: blur(0); }

/* ---------- Formulário ---------- */
.lead-form { display: grid; gap: var(--sp-4); scroll-margin-top: calc(var(--nav-h) + 12px); }
.field { display: grid; gap: 6px; position: relative; }
.field label {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--c50);
}
.field input,
.field select {
  width: 100%;
  min-height: 52px;
  padding: 12px 44px 12px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--g500);
  background: rgba(240, 242, 236, .06);
  color: var(--c50);
  font-family: var(--ui);
  font-size: var(--fs-16);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field select { appearance: none; padding-right: 40px; }
.field select option { color: var(--ink); background: var(--c50); }
.field .select-arrow {
  position: absolute;
  right: 14px;
  bottom: 18px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--g300);
}
.field input::placeholder { color: var(--g500); }
.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--t500);
  box-shadow: var(--focus);
  outline: none;
}

/* validação em tempo real: check verde inline */
.field .valid-check {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 20px;
  height: 20px;
  color: var(--success);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  pointer-events: none;
}
.field.is-valid .valid-check { opacity: 1; transform: scale(1); }
.field.is-valid input { border-color: var(--success); }

/* erro só no blur: shake 4px uma vez + mensagem que aponta a saída */
.field.is-error input,
.field.is-error select { border-color: var(--error); animation: field-shake .3s ease 1; }
.field .error-msg {
  display: none;
  font-size: var(--fs-12);
  color: var(--t100);
  background: rgba(192, 57, 43, .25);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  width: fit-content;
}
.field.is-error .error-msg { display: block; }
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* categorias de interesse: input chips */
.chips-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips-group .chip {
  border-color: var(--g500);
  color: var(--g100);
  min-height: 40px;
  font-size: var(--fs-12);
}
.chips-group .chip[aria-pressed="true"] {
  background: var(--c50);
  border-color: var(--c50);
  color: var(--g900);
}

/* honeypot invisível (anti-spam) — nunca remover */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-privacy {
  font-size: var(--fs-12);
  color: var(--g300);
  margin: 0;
}

/* ---------- Botão-jornada ---------- */
.btn-journey { width: 100%; }
.btn-journey .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-journey.loading { pointer-events: none; }
.btn-journey.loading .spinner { display: inline-block; }
.btn-journey.loading::after { display: none; }
.btn-journey.success {
  background: var(--success);
  pointer-events: none;
}
.btn-journey.success::after { display: none; }
.btn-journey .check-icon { width: 22px; height: 22px; display: none; }
.btn-journey.success .check-icon { display: inline-block; }
.btn-journey .check-icon path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.btn-journey.success .check-icon path {
  animation: draw-check .4s var(--ease) forwards;
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }

/* ---------- Comprovante carimbado ---------- */
.receipt {
  display: none;
  position: relative;
  background: var(--c100);
  color: var(--ink);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  box-shadow: var(--shadow-lg);
  /* borda inferior rasgada (zigzag) */
  --zz: 12px;
  -webkit-mask-image: linear-gradient(#000 0 0), conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) var(--zz) repeat-x;
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(#000 0 0), conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) var(--zz) repeat-x;
  mask-composite: subtract;
}
.receipt.show { display: block; }
.receipt-header {
  font-size: var(--fs-12);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--g700);
  border-bottom: 1.5px dashed var(--gray3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}
.receipt-line {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  margin-bottom: var(--sp-2);
}
.receipt-line .dots {
  flex: 1;
  border-bottom: 2px dotted var(--gray3);
  transform: translateY(-4px);
}
.receipt-line .value { font-weight: 600; }

/* carimbo que bate no papel */
.receipt-stamp {
  position: absolute;
  right: 18px;
  bottom: 26px;
  padding: 8px 18px;
  border: 2.5px solid currentColor;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: var(--fs-16);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  transform: rotate(-7deg);
  color: var(--success);
  mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-size: cover;
}
.receipt-stamp::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px dashed currentColor;
  border-radius: 2px;
}
.receipt-stamp.error { color: var(--t600); }
.receipt.show .receipt-stamp { animation: stamp-in .42s var(--ease) both; animation-delay: .25s; }
@keyframes stamp-in {
  0% { transform: rotate(-7deg) scale(2.4); opacity: 0; }
  60% { transform: rotate(-7deg) scale(.92); opacity: 1; }
  80% { transform: rotate(-7deg) scale(1.05); }
  100% { transform: rotate(-7deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .field.is-error input, .field.is-error select { animation: none; }
  .receipt.show .receipt-stamp { animation: none; }
  .btn-journey .spinner { animation-duration: 1.4s; }
  .tabela-preview td.preco { transition: none; }
}