.label_anima, .cap, .container_anima {
    will-change: transform;
}

@media (max-width: 1024px) {
    body {
        overflow-x: hidden;
       /* transform: translateZ(0);*/
    }
}

@supports (-webkit-touch-callout: none) {
    .label_anima, .cap, .container_anima {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
    }
    .label_anima {

    top: -20px;
    width: 36vw;
    }
    
}






@media (max-width: 767px) {
:root {
--base-size2: 20vw !important;
}

.cap {
height: 12vw !important;
}

.drop{
filter: saturate(1.5);
width: 0.5vw !important;
height: 2vw !important;
}


.label_anima {
    top: -1vw !important;
     width: 20vw;
    
}





}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Estilos para pantallas entre 768px y 1023px de ancho */
  
  
  :root {
--base-size2: 20vw !important;
}

.cap {
height: 12vw !important;
}

.drop{
filter: saturate(1.5);
width: 1.2vw !important;
height: 2.0vw !important;
}
  
.label_anima {
    width: 25vw;
}  
  
  
}

@media (min-width: 1024px) and (max-width: 2043px) {
 /* Estilos para pantallas entre 1024px y 2043px */
 
 :root {
--base-size2: 10vw !important;
}

.cap {
height: 6vw !important;
}

.drop{
filter: saturate(1.5);
width: 0.5vw !important;
height: 0.7vw !important;
}
.label_anima {

    width: 12vw;
} 
 
}

@media (min-width: 2044px) {
  /* Estilos para pantallas de 2044px de ancho o más */
  
  :root {
--base-size2: 15vw !important;
}

.cap {
height: 9vw !important;
}
    .drop{
filter: saturate(1.5);
width: 0.5vw !important;
height:  0.7vw !important;
}
.label_anima {

    width: 25vw;
}
  
}



































/* Flexbox con prefijos para soporte más amplio */
.bodi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    /* justify-content: center;
    align-items: center;
    flex-direction: column; */
}

.wrapper_full {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: left;
}



.wrapper_anima {
     left: 30px;
    position: relative;
    width: calc(var(--base-size2) * 0.5);
    height: var(--base-size2);
}

.container_anima {
    overflow: hidden;
  filter: drop-shadow(2px 4px 6px black);
    z-index: 2;
    position: relative;
    width: 50%;
    height: 50%;
    background-image: url('img/frasco.webp');
    background-size: contain;
    background-position: center;
    -webkit-mask-image: url('img/frasco.webp');
    mask-image: url('img/frasco.webp');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
    will-change: transform;
}

.label_anima {
   filter: contrast(0.9);
    position: absolute;
    top: -0.3vw;
    right: -45px;

    height: 100%;
    background-image: url(img/etiqueta.webp);
    background-size: cover;
    background-position-y: center;
    mix-blend-mode: hard-light;
    transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
    will-change: transform;
}







.container_anima::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgb(0 0 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgb(0 0 0 / 78%) 100%);
    pointer-events: none;
    z-index: 1;
}

.cap {
    z-index: 0;
    position: absolute;
    top: 80px;
    left: 25%;
    width: 29%;
    background-image: url('img/gotero.webp');
    background-size: contain;
    background-position: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
    will-change: transform;
}

.drop {
    background-image: url(img/gota.webp);
    background-size: cover;
    background-position: center;
    z-index: 0;
    position: absolute;
    width: 7px;
    height: 12px;
    border-radius: 0 50% 50% 50%;
    bottom: -40px;
    left: 50%; 
    -webkit-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
    -webkit-animation: goteo 0.3s ease-in-out;
    animation: goteo 0.3s ease-in-out;
    opacity: 0;
}

/* Animación de goteo con prefijos */
@-webkit-keyframes goteo {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-100%);
        transform: translateX(-50%) translateY(-100%);
    }
    10% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(500%);
        transform: translateX(-50%) translateY(500%);
    }
}

@keyframes goteo {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-100%);
        transform: translateX(-50%) translateY(-100%);
    }
    10% {
        opacity: 1; 
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(500%);
        transform: translateX(-50%) translateY(500%);
    }
}