/*
 * Identidade Agenda Visto — conforme o Manual de Marca v1.0 (setembro/2026).
 *
 * Os valores abaixo NÃO são escolha de design: vêm do manual. Onde ele define,
 * aqui só se obedece.
 *
 *   Cores (pág. 18-19)     azul #102441, dourado #AA884F, papel #F7F8FA,
 *                          névoa #EEF1F5, texto #263244
 *   Proporção (pág. 19)    60% bases claras · 30% azul · 10% dourado
 *   Contraste (pág. 20)    azul sobre claro e branco sobre azul = uso principal;
 *                          dourado sobre branco = APENAS DETALHE;
 *                          branco sobre ouro = evitar em texto pequeno
 *   Tipografia (pág. 22)   títulos geométricos (URW Gothic), texto funcional
 *                          (DejaVu Sans); corpo 16px, rótulos 13-14px (pág. 24)
 *
 * Correção de rota: a primeira versão desta folha usava serifada nos títulos e
 * fundo creme quente, por instinto de "luxo". O manual pede o oposto —
 * geométrica e neutros frios —, e o manual manda.
 */
:root{
  /* --- cores da marca --- */
  --navy:#102441;          /* base da identidade, títulos, botões, fundos escuros */
  --navy-2:#182D50;        /* variação para hover e profundidade */
  --ouro:#AA884F;          /* detalhes, direção, ênfase. NUNCA em área grande */
  --ouro-claro:#CFB47D;
  --ouro-palido:#E4D9C2;

  /* --- neutros --- */
  --branco:#FFFFFF;
  --papel:#F7F8FA;
  --nevoa:#EEF1F5;
  --tinta:#263244;
  --suave:#6B7689;
  --linha:#E3E8EF;

  /* nomes antigos mantidos para não quebrar páginas já escritas */
  --creme:var(--papel);
  --creme-2:var(--nevoa);
  --navy-3:var(--tinta);

  --ok:#1F7A5C;
  --erro:#9B2C2C;

  /* TIPOGRAFIA
     Decisão do Jefferson em 23/09/2026, sobrepondo o manual: DM Sans nos
     títulos e Inter no texto. O manual pede URW Gothic e DejaVu Sans, mas
     nenhuma das duas existe em Windows e Android, então na maioria dos
     aparelhos a página caía para uma fonte qualquer do sistema e saía
     diferente do previsto. Inter e DM Sans vêm do Google Fonts e renderizam
     igual em todo lugar, que era o objetivo do manual em primeiro lugar. */
  --display:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Sombras em camadas: uma rente para dar recorte, outra difusa para dar
     elevação. Uma sombra só, grande, achata tudo e é o que faz interface
     parecer barata. */
  --sombra:0 1px 2px rgba(16,36,65,.05), 0 2px 6px rgba(16,36,65,.04), 0 12px 32px rgba(16,36,65,.06);
  --sombra-alta:0 2px 4px rgba(16,36,65,.06), 0 8px 18px rgba(16,36,65,.08), 0 24px 56px rgba(16,36,65,.10);
  /* ESCALA DE ESPAÇO
     Um único conjunto de valores, em múltiplos de 8. Antes eu escolhia o
     número na hora, e o site acumulou 5 paddings de cartão, 4 raios e gaps
     de 20, 26 e 64 sem critério nenhum. Escala fecha essa porta: se um
     espaço não está aqui, não se usa. */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px;
  --e5:48px; --e6:64px; --e7:96px; --e8:128px;

  /* dois raios, e só: um para superfície, um para controle */
  --raio:12px;
  --raio-p:8px;
  --mola:cubic-bezier(.2,.8,.25,1);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
}
/* geométrica nos títulos; o peso vem do tamanho e do contraste, não de caixa
   alta — o manual desaconselha maiúsculas em parágrafos (pág. 24) */
h1,h2,h3,.display{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.12}
h1{font-feature-settings:"ss01" 1}
a{color:var(--navy)}

.barra{background:var(--branco);border-bottom:1px solid var(--linha)}
.barra .conteudo{max-width:1240px;margin:0 auto;padding:0 40px;height:78px;display:flex;align-items:center;justify-content:space-between}
/* assinatura horizontal: 140px em telas (pág. 14) */
.barra img{height:44px;display:block}

/* Largura do conteúdo.
   Era 1120 com 24 de respiro, o que deixava a página encaixotada: num monitor
   de 1440 sobravam 90px de cada lado sem uso, e o cabeçalho ficava apertado no
   meio. 1240 com 40 aproxima das bordas sem perder a linha de leitura. */
.container{max-width:1240px;margin:0 auto;padding:0 40px}

/*
 * Seção e container são papéis DIFERENTES e nunca vão no mesmo elemento.
 *
 * Estavam: <section class="container"> — e o padding lateral do container
 * sobrescrevia o padding vertical da seção, zerando o respiro entre blocos.
 * Medido na página no ar: 0px. Era a causa do "espaçamento feio", e não uma
 * questão de gosto.
 *
 * A seção controla o ritmo vertical; o container, a largura e a margem
 * lateral. Um envolve o outro.
 */
/* Toda seção respira igual dos DOIS lados. A regra anterior zerava o topo de
   seções consecutivas, e o resultado foi 6 de 8 blocos colados em cima. A
   separação entre blocos vem do fundo alternado, não de tirar o respiro. */
.secao{padding:var(--e7) 0}
.secao-escura{background:var(--navy);color:var(--branco);padding:var(--e6) 0}

/*
 * Cabeçalho de bloco no padrão do manual (págs. 26-31): rótulo dourado em
 * caixa alta, título geométrico, subtítulo cinza — todos alinhados à ESQUERDA.
 * Eu tinha centralizado tudo, que não é o que o manual faz em nenhuma página.
 */
.bloco-topo{margin-bottom:var(--e5);max-width:720px}
.bloco-topo h2{margin:var(--e2) 0 10px}
.bloco-topo p{margin:0;color:var(--suave);font-size:17px}

/* GRADES: dois gaps, não seis. Compacta para cartão pequeno, larga para
   bloco de duas colunas. */
.grade-compacta{display:grid;gap:var(--e3)}
.grade-larga{display:grid;gap:var(--e5)}

/* fio dourado: o acento da marca, em área mínima */
.fio{height:3px;width:52px;background:linear-gradient(90deg,var(--ouro),var(--ouro-claro));border-radius:3px}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:var(--raio-p);cursor:pointer;text-decoration:none;text-align:center;
  font:600 15px/1 var(--sans);letter-spacing:-.005em;padding:17px 30px;
  transition:transform .2s var(--mola), box-shadow .2s var(--mola), background .18s ease, opacity .18s;
  -webkit-tap-highlight-color:transparent;
}
/* o foco por teclado precisa aparecer; o foco por clique, não. :focus-visible
   resolve os dois sem o anel feio a cada toque no celular. */
.btn:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* Branco sobre azul é o uso principal do manual (pág. 20). O gradiente é de
   dois tons do MESMO azul: dá volume sem inventar cor fora da paleta. */
.btn-ouro{
  background:linear-gradient(180deg, var(--navy-2), var(--navy));
  color:var(--branco);
  box-shadow:0 1px 2px rgba(16,36,65,.28), 0 6px 16px rgba(16,36,65,.20),
             inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-ouro:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,36,65,.28), 0 12px 28px rgba(16,36,65,.26), inset 0 1px 0 rgba(255,255,255,.12)}
/* afunda no clique: sem isso o botão não confirma o toque no celular */
.btn-ouro:active{transform:translateY(0);box-shadow:0 1px 2px rgba(16,36,65,.3), inset 0 2px 5px rgba(0,0,0,.18)}
.btn-ouro:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.btn-linha{background:var(--branco);color:var(--navy);border:1px solid var(--linha);padding:15px 26px;box-shadow:0 1px 2px rgba(16,36,65,.04)}
.btn-linha:hover{border-color:var(--navy);transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,36,65,.09)}
.btn-linha:active{transform:translateY(0);box-shadow:none}
.btn-largo{width:100%}

/* Dois tamanhos de cartão, e só. */
.cartao{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:var(--e4);box-shadow:var(--sombra);
  transition:box-shadow .25s var(--mola), transform .25s var(--mola), border-color .2s;
}
/* só os cartões marcados como clicáveis reagem: elevar tudo no hover vira
   ruído e tira o destaque de onde importa */
.cartao.clicavel:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:#D6DEE9}
.cartao-amplo{padding:var(--e5)}

/* rótulo em dourado: detalhe pequeno, que é o uso que o manual autoriza */
.rotulo{display:inline-block;font:700 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ouro)}

/* ---- campo com rótulo flutuante ---- */
.campo{position:relative;margin-top:22px}
.campo input,.campo select{
  width:100%;padding:25px 16px 10px;border:1px solid var(--linha);border-radius:var(--raio-p);
  font:16px var(--sans);background:var(--branco);color:var(--tinta);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-appearance:none;appearance:none;
}
.campo input:hover,.campo select:hover{border-color:#CBD5E1}
.campo select{padding-top:22px}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(16,36,65,.09)}
.campo.valido input{border-color:#BFD8CD}
.campo label{
  position:absolute;left:17px;top:17px;font-size:16px;color:var(--suave);
  pointer-events:none;transition:.16s ease;transform-origin:0 0;
}
/* o placeholder=" " nos inputs existe para :placeholder-shown funcionar */
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo select:valid + label,
.campo.preenchido label{transform:translateY(-9px) scale(.75);color:var(--navy)}
.campo.erro input,.campo.erro select{border-color:var(--erro)}
.campo .msg{display:none;color:var(--erro);font-size:13.5px;margin-top:5px}
.campo.erro .msg{display:block}
.campo .ok-marca{position:absolute;right:15px;top:20px;color:var(--ok);opacity:0;transition:.15s}
.campo.valido .ok-marca{opacity:1}

/* condições e limites em texto legível - nunca em letra mínima (pág. 24) */
.aviso{background:var(--nevoa);border-left:2px solid var(--ouro);padding:14px 18px;font-size:14.5px;color:var(--tinta);border-radius:0 5px 5px 0}
.erro-caixa{background:#FDF2F2;border-left:2px solid var(--erro);color:var(--erro);padding:13px 18px;font-size:14.5px;border-radius:0 5px 5px 0;margin-top:18px}

.girando{display:inline-block;width:18px;height:18px;border:2px solid var(--ouro-palido);border-top-color:var(--ouro);border-radius:50%;animation:gira .8s linear infinite;vertical-align:-4px}
@keyframes gira{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .container{padding:0 22px}
}
@media(max-width:760px){
  .secao{padding:var(--e6) 0}
  .cartao{padding:var(--e3)}
  .cartao-amplo{padding:var(--e4)}
  .bloco-topo{margin-bottom:var(--e4)}
}
@media(max-width:640px){
  .barra .conteudo{height:64px;padding:0 22px}
  .barra img{height:34px}
}


/* ============================================================
   MOVIMENTO
   Entrada suave ao rolar e a demonstração do serviço.
   Tudo desligado sob prefers-reduced-motion: movimento é escolha
   de quem lê, não nossa.
   ============================================================ */
[data-revelar]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
[data-revelar].visivel{opacity:1;transform:none}

/* fundos alternados: separam blocos sem precisar de linha divisória */
.secao-clara{background:var(--branco)}
.secao-papel{background:var(--papel)}

/* --- calendário da demonstração --- */
.demo-quadro{background:var(--navy);border-radius:12px;padding:38px;color:var(--branco)}
.demo-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
.demo-grade .cel{
  aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.07);
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
/* a varredura passando */
.demo-grade .cel.lendo{background:rgba(255,255,255,.2)}
/* datas que o portal mostra e tira sozinho */
.demo-grade .cel.surgiu{background:rgba(255,255,255,.3)}
/* a vaga boa: dourada e pulsando, porque é o ponto decisivo (manual, pág. 28) */
.demo-grade .cel.vaga{
  background:var(--ouro);transform:scale(1.1);
  box-shadow:0 0 0 4px rgba(170,136,79,.25);animation:bate .7s ease-in-out infinite;
}
/* capturada */
.demo-grade .cel.achada{
  background:var(--ouro);transform:scale(1.04);
  box-shadow:0 0 0 3px rgba(170,136,79,.35);
  position:relative;animation:none;
}
.demo-grade .cel.achada::after{
  content:"";position:absolute;inset:0;margin:auto;width:34%;height:18%;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translate(6%,-28%);
}
@keyframes bate{0%,100%{transform:scale(1.1)}50%{transform:scale(1.02)}}

.demo-legenda{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px;flex-wrap:wrap}
.demo-legenda .estado{font-size:15px;color:#A9B4C6;display:flex;align-items:center;gap:10px}
.demo-legenda .ponto{width:8px;height:8px;border-radius:50%;background:var(--ouro);animation:respira 1.8s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.3}}
.demo-legenda .placar{font-size:14px;color:#A9B4C6}
.demo-legenda .placar b{font-family:var(--display);font-size:26px;color:var(--branco);display:block;line-height:1.1}

@media (prefers-reduced-motion: reduce){
  [data-revelar]{opacity:1;transform:none;transition:none}
  .demo-grade .cel,.demo-legenda .ponto{animation:none!important;transition:none}
}