/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* O overflow-x precisa estar TAMBÉM no html, não só no body: com o html
     "visible" (padrão), o valor do body é transferido para o viewport e o
     body em si não corta nada — o translateX(22px) da animação de avanço
     escapava pela direita e, no iOS/WebKit, alargava o viewport visual
     (a tela inteira "encolhia" durante os 340ms). Com o valor no html, o
     clip do body passa a valer no próprio body e corta o passo animado. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: 'Work Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  /* A animação de troca de passo desloca a etapa 22px no eixo X; sem conter o
     transbordo, a barra de rolagem horizontal pisca durante os 340ms (o
     redesign usa overflow-x:hidden no main). `clip` não cria scroll container;
     `hidden` fica de fallback para navegadores antigos. Só tem efeito real
     porque o html acima também define overflow-x (ver comentário lá). */
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===== TOKENS =====
   Fase 2: paleta do redesign (redesign-ref). A troca de valores acontece
   somente aqui; os arquivos consomem as custom properties. */
:root {
  /* Fundo e texto */
  --bg: #f3ecdd;
  --bg-alt: #ece1cb;
  /* seção "na prática" (Fase 4) */
  --ink: #27201a;
  --ink-strong: #27201a;
  --muted: #8a7a66;
  --muted-strong: #6f6254;
  --muted-soft: #a08e76;
  --placeholder: #b9a98e;

  /* Vinho (header/hero): base sólida + stops do gradiente (escuro → claro) */
  --wine: #5a0c13;
  --wine-1: #4c0a11;
  --wine-2: #70101a;
  --wine-3: #891420;
  --wine-4: #891420;
  /* alias do stop claro p/ gradientes de 4 pontos legados */

  /* Ação (CTA) */
  --cta: #b41228;
  --cta-hover: #9a0e22;

  /* Dourado */
  --gold: #d8b366;
  --gold-2: #ecd089;
  --gold-deep: #b8862e;
  --gold-dark: #8f6a14;

  /* Verde: positivo (selo CNPJ, sucesso) e WhatsApp */
  --ok: #1d6e54;
  --wa: #25d366;
  --wa-mid: #1f9d4d;
  /* botão WhatsApp */
  --wa-deep: #178a41;
  /* hover do botão WhatsApp */

  /* Bordas de cartões, inputs e divisores */
  --card-border: #e3d6bd;
  --card-border-soft: #eadfc9;
  --card-border-mid: #e3d6bd;
  --card-border-strong: #d9cbb2;
  --card-border-heavy: #d9cbb2;

  /* Compat: o teal informativo morreu. --info aponta para o verde positivo
     até as fases 5–8 removerem os usos restantes (flow/order/principal). */
  --info: var(--ok);
  --info-hover: #16523f;

  --step-space-y: 48px;
  --step-section-gap: 24px;
  --step-card-gap: 16px;
  --step-action-gap: 20px;
}

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.step {
  display: none;
}

.step.active {
  display: block;
  flex: 1 0 auto;
}

/* Animações de troca de passo (redesign). goToStep() remove a classe, força
   refluxo e recoloca a direção certa, reiniciando a animação em toda transição. */
.step.step-anim-fwd {
  animation: vt-nav-fwd 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.step.step-anim-back {
  animation: vt-nav-back 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes vt-nav-fwd {
  from {
    opacity: 0;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes vt-nav-back {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== UTILITIES ===== */
.mt-4 {
  margin-top: 16px;
}

:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

/* ===== GLOBAL OVERFLOW SAFETY ===== */
.receita-item .ri-value,
.order-header h2,
.order-header p,
.final-card .fc-name,
.final-card .fc-line,
.final-card .fc-pay {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Meta Pixel noscript fallback */
.meta-pixel-noscript {
  display: none;
  height: 1px;
  width: 1px;
}