/*
 * The public pages.
 *
 * The same identity as the panel — black and charcoal, magenta for action,
 * amber for the numbers that mean money, flat colour and type rather than
 * imagery — but a separate file, and deliberately.
 *
 * The panel's stylesheet is emitted by trunk with a hash in its name, which is
 * what lets it be cached forever. These pages are served straight off disk with
 * a stable name, so they cannot share it: the name would have to be known at
 * build time by something that is not built.
 *
 * No webfont, no CDN, no analytics. The server's Content-Security-Policy is
 * `default-src 'none'`, so a request anywhere else would be blocked rather than
 * merely slow — and the first thing a visitor from a WhatsApp link does is
 * decide whether the page loaded.
 */

:root {
  --ink: #0b0b0c;
  --ink-raised: #141416;
  --ink-line: #26262a;
  --paper: #f5f5f5;
  --paper-dim: #a8a8ad;
  --paper-faint: #6e6e75;
  --action: #e6007e;
  --action-hover: #ff2d9b;
  --money: #f2b705;
  --ok: #22c55e;
  --step: 0.5rem;
  --radius: 0.625rem;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "kern", "liga";
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ *
 * Type. Weight 900 against a normal body, with a large jump in size.
 * ------------------------------------------------------------------ */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.25rem, 7vw, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0;
}

a {
  color: var(--action-hover);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--paper);
}

strong {
  color: var(--paper);
  font-weight: 700;
}

/* The dry register: cost, failure, consent, anything legal. */
.plain {
  color: var(--paper-dim);
  font-weight: 400;
}

.faint {
  color: var(--paper-faint);
  font-size: 0.875rem;
}

.money {
  color: var(--money);
}

/* Uppercase with tight spacing: navigation and buttons only. */
.loud {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ *
 * Frame
 * ------------------------------------------------------------------ */

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.topo {
  border-bottom: 1px solid var(--ink-line);
  position: sticky;
  top: 0;
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.topo .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.marca {
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-decoration: none;
}

.marca:hover {
  color: var(--paper);
}

.topo nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.8125rem;
}

.topo nav a {
  color: var(--paper-dim);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.topo nav a:hover {
  color: var(--paper);
}

main {
  padding-bottom: 5rem;
}

section {
  padding: 4rem 0 0;
}

.rodape {
  border-top: 1px solid var(--ink-line);
  margin-top: 5rem;
  padding: 2.5rem 0;
  color: var(--paper-faint);
  font-size: 0.875rem;
}

.rodape .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}

.rodape a {
  color: var(--paper-dim);
  text-decoration: none;
  margin-right: 1.25rem;
}

.rodape a:hover {
  color: var(--paper);
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.capa {
  padding: 5rem 0 1rem;
}

.capa p.chamada {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 2.5vw, 1.375rem);
  color: var(--paper-dim);
  max-width: 42rem;
}

.risco {
  color: var(--action);
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.botao {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  background: var(--action);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  border: 1px solid var(--action);
}

.botao:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: #fff;
}

.botao.quieto {
  background: transparent;
  color: var(--paper);
  border-color: var(--ink-line);
}

.botao.quieto:hover {
  background: var(--ink-raised);
  border-color: var(--paper-faint);
  color: var(--paper);
}

/* ------------------------------------------------------------------ *
 * Cards
 * ------------------------------------------------------------------ */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.card h3 {
  margin-bottom: 0.75rem;
}

.card p {
  color: var(--paper-dim);
}

.passo {
  color: var(--action);
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ *
 * Tables
 * ------------------------------------------------------------------ */

.tabela {
  margin-top: 2rem;
  overflow-x: auto;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}

th,
td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ink-line);
  vertical-align: top;
}

thead th {
  color: var(--paper-faint);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  font-weight: 800;
  background: var(--ink-raised);
}

tbody tr:last-child td {
  border-bottom: 0;
}

td.plain {
  color: var(--paper-dim);
}

.marca-canal {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  color: var(--paper-dim);
  white-space: nowrap;
}

.marca-canal.mkt {
  color: var(--money);
  border-color: var(--money);
}

/* ------------------------------------------------------------------ *
 * Long-form pages: privacy and terms
 * ------------------------------------------------------------------ */

.texto {
  max-width: 44rem;
}

.texto h2 {
  margin-top: 3rem;
  font-size: 1.375rem;
}

.texto h3 {
  margin-top: 2rem;
}

.texto p,
.texto li {
  color: var(--paper-dim);
  margin-top: 1rem;
}

.texto ul {
  padding-left: 1.25rem;
  margin: 0;
}

.texto li::marker {
  color: var(--action);
}

.aviso {
  border: 1px solid var(--money);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 2rem;
  color: var(--money);
  font-size: 0.9375rem;
}

.aviso p {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}