.elementor-38 .elementor-element.elementor-element-8f6fbd3{--display:flex;}.elementor-38 .elementor-element.elementor-element-94e1211{--display:flex;}.elementor-38 .elementor-element.elementor-element-a98df46{--display:flex;}.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-38 .elementor-element.elementor-element-3a2507d{text-align:center;}.elementor-38 .elementor-element.elementor-element-3a2507d img{width:100%;}.elementor-38 .elementor-element.elementor-element-9f3ddb8{--display:flex;}.elementor-38 .elementor-element.elementor-element-9dca1e4{--spacer-size:20px;}.elementor-38 .elementor-element.elementor-element-26dfffd{width:var( --container-widget-width, 16.767% );max-width:16.767%;--container-widget-width:16.767%;--container-widget-flex-grow:0;top:-95px;}.elementor-38 .elementor-element.elementor-element-26dfffd.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-26dfffd{right:240px;}body.rtl .elementor-38 .elementor-element.elementor-element-26dfffd{left:240px;}.elementor-38 .elementor-element.elementor-element-26dfffd img{width:100%;}.elementor-38 .elementor-element.elementor-element-edcdfb6{width:var( --container-widget-width, 15.051% );max-width:15.051%;--container-widget-width:15.051%;--container-widget-flex-grow:0;top:-32px;}.elementor-38 .elementor-element.elementor-element-edcdfb6.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-edcdfb6{left:191px;}body.rtl .elementor-38 .elementor-element.elementor-element-edcdfb6{right:191px;}.elementor-38 .elementor-element.elementor-element-edcdfb6 img{width:100%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-38 .elementor-element.elementor-element-d28745e{text-align:center;}.elementor-38 .elementor-element.elementor-element-d28745e .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2rem;font-weight:600;color:var( --e-global-color-accent );}.elementor-38 .elementor-element.elementor-element-69c3427{--display:flex;}.elementor-38 .elementor-element.elementor-element-69c3427:not(.elementor-motion-effects-element-type-background), .elementor-38 .elementor-element.elementor-element-69c3427 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bodayoadan.invitika.com/wp-content/uploads/2026/07/Marco.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-38 .elementor-element.elementor-element-2e6520d{--spacer-size:25px;}.elementor-38 .elementor-element.elementor-element-4f159e3{text-align:center;}.elementor-38 .elementor-element.elementor-element-4f159e3 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2rem;font-weight:600;}.elementor-38 .elementor-element.elementor-element-3058adc img{width:35%;}.elementor-38 .elementor-element.elementor-element-464174d{--display:flex;}.elementor-38 .elementor-element.elementor-element-9dc8668{--display:flex;}.elementor-38 .elementor-element.elementor-element-68f3c5a{--display:flex;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-b4de44c{left:247px;}body.rtl .elementor-38 .elementor-element.elementor-element-b4de44c{right:247px;}.elementor-38 .elementor-element.elementor-element-b4de44c{top:269px;}.elementor-38 .elementor-element.elementor-element-b4de44c img{width:100%;}.elementor-38 .elementor-element.elementor-element-e87afd5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 40px 0px 0px;text-align:end;}.elementor-38 .elementor-element.elementor-element-e87afd5 img{width:68%;}.elementor-38 .elementor-element.elementor-element-308abbe{--display:flex;}.elementor-38 .elementor-element.elementor-element-2c932fd{--spacer-size:35px;}.elementor-38 .elementor-element.elementor-element-81c15d8{text-align:center;}.elementor-38 .elementor-element.elementor-element-81c15d8 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2rem;font-weight:600;color:#86895E;}.elementor-38 .elementor-element.elementor-element-22d2e17{text-align:center;}.elementor-38 .elementor-element.elementor-element-22d2e17 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2rem;font-weight:600;}.elementor-38 .elementor-element.elementor-element-05f7714{--display:flex;}.elementor-38 .elementor-element.elementor-element-c5a6776 img{width:100%;}.elementor-38 .elementor-element.elementor-element-98c3da9{--spacer-size:15px;}.elementor-38 .elementor-element.elementor-element-cf57ed3{--display:flex;}.elementor-38 .elementor-element.elementor-element-cf57ed3:not(.elementor-motion-effects-element-type-background), .elementor-38 .elementor-element.elementor-element-cf57ed3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#86895E;}.elementor-38 .elementor-element.elementor-element-ef5576e.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-ef5576e{left:121px;}body.rtl .elementor-38 .elementor-element.elementor-element-ef5576e{right:121px;}.elementor-38 .elementor-element.elementor-element-ef5576e{top:185px;}.elementor-38 .elementor-element.elementor-element-8c5c443.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-38 .elementor-element.elementor-element-8c5c443{text-align:center;}.elementor-38 .elementor-element.elementor-element-8c5c443 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:3rem;font-weight:700;color:var( --e-global-color-secondary );}.elementor-38 .elementor-element.elementor-element-7df0d2c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-38 .elementor-element.elementor-element-7df0d2c{text-align:center;}.elementor-38 .elementor-element.elementor-element-7df0d2c .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:1.5rem;font-weight:600;color:var( --e-global-color-secondary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-38 .elementor-element.elementor-element-8ff9a6d .elementor-button{background-color:#E3D6C3;font-family:"Roboto", Sans-serif;font-size:1.5rem;font-weight:500;border-radius:15px 15px 15px 15px;}.elementor-38 .elementor-element.elementor-element-8ff9a6d .elementor-button-content-wrapper{flex-direction:row;}.elementor-38 .elementor-element.elementor-element-8ff9a6d .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-38 .elementor-element.elementor-element-137a30d{--display:flex;}.elementor-38 .elementor-element.elementor-element-6cb3b14{--spacer-size:20px;}.elementor-38 .elementor-element.elementor-element-505f14b{--spacer-size:50px;}.elementor-38 .elementor-element.elementor-element-0c354b7{--spacer-size:50px;}.elementor-38 .elementor-element.elementor-element-8d4007e{--display:flex;}.elementor-38 .elementor-element.elementor-element-234fef5{--spacer-size:50px;}.elementor-38 .elementor-element.elementor-element-f35c18f{width:var( --container-widget-width, 29.917% );max-width:29.917%;--container-widget-width:29.917%;--container-widget-flex-grow:0;top:-1px;}.elementor-38 .elementor-element.elementor-element-f35c18f.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-f35c18f{left:847px;}body.rtl .elementor-38 .elementor-element.elementor-element-f35c18f{right:847px;}.elementor-38 .elementor-element.elementor-element-f35c18f img{width:100%;}.elementor-38 .elementor-element.elementor-element-5c02112{--spacer-size:50px;}.elementor-38 .elementor-element.elementor-element-00a1b79{--display:flex;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-2bc826b{left:725px;}body.rtl .elementor-38 .elementor-element.elementor-element-2bc826b{right:725px;}.elementor-38 .elementor-element.elementor-element-2bc826b{top:-25px;}.elementor-38 .elementor-element.elementor-element-675d0ef{--spacer-size:50px;}.elementor-38 .elementor-element.elementor-element-0c2c761{width:var( --container-widget-width, 50% );max-width:50%;background-color:var( --e-global-color-primary );margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 11%;--container-widget-width:50%;--container-widget-flex-grow:0;border-radius:25px 25px 25px 25px;box-shadow:5px 5px 10px 0px rgba(0,0,0,0.5);text-align:center;}.elementor-38 .elementor-element.elementor-element-0c2c761.elementor-element{--align-self:flex-start;}.elementor-38 .elementor-element.elementor-element-0c2c761 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2rem;font-weight:600;color:var( --e-global-color-secondary );}.elementor-38 .elementor-element.elementor-element-7cda0c8{--display:flex;}.elementor-38 .elementor-element.elementor-element-a0401e0{--spacer-size:50px;}.elementor-38 .elementor-element.elementor-element-13dfe4c img{width:50%;}.elementor-38 .elementor-element.elementor-element-63fcf66{--display:flex;}.elementor-38 .elementor-element.elementor-element-b07aacc .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;}.elementor-38 .elementor-element.elementor-element-710b5cc{--display:flex;}.elementor-38 .elementor-element.elementor-element-115de0c{--display:flex;}.elementor-38 .elementor-element.elementor-element-abac6c0 img{width:50%;}.elementor-38 .elementor-element.elementor-element-b2a5b78{--display:flex;}.elementor-38 .elementor-element.elementor-element-93c4385{--display:flex;}.elementor-38 .elementor-element.elementor-element-6a6911e{--display:flex;}.elementor-38 .elementor-element.elementor-element-269beb4{--display:flex;}.elementor-38 .elementor-element.elementor-element-6bf4486{background-color:var( --e-global-color-primary );border-radius:25px 25px 25px 25px;}.elementor-38 .elementor-element.elementor-element-6bf4486.elementor-element{--align-self:flex-end;}.elementor-38 .elementor-element.elementor-element-6bf4486 img{width:70%;}.elementor-38 .elementor-element.elementor-element-bd9fdd7{width:var( --container-widget-width, 30.097% );max-width:30.097%;--container-widget-width:30.097%;--container-widget-flex-grow:0;top:0px;}.elementor-38 .elementor-element.elementor-element-bd9fdd7.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-bd9fdd7{left:0px;}body.rtl .elementor-38 .elementor-element.elementor-element-bd9fdd7{right:0px;}.elementor-38 .elementor-element.elementor-element-3a95a44 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2rem;font-weight:600;}.elementor-38 .elementor-element.elementor-element-33f9a2f{--display:flex;}.elementor-38 .elementor-element.elementor-element-06b5192{--display:flex;}.elementor-38 .elementor-element.elementor-element-86d3626{--display:flex;}.elementor-38 .elementor-element.elementor-element-558a4aa img{width:50%;}.elementor-38 .elementor-element.elementor-element-395def4{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-38 .elementor-element.elementor-element-395def4.e-con{--align-self:center;}.elementor-38 .elementor-element.elementor-element-5aa682d{text-align:center;}.elementor-38 .elementor-element.elementor-element-5aa682d .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;color:var( --e-global-color-primary );}.elementor-38 .elementor-element.elementor-element-76d743b{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-38 .elementor-element.elementor-element-76d743b.e-con{--align-self:center;}.elementor-38 .elementor-element.elementor-element-ac14092{text-align:center;}.elementor-38 .elementor-element.elementor-element-ac14092 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2.5rem;font-weight:600;}.elementor-38 .elementor-element.elementor-element-7d532c4{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-38 .elementor-element.elementor-element-7d532c4.e-con{--align-self:center;}.elementor-38 .elementor-element.elementor-element-ff8ca8c{text-align:center;}.elementor-38 .elementor-element.elementor-element-ff8ca8c .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:2.2rem;font-weight:600;color:var( --e-global-color-text );}.elementor-38 .elementor-element.elementor-element-d4b5e2d{--display:flex;}.elementor-38 .elementor-element.elementor-element-b6d60dd.elementor-element{--align-self:center;}.elementor-38 .elementor-element.elementor-element-d4e7b57{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-38 .elementor-element.elementor-element-69c3427{--content-width:40%;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-38 .elementor-element.elementor-element-8f6fbd3{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-38 .elementor-element.elementor-element-a98df46{--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-38 .elementor-element.elementor-element-3a2507d{width:100%;max-width:100%;}.elementor-38 .elementor-element.elementor-element-26dfffd{width:var( --container-widget-width, 45% );max-width:45%;--container-widget-width:45%;--container-widget-flex-grow:0;top:-20%;z-index:11;text-align:end;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-26dfffd{right:0%;}body.rtl .elementor-38 .elementor-element.elementor-element-26dfffd{left:0%;}.elementor-38 .elementor-element.elementor-element-26dfffd img{width:66%;}.elementor-38 .elementor-element.elementor-element-edcdfb6{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;top:0%;z-index:11;text-align:start;}.elementor-38 .elementor-element.elementor-element-edcdfb6.elementor-element{--align-self:flex-start;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-edcdfb6{left:0%;}body.rtl .elementor-38 .elementor-element.elementor-element-edcdfb6{right:0%;}.elementor-38 .elementor-element.elementor-element-edcdfb6 img{width:60%;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-38 .elementor-element.elementor-element-d28745e{text-align:center;}.elementor-38 .elementor-element.elementor-element-d28745e .elementor-heading-title{font-size:1.5rem;}.elementor-38 .elementor-element.elementor-element-c8caa69 img{width:50%;}.elementor-38 .elementor-element.elementor-element-4f159e3 .elementor-heading-title{font-size:1.5rem;}.elementor-38 .elementor-element.elementor-element-d9cbb1c img{width:50%;}.elementor-38 .elementor-element.elementor-element-b4de44c{width:var( --container-widget-width, 55% );max-width:55%;--container-widget-width:55%;--container-widget-flex-grow:0;top:30%;text-align:start;}.elementor-38 .elementor-element.elementor-element-b4de44c.elementor-element{--align-self:flex-start;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-b4de44c{left:0%;}body.rtl .elementor-38 .elementor-element.elementor-element-b4de44c{right:0%;}.elementor-38 .elementor-element.elementor-element-b4de44c img{width:80%;}.elementor-38 .elementor-element.elementor-element-e87afd5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:end;}.elementor-38 .elementor-element.elementor-element-e87afd5 img{width:78%;}.elementor-38 .elementor-element.elementor-element-2c932fd{--spacer-size:70px;}.elementor-38 .elementor-element.elementor-element-81c15d8 .elementor-heading-title{font-size:1.5rem;}.elementor-38 .elementor-element.elementor-element-22d2e17 .elementor-heading-title{font-size:1.5rem;}.elementor-38 .elementor-element.elementor-element-98c3da9{--spacer-size:70px;}.elementor-38 .elementor-element.elementor-element-3a22223{padding:0px 0px 0px 0px;}.elementor-38 .elementor-element.elementor-element-3a22223 img{width:85%;}.elementor-38 .elementor-element.elementor-element-ef5576e{width:var( --container-widget-width, 173px );max-width:173px;--container-widget-width:173px;--container-widget-flex-grow:0;top:50%;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-ef5576e{left:3%;}body.rtl .elementor-38 .elementor-element.elementor-element-ef5576e{right:3%;}.elementor-38 .elementor-element.elementor-element-8c5c443{width:var( --container-widget-width, 302px );max-width:302px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:302px;--container-widget-flex-grow:0;text-align:center;}.elementor-38 .elementor-element.elementor-element-8c5c443.elementor-element{--align-self:flex-end;}.elementor-38 .elementor-element.elementor-element-8c5c443 .elementor-heading-title{font-size:2rem;}.elementor-38 .elementor-element.elementor-element-7df0d2c{width:var( --container-widget-width, 179px );max-width:179px;--container-widget-width:179px;--container-widget-flex-grow:0;text-align:center;}.elementor-38 .elementor-element.elementor-element-7df0d2c.elementor-element{--align-self:flex-end;}.elementor-38 .elementor-element.elementor-element-7df0d2c .elementor-heading-title{font-size:1.1rem;}.elementor-38 .elementor-element.elementor-element-8ff9a6d.elementor-element{--align-self:flex-end;}.elementor-38 .elementor-element.elementor-element-8ff9a6d .elementor-button{font-size:1rem;}.elementor-38 .elementor-element.elementor-element-505f14b{--spacer-size:20px;}.elementor-38 .elementor-element.elementor-element-0c354b7{--spacer-size:50px;}.elementor-38 .elementor-element.elementor-element-234fef5{--spacer-size:20px;}.elementor-38 .elementor-element.elementor-element-f35c18f{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;top:4%;text-align:end;}.elementor-38 .elementor-element.elementor-element-f35c18f.elementor-element{--align-self:flex-end;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-f35c18f{left:50%;}body.rtl .elementor-38 .elementor-element.elementor-element-f35c18f{right:50%;}.elementor-38 .elementor-element.elementor-element-5c02112{--spacer-size:15px;}.elementor-38 .elementor-element.elementor-element-2bc826b{width:var( --container-widget-width, 39% );max-width:39%;--container-widget-width:39%;--container-widget-flex-grow:0;top:-30%;}.elementor-38 .elementor-element.elementor-element-2bc826b.elementor-element{--align-self:flex-start;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-2bc826b{left:60%;}body.rtl .elementor-38 .elementor-element.elementor-element-2bc826b{right:60%;}.elementor-38 .elementor-element.elementor-element-675d0ef{--spacer-size:5px;}.elementor-38 .elementor-element.elementor-element-0c2c761{width:var( --container-widget-width, 60% );max-width:60%;margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;--container-widget-width:60%;--container-widget-flex-grow:0;border-radius:25px 25px 25px 25px;text-align:center;}.elementor-38 .elementor-element.elementor-element-0c2c761 .elementor-heading-title{font-size:1.5rem;}.elementor-38 .elementor-element.elementor-element-a0401e0{--spacer-size:20px;}.elementor-38 .elementor-element.elementor-element-13dfe4c img{width:50%;}.elementor-38 .elementor-element.elementor-element-63fcf66{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-38 .elementor-element.elementor-element-b07aacc{text-align:center;}.elementor-38 .elementor-element.elementor-element-b07aacc .elementor-heading-title{font-size:1.5rem;}.elementor-38 .elementor-element.elementor-element-abac6c0 img{width:70%;}.elementor-38 .elementor-element.elementor-element-b2a5b78{--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-38 .elementor-element.elementor-element-6bf4486{width:var( --container-widget-width, 86% );max-width:86%;padding:0px 0px 0px 0px;--container-widget-width:86%;--container-widget-flex-grow:0;}.elementor-38 .elementor-element.elementor-element-bd9fdd7{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;top:11%;text-align:start;}.elementor-38 .elementor-element.elementor-element-bd9fdd7.elementor-element{--align-self:flex-start;}body:not(.rtl) .elementor-38 .elementor-element.elementor-element-bd9fdd7{left:0%;}body.rtl .elementor-38 .elementor-element.elementor-element-bd9fdd7{right:0%;}.elementor-38 .elementor-element.elementor-element-bd9fdd7 img{width:100%;}.elementor-38 .elementor-element.elementor-element-3a95a44{width:var( --container-widget-width, 75% );max-width:75%;--container-widget-width:75%;--container-widget-flex-grow:0;text-align:center;}.elementor-38 .elementor-element.elementor-element-3a95a44.elementor-element{--align-self:flex-end;}.elementor-38 .elementor-element.elementor-element-3a95a44 .elementor-heading-title{font-size:1.2rem;}.elementor-38 .elementor-element.elementor-element-558a4aa img{width:60%;}.elementor-38 .elementor-element.elementor-element-5aa682d{width:100%;max-width:100%;}.elementor-38 .elementor-element.elementor-element-5aa682d .elementor-heading-title{font-size:3rem;}}/* Start custom CSS for html, class: .elementor-element-97a8cad *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-97a8cad { opacity: 0; } .elementor-38 .elementor-element.elementor-element-97a8cad.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-26dfffd *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-26dfffd { opacity: 0; } .elementor-38 .elementor-element.elementor-element-26dfffd.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-edcdfb6 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-edcdfb6 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-edcdfb6.el-lab-visible { animation: slideRight 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-d28745e *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-d28745e { opacity: 0; } .elementor-38 .elementor-element.elementor-element-d28745e.el-lab-visible { animation: blurIn 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c8caa69 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-c8caa69 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-c8caa69.el-lab-visible { animation: blurIn 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3058adc *//* Definimos cómo será el efecto visual */ @keyframes aparecerSuave { 0% { opacity: 0; transform: translateY(20px); /* Empieza un poco más abajo */ } 100% { opacity: 1; transform: translateY(0); /* Termina en su posición original */ } } /* Aplicamos el efecto al widget exacto */ .elementor-38 .elementor-element.elementor-element-3058adc { opacity: 0; /* Mantiene el texto oculto durante el segundo de delay */ /* animation: nombre | duración | curva de velocidad | delay | estado final */ animation: aparecerSuave 4s ease-out 1s forwards; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-69c3427 *//* Animación de Entrada CSS */ /* Pega esto en Avanzado > CSS Personalizado del widget, columna o contenedor */ /* El Script Global del footer activa la animación al hacer scroll */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-69c3427 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-69c3427.el-lab-visible { animation: slideUp 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-d9cbb1c *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-d9cbb1c { opacity: 0; } .elementor-38 .elementor-element.elementor-element-d9cbb1c.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9dc8668 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-9dc8668 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-9dc8668.el-lab-visible { animation: fadeIn 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-b4de44c *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-b4de44c { opacity: 0; } .elementor-38 .elementor-element.elementor-element-b4de44c.el-lab-visible { animation: slideRight 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-e87afd5 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-e87afd5 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-e87afd5.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-308abbe *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-308abbe { opacity: 0; } .elementor-38 .elementor-element.elementor-element-308abbe.el-lab-visible { animation: slideUp 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c5a6776 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-c5a6776 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-c5a6776.el-lab-visible { animation: slideRight 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-05f7714 *//* Animación de Entrada Imagen */ .elementor-38 .elementor-element.elementor-element-05f7714 { animation: slideRight 1.5s ease-out 0.5s both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes blurIn { from { opacity: 0; filter: blur(15px); } to { opacity: 1; filter: blur(0); } } @keyframes clipUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes clipDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes driftIn { from { opacity: 0; transform: translateY(20px) rotate(5deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } } @keyframes driftInCcw { from { opacity: 0; transform: translateY(20px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3a22223 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-3a22223 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-3a22223.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ef5576e *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-ef5576e { opacity: 0; } .elementor-38 .elementor-element.elementor-element-ef5576e.el-lab-visible { animation: slideRight 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-8c5c443 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-8c5c443 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-8c5c443.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-7df0d2c *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-7df0d2c { opacity: 0; } .elementor-38 .elementor-element.elementor-element-7df0d2c.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-8ff9a6d *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-8ff9a6d { opacity: 0; } .elementor-38 .elementor-element.elementor-element-8ff9a6d.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-cf57ed3 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-cf57ed3 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-cf57ed3.el-lab-visible { animation: fadeIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b2db245 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-b2db245 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-b2db245.el-lab-visible { animation: driftInCcw 1.4s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4b810d5 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-4b810d5 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-4b810d5.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f35c18f *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-f35c18f { opacity: 0; } .elementor-38 .elementor-element.elementor-element-f35c18f.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-2bc826b *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-2bc826b { opacity: 0; } .elementor-38 .elementor-element.elementor-element-2bc826b.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-0c2c761 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-0c2c761 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-0c2c761.el-lab-visible { animation: slideUp 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-13dfe4c *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-13dfe4c { opacity: 0; } .elementor-38 .elementor-element.elementor-element-13dfe4c.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7f827d2 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-7f827d2 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-7f827d2.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-710b5cc *//* Animación de Entrada Imagen */ .elementor-38 .elementor-element.elementor-element-710b5cc { animation: slideUp 1s ease-out 0.5s both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes blurIn { from { opacity: 0; filter: blur(15px); } to { opacity: 1; filter: blur(0); } } @keyframes clipUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes driftIn { from { opacity: 0; transform: translateY(20px) rotate(5deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-abac6c0 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-abac6c0 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-abac6c0.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-115de0c *//* Animación de Entrada Imagen */ .elementor-38 .elementor-element.elementor-element-115de0c { animation: slideUp 1s ease-out 0.5s both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes blurIn { from { opacity: 0; filter: blur(15px); } to { opacity: 1; filter: blur(0); } } @keyframes clipUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes driftIn { from { opacity: 0; transform: translateY(20px) rotate(5deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b2a5b78 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-b2a5b78 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-b2a5b78.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-93c4385 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-93c4385 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-93c4385.el-lab-visible { animation: slideRight 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6a6911e *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-6a6911e { opacity: 0; } .elementor-38 .elementor-element.elementor-element-6a6911e.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6bf4486 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-6bf4486 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-6bf4486.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-3a95a44 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-3a95a44 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-3a95a44.el-lab-visible { animation: slideLeft 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-68ea4b7 *//* Animación de Entrada Imagen */ .elementor-38 .elementor-element.elementor-element-68ea4b7 { animation: slideLeft 1.9s ease-out 0.3s both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes blurIn { from { opacity: 0; filter: blur(15px); } to { opacity: 1; filter: blur(0); } } @keyframes clipUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes driftIn { from { opacity: 0; transform: translateY(20px) rotate(5deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-33f9a2f *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-33f9a2f { opacity: 0; } .elementor-38 .elementor-element.elementor-element-33f9a2f.el-lab-visible { animation: driftIn 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-06b5192 *//* INSTRUCCIONES (Contenedor / Columna): PASO 1: En Elementor selecciona tu Contenedor o Columna. Ve a: Avanzado > Clases CSS y escribe: el-lab-trigger PASO 2: Pega este CSS en Avanzado > CSS Personalizado de ese mismo elemento. PASO 3: El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-06b5192 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-06b5192.el-lab-visible { animation: popIn 1.5s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-558a4aa *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-558a4aa { opacity: 0; } .elementor-38 .elementor-element.elementor-element-558a4aa.el-lab-visible { animation: blurIn 1.2s ease-out 0.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d4e7b57 *//* INSTRUCCIONES (Imagen): 1. Pega este CSS en Avanzado > CSS Personalizado del widget Imagen. 2. El Script Global del footer activa la animacion al hacer scroll. */ body:not(.elementor-editor-active) .elementor-38 .elementor-element.elementor-element-d4e7b57 { opacity: 0; } .elementor-38 .elementor-element.elementor-element-d4e7b57.el-lab-visible { animation: slideRight 1.5s ease-out 2.5s both; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} } @keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } @keyframes popIn { 0%{opacity:0;transform:scale(0.8)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} } @keyframes blurIn { from{opacity:0;filter:blur(15px)} to{opacity:1;filter:blur(0)} } @keyframes clipUp { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} } @keyframes clipDown { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} } @keyframes driftIn { from{opacity:0;transform:translateY(20px) rotate(5deg)} to{opacity:1;transform:translateY(0) rotate(0)} } @keyframes driftInCcw { from{opacity:0;transform:translateY(20px) rotate(-5deg)} to{opacity:1;transform:translateY(0) rotate(0)} }/* End custom CSS */