/* ================= HERO ================= */

/* imagem de fundo atrás do texto, acima da borda */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: url("../fotos/banners/fundo-desktop.jpeg") center/cover no-repeat; 
}

section {
  background: transparent;
}


/* Efeito de fade/borrão no final da imagem */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;         /* começa no final do hero */
  left: 0;
  width: 100%;
  height: 354px;     /* altura do fade até o fundo animado */
  background: linear-gradient(
      to top,
      rgba(14,12,12,1) 0%,  /* cor do fundo animado */
      rgba(14,12,12,0) 100% /* transparente para "sumir" sobre a imagem */
  );
  z-index: 1;
  pointer-events: none;
    content: "";
    position: absolute;
    bottom: 0;         /* começa no final do hero */
    left: 0;
    width: 100%;
    height: 0px;     /* altura do fade até o fundo animado */
    background: linear-gradient(
        to top,
        rgba(14,12,12,1) 0%,  /* cor do fundo animado */
        rgba(14,12,12,0) 100% /* transparente para "sumir" sobre a imagem */
    );
    z-index: 1;
    pointer-events: none;
}


.hero-content.visible {
  opacity: 1;                
  transform: translateY(0);  
}



/* Animação slide-up */
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.slide-up {
  animation: slideUp 1s ease forwards;
}

/* ================== NOVO ================== */
/* Animação de saída (some suavemente para cima) */
@keyframes slideUpOut {
0% {
  opacity: 1;
  transform: translateY(0);
}
100% {
  opacity: 0;
  transform: translateY(-40px);
}
}

.slide-up-out {
animation: slideUpOut 0.8s ease forwards;
}  


.hero-frase.slide-up-out {
  animation: slideUpOut 0.8s ease forwards;
  animation-delay: 0.1s; /* ajusta esse valor conforme necessário */
}



/* ================= LOGO ================= */


.tarja-logo{
  height: 50px;
}


@keyframes fadeOut{
  from {opacity: 0;}
  to {opacity: 0;}
}

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #363434;
  color: #463d3d;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 1000;
} 


.hero-desenho {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s ease-in-out;
}

.hero.apareceu .hero-desenho {
  opacity: 1;
  transform: translateX(0);
}


/* ================= MEDIA QUERIES ATUALIZADAS ================= */
@media (max-width: 768px) {
  /* Hero */
  .hero-content p { font-size: 1.1rem; }

  /* Cards produtos */
  .cards-produtos .card-text h3 { font-size: 1.2rem; }
  .cards-produtos .card-text p { font-size: 0.9rem; }

  /* Botões */
  /* .btn-mapa, form button, .btn-hero { font-size: 1.2rem; padding: 20px 30px; } */

  /* Outros títulos */
  #outros-sucos h2 { font-size: 2rem; }
}

@media (max-width: 480px) {
  /* Hero */
  .hero { min-height: 60vh; }
  .hero-content p { font-size: 0.9rem; }

  /* Cards produtos */
  .cards-produtos .card-text h3 { font-size: 1rem; }
  .cards-produtos .card-text p { font-size: 0.8rem; }
  .cards-produtos .card { width: 100%; }

  /* Botões */
  .btn-mapa, form button, .btn-hero { font-size: 1rem; padding: 12px 20px; }

  /* Outros títulos */
  #outros-sucos h2 { font-size: 1.5rem; }
}



.hero-ilustracao {
    width: 250px;
    width: 250px;
    opacity: 0;
    transform: translateX(80px);
    transition: all 1.2s ease-in-out;
  }
  
  .hero.apareceu .hero-ilustracao {
    opacity: 1;
    transform: translateX(0);
  }

  /* Logo imagem ao lado do texto */
.hero-logo-img {
    height: 60px;
    width: auto;
    margin-left: 10px;
    vertical-align: middle;
    opacity: 1;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-content.visible .hero-logo-img {
    opacity: 1;
    transform: translateY(0);
}


.topbar-logo-container {
    position: relative; /* necessário para posicionamento absoluto do ícone */
    display: flex;
    /* width: 200x; */
    justify-content: center;
    align-items: center;
}

.topbar-logo-principal {
    height: 110px;   /* tamanho fixo */
    width: auto;
    /* width: 500%; */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.topbar-logo-icone {
    position: absolute;  /* tira do fluxo flex */
    right: -150px;         /* distância da borda direita */
    height: 110px;        /* tamanho que você quiser */
    width: auto;
    top: -0%;            /* centraliza verticalmente */
    transform: translateY(-50%); /* centraliza exato */
}


/* ================= TARJA RESPONSIVO ================= */
@media (max-width: 768px) {
    .topbar-logo-principal,
    .topbar-logo-icone {
        height: 60px;  /* reduz um pouco */
    }
    .topbar-logo-icone {
        right: -100px; /* ajusta distância do lado direito */
    }

    body.scrolled .topbar-logo-principal {
        height: 60px; /* mantém o mesmo tamanho no scroll */
        transform: translateY(5px); /* só anima a posição */
      }
}


@media (max-width: 480px) {
    .topbar-logo-principal,
    .topbar-logo-icone {
        height: 60px;  /* menor para celular */
    }
    .topbar-logo-icone {
        right: -60px; /* ajusta a posição */
    }

    body.scrolled .topbar-logo-principal {
        height: 50px; /* igual no scroll */
        transform: translateY(5px);
      }
}




/* Entrada */
.slide-up {
    animation: slideUp 1s ease forwards;
  }
  
  /* Saída */
  .slide-up-out {
    animation: slideUpOut 0.8s ease forwards;
  }

  .topbar-logo-img,
  .topbar-logo-icone {
  opacity: 0;
  transform: translateX(80px);
  transition: all 1.2s ease-in-out;
}

.hero.apareceu .hero-ilustracao {
  opacity: 1;
  transform: translateX(0);
}

/* Logo imagem ao lado do texto */
.hero-logo-img {
  height: 60px;
  width: auto;
  margin-left: 10px;
  vertical-align: middle;
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-content.visible .hero-logo-img {
  opacity: 1;
  transform: translateY(0);
}


.topbar-logo-container {
  position: relative; /* necessário para posicionamento absoluto do ícone */
  display: flex;
  justify-content: center;
  align-items: center;
}

.topbar-logo-principal {
  height: 110px;   /* tamanho fixo */
  width: auto;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.topbar-logo-icone {
  position: absolute;  /* tira do fluxo flex */
  right: -150px;         /* distância da borda direita */
  height: 110px;        /* tamanho que você quiser */
  width: auto;
  top: -0%;            /* centraliza verticalmente */
  transform: translateY(-50%); /* centraliza exato */
}

/* Entrada */
.slide-up {
  animation: slideUp 1s ease forwards;
}

/* Saída */
.slide-up-out {
  animation: slideUpOut 0.8s ease forwards;
}

.topbar-logo-img,
.topbar-logo-icone {
opacity: 1;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.topbar.apareceu .topbar-logo-img,
.topbar.apareceu .topbar-logo-icone {
  opacity: 1;
  transform: translateY(0);
}



body.scrolled .topbar-logo-principal {
  height: 110px; /* aumenta ao scroll */
  opacity: 1;
  transform: translateY(10px);
}
  

.hero-frase {
    font-size: 2rem;
    margin-top: 500px; /* controla a distância do topo */
  }