/* =========================
   SELEÇÃO DE CIDADE (FINAL)
   ========================= */

/* BODY */
.city-body{
  margin: 0;
  min-height: 100vh;
}

/* Wrapper da página (controla centro + rodapé) */
.city-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 30% 20%, rgba(179,145,79,.12), transparent 60%),
    #f7f8f6;
}

/* Área que centraliza o card */
.city-container{
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px;

  display: grid;
  place-items: center; /* centraliza no desktop */
}

/* CARD */
.city-card{
  width: 100%;
  max-width: 1100px;

  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;

  border-radius: 26px;
  overflow: hidden;

  /* Desktop: gradiente lateral */
  background: linear-gradient(
    90deg,
    rgba(21,57,47,.08),
    rgba(255,255,255,.95) 55%
  );

  box-shadow: 0 30px 80px rgba(0,0,0,.15);
}

/* LADO ESQUERDO */
.city-left{
  padding: 56px;
}

.city-left h1{
  color: var(--color-institutional);
  font-size: 2.1rem;
  margin-bottom: 18px;
}

/* Lista */
.city-features{
  margin-top: 24px;
  padding-left: 0;
  list-style: none;
}

.city-features li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-weight: 500;
}

.city-features li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-brand);
  font-size: 22px;
  line-height: 1;
}

/* LADO DIREITO */
.city-right{
  background: #fff;
  padding: 48px;
}

/* BADGES */
.city-badge{
  display: inline-block;
  background: rgba(21,57,47,.12);
  color: var(--color-institutional);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.city-badge.soft{
  background: var(--color-bg-soft);
}

/* WATERMARK (caso você use texto gigante no fundo) */
.city-watermark{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 7rem;
  font-weight: 800;
  color: rgba(0,0,0,.035);
  pointer-events: none;
}

/* =========================
   MARCA COLADA NO RODAPÉ
   ========================= */
.city-brand{
  margin-top: auto;     /* cola no fundo */
  padding: 18px 0 14px;
  display: grid;
  place-items: center;
  text-align: center;
}

.city-brand img{
  /* Mantive o “tamanho” como você vinha usando no final:
     no mobile você queria pequeno e discreto.
     Se quiser maior no desktop, eu ajusto já já. */
  width: 50px;
  height: auto;

  opacity: .10;
  filter: grayscale(100%);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

.city-brand-meta{
  margin-top: 10px;
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* =========================
   RESPONSIVO - TABLET
   ========================= */
@media (max-width: 991.98px){
  .city-card{
    grid-template-columns: 1fr;
  }

  .city-left{
    padding: 40px 36px 20px;
  }

  .city-right{
    padding: 36px;
    background: #fff;
  }

  .city-watermark{
    font-size: 5rem;
  }
}

/* =========================
   RESPONSIVO - MOBILE
   ========================= */
@media (max-width: 575.98px){

  /* Card centralizado no mobile (seu pedido) */
  .city-container{
    padding: 18px 14px;
    place-items: center; /* <-- aqui centraliza no celular também */
  }

  /* Card vira coluna única */
  .city-card{
    grid-template-columns: 1fr !important;

    /* Mobile: gradiente vertical (topo->baixo) */
    background: linear-gradient(
      180deg,
      rgba(21,57,47,.07) 0%,
      rgba(255,255,255,.94) 45%,
      #ffffff 100%
    ) !important;
  }

  /* LADO ESQUERDO vira RESUMO */
  .city-left{
    display: block !important;
    padding: 26px 22px 10px !important;
    background: transparent !important;
  }

  /* Esconde texto longo (mantém só título + bullets) */
  .city-left p{
    display: none;
  }

  /* Título menor */
  .city-left h1{
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  /* Lista compacta */
  .city-features{
    margin-top: 6px;
  }

  .city-features li{
    font-size: .85rem;
    margin-bottom: 6px;
  }

  /* LADO DIREITO (ação) */
  .city-right{
    background: transparent !important;
    padding: 18px 22px 26px !important;
  }

  /* Badge menor */
  .city-badge{
    font-size: .7rem;
    padding: 4px 12px;
    margin-bottom: 10px;
  }

  /* Botão */
  .city-right .btn-primary{
    padding: 15px;
    font-size: 1rem;
    margin-top: 6px;
  }

  /* Watermark quase invisível */
  .city-watermark{
    opacity: .02 !important;
    font-size: 4rem !important;
  }

  /* Marca */
  .city-brand{
    padding: 14px 0 10px;
  }
}