/* Componentes. Nada flutua: separação vem de filete, alternância de faixa e
   espaço. Sem raio de borda e sem sombra em lugar nenhum. */

/* ── Botões ────────────────────────────────────────────────────────────────── */

.btn{
  display:inline-block;
  font-family:var(--titulo);
  font-weight:600; font-size:.9375rem; line-height:1;
  padding:14px 24px;
  border:1px solid var(--azul);
  text-decoration:none;
  cursor:pointer;
  /* Nada levanta e nada escala no hover: só o preenchimento muda. */
  transition:background var(--t-estado) var(--curva-estado),
             border-color var(--t-estado) var(--curva-estado),
             color var(--t-estado) var(--curva-estado);
}
.btn-1{background:var(--azul); color:var(--papel)}
.btn-1:hover{background:var(--azul-claro); border-color:var(--azul-claro); color:var(--papel)}
.btn-2{background:none; color:var(--azul)}
.btn-2:hover{background:var(--azul); color:var(--papel)}

.acoes{display:flex; flex-wrap:wrap; gap:var(--v-2); max-width:none}

/* Link de continuação no fim de uma seção. */
.adiante{margin-top:var(--v-3)}
.adiante a{
  font-weight:600;
  border-bottom:1px solid var(--risco);
  text-decoration:none;
  padding-bottom:2px;
}
.adiante a::after{content:' →'}
.adiante a:hover{border-bottom-color:var(--tinta)}

/* ── Marginália ────────────────────────────────────────────────────────────
   O lugar retórico das opiniões fortes. Aforismo na margem lê como comentário
   de quem conhece o assunto; o mesmo aforismo em título lê como slogan. */

.margem{
  border-left:2px solid var(--azul);
  padding:2px 0 2px var(--v-2);
  margin:var(--v-3) 0;
  max-width:52ch;
  color:var(--tinta-2);
  font-size:.9375rem;
}

/* Nota de ressalva, um degrau acima da marginália. */
.nota{
  border-left:3px solid var(--sinal);
  padding:var(--v-2) 0 var(--v-2) var(--v-3);
  margin:var(--v-4) 0;
  max-width:var(--leitura);
}
.nota::before{
  content:'Nota';
  display:block;
  font:600 .6875rem/1 var(--mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--sinal);
  margin-bottom:var(--v-1);
}
.nota > :last-child{margin-bottom:0}

/* ── Bloco de identificação ────────────────────────────────────────────────── */

.identificacao{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--v-2) var(--v-4);
  margin:var(--v-4) 0 0;
  padding-top:var(--v-3);
  border-top:1px solid var(--risco);
}
.identificacao dt{
  font:600 .6875rem/1.4 var(--mono);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-3);
  margin-bottom:2px;
}
.identificacao dd{margin:0; font-size:.9375rem}

/* ── Tabelas ───────────────────────────────────────────────────────────────
   O comparativo e as camadas de tecnologia são tabela de verdade: é o que são,
   e é o que um leitor técnico espera ler. */

.tabela{
  width:100%;
  border-collapse:collapse;
  margin:var(--v-3) 0;
  font-size:.9375rem;
}
.tabela caption{
  text-align:left;
  font:600 .6875rem/1.4 var(--mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-3);
  padding-bottom:var(--v-1);
}
.tabela th,.tabela td{
  text-align:left;
  vertical-align:top;
  padding:10px 16px 10px 0;
  border-bottom:1px solid var(--risco);
}
.tabela thead th{
  font:600 .8125rem/1.4 var(--titulo);
  color:var(--azul);
  border-bottom:1px solid var(--risco-forte);
}
.tabela tbody th{
  font:400 .9375rem/1.5 var(--titulo);
  color:var(--tinta-2);
  width:34%;
}

/* Envelope de rolagem: tabela larga nunca empurra a página inteira. */
.tabela-rolagem{overflow-x:auto}

/* Quarto e último lugar do verde: a coluna do cenário integrado. O verde marca
   o que passou a estar vivo, e é por isso que ele está aqui e não no título. */
.tabela .integrado{color:var(--verde)}
.tabela thead .integrado{color:var(--verde)}

/* ── Lista numerada com numeral pendurado ──────────────────────────────────── */

.passos{list-style:none; padding:0; margin:var(--v-3) 0; max-width:var(--leitura)}
.passos li{
  display:grid;
  grid-template-columns:3rem minmax(0,1fr);
  gap:var(--v-2);
  padding:var(--v-2) 0;
  border-top:1px solid var(--risco);
  margin:0;
}
.passos li:last-child{border-bottom:1px solid var(--risco)}
.passos .numero{padding-top:.2rem}
.passos h3{margin-bottom:4px}
.passos p{margin:0; font-size:.9375rem; color:var(--tinta-2)}

/* ── Detalhe técnico ───────────────────────────────────────────────────────── */

.detalhe{
  border-top:1px solid var(--risco);
  margin-top:var(--v-2);
  padding-top:var(--v-2);
}
.detalhe summary{
  font:600 .8125rem/1 var(--mono);
  letter-spacing:.04em;
  color:var(--azul);
  cursor:pointer;
}
.detalhe[open] summary{margin-bottom:var(--v-2)}
.detalhe ul{font-size:.9375rem; color:var(--tinta-2)}

/* ── Formulário ────────────────────────────────────────────────────────────
   Sem cartão. Campo retangular sobre o papel, rótulo acima, foco por contorno
   sólido e não por anel translúcido. */

.campo{margin:0 0 var(--v-3); max-width:none}
.campo label{
  display:block;
  font:600 .8125rem/1.4 var(--titulo);
  margin-bottom:6px;
}
.campo .opcional{font-weight:400; color:var(--tinta-3)}
.obrigatorio{color:var(--sinal)}

.campo input,.campo select,.campo textarea{
  width:100%;
  font:400 1rem/1.5 var(--titulo);
  color:var(--tinta);
  background:var(--papel-2);
  border:1px solid var(--risco-forte);
  padding:10px 12px;
}
.campo textarea{resize:vertical; min-height:10rem}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--azul);
  outline-offset:0;
  border-color:var(--azul);
}
.campo [aria-invalid]{border-color:var(--sinal)}

.campo-erro{
  display:block;
  margin-top:6px;
  font-size:.875rem;
  color:var(--sinal);
}

.campo-dupla{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--v-3);
}

.aceite{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
  font-weight:400;
  font-size:.9375rem;
}
.aceite input{width:auto; margin-top:4px}

/* Honeypot: fora da tela, invisível para gente e irresistível para robô. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.aviso{
  border-left:3px solid;
  padding:var(--v-2) var(--v-3);
  margin-bottom:var(--v-3);
  max-width:var(--leitura);
}
.aviso-ok{border-color:var(--azul); background:var(--papel-2)}
.aviso-erro{border-color:var(--sinal); background:var(--papel-2)}
.aviso p{margin:0}

.form-obs{font-size:.875rem; color:var(--tinta-3); margin-top:var(--v-2)}

/* Botão com aparência de link — usado no "Preferências de cookies". */
.form-inline{display:inline}
.link-botao{
  background:none; border:0; padding:0;
  font:inherit; color:inherit;
  text-decoration:underline; cursor:pointer;
}