.elementor-4683 .elementor-element.elementor-element-399aed9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px}.elementor-4683 .elementor-element.elementor-element-399aed9.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0}.elementor-4683 .elementor-element.elementor-element-7a46fe9{--display:flex;--position:fixed;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:100px;--padding-right:100px;top:0}.elementor-4683 .elementor-element.elementor-element-7a46fe9:not(.elementor-motion-effects-element-type-background),.elementor-4683 .elementor-element.elementor-element-7a46fe9>.elementor-motion-effects-container>.elementor-motion-effects-layer{background-color:#000}.elementor-4683 .elementor-element.elementor-element-7a46fe9.e-con{--align-self:center}.elementor-4683 .elementor-element.elementor-element-eb74b4d{width:var(--container-widget-width,42%);max-width:42%;--container-widget-width:42%;--container-widget-flex-grow:0;top:106px;z-index:0;text-align:left;font-family:"Helvetica",Sans-serif;font-size:26px;font-weight:400;line-height:44px;letter-spacing:1px;color:#fff}.elementor-4683 .elementor-element.elementor-element-eb74b4d>.elementor-widget-container{--e-transform-rotateZ:-90deg}.elementor-4683 .elementor-element.elementor-element-eb74b4d.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0}body:not(.rtl) .elementor-4683 .elementor-element.elementor-element-eb74b4d{left:-124px}body.rtl .elementor-4683 .elementor-element.elementor-element-eb74b4d{right:-124px}.elementor-4683 .elementor-element.elementor-element-c173b8e{width:var(--container-widget-width,50%);max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;top:9%;z-index:1}.elementor-4683 .elementor-element.elementor-element-c173b8e>.elementor-widget-container{margin:0;padding:0}.elementor-4683 .elementor-element.elementor-element-c173b8e.elementor-element{--align-self:center;--order:99999}body:not(.rtl) .elementor-4683 .elementor-element.elementor-element-c173b8e{left:30%}body.rtl .elementor-4683 .elementor-element.elementor-element-c173b8e{right:30%}.elementor-4683 .elementor-element.elementor-element-c173b8e .elementor-wrapper{--video-aspect-ratio:.5625;filter:brightness(137%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg)}.elementor-4683 .elementor-element.elementor-element-8e7a880{width:var(--container-widget-width,60.924%);max-width:60.924%;--container-widget-width:60.924%;--container-widget-flex-grow:0;z-index:10;text-align:right;font-family:"Helvetica",Sans-serif;font-size:21px;font-weight:400;line-height:44px;letter-spacing:1px;color:#fff}.elementor-4683 .elementor-element.elementor-element-8e7a880.elementor-element{--align-self:flex-end;--flex-grow:0;--flex-shrink:0}.elementor-4683 .elementor-element.elementor-element-aa22c7d{--display:flex;--position:fixed;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0}body:not(.rtl) .elementor-4683 .elementor-element.elementor-element-aa22c7d{right:0}body.rtl .elementor-4683 .elementor-element.elementor-element-aa22c7d{left:0}.elementor-4683 .elementor-element.elementor-element-6eb3320>.elementor-widget-container{margin:100px 0 0;padding:0}.elementor-4683 .elementor-element.elementor-element-6eb3320.elementor-element{--align-self:flex-start}.elementor-4683 .elementor-element.elementor-element-6eb3320{text-align:left}.elementor-4683 .elementor-element.elementor-element-6eb3320 .elementor-heading-title{font-family:"Work Sans",Sans-serif;font-size:86px;text-transform:uppercase}.elementor-4683 .elementor-element.elementor-element-9e052c6.elementor-element{--align-self:flex-end}.elementor-4683 .elementor-element.elementor-element-9e052c6{text-align:right}.elementor-4683 .elementor-element.elementor-element-9e052c6 .elementor-heading-title{font-family:"Helvetica",Sans-serif;font-size:40px}.elementor-4683 .elementor-element.elementor-element-d518ea9{--display:grid;--e-con-grid-template-columns:repeat(2,1fr);--e-con-grid-template-rows:repeat(2,1fr);--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0}.elementor-4683 .elementor-element.elementor-element-da150fb.elementor-element{--align-self:center}.elementor-4683 .elementor-element.elementor-element-da150fb{z-index:3}.elementor-4683 .elementor-element.elementor-element-da150fb img{width:100%}.elementor-4683 .elementor-element.elementor-element-60b9caa{width:var(--container-widget-width,71%);max-width:71%;--container-widget-width:71%;--container-widget-flex-grow:0;z-index:100}.elementor-4683 .elementor-element.elementor-element-60b9caa>.elementor-widget-container{margin:0;padding:0}.elementor-4683 .elementor-element.elementor-element-60b9caa.elementor-element{--align-self:center}.elementor-4683 .elementor-element.elementor-element-60b9caa .elementor-heading-title{font-family:"Inter Tight",Sans-serif;font-size:50px;line-height:64px}.elementor-4683 .elementor-element.elementor-element-5365069>.elementor-widget-container{padding:0}.elementor-4683 .elementor-element.elementor-element-5365069.elementor-element{--align-self:center}.elementor-4683 .elementor-element.elementor-element-5365069{text-align:right}.elementor-4683 .elementor-element.elementor-element-5365069 .elementor-heading-title{font-family:"Helvetica",Sans-serif;font-size:5.1vw;font-weight:200;line-height:73px}.elementor-4683 .elementor-element.elementor-element-ade6f8e.elementor-element{--order:99999}.elementor-4683 .elementor-element.elementor-element-e1cd0a3>.elementor-widget-container{margin:10px 0;padding:0}.elementor-4683 .elementor-element.elementor-element-e1cd0a3.elementor-element{--align-self:flex-start}.elementor-4683 .elementor-element.elementor-element-e1cd0a3{z-index:100;text-align:left}.elementor-4683 .elementor-element.elementor-element-e1cd0a3 .elementor-heading-title{font-family:"Roboto Condensed",Sans-serif;font-size:40px;font-weight:700;line-height:34px}.elementor-4683 .elementor-element.elementor-element-f90c575{width:var(--container-widget-width,100%);max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:left}.elementor-4683 .elementor-element.elementor-element-f90c575>.elementor-widget-container{margin:10px 0 0;padding:0}.elementor-4683 .elementor-element.elementor-element-f90c575 img{width:100%;max-width:100%}.elementor-4683 .elementor-element.elementor-element-d9800b3{--display:grid;--e-con-grid-template-columns:repeat(2,1fr);--e-con-grid-template-rows:repeat(2,1fr);--grid-auto-flow:row;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:10}.elementor-4683 .elementor-element.elementor-element-ef6374c{width:var(--container-widget-width,106.098%);max-width:106.098%;--container-widget-width:106.098%;--container-widget-flex-grow:0}.elementor-4683 .elementor-element.elementor-element-ef6374c.elementor-element{--flex-grow:0;--flex-shrink:0}.elementor-4683 .elementor-element.elementor-element-ef6374c .elementor-heading-title{font-family:"Helvetica",Sans-serif;font-size:91px;font-weight:900;line-height:91px;letter-spacing:-4.2px}.elementor-4683 .elementor-element.elementor-element-81423ca{width:var(--container-widget-width,106.098%);max-width:106.098%;--container-widget-width:106.098%;--container-widget-flex-grow:0;top:62px}.elementor-4683 .elementor-element.elementor-element-81423ca.elementor-element{--flex-grow:0;--flex-shrink:0}body:not(.rtl) .elementor-4683 .elementor-element.elementor-element-81423ca{left:238px}body.rtl .elementor-4683 .elementor-element.elementor-element-81423ca{right:238px}.elementor-4683 .elementor-element.elementor-element-81423ca .elementor-heading-title{font-family:"Helvetica",Sans-serif;font-size:150px;font-weight:900;text-transform:uppercase;line-height:91px;-webkit-text-stroke-width:1px;stroke-width:1px;-webkit-text-stroke-color:#000;stroke:#000;color:#02010100}.elementor-4683 .elementor-element.elementor-element-6e42ab9{--display:flex;--min-height:600px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:120px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px}.elementor-4683 .elementor-element.elementor-element-8b9aaac{--display:flex;--min-height:200px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px}.elementor-4683 .elementor-element.elementor-element-8b9aaac.e-con{--flex-grow:0;--flex-shrink:0}.elementor-4683 .elementor-element.elementor-element-7558a3d{width:var(--container-widget-width,58%);max-width:58%;--container-widget-width:58%;--container-widget-flex-grow:0;z-index:10;text-align:left}.elementor-4683 .elementor-element.elementor-element-7558a3d>.elementor-widget-container{margin:0;padding:0}.elementor-4683 .elementor-element.elementor-element-7558a3d.elementor-element{--align-self:flex-start;--order:-99999;--flex-grow:0;--flex-shrink:0}.elementor-4683 .elementor-element.elementor-element-7558a3d .elementor-heading-title{font-family:"Work Sans",Sans-serif;font-size:140px;font-weight:600;line-height:.9em;letter-spacing:-.05em;color:#585757}.elementor-4683 .elementor-element.elementor-element-fba72b5{--display:flex;--min-height:350px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px}.elementor-4683 .elementor-element.elementor-element-468326c{width:var(--container-widget-width,57.899%);max-width:57.899%;--container-widget-width:57.899%;--container-widget-flex-grow:0}.elementor-4683 .elementor-element.elementor-element-468326c.elementor-element{--flex-grow:0;--flex-shrink:0}.elementor-4683 .elementor-element.elementor-element-df3b39f{width:var(--container-widget-width,57.899%);max-width:57.899%;--container-widget-width:57.899%;--container-widget-flex-grow:0}.elementor-4683 .elementor-element.elementor-element-df3b39f.elementor-element{--flex-grow:0;--flex-shrink:0}html{height:100vh;margin:0;overflow:hidden}body{height:100vh;overflow:auto;scroll-snap-type:y mandatory;scroll-padding:27px}.elementor-section:not(.elementor-inner-section),.elementor-location-header,.elementor-location-footer,.page-header,.site-header,.elementor-add-section,.e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal}@media(min-width:768px){.elementor-4683 .elementor-element.elementor-element-399aed9{--width:100vw}.elementor-4683 .elementor-element.elementor-element-7a46fe9{--width:50vw}.elementor-4683 .elementor-element.elementor-element-aa22c7d{--width:50%}.elementor-4683 .elementor-element.elementor-element-8b9aaac{--width:100%}}@media(min-width:2400px){.elementor-4683 .elementor-element.elementor-element-d518ea9{--grid-auto-flow:row}.elementor-4683 .elementor-element.elementor-element-d9800b3{--grid-auto-flow:row}.elementor-section:not(.elementor-inner-section),.elementor-location-header,.elementor-location-footer,.page-header,.site-header,.elementor-add-section,.e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal}}@media(max-width:1366px){.elementor-4683 .elementor-element.elementor-element-d518ea9{--grid-auto-flow:row}.elementor-4683 .elementor-element.elementor-element-d9800b3{--grid-auto-flow:row}.elementor-section:not(.elementor-inner-section),.elementor-location-header,.elementor-location-footer,.page-header,.site-header,.elementor-add-section,.e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal}}@media(max-width:1200px){.elementor-4683 .elementor-element.elementor-element-d518ea9{--grid-auto-flow:row}.elementor-4683 .elementor-element.elementor-element-d9800b3{--grid-auto-flow:row}.elementor-section:not(.elementor-inner-section),.elementor-location-header,.elementor-location-footer,.page-header,.site-header,.elementor-add-section,.e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal}}@media(max-width:1024px){.elementor-4683 .elementor-element.elementor-element-d518ea9{--grid-auto-flow:row}.elementor-4683 .elementor-element.elementor-element-d9800b3{--grid-auto-flow:row}.elementor-4683 .elementor-element.elementor-element-7558a3d .elementor-heading-title{font-size:65px}.elementor-section:not(.elementor-inner-section),.elementor-location-header,.elementor-location-footer,.page-header,.site-header,.elementor-add-section,.e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal}}@media(max-width:880px){.elementor-4683 .elementor-element.elementor-element-d518ea9{--grid-auto-flow:row}.elementor-4683 .elementor-element.elementor-element-d9800b3{--grid-auto-flow:row}.elementor-section:not(.elementor-inner-section),.elementor-location-header,.elementor-location-footer,.page-header,.site-header,.elementor-add-section,.e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal}}@media(max-width:767px){.elementor-4683 .elementor-element.elementor-element-d518ea9{--e-con-grid-template-columns:repeat(1,1fr);--grid-auto-flow:row}.elementor-4683 .elementor-element.elementor-element-d9800b3{--e-con-grid-template-columns:repeat(1,1fr);--grid-auto-flow:row}.elementor-section:not(.elementor-inner-section),.elementor-location-header,.elementor-location-footer,.page-header,.site-header,.elementor-add-section,.e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal}}.elementor-4683 .elementor-element.elementor-element-c173b8e iframe{will-change:transform}``` ## ⚡ Checklist de optimización:``` ✅ ¿Está en YouTube/Vimeo? → SÍ=Perfecto ✅ ¿Lazy Load activado? → SÍ ✅ ¿Image Overlay activo? → SÍ ✅ ¿Video comprimido < 5MB? → SÍ ✅ ¿Autoplay desactivado? → SÍ (o muted) ✅ ¿Imagen fallback para móvil? → SÍ ``` ## 📊 Comparativa de peso:``` Video sin optimizar:50-200 MB 🐌 Video optimizado:5-15 MB ⚡ Video en YouTube:0 MB (tu servidor) 🚀 ``` ## 🔧 Plugin recomendado:Si usas muchos videos propios:- **WP Rocket** (activa lazy load automático de videos) - **Perfmatters** (lightweight,solo optimización) ## ⚠️ Error común:**NUNCA hagas esto:** ``` ❌ Autoplay+NO muted=Bloqueado por navegadores ❌ Videos 4K en web=Innecesario y lento ❌ Múltiples videos cargando a la vez ❌ Video de fondo en móvil=Consume muchos datos .menu a{transition:all .3s ease;padding-left:0}.elementor-4683 .elementor-element.elementor-element-7a46fe9{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between}Diseños que DestacanCreamos diseñosque destacan
.elementor-4683 .elementor-element.elementor-element-d518ea9{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:40px 0}.elementor-4683 .elementor-element.elementor-element-d518ea9{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%}``` ## ⚠️ Problema común:Si el Grid **se sigue yendo a la izquierda**,es porque:### El Container PRINCIPAL tiene:- **Align Items:Center** o **Stretch** ← Cámbialo a **Flex Start** ### O el Container SCROLL tiene:- Width muy pequeño o no definido ## 🎯 Configuración EXACTA:**PRINCIPAL:** ``` Layout:- Flexbox Row - Align Items:Flex Start - Gap:0px ``` **ESTICKY (30%):** ``` Layout:- Width:30% o 400px - Position:Sticky (Motion Effects) Custom CSS:.elementor-4683 .elementor-element.elementor-element-d518ea9{flex:0 0 30%;position:sticky;top:0;height:100vh}``` **SCROLL (70%):** ``` Layout:- Width:70% - Flex Grow:1 Custom CSS:.elementor-4683 .elementor-element.elementor-element-d518ea9{flex:1 1 70%;padding:60px 40px}body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#222;font-family:'helvetica',sans-serif;overflow:hidden}.masked-text{font-size:12rem;font-weight:700;color:transparent;background-size:20%;background-position:0 50%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:animate-background 10s infinite alternate linear}@keyframes animate-background{0%{background-position:0 50%}100%{background-position:100% 50%}}.elementor-4683 .elementor-element.elementor-element-aa22c7d{overflow-y:auto;height:100vh;padding:80px 60px}.elementor-4683 .elementor-element.elementor-element-aa22c7d{scroll-behavior:smooth}.elementor-4683 .elementor-element.elementor-element-aa22c7d{flex:1 1 70%;overflow-y:visible}html{scroll-behavior:smooth}background:#000000;color:#FFFFFF;background:#F5F5F5;color:#1A1A1A;accent-color:#CCFF00;.elementor-editor-active .elementor{overflow-y:auto !important}.elementor-4683 .elementor-element.elementor-element-aa22c7d{overflow-y:auto !important;height:100vh;overflow-x:hidden}.elementor-4683 .elementor-element.elementor-element-aa22c7d{overflow-y:auto !important;overflow-x:hidden;height:100vh}``` --- ## 📱 Desactivar en móvil:El parallax puede ser pesado en móviles:**En cada Motion Effect:** ``` Scrolling Effects On:☑️ Desktop ☑️ Tablet (opcional) ☐ Mobile (desactivado) .elementor-4683 .elementor-element.elementor-element-399aed9{display:flex;height:85vh;max-height:85vh;overflow:hidden;position:relative;flex-direction:row;align-items:stretch;z-index:1}.texto-vertical{writing-mode:vertical-lr;transform:rotate(180deg);font-size:clamp(40px, 5vw, 70px);font-weight:300;letter-spacing:-1px;color:rgba(255,255,255,.6);text-transform:lowercase;flex-shrink:0;z-index:2}.menu-nav-item{font-size:clamp(24px, 3vw, 40px);color:rgba(255,255,255,.85);margin-bottom:15px;transition:all .3s ease;cursor:pointer;position:relative;z-index:2}.menu-nav-item:hover{color:rgba(255,255,255,1);padding-left:10px}.scroll-horizontal-container{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;z-index:1}@media (max-width:768px){.elementor-4683 .elementor-element.elementor-element-399aed9{flex-direction:column;height:auto;max-height:none}.texto-vertical{writing-mode:horizontal-tb;transform:rotate(0deg);font-size:clamp(24px, 4vw, 36px)}.menu-nav-item{font-size:clamp(18px, 2.5vw, 28px);margin-bottom:10px}}