@import url("https://use.typekit.net/vhv0kik.css");
@import url("https://use.typekit.net/vhv0kik.css");

:root {
  --naranja-color: #ed5f2e;
  --font-elza--regular: "elza", sans-serif;
  --font-etica--regular: "lft-etica-mono", sans-serif;
}

.font-elza--regular {
  font-family: var(--font-elza--regular);
  font-weight: 600;
}
.font-etica--regular {
  font-family: var(--font-etica--regular);
}

.boton-menu {
  background-color: var(--naranja-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 1.8rem;
}

.secction-hero {
  background-image: url("../img/hero-basket.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 1.8rem;
  background-position-x: 30%;
}

.boton-sec-1 {
  width: 6rem;
  height: 6rem;
  position: relative;
}

.boton-sec-1 img {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-orange {
  color: var(--naranja-color);
}

.boton-sec-1:hover img {
  transform: translate(-50%, -50%) scale(1.1);
  transition: transform 0.3s ease;
}
.boton-sec-2:hover img {
  transform: translate(0, -25%);
  transition: transform 0.3s ease;
}

.boton-sec-reserva {
  width: 7rem;
  height: 7rem;
  position: relative;
}



.background-vino {
  background-color: #ffffff;
}

.background-vino2 {
  background-color: #a6170a;
}

.w-16 {
  width: 16rem;
}

.img-graph {
  max-width: 513px;
}

.w-250 {
  width: 250px;
}

.borde-redondeado {
  border-radius: 2rem;
  height: 100%;
}

.footer-index {
  background-image: url("../img/fondo-footer.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}

.text-xsm {
  font-size: 0.5rem;
}

main {
  background-repeat: no-repeat;
  background-position-x: 15%;
  min-width: 400px;
}

.contenedor-img-graph {
  margin-top: 10rem;
  position: relative;
  height: 250px;
}

.contenedor-img-graph img {
  position: absolute;
}

.img-1 {
  top: 8.6rem;
  z-index: 10;
}
.img-2 {
  top: 6.2rem;
  z-index: 9;
}
.img-3 {
  top: 3.2rem;
  z-index: 8;
}
.img-4 {
  top: 0rem;
  z-index: 7;
}
.img-5 {
  top: -3.3rem;
  z-index: 6;
}
.img-6 {
  top: -6.5rem;
  z-index: 5;
}
.img-7 {
  top: -9.5rem;
  z-index: 4;
}
.img-8 {
  top: -12.6rem;
  z-index: 3;
}
.img-9 {
  top: -15.5rem;
  z-index: 3;
}

.contenedor-img-graph img {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.min-400 {
  min-width: 400px;
}

/* Es horrible pero necesário este media query, Sorry :( */
@media (max-width: 550px) {
  .img-1 {
    width: 8rem;
  }
  .img-2 {
    width: 8.7rem;
    top: 6.3rem;
  }
  .img-3 {
    width: 10.5rem;
    top: 4.5rem;
  }
  .img-4 {
    width: 13rem;
    top: 2rem;
  }
  .img-5 {
    width: 15.1rem;
    top: -0.1rem;
  }
  .img-6 {
    width: 17rem;
    top: -2rem;
  }
  .img-7 {
    width: 19rem;
    top: -4rem;
  }
  .img-8 {
    width: 21rem;
    top: -6rem;
  }
  .img-9 {
    width: 22rem;
    top: -8rem;
  }

  .contenedor-img-graph {
    margin-top: 5rem;
  }
}

.cont-sec-hero {
  background-image: url(../img/elipse-4.png);
  background-repeat: no-repeat;
  background-position: top 10% left 10%;
  max-width: 120rem;
}

.cont-sec-destacada {
  background-image: url(../img/elipse-4.png);
  background-repeat: no-repeat;
  background-position: top 30% right 10%;
  padding: 10rem 0 5rem 0;
}