:root {
  --noite: #0b1d2a;
  --areia: #f4efe6;
  --areia2: #e7decf;
  --sol: #ff6b35;
  --tinta: #13222e;
  --tinta2: #4a5862;
  --alerta: #8a3412;
  --alerta-fundo: #ffe2d3;
  --lagoa: #0f4c5c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--areia);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

main { max-width: 26rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }

.marca { margin: 0 0 2rem; font-weight: 900; letter-spacing: 0.18em; color: var(--noite); }
.marca span { color: var(--sol); }
.marca a { color: inherit; text-decoration: none; }

/* Páginas de texto longo, como a política de privacidade. */
main.texto { max-width: 42rem; }
main.texto h1 { font-size: 2.25rem; }
main.texto h2 { margin: 2rem 0 0.5rem; font-size: 1.25rem; line-height: 1.2; color: var(--noite); }
main.texto ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--tinta2); }
main.texto li { margin-bottom: 0.5rem; }
.dica a { color: var(--lagoa); font-weight: 700; }

h1 { margin: 0 0 0.5rem; font-size: 2.5rem; line-height: 1.05; font-weight: 900; text-transform: uppercase; color: var(--noite); }

p { margin: 0 0 1rem; color: var(--tinta2); }
strong { color: var(--tinta); }

form { display: grid; gap: 0.4rem; margin-top: 1.25rem; }

label { margin-top: 0.6rem; font-weight: 700; color: var(--tinta); }

input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--areia2);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
}
input:focus-visible { outline: 3px solid var(--lagoa); outline-offset: 1px; }

.dica { margin: 0; font-size: 0.875rem; }

.erro { margin: 0.6rem 0 0; padding: 0.75rem; border-radius: 12px; background: var(--alerta-fundo); color: var(--alerta); }

button {
  margin-top: 1rem;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--sol);
  color: var(--noite);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 90ms ease-out;
}
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  min-height: 52px;
  border-radius: 14px;
  background: var(--sol);
  color: var(--noite);
  font-weight: 700;
  text-decoration: none;
}

button:active { transform: scale(0.97); }
button:focus-visible { outline: 3px solid var(--noite); outline-offset: 2px; }
button:disabled { opacity: 0.55; cursor: default; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:active { transform: none; }
}