/* =========================================================
   Home Page (index.html)
   Hero carousel, feature sections, testimonials, Instagram feed
   ========================================================= */

/* ---------- Hero Carousel ---------- */
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
  min-height: 40rem;
}

.carousel-item {
  min-height: 40rem;
}

.carousel-item h2 {
  font-family: "Rische", serif;
  font-weight: 500;
}

.min-vh-60 {
  min-height: 60vh;
}

.logo {
  position: relative;
  width: 20rem;
  left: -4rem;
}

.hero-slide-1 {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
}

.hero-slide-1 .lead {
  width: 19rem;
  font-size: 1.5rem;
  font-weight: 300;
}

.hero-slide-1-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  padding-left: 6rem;
}

.hero-slide-btn {
  font-family: "Rische", sans-serif;
  background-color: var(--green-primary);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 30px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  animation: growBadge 1.0s ease-out forwards;
}

.hero-slide-btn-mobile {
  display: none;
}

.hero-slide-btn:hover {
  background-color: var(--purple-dark);
}

.hero-slide-1-figure {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  right: 0;
  margin-right: clamp(-14rem, -9vw, -6rem);
  padding-bottom: 0;
  align-self: stretch;
}

.hero-slide-1-figure .slide1 {
  position: relative;
  bottom: -10rem;
  left: clamp(1rem, 4vw, 4rem);
  max-width: 100%;
  height: auto;
  z-index: 2;
}

.hero-slide-1-figure .flor-slide1,
.hero-slide-1-figure .flor-slide2 {
  position: absolute;
  width: 20rem;
  z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
  animation: float 6s ease-in-out infinite alternate;
}

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.hero-slide-1-figure .flor-slide1 {
  top: 15rem;
  right: 20rem;
}

.hero-slide-1-figure .flor-slide2 {
  bottom: 14rem;
  right: clamp(-6rem, -4vw, -2rem);
}

.hero-slide-2 {
  background: url("../images/special-treatments.png") no-repeat center rgba(0, 0, 0, 0.9);
  background-size: cover;
}

.text-slide2 {
  /* margin-right: 40rem; */
  padding: 2rem;
  border-radius: 10px;
  color: #4a3b57;
}

.hero-slide-3 {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 100%);
  position: relative;
}

.hero-slide-3 .marquee-item i {
    
    display: none;
  }


.hero-slide-3 .btn {
  width: 20rem;
  background-color: #283b32;
  border-radius: 30px;
  font-size: 1.2rem;
  font-weight: 300;
  position: relative;
  z-index: 10;
}

.mapa-slide-1 {
  position: absolute;
  right: -30rem;
  bottom: -25rem;
  width: 70rem;
  border-radius: 10px;
}

.mapa-slide-2 {
  position: absolute;
  bottom: -15rem;
  left: -20rem;
  width: 60rem;
  border-radius: 10px;
}

.slide2-image-wrapper .pernas {
  display: none;
}

.hero-slide-4 {
  background: linear-gradient(35deg, var(--purple-dark) 0%, var(--purple-primary) 100%);
  position: relative;
  overflow: hidden;
}

.hero-slide-4 img {
   width: 76rem;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.hero-slide-4 .container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  bottom: -20rem;
}

.btn-hero {
  background-color: var(--green-primary);
  color: var(--white);
  padding: 0.75rem 2rem;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border-radius: 25px;
}

.btn-hero:hover {
  background-color: var(--purple-dark);
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.celebration-box {
  display: flex;
  justify-content: center;
  align-self: center;
  text-align: center;
  background: var(--white);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  height: 5.7rem;
  margin: 0 auto;
}

.celebration-box p {
  font-family: "Rische", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--purple-dark);
  /* margin: 1rem 0; */
}

/* Estilos para aumentar a área das setas */
.carousel-control-prev,
.carousel-control-next {
  width: 15%;
  opacity: 1;
  z-index: 10;
  transition: all 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-size: 100%;
  transition: transform 0.3s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  transform: scale(1.2);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-item.active .hero-logo,
.carousel-item.active .lead,
.carousel-item.active .btn-hero {
  animation: fadeInUp 0.8s ease-out;
}

@media (max-width: 991.98px) {
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: 560px; /* Changed from min-height to height */
  }

  .carousel-item {
    padding: 3rem 0;
  }

  .carousel-item .container {
     padding: 3rem 0;
         
    }

  .hero-slide-content {
    flex-direction: column;
    text-align: center;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-slide-content > * {
    width: 100%;
  }

  .hero-slide-1-figure .flor-slide1,
.hero-slide-1-figure .flor-slide2 {
  width: 15rem;
  z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
  animation: float 6s ease-in-out infinite alternate;
}

.hero-slide-1-figure .slide1 {
  position: relative;
  bottom: -1rem;
  max-width: 100%;
  height: auto;
  z-index: 2;
  left: -1rem;
}

.hero-slide-1-figure .flor-slide1 {
  top: 8rem;
  right: 15rem;
}

.hero-slide-1-figure .flor-slide2 {
  bottom: 7rem;
  right: -5rem;
}

    
  .hero-slide-1-copy {
    align-items: center;
    text-align: center;
    align-self: auto;
    padding-left: 0;
  }

  .hero-slide-1 .lead {
    font-size: 1.05rem;
    margin: 0 auto;
  }

  .hero-logo {
    text-align: center;
  }

  .hero-logo .logo {
    position: static;
    left: auto;
    width: min(60vw, 120px);
  }

  .hero-slide-1 .btn-hero {
    width: 15rem;
    margin: 0 auto;
  }

  .hero-slide-btn-mobile {
    display: inline-flex;
    justify-content: center;
    font-size: 0.8rem;
  }

  .hero-slide-1-figure {
    margin-right: 0;
    justify-content: center;
  }
  
   .carousel-item {
        padding: 0;
    }

/* Slide 2 - largura total */
.hero-slide-2 .container {
  max-width: 100%;
  padding: 0;
}

.hero-slide-2 .row {
  justify-content: center;
  text-align: center;
  margin: 0;
}

/* A coluna de conteúdo do slide 2 passa a ser um flex container vertical */
.text-slide2 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* Caixa de texto em cima, com fundo branco */
.slide2-text-box {
  background: #ffffff;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Título */
.slide2-text-box h2 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
  color: #4a3b57;
}

/* Parágrafo */
.slide2-text-box .lead {
  margin-bottom: 0;
  color: #4a3b57;
}

/* Wrapper da imagem: ocupa TODO o espaço restante */
.slide2-image-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: block;
}

/* Imagem preenche todo o espaço da área restante */
.slide2-image-wrapper .pernas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ajustes gerais do slide 2 */
.hero-slide-2 {
  background: #000;
}

.hero-slide-4 {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    position: relative;
}

.hero-slide-4 img {
    width: 60rem;
    position: absolute;
    top: 55%;
    left: 50%;
    z-index: 1;
}

.hero-slide-4 .container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    bottom: -28rem;
}

.celebration-box {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
    
    max-width: 90%;
    
  }

.celebration-box p {
    font-size: 1.0rem;
    margin: 0;
}

.hero-slide-3 .hero-slide-content {
  position: relative;
}

.hero-slide-3 .container {
    padding: 0;
}

    .text-wrapper {
        margin-top: 14rem;
    }

    .hero-slide-3 p {
        margin: 1.3rem;
        font-size: 1.1rem;
    }
    
         .mapa-slide-1 {
        position: absolute;
        bottom: -7rem;
        left: -7rem;
        width: 40rem;
    }

  .hero-slide-3 .marquee-item i {
    margin: 2rem 2rem;
    font-size: 30px;
    display: block;
  }

.mapa-slide-2 {
    display: none;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 20%;
    z-index: 10;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    z-index: 6;
  }
}