/* USTI Banco — vitrine de demonstração.
   Paleta AZUL de propósito: o concorrente é verde, e a marca precisa se distinguir à
   primeira vista. Azul-marinho (confiança institucional), dourado (produto), cinza frio.
   Os nomes das variáveis seguem neutros (--marca, --marca2) para a próxima troca de
   paleta não exigir renomear tudo de novo. */

:root{
  --marca:#0c2d5a; --marca2:#12457f; --marca-claro:#eff6ff;
  --ouro:#a16207; --ouro-claro:#fbbf24;
  --tinta:#0f172a; --tinta2:#475569; --linha:#e2e8f0; --fundo:#f8fafc;
  --ok:#0369a1; --erro:#b91c1c;
  --sombra:0 1px 3px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em}
a{color:var(--marca2)}

.faixa-demo{
  background:#78350f; color:#fef3c7; text-align:center;
  padding:7px 16px; font-size:13px; letter-spacing:.2px;
}
.faixa-demo strong{color:#fff}

/* ── Topo ─────────────────────────────────────────────────────────────── */
.topo{background:#fff; border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:40}
.topo-in{display:flex; align-items:center; gap:32px; height:68px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--marca); font-size:19px}
.marca strong{letter-spacing:.5px}
.marca-sig{
  width:34px; height:34px; border-radius:8px; background:var(--marca); color:var(--ouro-claro);
  display:grid; place-items:center; font:700 19px/1 Georgia,serif;
}
.menu{display:flex; gap:26px; margin-left:auto}
.menu a{color:var(--tinta2); text-decoration:none; font-size:15px}
.menu a:hover{color:var(--marca2)}
.btn-topo{margin-left:8px}

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn{
  background:var(--marca); color:#fff; border:1px solid var(--marca);
  padding:10px 18px; border-radius:8px; font-size:15px; font-weight:600;
  cursor:pointer; text-decoration:none; display:inline-block; text-align:center;
}
.btn:hover{background:var(--marca2)}
.btn:disabled{opacity:.55; cursor:progress}
.btn-vazado{background:#fff; color:var(--marca); }
.btn-vazado:hover{background:var(--marca-claro)}
.btn-grande{padding:13px 26px; font-size:16px}
.btn-bloco{display:block; width:100%; margin-top:12px}
.btn-texto{background:none; border:none; color:var(--tinta2); font-weight:500; margin-top:10px; width:100%}
.btn-texto:hover{color:var(--erro); background:none}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,#eef5ff 0%,var(--fundo) 60%); border-bottom:1px solid var(--linha)}
.hero-in{display:grid; grid-template-columns:1.35fr .95fr; gap:48px; align-items:center; padding:64px 24px}
.olho{color:var(--ouro); font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; margin:0 0 12px}
.olho-claro{color:var(--ouro-claro)}
.hero h1{font-size:46px; letter-spacing:-.8px}
.sub{color:var(--tinta2); font-size:18px; max-width:46ch}
.hero-btns{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 20px}
.selos{list-style:none; display:flex; gap:22px; padding:0; margin:0; flex-wrap:wrap; color:var(--tinta2); font-size:14px}
.selos span{color:var(--ok); font-weight:700; margin-right:5px}

.hero-card{background:#fff; border:1px solid var(--linha); border-radius:14px; padding:22px; box-shadow:var(--sombra)}
.hc-topo{font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--ouro); font-weight:700; margin-bottom:14px}
.hc-linha{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--linha); font-size:15px}
.hc-linha span{color:var(--tinta2)}
.hc-linha.destaque strong{color:var(--marca); font-size:19px}
.hc-nota{font-size:12px; color:var(--tinta2); margin:14px 0 0}

/* ── Produtos ─────────────────────────────────────────────────────────── */
.secao{padding:64px 24px}
.secao h2{font-size:31px}
.secao-sub{color:var(--tinta2); margin:0 0 34px}
.grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(244px,1fr)); gap:20px}
.card{background:#fff; border:1px solid var(--linha); border-radius:13px; padding:24px; box-shadow:var(--sombra)}
.card-ico{font-size:30px; margin-bottom:10px}
.card h3{font-size:19px; color:var(--marca)}
.card p{color:var(--tinta2); font-size:14.5px}
.card ul{padding-left:18px; margin:14px 0; color:var(--tinta2); font-size:14px}
.card ul li{margin:5px 0}
.card a{font-weight:600; font-size:14.5px; text-decoration:none}

/* ── Segurança ────────────────────────────────────────────────────────── */
.faixa-seg{background:var(--marca); color:#dbeafe; padding:64px 0}
.seg-in{display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center}
.h2-claro{color:#fff; font-size:29px}
.seg-sub{color:#bfdbfe; font-size:16px}
.seg-sub strong{color:#fff}
.seg-passos{display:grid; gap:14px}
.passo{display:flex; gap:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:11px; padding:16px}
.passo span{
  flex:0 0 30px; height:30px; border-radius:50%; background:var(--ouro-claro); color:var(--marca);
  display:grid; place-items:center; font-weight:700;
}
.passo strong{color:#fff}

/* ── Rodapé ───────────────────────────────────────────────────────────── */
.rodape{background:#0b1a30; color:#94a3b8; padding:34px 0; font-size:13.5px}
.rod-in{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap}
.rodape strong{color:#fff}
.rod-links{display:flex; gap:18px}
.rod-links a{color:#cbd5e1; text-decoration:none}

/* ── Modal de acesso ──────────────────────────────────────────────────── */
.modal{
  display:none; position:fixed; inset:0; z-index:60;
  background:rgba(11,26,48,.6); padding:24px; overflow-y:auto;
}
.modal.aberto{display:grid; place-items:start center; padding-top:6vh}
.modal-cx{
  background:#fff; border-radius:15px; padding:30px; width:100%; max-width:470px;
  position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.fechar{
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:27px; line-height:1; color:var(--tinta2); cursor:pointer;
}
.modal-cx h3{font-size:22px; color:var(--marca)}
.modal-cx h4{font-size:15px; margin:22px 0 10px; color:var(--tinta2); text-transform:uppercase; letter-spacing:.8px}
.modal-sub{color:var(--tinta2); font-size:14.5px; margin-top:-4px}
label{display:block; font-size:13px; color:var(--tinta2); margin:12px 0 5px; font-weight:600}
input{
  width:100%; padding:11px 13px; border:1px solid var(--linha); border-radius:8px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--tinta);
}
input:focus{outline:2px solid var(--marca2); outline-offset:-1px; border-color:var(--marca2)}
.modal-btns{margin-top:6px}
.dica{font-size:12.5px; color:var(--tinta2); margin-top:14px; text-align:center}
.oculto{display:none}

.form2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.form2 .col2{grid-column:1 / -1}

.saldo{
  background:var(--marca-claro); border:1px solid #bfdbfe; border-radius:11px;
  padding:15px 18px; display:flex; justify-content:space-between; align-items:center; margin:16px 0 4px;
}
.saldo span{color:var(--marca2); font-size:14px}
.saldo strong{font-size:22px; color:var(--marca)}

.msg{margin-top:14px; font-size:14px; padding:11px 13px; border-radius:8px; display:none}
.msg.ver{display:block}
.msg.ok{background:#eff6ff; color:var(--ok); border:1px solid #bfdbfe}
.msg.erro{background:#fef2f2; color:var(--erro); border:1px solid #fecaca}
.msg.info{background:#f5f5f4; color:var(--tinta2); border:1px solid var(--linha)}

/* ── Prova ────────────────────────────────────────────────────────────── */
.prova-bloco{border:1px solid var(--linha); border-radius:11px; padding:16px; margin:14px 0; background:var(--fundo)}
.prova-bloco h5{margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--tinta2)}
.pl{display:flex; justify-content:space-between; gap:14px; padding:6px 0; font-size:14px; border-bottom:1px dashed var(--linha)}
.pl:last-child{border:none}
.pl span{color:var(--tinta2); flex:0 0 auto}
.pl strong{text-align:right; word-break:break-word}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; word-break:break-all; color:var(--marca2)}
.selo-ok{
  background:#eff6ff; border:1px solid #bfdbfe; color:var(--ok); border-radius:9px;
  padding:12px 14px; font-size:14px; font-weight:600; text-align:center; margin-bottom:6px;
}

@media (max-width:880px){
  .hero-in,.seg-in{grid-template-columns:1fr; gap:32px}
  .menu{display:none}
  .hero h1{font-size:34px}
  .form2{grid-template-columns:1fr}
}

/* Aviso de faixa de valor no formulário de transferência. Fica visível ANTES de assinar:
   descobrir que precisa do celular só depois do erro do navegador seria a pior ordem. */
.aviso-faixa{
  margin:14px 0 0; padding:10px 13px; border-radius:8px; font-size:13.5px;
  background:var(--marca-claro); border:1px solid #bfdbfe; color:var(--marca2); display:none;
}
.aviso-faixa.ver{display:block}
.aviso-faixa.alerta{background:#fffbeb; border-color:#fde68a; color:#92400e}