/* Nowalli: a identidade do app (lib/app/theme.dart no nowalli-mobile).
   Asfalto é a pista à noite; Sinal é a bandeira e marca só o que importa. */

@font-face { font-family: "Saira Condensed"; src: url(fonts/SairaCondensed-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url(fonts/SairaCondensed-Black.ttf) format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Saira"; src: url(fonts/Saira.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/IBMPlexMono-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/IBMPlexMono-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --asfalto: #0f1011;
  --pista: #1a1c1e;
  --giz: #f3f2ec;
  --sinal: #d8f23c;
  --apoio: #a4a7a2;
  --melhor: #b78cff;
  --amarelo: #ffcc33;
  --lento: #ff8a3d;
  --borda: rgba(255, 255, 255, 0.08);
  --largura: 72rem;
  --texto: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--asfalto);
  color: var(--giz);
  font: 400 1.0625rem/1.6 "Saira", system-ui, sans-serif;
}

a { color: var(--sinal); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--sinal); color: var(--asfalto); padding: 0.5rem 1rem; z-index: 10; }

/* --- cabeçalho e rodapé --- */

.topo, .rodape, main { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem;
}
.marca { display: flex; align-items: center; gap: 0.55rem; color: var(--giz); text-decoration: none; }
.marca img { height: 1.75rem; width: auto; }
.marca span { font: italic 800 1.6rem/1 "Saira Condensed", sans-serif; letter-spacing: 0.01em; }
.topo nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.topo nav a { color: var(--apoio); text-decoration: none; font: 500 0.8rem/1 "Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.topo nav a:hover, .topo nav a[aria-current="page"] { color: var(--giz); }

.rodape {
  margin-top: 5rem; padding-block: 2rem 3rem; border-top: 1px solid var(--borda);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  color: var(--apoio); font: 400 0.85rem/1.5 "Plex Mono", monospace;
}
.rodape nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.rodape a { color: var(--apoio); }
.rodape a:hover { color: var(--giz); }

/* --- tipografia --- */

.rotulo { font: 500 0.8rem/1.2 "Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sinal); margin: 0 0 0.75rem; }

h1, h2, h3 { font-family: "Saira Condensed", sans-serif; font-weight: 700; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 4.75rem); font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.25rem); margin-top: 3rem; }
h3 { font-size: 1.35rem; margin-top: 2rem; }

/* --- início --- */

.abertura { display: grid; gap: 2.5rem; align-items: center; padding-block: 3rem 2rem; }
.abertura p.lead { color: var(--apoio); font-size: 1.2rem; max-width: 34rem; margin: 1.25rem 0 2rem; }
.abertura h1 em { font-style: normal; color: var(--sinal); }

.botao {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--sinal); color: var(--asfalto); text-decoration: none;
  font: 700 1.25rem/1 "Saira Condensed", sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1rem 1.6rem; border-radius: 14px;
}
.botao[aria-disabled="true"] { background: var(--pista); color: var(--apoio); border: 1px solid var(--borda); cursor: default; }

.tela { border-radius: 18px; border: 1px solid var(--borda); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

.recursos { display: grid; gap: 1rem; margin-top: 3rem; }
.recurso { background: var(--pista); border: 1px solid var(--borda); border-radius: 16px; padding: 1.5rem; }
.recurso h3 { margin: 0 0 0.5rem; font-size: 1.4rem; }
.recurso p { margin: 0; color: var(--apoio); }
.recurso .numero { font: 900 2rem/1 "Saira Condensed", sans-serif; color: var(--melhor); margin-bottom: 0.75rem; }

.dupla { display: grid; gap: 2.5rem; align-items: center; margin-top: 4rem; }
.dupla h2 { margin-top: 0; }
.dupla p { color: var(--apoio); }
.dupla .estreita { max-width: 22rem; justify-self: center; }

.aviso {
  margin-top: 4rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--amarelo);
  background: var(--pista); border-radius: 0 12px 12px 0; color: var(--apoio);
}
.aviso strong { color: var(--giz); }

@media (min-width: 52rem) {
  .abertura { grid-template-columns: 1.1fr 1fr; padding-block: 5rem 3rem; }
  .recursos { grid-template-columns: repeat(3, 1fr); }
  .dupla { grid-template-columns: 1fr 1fr; }
}

/* --- páginas de texto (privacidade, termos, excluir conta) --- */

.documento { max-width: var(--texto); padding-top: 2.5rem; }
.documento .vigencia { color: var(--apoio); font: 400 0.85rem/1.5 "Plex Mono", monospace; margin: 1rem 0 2rem; }
.documento p, .documento li { color: #d7d6d0; }
.documento ul, .documento ol { padding-left: 1.25rem; }
.documento li { margin-block: 0.35rem; }
.documento li strong, .documento p strong { color: var(--giz); }
.documento table { width: 100%; border-collapse: collapse; margin-block: 1rem; font-size: 0.95rem; }
.documento th, .documento td { text-align: left; vertical-align: top; padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--borda); }
.documento th { font: 500 0.75rem/1.3 "Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apoio); }

/* Marca o que ainda falta preencher antes de publicar: impossível de não ver. */
.preencher { background: rgba(255, 138, 61, 0.18); color: var(--lento); padding: 0 0.3em; border-radius: 4px; font-family: "Plex Mono", monospace; font-size: 0.9em; }

.passos { counter-reset: passo; list-style: none; padding: 0 !important; }
.passos li { counter-increment: passo; position: relative; padding: 1rem 1rem 1rem 3.5rem; margin-block: 0.75rem; background: var(--pista); border: 1px solid var(--borda); border-radius: 14px; }
.passos li::before { content: counter(passo); position: absolute; left: 1.1rem; top: 0.85rem; font: 900 1.6rem/1 "Saira Condensed", sans-serif; color: var(--sinal); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}