* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Inter", sans-serif;
  line-height: 2.8rem;
  background-color: #f5f5f4;
}

/* APP */
.app-subpage {
  padding: 8rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

#back-btn,
.subpage-title,
.subpage-content {
  animation: appear-2 2s;
}

#back-btn {
  text-decoration: none;
  border: none;
  border-radius: 50%; /* Define o raio do círculo */
  overflow: hidden; /* Garante que o conteúdo dentro do botão não ultrapasse o círculo */

  background-color: white;
  color: #4a5568;

  transition: background-color 0.5s ease, color 0.5s ease;

  position: fixed;
  top: 1.6rem;
  left: 1.6rem;

  min-width: 6rem;
  min-height: 6rem;

  cursor: pointer;

  img {
    width: 100%; /* Ajuste a largura da imagem para ocupar todo o espaço disponível dentro do botão */
    height: auto; /* Mantém a proporção da imagem */
    display: block; /* Impede que a imagem tenha margens brancas em torno dela */
  }
}

#back-btn:hover {
  background-color: #73eb5e;
}

.subpage-title {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 4rem;
  }
}

#medico-campaign-title {
  font-size: 2rem;
}

.subpage-carrossel {
  display: grid;
  place-items: center;
  gap: 4rem;

  img {
    max-width: 100%;
    height: auto;

    margin: 0 auto;
    border-radius: 0.4rem;
    box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.3);
  }
}

.subpage-carrossel iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16; /* Mantém a proporção vertical */
  border-radius: 0.4rem;
  box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.3);
}

.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 700px; /* Limits video width on big screens */
  margin: 0 auto; /* Centers the video */
  aspect-ratio: 16 / 9; /* Keeps correct aspect ratio */
}

.video-container iframe {
  width: 100%;
  height: 100%;

  border-radius: 0.4rem;
  box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.3);
}

.subpage-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.subpage-content h2 {
  font-size: 2.8rem;
}

.subpage-content-title {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.external-site {
  display: flex;
  gap: 0.6rem;

  img {
    max-width: 20%;
    max-height: auto;
  }

  a {
    text-decoration: none;
    font-weight: 600;
    font-size: 1.4rem;
    color: black;
  }
}

.subpage-content-img {
  display: flex;
  flex-direction: column;
  gap: 2rem;

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

  margin: 0 auto;
}

.subpage-carrossel-link {
  align-items: center;
  padding: 1.4rem 0;
}

.subpage-carrossel-link img {
  margin: 0;
  border-radius: none;
  box-shadow: none;
}

#text-img {
  max-width: 80%;
  aspect-ratio: 1;
  margin: 0 auto;

  object-fit: cover;
  border-radius: 50%;

  animation: appear 3s;
}

span {
  font-size: 1.4rem;
  font-style: italic;
}

/* FOOTER */
footer {
  text-align: center;

  img {
    width: 2rem;
  }
}

@media (min-width: 768px) {
  .app-subpage {
    place-items: center;
    gap: 6rem;
  }

  .subpage-title h1 {
    font-size: 5rem;
  }

  #medico-campaign-title {
    font-size: 5rem;
  }

  .subpage-carrossel {
    grid-template-columns: repeat(2, 1fr);
    max-width: 80%;
    margin: 0 auto;

    animation: appear 3s;
  }

  .subpage-content {
    max-width: 80%;

    h2 {
      font-size: 4rem;
    }

    .external-site {
      gap: 1rem;

      img {
        max-width: 20%;
        max-height: auto;
      }
    }
  }

  @media (min-width: 1024px) {
    .subpage-carrossel {
      grid-template-columns: repeat(4, 1fr);
    }

    #text-img {
      max-width: 60%;
    }
  }

  /* ANIMATIONS */
  @keyframes appear {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }

    50% {
      transform: scale(1.1);
    }
  }

  @keyframes appear-2 {
    0% {
      opacity: 0;
    }

    100% {
    }
  }
}