@font-face {
  font-family: "Passage Gradient";
  src: url("https://alfredos.othembe.com.br/fonts/Passage.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

.abduza span {
  font-family: "Passage Gradient", sans-serif;
  font-size: 60px;
  margin-top: 100px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
}

.link-login:visited {
  color: transparent;
}

.parte1 {
  background-color: white;
  padding: 20px;
  text-align: center;
}

.parte2 {
  background-color: black;
  padding: 10px;
  width: 100%;
  text-align: center;
}

.como-funciona {
  font-size: small;
  background-color: black;
  color: grey;
  text-align: right;
  padding-block-end: 10px;
}

#cadastrar-como-funciona {
  background-color: black;
  color: white;
  padding: 10px 20px;
  border: 1px solid white;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 20px;
}

.parte3 {
  padding: 20px;
  text-align: center;
}


img {
  max-width: 100%; 
  height: auto;
  display: block; 
  margin-left: auto; /* Centraliza imagens se o container for maior (opcional) */
  margin-right: auto; /* Centraliza imagens se o container for maior (opcional) */
}

button {
  padding: 10px 20px;
  background-color: white;
  color: black;
  border: 1px solid black;
  border-radius: 20px;
  cursor: pointer;
}

/* Margem e alinhamento para várias seções (Seu CSS Original) */
/* A classe 'moedas' foi removida daqui pois terá estilos mais específicos abaixo */
.como-funciona {
  margin-top: 20px;
  text-align: center;
  color: white;
}

.vantagens {
  margin-top: 20px;
  text-align: center;
  color: yellow;
}

/* Estilos para o container .loja-container (Seu CSS Original - ajuste se necessário) */
.loja-container {
  font-size: smaller;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}

/* --- NOVOS ESTILOS PARA AS MOEDAS (Responsivo) --- */

.moedas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 15px 5px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
}

/* Ajustes no .moeda-item para garantir que caibam mais */
.moeda-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  margin: 10px;

  padding: 15px 10px;

  box-sizing: border-box;

  border: 1px solid lightgray; /* DESCOMENTE esta linha para ver as caixas dos itens */

  background: linear-gradient(90deg, #b0b0b0 0%, #e0e0e0 50%, #b0b0b0 100%);

  background-size: 200% auto;

  animation: brilho 2s linear infinite alternate;

  flex-basis: calc(25% - 20px);

  min-width: 140px;

  /* flex-grow: 0; */ /* Opcional: impede que os itens cresçam para preencher espaço extra */

  flex-shrink: 1;

}


@keyframes brilho {

  to {

    background-position: 100% 0;

  }

} 

.location-name a {
  text-decoration: underline;
  color: black;
}
.moeda-item .location-name {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
}

.moeda-item img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 8px;
}

.moeda-item p {
  font-size: 0.9em;
  color: #333;
  margin: 0;
  word-wrap: break-word;
  line-height: 1.2;
}

/* --- Media Queries para telas menores --- */

/* Telas médias (tablets, etc) - tentar manter 3 ou 4 */
@media (max-width: 900px) {
  .moeda-item {
    flex-basis: calc(33.33% - 20px); /* Tenta 3 por linha */
    min-width: 130px;
  }
}

/* Telas pequenas (celulares) - GARANTIR PELO MENOS 2 POR LINHA */
@media (max-width: 600px) {
  .moedas {
    padding: 10px 0; /* Ajuste padding se necessário */
  }
  .moeda-item {
    flex-basis: calc(50% - 20px); 
    min-width: 120px; 
  }
  .moeda-item img {
    width: 60px;
    height: 60px;
  }
  .moeda-item .location-name {
    font-size: 0.9em;
  }
  .moeda-item p {
    font-size: 0.85em;
  }
}