*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: 'Roboto', sans-serif;
}

body {
  /* font-family: "Montserrat", "Rethink Sans", Arial, sans-serif; */
  background-color: #14183a;
}

img {
  display: block;
  max-width: 100%;
}


/* =========================================================
   DESKTOP LAYOUT
   Baseado na arte original 1920x1080
========================================================= */

.page--desktop {
  position: relative;

  width: 100%;
  max-height: 100vh;

  aspect-ratio: 1920 / 1080;

  margin: 0 auto;

  overflow: hidden;
}


/* BACKGROUND */

.page--desktop .bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 0;
}


/* FOTO MAURÍCIO */

.page--desktop .foto {
  position: absolute;

  right: 0;
  top: 0;

  height: 100%;
  width: auto;

  z-index: 1;
}


/* LOGO */

.page--desktop .logo {
  position: absolute;

  left: 4%;
  top: 5%;

  width: 45%;

  z-index: 2;
}


/* PIX */

.page--desktop .pix {
  position: absolute;

  left: 4%;
  top: 65%;

  width: 40%;

  z-index: 2;
}


/* =========================================================
   BOX MAURÍCIO
========================================================= */

.page--desktop .container-mauricio {
  position: absolute;

  /*
    Mesma região aproximada do antigo:
    left: 62%
    top: 65%
  */

  left: 62%;
  top: 65%;

  /*
    Vai até o lado direito da tela
  */

  width: 38%;

  /*
    Altura proporcional ao layout
  */

  height: 10%;

  z-index: 3;

  display: flex;

  align-items: center;
}


/* CAIXA */

.page--desktop .mauricio-box {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;

  /*
    Espaçamento interno proporcional
  */

  padding-left: 5%;


  /*
    Gradiente branco:
    mais forte na esquerda
    mais transparente na direita
  */

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.82) 45%,
    rgba(255, 255, 255, 0.55) 70%,
    rgba(255, 255, 255, 0.15) 100%
  );


  /*
    Efeito vidro
  */

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);


  /*
    Arredonda somente o lado esquerdo
  */

  border-radius: 0.8vw 0 0 0.8vw;


  /*
    Sombra suave
  */

  box-shadow:
    0 0.5vw 1.5vw rgba(0, 0, 0, 0.12);
}


/* TEXTO */

.page--desktop .texto-mauricio {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  line-height: 1;

  color: #273a60;

  white-space: nowrap;
}


/* COM */

.page--desktop .texto-mauricio span {
  font-size: clamp(10px, 1.25vw, 24px);

  font-weight: 400;

  letter-spacing: 0.15em;

  margin-bottom: 0.4vw;
}


/* MAURÍCIO DO VÔLEI */

.page--desktop .texto-mauricio strong {
  font-size: clamp(15px, 2vw, 38px);

  font-weight: 500;

  letter-spacing: 0.02em;

  white-space: nowrap;
}


/* =========================================================
   REDES SOCIAIS
========================================================= */

/* =========================================================
   REDES SOCIAIS - DESKTOP
========================================================= */

.page--desktop .social-links {
  position: absolute;

  right: 2%;
  top: 6%;

  z-index: 4;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 2vw;
}


/* ÁREA DE CADA ÍCONE */

.page--desktop .social-links a {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 2vw;
  height: 2vw;

  min-width: 25px;
  min-height: 25px;

  text-decoration: none;

  transition: transform 0.2s ease;
}

/* =========================================================
   REDES SOCIAIS - MOBILE
========================================================= */

.mobile-social-links {
  display: flex;

  width: 100%;

  justify-content: space-around;
  align-items: center;

  gap: 3vw;
}


.mobile-social-links a {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 9vw;
  height: 9vw;
}


.mobile-social-links img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* IMAGEM DO ÍCONE */

.page--desktop .social-links img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* EFEITO AO PASSAR O MOUSE */

.page--desktop .social-links a:hover {
  transform: scale(1.15);
}


/* =========================================================
   LOGOS APOIADORES
========================================================= */

.page--desktop .logos {
  position: absolute;

  left: 62%;
  top: 86%;

  width: 25%;

  z-index: 3;
}


/* =========================================================
   MOBILE LAYOUT
========================================================= */

.page--mobile {
  display: none;

  position: relative;

  width: 100%;
}


/* BACKGROUND */

.page--mobile .bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 0;
}


/* CONTEÚDO */

.page--mobile .content {
  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  /* padding: 6vw 6vw 10vw; */
}


/* LOGO */

.page--mobile .logo {
  width: 100%;

  align-self: flex-start;
}


/* FOTO */

.page--mobile .foto {
  width: 92%;

  align-self: flex-end;

  margin-top: -14vw;

  z-index: 1;
}


/*
  IMPORTANTE:

  NÃO EXISTE .container-mauricio
  NO MOBILE.

  O BOX MAURÍCIO APARECE
  APENAS NO DESKTOP.
*/


/* PIX */

.page--mobile .pix {
  width: 100%;

  margin-top: -4vw;
  padding-left: 6vw;
  padding-right: 6vw;
}


/* REDES */
/*
.page--mobile .redes {
  width: 100%;

  margin-top: 4vw;
}
*/

/* LOGOS */
/*
.page--mobile .logos {
  width: 90%;

  align-self: center;

  margin-top: 4vw;
} */

.mobile-footer {
  display: none;
}

/* =========================================================
   BREAKPOINT
========================================================= */

@media (max-width: 900px) {

  .page--desktop {
    display: none;
  }

  .page--mobile {
    display: block;
  }

  .mobile-footer {
    position: fixed;

    left: 0;
    bottom: 0;

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    z-index: 999;

    padding: 3vw 6vw 4vw;

    /*
      Fundo para o rodapé não ficar
      transparente em cima do conteúdo
    */
    background: rgba(20, 24, 58, 0.95);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }


  .mobile-footer .redes {
    width: 100%;

    margin: 0;
  }


  .mobile-footer .logos {
    width: 85%;

    margin-top: 3vw;
  }


  /*
    Espaço no conteúdo para o rodapé
    não esconder o PIX
  */

  .page--mobile .content {
    padding-bottom: 55vw;
  }

}