.elementor-2426 .elementor-element.elementor-element-eadc033{--display:flex;--min-height:80px;--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:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.06);}.elementor-2426 .elementor-element.elementor-element-eadc033:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-eadc033 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0044F16E 0%, #FFFFFF 100%);}.elementor-2426 .elementor-element.elementor-element-eadc033::before, .elementor-2426 .elementor-element.elementor-element-eadc033 > .elementor-background-video-container::before, .elementor-2426 .elementor-element.elementor-element-eadc033 > .e-con-inner > .elementor-background-video-container::before, .elementor-2426 .elementor-element.elementor-element-eadc033 > .elementor-background-slideshow::before, .elementor-2426 .elementor-element.elementor-element-eadc033 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2426 .elementor-element.elementor-element-eadc033 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, var( --e-global-color-primary ) 0%, var( --e-global-color-primary ) 100%);}.elementor-widget-mega-menu > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-widget-mega-menu > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-widget-mega-menu > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-mega-menu{--n-menu-divider-color:var( --e-global-color-text );}.elementor-2426 .elementor-element.elementor-element-f2a8740{--display:flex;--min-height:0px;--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;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2426 .elementor-element.elementor-element-f2a8740:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-f2a8740 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, var( --e-global-color-primary ) 100%);}.elementor-2426 .elementor-element.elementor-element-b11843b{--display:flex;--flex-wrap:wrap;--align-content:flex-end;}.elementor-2426 .elementor-element.elementor-element-b11843b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2426 .elementor-element.elementor-element-63db64a{width:var( --container-widget-width, 97.057% );max-width:97.057%;--container-widget-width:97.057%;--container-widget-flex-grow:0;z-index:99;--e-nav-menu-horizontal-menu-item-margin:calc( 2px / 2 );}.elementor-2426 .elementor-element.elementor-element-63db64a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main .elementor-item:hover,
					.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main .elementor-item:focus{color:#5CF7DC;fill:#5CF7DC;}.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#0048FF;}.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-framed .elementor-item:before,
					.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-framed .elementor-item:after{border-color:#0048FF;}.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-framed .elementor-item:before{border-width:0px;}.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 0px 0px;}.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:0px 0px 0 0;}.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:0px 0 0 0px;}.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 0px 0px 0;}.elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-underline .elementor-item:after,
					 .elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-overline .elementor-item:before,
					 .elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-double-line .elementor-item:before,
					 .elementor-2426 .elementor-element.elementor-element-63db64a .e--pointer-double-line .elementor-item:after{height:0px;}.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main .elementor-item{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:2px;}.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--dropdown{border-style:none;}.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--dropdown li:not(:last-child){border-style:dotted;border-color:#0B04FD;}.elementor-2426 .elementor-element.elementor-element-b4abaf5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2426 .elementor-element.elementor-element-8ced5c9{--display:flex;--min-height:282px;}.elementor-2426 .elementor-element.elementor-element-8ced5c9.e-con{--order:-99999 /* order start hack */;}.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-2426 .elementor-element.elementor-element-6c10d3f{width:var( --container-widget-width, 100.402% );max-width:100.402%;--container-widget-width:100.402%;--container-widget-flex-grow:0;z-index:1;}.elementor-2426 .elementor-element.elementor-element-6c10d3f.elementor-element{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-6c10d3f img{width:87%;height:88px;}.elementor-2426 .elementor-element.elementor-element-2265d29{--display:flex;}.elementor-2426 .elementor-element.elementor-element-ccdd423{--display:flex;--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;--flex-wrap:wrap;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2426 .elementor-element.elementor-element-ccdd423:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-ccdd423 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, #6EC1E4AD 100%);}.elementor-2426 .elementor-element.elementor-element-1bad0a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2426 .elementor-element.elementor-element-1201ac0.elementor-element{--align-self:flex-end;}.elementor-2426 .elementor-element.elementor-element-1201ac0 img{width:100%;max-width:100%;height:305px;}.elementor-2426 .elementor-element.elementor-element-a77d7c4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}body:not(.rtl) .elementor-2426 .elementor-element.elementor-element-b8eda43{left:-19px;}body.rtl .elementor-2426 .elementor-element.elementor-element-b8eda43{right:-19px;}.elementor-2426 .elementor-element.elementor-element-b8eda43{top:8px;}.elementor-2426 .elementor-element.elementor-element-fd7d14f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-c92e5cc{width:var( --container-widget-width, 75.277% );max-width:75.277%;--container-widget-width:75.277%;--container-widget-flex-grow:0;top:10px;}.elementor-2426 .elementor-element.elementor-element-c92e5cc.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-2426 .elementor-element.elementor-element-c92e5cc{left:-27px;}body.rtl .elementor-2426 .elementor-element.elementor-element-c92e5cc{right:-27px;}.elementor-2426 .elementor-element.elementor-element-92a86f8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-69d302a.elementor-element{--align-self:flex-start;}body:not(.rtl) .elementor-2426 .elementor-element.elementor-element-69d302a{left:22px;}body.rtl .elementor-2426 .elementor-element.elementor-element-69d302a{right:22px;}.elementor-2426 .elementor-element.elementor-element-69d302a{top:16px;z-index:10;}.elementor-2426 .elementor-element.elementor-element-69d302a img{width:100%;max-width:100%;height:272px;}.elementor-2426 .elementor-element.elementor-element-aec87c3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body:not(.rtl) .elementor-2426 .elementor-element.elementor-element-2b9610b{left:-22px;}body.rtl .elementor-2426 .elementor-element.elementor-element-2b9610b{right:-22px;}.elementor-2426 .elementor-element.elementor-element-2b9610b{top:16px;z-index:1;}.elementor-2426 .elementor-element.elementor-element-51fad24{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-9faf546{width:var( --container-widget-width, 77.221% );max-width:77.221%;--container-widget-width:77.221%;--container-widget-flex-grow:0;}.elementor-2426 .elementor-element.elementor-element-9faf546.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-47fb1fe{--display:flex;--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;}.elementor-2426 .elementor-element.elementor-element-47fb1fe:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-47fb1fe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF00 0%, #42A8D3BA 100%);}.elementor-2426 .elementor-element.elementor-element-547af36{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-3fbbd9a{--display:flex;}.elementor-2426 .elementor-element.elementor-element-3fbbd9a:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-3fbbd9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, var( --e-global-color-primary ) 100%);}.elementor-2426 .elementor-element.elementor-element-105aa54{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-7a8919e{--display:flex;}.elementor-2426 .elementor-element.elementor-element-7a8919e:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-7a8919e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, var( --e-global-color-primary ) 100%);}.elementor-2426 .elementor-element.elementor-element-09875c3{--display:flex;--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:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-2426 .elementor-element.elementor-element-09875c3:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-09875c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, var( --e-global-color-primary ) 100%);}.elementor-2426 .elementor-element.elementor-element-550cee4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-550cee4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2426 .elementor-element.elementor-element-aa295ce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-aa295ce.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-4f0ef3f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-0bf7f4a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-f5ee04c{width:var( --container-widget-width, 65.554% );max-width:65.554%;--container-widget-width:65.554%;--container-widget-flex-grow:0;}.elementor-2426 .elementor-element.elementor-element-f5ee04c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-2026d7b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-9ae7498{width:var( --container-widget-width, 65.554% );max-width:65.554%;--container-widget-width:65.554%;--container-widget-flex-grow:0;}.elementor-2426 .elementor-element.elementor-element-9ae7498.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-002f742{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2426 .elementor-element.elementor-element-0f95362{width:var( --container-widget-width, 65.554% );max-width:65.554%;--container-widget-width:65.554%;--container-widget-flex-grow:0;}.elementor-2426 .elementor-element.elementor-element-0f95362.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-e56f56f{--display:flex;--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;}.elementor-2426 .elementor-element.elementor-element-e56f56f:not(.elementor-motion-effects-element-type-background), .elementor-2426 .elementor-element.elementor-element-e56f56f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, var( --e-global-color-primary ) 100%);}.elementor-2426 .elementor-element.elementor-element-a2db817{--display:flex;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-type-html{padding-bottom:0px;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button[type="submit"]{color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-2426 .elementor-element.elementor-element-42b8c28{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-2426 .elementor-element.elementor-element-7230839{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2426 .elementor-element.elementor-element-7230839.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-cc5a41f{--display:flex;}.elementor-2426 .elementor-element.elementor-element-6194ee1{--display:flex;--min-height:133px;}.elementor-2426 .elementor-element.elementor-element-417c021{width:var( --container-widget-width, 114.777% );max-width:114.777%;--container-widget-width:114.777%;--container-widget-flex-grow:0;}.elementor-2426 .elementor-element.elementor-element-417c021.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-057066e{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;width:var( --container-widget-width, 97.057% );max-width:97.057%;--container-widget-width:97.057%;--container-widget-flex-grow:0;--n-menu-open-animation-duration:500ms;--n-menu-toggle-align:center;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:22px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-icon-color-hover:#2A2D91;--n-menu-dropdown-indicator-rotate:rotate(0deg);--n-menu-dropdown-indicator-color-normal:#61C4CE;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-2426 .elementor-element.elementor-element-057066e > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-primary ) 0%, #f2295b 100%);}.elementor-2426 .elementor-element.elementor-element-057066e > .elementor-widget-container > .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:not( .e-current ){background:#6C1515;background-color:transparent;background-image:linear-gradient(180deg, #6C1515 0%, #f2295b 100%);}.elementor-2426 .elementor-element.elementor-element-057066e.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-2426 .elementor-element.elementor-element-057066e > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-2426 .elementor-element.elementor-element-057066e > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-2426 .elementor-element.elementor-element-057066e > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:"Poppins", Sans-serif;font-weight:500;font-style:italic;}.elementor-2426 .elementor-element.elementor-element-057066e > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:not( .e-current ):not( :hover ){text-shadow:0px 0px 10px rgba(0,0,0,0.3);border-style:none;}.elementor-2426 .elementor-element.elementor-element-057066e {--n-menu-title-color-hover:#116ED8;--n-menu-title-color-active:var( --e-global-color-primary );}.elementor-2426 .elementor-element.elementor-element-057066e > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current ){text-shadow:-10px 0px 16px rgba(0,0,0,0.3);box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}@media(min-width:768px){.elementor-2426 .elementor-element.elementor-element-f2a8740{--content-width:1008px;}.elementor-2426 .elementor-element.elementor-element-b11843b{--width:40.157%;}.elementor-2426 .elementor-element.elementor-element-b4abaf5{--width:50%;}.elementor-2426 .elementor-element.elementor-element-1bad0a1{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-a77d7c4{--width:29%;}.elementor-2426 .elementor-element.elementor-element-fd7d14f{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-92a86f8{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-aec87c3{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-51fad24{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-550cee4{--width:28.829%;}.elementor-2426 .elementor-element.elementor-element-aa295ce{--width:24.975%;}.elementor-2426 .elementor-element.elementor-element-4f0ef3f{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-0bf7f4a{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-2026d7b{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-002f742{--width:33.3333%;}.elementor-2426 .elementor-element.elementor-element-a2db817{--width:50%;}.elementor-2426 .elementor-element.elementor-element-7230839{--width:24.442%;}}/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-63db64a *//* 1. CONFIGURACIÓN DEL FONDO DEL CONTENEDOR (EL CUADRO DEL MENÚ) */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-nav-menu--main {
    background: rgba(255, 255, 255, 0.05) !important; /* Fondo base translúcido */
    backdrop-filter: blur(12px) !important; /* Efecto de desenfoque profesional */
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 2. DISEÑO DE LOS ITEMS CON FONDO DE COLOR SUAVE */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item {
    font-family: 'Poppins', Sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 14px 22px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    transition: all 0.4s ease !important;
    
    /* Fondo inicial: un celeste muy suave casi invisible */
    background: rgba(0, 212, 255, 0.07) !important; 
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    display: flex !important;
    align-items: center;
}

/* 3. HOVER: CAMBIO DE FONDO A DEGRADADO "EXTRAVAGANTE" AZUL/TURQUESA */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover {
    color: #ffffff !important;
    transform: translateX(10px); /* Movimiento suave a la derecha */
    
    /* Degradado de fondo con tus colores pedidos */
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 50%, #00ffcc 100%) !important;
    background-size: 200% auto !important;
    
    /* Sombra de neón turquesa */
    box-shadow: 0px 8px 25px rgba(0, 255, 204, 0.4) !important;
    border-color: #ffffff !important;
}

/* 4. EFECTO DE LUZ QUE PASA POR EL FONDO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::after {
    left: 100%;
}

/* 5. INDICADOR DE COLOR TURQUESA AL LADO DEL TEXTO */
.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #00ffcc;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #00ffcc;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-63db64a .elementor-item:hover::before {
    background-color: #ffffff;
    box-shadow: 0 0 15px #ffffff;
    transform: scale(1.5);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6c10d3f *//* 1. CONTENEDOR ESTILO INVGATE */
.elementor-2426 .elementor-element.elementor-element-6c10d3f {
    --azul-pro: #007bff;
    --turquesa: #00ffcc;
    --celeste: #00d4ff;
    
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}

/* 2. ICONO / IMAGEN CON GLOW */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-img img {
    width: 55px !important;
    margin-bottom: 15px !important;
    transition: all 0.4s ease !important;
    filter: drop-shadow(0 4px 10px rgba(0, 123, 255, 0.1));
}

/* 3. TÍTULO Y DESCRIPCIÓN */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #0c1a32 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description {
    font-size: 14.5px !important;
    color: #616161 !important;
    line-height: 1.6 !important;
    position: relative;
    padding-bottom: 20px;
}

/* 4. AGREGANDO LA FLECHA DINÁMICA (→) */
.elementor-2426 .elementor-element.elementor-element-6c10d3f .elementor-image-box-description::after {
    content: "Overview →";
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--azul-pro);
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(0);
}

/* 5. EFECTO HOVER TOTAL */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover {
    background: #fcfdfe !important;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08) !important;
    border-color: var(--celeste) !important;
}

/* La imagen brilla y el título se pone azul */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-img img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-title {
    color: var(--azul-pro) !important;
}

/* La flecha se mueve a la derecha */
.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover .elementor-image-box-description::after {
    opacity: 1;
    transform: translateX(10px);
    color: var(--turquesa);
}

/* 6. BARRA DE CARGA INFERIOR */
.elementor-2426 .elementor-element.elementor-element-6c10d3f::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--azul-pro), var(--turquesa));
    transition: width 0.4s ease;
    border-radius: 0 0 0 20px;
}

.elementor-2426 .elementor-element.elementor-element-6c10d3f:hover::before {
    width: 100%;/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1201ac0 *//* --- Conexión de Imagen con Cuadro de Texto --- */
.elementor-2426 .elementor-element.elementor-element-1201ac0 {
    /* Eliminamos márgenes para que "toque" al cuadro de al lado */
    margin-right: -10px !important; 
    z-index: 2;
}

.elementor-2426 .elementor-element.elementor-element-1201ac0 img {
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Redondeamos solo el lado izquierdo para que encaje con el derecho */
    border-radius: 20px 0px 0px 20px !important; 
    border: 1px solid #f0f0f0 !important;
    border-right: none !important; /* Quitamos el borde derecho para unirlo */
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
}

/* Efecto Hover Sincronizado */
.elementor-2426 .elementor-element.elementor-element-1201ac0:hover img {
    transform: translateX(-5px);
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.1) !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-b8eda43 *//* --- ESTILO BASE DE LA TARJETA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- ICONO CIRCULAR AZUL --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular {
    width: 55px;
    height: 55px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .icono-circular i {
    color: white;
    font-size: 24px;
}

/* --- TEXTOS (TÍTULO Y DESCRIPCIÓN) --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 p {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

/* --- ENLACE CON FLECHA --- */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .link-overview {
    text-decoration: none;
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .flecha {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* --- EFECTO DINÁMICO (HOVER) --- */

/* La tarjeta se vuelve azul y sube */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover {
    background: #3b82f6;
    transform: translateY(-10px);
    box-shadow: 0px 20px 40px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* El icono se vuelve blanco con logo azul */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular {
    background: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .icono-circular i {
    color: #3b82f6;
}

/* Todos los textos pasan a blanco para legibilidad */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover h3,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover p,
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .link-overview {
    color: #ffffff !important;
}

/* La flecha se mueve hacia la derecha */
.elementor-2426 .elementor-element.elementor-element-b8eda43 .card-premium:hover .flecha {
    transform: translateX(8px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c92e5cc *//* --- Tarjeta Compacta y Profesional --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .card-servicio, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-ticket, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .tarjeta-integracion {
    background: #ffffff;
    padding: 25px; /* Reducido de 40px a 25px */
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    max-width: 300px; /* Tamaño máximo más pequeño */
    margin: 0 auto;
}

/* Icono más pequeño */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .icono-circular-lista {
    width: 40px; /* Reducido de 55px */
    height: 40px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle, #fff 20%, transparent 25%);
}

/* Títulos más pequeños */
.elementor-2426 .elementor-element.elementor-element-c92e5cc h3 {
    font-size: 18px !important; /* Reducido de 22px */
    font-weight: 700;
    margin-bottom: 8px;
}

/* Textos y Listas más compactas */
.elementor-2426 .elementor-element.elementor-element-c92e5cc p, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-ticket li, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .lista-integracion li {
    font-size: 14px !important; /* Reducido de 16px */
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Botones más pequeños (Píldora) */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones {
    padding: 8px 18px; /* Más estrecho */
    font-size: 13px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

/* --- EFECTO DINÁMICO (Se mantiene igual) --- */
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .card-servicio,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-ticket,
.elementor-2426 .elementor-element.elementor-element-c92e5cc:hover .tarjeta-integracion {
    transform: translateY(-8px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
}

/* Efecto para el botón */
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-tour:hover, 
.elementor-2426 .elementor-element.elementor-element-c92e5cc .boton-integraciones:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69d302a *//* --- Imagen Decorada con Fondo Blanco y Efecto Pro --- */

/* 1. Estado Normal */
.elementor-2426 .elementor-element.elementor-element-69d302a img {
    background-color: #ffffff !important; /* Fondo blanco sólido */
    padding: 15px !important; /* Espacio entre la imagen y el borde blanco */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08) !important; /* Sombra suave */
    border: 1px solid #f0f0f0 !important; /* Borde sutil gris */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Movimiento fluido */
    border-radius: 0px !important; /* Bordes rectos como pediste */
    filter: grayscale(20%); /* Un toque artístico sutil */
}

/* 2. Efecto al pasar el cursor (Hover) */
.elementor-2426 .elementor-element.elementor-element-69d302a:hover img {
    transform: translateY(-12px) scale(1.02) !important; /* Sube y crece un poquito */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15) !important; /* Sombra profunda */
    filter: grayscale(0%) brightness(1.05); /* Recupera color y brilla un poco */
    border-color: #3b82f6 !important; /* El borde se vuelve azul sutil */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2b9610b *//* Contenedor Blanco */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

/* Icono Azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Dibujamos el circulo blanco interno */
    background-image: radial-gradient(circle, #fff 25%, transparent 30%);
}

/* Tipografías */
.elementor-2426 .elementor-element.elementor-element-2b9610b h3 {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Enlace azul */
.elementor-2426 .elementor-element.elementor-element-2b9610b .enlace-overview {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* EFECTO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover {
    transform: translateY(-10px);
    background: #3b82f6; /* Se vuelve azul al pasar el mouse */
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover h3,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover p,
.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .enlace-overview {
    color: #ffffff !important;
}

.elementor-2426 .elementor-element.elementor-element-2b9610b .card-servicio:hover .icono-circular {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #3b82f6 25%, transparent 30%);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec87c3 *//* --- Estilo Base de la Tarjeta --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio {
    background: #ffffff; /* Fondo blanco */
    padding: 40px; /* Relleno generoso */
    border-radius: 20px; /* Bordes muy redondeados modernos */
    border: 1px solid #eaeaea; /* Borde sutil gris */
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidad */
    transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1); /* Transición suave y profesional */
    position: relative;
    cursor: pointer;
}

/* --- El Icono Circular Azul --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .icono-circular {
    width: 50px;
    height: 50px;
    background-color: #3b82f6; /* Color azul de tu marca */
    background-image: radial-gradient(circle, #60a5fa 10%, transparent 10%), 
                      radial-gradient(circle, #ffffff 15%, transparent 15%); /* Simula el diseño interno */
    border-radius: 50%; /* Hace el icono circular */
    margin-bottom: 20px; /* Espacio debajo */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Sombra azulada sutil */
}

/* --- Título en Negrita --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

/* --- Descripción en Gris --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Link de Overview (Azul y sin subrayado) --- */
.elementor-2426 .elementor-element.elementor-element-aec87c3 .enlace-overview {
    text-decoration: none; /* Quita el subrayado */
    color: #3b82f6; /* Color azul */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .flecha {
    margin-left: 8px; /* Espacio antes de la flecha */
    transition: transform 0.3s ease; /* Prepara la animación */
}

/* --- EFECTO DINÁMICO (HOVER) --- */

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover {
    transform: translateY(-10px); /* La tarjeta sube sutilmente */
    box-shadow: 0px 15px 50px rgba(59, 130, 246, 0.15); /* La sombra se profundiza y azuliza */
    border-color: #3b82f6; /* El borde se vuelve azul */
}

.elementor-2426 .elementor-element.elementor-element-aec87c3 .card-servicio:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha al interactuar */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9faf546 *//* --- Forzar Fondo Blanco y Tamaño --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena {
    background: #ffffff !important; /* Esto quita el azul de fondo */
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 260px; /* Lo hace más pequeño */
    transition: all 0.4s ease;
}

/* Título compacto */
.elementor-2426 .elementor-element.elementor-element-9faf546 h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo azul */
.elementor-2426 .elementor-element.elementor-element-9faf546 .subtitulo-azul {
    font-size: 13px !important;
    color: #3b82f6 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Lista sin puntos negros */
.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .puntos-limpios li {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
}

/* Botón redondeado pequeño */
.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* --- EFECTO HOVER --- */
.elementor-2426 .elementor-element.elementor-element-9faf546 .tarjeta-pequena:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1) !important;
}

.elementor-2426 .elementor-element.elementor-element-9faf546 .boton-link:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-64b05f2 *//* 1. LIMPIEZA Y CONTENEDOR PRINCIPAL */
.elementor-2426 .elementor-element.elementor-element-64b05f2 {
    --tech-cyan: #00d4ff;
    --tech-mint: #00ffcc;
    --tech-blue: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Se hace rejilla solita */
    gap: 20px;
}

/* 2. DISEÑO DE CADA ITEM (TARJETA TECNOLÓGICA) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px 25px 20px 50px !important; /* Espacio para el icono */
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: default;
    overflow: hidden;
}

/* 3. EL ICONO DINÁMICO (HEXÁGONO TECH) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::before {
    content: "\f2db"; /* Icono de chip/procesador */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--tech-cyan);
    transition: all 0.5s ease;
}

/* 4. EFECTO HOVER EXTRAVAGANTE */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--tech-mint) !important;
    transform: translateX(10px) translateY(-5px) !important;
    box-shadow: -10px 10px 30px rgba(0, 212, 255, 0.15);
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::before {
    color: var(--tech-mint);
    transform: translateY(-50%) rotate(360deg) scale(1.3);
    text-shadow: 0 0 15px var(--tech-mint);
}

/* 5. DECORACIÓN DE FONDO (LÍNEAS DE CIRCUITO) */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tech-cyan), var(--tech-mint));
    opacity: 0.5;
    transition: width 0.3s ease;
}

.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li:hover::after {
    width: 8px;
    opacity: 1;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-64b05f2 ul li {
    animation: slideIn 0.8s ease backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-c49b2f8 *//* 1. ORGANIZACIÓN EN CUADRÍCULA PROFESIONAL */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. DISEÑO DE CADA ÍTEM (ESTILO CORPORATIVO PREMIUM) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-left: 5px solid #00d4ff !important; /* Barra de acento azul */
    border-radius: 10px !important;
    padding: 20px 20px 20px 55px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* 3. ICONO DE TECNOLOGÍA (CADA PUNTO TIENE VIDA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li::before {
    content: "\f0ad" !important; /* Icono de herramienta/llave técnica */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;
    font-size: 20px !important;
    color: #00d4ff !important;
    transition: all 0.4s ease !important;
}

/* 4. EFECTO INTERACTIVO (WOW FACTOR) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover {
    transform: translateY(-8px) !important;
    background: #ffffff !important;
    border-left-color: #00ffcc !important; /* Cambia a menta al pasar el mouse */
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
}

.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li:hover::before {
    transform: rotate(20deg) scale(1.2) !important;
    color: #00ffcc !important;
}

/* 5. TÍTULO DE LA SECCIÓN (POR INDUSTRIA) */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 p strong, .elementor-2426 .elementor-element.elementor-element-c49b2f8 p:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #007bff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    display: block !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding-bottom: 10px !important;
}

/* 6. ANIMACIÓN DE APARICIÓN SUAVE */
.elementor-2426 .elementor-element.elementor-element-c49b2f8 ul li {
    animation: fadeInTech 0.6s ease-out forwards !important;
    opacity: 0;
}

@keyframes fadeInTech {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e740115 *//* 1. CONTENEDOR CON REJILLA TECNOLÓGICA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul {
    list-style: none !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 2. TARJETAS "SOFT TECH" (GIRLY PERO PROFESIONAL) */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px 5px 25px 5px !important; /* Estilo chic */
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px 20px 20px 60px !important;
    position: relative !important;
    color: #1a3a5a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08) !important;
}

/* 3. ICONOS DE TECNOLOGÍA CON BRILLO GENTIL */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::before {
    content: "\f2db" !important; /* Icono de Microchip */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    color: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    transition: all 0.4s ease !important;
}

/* 4. DECORACIÓN: CHIPS Y DESTELLOS */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: #00ffcc;
    opacity: 0.4;
}

/* 5. INTERACCIÓN (HOVER) - AZUL ELÉCTRICO Y SOFT */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover {
    background: #ffffff !important;
    border-color: #00ffcc !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2) !important;
    color: #007bff !important;
}

.elementor-2426 .elementor-element.elementor-element-e740115 ul li:hover::before {
    content: "\f012" !important; /* Cambia a icono de señal/red al pasar el mouse */
    color: #00ffcc !important;
    filter: drop-shadow(0 0 12px #00ffcc);
    transform: translateY(-50%) scale(1.2) !important;
}

/* 6. ANIMACIÓN DE ENTRADA LINDÍSIMA */
.elementor-2426 .elementor-element.elementor-element-e740115 ul li {
    animation: revealTech 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes revealTech {
    from { opacity: 0; transform: translateY(15px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5c53b2e *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-5c53b2e .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-5c53b2e:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-57a9859 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-57a9859 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-57a9859:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-03dfc96 *//* 1. TIPOGRAFÍA CON BRILLO SUTIL */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #1a1e26 !important;
    display: inline-block;
    position: relative;
    padding-left: 25px; /* Espacio para el icono decorativo */
    transition: all 0.4s ease;
}

/* 2. DECORACIÓN LATERAL (EL "ACENTO" DE COLOR) */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #00ffcc; /* Color turquesa vibrante */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
    animation: pulseGlow 2s infinite;
}

/* 3. SUBRAYADO CON DEGRADADO DINÁMICO */
.elementor-2426 .elementor-element.elementor-element-03dfc96 .elementor-heading-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00ffcc);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 4. INTERACCIÓN (HOVER) */
.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title {
    color: #007bff !important;
    text-shadow: 0px 0px 15px rgba(0, 123, 255, 0.2);
}

.elementor-2426 .elementor-element.elementor-element-03dfc96:hover .elementor-heading-title::after {
    width: calc(100% - 25px);
}

/* 5. ANIMACIÓN DE PULSO PARA EL CUADRITO */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f5ee04c *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-f5ee04c {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-f5ee04c img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-f5ee04c .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-f5ee04c:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9ae7498 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-9ae7498 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-9ae7498::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-9ae7498 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-9ae7498 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-9ae7498:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f95362 *//* 1. CONTENEDOR DE LA IMAGEN CON "AURA" */
.elementor-2426 .elementor-element.elementor-element-0f95362 {
    --color-neon: #00d4ff;
    --color-accent: #00ffcc;
    --color-deep: #007bff;
    
    padding: 15px;
    background: transparent;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. ESQUINAS DECORATIVAS (TOP-LEFT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 15px 0 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 3. ESQUINAS DECORATIVAS (BOTTOM-RIGHT) */
.elementor-2426 .elementor-element.elementor-element-0f95362::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 40px; height: 40px;
    border-bottom: 4px solid var(--color-deep);
    border-right: 4px solid var(--color-deep);
    border-radius: 0 0 15px 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* 4. LA IMAGEN CON EFECTO DE PROFUNDIDAD */
.elementor-2426 .elementor-element.elementor-element-0f95362 img {
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.6s ease !important;
    filter: brightness(1) saturate(1.1);
}

/* 5. INTERACCIÓN MÁGICA AL PASAR EL MOUSE (HOVER) */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover {
    transform: scale(1.05) rotate(-1deg);
}

/* Las esquinas se expanden y abrazan la imagen */
.elementor-2426 .elementor-element.elementor-element-0f95362:hover::before {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-neon);
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover::after {
    width: 100%; height: 100%;
    border-radius: 25px;
    border-color: var(--color-accent);
    opacity: 0.5;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover img {
    transform: rotate(1deg); /* Contrarrotación para efecto 3D */
    box-shadow: 0 30px 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.1) contrast(1.1);
}

/* 6. EFECTO DE ESCANEO LÁSER VERTICAL */
.elementor-2426 .elementor-element.elementor-element-0f95362 .elementor-widget-container::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 3;
    opacity: 0;
    transition: 0s;
}

.elementor-2426 .elementor-element.elementor-element-0f95362:hover .elementor-widget-container::before {
    animation: scanLine 2s linear infinite;
    opacity: 1;
}

@keyframes scanLine {
    0% { top: -10%; }
    100% { top: 110%; }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-42b8c28 *//* 1. FONDO CON AURA DINÁMICA PARA EL CONTENEDOR */
.elementor-2426 .elementor-element.elementor-element-42b8c28 {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.1)) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 2. CÍRCULOS DE COLOR DETRÁS (EFECTO DE LUZ) */
.elementor-2426 .elementor-element.elementor-element-42b8c28::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: floatLight 8s infinite alternate;
}

@keyframes floatLight {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, 40px); }
}

/* 3. CAMPOS ESTILO CRISTAL (GLASSMORPHISM) */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    color: #0c1a32 !important;
    padding: 15px 20px !important;
    transition: all 0.4s ease !important;
}

/* 4. HOVER Y FOCUS DINÁMICO EN CAMPOS */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-group .elementor-field:focus {
    background: #ffffff !important;
    border-color: #00d4ff !important;
    box-shadow: 0 10px 20px rgba(0, 212, 255, 0.15) !important;
    transform: scale(1.01);
}

/* 5. ETIQUETAS ELEGANTES */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    color: #1a3a5a !important;
    margin-left: 5px;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 6. BOTÓN "ENVIAR" ESTILO CÁPSULA NEÓN */
.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button {
    background: linear-gradient(90deg, #007bff, #00d4ff) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 20px 40px !important;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.4s ease !important;
}

.elementor-2426 .elementor-element.elementor-element-42b8c28 .elementor-button:hover {
    background: linear-gradient(90deg, #00d4ff, #00ffcc) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 255, 204, 0.4) !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-9df9961 *//* 1. ESTILO DE TEXTO "CORTADO" (MASKING) */
.elementor-2426 .elementor-element.elementor-element-9df9961 .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    
    /* Efecto de máscara dinámica */
    background: linear-gradient(
        45deg, 
        #003366 25%, 
        #007bff 50%, 
        #00ffcc 75%, 
        #003366 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animación suave de flujo de color */
    animation: textFlow 8s linear infinite;
    transition: all 0.5s ease;
    display: inline-block;
}

/* 2. ANIMACIÓN DE FLUJO LENTO */
@keyframes textFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 3. EL "DECORADO DIFERENTE": SUBRAYADO DOBLE ASIMÉTRICO */
.elementor-2426 .elementor-element.elementor-element-9df9961::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
    background: #00ffcc; /* Turquesa */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.elementor-2426 .elementor-element.elementor-element-9df9961::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 40px;
    width: 10px;
    height: 4px;
    background: #007bff; /* Azul */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. INTERACCIÓN AL PASAR EL MOUSE (REACCIÓN DE LAS LÍNEAS) */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover::before {
    width: 100%;
    background: #007bff;
}

.elementor-2426 .elementor-element.elementor-element-9df9961:hover::after {
    left: 100%;
    opacity: 0;
}

/* 5. EFECTO DE LUZ SUTIL */
.elementor-2426 .elementor-element.elementor-element-9df9961:hover .elementor-heading-title {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
    letter-spacing: 1px !important; /* Expansión elegante */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417c021 *//* 1. EL CONTENEDOR MAGNÉTICO */
.elementor-2426 .elementor-element.elementor-element-417c021 {
    --brillo-azul: #007bff;
    --brillo-turquesa: #00ffcc;
    --brillo-celeste: #00d4ff;
    
    padding: 12px; /* Espacio para el borde de neón */
    background: #000; /* Fondo negro para que el neón resalte */
    border-radius: 30px;
    position: relative;
    display: inline-block;
    transition: all 0.5s ease;
    z-index: 1;
}

/* 2. EL BORDE DE NEÓN ANIMADO (EFECTO LÍQUIDO) */
.elementor-2426 .elementor-element.elementor-element-417c021::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    padding: 4px; /* Grosor del borde */
    background: linear-gradient(45deg, var(--brillo-azul), var(--brillo-turquesa), var(--brillo-celeste), var(--brillo-azul));
    background-size: 400% 400%;
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: neonFlow 6s linear infinite;
}

/* 3. LA IMAGEN CON CORTE REDONDEADO */
.elementor-2426 .elementor-element.elementor-element-417c021 img {
    border-radius: 22px !important;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
    display: block;
}

/* 4. EFECTO HOVER: EXPLOSIÓN DE COLOR */
.elementor-2426 .elementor-element.elementor-element-417c021:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover img {
    filter: saturate(1.3) contrast(1.1);
}

/* 5. EL PIN DE UBICACIÓN DINÁMICO (ICONO FLOTANTE) */
.elementor-2426 .elementor-element.elementor-element-417c021::after {
    content: "📍"; /* Puedes cambiarlo por un icono si prefieres */
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--brillo-turquesa);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 255, 204, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.elementor-2426 .elementor-element.elementor-element-417c021:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6. ANIMACIÓN DEL GRADIENTE */
@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}/* End custom CSS */