:root {
    --color-green: #0EE847;
    --color-greenlow: #e5f0ea;
    --color-greenloud: #006e2f;
    --color-blueloud: #233771;
    --color-bluekiki: #D8EAFF;
    --color-blue: #54abff;
    --color-gray: #737573;
    --color-green-shiny: #23a345;
}

.color-green-shiny{
    color: var(--color-green-shiny);
}

.text-greenshiny{
    color: var(--color-green-shiny);
}

.color-green {
    color: var(--color-green);
}

.text-green {
    color: var(--color-green);
}

.bg-green {
    background-color: var(--color-green);
}

.text-greenloud {
    color: var(--color-greenloud);
}

.bg-greenlow {
    background-color: var(--color-greenlow);
}

.color-blue {
    color: var(--color-blue);
}

.text-blue {
    color: var(--color-blue);
}


.bg-blue {
    background-color: var(--color-blue);
}

.text-blueloud {
    color: var(--color-blueloud);
}

.bg-blueloud {
    background-color: var(--color-blueloud);
}

.bg-bluekiki {
    background-color: var(--color-bluekiki);
}


.text-blueloud{
    color: var(--color-blueloud);
}

.bg-gray{
    background-color: var(--color-gray);
}

.text-gray{
    color: var(--color-gray);
}


.inter {
    font-family: "Inter", sans-serif;
}

.playfair {
    font-family: "Playfair Display", serif;
}

.rubik {
    font-family: "Rubik", sans-serif;
}
.Quicksand{
    font-family: "Quicksand", sans-serif;
}


#home{
    background-image: url('https://my.englobadyne.com/media/public/fondo%20store.webp?_t=1784825073');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


html, body {
    overflow-x: hidden;
}

h1 span {
    position: relative;
    top: 30px;
    display: inline-block;
    animation: bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

    text-shadow:
        0 1px 0 #ccc,
        0 2px 0 #ccc,
        0 3px 0 #ccc,
        0 4px 0 #ccc,
        0 5px 0 #ccc,
        0 6px 0 transparent,
        0 7px 0 transparent,
        0 8px 0 transparent,
        0 9px 0 transparent,
        0 10px 10px #00000066;
}
h1 span:nth-child(1) { 
    animation-delay: .3s; 
}
h1 span:nth-child(2) { 
    animation-delay: .4s; 
}
h1 span:nth-child(3) { 
    animation-delay: .5s; 
}
h1 span:nth-child(4) { 
    animation-delay: .6s; 
}
h1 span:nth-child(5) { 
    animation-delay: .7s; 
}
h1 span:nth-child(6) { 
    animation-delay: .8s; 
}
h1 span:nth-child(7) { 
    animation-delay: .9s; 
}
h1 span:nth-child(8) { 
    animation-delay: 1s; }
    
h1 span:nth-child(9) { 
    animation-delay: 1.2s;
 }

 

@keyframes bounce {
    0% {
        top: 30px;
        text-shadow:
            0 1px 0 #ccc,
            0 2px 0 #ccc,
            0 3px 0 #ccc,
            0 4px 0 #ccc,
            0 5px 0 #ccc,
            0 6px 0 transparent,
            0 7px 0 transparent,
            0 8px 0 transparent,
            0 9px 0 transparent,
            0 10px 10px #00000066;
    }
    50% {
        top: -20px;
        text-shadow:
            0 1px 0 #ccc,
            0 2px 0 #ccc,
            0 3px 0 #ccc,
            0 4px 0 #ccc,
            0 5px 0 #ccc,
            0 6px 0 #ccc,
            0 7px 0 #ccc,
            0 8px 0 #ccc,
            0 9px 0 #ccc,
            0 50px 25px rgba(0,0,0,.2);
    }
    100% {
        top: 0px;
        text-shadow:
            0 1px 0 #ccc,
            0 2px 0 #ccc,
            0 3px 0 #ccc,
            0 4px 0 #ccc,
            0 5px 0 #ccc,
            0 6px 0 #ccc,
            0 7px 0 #ccc,
            0 8px 0 #ccc,
            0 9px 0 #ccc,
            0 20px 15px rgba(0,0,0,.3);
    }
}

@media (max-width:1023px){

    h1 span{
        text-shadow:none !important;
    }

}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.animate-carousel {
    animation: scroll 30s linear infinite;
}

/* test para ver si se soluciona q las img no se dupliquen bien */
#carouselTrack {
    display: flex;
    width: max-content;
    will-change: transform;
}

.font-inter {
    font-family: "Inter", sans-serif;
}

/* colores
el verde #23c84f
el azul  bajo #54abff
el azul fuerte #232323
*/

#laptop {
    transition: opacity 0.4s ease;
    will-change: transform, opacity;
}

.spiral-img {
    will-change: transform, opacity;
}
.mySwiper {
    margin-top: 20px;
}