/*
 * UniversoPDF — tema escuro.
 *
 * O visual se compromete com um único modo (escuro azulado): o fundo animado é
 * parte da identidade, e mantê-lo em duas paletas geraria duas experiências
 * diferentes. Por isso as cores são definidas uma vez só, sem troca por
 * prefers-color-scheme.
 *
 * Organização:
 *   1. fichas de cor e medidas      5. barra do cabeçalho
 *   2. base                         6. grade de cartões
 *   3. fundo animado                7. tela da ferramenta
 *   4. utilidades                   8. conteúdo, rodapé, avisos
 */

/* ---------------- 1. fichas ---------------- */

:root {
  /* ---- fundo ---- */
  --fundo: #070b16;
  --ceu-topo: #142149;       /* clarão no alto da tela */
  --ceu-alto: #080d1c;       /* degradê: começo */
  --ceu-meio: #070b16;       /* degradê: meio */
  --ceu-baixo: #05080f;      /* degradê: fim */

  --brilho-1: #5b8cff;       /* mancha azul */
  --brilho-1-op: .42;
  --brilho-2: #ff5a4d;       /* mancha coral */
  --brilho-2-op: .3;
  --brilho-3: #8048ff;       /* mancha violeta */
  --brilho-3-op: .25;

  --estrelas-op: .8;

  /* ---- superfícies ---- */
  --cartao: rgba(20, 28, 50, .62);
  --superficie: rgba(20, 28, 50, .62);
  --superficie-forte: rgba(24, 33, 58, .94);
  --borda: rgba(126, 150, 210, .16);
  --borda-forte: rgba(126, 150, 210, .32);

  /*
   * O "véu" é o leve clareado sobre o fundo que dá relevo a botões, campos e
   * áreas de soltar arquivo. Num tema escuro ele clareia; num claro, escurece.
   * Por isso é ficha, e não rgba escrito em dez lugares.
   */
  --veu: rgba(255, 255, 255, .04);
  --veu-forte: rgba(255, 255, 255, .08);
  --cabecalho-bg: rgba(7, 11, 22, .74);
  --campo-bg: rgba(10, 16, 32, .8);
  --opcao-bg: #101a33;

  /* ---- texto ---- */
  /*
   * Contraste sobre o fundo, pela fórmula da WCAG:
   *   --texto 18,2:1   --suave 12,9:1   --fraco 8,1:1
   * O mínimo para texto normal é 4,5:1.
   */
  --texto: #f3f6ff;
  --suave: #c6d2ec;
  --fraco: #97a6c8;

  --marca: #ff5a4d;
  --marca-clara: #ff8a7a;
  --astro: #5b8cff;
  --astro-claro: #7ea8ff;
  --ok: #3ddc97;

  --raio: 12px;
  --sombra: 0 10px 40px rgba(2, 6, 20, .55);
  --sombra-alta: 0 16px 44px rgba(2, 6, 20, .7);

  color-scheme: dark;
}

/*
 * Cores dos ícones. Cada ferramenta recebe a classe (cor-vermelho, ...) e daí
 * saem o traçado do ícone e o fundo da caixinha atrás dele.
 *
 * São tons claros porque o cartão é escuro. A paleta escura (#1f9d4d, #2f6fe0,
 * #c99a06...) some sobre este fundo — ela existia para o tema branco.
 */
.cor-vermelho { --cor: #ff7a6b; --cor-fundo: rgba(255, 122, 107, .16); }
.cor-laranja  { --cor: #ffab5e; --cor-fundo: rgba(255, 171, 94, .16); }
.cor-amarelo  { --cor: #ffd75e; --cor-fundo: rgba(255, 215, 94, .16); }
.cor-verde    { --cor: #5de3a0; --cor-fundo: rgba(93, 227, 160, .16); }
.cor-ciano    { --cor: #55d6ee; --cor-fundo: rgba(85, 214, 238, .16); }
.cor-azul     { --cor: #8ab4ff; --cor-fundo: rgba(138, 180, 255, .16); }
.cor-roxo     { --cor: #b99bff; --cor-fundo: rgba(185, 155, 255, .17); }
.cor-rosa     { --cor: #ff8ecb; --cor-fundo: rgba(255, 142, 203, .16); }


/* ---------------- 2. base ---------------- */

* { box-sizing: border-box; }

/*
 * O atributo hidden vale mais que qualquer display do tema.
 *
 * Sem esta regra, um `display: flex` escrito para .campo ou .tool-card ganha
 * do `display: none` que o navegador aplica ao hidden — e o elemento continua
 * na tela mesmo marcado como escondido. Era o que acontecia com os campos
 * condicionais e com o filtro da busca.
 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

svg { width: 1.25em; height: 1.25em; flex: none; }
a { color: var(--astro-claro); }
.muted { color: var(--fraco); }

::selection { background: rgba(255, 90, 77, .3); }
:focus-visible { outline: 2px solid var(--astro); outline-offset: 2px; }

/* ---------------- 3. fundo animado ---------------- */

/*
 * Três manchas de luz que derivam devagar, mais uma camada de estrelas subindo.
 * É só CSS: nada de vídeo nem canvas, então não pesa no carregamento nem
 * disputa processamento com o trabalho de PDF.
 */

.ceu {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* camada própria de composição: as manchas desfocadas são caras de desenhar,
     e assim elas não são repintadas a cada rolagem da página */
  transform: translateZ(0);
  backface-visibility: hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, var(--ceu-topo) 0%, transparent 60%),
    linear-gradient(180deg, var(--ceu-alto) 0%, var(--ceu-meio) 45%, var(--ceu-baixo) 100%);
}

.brilho {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.b1 {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  left: -8vw; top: -12vw;
  opacity: var(--brilho-1-op);
  background: radial-gradient(circle, var(--brilho-1), transparent 68%);
  animation: derivar-a 26s ease-in-out infinite alternate;
}
.b2 {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  right: -10vw; top: -6vw;
  opacity: var(--brilho-2-op);
  background: radial-gradient(circle, var(--brilho-2), transparent 68%);
  animation: derivar-b 32s ease-in-out infinite alternate;
}
.b3 {
  width: 52vw; height: 52vw; min-width: 360px; min-height: 360px;
  left: 30%; bottom: -34vw;
  opacity: var(--brilho-3-op);
  background: radial-gradient(circle, var(--brilho-3), transparent 70%);
  animation: derivar-c 38s ease-in-out infinite alternate;
}

@keyframes derivar-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vw, 8vh, 0) scale(1.18); }
}
@keyframes derivar-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-14vw, 12vh, 0) scale(.92); }
}
@keyframes derivar-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-10vw, -10vh, 0) scale(1.15); }
}

/* estrelas */
.ceu::after {
  content: '';
  position: absolute;
  inset: -50% -10%;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.2px 1.2px at 70% 12%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.6px 1.6px at 42% 68%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1.1px 1.1px at 88% 55%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.3px 1.3px at 10% 82%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1px 1px at 58% 92%, rgba(255, 255, 255, .45), transparent);
  background-size: 480px 480px, 620px 620px, 540px 540px, 700px 700px, 580px 580px, 660px 660px;
  animation: subir-estrelas 140s linear infinite;
  opacity: var(--estrelas-op);
}

@keyframes subir-estrelas {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-120px, -420px, 0); }
}

/* quem pediu menos movimento recebe o mesmo visual, parado */
@media (prefers-reduced-motion: reduce) {
  .brilho, .ceu::after, .icone, .tool-card { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- 4. utilidades ---------------- */

.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------------- 5. barra do cabeçalho ---------------- */

/*
 * Tudo em uma linha só: marca, selos, busca e navegação. O topo precisa custar
 * pouca altura — a tela é larga, e quem chega quer ver as ferramentas.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px clamp(14px, 3vw, 30px);
  background: var(--cabecalho-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--borda);
}

.brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--texto); flex: none;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--marca-clara), var(--marca) 62%, #b4271d);
  box-shadow: 0 0 0 1px rgba(255, 138, 122, .35), 0 4px 16px rgba(255, 90, 77, .4);
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #fff;
}
.brand-text { font-size: 19.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.brand-text b { font-weight: 800; color: var(--marca-clara); }

.selos { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; flex: none; }
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--veu);
  font-size: 14.5px; color: var(--suave); white-space: nowrap;
}
.selo svg { width: 15px; height: 15px; color: var(--ok); }

.search-box {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 200px; max-width: 420px; min-width: 0;
  padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--veu);
  color: var(--fraco);
  transition: border-color .15s ease, background .15s ease;
}
.search-box:focus-within { border-color: var(--astro); background: rgba(91, 140, 255, .08); }
.search-box input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0;
  font: inherit; font-size: 16.5px; color: var(--texto); outline: none;
}
.search-box input::placeholder { color: var(--fraco); }

.site-nav { display: flex; gap: 16px; margin-left: auto; flex: none; }
.site-nav a { color: var(--suave); text-decoration: none; font-size: 16.5px; font-weight: 500; }
.site-nav a:hover { color: var(--texto); }

/* ---------------- 6. grade de cartões ---------------- */

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px clamp(14px, 3vw, 30px) 60px;
}

.titulo-home {
  margin: 4px 0 26px;
  text-align: center;
  font-size: clamp(23px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
}
.titulo-home b { color: var(--marca-clara); font-weight: 700; }

.categoria { margin-bottom: 30px; }
.categoria h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--suave);
}
.categoria h2::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--borda), transparent);
}

.tool-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}

.tool-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 18px;
  border-radius: var(--raio);
  background: var(--cartao);
  border: 1px solid var(--borda);
  text-decoration: none; color: var(--texto);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
  border-color: var(--cor, var(--borda-forte));
}

/*
 * A caixinha do ícone. Cada ferramenta pinta a sua pela classe de cor do
 * cartão; sem classe, cai no azul padrão.
 */
.icone {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; flex: none;
  color: var(--cor, var(--astro));
  background: var(--cor-fundo, rgba(47, 111, 224, .12));
  transition: transform .16s ease;
}
.icone svg { width: 24px; height: 24px; }
.tool-card:hover .icone { transform: scale(1.06); }

.tool-name {
  font-size: 16.5px; font-weight: 650; line-height: 1.3;
  color: var(--texto);
}

/*
 * A descrição fica visível, pequena, presa a duas linhas.
 *
 * Antes era uma legenda flutuante que aparecia no hover. Ficava bonita, mas
 * era frágil: na primeira coluna vazava para fora da tela e, entre categorias,
 * disputava espaço com o título seguinte. Texto que existe de verdade no fluxo
 * não tem esse problema — e serve a quem usa toque, teclado ou leitor de tela.
 */
.tool-desc {
  font-size: 14px; line-height: 1.45;
  color: var(--fraco);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
  transition: color .18s ease;
}
.tool-card:hover .tool-desc { color: var(--texto); }

.vazio { text-align: center; color: var(--fraco); padding: 40px 0; }

/* ---------------- 7. tela da ferramenta ---------------- */

.voltar {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--suave); text-decoration: none; font-size: 16px; margin-bottom: 16px;
}
.voltar:hover { color: var(--texto); }

.tool-header { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.tool-header .icone { width: 56px; height: 56px; border-radius: 14px; }
.tool-header .icone svg { width: 30px; height: 30px; }
.tool-header h1 { margin: 0 0 3px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.02em; }
.tool-header p { margin: 0; color: var(--suave); font-size: 17.5px; }

.aviso {
  border-radius: 11px; padding: 13px 16px; font-size: 16px; margin: 0 0 18px;
  background: rgba(255, 176, 60, .08);
  border: 1px solid rgba(255, 176, 60, .28);
  color: #ffd8a1;
}

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 34px 20px; text-align: center; cursor: pointer;
  color: var(--suave);
  background: var(--veu);
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.ativo {
  border-color: var(--astro); background: rgba(91, 140, 255, .08); outline: none;
}
.dropzone svg { width: 27px; height: 27px; color: var(--astro-claro); }
.dropzone strong { color: var(--texto); font-size: 18.5px; }

/* listas de arquivo */

.lista-arquivos, .lista-saida { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.lista-arquivos li, .lista-saida li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--superficie); border: 1px solid var(--borda);
}
.li-icon { color: var(--fraco); display: flex; }
.li-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16.5px; }
.li-tam { color: var(--fraco); font-size: 15px; font-variant-numeric: tabular-nums; }
.li-btn {
  border: 1px solid var(--borda); background: none; color: var(--suave);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer;
  display: grid; place-items: center; font-size: 14.5px;
  transition: color .15s ease, border-color .15s ease;
}
.li-btn:hover { color: var(--texto); border-color: var(--borda-forte); }
.li-remove:hover { color: var(--marca-clara); border-color: var(--marca); }

/* opções */

.opcoes { margin-top: 24px; }
.opcoes h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--suave); margin: 0 0 12px;
}
.opcoes-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 15px; font-weight: 600; color: var(--texto); }
.campo small { color: var(--fraco); font-size: 14px; }
.campo input, .campo select {
  font: inherit; font-size: 16.5px; color: var(--texto);
  background: var(--campo-bg);
  border: 1px solid var(--borda); border-radius: 9px;
  padding: 9px 12px; outline: none;
  transition: border-color .15s ease;
}
.campo input:focus, .campo select:focus { border-color: var(--astro); }
.campo input[type="color"] { padding: 3px; height: 42px; cursor: pointer; }
.campo input[type="file"] { padding: 8px; font-size: 15px; cursor: pointer; }
.campo select option { background: var(--opcao-bg); }

.campo-check { flex-direction: row; align-items: center; gap: 9px; }
.campo-check input { width: 18px; height: 18px; accent-color: var(--marca); }
.campo-check span { font-size: 16px; color: var(--texto); }

.range-wrap { display: flex; align-items: center; gap: 10px; }
.range-wrap input { flex: 1; accent-color: var(--marca); padding: 0; border: 0; background: none; }
.range-wrap output { font-variant-numeric: tabular-nums; color: var(--suave); min-width: 38px; font-size: 15.5px; }

/* botões */

.acoes { margin-top: 22px; display: flex; justify-content: center; }
.btn-primario {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 34px;
  font: inherit; font-weight: 650; color: #fff; cursor: pointer;
  text-decoration: none;
  background: linear-gradient(135deg, var(--marca-clara), var(--marca) 55%, #d63a2e);
  box-shadow: 0 6px 24px rgba(255, 90, 77, .35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primario:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255, 90, 77, .45);
  filter: brightness(1.06);
}
.btn-primario:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.btn-secundario {
  border: 1px solid var(--borda-forte); background: var(--veu);
  color: var(--texto); border-radius: 999px; padding: 9px 22px;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.btn-secundario:hover { border-color: var(--astro); background: rgba(91, 140, 255, .12); }

/* resultado */

.resultado {
  margin-top: 26px; padding: 20px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); backdrop-filter: blur(14px);
}
.resultado h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 21.5px; }
.resultado h2 svg { color: var(--ok); }
.resultado-msg { margin: 0; color: var(--suave); font-size: 16px; }

/* encadear */

.encadear {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 6px;
}
.encadear > label { font-size: 15px; font-weight: 600; color: var(--texto); }
.encadear small { color: var(--fraco); font-size: 14px; }
.encadear-linha { display: flex; gap: 9px; flex-wrap: wrap; }
.encadear-linha select {
  flex: 1; min-width: 190px; font: inherit; font-size: 16.5px; color: var(--texto);
  background: var(--campo-bg); border: 1px solid var(--borda);
  border-radius: 999px; padding: 9px 15px; outline: none;
}
.encadear-linha select:focus { border-color: var(--astro); }

/* seletor visual de páginas */

.picker {
  margin-top: 16px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); backdrop-filter: blur(14px);
}
.picker-carregando { margin: 0; color: var(--suave); font-size: 16px; text-align: center; padding: 10px; }

.picker-barra {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.picker-titulo { font-size: 15px; color: var(--suave); }
.picker-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-botoes button {
  border: 1px solid var(--borda); background: var(--veu); color: var(--suave);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14.5px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.picker-botoes button:hover { color: var(--texto); border-color: var(--astro); }

.picker-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  max-height: 400px; overflow-y: auto; padding: 2px;
}

.picker-pagina {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 2px solid transparent; border-radius: 10px;
  padding: 4px; cursor: pointer; font: inherit;
}
.picker-pagina:hover { border-color: var(--borda-forte); }
.picker-pagina.ativa { border-color: var(--marca); background: rgba(255, 90, 77, .1); }

.picker-thumb, .picker-canvas {
  width: 100%; aspect-ratio: 1 / 1.414;
  background: var(--veu-forte);
  border: 1px solid var(--borda); border-radius: 5px; display: block;
}
.picker-canvas { aspect-ratio: auto; height: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.picker-thumb-erro {
  background: repeating-linear-gradient(45deg,
    var(--veu), var(--veu) 6px,
    var(--veu-forte) 6px, var(--veu-forte) 12px);
}

.picker-num { font-size: 14px; color: var(--suave); font-variant-numeric: tabular-nums; }
.picker-pagina.ativa .picker-num { color: var(--marca-clara); font-weight: 700; }

/* ---------------- 8. conteúdo, rodapé, avisos ---------------- */

#seo:empty { display: none; }

.conteudo {
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--borda);
  max-width: 760px;
}
.conteudo-intro { font-size: 19.5px; color: var(--texto); }
.conteudo h2 { font-size: 22px; margin: 32px 0 11px; letter-spacing: -.01em; }
.conteudo p, .conteudo li { color: var(--suave); }

.passos { counter-reset: passo; list-style: none; padding: 0; }
.passos li {
  counter-increment: passo; position: relative;
  padding: 10px 0 10px 46px; color: var(--texto);
}
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 7px;
  width: 29px; height: 29px; border-radius: 50%;
  background: linear-gradient(135deg, var(--marca-clara), var(--marca));
  box-shadow: 0 3px 12px rgba(255, 90, 77, .35);
  color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700;
}

.faq dt { font-weight: 650; margin-top: 18px; font-size: 17.5px; color: var(--texto); }
.faq dd { margin: 4px 0 0; color: var(--suave); }

.relacionadas { list-style: none; padding: 0; }
.relacionadas li { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 16px; }
.relacionadas li:last-child { border-bottom: 0; }

.site-footer {
  border-top: 1px solid var(--borda);
  padding: 22px; text-align: center; font-size: 15px; color: var(--suave);
}
.site-footer p { margin: 3px 0; }
.site-footer a { color: var(--suave); text-decoration: none; }
.site-footer a:hover { color: var(--texto); }

/* overlay de progresso */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 7, 16, .78);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.overlay-box {
  background: var(--superficie-forte); border: 1px solid var(--borda-forte);
  border-radius: 16px; padding: 28px 38px;
  text-align: center; min-width: 290px; box-shadow: var(--sombra);
}
.overlay-box p { margin: 14px 0 12px; font-weight: 500; font-size: 16.5px; }

.spinner {
  width: 34px; height: 34px; margin: 0 auto;
  border: 3px solid rgba(126, 168, 255, .18);
  border-top-color: var(--marca);
  border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.progress { height: 5px; background: rgba(126, 168, 255, .16); border-radius: 99px; overflow: hidden; }
.progress > div {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--astro), var(--marca));
  transition: width .2s ease;
}

.btn-cancelar {
  margin-top: 15px; border: 1px solid var(--borda); background: none;
  color: var(--suave); border-radius: 999px; padding: 7px 21px;
  font: inherit; font-size: 15px; cursor: pointer;
}
.btn-cancelar:hover { color: var(--marca-clara); border-color: var(--marca); }

/* avisos flutuantes */

.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 32px));
}
.toast {
  background: var(--superficie-forte); border: 1px solid var(--borda-forte);
  border-left: 3px solid var(--fraco);
  border-radius: 10px; padding: 11px 15px; box-shadow: var(--sombra); font-size: 16px;
  backdrop-filter: blur(14px);
  animation: entrar .2s ease;
}
.toast-ok { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--marca); }
.toast.out { opacity: 0; transition: opacity .3s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------------- responsivo ---------------- */

@media (max-width: 1000px) {
  .selos { display: none; }         /* a promessa continua no rodapé e nas páginas */
}

@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; }
  .search-box { order: 3; flex-basis: 100%; max-width: none; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 15px; }
  .opcoes-grid { grid-template-columns: 1fr; }
}