:root{
  --azul:#00529C;
  --azul-escuro:#003E76;
  --verde:#00A859;
  --claro:#F8FAFC;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--claro);
  color:#1e293b;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}
.container{max-width:72rem;margin:0 auto;padding:0 1.5rem}

/* HERO */
.hero{
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul-escuro) 100%);
  color:#fff;padding:3.5rem 0;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:2.5rem}
.hero-text{text-align:center}
.badge{
  display:inline-block;background:var(--verde);color:#fff;
  border-radius:999px;padding:.25rem 1rem;font-size:.8rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;
}
h1{font-size:2.35rem;font-weight:800;line-height:1.1}
.slogan{margin-top:1rem;font-size:1.1rem;font-weight:500;color:rgba(255,255,255,.9)}
.vote-label{display:block;margin-top:2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.7)}
.vote-number{display:block;font-size:3.75rem;font-weight:900;line-height:1;text-shadow:0 4px 0 var(--verde)}
.hero-img{
  width:100%;max-width:28rem;border-radius:1.5rem;
  border:4px solid rgba(255,255,255,.8);object-fit:cover;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.35);
}

/* BOTOES */
.actions{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.btn{
  display:inline-block;border-radius:.75rem;padding:.85rem 1.5rem;
  font-weight:700;text-align:center;box-shadow:0 10px 15px -3px rgba(0,0,0,.15);
  transition:opacity .2s ease;
}
.btn:hover{opacity:.9}
.btn-verde{background:var(--verde);color:#fff}
.btn-azul{background:var(--azul);color:#fff}
.btn-branco{background:#fff;color:var(--azul)}

/* SECOES */
section{padding:4rem 0}
h2{font-size:1.85rem;font-weight:800;color:var(--azul)}
.center{text-align:center}
.grid{display:grid;gap:1.5rem;margin-top:2.5rem}
.card{
  background:#fff;border-radius:1rem;padding:2rem;
  border-top:6px solid var(--verde);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1);
  transition:box-shadow .2s ease;
}
.card:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.12)}
.card h3{color:var(--azul);font-size:1.15rem;font-weight:700}
.card p{margin-top:.75rem;color:#475569}
.card ul{margin-top:1.25rem;list-style:none;display:grid;gap:.75rem}
.card li{display:flex;gap:.75rem;font-size:.92rem;color:#334155}
.dot{margin-top:.55rem;width:.5rem;height:.5rem;border-radius:999px;background:var(--verde);flex-shrink:0}

/* VOTE */
.vote-box{
  background:#fff;border-radius:1.5rem;padding:2rem;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
  display:grid;gap:2.5rem;align-items:center;
}
.vote-img{width:100%;max-width:24rem;margin:0 auto;border-radius:1rem;object-fit:cover;box-shadow:0 20px 25px -5px rgba(0,0,0,.2)}
.vote-text{text-align:center}
.vote-text p{margin-top:1rem;color:#475569}

/* REDES */
.redes-box{
  max-width:56rem;margin:0 auto;background:var(--verde);color:#fff;
  border-radius:1.5rem;padding:3rem 2rem;text-align:center;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.15);
}
.redes-box h2{color:#fff}
.redes-box .sub{margin-top:.75rem;color:rgba(255,255,255,.9)}
.redes{display:grid;gap:.75rem;margin-top:2rem}
.rede{background:#fff;color:var(--azul);border-radius:.75rem;padding:1rem 1.5rem;font-weight:700;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);transition:opacity .2s ease}
.rede:hover{opacity:.9}
.rede span{display:block;margin-top:.25rem;font-size:.75rem;font-weight:500;color:#64748b}
.zap{margin-top:2rem}

footer{background:var(--azul);color:rgba(255,255,255,.9);text-align:center;font-size:.85rem;padding:2rem 1.5rem}

@media (min-width:640px){
  .actions{flex-direction:row;justify-content:center}
  .redes{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  .hero{padding:5rem 0}
  .hero-inner{flex-direction:row;justify-content:space-between}
  .hero-text{text-align:left}
  .actions{justify-content:flex-start}
  h1{font-size:3.5rem}
  h2{font-size:2.25rem}
  .slogan{font-size:1.4rem}
  .vote-number{font-size:5.5rem}
  .hero-img{max-width:32rem}
  .grid{grid-template-columns:repeat(3,1fr)}
  .vote-box{grid-template-columns:1fr 1fr;padding:3rem}
  .vote-text{text-align:left}
}