/* Item de Perfil (Avatar e Nome) */
.perfil-item {
  width: 10vw;
  min-width: 150px;
  cursor: pointer;
}

.avatar-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Garante que seja um quadrado */
  border-radius: 4px;  /* Leve arredondamento estilo Netflix */
  overflow: hidden;
  border: 4px solid transparent; /* Reserva espaço para o hover */
  transition: border-color 0.3s ease;
}

.avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantém a proporção do personagem */
}

.perfil-nome {
  display: block;
  margin-top: 15px;
  font-size: 1.3vw;
  color: var(--cor-texto-faded);
  transition: color 0.3s ease;
}

/* Efeitos de Hover */
.perfil-item:hover .avatar-box {
  border-color: var(--cor-destaque); /* Borda vermelha vibrante */
  transform: scale(1.02);
}

.perfil-item:hover .perfil-nome {
  color: var(--cor-texto-ativo); /* Nome ganha destaque */
  font-weight: bold;
}

/* Botão Gerenciar Perfis */
.btn-manage {
  margin-top: 30px;
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--cor-texto-faded);
  color: var(--cor-texto-faded);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 1vw;
  transition: 0.3s;
}

.btn-manage:hover {
  border-color: var(--cor-texto-ativo);
  color: var(--cor-texto-ativo);
}

/* Responsividade para diferentes dispositivos */

/* Tablets (768px a 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  .perfil-item {
    width: 15vw;
    min-width: 130px;
  }
  
  .perfil-nome {
    font-size: 1.5vw;
  }
  
  .btn-manage {
    font-size: 1.2vw;
    padding: 6px 18px;
  }
}

/* Tablets pequenas e celulares grandes (480px a 767px) */
@media (max-width: 767px) and (min-width: 480px) {
  .perfil-item {
    width: 20vw;
    min-width: 120px;
  }
  
  .perfil-nome {
    font-size: 2vw;
  }
  
  .btn-manage {
    font-size: 1.5vw;
    padding: 6px 15px;
  }
}

/* Celulares (até 479px) */
@media (max-width: 479px) {
  .perfil-item {
    width: 30vw; /* Aumentei para dar mais espaço */
    min-width: 120px; /* Aumentei o mínimo */
  }
  
  .perfil-nome {
    font-size: 4vw; /* Aumentei a fonte */
  }
  
  .btn-manage {
    font-size: 3vw;
    padding: 5px 12px; /* Aumentei o padding */
  }
  
  /* Para celulares, ajustar o título e lista */
  .perfil-gate h1 {
    font-size: 7vw; /* Aumentei o título */
  }
  
  .perfil-list {
    gap: 5vw; /* Aumentei o gap */
  }
  
  .button-group {
    flex-direction: column; /* Empilhar botões verticalmente em celulares */
    gap: 25px; /* Aumentei o gap */
  }
}

/* Telas muito pequenas (até 360px) */
@media (max-width: 360px) {
  .perfil-item {
    width: 35vw;
    min-width: 100px;
  }
  
  .perfil-nome {
    font-size: 4.5vw;
  }
  
  .btn-manage {
    font-size: 3.5vw;
    padding: 6px 15px;
  }
  
  .perfil-gate h1 {
    font-size: 8vw;
  }
  
  .perfil-list {
    gap: 6vw;
  }
  
  .button-group {
    gap: 30px;
  }
}