:root {
  --preto: #0a0a0a;
  --branco: #ffffff;
  --cinza-1: #f2f2f2;
  --cinza-2: #dadada;
  --cinza-3: #555555;
  --cinza-4: #bdbdbd;
  --erro: #b3261e;
  --ok: #1b5e20;
  --titulo: "Bebas Neue", "Arial Narrow", sans-serif;
  --texto: "Montserrat", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--branco); color: var(--preto); font-family: var(--texto); line-height: 1.5; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.titulo { font-family: var(--titulo); font-weight: 400; letter-spacing: 1px; line-height: .95; margin: 0; }
.rotulo { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--cinza-3); margin: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border: 1px solid var(--preto); background: var(--preto); color: var(--branco); font-weight: 600; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 0; }
.btn:hover { background: #2a2a2a; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.claro { background: var(--branco); color: var(--preto); }
.btn.claro:hover { background: var(--cinza-1); }
.btn.contorno { background: transparent; color: inherit; border-color: currentColor; }
.btn.pequeno { min-height: 40px; padding: 0 14px; font-size: 12px; }
.btn.perigo { background: var(--branco); color: var(--erro); border-color: var(--erro); }
.btn:focus-visible, .chip:focus-visible, .tam:focus-visible, .card:focus-visible { outline: 3px solid #7a7a7a; outline-offset: 2px; }

/* topo */
.topo { background: var(--preto); color: var(--branco); }
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; flex-wrap: wrap; }
.topo img { height: 52px; width: auto; }
.topo a.link { color: var(--branco); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 12px 0; }

/* chips e tamanhos */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 18px; border: 1px solid var(--preto); background: var(--branco); cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.chip[aria-pressed="true"] { background: var(--preto); color: var(--branco); }
.tamanhos { display: flex; flex-wrap: wrap; gap: 8px; }
.tam { min-width: 48px; min-height: 48px; padding: 0 12px; border: 1px solid var(--preto); background: var(--branco); cursor: pointer; font-weight: 600; }
.tam[aria-pressed="true"] { background: var(--preto); color: var(--branco); }

/* formulários */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo { display: flex; flex-direction: column; gap: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #8a8a8a; background: var(--branco); border-radius: 0; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--preto); outline-offset: 0; }
.ajuda { font-size: 12px; color: var(--cinza-3); margin: 6px 0 0; }
.aviso { padding: 12px 14px; border: 1px solid var(--preto); background: var(--cinza-1); font-size: 14px; }
.aviso.erro { border-color: var(--erro); color: var(--erro); background: #fff5f4; }
.aviso.ok { border-color: var(--ok); color: var(--ok); background: #f3faf3; }
.oculto { display: none !important; }