/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Smooch&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(34, 52%, 54%);
  --first-color-light: hsl(34, 52%, 64%);
  --first-color-lighten: hsl(34, 52%, 68%);
  --black-color: hsl(0, 0%, 4%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --second-font: "Smooch", cursive;
  --biggest-font-size: 6rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 17rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

html {
  scroll-behavior: smooth;
}





/*=============== HOME ===============*/

.home{
  font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--first-color);
color: var(--black-color);
}

.home__container{
height: 100vh;
padding-block: 9rem 2rem;
display: grid;
align-items: center;
row-gap: 6rem;


}


.home__content{
position: relative;
display: grid;

}

.home__circle{
  position: absolute;
  inset: 0;
  width: 280px;
  height: 280px;
  border: 3px solid var(--first-color-lighten);
  border-radius: 50%;
  margin-inline: auto;
  display: grid;
  place-items: center;
}


.home__subcircle{
  width: 246px;
  height: 246px;
  border: 12px solid var(--first-color-light);
  border-radius: 50%;
}

.home__title{
  position: absolute;
  font-size: var(--biggest-font-size);
  font-family: var(--second-font);
  font-weight: var(--font-regular);
}

.home__img{
  width: 250px;
  filter:drop-shadow(-8 8px 16px hsla(34, 51%, 8% .4 ));
  margin: 0 auto 2rem;
}


.home__article{
text-align: center;

}

.home__product,
.home__price{

  font-size: var(--h3-font-size);
  margin-bottom: .25rem;
}


.home__footer,
.home__languages,
.home__social{

  display: flex;

}


.home__footer{
justify-content: space-between;
align-items: center;


}


.home__languages{
font-size: var(--small-font-size);
font-weight: var(--font-semi-bold);

}

.home__social{

  column-gap: 1rem;
}

.home__social-link{

  font-size: 1.25rem;
  color: var(--black-color);
}





/* Swiper class */

.swiper{
  margin-inline: initial;
}

.swiper-button-prev::after,
.swiper-button-next::after{
  content:'';
}

.swiper-button-prev,
.swiper-button-next{
  top: initial;
  bottom: 0;
  font-size: 1.5rem;
  color: var(--black-color);
}


.swiper-button-prev{
  left: calc(50% - 8rem);
}

.swiper-button-next{
  right: calc(50% - 8rem);
}



.home .swiper-slide-active .home__img {
  transform: scale(2.1); 
  transition: transform 0.3s ease; 
}





.swiper-slide-active .home__description{
  margin-top: 170px;

}

.swiper-slide-active .home__description h2, h3{
  font-size: 3rem;
  font-weight: 800;
}


.home__description a {
  display: none;

}

.swiper-slide-active .home__description a {
  display: flex;
 
}




.whatsapp-button {
  width: 200px;  
  font-size: 20px;
  line-height: 60px; 
  text-align: center; 
  border-radius: 10px;
}

.whatsapp-button i {
  margin-left: 10px; 
  font-size: 18px; 
  color: #000000; 
  transition: transform 0.3s ease-in-out; 
}



.whatsapp-button i:hover {
  margin-left: 10px; 
  font-size: 18px; 
  color: #ffffff; 

}



.whatsapp-button:hover i {
  transform: translateX(10px); 
}


/*=============== BREAKPOINTS ===============*/
/* For small devices */

@media screen and (max-width:330px){
.container{
margin-inline: 1rem;

}

.home__img{
  width: 350px ;
  margin-bottom: 3rem;

}

.home__title{
  font-size: 5rem;
}

.home__circle{
  width: 240px;
  height: 240px;
}

.home__subcircle{
  width: 206px;
  height: 206px;

}


}





/* For medium devices */
@media screen and (max-width:768px){
 .home__content{
  margin-top: -8rem !important;
}


.home__container {

  height: 650px;
  width: 100%;
}

  .home__img{
    width: 350px ;
    margin-top: -8rem;
    
  }


  .nav__menu{
width: 50%;

  }

  .home__article{
    scale: .6;
    transition: scale .3s;

  }


  .home__product,
  .home__price{
    opacity: 0;
    transition: opacity .3s;
    
  }


  .home__description{
   padding-top: 4rem;

  }

  .home__description h3{
   font-size: 2rem;
 
   }

  /*Swiper Class*/
  .home .swiper-slide-active .home__img {
    padding-top:1rem ;
    transform: scale(1.3) !important; /* Aumenta el tamaño de la imagen activa */
    transition: transform 0.3s ease; 
  }

  
  .swiper-slide-active :is(.home__product, .home__price){
opacity: 1;
  }

  .home__circle{
    width: 340px;
    height: 340px;
  }
  
  .home__subcircle{
    width: 316px;
    height: 316px;
  
  }

  
}


@media screen and (max-width:1152px){
  .home .swiper-slide-active .home__img {
    transform: scale(1); /* Aumenta el tamaño de la imagen activa */
    transition: transform 0.3s ease; /* Animación suave para el cambio de escala */
  }

  .home__description{
    margin-top: -60px !important;
   }
 

}
/* For large devices */
@media screen and (min-width:1152px){
.container{
  margin-inline: auto;

}

.nav{
  height: calc(var(--header-height) + 2rem);
}

.nav__toggle,
.nav__close{
  display: none;
}

.nav__menu{
  width: 100%;
}

.nav__list{
  flex-direction: row;
  justify-content: center;
  column-gap: 4rem;
}

.nav__actions{
  font-size: 1.5rem;
  column-gap: 1rem;
}

.home__container{
  height: initial;
  padding-top:10rem;

}

.home__swiper{
  max-width: 1100px;
  margin-inline: auto;
  
}

.home__circle{
  width: 550px;
  height: 550px;
  border-width: 4px;
}

.home__subcircle{
width: 485px;
height: 485px;
border-width: 20px;
}


.home__article{
  width: 450px;
  scale: .55;
}

.home__img{
  width: 450px;
  margin-bottom: 5rem;
}


.home__product,
.home__price{
  font-size: var(--h2-font-size);

}

.swiper-button-prev{
  left:calc(50% - 12rem);
  font-size:2rem;
}

.swiper-button-next{
  right:calc(50% - 12rem);
  font-size:2rem;
}

.home__social-link{
  font-size: 1.5rem;
}

::-webkit-scrollbar{
  width: .6rem;
  background-color: hsl(0, 0%, 75%);

}

::-webkit-scrollbar-thumb{
  background-color: (0,0%,65%);
}

}



/*PRODUCTOS*/