/*
 * Vindo — padrão visual (cores, letras, espaçamento, forma)
 * Fonte da verdade para o hotsite. Justificativa em identidade-visual-vindo.html.
 * Carregar a letra com:
 * <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
 */
:root {
  /* ---------- Cor: marca (medidas no logo) ---------- */
  --sol: #FEC026;          /* amarelo da marca. Só como preenchimento, nunca como texto em fundo claro (1,6:1). */
  --sol-claro: #FFF3CC;    /* fundo de destaque suave */
  --ambar: #7A5C00;        /* o "amarelo" que pode ser texto em fundo claro (6,1:1 no creme) */
  --verde: #3EA564;        /* o "sim" do logo. Ícones e preenchimentos (3,0:1 no creme). */
  --verde-escuro: #1F7A45; /* texto verde em fundo claro (5,2:1 no creme) */
  --verde-claro: #E3F3E9;  /* fundo de "confirmado" */

  /* ---------- Cor: base ---------- */
  --creme: #FFFBF3;        /* fundo principal */
  --areia: #F6F0E4;        /* fundo de seção alternada e de cartão */
  --linha: #E8DFCF;        /* divisórias decorativas */
  --borda: #8C8474;        /* contorno de campo e de controle (3,6:1 no creme) */
  --noite: #1C1C2E;        /* texto principal (16,2:1 no creme) e fundo das seções escuras */
  --tinta-2: #4A4A5E;      /* texto secundário (8,4:1 no creme) */
  --apagado: #64647A;      /* legendas (5,1:1 na areia) */
  --sobre-noite: #FFFBF3;  /* texto sobre a noite (16,2:1) */
  --sobre-noite-apagado: #B9B9C9; /* legenda sobre a noite (8,6:1) */

  /* ---------- Cor: significado ---------- */
  --recusa: #C7392F;       /* "não vou" e erros (5,0:1 no creme) */
  --whatsapp: #25D366;     /* só no ícone do WhatsApp */

  /* ---------- Letra ---------- */
  --fonte: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --peso-texto: 400;
  --peso-forte: 600;
  --peso-botao: 700;
  --peso-titulo: 800;

  --fs-legenda: 0.875rem;                          /* 14 px */
  --fs-texto: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);   /* 17 a 18 px */
  --fs-apoio: clamp(1.25rem, 0.6vw + 1.1rem, 1.375rem);   /* 20 a 22 px */
  --fs-h3: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);        /* 22 a 28 px */
  --fs-h2: clamp(1.75rem, 3vw + 1rem, 2.5rem);            /* 28 a 40 px */
  --fs-h1: clamp(2.5rem, 6vw + 0.5rem, 4rem);             /* 40 a 64 px */

  --lh-texto: 1.6;
  --lh-titulo: 1.15;
  --ls-titulo: -0.01em;
  --medida: 62ch;          /* largura máxima de um parágrafo */

  /* ---------- Espaçamento (grade de 4 px) ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 128px;

  --largura: 1120px;                       /* contêiner */
  --margem: clamp(16px, 4vw, 24px);        /* respiro lateral */
  --secao: clamp(64px, 10vw, 128px);       /* respiro vertical entre seções */

  /* ---------- Forma ---------- */
  --raio-p: 12px;          /* campos, etiquetas */
  --raio-m: 20px;          /* cartões */
  --raio-pilula: 999px;    /* botões */
  --sombra: 0 2px 4px rgba(28, 28, 46, 0.04), 0 12px 32px rgba(28, 28, 46, 0.08);
  --alvo-minimo: 48px;     /* altura mínima de qualquer coisa clicável */

  /* ---------- Movimento ---------- */
  --tempo: 200ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Base ---------- */
body {
  margin: 0;
  background: var(--creme);
  color: var(--noite);
  font-family: var(--fonte);
  font-size: var(--fs-texto);
  font-weight: var(--peso-texto);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { max-width: var(--medida); margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--e-4); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--alvo-minimo); padding: 0 var(--e-6);
  border-radius: var(--raio-pilula); border: 2px solid transparent;
  font: inherit; font-weight: var(--peso-botao); text-decoration: none; cursor: pointer;
  transition: transform var(--tempo) var(--curva), box-shadow var(--tempo) var(--curva);
}
.botao--principal { background: var(--sol); color: var(--noite); }      /* 10,2:1 */
.botao--secundario { background: transparent; color: var(--noite); border-color: var(--noite); }
.botao:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.botao:focus-visible { outline: 3px solid var(--noite); outline-offset: 3px; }

/* ---------- Seção escura (ex.: "Conheça o Vin") ---------- */
.secao--noite { background: var(--noite); color: var(--sobre-noite); }
.secao--noite .legenda { color: var(--sobre-noite-apagado); }
.secao--noite .destaque { color: var(--sol); }                           /* 10,2:1 */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}