:root{
  --azul:#062b61;
  --azul2:#0b63ce;
  --amarelo:#ffc928;
  --bg:#f3f7ff;
  --texto:#132033;
  --muted:#61708a;
  --card:#ffffff;
  --borda:#d9e4f5;
  --verde:#11884b;
  --vermelho:#b42318;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#061d44 0,#0b63ce 310px,#f3f7ff 311px);
  color:var(--texto);
}

a{color:inherit}

.topo{
  max-width:1180px;
  margin:auto;
  padding:28px 18px 20px;
  color:#fff;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}

.brand{
  font-weight:900;
  font-size:24px;
  color:#fff;
}

.brand span{color:var(--amarelo)}

.nav a{
  display:inline-block;
  margin-left:10px;
  text-decoration:none;
  background:rgba(255,255,255,.15);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  color:#fff;
  transition:.3s;
}

.nav a:hover{background:rgba(255,255,255,.28)}

.hero{
  max-width:1180px;
  margin:0 auto;
  padding:20px 18px 34px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
}

.hero-copy{
  background:linear-gradient(135deg,#ffffff 0%,#f7fbff 68%,#fff2b8 100%);
  border:2px solid rgba(255,201,40,.95);
  border-radius:28px;
  padding:34px;
  box-shadow:0 20px 50px rgba(2,23,56,.22);
}

.selo{
  display:inline-block;
  background:linear-gradient(135deg,#ffc928,#ffdf62);
  color:#07111f;
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 8px 20px rgba(255,201,40,.34);
}

.hero h1{
  font-size:46px;
  line-height:1.05;
  margin:16px 0 14px;
  color:#07111f !important;
  font-weight:900;
  text-shadow:none !important;
}

.hero p{
  font-size:19px;
  line-height:1.65;
  color:#1c2d44 !important;
  font-weight:700;
  text-shadow:none !important;
  margin:0;
}

.card{
  background:var(--card);
  border:1px solid var(--borda);
  border-radius:24px;
  box-shadow:0 18px 45px rgba(6,43,97,.18);
  padding:24px;
  color:var(--texto);
}

.card h2{margin-top:0;color:#07111f}

.form label{
  display:block;
  font-weight:800;
  margin:13px 0 7px;
  color:#111;
}

.form select,
.form input{
  width:100%;
  padding:14px 13px;
  border:1px solid #c9d7ea;
  border-radius:14px;
  font-size:16px;
  background:#fff;
  color:#111;
}

.form select:focus,
.form input:focus{
  outline:none;
  border:1px solid #0b63ce;
  box-shadow:0 0 0 3px rgba(11,99,206,.15);
}

.btn{
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--azul2),#08418b);
  color:#fff;
  font-size:17px;
  font-weight:900;
  padding:15px 18px;
  cursor:pointer;
  width:100%;
  margin-top:18px;
  transition:.3s;
}

.btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.btn:disabled{opacity:.55;cursor:not-allowed}

.aviso{
  font-size:13px;
  line-height:1.5;
  color:#23344f;
  background:#f8fbff;
  border:1px dashed #b9cae5;
  border-radius:16px;
  padding:13px;
  margin-top:14px;
}

.main{
  max-width:1180px;
  margin:24px auto;
  padding:0 18px 60px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.box{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:22px;
  padding:22px;
  box-shadow:0 10px 28px rgba(20,45,80,.08);
}

.box h3{
  margin:0 0 10px;
  color:var(--azul);
  font-size:22px;
}

.box p{color:#22344f;line-height:1.6}

.resultado{display:none;margin-top:24px}
.resultado.ativo{display:block}

.result-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:16px;
}

.item{
  background:#f8fbff;
  border:1px solid #dce8f8;
  border-radius:16px;
  padding:14px;
}

.item small{
  display:block;
  color:#51627d;
  font-weight:800;
  text-transform:uppercase;
  font-size:11px;
}

.item strong{
  display:block;
  font-size:18px;
  margin-top:5px;
  color:#111;
}

.valor{
  background:linear-gradient(135deg,#0f8a4b,#16b364);
  color:#fff;
  border:0;
}

.valor small{color:#eafff3}

.lgpd{
  background:#fff8db;
  border:1px solid #ffe08a;
  border-radius:18px;
  padding:16px;
  margin-top:16px;
  color:#111;
  line-height:1.6;
}

.erro{
  display:none;
  background:#fff1f0;
  border:1px solid #ffb4ab;
  color:#861e16;
  border-radius:16px;
  padding:14px;
  margin-top:14px;
  font-weight:700;
}

.footer{
  text-align:center;
  padding:28px;
  color:#4f6079;
  font-size:14px;
}

@media(max-width:850px){
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:24px}
  .hero h1{font-size:34px}
  .hero p{font-size:17px}
  .grid,.result-grid{grid-template-columns:1fr}
  .topo{display:block}
  .nav{margin-top:15px}
  .nav a{margin:4px 5px 4px 0}
}