:root{
  --navy:#162240; --navy-claro:#1E2D4F; --navy-escuro:#0f1a32;
  --off-white:#F6F7F7; --dourado:#E29E45; --dourado-claro:#f0bb72;
  /* O dourado da marca da 2.28:1 sobre branco — reprova. No site ele vive
     sobre navy, onde da 6.89:1. Esta variante escura e para texto sobre
     superficie clara: 4.85:1, o mais perto da marca que passa. */
  --dourado-escuro:#9C6618;
  --texto:#1b1b1b; --texto-fraco:#5a6070; --borda:#d8dbe2; --erro:#b3261e;
  --serifa:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sem-serifa:"Questrial","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--off-white);color:var(--texto);
  font-family:var(--sem-serifa);font-size:16px;line-height:1.55}
/* Peso 300 e o dominante no site (67 ocorrencias); 500 era escolha minha. */
h1,h2,h3{font-family:var(--serifa);font-weight:300;line-height:1.2;margin:0 0 .5rem}

/* O gesto que identifica o site: caixa alta, espacamento largo, dourado,
   tamanho pequeno. Aparece 54 vezes la, em rotulo de secao e de navegacao.
   Aqui marca o nome do formulario e o titulo de cada passo. */
.rotulo{display:block;font-family:var(--sem-serifa);font-size:.68rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dourado-escuro);
  margin-bottom:.55rem}
h1{font-size:2rem} h2{font-size:1.5rem}
a{color:var(--navy-claro)}
.topo{background:var(--navy);padding:.7rem 1.25rem;display:flex;align-items:center;gap:1rem}
.topo img{height:34px;width:auto}
.envelope{max-width:640px;margin:0 auto;padding:1.5rem 1.25rem 4rem}
.cartao{background:#fff;border:1px solid var(--borda);border-radius:10px;padding:1.1rem}
/* Espacamento apertado de proposito: a regra do projeto e que nenhuma tela
   role no celular, entao cada pixel vertical e orcamento. */
.campo{display:block;margin-bottom:.8rem}
/* Um unico tamanho secundario, .8rem contra 1rem do corpo: proporcao 1.25.
   Antes havia .75, .8, .85 e .9rem convivendo — quatro tamanhos entre 12 e
   14px, perto demais para criar hierarquia e perto demais para parecer
   intencional. */
.campo > span{display:block;margin-bottom:.35rem;color:var(--texto-fraco);font-size:.8rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.62rem .9rem;font:inherit;color:inherit;
  border:1px solid var(--borda);border-radius:8px;background:#fff}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--dourado);outline-offset:1px;border-color:var(--dourado)}
.campo textarea{min-height:62px;resize:vertical}
.botao{display:inline-block;min-height:48px;padding:.8rem 1.5rem;border:0;border-radius:8px;
  background:var(--navy);color:#fff;font:inherit;cursor:pointer}
.botao:hover{background:var(--navy-claro)}
.botao:disabled{opacity:.55;cursor:progress}
.botao-secundario{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.botao-secundario:hover{background:rgba(22,34,64,.06)}
/* Borda fina inteira, nao barra lateral grossa: le como material impresso
   em vez de alerta de painel administrativo. */
.aviso{background:#fff8ec;border:1px solid #eccfa4;padding:.9rem 1rem;
  border-radius:6px;margin:1rem 0}
.erro{background:#fdecea;border:1px solid #f0c4c0;padding:.9rem 1rem;
  border-radius:6px;margin:1rem 0;color:var(--erro)}
.progresso{height:4px;background:var(--borda);border-radius:2px;margin-bottom:1.5rem;
  overflow:hidden}
/* Anima por escala. Mudar a dimensao a cada quadro forcaria recalculo de layout. */
.progresso > i{display:block;height:100%;background:var(--dourado);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.escondido{display:none!important}
@media (max-width:520px){ .envelope{padding:1rem .9rem 3rem} h1{font-size:1.6rem} }

/* --- Superficies que o navegador desenha por padrao ---------------------
   Selecao, cursor, anel de foco e barra de rolagem vem com o visual de
   ninguem. Vestir os quatro e o que separa uma pagina construida de uma
   montada, e custa poucas linhas. */

::selection{background:var(--dourado-claro);color:var(--navy-escuro)}

input,textarea,select{caret-color:var(--navy-claro)}

/* :focus-visible, nao :focus — quem clica com o mouse nao precisa do anel;
   quem navega por teclado precisa. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--dourado-escuro);outline-offset:2px;border-radius:4px}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline-offset:1px;border-color:var(--dourado-escuro)}

a{text-underline-offset:.18em;text-decoration-thickness:1px}

*{scrollbar-width:thin;scrollbar-color:var(--borda) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borda);border-radius:5px;
  border:3px solid var(--off-white)}
::-webkit-scrollbar-thumb:hover{background:var(--texto-fraco)}

/* --- Movimento ---------------------------------------------------------
   Um momento so: a troca de tela. Sao onze passos em sequencia e hoje elas
   piscam. Sai de um estado ja visivel, com ease-out exponencial curto —
   confirma que algo mudou sem fazer ninguem esperar. */
@keyframes entra{
  from{opacity:.35;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
.anima{animation:entra .26s cubic-bezier(.16,1,.3,1) both}

@media (prefers-reduced-motion:reduce){
  .anima{animation:none}
  *{transition-duration:.01ms!important}
}

/* --- Telas que tem espaco de sobra ---------------------------------------
   O aperto acima existe para o formulario caber sem rolar no celular. O login
   tem dois campos e a tela inteira; apertar ali e aperto sem motivo. */
.folgado{padding:1.9rem 1.6rem}
.folgado h1{margin-bottom:1.3rem}
.folgado .campo{margin-bottom:1.35rem}
.folgado .campo input{padding:.8rem .9rem}
.folgado .botao{margin-top:.4rem;width:100%}