:root{
  --secondary:#172A3A;   /* Azul-marinho */

  --ink:#2b2b30; 
  --muted:#5f6672;

  --bg-1:#F5F5F5;        /* neutro claro */
  --bg-2:#E5E1D8;        /* neutro quente */

  --line:#eee; 
  --card:#ffffff;

  --shadow:0 22px 55px rgba(20,10,38,.12);
  --wrap:520px;          /* largura do card */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 520px at 50% -160px, var(--bg-2), transparent 70%),
    linear-gradient(180deg, var(--bg-1), #ffffff 30%, var(--bg-1) 100%);
}

/* topo/voltar */
.container{width:min(1100px,92%);margin-inline:auto}
.backline{padding:16px 0 8px}
.back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--secondary);text-decoration:none;font-weight:600
}
.back:hover{text-decoration:underline}

/* wrapper central */
.wrap{
  min-height:calc(100dvh - 60px);
  display:grid; place-items:start center;
  padding:24px 12px 40px;
}
.card{
  width:min(var(--wrap), 92vw);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:28px 28px 22px;
}

/* cabeçalho dos cards */
.icon-pod{
  width:64px;height:64px;border-radius:16px;margin:6px auto 8px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;font-size:30px
}
.auth-title{
  margin:2px 0 6px;text-align:center;
  font-size:clamp(24px,4.6vw,36px);font-weight:800;color:var(--brand);letter-spacing:-.02em
}
.auth-sub{margin:0 0 18px;text-align:center;color:#6d7785}

/* formulário */
.form{margin-top:4px}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:14px;margin:0 0 6px;color:#333}
.control{
  display:flex;align-items:center;gap:10px;
  border:1px solid #e6e6e6;border-radius:12px;padding:10px 12px;background:#fff;
  transition:border-color .18s, box-shadow .18s
}
.control i{color:#8b8b8b;font-size:20px}
.control input{
  border:0;outline:0;background:transparent;flex:1;font:inherit;color:var(--ink)
}
.control:focus-within{
  border-color:#c9b8b4;
  box-shadow:0 0 0 3px rgba(68,13,15,.16) /* bordô suave */
}
.peek{border:0;background:transparent;cursor:pointer;color:#8a8a8a;font-size:20px}

/* botões & links */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;
  transition:transform .18s, box-shadow .18s
}
.btn--primary{
  color:#fff;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  box-shadow:0 10px 24px rgba(68,13,15,.28)
}
.btn--primary:hover{transform:translateY(-1px)}
.btn--full{width:100%}
.alt{margin:12px 0 0;text-align:center;color:#6d6d6d}
.link,.back.inline{
  background:none;border:0;color:var(--brand-2);
  font-weight:800;cursor:pointer;text-decoration:none
}
.link:hover,.back.inline:hover{text-decoration:underline}

.hint{
  margin:14px 0 0; font-size:14px; color:#5a5f67;
  background:#f7e3e2;border:1px solid #edd2cf;padding:12px;border-radius:12px
}

.msg{margin:10px 0 0;font-weight:700}
.msg.ok{color:#2f9d62}
.msg.err{color:#a23}

/* grid cadastro (duas colunas no topo) — com largura elástica */
.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
/* evita o overflow do CPF/CNPJ */
.grid > .field,
.grid .control,
.grid .control input{ min-width:0; }
.grid .control input{ width:100%; flex:1 1 auto; }

/* animação simples de troca */
.auth{transition:opacity .25s ease, transform .25s ease}
.auth.is-hidden{opacity:0;transform:translateY(8px);display:none}
.is-hidden { display: none !important; }

/* responsivo */
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
}

/* ===== Aumentar só a logo da NAV (não mexe no footer) ===== */
:root{
  --nav-logo: 84px;    /* ajuste o tamanho que quiser */
  --header-h: 88px;    /* altura da barra para acomodar a logo maior */
}
.site-header .brand__logo{ height: var(--nav-logo); }
.site-header .brand__logo img{ max-height: var(--nav-logo); }
.site-header .header__wrap{ height: var(--header-h); }
@media (max-width: 780px){
  .nav__list{ top: var(--header-h); }
}

/* ===== Centralizar o card “Confirmar cadastro” ===== */
#regCodeCard{
  width:min(var(--wrap), 92vw);
  margin:18px auto 0;           /* centraliza e dá respiro do card de cima */
}

/* Botão flutuante do WhatsApp (global) */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)); /* respeita safe area no iOS */
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  text-decoration: none;
  font-size: 28px; line-height: 1;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  z-index: 9999;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.whatsapp-fab:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.whatsapp-fab:active{ transform: translateY(0); }

/* Se tiver outro botão flutuante (ex.: ajuda '?'), suba um pouco este aqui:  */
@media (min-width: 0){
  /* descomente se precisar empilhar acima de outro FAB
  .whatsapp-fab{ bottom: 86px; }
  */
}

/* Tamanhos em mobile */
@media (max-width: 780px){
  .whatsapp-fab{ right: 14px; width: 54px; height: 54px; font-size: 26px; }
}

/* ==== TROCA DO VERMELHO PARA AZUL (OVERRIDE GLOBAL) ==== */
:root{
  /* Novo tema azul (usa o mesmo “tom” do --secondary) */
  --brand:   #172A3A;   /* principal */
  --brand-2: #1e4a66;   /* variação p/ gradiente */
  --brand-3: #256086;   /* variação p/ destaque */

  /* Gradiente da CTA em azul */
  --grad-cta: linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 55%, #0f1f2b 100%);
}

/* Botões e estados que tinham RGBA fixo em vermelho */
.btn--primary{
  /* sombra azulada */
  box-shadow: 0 10px 24px rgba(23,42,58,.28);
}
.btn--ghost{
  color: var(--brand);
  /* borda azulada com alpha (antes usava o vermelho) */
  border: 1px solid rgba(23,42,58,.28);
}

/* Ativo no menu mobile já usa var(--brand), então nada a fazer. */

/* Hovers que usavam a borda “vermelha” translúcida */
.card-feature:hover{
  border-color: rgba(23,42,58,.22);
  box-shadow: 0 18px 44px rgba(23,42,58,.15);
}
.process-item:hover{
  border-color: rgba(23,42,58,.22);
  box-shadow: 0 16px 36px rgba(23,42,58,.12);
}

/* Ícones dos cards: fundo mais neutro azulado + ícone na cor da brand */
.card-feature__icon{
  background: #e6edf5; /* antes: #f0e9e4 */
  color: var(--brand);
}

/* Ações/links já pegam var(--brand); mantemos para garantir consistência */
.pi__action{ color: var(--brand); }

/* No menu mobile (ativo), manter o gradiente em azul */
@media (max-width: 780px){
  .nav__list .nav-link.is-active{
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
    color:#fff;
  }
}