/* Anti-Spam HOTlink: identidade do site principal (hotlink.com.br).
   Laranja da marca #f6931c; texto sobre laranja #0a0a0a (contraste acima de 8:1). */
@font-face {
  font-family: "Figtree";
  src: url("/css/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --hl-laranja: #f6931c;
  --hl-laranja-suave: #fff3e3;
  --hl-texto: #2a2829;
  --hl-cinza: #5f6268;
  --hl-borda: #e4e4e7;
  --hl-fundo: #ffffff;
  --hl-superficie: #f6f6f8;
  --hl-ciano: #00c5d1;
  --hl-escuro: #333b40;
  --hl-sobre-laranja: #0a0a0a;
  --hl-erro: #c62828;
  --hl-erro-fundo: #fdecea;
  --hl-ok: #2e7d32;
  --hl-ok-fundo: #e8f5e9;
  --hl-aviso-fundo: #fff8e1;
  --hl-raio: 16px;
  --hl-sombra: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --hl-texto: #ececee;
    --hl-cinza: #a7acb4;
    --hl-borda: #34363b;
    --hl-fundo: #141416;
    --hl-superficie: #1d1e21;
    --hl-laranja-suave: #2b2118;
    --hl-erro-fundo: #3a1c1c;
    --hl-ok-fundo: #1b2d1d;
    --hl-aviso-fundo: #2e2813;
    --hl-sombra: none;
  }
}
:root[data-theme="escuro"] {
  --hl-texto: #ececee;
  --hl-cinza: #a7acb4;
  --hl-borda: #34363b;
  --hl-fundo: #141416;
  --hl-superficie: #1d1e21;
  --hl-laranja-suave: #2b2118;
  --hl-erro-fundo: #3a1c1c;
  --hl-ok-fundo: #1b2d1d;
  --hl-aviso-fundo: #2e2813;
  --hl-sombra: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--hl-fundo);
  color: var(--hl-texto);
  font-family: "Figtree", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--hl-texto); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; font-weight: 700; }
h1 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.02em; }
h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.01em; }
h3 { font-size: 20px; }
p { margin: 0 0 14px; }
.hl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hl-visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--hl-laranja); outline-offset: 3px; border-radius: 6px; }

/* Topo */
.hl-topo { background: var(--hl-fundo); border-bottom: 1px solid var(--hl-borda); }
.hl-topo .hl-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; flex-wrap: wrap; }
.hl-topo img { height: 46px; width: auto; }
/* logo: versão escura só quando o tema escuro está ativo (sistema ou escolha) */
.hl-logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .hl-logo-claro { display: none; }
  :root:not([data-theme="claro"]) .hl-logo-escuro { display: block; }
}
:root[data-theme="escuro"] .hl-logo-claro { display: none; }
:root[data-theme="escuro"] .hl-logo-escuro { display: block; }
.hl-topo-direita { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hl-tema {
  display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hl-borda);
  border-radius: 999px; background: var(--hl-fundo);
}
.hl-tema button {
  font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent;
  color: var(--hl-texto); padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.hl-tema button:hover { background: var(--hl-superficie); }
.hl-tema button[aria-pressed="true"] { background: var(--hl-laranja); color: var(--hl-sobre-laranja); }
.hl-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.hl-nav a {
  text-decoration: none; font-weight: 500; font-size: 15px;
  padding: 8px 14px; border-radius: 999px;
}
.hl-nav a:hover, .hl-nav a[aria-current="page"] { background: var(--hl-laranja-suave); color: var(--hl-texto); }

/* Hero (inicial antes do login) */
.hl-hero { background: var(--hl-laranja); color: var(--hl-sobre-laranja); padding: 56px 0 64px; }
.hl-hero .hl-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hl-tag {
  display: inline-block; background: rgba(255, 255, 255, 0.55); color: var(--hl-sobre-laranja);
  padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; margin-bottom: 18px;
}
.hl-hero h1 { color: var(--hl-sobre-laranja); }
.hl-hero .hl-btn { background: #ffffff; color: var(--hl-sobre-laranja); }
.hl-hero .hl-btn:hover { background: #fff8ef; }
.hl-hero p.lead { font-size: 20px; max-width: 34em; }
.hl-cartao-login {
  background: var(--hl-fundo); color: var(--hl-texto); border-radius: var(--hl-raio);
  padding: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.hl-cartao-login h2 { font-size: 22px; }
.hl-cartao-login iframe { width: 100%; border: 0; height: 430px; overflow: hidden; }

/* Botões */
.hl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  background: var(--hl-laranja); color: var(--hl-sobre-laranja);
}
.hl-btn:hover { filter: brightness(0.97); }
.hl-btn-sec { background: transparent; color: var(--hl-texto); border-color: var(--hl-borda); }
.hl-btn-sec:hover { background: var(--hl-superficie); }
.hl-btn-largo { width: 100%; }

/* Seções e cartões */
section.hl-secao { padding: 56px 0; }
section.hl-secao.alt { background: var(--hl-superficie); }
.hl-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hl-cartao {
  background: var(--hl-fundo); border: 1px solid var(--hl-borda); border-radius: var(--hl-raio);
  padding: 26px; box-shadow: var(--hl-sombra);
}
.hl-cartao .hl-icone {
  width: 44px; height: 44px; border-radius: 12px; background: var(--hl-laranja-suave);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 22px;
}
.hl-cartao p { color: var(--hl-cinza); margin: 0; }
.hl-cabecalho-secao { max-width: 680px; margin-bottom: 28px; }
.hl-cabecalho-secao p { color: var(--hl-cinza); font-size: 18px; }

/* Texto de conteúdo */
.hl-conteudo { max-width: 760px; }
.hl-conteudo h2 { margin-top: 36px; }
.hl-conteudo ul { padding-left: 20px; }
.hl-conteudo li { margin-bottom: 8px; }
.hl-destaque {
  border-left: 4px solid var(--hl-laranja); background: var(--hl-laranja-suave);
  padding: 16px 20px; border-radius: 10px; margin: 20px 0;
}
.hl-contrato { white-space: pre-wrap; font-size: 15px; line-height: 1.6; color: var(--hl-texto); }
.hl-contrato-caixa {
  background: var(--hl-superficie); border: 1px solid var(--hl-borda); border-radius: 12px;
  padding: 20px; max-height: 420px; overflow: auto; margin-bottom: 20px;
}

/* Formulários */
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="search"], select {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--hl-borda); border-radius: 12px; background: var(--hl-fundo); color: var(--hl-texto);
}
input:focus, select:focus { outline: 3px solid var(--hl-laranja); outline-offset: 0; border-color: transparent; }
.hl-campo { margin-bottom: 16px; }
.hl-ajuda { color: var(--hl-cinza); font-size: 14px; margin-top: 6px; }

/* Mensagens */
.hl-msg { padding: 14px 18px; border-radius: 12px; margin: 0 0 18px; font-weight: 500; }
.hl-msg.erro { background: var(--hl-erro-fundo); color: var(--hl-erro); }
.hl-msg.ok { background: var(--hl-ok-fundo); color: var(--hl-ok); }
.hl-msg.aviso { background: var(--hl-aviso-fundo); color: var(--hl-texto); }

/* Área interna */
.hl-pagina-interna { padding: 36px 0 56px; }
.hl-titulo-interno { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hl-titulo-interno p { color: var(--hl-cinza); margin: 0; }
.hl-conta { font-weight: 600; color: var(--hl-cinza); }
.hl-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.hl-resumo .hl-cartao { padding: 18px 20px; }
.hl-resumo strong { display: block; font-size: 30px; line-height: 1.1; }
.hl-resumo span { color: var(--hl-cinza); font-size: 15px; }
.hl-pendentes {
  background: var(--hl-aviso-fundo); border: 2px solid var(--hl-laranja); border-radius: var(--hl-raio);
  padding: 20px 22px; margin-bottom: 26px;
}
.hl-pendentes h2 { font-size: 22px; margin-bottom: 6px; }
.hl-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.hl-abas a {
  text-decoration: none; padding: 10px 18px; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--hl-borda); background: var(--hl-fundo);
}
.hl-abas a[aria-current="page"] { background: var(--hl-laranja); border-color: var(--hl-laranja); color: var(--hl-sobre-laranja); }
.hl-busca { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.hl-busca input { flex: 1 1 260px; }
.hl-lista { list-style: none; padding: 0; margin: 0; border: 1px solid var(--hl-borda); border-radius: var(--hl-raio); overflow: hidden; }
.hl-lista li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--hl-borda); background: var(--hl-fundo);
}
.hl-lista li:last-child { border-bottom: 0; }
.hl-lista li:nth-child(even) { background: var(--hl-superficie); }
.hl-lista code { font-family: inherit; overflow-wrap: anywhere; font-weight: 500; }
.hl-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.hl-acoes .hl-btn { padding: 8px 14px; font-size: 14px; }
.hl-paginacao { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; color: var(--hl-cinza); }
.hl-vazio { padding: 22px; color: var(--hl-cinza); text-align: center; }
.hl-incluir { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.hl-botao-sair { font-weight: 600; }

/* Rodapé */
.hl-rodape { background: var(--hl-escuro); color: #e6e6e8; border-top: 4px solid var(--hl-laranja); padding: 36px 0 40px; font-size: 15px; }
.hl-rodape .hl-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.hl-rodape a { color: #fff; }
.hl-rodape p { margin: 0 0 8px; }
.hl-rodape .hl-linha { color: #c9ccd1; font-size: 14px; }

/* Celular */
@media (max-width: 860px) {
  .hl-hero .hl-wrap { grid-template-columns: 1fr; gap: 28px; }
  .hl-grade { grid-template-columns: 1fr; }
  .hl-resumo { grid-template-columns: 1fr; }
  .hl-rodape .hl-wrap { grid-template-columns: 1fr; }
  .hl-incluir { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .hl-wrap { padding: 0 16px; }
  .hl-hero { padding: 36px 0 44px; }
  .hl-hero p.lead { font-size: 18px; }
  .hl-cartao-login { padding: 18px; }
  .hl-lista li { flex-direction: column; align-items: flex-start; }
}

/* Diagrama da triagem (página inicial): a mensagem entra e segue para uma das três faixas. */
.hl-triagem { display: grid; grid-template-columns: 200px 1fr; gap: 0; }
.hl-entrada { padding: 8px 28px 8px 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.hl-entrada p { margin: 0; font-weight: 600; }
.hl-envelope { width: 56px; height: 40px; border: 2px solid var(--hl-texto); border-radius: 6px; position: relative; }
.hl-envelope::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, var(--hl-texto) 50%, transparent 52%) , linear-gradient(to bottom left, transparent 49%, var(--hl-texto) 50%, transparent 52%); background-size: 100% 100%; background-repeat: no-repeat; opacity: 0.6; }
.hl-faixas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hl-faixa { padding: 14px 18px; border-radius: 10px; background: var(--hl-superficie); display: grid; gap: 2px; }
.hl-faixa strong { font-size: 18px; }
.hl-faixa span { color: var(--hl-cinza); font-size: 15px; }
.hl-faixa.ok { box-shadow: inset 4px 0 0 #2e7d32; }
.hl-faixa.pend { box-shadow: inset 4px 0 0 var(--hl-laranja); }
.hl-faixa.bad { box-shadow: inset 4px 0 0 var(--hl-erro); }
@media (max-width: 860px) {
  .hl-triagem { grid-template-columns: 1fr; }
  .hl-entrada { padding: 16px 0 4px 0; flex-direction: row; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Diagrama da triagem na área de listas: mais compacto, com margem própria. */
.hl-triagem-lista { margin: 24px 0; }
.hl-triagem-lista .hl-subtitulo { margin-top: 0; }

/* Formulários das telas de fluxo: alinhados ao título, sem caixa */
.hl-formulario { max-width: 520px; }
.hl-formulario .hl-campo:first-child { margin-top: 0; }

/* Páginas de conteúdo: a abertura tem peso próprio; os títulos de seção ficam mais compactos */
.hl-conteudo > .lead { font-size: 21px; line-height: 1.5; color: var(--hl-texto); border-left: 4px solid var(--hl-laranja); padding-left: 18px; margin: 8px 0 36px; }
.hl-conteudo h2 { font-size: 26px; margin-top: 44px; letter-spacing: -0.015em; }

/* Celular: cabeçalho em uma faixa; a navegação rola para os lados em vez de quebrar em várias linhas */
@media (max-width: 480px) {
  .hl-topo .hl-wrap { min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .hl-topo img { height: 36px; }
  .hl-topo-direita { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .hl-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hl-nav::-webkit-scrollbar { display: none; }
  .hl-nav a { white-space: nowrap; font-size: 14px; padding: 7px 11px; }
  .hl-tema button { padding: 5px 9px; font-size: 13px; }
}

@media (max-width: 480px) { .hl-cartao-login iframe { height: 500px; } }

/* Classes que antes eram estilos embutidos (a política de conteúdo não permite estilo inline). */
.hl-espaco-topo { margin-top: 16px; }
.hl-espaco-topo-grande { margin-top: 28px; }
.hl-botoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hl-fundo-transparente { background: transparent; }
.hl-cartao-espaco { margin-bottom: 26px; }
.hl-subtitulo { font-size: 20px; }
.hl-subtitulo-lista { font-size: 22px; }
.hl-subtitulo-menor { margin-top: 28px; }