/* Identidade Hellmann's FOH — brand book Unilever
   Rich Blue #002862 · Real Yellow #f6bd00 · Mayo Cream #f1e9dc · Lifted Blue #4687ff */
:root {
  --azul: #002862;
  --azul-claro: #4687ff;
  --amarelo: #f6bd00;
  --creme: #f1e9dc;
  --creme-claro: #faf6ef;
  --tinta: #10203a;
  --tinta-suave: #56637a;
  --borda: #dfd6c6;
  --branco: #fff;
  --ok: #1c7c4a;
  --alerta: #b4341f;
  --sombra: 0 1px 2px rgba(0, 40, 98, .06), 0 8px 24px rgba(0, 40, 98, .08);
  --raio: 14px;
  font-synthesis-weight: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -.02em; margin: 0; }
button, input, select { font: inherit; color: inherit; }
.btn {
  border: 1px solid transparent; border-radius: 999px; padding: .55rem 1.1rem;
  background: var(--azul); color: var(--branco); font-weight: 600; cursor: pointer;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn-amarelo { background: var(--amarelo); color: var(--azul); }
.btn-claro { background: var(--branco); color: var(--azul); border-color: var(--borda); }
.btn:disabled { opacity: .5; cursor: not-allowed; }