section.section_home {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.alfa {
  opacity: 0;
  pointer-events: none;
}
.comparisonSection {
  position: relative;
  padding-bottom: 56.25%;
}
.comparisonImage {
  width: 100%;
  height: 100%;
}
.afterImage {
  position: absolute;
  overflow: hidden;
  top: 0;
  transform: translate(100%, 0px);
}
.afterImage img {
  transform: translate(-100%, 0px);
}
.comparisonImage img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.beforeImage img {
  filter: saturate(0) brightness(0.35) contrast(1.5);
}
.beforeImage img.active {
  filter: saturate(1) brightness(1) contrast(1);
}

.ta1 {
  width: 100%;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 4vw;
  opacity: 0;
  font-family: "Dashiell";
  font-weight: 600;
}
.box {
  background-color: green;
  width: 500px;
  margin: 500px;
  height: 100px;
  position: relative;
}
/*  EVENTOS   */
.carrusel {
  position: relative;
  display: inline-block;
  width: 100%;
}
.item_c {
  position: relative;
  display: inline-block;
  width: 100%;
}
.linea_amarilla {
  height: 350px;
  background-color: black;
}
.logo-pm2 {
  position: absolute;
  z-index: 1;
  width: 20%;
  left: 50%;
  top: -2%;
  transform: translate(-50%, -50%);
}
.logo-pm2 img {
  margin-top: -88%;
  max-width: 100%;
  /*    left: 10px;*/
}
.logo-pm2 h2 {
  width: 25vw;
  text-align: center;
}
.item_c .bg-img {
  position: relative;
  width: 100%;
}

section.section_home {
  position: relative;
  width: 100%;
  height: 100vh;
}
.franja_container {
  position: absolute;
  height: 100%;
  width: 35%;
  top: 0;
  left: 10%;
}
.franja_container {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.franja_container.nopointers,
.franja_container.nopointers *,
.home_videos_hojas_container,
.home_videos_hojas_container * {
  pointer-events: none;
}
.home_videos_hojas_container video,
.home_videos_hojas_container canvas {
  position: relative;
  height: 100%;
}
.franja_container.nopointers button {
  pointer-events: all;
}
.franja_container .franja {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--amarillo);
  padding: 10%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}
.franja_container .franja img:not(.logo_interior) {
  max-width: 90%;
  transform-origin: top;
}
.franja_container .franja img.logo_interior {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  filter: invert(1);
}

.franja_container .franja h2 {
  margin-top: 2.5rem;
}
.franja_container .franja p {
}

.home_videos_hojas_container {
  position: absolute;
  height: 100%;
  width: 35%;
  top: 0;
  left: 10%;
}

.home_videos_hojas {
  position: absolute;
  top: 20px;
  left: 98%;
  height: 95%;
  transform: none !important;
}
.home_videos_hojas.v2 {
  position: absolute;
  left: -32vh;
}
.home_videos_hojas canvas {
  transform-origin: left center;
}
.home_videos_hojas canvas {
  transform-origin: left center;
}

#video_hojas2 {
  position: absolute;
  top: 0;
}
.bola {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: yellow;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

/*  PRODUCTOS   */
.image-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(../assets/images/productos-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.prodgroup {
  position: absolute;
  top: 65%;
  left: 0%;
  transform: translateY(-50%);
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
.prod {
  transform-origin: bottom;
  transform: scale(0.9);
}
.prod.over {
  transform: scale(1);
}
.prod_container,
.prod_container a {
  text-decoration: none;
  display: flex;
  flex-flow: column;
  align-items: center;
  transform-origin: bottom;
}

/* .info {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
} */

.prod_img_container img {
  position: relative;
  display: flex;
  align-items: center;
}
.prod_img_container .overs {
  position: absolute;
  transform: scale(0.65);
  width: 100%;
  height: 100%;
  top: 0;
}
.prod_img_container .overs img {
  position: absolute;
  bottom: 0;
  transform-origin: bottom;
  opacity: 0;
  transition-timing-function: ease-in;
  transition: 0.3s;
}
.prod_img_container .overs img.active {
  opacity: 1;
}

/* TÓNICAS */
.i.hojas {
  left: -110px;
  transform: rotate(-20deg) translate(55px, -6px) scale(0.1);
}
.i.hojas.active {
  transform: none;
}

.i.hielo {
  left: 40px;
  transform: scale(0.65) translateX(-10%);
}
.i.hielo.active {
  transform: scale(0.65);
}

.i.burbujitas {
  bottom: 0% !important;
}
.i.burbujitas.active {
  bottom: 50% !important;
}

/* CÍTRICOS */
.i.hojas2 {
  left: -50px;
  bottom: 40px;
  transform: rotate(80deg);
}
.i.hojas2.active {
  left: -110px;
  bottom: 90px;
  transform: rotate(0deg);
}

.i.limon-entero {
  transform: scale(1) translate(-10px, 10px);
}
.i.limon-entero.active {
  transform: scale(1) translate(-100px, 10px);
}

.i.limon-rodajas {
  transform: translate(50px, 10px) rotate(-18deg);
}
.i.limon-rodajas.active {
  transform: translate(50px, 10px) rotate(0deg);
}
.i.rodajas-limas-selection {
  bottom: -10px !important;
}
.i.rodajas-limas-selection.active {
  bottom: 0px !important;
}

/* SELECTION */
.i.abeja {
  top: 70px;
  left: 90px;
}
.i.abeja.active {
  top: 50px;
  left: 40px;
}

.i.limas-selection {
  left: -80px;
  transform: rotate(18deg);
}
.i.limas-selection.active {
  left: -120px;
  transform: none;
}

/* SELECTION */
.i.genjibre {
  transform: translate(17px, -30px) scale(0.5) rotate(30deg);
}
.i.genjibre.active {
  transform: translate(60px, -30px);
}

.i.hielo2 {
  transform: scale(0.55) translate(-230px, -44px) rotate(30deg);
}
.i.hielo2.active {
  transform: scale(0.65) translate(-200px, -30px) rotate(7deg);
}

/*  COCTAILS  */
.home_coctails_container {
  position: relative;
  top: 30px;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: end;
  align-items: center;
}
.carrusel_coctails_container {
  position: relative;
  width: 100vw;
  opacity: 0;
}
.carrusel_coctails {
  position: relative;
}
.coctail_item {
}
.coctail_img {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 40px;
  overflow: hidden;
}
.carrusel_coctails .slick-slide {
  position: relative;
  transform: scale(0.65);
  transition: 0.5s ease-in-out;
  opacity: 0;
}
.carrusel_coctails .slick-active {
  opacity: 1;
  transform: scale(0.65);

  filter: blur(5px);
}
.coctail_img img {
  width: 100%;
}
.img-carrusel-coctel {
  text-decoration: none;
}
.img-carrusel-coctel:hover .anim {
  transform: scale(1.05);
  transition: 0.3s ease-in-out;
}
.img-carrusel-coctel:hover h3 {
  color: #ffd304;
  transition: 0.3s ease-in-out;
}
.nofilter {
  filter: none !important;
}
.coctail_img img.v2 {
  transition: 0.05s ease-in-out;
}

.carrusel_coctails .slick-center {
  filter: blur(0px);
  transform: scale(0.95);
}

.mixer {
  position: relative;
  transform: scale(0.65);
  z-index: 1;
  top: 210px;
}
.mixer img {
}
.titles_cocktails {
  position: relative;
  padding: 20px;
  z-index: 1;
}

.info_cocktails {
  position: relative;
  text-align: center;
}

.info_cocktails p {
  font-family: "Dashiell";
  font-weight: 200;
  font-size: min(3vw, 20px);
}
.info_cocktails h3 {
  font-size: min(10vw, 30px);
}
.titles_cocktails *,
.info_cocktails * {
  color: black;
}
.titles_cocktails h2,
.titles_cocktails h3,
.info_cocktails h2,
info_cocktails h3 {
  font-family: "Dashiell";
  font-weight: 600;
}

section.home_coctails {
  height: auto;
  padding-top: 50px;
}
.btn_cocktails {
  bottom: 20px;
  margin-bottom: 30px;
}
.carrusel_coctails .slick-arrow {
  bottom: unset !important;
  top: 40% !important;
  margin-top: 0;
}
.carrusel_coctails .slick-arrow.over {
  margin-top: 0;
}

.carrusel_coctails .slick-arrow.slick-prev {
  right: unset;
  left: 10px;
}
.slick-arrow.slick-next {
  position: absolute;
  right: unset;
  right: 10px;
}
.carrusel .slick-arrow {
  transform: scale(1.2);
}
.carrusel .slick-arrow.slick-prev {
  right: 125px;
}
.carrusel .slick-arrow.slick-next {
  right: 30px;
}

.circulo {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 100%;
  border: 12px solid var(--amarillo);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -6px;
  margin-left: 3px;
  background-color: black;
  overflow: hidden;
}
.circulo2 {
  position: absolute;
  width: 1000px;
  height: 1000px;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  margin-top: -6px;
  margin-left: 3px;
}
.m {
  position: absolute;
  opacity: 0.65;
}
.m1 {
  left: 365px;
  top: -120px;
}
.m2 {
  left: 720px;
  top: 20px;
  transform: rotate(45deg);
}
.m3 {
  transform: rotate(-45deg);
  top: 20px;
  left: 15px;

  top: 370px;
  left: 850px;
  transform: rotate(90deg);
}
.m4 {
  top: 370px;
  left: -120px;
  transform: rotate(-90deg);

  transform: rotate(135deg);
  top: 720px;
  left: 725px;
}
.m5 {
  top: 730px;
  left: 30px;
  transform: rotate(-135deg);

  top: 865px;
  left: 375px;
  transform: rotate(-180deg);
}
.m6 {
  top: 865px;
  left: 375px;
  transform: rotate(-180deg);

  top: 730px;
  left: 30px;
  transform: rotate(-135deg);
}
.m6 {
  top: 865px;
  left: 375px;
  transform: rotate(-180deg);

  top: 730px;
  left: 30px;
  transform: rotate(-135deg);
}
.m7 {
  top: 383px;
  left: -120px;
  transform: rotate(-90deg);
}
.parallax_els {
  z-index: 1;
}
.parallax_els,
.parallax_els2 {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
.parallax_els,
.parallax_els *,
.parallax_els2,
.parallax_els2 * {
  pointer-events: none;
}
.parallax_els img,
.parallax_els2 img {
  position: absolute;
}
.pe_limon {
  top: -2vh;
  left: -80px;
  width: 20vw;
  z-index: 1;
}
.pe_hojas {
  bottom: 5vh;
  left: -8vw;
  width: 30vw;
  z-index: 1;
}
.pe_hoja {
  top: 75vh;
  left: 73vw;
  width: 16vw;
  z-index: 1;
}
.pe_twist {
  top: 5vvh;
  left: 75vw;
  width: 35vw;
}
section.home_pm {
  z-index: 1;
}
.carrusel_grid {
  top: 0;
  width: 100vw;
  height: 100vh;
  /*    background: black;*/
  z-index: 120;
}
.carrusel_grid .boton.mini {
  pointer-events: none;
  position: absolute;
  bottom: 50px;
  left: 35%;
}

.carrusel_grid .fondo {
  position: relative;
  width: 100vw;
  height: auto;
  background: var(--amarillo);
}
.franja_container,
.home_videos_hojas_container {
  z-index: 121;
}

.carrusel .item_c {
  clip-path: rect(0px 100vw 100vh 0vw);
  -webkit-clip-path: rect(0px 100vw 100vh 0vw);
}
.carrusel_grid .item_c {
  position: absolute;
  width: 100%;
  width: 99.5%;
  /*    background-color: var(--amarillo);*/
  top: 0;
  left: 0;
  clip-path: rect(0px 30vw 100vh 0px);
  -webkit-clip-path: rect(0px 30vw 100vh 0px);
}
.carrusel_grid .item_c .bg-img {
  transition: 0.5s linear;
  filter: saturate(0) contrast(1) brightness(0.6);
}
.carrusel_grid .item_c.over .bg-img {
  filter: saturate(1) contrast(1) brightness(1);
}
.carrusel_grid .item_c.over .boton::after {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  box-shadow: inset -0px 0px 10px 2px var(--gris-oscuro);
}

.carrusel_grid .item_c:nth-child(1) {
  clip-path: rect(0px 33.3vw 100vh 0px);
  -webkit-clip-path: rect(0px 33.3vw 100vh 0px);
}
.carrusel_grid .item_c:nth-child(2) {
  clip-path: rect(0px 66.6vw 100vh 33.3vw);
  -webkit-clip-path: rect(0px 66.6vw 100vh 33.3vw);
}
.carrusel_grid .item_c:nth-child(3) {
  clip-path: rect(0px 100vw 100vh 66.6vw);
  -webkit-clip-path: rect(0px 100vw 100vh 66.6vw);
}

.carrusel_grid .item_c:nth-child(1) .boton.mini {
  left: 13%;
}
.carrusel_grid .item_c:nth-child(2) .boton.mini {
  left: 47%;
}
.carrusel_grid .item_c:nth-child(3) .boton.mini {
  left: 82%;
}
.carrusel_grid img.logo_interior {
  position: absolute;
  bottom: 20%;
  transform: translateX(-40%);
}
.carrusel_grid .item_c:nth-child(1) img.logo_interior {
  left: 13%;
}
.carrusel_grid .item_c:nth-child(2) img.logo_interior {
  left: 47%;
}
.carrusel_grid .item_c:nth-child(3) img.logo_interior {
  left: 82%;
}
.carrusel_grid .item_c:nth-child(4) {
  clip-path: rect(0px 99.25vw 100vh 75vw);
  -webkit-clip-path: rect(0px 99.25vw 100vh 75vw);
}
.carrusel_grid .item_c:nth-child(4) .boton.mini {
  left: 85%;
}
.carrusel_grid .item_c.active {
  z-index: 11111111;
  pointer-events: none;
}
.carrusel_grid .item_c.active .bg-img {
  filter: none;
}

@media screen and (max-width: 1600px) {
  .logo-pm2 {
    top: -3%;
  }

  .linea_amarilla {
    height: 300px;
  }
}

@media screen and (max-width: 1300px) {
  .logo-pm2 {
    top: -4%;
  }

  .linea_amarilla {
    height: 250px;
  }
}

@media screen and (max-width: 850px) {
  .linea_amarilla {
    width: 150px;
  }
  .carrusel .slick-arrow.slick-next,
  .franja_container .slick-arrow.slick-next {
    right: -20px;
  }
  .prodgroup {
    margin-bottom: 0;
  }
  .frame__content-title {
    font-size: min(13vw, 135px) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75) !important;
  }
  .frame {
    padding: 0;
  }
  .ornamento.o1 {
    height: 55px;
    background-size: cover;
    margin-top: 1px;
  }
  .pe_hojas {
    width: 50vw;
    bottom: 0;
  }
  .pe_hoja {
    width: 30vw;
    top: 80vh;
    left: 77vw;
  }
  .pe_twist {
    top: -33vh;
    left: 68vw;
    width: 55vw;
  }
  .pe_limon {
    top: -40vh;
    left: -30px;
    width: 37vw;
    z-index: 1111;
  }
  h3 {
    font-size: 8vw;
  }
  .info_cocktails p {
    font-size: 5vw;
  }
  section.home_coctails {
    padding-top: 50px;
    height: auto;
  }

  .mixer {
    top: 230px;
  }
  .carrusel_coctails_container {
    bottom: unset;
  }
  .coctail_img img {
    width: 100%;
  }

  .carrusel_coctails .slick-slide {
    transform: scale(0.45);
    filter: none;
  }
  .carrusel_coctails .slick-center {
    filter: none;
    transform: scale(0.85);
  }
  .info_cocktails {
    bottom: unset;
  }
  .home_productos {
    position: relative;
    height: auto !important;
  }
  .container_productos {
    position: relative;
    height: auto !important;
  }
  .prodgroup {
    position: relative;
    height: auto !important;
    top: 0;
  }
  .info {
    position: relative;
    top: 0;
    padding: 20px;
  }
  .prod_container {
    position: relative;
    display: flex;
    width: 35%;
    align-items: center;
    transform: scale(0.75);
    top: 0;
  }
  .item_c .bg-img {
    position: relative;
    width: 130%;
    transform-origin: right;
  }
  .franja_container {
    position: relative;
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
    overflow: visible;
  }
  .franja_container .franja {
    padding: 20px;
  }
  .franja_container .franja h2 {
    margin-top: 0;
    font-size: 30px;
    text-align: right;
  }
  .franja_container .franja img {
    position: absolute;
    top: -7.5vh;
    left: 3vw;
    width: 150px;
    width: 46vw;
    max-width: 100px;
  }
  .carrusel_coctails .slick-arrow.slick-prev {
    right: unset;
    left: -12px;
  }
  .carrusel_coctails .slick-arrow.slick-next {
    right: -12px;
  }
}
@media screen and (min-aspect-ratio: 17/9) {
  .franja_container .franja img {
    max-width: 15vw;
  }
  .slick-arrow {
    bottom: -10px;
  }
  .home_productos {
    height: auto;
    overflow: visible;
  }
  .prodgroup {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
  }
  .prod_container {
    transform: scale(0.8);
    display: flex;
    flex-flow: column;
    align-items: center;
    transform-origin: bottom;
  }
  .home_coctails_container {
    top: 150px;
    margin-bottom: 50px;
  }
  section.home_coctails {
    padding-bottom: 100px;
  }
  button.slick-arrow {
    transform: scale(1.2);
    bottom: 5px;
  }
  .slick-arrow.slick-next {
    right: 15px;
  }
  .slick-arrow.slick-prev {
    right: 105px;


    @media screen and (min-width: 851px) and (max-width: 1249px) {
      .home_productos .prodgroup {
        top: 52%;
      }
      .home_productos .prod_container {
        transform: scale(0.8);
        transform-origin: bottom center;
      }
    }

    @media screen and (max-width: 1023px) {
      section.section_home.home_productos {
        height: auto;
        overflow: visible;
      }
      .home_productos .container_productos {
        min-height: 100vh;
        height: auto !important;
        padding-bottom: 60px;
        display: flex;
        flex-direction: column;
      }
      .home_productos .info {
        position: relative;
        top: 0;
        left: auto;
        transform: none;
        text-align: center;
        padding: 100px 20px 20px;
        z-index: 1;
      }
      .home_productos .prodgroup {
        position: relative;
        top: 0;
        left: auto;
        transform: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 10px;
        padding: 0 10px 40px;
        margin-bottom: 0;
        z-index: 1;
      }
      .home_productos .prod_container {
        position: relative;
        top: 0;
        width: 44%;
        transform: scale(0.88);
        transform-origin: bottom center;
      }
    }

    /* ≤600px: tighter 2-column grid */
    @media screen and (max-width: 600px) {
      .home_productos .prod_container {
        width: 46%;
        transform: scale(0.82);
        transform-origin: bottom center;
      }
    }

    @media screen and (max-width: 480px) {
      .home_productos .prodgroup {
        flex-direction: column;
        align-items: center;
      }
      .home_productos .prod_container {
        width: 72%;
        transform: scale(1);
        transform-origin: bottom center;
      }
    }

    @media screen and (max-width: 360px) {
      .home_productos .prod_container {
        width: 86%;
      }
    }
  }
}