@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Archivo', system-ui, sans-serif;
}

/* ── Clash Display: títulos, valores, CTAs — sempre bold + itálico + caixa alta (Manual de Marca Nexis 2.0) ── */
h1, h2, h3, h4, h5,
.font-grotesk, .font-display {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Valores monetários em destaque (hero, totais de checkout) */
.price, .valor, [data-price],
.text-price {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* ── Evita zoom automático do iOS Safari ao focar campos de formulário ──
   Safari dá zoom na página quando o campo focado tem font-size < 16px.
   Trava só a fonte do input em mobile (não mexe no tamanho visual dos
   text-xs/text-sm de resto do design, nem no zoom manual do usuário). */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── input type=date no iOS Safari, quando vazio, aparece como um retângulo
   cinza sólido (o navegador aplica a aparência nativa do controle e ignora o
   fundo branco/borda que o resto do formulário usa) — remove essa aparência
   nativa e força fundo branco pra ficar igual aos outros campos do form. ── */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
}