@charset "UTF-8";
/* CSS Document */


 body {
        margin: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
.logo {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 120px;
  height: auto; /* ou defina uma altura fixa, se quiser */
  background-color: rgba(0, 0, 0, 0.0); /* exemplo de fundo */
  color: #fff;
	
  padding: 10px;
  z-index: 999;
}



      .nome-div {
         background: rgba(0,0,0,0.5);
        color: #ffcc00;
        padding: 15px;
        text-align: left;
        font-size: 1em;
		  padding-left: 50px;
        font-weight: bold;
        position: relative; /* para o botão ficar dentro desta barra */
        z-index: 1000;
      }
 .fotos-div {
	   
  background: rgba(0, 0, 0, 0.1);
  color: #ffcc00;
  padding: 5px;
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  position: relative; /* para o botão ficar dentro desta barra */
  z-index: 1000;

  overflow-x: auto;   /* habilita o scroll horizontal */
  white-space: nowrap; /* impede quebra de linha */
}

  .logo360-div {
        position: absolute;
        top: 7px;
        left: 10px;
       
        background: rgba(0,0,0,0.0);
      
        width: 32px;
        height: 32px;
        display: flex;
         z-index: 9999;
      }

      .close-btn {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        font-size: 22px;
        font-weight: bold;
        color: #fff;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
      }
      .close-btn:hover {
        background: rgba(255, 204, 0,0.8);
      }
      .aframe-div {
        flex: 1; /* ocupa o espaço restante da tela */
      }
      .aframe-div a-scene {
        width: 100%;
        height: 100%;
      }

/* Container scrollável */
.fotos-div {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  padding: 12px 0;
  box-sizing: border-box;

  scrollbar-width: thin;
  scrollbar-color: #ffcc00 transparent; /* thumb amarela, fundo transparente */
}

/* WebKit scrollbar */
.fotos-div::-webkit-scrollbar {
  height: 8px;
}
.fotos-div::-webkit-scrollbar-track {
  background: transparent; /* fundo transparente */
}
.fotos-div::-webkit-scrollbar-thumb {
  background: #ffcc00; /* thumb amarela */
  border-radius: 4px;
}


/* Wrapper das thumbs */
.cards {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
  transition: transform 0.3s;
}

/* Thumbnails */
.cards img {
  display: block;
  max-width: 65px;
  border: 3px solid #ffcc00;
  box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3);
  transition: transform 0.3s, border-color 0.3s;
  border-radius: 50px;
  cursor: pointer;
}

/* Hover */
.cards img:hover {
	 border-color: #FFFFFF;
  transform: scale(1.3);
}


.thumb.active {
  border: 3px solid #FFFFFF;
  border-radius: 50%; /* deixa redonda */
  transform: scale(1.4) rotate(-5deg); /* aumenta e rotaciona levemente */
  box-shadow: 0 0 20px #ff8800, 0 0 30px #ffcc00, 0 0 40px #f68838 inset;
  animation: pulseThumb 1.5s infinite alternate;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* Animação pulsante */
@keyframes pulseThumb {
  0% {
    transform: scale(1.2) rotate(-5deg);
    box-shadow: 0 0 15px #ff8800, 0 0 25px #ffcc00, 0 0 30px #f68838 inset;
  }
  50% {
    transform: scale(1.3) rotate(5deg);
    box-shadow: 0 0 25px #ff8800, 0 0 35px #ffcc00, 0 0 45px #f68838 inset;
  }
  100% {
    transform: scale(1.25) rotate(-5deg);
    box-shadow: 0 0 20px #ff8800, 0 0 30px #ffcc00, 0 0 40px #f68838 inset;
  }
}



/* Wrapper ativo */
.cards.active {
  transform: translateY(-3px);
}