.elementor-281 .elementor-element.elementor-element-2ec5f095{--display:flex;--min-height:100vh;}.elementor-281 .elementor-element.elementor-element-2ec5f095:not(.elementor-motion-effects-element-type-background), .elementor-281 .elementor-element.elementor-element-2ec5f095 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zoiyogurtgriego.com/wp-content/uploads/2026/08/guillaume-galtier-3YrppYQPoCI-unsplash-scaled.jpg");background-position:center center;background-size:cover;}.elementor-281 .elementor-element.elementor-element-4a68c3ca{--display:flex;--min-height:100vh;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-281 .elementor-element.elementor-element-3dc8adb{text-align:center;}.elementor-281 .elementor-element.elementor-element-3dc8adb .elementor-heading-title{font-family:"Cinzel", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-281 .elementor-element.elementor-element-107e9bf5{text-align:center;}.elementor-281 .elementor-element.elementor-element-107e9bf5 .elementor-heading-title{font-family:"Cinzel", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-281 .elementor-element.elementor-element-5cdb42cc{text-align:center;}.elementor-281 .elementor-element.elementor-element-5cdb42cc .elementor-heading-title{font-family:"Cinzel", Sans-serif;font-size:35px;font-weight:600;color:#FFFFFF;}.elementor-281 .elementor-element.elementor-element-520af545 img{width:100%;max-width:100%;}@media(min-width:768px){.elementor-281 .elementor-element.elementor-element-2ec5f095{--content-width:95%;}}@media(min-width:1025px){.elementor-281 .elementor-element.elementor-element-2ec5f095:not(.elementor-motion-effects-element-type-background), .elementor-281 .elementor-element.elementor-element-2ec5f095 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for heading, class: .elementor-element-3dc8adb */.elementor-281 .elementor-element.elementor-element-3dc8adb {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 10;
    text-align: center;
}
@media (max-width: 767px) {
    .elementor-281 .elementor-element.elementor-element-3dc8adb {
        top: 25%;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-107e9bf5 */.elementor-281 .elementor-element.elementor-element-107e9bf5 {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 10;
    text-align: center;
}
.elementor-281 .elementor-element.elementor-element-107e9bf5 {
    opacity: 0;
}
@media (max-width: 767px) {
    .elementor-281 .elementor-element.elementor-element-107e9bf5 {
        top: 25%;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5cdb42cc */.elementor-281 .elementor-element.elementor-element-5cdb42cc {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 10;
    text-align: center;
}
.elementor-281 .elementor-element.elementor-element-5cdb42cc {
    opacity: 0;
}
@media (max-width: 767px) {
    .elementor-281 .elementor-element.elementor-element-5cdb42cc {
        top: 25%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7612a4d5 */.elementor-281 .elementor-element.elementor-element-7612a4d5 {
    position: fixed !important;
    left: 50% !important;
    top: 31% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 50px !important;
    z-index: 99999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.elementor-281 .elementor-element.elementor-element-7612a4d5 .zoi-scroll-indicator {
    position: relative !important;
    width: 40px !important;
    height: 50px !important;
    display: block !important;
}

/* FLECHA 1 */
.elementor-281 .elementor-element.elementor-element-7612a4d5 .zoi-scroll-indicator::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: 17px !important;
    height: 17px !important;
    border-right: 3px solid #fff !important;
    border-bottom: 3px solid #fff !important;
    transform: translateX(-50%) rotate(45deg) !important;
    animation: zoiArrowMove 1.5s ease-in-out infinite !important;
}

/* FLECHA 2 */
.elementor-281 .elementor-element.elementor-element-7612a4d5 .zoi-scroll-indicator::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 13px !important;
    width: 17px !important;
    height: 17px !important;
    border-right: 3px solid #fff !important;
    border-bottom: 3px solid #fff !important;
    transform: translateX(-50%) rotate(45deg) !important;
    opacity: 0.6 !important;
    animation: zoiArrowMove 1.5s ease-in-out infinite !important;
    animation-delay: 0.18s !important;
}

@keyframes zoiArrowMove {

    0% {
        transform: translateX(-50%) translateY(0) rotate(45deg);
        opacity: 0.25;
    }

    50% {
        transform: translateX(-50%) translateY(7px) rotate(45deg);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(0) rotate(45deg);
        opacity: 0.25;
    }
}

/* CELULAR */
@media (max-width: 767px) {

    .elementor-281 .elementor-element.elementor-element-7612a4d5 {
        position: fixed !important;
        top: 38% !important;
        left: 50% !important;
    }

}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-520af545 */.elementor-281 .elementor-element.elementor-element-520af545 {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    max-width: none;
    z-index: 20;
    margin: 0;
}

.elementor-281 .elementor-element.elementor-element-520af545 img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    .elementor-281 .elementor-element.elementor-element-520af545 {
        top: 10%;
        width: 200px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4a68c3ca */.elementor-281 .elementor-element.elementor-element-4a68c3ca {
    background: transparent !important;
}

.zoi-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    z-index: 20;
    width: 28px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
}

.zoi-scroll-indicator span {
    display: block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    animation: zoiArrowBounce 1.6s ease-in-out infinite;
}

.zoi-scroll-indicator {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translateX(-50%);
    z-index: 50;
    width: 40px;
    height: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.zoi-scroll-indicator span {
    display: block;
    width: 17px;
    height: 17px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
    animation: zoiArrowBounce 1.6s ease-in-out infinite;
}

.zoi-scroll-indicator span:nth-child(2) {
    margin-top: -8px;
    opacity: 0.55;
    animation-delay: 0.15s;
}

@keyframes zoiArrowBounce {
    0%, 100% {
        transform: translateY(0) rotate(45deg);
        opacity: 0.45;
    }

    50% {
        transform: translateY(7px) rotate(45deg);
        opacity: 1;
    }
}
@media (max-width: 767px) {

    .zoi-scroll-indicator {
        position: absolute !important;
        left: 50% !important;
        top: 58% !important;
        transform: translateX(-50%) !important;
        z-index: 999 !important;
        display: flex !important;
        width: 40px !important;
        height: 45px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .zoi-scroll-indicator span {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        border-right: 3px solid #fff !important;
        border-bottom: 3px solid #fff !important;
    }
}



/* CELULAR */

@media (max-width: 767px) {

    .zoi-stage::after {
        top: 58% !important;
        width: 18px !important;
        height: 18px !important;
        border-right: 3px solid #ffffff !important;
        border-bottom: 3px solid #ffffff !important;
    }

}

@media (max-width: 767px) {

    .zoi-stage {
        background: transparent !important;
        background-image: none !important;
    }

    .zoi-hero {
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center top !important;
    }

}

/* =========================
   YOGURES FLOTANTES
   ========================= */

.zoi-yogurt-1,
.zoi-yogurt-2,
.zoi-yogurt-3 {
    position: absolute !important;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 1 !important;
}

/* NARANJA */
.zoi-yogurt-1 {
    width: 190px !important;
    left: 14% !important;
    top: 36% !important;
}

/* AZUL */
.zoi-yogurt-2 {
    width: 190px !important;
    right: 14% !important;
    top: 29% !important;
}

/* ROSADO */
.zoi-yogurt-3 {
    width: 180px !important;
    right: 19% !important;
    top: 57% !important;
}

.zoi-yogurt-1 img,
.zoi-yogurt-2 img,
.zoi-yogurt-3 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* EL GRIEGO DELANTE */
.zoi-greek-frame1,
.zoi-greek-frame2 {
    z-index: 2 !important;
}

/* =========================
   YOGURES - CELULAR
   ========================= */

@media (max-width: 767px) {

    /* NARANJA */
    .zoi-yogurt-1 {
        width: 115px !important;
        left: 8% !important;
        top: 57% !important;
    }

    /* ROSADO — CENTRADO Y RECTO */
    .zoi-yogurt-3 {
        width: 115px !important;
        left: 50% !important;
        right: auto !important;
        top: 54% !important;
        margin-left: -57.5px !important;
    }

    /* AZUL */
    .zoi-yogurt-2 {
        width: 115px !important;
        right: 8% !important;
        left: auto !important;
        top: 57% !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2ec5f095 */.zoi-hero {
    position: relative;
    height: 280vh;
    overflow: visible;
}

.zoi-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.zoi-greek-frame1,
.zoi-greek-frame2 {
    position: absolute;
    width: 62%;
    max-width: 900px;
    left: 50%;
    bottom: -2%;
    transform: translateX(-50%);
    margin: 0;
}

.zoi-greek-frame1 {
    z-index: 2;
}

.zoi-greek-frame2 {
    z-index: 3;
    opacity: 0;
}
.zoi-hero {
    background-attachment: fixed;
}
@media (max-width: 767px) {

    .zoi-greek-frame1,
    .zoi-greek-frame2 {
        position: absolute !important;
        width: 145vw !important;
        max-width: none !important;
        left: 50% !important;
        bottom: -1vh !important;
        transform: translateX(-50%) !important;
    }

    .zoi-greek-frame1 img,
    .zoi-greek-frame2 img {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
    }
}/* End custom CSS */