@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Patua+One&display=swap");
#arraia-da-pnl html, #arraia-da-pnl body {
  margin: 0;
  padding: 0;
}
#arraia-da-pnl * {
  font-family: "Patua One", serif;
}
#arraia-da-pnl .container-fluid .container, #arraia-da-pnl .content .container {
  max-width: 100%;
}
#arraia-da-pnl .container-fluid .container .row, #arraia-da-pnl .content .container .row {
  margin: 0;
}
#arraia-da-pnl .button {
  background-color: #8be1af; /* Cor de fundo do botão */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 30px;
  cursor: pointer;
  border-radius: 12px; /* Borda arredondada */
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Sombra do botão */
  transition: 0.3s;
  border-bottom: #6bb88b 6px solid;
}
#arraia-da-pnl .button:hover {
  background-color: #78c997; /* Cor de fundo ao passar o mouse */
}
#arraia-da-pnl .button:active {
  background-color: #6bb88b; /* Cor de fundo ao clicar */
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Reduz a sombra ao clicar */
  transform: translateY(2px); /* Move o botão ligeiramente para baixo */
}
#arraia-da-pnl #bloco1 {
  background-color: #242a49;
  display: inline-block;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  /* Media query para dispositivos móveis */
}
#arraia-da-pnl #bloco1 .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}
#arraia-da-pnl #bloco1 .layer#layer1 {
  background-image: url("_img/nuvensTopo.png");
  z-index: 1;
  animation: moveClouds 40s linear infinite;
}
#arraia-da-pnl #bloco1 .layer#layer2 {
  background-image: url("_img/estrelas1Topo.png");
  z-index: 2;
  opacity: 0.7;
  animation: moveStars 10s linear infinite, blinkStars 2s ease-in-out infinite;
}
#arraia-da-pnl #bloco1 .layer#layer3 {
  background-image: url("_img/estrelas2Topo.png");
  z-index: 3;
  opacity: 0.5;
  animation: moveStars 15s linear infinite, blinkStars 3s ease-in-out infinite;
}
@keyframes moveClouds {
  /* Ida suave até o pico em 50% com leve desaceleração ao final */
  0% {
    background-position: 0% 0%;
  }
  10% {
    background-position: 20% 1%;
  }
  20% {
    background-position: 50% -0.5%;
  }
  30% {
    background-position: 80% 2.5%;
  }
  40% {
    background-position: 90% -1.5%;
  }
  45% {
    background-position: 100% 1.5%;
  }
  50% {
    background-position: 100% 0%;
    animation-timing-function: ease-in-out;
  }
  /* Retorno espelhado com aceleração inicial desacelerando no fim */
  55% {
    background-position: 100% 1.5%;
  }
  60% {
    background-position: 90% -1.5%;
  }
  70% {
    background-position: 80% 2.5%;
  }
  80% {
    background-position: 50% -0.5%;
  }
  90% {
    background-position: 20% 1%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes moveStars {
  0% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 55% 55%;
  }
  100% {
    background-position: 50% 50%;
  }
}
@keyframes blinkStars {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
#arraia-da-pnl #bloco1 .bandeirolas {
  position: absolute;
  top: 153px;
  width: 100%;
  height: 190px; /* Ajuste a altura conforme necessário */
  background-image: url("_img/bandeirolasTopo.png");
  background-position: center;
  z-index: 4; /* Garantir que está acima de outras camadas */
}
@media screen and (max-width: 768px) {
  #arraia-da-pnl #bloco1 .bandeirolas {
    height: 70px; /* Ajuste a altura conforme necessário para dispositivos móveis */
    background-size: contain; /* Ajuste o tamanho do fundo para dispositivos móveis */
  }
  #arraia-da-pnl #bloco1 .layer {
    background-size: 1000px;
  }
}
#arraia-da-pnl #bloco1 .content {
  position: absolute;
  z-index: 6;
  width: 100%;
}
#arraia-da-pnl #bloco1 .content .row.middle-xs {
  min-height: 100vh;
}
#arraia-da-pnl #bloco1 .content img.logo {
  width: 90%;
  margin-top: 80px;
  max-width: 840px;
  display: inline-block;
}
#arraia-da-pnl #bloco1 .canto-esquerdo, #arraia-da-pnl #bloco1 .canto-direito {
  position: absolute;
  top: 200px;
  width: 185px;
  height: 80vh;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 5;
}
#arraia-da-pnl #bloco1 .canto-esquerdo.canto-esquerdo, #arraia-da-pnl #bloco1 .canto-direito.canto-esquerdo {
  left: 0;
}
#arraia-da-pnl #bloco1 .canto-esquerdo.canto-direito, #arraia-da-pnl #bloco1 .canto-direito.canto-direito {
  right: 0;
}
@media screen and (max-width: 1680px) {
  #arraia-da-pnl #bloco1 .canto-esquerdo, #arraia-da-pnl #bloco1 .canto-direito {
    top: 219px;
    width: 120px;
    height: 70vh;
  }
}
@media screen and (max-width: 768px) {
  #arraia-da-pnl #bloco1 .canto-esquerdo, #arraia-da-pnl #bloco1 .canto-direito {
    display: none;
  }
}
#arraia-da-pnl .wood-bg {
  background-image: url("../_img/bgMadeira1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  display: inline-block;
  width: 100%;
  margin-top: -5px;
  box-sizing: border-box;
}
#arraia-da-pnl .divisor-wood {
  background-image: url("../_img/dividorMadeira.png");
  background-size: cover;
  margin-top: -5px;
  background-position: center;
  min-height: 60px;
  width: 100%;
  display: inline-block;
}
#arraia-da-pnl #bloco2 {
  padding-top: 120px;
  padding-bottom: 120px;
  color: #fff;
  font-size: 1.4rem;
}
#arraia-da-pnl #bloco2 img {
  width: 100%;
  max-width: 380px;
  display: inline-block;
  margin-top: 30px;
  margin-bottom: 30px;
}
#arraia-da-pnl #bloco2 .bigger {
  font-size: 3rem;
}
#arraia-da-pnl #bloco3 {
  margin-top: -5px;
  padding-top: 60px;
  background-color: #242a49;
  background-size: cover;
  background-position: center center;
}
#arraia-da-pnl #bloco3 h1 {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 100;
  text-shadow: #26375d 0px 7px 0px;
  margin-bottom: 60px;
}
#arraia-da-pnl #bloco3 .box {
  background-color: #1e233f;
  padding: 20px;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 50px;
}
#arraia-da-pnl #bloco3 .box h2 {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 100;
}
#arraia-da-pnl #bloco3 .box p {
  color: #fff;
  font-size: 1.4rem;
}
#arraia-da-pnl #bloco3 .peixes {
  max-width: 100px;
  position: absolute;
  display: inline-block;
}
#arraia-da-pnl #bloco3 .peixes img {
  width: 100%;
}
#arraia-da-pnl #bloco3 .peixes.peixe1 {
  margin-top: -30px;
  margin-left: -80px;
}
#arraia-da-pnl #bloco3 .peixes.peixe2 {
  margin-left: -10px;
  transform: rotateY(180deg);
}
#arraia-da-pnl #bloco3 .peixes.peixe3 {
  margin-top: -30px;
  margin-left: -80px;
}
#arraia-da-pnl .ilha {
  position: relative;
  width: calc(100% + 64px);
  display: inline-block;
  margin-left: -32px;
}
#arraia-da-pnl .ilha img {
  width: 100%;
  margin-bottom: -1px;
}
#arraia-da-pnl #bloco4 {
  padding-top: 120px;
  padding-bottom: 120px;
  color: #fff;
  font-size: 1.4rem;
}
#arraia-da-pnl #bloco4 h1 {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 100 !important;
  text-shadow: #473927 0px 7px 0px;
  margin-bottom: 60px;
}
#arraia-da-pnl #bloco4 p {
  text-align: left;
  font-weight: 100 !important;
  font-size: 1.4rem;
  margin-bottom: 20px;
}
#arraia-da-pnl #bloco4 p strong {
  font-weight: 100 !important;
}

.login-box {
  background-image: url("../_img/bg-login.jpg");
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
  filter: drop-shadow(32px 4px 16px rgba(0, 0, 0, 0.5));
  padding: 20px;
  box-sizing: border-box;
}
.login-box .logo {
  width: 100% !important;
  max-width: 350px !important;
  display: inline-block !important;
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
.login-box form {
  display: inline-block;
  width: 100%;
  max-width: 350px !important;
}
.login-box form input {
  display: inline-block;
  width: 100%;
  max-width: 350px;
  padding: 20px 30px;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 100px;
  border: 0;
  font-size: 2rem;
}
.login-box form #cpf-error {
  opacity: 0;
  background: #feca0a;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  transition: 0.3s;
  display: inline-block;
}

.card-fish {
  perspective: 1000px; /* Adiciona perspectiva para o efeito 3D */
  width: 100%;
  margin-bottom: 290px; /* Adiciona margem inferior para evitar sobreposição */
  display: flex; /* Flexbox para o alinhamento adequado */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
}
.card-fish .card-fish-inner {
  position: relative;
  width: 100%;
  max-width: 300px; /* Define um tamanho máximo para os cartões */
  transform-style: preserve-3d;
  transition: transform 0.6s;
  box-sizing: border-box;
}
.card-fish .card-fish-inner .card-fish-number {
  position: absolute;
  top: 10px; /* Ajuste conforme necessário */
  right: 10px; /* Ajuste conforme necessário */
  color: #fff; /* Cor do texto */
  padding: 5px 10px; /* Ajuste do padding */
  border-radius: 50%; /* Torna o fundo circular */
  font-size: 2em; /* Tamanho da fonte */
  font-weight: bold; /* Negrito */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para destaque */
  z-index: 1;
}
.card-fish:not(.escolhido) .card-fish-inner {
  cursor: pointer;
}
.card-fish.is-flipped .card-fish-inner {
  transform: rotateY(180deg); /* Gira o cartão quando está com a classe "is-flipped" */
}
.card-fish .card-fish-front, .card-fish .card-fish-back {
  position: absolute;
  min-height: 200px; /* Altura mínima adicionada */
  width: 100%;
  backface-visibility: hidden; /* Oculta o verso quando não está visível */
  border-radius: 30px;
  padding: 20px;
  box-sizing: border-box;
}
.card-fish .card-fish-front {
  background-color: #1e233f; /* Cor de fundo da frente do cartão */
}
.card-fish .card-fish-front img {
  transition: filter 0.6s; /* Transição suave para o filtro */
}
.card-fish .card-fish-back {
  background-color: #f8f8f8; /* Cor de fundo do verso do cartão */
  transform: rotateY(180deg); /* Gira o verso 180 graus */
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-fish.escolhido .card-fish-inner {
  transform: none; /* Impede a rotação */
}
.card-fish.escolhido .card-fish-front img {
  filter: grayscale(100%); /* Remove a saturação da imagem */
}/*# sourceMappingURL=style.css.map */