@import url(./base.css);

/* Inicio */
.home {
  background-image: url("../src/background_home.png");
  height: 110vh;
  background-size: cover;
  background-position-y: center;
  background-repeat: no-repeat;
  text-align: center;
}

.home img {
  margin-top: 10rem;
  width: 324px;
}

.home h1 {
  font-family: var(--fonte-principal);
  color: #fff;
  font-size: 5rem;
}

.home h2 {
  font-family: var(--fonte-secundaria);
  font-weight: 600;
  font-size: 4rem;
  color: var(--laranja);

  margin-top: 1.5rem;
}

.home p {
  font-family: var(--fonte-secundaria);
  font-size: 2.5rem;
  font-weight: 100;
  color: #fff;
  margin-top: 1.5rem;
}

/* Bem Vindo */

.bem-vindo {
  background-image: url("../src/folha_fundo.png");
  background-attachment: fixed;
  background-size: auto;
  background-repeat: no-repeat;
  width: 94%;

  padding: 3%;
  margin-top: 3rem;

  display: flex;
  justify-content: space-evenly;
}

.bem-vindo div {
  width: 33%;
}

.mais_amada {
  margin-top: 6rem;
}

.mais_amada p {
  font-family: var(--fonte-secundaria);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.mais_amada h2 {
  font-family: var(--fonte-terciaria);
  font-size: 6rem;
  color: var(--laranja);
  margin-bottom: 2rem;
}

.mais_amada h3 {
  font-family: var(--fonte-secundaria);
  font-size: 3rem;
  margin-bottom: 1rem;
}

.bem-vindo img {
  height: 598px;
  width: 385.62px;
}

.bem-vindo_horario {
  background-image: url("../src/background_horarios_home.png");
  text-align: center;
  color: #fff;
  position: relative;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.75);
}

.bem-vindo_horario h3 {
  font-family: var(--fonte-terciaria);
  font-size: 5rem;
  margin-bottom: 1.25rem;
  position: absolute;
  bottom: 5rem;
  right: 0;
  left: 0;
}

.bem-vindo_horario p {
  font-family: var(--fonte-secundaria);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  position: absolute;
  right: 0;
  left: 0;
}
#bem-vindo_p1 {
  bottom: 3rem;
}

#bem-vindo_p2 {
  bottom: 1rem;
}

/* Apresentação Cardápio */

.inicio_cardapio {
  text-align: center;
  background-color: var(--laranja-claro);
  padding: 3rem 0;

  border-radius: 0 0 100px 100px;
}

.tempero {
  width: 200px;
  margin: 1.5rem;
}

.inicio_cardapio h2 {
  color: var(--laranja);
  font-family: var(--fonte-terciaria);
  font-size: 5.5rem;
  margin-bottom: 1.5rem;
}

.paragrafo_inicio {
  font-family: var(--fonte-secundaria);
  font-size: 3rem;
  margin-bottom: 3rem;
}

.pizzas-cardapio {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.pizzas-cardapio_sabores {
  display: flex;
  margin: 1rem;
  width: 45%;
}

.pizzas-cardapio_sabores img {
  width: 226px;
}

.pizzas_conteudo {
  margin-left: 1rem;
}

.titulo_pizzas {
  display: flex;
  margin: 1rem 0;
  align-items: center;
  justify-content: space-between;
}

.titulo_pizzas p {
  font-family: var(--fonte-secundaria);
  font-size: 1.75rem;
  font-weight: 500;
}

.titulo_pizzas h3 {
  font-family: var(--fonte-secundaria);
  font-weight: bold;
  font-size: 2.5rem;
  color: var(--laranja);

  margin-left: 1.5rem;
}

.pizzas_descricao {
  font-family: var(--fonte-secundaria);
  font-size: 1.5rem;
  color: var(--cinza-claro);
  text-align: left;

  margin-top: 2rem;
}

.espacamento {
  margin-bottom: 3rem;
}

/* Nossa Unidade */

.nossa_unidade {
  background-image: url("../src/folha_fundo.png");
  width: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 80vh;
  text-align: center;

  padding: 7rem 0;
}

.nossa_unidade h2 {
  color: var(--laranja);
  font-family: var(--fonte-terciaria);
  font-size: 5.5rem;
  margin-bottom: 3rem;
}

.unidade {
  text-align: center;
  width: 30%;
  margin-left: 35%;
}

.unidade h3 {
  font-size: 2.25rem;
  font-weight: 500;
  font-family: var(--fonte-secundaria);
  margin-bottom: 1rem;
}

.unidade p {
  margin-top: 0.75rem;
  font-size: 1.45rem;
  font-family: var(--fonte-secundaria);
  color: var(--cinza-claro);
}

.unidade p:last-child {
  margin-bottom: 3rem;
}

.espacamento-1 {
  margin: 5rem;
}

/* =============================
   📱 Tablets (768px até 1024px)
   ============================= */
@media (max-width: 1024px) {
  .home {
    height: 105vh;
  }

  .home img {
    margin-top: 13rem;
    margin-bottom: 1rem;
    width: 300px;
  }

  .home h1 {
    font-size: 4.75rem;
  }

  .home h2 {
    font-size: 3.75rem;

    margin-top: 1.5rem;
  }

  .home p {
    font-size: 2.25rem;
    margin-top: 1.5rem;
  }

  /* Bem Vindo */

  .bem-vindo {
    margin-top: 0;
    padding-top: 2rem;
  }

  .bem-vindo div {
    width: 33%;
  }

  .mais_amada {
    margin-top: 2rem;
  }

  .mais_amada p {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .mais_amada h2 {
    font-size: 5.75rem;
    margin-bottom: 1.75rem;
  }

  .mais_amada h3 {
    font-size: 2.75rem;
    margin-bottom: 1rem;
  }

  .bem-vindo img {
    height: auto;
    width: 320px;
  }

  .bem-vindo_horario {
    position: relative;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.75);
  }

  .bem-vindo_horario h3 {
    font-size: 4rem;
  }

  .bem-vindo_horario p {
    font-size: 1.25rem;
  }

  #bem-vindo_p1 {
    bottom: 2.75rem;
  }

  #bem-vindo_p2 {
    bottom: 1rem;
  }

  /* Apresentação Cardápio */

  .inicio_cardapio {
    padding: 3rem 0;
  }

  .tempero {
    width: 150px;
    margin: 1.5rem;
  }

  .inicio_cardapio h2,
  .nossa_unidade h2 {
    font-size: 5rem;
    margin-bottom: 1.75rem;
  }

  .paragrafo_inicio {
    font-size: 2.5rem;
  }

  .pizzas-cardapio_sabores {
    display: flex;
    margin: 1rem;
    width: 45%;
  }

  .pizzas-cardapio_sabores img {
    width: 175px;
  }

  .pizzas_conteudo {
    margin-left: 1rem;
  }

  .titulo_pizzas p {
    font-size: 1.75rem;
    width: 50%;
  }

  .titulo_pizzas h3 {
    font-size: 1.75rem;

    margin-left: 1rem;
  }

  .pizzas_descricao {
    font-size: 1.25rem;

    margin-top: 2rem;
  }

  /* Nossa Unidade */

  .unidade h3 {
    font-size: 2rem;
    margin-top: 3rem;
  }

  .unidade p {
    font-size: 1.25rem;
  }
}

/* =============================
   📱 Mobile (até 767px)
   ============================= */
@media (max-width: 767px) {
  .home img {
    margin-top: 10rem;
    width: 200px;
    margin-bottom: 0.5rem;
  }

  .home h1 {
    font-size: 4rem;
  }

  .home h2 {
    font-size: 3rem;
    margin-top: 1rem;
  }

  .home p {
    font-size: 1.85rem;
    margin-top: 0.75rem;
  }

  /* Bem Vindo */

  .bem-vindo {
    padding-top: 3rem;
  }

  .mais_amada p {
    font-size: 1.25rem;
  }

  .mais_amada h2 {
    font-size: 4.75rem;
    margin-bottom: 1rem;
  }

  .mais_amada h3 {
    font-size: 2.25rem;
  }

  .bem-vindo img {
    margin-top: 1rem;
    width: 240px;
    height: auto;
  }

  .bem-vindo_horario h3 {
    font-size: 3rem;
    margin-bottom: 0.75rem;
  }

  .bem-vindo_horario p {
    font-size: 1.05rem;
  }

  /* Nosso Cardápio */

  .tempero {
    width: 125px;
  }

  .inicio_cardapio h2,
  .nossa_unidade h2 {
    font-size: 4rem;
  }

  .paragrafo_inicio {
    font-size: 2rem;
  }

  .pizzas-cardapio_sabores img {
    width: 140px;
  }

  .pizzas_conteudo {
    margin-left: 0.5rem;
  }

  .titulo_pizzas p {
    font-size: 1.5rem;
    text-align: left;
  }

  .titulo_pizzas h3 {
    font-size: 1.5rem;
  }

  .pizzas_descricao {
    font-size: 1rem;
  }

  /* Nossa Unidade */

  .unidade h3 {
    font-size: 1.75rem;
    margin-top: 2.75rem;
  }

  .unidade p {
    font-size: 1.1rem;
  }

  .espacamento-1 {
    margin: 4rem;
  }
}

/* =============================
   📱 Mobile (até 424px)
   ============================= */

@media (max-width: 425px) {
  .home {
    background-position: center;
  }

  .home img {
    width: 175px;
    margin-top: 15rem;
  }

  .home h1 {
    font-size: 3.75rem;
  }

  .home h2 {
    font-size: 2.75rem;
  }

  .home p {
    font-size: 1.65rem;
    margin-top: 0.65rem;
  }

  /* Bem vindo */

  .bem-vindo {
    display: flex;
    flex-wrap: wrap;
  }

  .bem-vindo div {
    width: 94%;
  }

  .div_img_a-mais-amada {
    text-align: center;
    margin-bottom: 2rem;
  }

  .bem-vindo_horario {
    width: 355px;
    height: 510px;
  }

  .bem-vindo_horario h3 {
    font-size: 4rem;
  }

  .bem-vindo_horario p {
    font-size: 1.25rem;
  }

  /* Nosso Cardápio */

  .tempero {
    width: 100px;
  }

  .inicio_cardapio h2,
  .nossa_unidade h2 {
    font-size: 3.75rem;
  }

  .paragrafo_inicio {
    font-size: 1.75rem;
    margin: 0 0.25rem;
  }

  .pizzas-cardapio {
    width: 100%;
    margin-top: 1.5rem;
  }

  .pizzas-cardapio_sabores {
    width: 90%;
  }

  /* Nossa Unidade */
  .unidade {
    width: 76%;
    margin-left: 14%;
  }
}

/* =============================
   📱 Mobile (até 375px)
   ============================= */
@media (max-width: 375px) {
  /* Nosso Cardapio */

  .inicio_cardapio h2,
  .nossa_unidade h2 {
    font-size: 3.5rem;
  }

  .paragrafo_inicio {
    font-size: 1.5rem;
    margin: 0 0.5rem;
  }
}

/* =============================
   📱 Mobile (até 320px)
   ============================= */
@media (max-width: 320px) {
  /* Nosso Cardapio */

  .inicio_cardapio h2,
  .nossa_unidade h2 {
    font-size: 3rem;
  }

  .pizzas-cardapio_sabores img {
    width: 100px;
  }

  .titulo_pizzas p,
  .titulo_pizzas h3 {
    font-size: 1.25rem;
  }

  .pizzas_descricao {
    font-size: 0.85rem;
    margin-top: 0.95rem;
  }
}