/* Reset + base */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff;
  background: linear-gradient(-45deg,#000000,#0f5bd8,#000000);
  background-size:400% 400%;
  animation:bgmove 20s ease infinite;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@keyframes bgmove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Layout */
.wrap{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 4vw, 32px);
  gap: clamp(16px, 3vw, 28px);
  text-align:center;
}

/* Marca */
.brand{

  align-items:center;
  gap:14px;
}
.brand-logo{
  width:400px; height:100px; object-fit:contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}
.brand-text h1{
  margin:0;
  font-size:clamp(1.1rem, 3.8vw, 1.6rem);
  font-weight:600;
}
.brand-text p{
  margin:.2rem 0 0;
  opacity:.9;
  font-size:.95rem;
}

/* Grade de cidades (2 colunas no mobile) */
.city-section{ width:min(92vw, 680px); }
.city-grid{
  list-style:none; padding:0; margin:16px 0 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (min-width: 540px){
  .city-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 900px){
  .city-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.brand-logo{
  width:250px; height:100px; object-fit:contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}

.city-card{
  display:flex; align-items:center; justify-content:center;
  min-height:64px; padding:14px 10px;
  border-radius:14px;
  text-decoration:none; color:#fff; font-weight:600;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:0 8px 16px rgba(0,0,0,.22);
}
.city-card:hover,
.city-card:focus{
  transform: translateY(-3px);
  background: rgba(255,255,255,.18);
  box-shadow:0 12px 24px rgba(0,0,0,.28);
  outline: none;
}

/* Rodapé */
.foot{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:10px;
}
.foot a{
  color:#fff; text-decoration:none; font-weight:600;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  padding:10px 14px; border-radius:999px;
  transition: background .2s ease, transform .2s ease;
}
.foot a:hover{ background: rgba(255,255,255,.18); transform: translateY(-2px); }

/* (Opcional) estilo do dropdown */
.city-select-wrap{ margin-top:10px; }
.city-select{
  width:min(92vw, 420px);
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color:#fff;
  font-weight:600;
  backdrop-filter: blur(8px);
}
.city-select option{ color:#000; } /* opções dentro do select precisam ser escuras */

/* Acessibilidade escondido, mas disponível a leitores de tela */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}