/* Wi-Fi Rua do Lazer - sem fontes ou arquivos externos (o hotspot bloqueia antes do login) */
:root {
  --fundo: #f6f1e8;
  --cartao: #fffdf9;
  --texto: #2b2420;
  --suave: #6d625a;
  --linha: #e4d9c9;
  --marca: #b4532a;
  --marca-escura: #8f3f1e;
  --verde: #2f7a4f;
  --alerta-fundo: #fbe9e4;
  --alerta-texto: #8a2a14;
  --raio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1c1714;
    --cartao: #262019;
    --texto: #f1e9df;
    --suave: #b5a99d;
    --linha: #3c332b;
    --marca: #e07a4c;
    --marca-escura: #f0956b;
    --verde: #5fbf86;
    --alerta-fundo: #3a211a;
    --alerta-texto: #f6b4a0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--marca); }

.pagina { min-height: 100vh; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; padding: 0 16px; }

.topo { padding: 22px 0 14px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca strong { display: block; font-size: 1.15rem; letter-spacing: .01em; }
.marca div span { display: block; font-size: .85rem; color: var(--suave); }
.selo {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--marca); color: #fff;
}

.conteudo { flex: 1; }
.cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 22px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.cartao h1 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 6px; }
.cartao .sub { color: var(--suave); margin: 0 0 18px; }
.centro { text-align: center; }

.form { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo span { font-weight: 600; font-size: .95rem; }
.campo em, .check em { font-style: normal; font-weight: 400; color: var(--suave); }
.campo input {
  width: 100%;
  font: inherit; font-size: 1.05rem;
  padding: 13px 14px;
  border: 1.5px solid var(--linha);
  border-radius: 10px;
  background: var(--fundo);
  color: var(--texto);
}
.campo input:focus { outline: none; border-color: var(--marca); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marca); flex: none; }

.botao {
  margin-top: 4px;
  width: 100%;
  font: inherit; font-weight: 700; font-size: 1.05rem;
  padding: 14px;
  border: 0; border-radius: 10px;
  background: var(--marca); color: #fff;
  cursor: pointer;
}
.botao:active { background: var(--marca-escura); }

.alerta {
  background: var(--alerta-fundo); color: var(--alerta-texto);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: .92rem;
}
.alerta ul { margin: 0; padding-left: 18px; }

.ok {
  width: 64px; height: 64px; margin: 4px auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde);
}

.texto h2 { font-size: 1rem; margin: 18px 0 4px; }
.texto p, .texto li { color: var(--texto); font-size: .95rem; }
.texto ul { padding-left: 20px; }
.aviso { background: var(--alerta-fundo); color: var(--alerta-texto); padding: 8px 12px; border-radius: 8px; font-size: .85rem !important; }

.rodape { padding: 20px 0 28px; text-align: center; font-size: .85rem; color: var(--suave); display: flex; justify-content: center; gap: 8px; }
.rodape a { color: var(--suave); }