body {
  font-family: 'Noto Serif JP', serif;
  color: #FAF8F5;
  margin: 0;
  overflow-x: hidden; /* impede que qualquer coisa crie scroll pro lado */
}


.hero {
  height: 100vh;
  width: 100vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* empurra o conteúdo pro começo da linha, ou seja, esquerda */
  padding-left: 40px; /* deixa o texto um pouco afastado da borda */
  text-align: left; /* para garantir que o texto fique alinhado à esquerda */
  color: white;

}
.hero header {
  position: relative;
  z-index: 1;

}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(assets/cerejeiras.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(5px);
  opacity: 0.7;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.4); /* camada escura suave */
  max-width: 98%;

}

.hero h1 {
  font-size: 2rem; /* define o tamanho da fonte*/
  margin-bottom: 0.5rem; /* espaçamento entre título e subtítulo */
  font-weight: bold;
  color: white;

}

.hero h2 {
 font-size: 1.6rem; /* define o tamanho da fonte */
 font-weight: 500;
}

.primeiro{
  padding: 40px; /*espaço interno em todos os lados (topo, direita, baixo, esquerda).*/
  color: #E1624F;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  margin-top: 40px; /* Espaço externo em cima do parágrafo — distancia ele do que estiver acima. */
  margin-bottom: 0; /* Espaço externo embaixo do parágrafo — zero, pra ele ficar grudado com o próximo. */
  padding-bottom: 0; /* Remove o espaço interno só na parte de baixo */
  line-height: 1.2; /* Altura da linha, controla o espaçamento vertical entre as linhas do texto */
}

.segundo{
    color: black;
    padding: 40px;
    padding-top: 0; 
    margin-top: 0; /*Remove o espaço externo em cima (pra colar no .primeiro).*/
    line-height: 1.2; /*Altura da linha do texto.*/
    margin-bottom: 3rem;  /*Espaço externo embaixo pra separar o texto que vier depois, 3rem é tipo 3 vezes o tamanho da fonte.*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    font-weight: bold; /*Texto em negrito. */
}

.fuji img {
  max-width: 100%;
  height: auto;
  margin: 20px 0 auto;
  border-radius: 5%; /* deixa as bordas arredondadas */
  display: block; /* faz a imagem ocupar uma linha inteira, quebrando linha */
}

.fuji h2 {
  color: black;
  font-size: 2.2rem;
  padding-left: 80px;
  margin-bottom: 1rem;
}

.descrição-curta {
  font-style: italic;
  font-size: 0.9rem;
  color: #555555;
  margin-top: 0.5rem;
  text-align: center;
}

.descrição {
  color: black;
  font-size: 1.2rem;
  padding: 20px;
  margin-top: 0;
  padding-left: 3rem;

}

.indicação {
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.3rem;
  padding-left: 5rem;
  font-weight: bold;

}

.recomendações {
  color: #0C51A7;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2rem;
  padding-left: 7rem;
}


.divisor {
  border: none;
  height: 2px;
  background-color: #D9D9D9;
  margin: 4rem auto; /* espaçamento acima/abaixo + centraliza */
  width: 100%; 

}

.akihabara img {
  max-width: 100%;
  width: 100vw;
  height: auto;
  margin: 0; /* remove margens que atrapalham o encaixe nas bordas */
  border-radius: 5%;
  display: block;
}

.akihabara h2 {
  color: black;
  font-size: 2.2rem;
  padding-left: 80px;
  margin-bottom: 1rem;

}

.shibuya img {
  max-width: 100%;
  width: 100vw;
  height: auto;
  margin: 0; /* remove margens que atrapalham o encaixe nas bordas */
  border-radius: 5%;
  display: block;
}

.shibuya h2 {
  color: black;
  font-size: 2.2rem;
  padding-left: 80px;
  margin-bottom: 1rem;

}

@media (max-width: 768px) {
  h1,h2 {
    font-size: 1.5rem;
    padding-left: 1rem;
  }


.descrição, .indicação, .recomendações, .descrição-curta {
  font-size: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.recomendações {
  padding-left: 2rem;
}

img {
  border-radius: 0; /* se quiser tirar arredondado em telas pequenas */
}
}