/* =========================================================================
   PROJETOS SOCIAIS — estilo
   ========================================================================= */

.social { margin-top: 0; }

/* ------------------------------ bandeiras ------------------------------ */

/* largura amarrada para quebrar em duas fileiras iguais, e não em 10 + 2 */
.so-bandeiras {
  display: flex; flex-wrap: wrap; gap: 1rem 1.1rem;
  justify-content: center; margin: 0 auto 1.6rem;
  max-width: 660px;
}

.so-pais {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 92px; padding: .2rem;
  border: 0; background: none; cursor: pointer;
  color: var(--suave); font-family: var(--sans); font-size: .74rem;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  transition: color .2s, transform .25s;
}
.so-pais:hover { color: var(--texto); transform: translateY(-3px); }

.so-flag {
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  display: block; position: relative;
  box-shadow: 0 0 0 2px rgba(241,232,217,.25), 0 8px 18px rgba(0,0,0,.45);
  transition: box-shadow .25s, transform .25s;
  /* as que ainda não têm foto ficam mais discretas */
  filter: saturate(.55) brightness(.75);
}
.so-flag svg { width: 100%; height: 100%; display: block; }
.so-pais.com-fotos .so-flag { filter: none; }
.so-pais:hover .so-flag { box-shadow: 0 0 0 2px var(--ouro), 0 10px 22px rgba(0,0,0,.5); }
.so-pais.agora { color: var(--ouro); }
.so-pais.agora .so-flag {
  filter: none;
  box-shadow: 0 0 0 3px var(--ouro), 0 12px 26px rgba(201,162,39,.35);
  transform: scale(1.06);
}
.so-flag.grande { width: 76px; height: 76px; flex: 0 0 76px; filter: none; }

/* ------------------------- números e frentes ------------------------- */

.so-frentes { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
  margin: 2.2rem 0 1.4rem; }
.so-frentes span {
  padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--fina); font-size: .82rem; color: #CDC4B5;
}

/* ------------------------------- convite ------------------------------- */

.so-convite {
  display: grid; grid-template-columns: 1fr auto; gap: 1.4rem;
  align-items: center;
  padding: 1.4rem 1.6rem; border-radius: 18px;
  border: 1px solid rgba(201,162,39,.32);
  background: linear-gradient(120deg, rgba(201,162,39,.12), rgba(201,162,39,.02));
}
.so-chamada {
  font-family: var(--serif); font-size: 1.22rem; color: var(--ouro);
  margin: 0 0 .35rem;
}
.so-texto { margin: 0; color: #CDC4B5; font-size: .94rem; line-height: 1.6; }

.so-botao {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  padding: .95rem 1.8rem; border-radius: 999px; text-decoration: none;
  background: var(--ouro); color: #14110E; font-weight: 600; font-size: 1rem;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  transition: background .2s, transform .2s;
}
.so-botao:hover { background: #E0B93C; transform: translateY(-2px); }
.so-botao svg { width: 21px; height: 21px; fill: currentColor; }

/* --------------------------------- telefone ---------------------------------

   O convite é texto de um lado e botão do outro. Num telefone não há dois
   lados: o botão não encolhe (o texto dele não quebra) e sobraria para fora
   da tela, alargando a página. Então ali eles ficam um embaixo do outro. */

@media (max-width: 719px) {
  .so-convite { grid-template-columns: 1fr; text-align: center; gap: 1.1rem; }
  .so-botao { justify-content: center; }
}