/* Estilo comum: papel pontilhado, tinta preta, blocos com sombra dura.
   Cada página pode mudar a cor de destaque com --acento no <body>. */
:root {
  --papel: #f4f1ea;
  --tinta: #111;
  --amarelo: #ffd60a;
  --verde: #4ade80;
  --vermelho: #dc2626;
  --acento: var(--amarelo);
}

body {
  background-color: var(--papel);
  background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--tinta);
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.titulo { font-family: 'Archivo Black', 'Space Grotesk', sans-serif; line-height: .95; letter-spacing: -.02em; }
.marca { background: linear-gradient(transparent 55%, var(--acento) 55%); }

/* Blocos */
.bloco {
  border: 3px solid var(--tinta);
  box-shadow: 6px 6px 0 var(--tinta);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bloco-sm { border: 2px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
a.bloco:hover, button.bloco:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--tinta); }
a.bloco:active, button.bloco:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--tinta); }
.seta { transition: transform .15s ease; }
a.bloco:hover .seta, button.bloco:hover .seta { transform: translateX(6px); }

/* Campos de formulário */
.campo {
  width: 100%;
  background: #fff;
  border: 3px solid var(--tinta);
  padding: .55rem .75rem;
  outline: none;
  transition: box-shadow .1s ease;
}
.campo:focus { box-shadow: 4px 4px 0 var(--acento), 4px 4px 0 3px var(--tinta); }

/* Botões */
.btn, .btn-sec {
  border: 3px solid var(--tinta);
  font-weight: 700;
  padding: .55rem 1rem;
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn { background: var(--acento); box-shadow: 4px 4px 0 var(--tinta); text-transform: uppercase; }
.btn-sec { background: #fff; box-shadow: 3px 3px 0 var(--tinta); padding: .35rem .8rem; }
.btn:hover:not(:disabled), .btn-sec:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.btn:active:not(:disabled), .btn-sec:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.btn:disabled, .btn-sec:disabled { opacity: .45; cursor: not-allowed; }
.btn-sec[aria-pressed="true"] { background: var(--acento); }

/* Navegação comum */
.etiqueta { background: #fff; border: 3px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); padding: .25rem .75rem; }
a.etiqueta:hover { background: var(--acento); }