/* FRADE · identidade v1.0
   Preto minimalista com detalhes. F gótico (New Rocker), maior, e o resto do nome em fonte padrão.
   Lema: Ora et automata. Vermelho só no ícone do app.
   O Prumo aparece com a identidade própria dele (midnight + ciano). */

@font-face { font-family: "New Rocker"; src: url("fontes/new-rocker.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontes/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontes/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontes/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontes/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --preto: #0a0a0a;
  --preto-2: #131313;
  --preto-3: #1b1b1b;
  --linha: #262626;
  --texto: #ededed;
  --texto-2: #a6a6a6;
  --texto-3: #6e6e6e;
  --prumo-fundo: #071923;
  --prumo-sup: #0d2936;
  --prumo-ciano: #16b8ce;
  --prumo-aco: #8299a5;
  --largura: 1080px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--texto); color: var(--preto); }
.caixa { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

/* Wordmark: F gótico maior + RADE em fonte padrão */
.wm { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--texto); line-height: 1; white-space: nowrap; }
.wm .f { font-family: "New Rocker", serif; font-weight: 400; font-size: 1.75em; line-height: .8; margin-right: .06em; }
.wm .r { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: .3em; }
.lema { font-style: italic; color: var(--texto-3); letter-spacing: .04em; }

/* Topo */
.topo { border-bottom: 1px solid var(--linha); }
.topo .caixa { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.topo .wm { font-size: 17px; }
.nav { display: flex; gap: 28px; font-size: 14px; color: var(--texto-2); }
.nav a { text-decoration: none; transition: color .15s; }
.nav a:hover { color: var(--texto); }

/* Abertura */
.abertura { padding: 104px 0 96px; border-bottom: 1px solid var(--linha); }
.abertura .assinatura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-bottom: 64px; }
.abertura .assinatura .wm { font-size: clamp(30px, 6vw, 52px); }
.abertura .assinatura .lema { font-size: clamp(15px, 2vw, 18px); }
.rotulo { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--texto-3); }
.abertura h1 {
  font-weight: 600; font-size: clamp(34px, 5.6vw, 60px); line-height: 1.06; letter-spacing: -.025em;
  margin: 18px 0 24px; max-width: 15ch;
}
.abertura p.lead { font-size: 19px; color: var(--texto-2); max-width: 56ch; margin: 0 0 36px; }
.botao {
  display: inline-block; padding: 14px 22px; background: var(--texto); color: var(--preto);
  border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background .15s;
}
.botao:hover { background: #fff; }

/* Seções */
.secao { padding: 88px 0; border-bottom: 1px solid var(--linha); }
.secao h2 { font-weight: 600; font-size: 30px; letter-spacing: -.015em; margin: 12px 0 40px; line-height: 1.2; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.item { border-top: 1px solid var(--texto); padding-top: 18px; }
.item .num { font-size: 13px; color: var(--texto-3); font-weight: 600; letter-spacing: .1em; }
.item h3 { font-size: 19px; margin: 8px 0 8px; font-weight: 600; }
.item p { margin: 0; color: var(--texto-2); font-size: 15px; }

/* Produto Prumo — identidade própria */
.produto {
  display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 14px; overflow: hidden;
  background: var(--prumo-fundo); color: #e8eef1; border: 1px solid #12303d;
}
.produto .texto { padding: 48px; }
.produto .nome { font-weight: 700; letter-spacing: .22em; font-size: 26px; }
.produto .sub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--prumo-aco); margin-top: 4px; }
.produto p { color: #b5c5cd; margin: 24px 0 0; }
.produto ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.produto li { display: flex; gap: 12px; font-size: 15px; }
.produto li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: 9px; background: var(--prumo-ciano); border-radius: 50%; }
.produto .visual {
  background: radial-gradient(120% 90% at 70% 20%, #0f3646 0%, var(--prumo-sup) 45%, var(--prumo-fundo) 100%);
  display: flex; align-items: center; justify-content: center; padding: 48px; min-height: 320px;
}
.produto .visual svg { width: 58%; max-width: 220px; height: auto; }

/* Contato */
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.contato .email {
  font-size: clamp(20px, 3vw, 28px); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--texto-2); padding-bottom: 4px; word-break: break-all;
}
.contato .email:hover { border-color: var(--texto); }

/* Rodapé */
.rodape { padding: 40px 0 56px; color: var(--texto-3); font-size: 13px; }
.rodape .caixa { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: baseline; }
.rodape .wm { font-size: 13px; color: var(--texto-2); }
.rodape nav { display: flex; gap: 20px; }
.rodape a:hover { color: var(--texto); }

/* Páginas de texto (privacidade, exclusão) */
.documento { padding: 72px 0 96px; }
.documento .caixa { max-width: 760px; }
.documento h1 { font-size: clamp(30px, 5vw, 42px); letter-spacing: -.02em; margin: 14px 0 8px; line-height: 1.15; font-weight: 600; }
.documento .data { color: var(--texto-3); font-size: 14px; margin: 0 0 40px; }
.documento h2 { font-size: 20px; margin: 44px 0 10px; font-weight: 600; }
.documento p, .documento li { color: var(--texto-2); }
.documento strong { color: var(--texto); }
.documento a { color: var(--texto); }
.documento ul { padding-left: 20px; }
.documento li { margin: 6px 0; }
.documento .quadro { background: var(--preto-2); border-left: 2px solid var(--texto); padding: 18px 20px; border-radius: 4px; margin: 24px 0; color: var(--texto-2); }
.documento table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
.documento th, .documento td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; color: var(--texto-2); }
.documento th { font-weight: 600; color: var(--texto); }
.documento td:first-child { color: var(--texto); }

@media (max-width: 820px) {
  .nav { display: none; }
  .abertura { padding: 64px 0 64px; }
  .abertura .assinatura { margin-bottom: 44px; }
  .secao { padding: 64px 0; }
  .grade3 { grid-template-columns: 1fr; gap: 28px; }
  .produto { grid-template-columns: 1fr; }
  .produto .texto { padding: 32px 24px; }
  .produto .visual { min-height: 200px; padding: 32px; }
  .contato { grid-template-columns: 1fr; gap: 20px; }
  .documento table, .documento thead, .documento tbody, .documento tr, .documento th, .documento td { display: block; }
  .documento thead { display: none; }
  .documento td { border: 0; padding: 2px 0; }
  .documento tr { border-bottom: 1px solid var(--linha); padding: 10px 0; }
  .documento td:first-child { font-weight: 600; }
}