.elementor-3383 .elementor-element.elementor-element-d44333b{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-d44333b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3383 .elementor-element.elementor-element-aaf6295 .tj-hero-slider, .elementor-3383 .elementor-element.elementor-element-aaf6295 .h7-hero-slider .tj-hero-shape{background-color:#040819;}.elementor-3383 .elementor-element.elementor-element-aaf6295 .tj-slider-section::before{background-color:#F5F5F5;}.elementor-3383 .elementor-element.elementor-element-aaf6295 > .elementor-widget-container{margin:-220px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-aaf6295.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-aaf6295{z-index:0;}.elementor-3383 .elementor-element.elementor-element-aaf6295 .tj-slider-section{min-height:1px;}.elementor-3383 .elementor-element.elementor-element-aaf6295 .tj-hero-slider.style-1 .sub-title{background-color:#0C3565D6;}.elementor-3383 .elementor-element.elementor-element-aaf6295 .slider-content .sub-title{background-color:#0C3565D6;}.elementor-3383 .elementor-element.elementor-element-aaf6295 .tj-primary-btn{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-3383 .elementor-element.elementor-element-a09b33c{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-3383 .elementor-element.elementor-element-72e57e8{z-index:999;}.elementor-3383 .elementor-element.elementor-element-33cba24{--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:50px 0px;--row-gap:50px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-33cba24:not(.elementor-motion-effects-element-type-background), .elementor-3383 .elementor-element.elementor-element-33cba24 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #030A44 0%, #02245C 100%);}.elementor-3383 .elementor-element.elementor-element-c6116dc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-c6116dc .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-c6116dc .tj_heading .title{font-weight:bold;color:#E5E5E6;}.elementor-3383 .elementor-element.elementor-element-7237266{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-dba4b96{--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;}.elementor-3383 .elementor-element.elementor-element-4604003{--display:flex;}.elementor-3383 .elementor-element.elementor-element-da9a60d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-da9a60d.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-da9a60d .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-da9a60d .tj_heading .title{font-size:26px;}.elementor-3383 .elementor-element.elementor-element-012a235 > .elementor-widget-container{padding:-1px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-012a235.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-25e457f{--display:flex;}.elementor-3383 .elementor-element.elementor-element-af2cd8d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-af2cd8d.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-af2cd8d .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-af2cd8d .tj_heading .title{font-size:26px;}.elementor-3383 .elementor-element.elementor-element-a583ffd > .elementor-widget-container{padding:147px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-a583ffd.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-4770c58{--display:flex;}.elementor-3383 .elementor-element.elementor-element-beb8f39 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-beb8f39.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-beb8f39 .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-beb8f39 .tj_heading .title{font-size:26px;}.elementor-3383 .elementor-element.elementor-element-e76aca3{width:auto;max-width:auto;}.elementor-3383 .elementor-element.elementor-element-e76aca3 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-e76aca3.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-7f86190{--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;}.elementor-3383 .elementor-element.elementor-element-7bc4a8c{--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-3383 .elementor-element.elementor-element-6bf79ba > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-6bf79ba.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-6bf79ba .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-6bf79ba .tj_heading .title{font-size:26px;}.elementor-3383 .elementor-element.elementor-element-a1d91a6 > .elementor-widget-container{padding:31px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-879673d{--display:flex;}.elementor-3383 .elementor-element.elementor-element-29854ae > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-29854ae.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-29854ae .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-29854ae .tj_heading .title{font-size:26px;}.elementor-3383 .elementor-element.elementor-element-f614d91 > .elementor-widget-container{padding:029px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-f614d91.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-1f9995a{--display:flex;}.elementor-3383 .elementor-element.elementor-element-e649983 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-e649983.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-e649983 .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-e649983 .tj_heading .title{font-size:26px;}.elementor-3383 .elementor-element.elementor-element-b373533 > .elementor-widget-container{padding:29px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-b373533.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-30e07f1{--display:flex;--overlay-opacity:0.5;}.elementor-3383 .elementor-element.elementor-element-30e07f1:not(.elementor-motion-effects-element-type-background), .elementor-3383 .elementor-element.elementor-element-30e07f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #080827B8 100%);}.elementor-3383 .elementor-element.elementor-element-30e07f1::before, .elementor-3383 .elementor-element.elementor-element-30e07f1 > .elementor-background-video-container::before, .elementor-3383 .elementor-element.elementor-element-30e07f1 > .e-con-inner > .elementor-background-video-container::before, .elementor-3383 .elementor-element.elementor-element-30e07f1 > .elementor-background-slideshow::before, .elementor-3383 .elementor-element.elementor-element-30e07f1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3383 .elementor-element.elementor-element-30e07f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-3383 .elementor-element.elementor-element-05ee3d4{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-05ee3d4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3383 .elementor-element.elementor-element-683483b{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-683483b.e-con{--align-self:stretch;}.elementor-3383 .elementor-element.elementor-element-5c0b372{width:100%;max-width:100%;}.elementor-3383 .elementor-element.elementor-element-5c0b372 > .elementor-widget-container{margin:20px 0px 40px 0px;padding:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-5c0b372.elementor-element{--flex-shrink:1;}.elementor-3383 .elementor-element.elementor-element-5c0b372 .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-5c0b372 .tj_heading .title{padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-afe6ec5{width:100%;max-width:100%;}.elementor-3383 .elementor-element.elementor-element-afe6ec5.elementor-element{--align-self:stretch;}.elementor-3383 .elementor-element.elementor-element-e7fc455{--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:space-between;--padding-top:120px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-3383 .elementor-element.elementor-element-e7fc455.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3383 .elementor-element.elementor-element-0754586{--display:flex;--gap:30px 0px;--row-gap:30px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-140bd0a{width:var( --container-widget-width, 500px );max-width:500px;--container-widget-width:500px;--container-widget-flex-grow:0;}.elementor-3383 .elementor-element.elementor-element-140bd0a .sec-heading{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-140bd0a .sec-heading .sec-title{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-23eaecd{width:100%;max-width:100%;}.elementor-3383 .elementor-element.elementor-element-23eaecd > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-23eaecd .tj-image img{width:100%;max-width:100%;}.elementor-3383 .elementor-element.elementor-element-23eaecd .h7-process-banner{width:100%;max-width:100%;}.elementor-3383 .elementor-element.elementor-element-23eaecd .h9-about-statistics{width:100%;max-width:100%;background-color:#000000;}.elementor-3383 .elementor-element.elementor-element-23eaecd .tj-image{background-color:#000000;}.elementor-3383 .elementor-element.elementor-element-23eaecd .h7-process-banner-bg::before{background-color:#000000;}.elementor-3383 .elementor-element.elementor-element-6d8e5ec{--display:flex;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-8ab5889 .twae-wrapper{--tw-cbx-text-align-alternate:right;--tw-lbl-big-size:22px;--tw-lbl-small-size:16px;--tw-ybx-size:80px;--tw-cbx-bottom-margin:60px;}.elementor-3383 .elementor-element.elementor-element-ded8191{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-8d3387b .tj-marquee-section, .elementor-3383 .elementor-element.elementor-element-8d3387b .h6-marquee-slider, .elementor-3383 .elementor-element.elementor-element-8d3387b .h8-marquee-section{background-color:transparent;background-image:radial-gradient(at center left, #0C2898 0%, #010102 100%);}.elementor-3383 .elementor-element.elementor-element-8d3387b{width:100%;max-width:100%;}.elementor-3383 .elementor-element.elementor-element-8d3387b .marquee-item .marquee-icons{color:#0163FF;}.elementor-3383 .elementor-element.elementor-element-92c7581{--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-3383 .elementor-element.elementor-element-92c7581:not(.elementor-motion-effects-element-type-background), .elementor-3383 .elementor-element.elementor-element-92c7581 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #001792 0%, #000000 100%);}.elementor-3383 .elementor-element.elementor-element-92c7581.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3383 .elementor-element.elementor-element-85441e0{--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;--margin-top:30px;--margin-bottom:30px;--margin-left:30px;--margin-right:30px;}.elementor-3383 .elementor-element.elementor-element-85441e0.e-con{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-7fd6f6d .elementor-icon-wrapper{text-align:center;}.elementor-3383 .elementor-element.elementor-element-7fd6f6d.elementor-view-stacked .elementor-icon{background-color:#82C3FF;}.elementor-3383 .elementor-element.elementor-element-7fd6f6d.elementor-view-framed .elementor-icon, .elementor-3383 .elementor-element.elementor-element-7fd6f6d.elementor-view-default .elementor-icon{color:#82C3FF;border-color:#82C3FF;}.elementor-3383 .elementor-element.elementor-element-7fd6f6d.elementor-view-framed .elementor-icon, .elementor-3383 .elementor-element.elementor-element-7fd6f6d.elementor-view-default .elementor-icon svg{fill:#82C3FF;}.elementor-3383 .elementor-element.elementor-element-e48ee43 .elementor-heading-title{font-family:"Arial", Sans-serif;mix-blend-mode:overlay;}.elementor-3383 .elementor-element.elementor-element-1986570{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3383 .elementor-element.elementor-element-1986570.e-con{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-c662d07{--display:flex;}.elementor-3383 .elementor-element.elementor-element-f56480f{--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-3383 .elementor-element.elementor-element-f56480f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3383 .elementor-element.elementor-element-de3fb2c{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:60px;}.elementor-3383 .elementor-element.elementor-element-de3fb2c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3383 .elementor-element.elementor-element-085c404{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-3383 .elementor-element.elementor-element-085c404 img{border-radius:14px 14px 14px 14px;}.elementor-3383 .elementor-element.elementor-element-59bffd1{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:-60px;}.elementor-3383 .elementor-element.elementor-element-59bffd1:not(.elementor-motion-effects-element-type-background), .elementor-3383 .elementor-element.elementor-element-59bffd1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-3da5c6d{--display:flex;--min-height:0px;--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-3383 .elementor-element.elementor-element-a5caf78{width:100%;max-width:100%;columns:1;color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-a5caf78.elementor-element{--align-self:flex-start;--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-icon i{color:#1C6EFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-icon svg{fill:#1C6EFF;transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-6ebe9fe{--e-icon-list-icon-size:22px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-3383 .elementor-element.elementor-element-6ebe9fe .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-5049f13.elementor-element{--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-icon i{color:#1C6EFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-icon svg{fill:#1C6EFF;transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-5049f13{--e-icon-list-icon-size:22px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-3383 .elementor-element.elementor-element-5049f13 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-5133fcd{width:100%;max-width:100%;columns:1;color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-5133fcd.elementor-element{--align-self:flex-start;--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-b2dcd36.elementor-element{--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-icon i{color:#1C6EFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-icon svg{fill:#1C6EFF;transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-b2dcd36{--e-icon-list-icon-size:22px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-3383 .elementor-element.elementor-element-b2dcd36 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-39e6cfb{width:100%;max-width:100%;columns:1;color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-39e6cfb.elementor-element{--align-self:flex-start;--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-29125f4.elementor-element{--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-icon i{color:#1C6EFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-icon svg{fill:#1C6EFF;transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-29125f4{--e-icon-list-icon-size:22px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-3383 .elementor-element.elementor-element-29125f4 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-93a522d{width:100%;max-width:100%;columns:1;color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-93a522d.elementor-element{--align-self:flex-start;--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-6ce32a6.elementor-element{--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-icon i{color:#1C6EFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-icon svg{fill:#1C6EFF;transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-6ce32a6{--e-icon-list-icon-size:22px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-3383 .elementor-element.elementor-element-6ce32a6 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-3fd0db8{width:100%;max-width:100%;columns:1;color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-3fd0db8.elementor-element{--align-self:flex-start;--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-d388890.elementor-element{--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-icon i{color:#1C6EFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-icon svg{fill:#1C6EFF;transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-d388890{--e-icon-list-icon-size:22px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-3383 .elementor-element.elementor-element-d388890 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-df272e6{width:100%;max-width:100%;columns:1;color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-df272e6.elementor-element{--align-self:flex-start;--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-5d5a5ea.elementor-element{--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-icon i{color:#1C6EFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-icon svg{fill:#1C6EFF;transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-5d5a5ea{--e-icon-list-icon-size:22px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-3383 .elementor-element.elementor-element-5d5a5ea .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-a848f45{width:100%;max-width:100%;columns:1;color:#FFFFFF;}.elementor-3383 .elementor-element.elementor-element-a848f45.elementor-element{--align-self:flex-start;--order:99999 /* order end hack */;}.elementor-3383 .elementor-element.elementor-element-0b0021f{--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;}.elementor-3383 .elementor-element.elementor-element-826eadc{--display:flex;}.elementor-3383 .elementor-element.elementor-element-38257de{--display:flex;}.elementor-3383 .elementor-element.elementor-element-99f9d5d .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-99f9d5d .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-3383 .elementor-element.elementor-element-99f9d5d{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-3383 .elementor-element.elementor-element-99f9d5d .elementor-icon-list-text{transition:color 0.3s;}.elementor-3383 .elementor-element.elementor-element-48e90b2{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;width:auto;max-width:auto;}.elementor-3383 .elementor-element.elementor-element-e480127{--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;--overlay-opacity:0.5;}.elementor-3383 .elementor-element.elementor-element-e480127::before, .elementor-3383 .elementor-element.elementor-element-e480127 > .elementor-background-video-container::before, .elementor-3383 .elementor-element.elementor-element-e480127 > .e-con-inner > .elementor-background-video-container::before, .elementor-3383 .elementor-element.elementor-element-e480127 > .elementor-background-slideshow::before, .elementor-3383 .elementor-element.elementor-element-e480127 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3383 .elementor-element.elementor-element-e480127 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-3383 .elementor-element.elementor-element-cee7e7a{--display:flex;}.elementor-3383 .elementor-element.elementor-element-d1eca4f > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-d1eca4f.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-d1eca4f .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-a458892{--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;--padding-top:0px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-3383 .elementor-element.elementor-element-141a857{--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-3383 .elementor-element.elementor-element-7b2fee4{--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-3383 .elementor-element.elementor-element-b792808{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3383 .elementor-element.elementor-element-9316f54 .tj_heading{text-align:start;}.elementor-3383 .elementor-element.elementor-element-356f915 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3383 .elementor-element.elementor-element-356f915 .editor_text{text-align:left;}@media(max-width:1399px){.elementor-3383 .elementor-element.elementor-element-683483b{--min-height:590px;}.elementor-3383 .elementor-element.elementor-element-85441e0{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-3383 .elementor-element.elementor-element-7fd6f6d{padding:1px 10px 0px 15px;}.elementor-3383 .elementor-element.elementor-element-7fd6f6d.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:1;}.elementor-3383 .elementor-element.elementor-element-7fd6f6d .elementor-icon-wrapper{text-align:start;}.elementor-3383 .elementor-element.elementor-element-e48ee43{padding:0px 0px 0px 0px;text-align:start;}.elementor-3383 .elementor-element.elementor-element-e48ee43.elementor-element{--align-self:center;}.elementor-3383 .elementor-element.elementor-element-d1eca4f .tj_heading{text-align:center;}.elementor-3383 .elementor-element.elementor-element-a458892{--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;}.elementor-3383 .elementor-element.elementor-element-b792808{--min-height:50px;}}@media(min-width:768px){.elementor-3383 .elementor-element.elementor-element-33cba24{--content-width:1320px;}.elementor-3383 .elementor-element.elementor-element-e7fc455{--content-width:1320px;}.elementor-3383 .elementor-element.elementor-element-0754586{--width:42%;}.elementor-3383 .elementor-element.elementor-element-6d8e5ec{--width:89%;}.elementor-3383 .elementor-element.elementor-element-1986570{--width:1200px;}.elementor-3383 .elementor-element.elementor-element-f56480f{--width:94.636%;}.elementor-3383 .elementor-element.elementor-element-de3fb2c{--width:50%;}.elementor-3383 .elementor-element.elementor-element-59bffd1{--width:100%;}.elementor-3383 .elementor-element.elementor-element-3da5c6d{--width:100%;}.elementor-3383 .elementor-element.elementor-element-141a857{--width:50%;}.elementor-3383 .elementor-element.elementor-element-7b2fee4{--width:70%;}}@media(max-width:1399px) and (min-width:768px){.elementor-3383 .elementor-element.elementor-element-d44333b{--width:1264px;}.elementor-3383 .elementor-element.elementor-element-33cba24{--content-width:1140px;}.elementor-3383 .elementor-element.elementor-element-05ee3d4{--width:1213px;}.elementor-3383 .elementor-element.elementor-element-e7fc455{--content-width:1140px;}.elementor-3383 .elementor-element.elementor-element-0754586{--width:45%;}.elementor-3383 .elementor-element.elementor-element-6d8e5ec{--width:50%;}.elementor-3383 .elementor-element.elementor-element-92c7581{--width:1254.4px;}.elementor-3383 .elementor-element.elementor-element-f56480f{--width:1064px;}.elementor-3383 .elementor-element.elementor-element-de3fb2c{--width:566.6px;}}@media(max-width:1200px) and (min-width:768px){.elementor-3383 .elementor-element.elementor-element-33cba24{--content-width:960px;}.elementor-3383 .elementor-element.elementor-element-e7fc455{--content-width:960px;}.elementor-3383 .elementor-element.elementor-element-0754586{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-3383 .elementor-element.elementor-element-33cba24{--content-width:720px;}.elementor-3383 .elementor-element.elementor-element-e7fc455{--content-width:720px;}.elementor-3383 .elementor-element.elementor-element-0754586{--width:100%;}.elementor-3383 .elementor-element.elementor-element-6d8e5ec{--width:100%;}}@media(max-width:1200px){.elementor-3383 .elementor-element.elementor-element-33cba24{--padding-top:100px;--padding-bottom:100px;--padding-left:15px;--padding-right:15px;}.elementor-3383 .elementor-element.elementor-element-05ee3d4{--gap:30px 30px;--row-gap:30px;--column-gap:30px;}.elementor-3383 .elementor-element.elementor-element-683483b{--min-height:350px;}.elementor-3383 .elementor-element.elementor-element-140bd0a{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}}@media(max-width:1024px){.elementor-3383 .elementor-element.elementor-element-33cba24{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:80px;--padding-bottom:80px;--padding-left:15px;--padding-right:15px;}.elementor-3383 .elementor-element.elementor-element-05ee3d4{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:25px 0px;--row-gap:25px;--column-gap:0px;}.elementor-3383 .elementor-element.elementor-element-e7fc455{--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:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:80px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-3383 .elementor-element.elementor-element-140bd0a{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-3383 .elementor-element.elementor-element-8ab5889 .twae-wrapper{--tw-lbl-big-size:20px;--tw-lbl-small-size:14px;--tw-ybx-size:80px;}}@media(max-width:767px){.elementor-3383 .elementor-element.elementor-element-33cba24{--content-width:540px;}.elementor-3383 .elementor-element.elementor-element-683483b{--min-height:250px;}.elementor-3383 .elementor-element.elementor-element-e7fc455{--content-width:540px;}.elementor-3383 .elementor-element.elementor-element-8ab5889 .twae-wrapper{--tw-lbl-big-size:18px;--tw-lbl-small-size:14px;--tw-ybx-size:80px;}}/* Start custom CSS for tj-hero-banner-slider, class: .elementor-element-aaf6295 *//* --------------------------------------------------------------
HERO BANNER CORPORATIVO - ACCIONES SOSTENIBLES
VERSIÓN EXTREMA: Overlay 95% para máxima legibilidad
-------------------------------------------------------------- */
/* RESET GENERAL */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
background: #000;
}
/* === 1. SECCIÓN PRINCIPAL CON OVERLAY 95% === */
.tj-slider-section {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 150px 0 120px;
min-height: 100vh;
width: 100%;
overflow: hidden;
color: #ffffff;
background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Overlay de 95% de oscuridad para máxima legibilidad */
.tj-slider-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 1;
}
/* Degradado adicional para profundidad y evitar fondo negro plano */
.tj-slider-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 58, 138, 0.3) 100%);
z-index: 1;
}
/* === 2. CONTENEDOR PRINCIPAL === */
.tj-slider-section .container {
position: relative;
z-index: 10;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
.slider-content {
max-width: 850px;
text-align: left;
opacity: 0;
transform: translateY(30px);
animation: contentReveal 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
}
@keyframes contentReveal {
to {
opacity: 1;
transform: translateY(0);
}
}
/* === 3. BADGE SOSTENIBLE - MÁS BRILLANTE === */
.sustainable-badge {
display: inline-block;
padding: 12px 30px;
background: rgba(34, 197, 94, 0.4);
border: 1px solid rgba(34, 197, 94, 0.9);
color: #4ade80;
font-size: 1.05rem;
font-weight: 600;
border-radius: 50px;
margin: 0 auto 35px;
letter-spacing: 1.2px;
text-transform: uppercase;
backdrop-filter: blur(10px);
margin-left: auto;
margin-right: auto;
display: block;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.sustainable-badge:hover {
background: rgba(34, 197, 94, 0.45);
border-color: rgba(34, 197, 94, 1);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
/* === 4. TÍTULO PRINCIPAL - MÁS BRILLANTE === */
.slider-content .slider-title {
font-size: 4.2rem;
font-weight: 800;
line-height: 1.05;
margin-bottom: 25px;
/* Gradiente extremadamente brillante para contraste máximo */
background: linear-gradient(
to right,
#ffffff 0%,
#e6eefc 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Sombra más pronunciada para contraste extremo */
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
/* === 5. DESCRIPCIÓN - MÁS CLARA === */
.slider-content .desc p {
font-size: 1.25rem;
font-weight: 300;
color: #f9fafc;
line-height: 1.7;
margin-bottom: 45px;
max-width: 750px;
padding-left: 25px;
border-left: 4px solid rgba(96, 165, 250, 1);
transition: all 0.3s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.slider-content .desc p:hover {
border-left-color: #60a5fa;
color: #ffffff;
}
/* === 6. CONTENEDOR DE BOTONES === */
.slider-content .hero-action {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
flex-wrap: wrap;
margin-top: 40px;
}
/* === 7. BOTÓN PRINCIPAL - MÁS DESTACADO === */
.tj-primary-btn.slider-button {
position: relative;
background: linear-gradient(135deg, #3b82f6, #2563eb);
border: none;
padding: 20px 50px;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
color: white;
text-transform: uppercase;
letter-spacing: 1.8px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
min-width: 260px;
height: 65px;
text-align: center;
overflow: hidden;
z-index: 2;
transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}
/* Capa de brillo más intensa */
.tj-primary-btn.slider-button::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
z-index: 1;
transition: left 0.7s ease;
}
.tj-primary-btn.slider-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
.tj-primary-btn.slider-button:hover::before {
opacity: 1;
}
.tj-primary-btn.slider-button .btn_inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
}
.tj-primary-btn.slider-button .btn_icon {
font-size: 1.3rem;
transition: transform 0.3s ease;
}
.tj-primary-btn.slider-button .btn_text {
font-weight: 700;
}
/* Hover con mayor elevación y sombra */
.tj-primary-btn.slider-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.6);
}
.tj-primary-btn.slider-button:hover::after {
left: 100%;
}
.tj-primary-btn.slider-button:hover .btn_icon {
transform: translateX(4px);
}
.tj-primary-btn.slider-button:active {
transform: translateY(0);
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5);
}
/* === 8. BOTÓN DE CONTACTO - MÁS VISIBLE === */
.call-btn-style-2.slider-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 20px 40px;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
cursor: pointer;
min-width: 260px;
height: 65px;
transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.call-btn-style-2.slider-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
.call-btn-style-2.slider-button:hover::before {
opacity: 1;
}
.call-btn-style-2.slider-button .icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 50%;
margin-right: 18px;
font-size: 1.3rem;
transition: all 0.3s ease;
flex-shrink: 0;
position: relative;
z-index: 2;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}
.call-btn-style-2.slider-button .call-content {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.3;
position: relative;
z-index: 2;
}
.call-btn-style-2.slider-button .call-text {
font-size: 0.9rem;
color: #e0e7fe;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: color 0.3s ease;
}
.call-btn-style-2.slider-button .call-number {
font-size: 1.2rem;
font-weight: 800;
color: white;
transition: all 0.3s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* Hover con mayor contraste */
.call-btn-style-2.slider-button:hover {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.call-btn-style-2.slider-button:hover .icon {
transform: scale(1.08) rotate(2deg);
box-shadow: 0 0 35px rgba(16, 185, 129, 0.8);
}
.call-btn-style-2.slider-button:hover .call-text {
color: #a7f3d0;
}
.call-btn-style-2.slider-button:hover .call-number {
transform: scale(1.03);
color: #ffffff;
}
.call-btn-style-2.slider-button:active {
transform: translateY(0);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
/* === 9. RESPONSIVE - ADAPTACIÓN PERFECTA === */
/* Laptop grande */
@media (min-width: 1400px) {
.tj-slider-section {
padding: 170px 0 130px;
}
}
/* Laptop estándar */
@media (min-width: 1200px) and (max-width: 1399px) {
.tj-slider-section {
padding: 160px 0 120px;
}
}
/* Tablet y laptop pequeña */
@media (min-width: 992px) and (max-width: 1199px) {
.tj-slider-section {
padding: 150px 0 110px;
}
.slider-content .slider-title {
font-size: 3.6rem;
}
.tj-primary-btn.slider-button,
.call-btn-style-2.slider-button {
min-width: 230px;
padding: 18px 40px;
height: 62px;
font-size: 1.05rem;
}
}
/* === TABLET === */
@media (max-width: 991px) {
.tj-slider-section {
background-attachment: scroll;
padding: 230px 0 110px;
justify-content: center;
}
.slider-content {
text-align: center;
padding: 0 20px;
width: 100%;
}
.slider-content .slider-title {
font-size: 3.2rem;
text-align: center;
}
.slider-content .desc p {
text-align: center;
border-left: none;
border-top: 3px solid rgba(96, 165, 250, 1);
border-bottom: 3px solid rgba(96, 165, 250, 1);
padding: 20px 0;
margin: 0 auto 45px;
font-size: 1.2rem;
}
.slider-content .hero-action {
justify-content: center;
flex-direction: column;
gap: 25px;
}
.sustainable-badge {
margin-left: auto;
margin-right: auto;
font-size: 1.05rem;
padding: 12px 30px;
}
}
/* === MÓVIL GRANDE === */
@media (max-width: 767px) {
.tj-slider-section {
padding: 210px 0 90px;
}
.slider-content .slider-title {
font-size: 2.8rem;
line-height: 1.15;
}
.slider-content .desc p {
font-size: 1.15rem;
padding: 15px 0;
}
.tj-primary-btn.slider-button,
.call-btn-style-2.slider-button {
width: 100%;
max-width: 340px;
height: 62px;
padding: 0 30px;
font-size: 1.05rem;
}
.call-btn-style-2.slider-button .icon {
width: 42px;
height: 42px;
margin-right: 15px;
}
.call-btn-style-2.slider-button .call-text {
font-size: 0.85rem;
}
.call-btn-style-2.slider-button .call-number {
font-size: 1.15rem;
}
}
/* === MÓVIL MEDIANO === */
@media (max-width: 576px) {
.tj-slider-section {
padding: 190px 0 80px;
}
.slider-content .slider-title {
font-size: 2.5rem;
}
.slider-content .desc p {
font-size: 1.1rem;
line-height: 1.6;
}
.tj-primary-btn.slider-button,
.call-btn-style-2.slider-button {
height: 60px;
font-size: 1rem;
}
.tj-primary-btn.slider-button .btn_inner {
gap: 10px;
}
.call-btn-style-2.slider-button .call-text {
font-size: 0.8rem;
}
.call-btn-style-2.slider-button .call-number {
font-size: 1.1rem;
}
}
/* === MÓVIL PEQUEÑO === */
@media (max-width: 480px) {
.tj-slider-section {
padding: 170px 0 70px;
}
.slider-content .slider-title {
font-size: 2.2rem;
}
.slider-content .desc p {
font-size: 1.05rem;
line-height: 1.6;
}
.tj-primary-btn.slider-button,
.call-btn-style-2.slider-button {
height: 58px;
font-size: 0.95rem;
}
.call-btn-style-2.slider-button .call-text {
font-size: 0.75rem;
}
.call-btn-style-2.slider-button .call-number {
font-size: 1.05rem;
}
}
/* === FIXES PARA ELEMENTOR PRO === */
.elementor-widget-container {
position: relative !important;
}
.elementor-background-overlay {
pointer-events: none !important;
}
/* Evitar conflictos con el editor */
.elementor-edit-mode .tj-slider-section {
min-height: 750px !important;
}
/* Mejorar la visualización en el editor */
.elementor-edit-mode .slider-content {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* === EFECTOS TÁCTILES PARA MÓVILES === */
@media (hover: none) {
.tj-primary-btn.slider-button:hover,
.call-btn-style-2.slider-button:hover {
transform: none !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.tj-primary-btn.slider-button:active,
.call-btn-style-2.slider-button:active {
transform: scale(0.98) !important;
transition: transform 0.1s ease !important;
}
.tj-primary-btn.slider-button::after {
display: none;
}
}
/* === ACCESIBILIDAD Y RENDIMIENTO === */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
.slider-content {
opacity: 1 !important;
transform: none !important;
}
}
/* Garantizar interactividad en todos los dispositivos */
.slider-button {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Efecto de foco para accesibilidad */
.tj-primary-btn.slider-button:focus,
.call-btn-style-2.slider-button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 0 6px rgba(59, 130, 246, 0.6);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a09b33c *//* ===== SECCIÓN DE LOGROS MEJORADA - ESTILOS COMPLETOS ===== */
/* Contenedor principal - Fondo azul espectacular */
.advanced-achievements-section {
padding: 120px 0;
background: linear-gradient(135deg,
#00172d 0%,
#00264d 20%,
#003366 40%,
#004080 60%,
#0059b3 80%,
#0073e6 100%) !important;
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
width: 100%;
}
.advanced-achievements-section:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 15% 20%, rgba(0, 119, 255, 0.3) 0%, transparent 40%),
radial-gradient(circle at 85% 30%, rgba(0, 153, 255, 0.25) 0%, transparent 40%),
radial-gradient(circle at 50% 80%, rgba(0, 102, 204, 0.35) 0%, transparent 50%);
animation: pulseBackground 8s ease-in-out infinite alternate;
z-index: 1;
}
@keyframes pulseBackground {
0% {
opacity: 0.7;
transform: scale(1);
filter: hue-rotate(0deg);
}
50% {
opacity: 0.9;
transform: scale(1.02);
filter: hue-rotate(10deg);
}
100% {
opacity: 0.7;
transform: scale(1);
filter: hue-rotate(0deg);
}
}
.achievements-background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 10, 20, 0.8) 0%,
rgba(0, 20, 40, 0.6) 50%,
rgba(0, 30, 60, 0.4) 100%);
z-index: 2;
}
/* Efectos de partículas */
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
animation: floatParticle linear infinite;
box-shadow:
0 0 15px rgba(100, 200, 255, 0.7),
0 0 30px rgba(100, 200, 255, 0.4);
pointer-events: none;
}
@keyframes floatParticle {
0% {
transform: translateY(120vh) rotate(0deg) scale(0.5);
opacity: 0;
}
10% {
opacity: 1;
transform: translateY(100vh) rotate(0deg) scale(1);
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg) scale(1.2);
opacity: 0;
}
}
.glow-effect {
position: absolute;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(0, 150, 255, 0.5) 0%, transparent 70%);
border-radius: 50%;
filter: blur(25px);
animation: pulseGlow 6s ease-in-out infinite;
z-index: 3;
pointer-events: none;
}
@keyframes pulseGlow {
0%, 100% {
opacity: 0.4;
transform: scale(0.8);
}
50% {
opacity: 0.8;
transform: scale(1.3);
}
}
/* Contenedor de contenido */
.achievements-content-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
z-index: 10;
width: 100%;
}
/* Título principal con efecto azul vivo */
.main-achievements-title {
text-align: center;
margin-bottom: 100px;
position: relative;
animation: titleEntrance 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards, titleFloat 6s ease-in-out 1.5s infinite;
opacity: 0;
transform: translateY(50px);
}
@keyframes titleEntrance {
0% {
opacity: 0;
transform: translateY(50px) scale(0.9);
filter: blur(10px);
}
70% {
opacity: 1;
transform: translateY(-10px) scale(1.02);
filter: blur(0);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes titleFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.achievements-heading {
font-size: 4rem;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: white;
text-shadow:
0 5px 15px rgba(0, 80, 158, 0.5),
0 2px 5px rgba(0, 0, 0, 0.3);
line-height: 1.2;
margin-bottom: 20px;
}
.achievements-highlight {
background: linear-gradient(135deg, #4da6ff 0%, #0073e6 50%, #0059b3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 900;
position: relative;
display: inline-block;
text-shadow: none;
}
.achievements-highlight:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, transparent, #4da6ff, #0073e6, transparent);
border-radius: 2px;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% {
opacity: 0.6;
transform: scaleX(0.8);
}
50% {
opacity: 1;
transform: scaleX(1);
}
}
/* Contenedor de estadísticas */
.achievements-stats-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 40px;
}
/* Tarjetas de estadísticas con efecto cristal flotante */
.achievement-stat-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
padding: 50px 30px 40px 30px;
border-radius: 25px;
box-shadow:
0 15px 35px rgba(0, 31, 63, 0.4),
0 8px 20px rgba(0, 100, 255, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 30px rgba(100, 200, 255, 0.2);
border: 1px solid rgba(100, 180, 255, 0.3);
position: relative;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
text-align: center;
animation: cardEntrance 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards, cardFloat 8s ease-in-out 1.2s infinite;
opacity: 0;
transform: translateY(80px) scale(0.8);
z-index: 5;
}
@keyframes cardEntrance {
0% {
opacity: 0;
transform: translateY(80px) scale(0.8) rotate(-5deg);
filter: blur(15px);
}
60% {
opacity: 1;
transform: translateY(-15px) scale(1.05) rotate(2deg);
filter: blur(0);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotate(0deg);
filter: blur(0);
}
}
@keyframes cardFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-12px) rotate(0.8deg);
}
50% {
transform: translateY(-5px) rotate(-0.5deg);
}
75% {
transform: translateY(-8px) rotate(0.3deg);
}
}
@keyframes cardPulse {
0%, 100% {
box-shadow:
0 15px 35px rgba(0, 31, 63, 0.4),
0 8px 20px rgba(0, 100, 255, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 30px rgba(100, 200, 255, 0.2);
}
50% {
box-shadow:
0 20px 45px rgba(0, 31, 63, 0.6),
0 12px 25px rgba(0, 150, 255, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 50px rgba(100, 200, 255, 0.4);
}
}
.stat-card-content {
position: relative;
z-index: 2;
}
.achievement-stat-card:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg,
#4da6ff 0%,
#0073e6 30%,
#0059b3 70%,
#4da6ff 100%);
animation: gradientFlow 3s ease infinite;
background-size: 200% 200%;
z-index: 1;
}
@keyframes gradientFlow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.achievement-stat-card:hover {
transform: translateY(-20px) scale(1.05) !important;
box-shadow:
0 25px 50px rgba(0, 31, 63, 0.6),
0 15px 30px rgba(0, 150, 255, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 0 60px rgba(100, 200, 255, 0.4);
border: 1px solid rgba(100, 200, 255, 0.6);
background: rgba(255, 255, 255, 0.15);
}
/* Números con efecto azul brillante */
.stat-counter-wrapper {
font-size: 5rem;
font-weight: 800;
background: linear-gradient(135deg, #ffffff 0%, #a6d5ff 50%, #4da6ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
line-height: 1;
font-family: 'Arial', sans-serif;
letter-spacing: -2px;
text-shadow: 0 5px 20px rgba(0, 80, 158, 0.4);
filter: drop-shadow(0 5px 12px rgba(0, 100, 255, 0.4));
transition: all 0.4s ease;
}
.achievement-stat-card:hover .stat-counter-wrapper {
background: linear-gradient(135deg, #ffffff 0%, #c2e2ff 50%, #66b3ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 8px 25px rgba(100, 200, 255, 0.6));
transform: scale(1.05);
}
.counter-prefix,
.counter-suffix {
font-size: 5rem;
font-weight: 800;
background: linear-gradient(135deg, #ffffff 0%, #a6d5ff 50%, #4da6ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Títulos de las estadísticas */
.stat-card-title {
font-size: 1.3rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
line-height: 1.5;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-top: 15px;
text-shadow: 0 2px 10px rgba(0, 31, 63, 0.6);
transition: all 0.3s ease;
}
.achievement-stat-card:hover .stat-card-title {
color: #ffffff;
text-shadow: 0 2px 15px rgba(255, 255, 255, 0.3);
}
/* Efectos de hover con partículas azules */
.achievement-stat-card:after {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(100, 200, 255, 0.2),
transparent);
transition: left 1s ease;
z-index: 1;
}
.achievement-stat-card:hover:after {
left: 150%;
}
/* ===== RESPONSIVE DESIGN ===== */
/* Tablet (1024px y menos) */
@media (max-width: 1024px) {
.achievements-stats-container {
grid-template-columns: repeat(2, 1fr);
gap: 35px;
}
.achievement-stat-card {
padding: 45px 25px 35px 25px;
}
.stat-counter-wrapper {
font-size: 4.5rem;
}
.achievements-heading {
font-size: 3.5rem;
}
}
/* Tablet pequeña (768px y menos) */
@media (max-width: 768px) {
.achievements-stats-container {
grid-template-columns: 1fr;
gap: 30px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.achievements-heading {
font-size: 3rem;
margin-bottom: 70px;
}
.achievement-stat-card {
padding: 40px 20px 35px 20px;
}
.stat-counter-wrapper {
font-size: 4rem;
}
.advanced-achievements-section {
padding: 90px 0;
}
.stat-card-title {
font-size: 1.2rem;
}
}
/* Móvil (480px y menos) */
@media (max-width: 480px) {
.achievements-heading {
font-size: 2.5rem;
letter-spacing: 2px;
}
.achievements-content-container {
padding: 0 15px;
}
.achievement-stat-card {
padding: 35px 15px 30px 15px;
border-radius: 20px;
}
.stat-counter-wrapper {
font-size: 3.5rem;
}
.counter-prefix,
.counter-suffix {
font-size: 3.5rem;
}
.stat-card-title {
font-size: 1.1rem;
}
.main-achievements-title {
margin-bottom: 60px;
}
}
/* Móvil muy pequeño (360px y menos) */
@media (max-width: 360px) {
.achievements-heading {
font-size: 2.2rem;
}
.stat-counter-wrapper {
font-size: 3rem;
}
.counter-prefix,
.counter-suffix {
font-size: 3rem;
}
.stat-card-title {
font-size: 1rem;
}
}
/* Pantallas grandes (1440px y más) */
@media (min-width: 1440px) {
.achievements-content-container {
max-width: 1400px;
}
.achievements-heading {
font-size: 4.5rem;
}
.stat-counter-wrapper {
font-size: 5.5rem;
}
.achievement-stat-card {
padding: 60px 35px 50px 35px;
}
}
/* Pantallas muy grandes (1920px y más) */
@media (min-width: 1920px) {
.achievements-content-container {
max-width: 1600px;
}
.achievements-heading {
font-size: 5rem;
}
.stat-counter-wrapper {
font-size: 6rem;
}
.achievement-stat-card {
padding: 70px 40px 60px 40px;
}
.achievements-stats-container {
gap: 50px;
}
}
/* Soporte para navegadores antiguos */
@supports not (backdrop-filter: blur(20px)) {
.achievement-stat-card {
background: rgba(255, 255, 255, 0.15);
}
}
/* Modo de alto contraste para accesibilidad */
@media (prefers-contrast: high) {
.achievement-stat-card {
background: rgba(0, 0, 0, 0.8);
border: 2px solid #fff;
}
.stat-card-title {
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
}
/* Reduce movimiento para usuarios que lo prefieran */
@media (prefers-reduced-motion: reduce) {
.achievement-stat-card,
.main-achievements-title,
.particle,
.glow-effect,
.advanced-achievements-section:before {
animation: none !important;
}
.achievement-stat-card {
opacity: 1;
transform: translateY(0) scale(1);
}
.achievement-stat-card:hover {
transform: translateY(-5px) !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4604003 *//* ==========================================================================
KLAYPZUS SERVICES - UNIVERSO 3D & BOTÓN IMPACTO (FINAL FIX A71)
========================================================================== */
/* 1. CONTENEDOR PRINCIPAL: AMBIENTE CÓSMICO */
.elementor-element-4604003 {
position: relative;
background: radial-gradient(circle at 50% 30%, #0a1128 0%, #000000 100%);
border-radius: 30px;
padding: 55px 35px; /* Padding lateral reducido ligeramente */
border: 1px solid rgba(0, 192, 255, 0.15);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.95),
inset 0 0 40px rgba(0, 100, 255, 0.1);
transform: translateZ(0);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.elementor-element-4604003:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 30px 70px rgba(0, 0, 0, 1),
0 0 50px rgba(0, 150, 255, 0.3);
border-color: rgba(0, 200, 255, 0.4);
}
/* 2. IMAGEN: CRISTAL CURVO */
.elementor-element-dc9197c img {
border-radius: 25px !important;
width: 100%;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
transition: all 0.6s ease;
filter: brightness(0.95) contrast(1.1);
}
.elementor-element-dc9197c img:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.9),
0 0 30px rgba(0, 192, 255, 0.4);
filter: brightness(1.1);
border-color: rgba(0, 192, 255, 0.5);
}
/* 3. TÍTULO: NEÓN */
.elementor-element-da9a60d h2.title {
font-family: 'Poppins', sans-serif;
font-size: 2.2rem; /* Ajustado para prevenir cortes */
font-weight: 800;
background: linear-gradient(90deg, #ffffff 0%, #00c0ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
margin: 30px 0 25px;
text-align: left;
position: relative;
z-index: 2;
}
/* 4. LISTA DE SERVICIOS */
.elementor-element-397136b ul {
list-style: none !important;
padding: 0;
margin: 20px 0;
}
.elementor-element-397136b ul li {
position: relative;
padding-left: 35px !important;
margin-bottom: 18px;
color: #e0e0e0;
font-size: 1.1rem;
line-height: 1.4;
transition: transform 0.3s ease;
}
.elementor-element-397136b ul li i,
.elementor-element-397136b ul li .tji {
position: absolute;
left: 0;
top: 3px;
color: #00c0ff !important;
font-size: 18px;
text-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
display: block !important;
opacity: 1 !important;
}
.elementor-element-397136b ul li:hover {
transform: translateX(10px);
color: #ffffff;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
/* 5. BOTÓN "VER CATÁLOGO" - SOLUCIÓN A71 */
.elementor-element-012a235 .tj_btn_wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 35px;
perspective: 1000px;
}
.elementor-element-012a235 a.tj-primary-btn.white-btn {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px; /* Gap reducido para ahorrar espacio */
/* Degradado Impactante */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 50%, #00c6ff 100%);
background-size: 200% auto;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 15px !important; /* Tamaño fijo seguro */
letter-spacing: 0.5px; /* Espaciado ajustado */
text-transform: uppercase;
/* SOLUCIÓN: Padding optimizado para "Sitio escritorio" en móvil */
padding: 15px 25px !important;
border-radius: 50px;
border: none;
/* Sombra 3D */
box-shadow:
0 10px 25px rgba(0, 114, 255, 0.5),
0 4px 0 rgba(0, 80, 180, 1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: auto !important;
max-width: 100%;
white-space: nowrap !important;
text-decoration: none;
animation: shineButton 4s infinite linear;
overflow: hidden;
box-sizing: border-box;
}
@keyframes shineButton {
to { background-position: 200% center; }
}
/* Efecto brillo */
.elementor-element-012a235 a.tj-primary-btn.white-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}
.elementor-element-012a235 a.tj-primary-btn.white-btn:hover::after {
left: 100%;
}
/* Texto del botón */
.elementor-element-012a235 .btn_text {
line-height: 1 !important;
display: block !important;
padding: 0;
margin: 0;
flex-shrink: 0; /* Evita que el texto se aplaste */
}
/* Icono Giratorio */
.elementor-element-012a235 .btn_icon {
width: 42px; /* Ligeramente más pequeño */
height: 42px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
flex-shrink: 0;
}
.elementor-element-012a235 .btn_icon i {
color: white;
font-size: 16px;
transition: color 0.3s ease;
}
/* === HOVER IMPACTO === */
.elementor-element-012a235 a.tj-primary-btn.white-btn:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 20px 50px rgba(0, 198, 255, 0.7),
0 4px 0 rgba(0, 80, 180, 1);
}
.elementor-element-012a235 a.tj-primary-btn.white-btn:hover .btn_icon {
transform: rotate(360deg) scale(1.15);
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.elementor-element-012a235 a.tj-primary-btn.white-btn:hover .btn_icon i {
color: #0072ff;
}
/* 6. RESPONSIVE FORZADO (Asegura legibilidad en todos los modos) */
@media (max-width: 980px) {
.elementor-element-012a235 a.tj-primary-btn.white-btn {
padding: 14px 20px !important; /* Relleno seguro para tablets/modo desktop */
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.elementor-element-4604003 {
padding: 40px 20px;
}
.elementor-element-da9a60d h2.title {
font-size: 1.8rem;
text-align: center;
}
.elementor-element-012a235 a.tj-primary-btn.white-btn {
width: 100% !important;
justify-content: center;
padding: 14px 20px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-25e457f *//* ==========================================================================
KLAYPZUS SERVICES - CONTENEDOR PRODUCCIÓN (ESTILO A71 FIX / UNIVERSO 3D)
========================================================================== */
/* 1. CONTENEDOR PRINCIPAL: AMBIENTE CÓSMICO */
.elementor-element-25e457f {
position: relative;
background: radial-gradient(circle at 50% 30%, #0a1128 0%, #000000 100%);
border-radius: 30px;
padding: 55px 35px; /* Padding lateral reducido (Estilo A71) */
border: 1px solid rgba(0, 192, 255, 0.15);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.95),
inset 0 0 40px rgba(0, 100, 255, 0.1);
transform: translateZ(0);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.elementor-element-25e457f:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 30px 70px rgba(0, 0, 0, 1),
0 0 50px rgba(0, 150, 255, 0.3);
border-color: rgba(0, 200, 255, 0.4);
}
/* 2. IMAGEN: CRISTAL CURVO */
.elementor-element-e4652e2 img {
border-radius: 25px !important;
width: 100%;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
transition: all 0.6s ease;
filter: brightness(0.95) contrast(1.1);
}
.elementor-element-e4652e2 img:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.9),
0 0 30px rgba(0, 192, 255, 0.4);
filter: brightness(1.1);
border-color: rgba(0, 192, 255, 0.5);
}
/* 3. TÍTULO: NEÓN (Ajustado) */
.elementor-element-af2cd8d h2.title {
font-family: 'Poppins', sans-serif;
font-size: 2.2rem; /* Ajustado A71 style */
font-weight: 800;
background: linear-gradient(90deg, #ffffff 0%, #00c0ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
margin: 30px 0 25px;
text-align: left;
position: relative;
z-index: 2;
}
/* 4. LISTA DE PRODUCCIÓN */
.elementor-element-e55d855 ul {
list-style: none !important;
padding: 0;
margin: 20px 0;
}
.elementor-element-e55d855 ul li {
position: relative;
padding-left: 35px !important;
margin-bottom: 18px;
color: #e0e0e0;
font-size: 1.1rem;
line-height: 1.4;
transition: transform 0.3s ease;
}
.elementor-element-e55d855 ul li i,
.elementor-element-e55d855 ul li .tji {
position: absolute;
left: 0;
top: 3px;
color: #00c0ff !important;
font-size: 18px;
text-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
display: block !important;
opacity: 1 !important;
}
.elementor-element-e55d855 ul li:hover {
transform: translateX(10px);
color: #ffffff;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
/* 5. BOTÓN "VER CATÁLOGO" - SOLUCIÓN A71 APLICADA */
.elementor-element-a583ffd .tj_btn_wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 35px;
perspective: 1000px;
}
.elementor-element-a583ffd a.tj-primary-btn.white-btn {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px; /* Gap reducido style A71 */
/* Degradado Impactante */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 50%, #00c6ff 100%);
background-size: 200% auto;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 15px !important; /* Tamaño fijo seguro A71 */
letter-spacing: 0.5px;
text-transform: uppercase;
/* Padding optimizado A71 */
padding: 15px 25px !important;
border-radius: 50px;
border: none;
/* Sombra 3D */
box-shadow:
0 10px 25px rgba(0, 114, 255, 0.5),
0 4px 0 rgba(0, 80, 180, 1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: auto !important;
max-width: 100%;
white-space: nowrap !important;
text-decoration: none;
animation: shineButton 4s infinite linear;
overflow: hidden;
box-sizing: border-box;
}
@keyframes shineButton {
to { background-position: 200% center; }
}
/* Efecto brillo */
.elementor-element-a583ffd a.tj-primary-btn.white-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}
.elementor-element-a583ffd a.tj-primary-btn.white-btn:hover::after {
left: 100%;
}
/* Texto del botón */
.elementor-element-a583ffd .btn_text {
line-height: 1 !important;
display: block !important;
padding: 0;
margin: 0;
flex-shrink: 0;
}
/* Icono Giratorio */
.elementor-element-a583ffd .btn_icon {
width: 42px; /* Ligeramente más pequeño style A71 */
height: 42px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
flex-shrink: 0;
}
.elementor-element-a583ffd .btn_icon i {
color: white;
font-size: 16px;
transition: color 0.3s ease;
}
/* === HOVER IMPACTO === */
.elementor-element-a583ffd a.tj-primary-btn.white-btn:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 20px 50px rgba(0, 198, 255, 0.7),
0 4px 0 rgba(0, 80, 180, 1);
}
.elementor-element-a583ffd a.tj-primary-btn.white-btn:hover .btn_icon {
transform: rotate(360deg) scale(1.15);
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.elementor-element-a583ffd a.tj-primary-btn.white-btn:hover .btn_icon i {
color: #0072ff;
}
/* 6. RESPONSIVE FORZADO (Asegura legibilidad A71/Móvil) */
@media (max-width: 980px) {
.elementor-element-a583ffd a.tj-primary-btn.white-btn {
padding: 14px 20px !important;
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.elementor-element-25e457f {
padding: 40px 20px;
}
.elementor-element-af2cd8d h2.title {
font-size: 1.8rem;
text-align: center;
}
.elementor-element-a583ffd a.tj-primary-btn.white-btn {
width: 100% !important;
justify-content: center;
padding: 14px 20px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4770c58 *//* ==========================================================================
KLAYPZUS SERVICES - PERSONAL AUXILIAR (ESTILO A71 FIX / UNIVERSO 3D)
========================================================================== */
/* 1. CONTENEDOR PRINCIPAL: AMBIENTE CÓSMICO */
.elementor-element-4770c58 {
position: relative;
background: radial-gradient(circle at 50% 30%, #0a1128 0%, #000000 100%);
border-radius: 30px;
padding: 55px 35px; /* Padding lateral reducido (Estilo A71) */
border: 1px solid rgba(0, 192, 255, 0.15);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.95),
inset 0 0 40px rgba(0, 100, 255, 0.1);
transform: translateZ(0);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.elementor-element-4770c58:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 30px 70px rgba(0, 0, 0, 1),
0 0 50px rgba(0, 150, 255, 0.3);
border-color: rgba(0, 200, 255, 0.4);
}
/* 2. IMAGEN: CRISTAL CURVO */
.elementor-element-29ee42b img {
border-radius: 25px !important;
width: 100%;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
transition: all 0.6s ease;
filter: brightness(0.95) contrast(1.1);
}
.elementor-element-29ee42b img:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.9),
0 0 30px rgba(0, 192, 255, 0.4);
filter: brightness(1.1);
border-color: rgba(0, 192, 255, 0.5);
}
/* 3. TÍTULO: NEÓN (Ajustado) */
.elementor-element-beb8f39 h2.title {
font-family: 'Poppins', sans-serif;
font-size: 2.2rem; /* Ajustado A71 style */
font-weight: 800;
background: linear-gradient(90deg, #ffffff 0%, #00c0ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
margin: 30px 0 25px;
text-align: left;
position: relative;
z-index: 2;
}
/* 4. LISTA DE PERSONAL AUXILIAR */
.elementor-element-0b66a23 ul {
list-style: none !important;
padding: 0;
margin: 20px 0;
}
.elementor-element-0b66a23 ul li {
position: relative;
padding-left: 35px !important; /* Ajustado */
margin-bottom: 18px;
color: #e0e0e0;
font-size: 1.15rem;
line-height: 1.5;
transition: transform 0.3s ease;
}
.elementor-element-0b66a23 ul li i,
.elementor-element-0b66a23 ul li .tji {
position: absolute;
left: 0;
top: 3px;
color: #00c0ff !important;
font-size: 18px; /* Ajustado */
text-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
display: block !important;
opacity: 1 !important;
}
.elementor-element-0b66a23 ul li:hover {
transform: translateX(10px);
color: #ffffff;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
/* 5. BOTÓN "VER CATÁLOGO" - SOLUCIÓN A71 APLICADA */
.elementor-element-e76aca3 .tj_btn_wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 35px;
perspective: 1000px;
}
.elementor-element-e76aca3 a.tj-primary-btn.white-btn {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px; /* Gap reducido style A71 */
/* Degradado Vivo Animado */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 50%, #00c6ff 100%);
background-size: 200% auto;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 15px !important; /* Tamaño fijo seguro A71 */
letter-spacing: 0.5px;
text-transform: uppercase;
/* Padding optimizado A71 */
padding: 15px 25px !important;
border-radius: 50px;
border: none;
/* Sombra 3D */
box-shadow:
0 10px 25px rgba(0, 114, 255, 0.5),
0 4px 0 rgba(0, 80, 180, 1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: auto !important;
max-width: 100%;
white-space: nowrap !important;
text-decoration: none;
animation: shineButton 4s infinite linear;
overflow: hidden;
box-sizing: border-box;
}
@keyframes shineButton {
to { background-position: 200% center; }
}
/* Efecto brillo */
.elementor-element-e76aca3 a.tj-primary-btn.white-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}
.elementor-element-e76aca3 a.tj-primary-btn.white-btn:hover::after {
left: 100%;
}
/* Texto del botón */
.elementor-element-e76aca3 .btn_text,
.elementor-element-e76aca3 .btn_text span {
line-height: 1 !important;
display: block !important;
padding: 0;
margin: 0;
flex-shrink: 0; /* Evita aplastamiento */
}
/* Círculo del icono (GIRATORIO) */
.elementor-element-e76aca3 .btn_icon {
width: 42px; /* Ligeramente más pequeño style A71 */
height: 42px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
flex-shrink: 0;
}
.elementor-element-e76aca3 .btn_icon i {
color: white;
font-size: 16px; /* Ajustado */
transition: color 0.3s ease;
}
/* === HOVER IMPACTO === */
.elementor-element-e76aca3 a.tj-primary-btn.white-btn:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 20px 50px rgba(0, 198, 255, 0.7),
0 4px 0 rgba(0, 80, 180, 1);
}
.elementor-element-e76aca3 a.tj-primary-btn.white-btn:hover .btn_icon {
transform: rotate(360deg) scale(1.15); /* GIRO COMPLETO */
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.elementor-element-e76aca3 a.tj-primary-btn.white-btn:hover .btn_icon i {
color: #0072ff;
}
/* 6. RESPONSIVE FORZADO (Asegura legibilidad A71/Móvil) */
@media (max-width: 980px) {
.elementor-element-e76aca3 a.tj-primary-btn.white-btn {
padding: 14px 20px !important;
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.elementor-element-4770c58 {
padding: 40px 20px;
}
.elementor-element-beb8f39 h2.title {
font-size: 1.8rem;
text-align: center;
}
.elementor-element-e76aca3 a.tj-primary-btn.white-btn {
width: 100% !important;
justify-content: center;
padding: 14px 20px !important;
}
.elementor-element-e76aca3 .btn_icon {
width: 40px;
height: 40px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bc4a8c *//* ==========================================================================
KLAYPZUS SERVICES - TRANSPORTE (ESTILO A71 FIX / UNIVERSO 3D)
========================================================================== */
/* 1. CONTENEDOR PRINCIPAL: AMBIENTE CÓSMICO */
.elementor-element-7bc4a8c {
position: relative;
background: radial-gradient(circle at 50% 30%, #0a1128 0%, #000000 100%);
border-radius: 30px;
padding: 55px 35px; /* Padding lateral reducido (Estilo A71) */
border: 1px solid rgba(0, 192, 255, 0.15);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.95),
inset 0 0 40px rgba(0, 100, 255, 0.1);
transform: translateZ(0);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.elementor-element-7bc4a8c:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 30px 70px rgba(0, 0, 0, 1),
0 0 50px rgba(0, 150, 255, 0.3);
border-color: rgba(0, 200, 255, 0.4);
}
/* 2. IMAGEN: CRISTAL CURVO */
.elementor-element-0293e60 img {
border-radius: 25px !important;
width: 100%;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
transition: all 0.6s ease;
filter: brightness(0.95) contrast(1.1);
}
.elementor-element-0293e60 img:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.9),
0 0 30px rgba(0, 192, 255, 0.4);
filter: brightness(1.1);
border-color: rgba(0, 192, 255, 0.5);
}
/* 3. TÍTULO: NEÓN (Ajustado) */
.elementor-element-58eac44 h3.title {
font-family: 'Poppins', sans-serif;
font-size: 2.2rem; /* Ajustado para seguridad en móvil */
font-weight: 800;
background: linear-gradient(90deg, #ffffff 0%, #00c0ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
margin: 30px 0 25px;
text-align: left;
position: relative;
z-index: 2;
}
/* 4. LISTA DE TRANSPORTE */
.elementor-element-cb546d2 ul {
list-style: none !important;
padding: 0;
margin: 20px 0;
}
.elementor-element-cb546d2 ul li {
position: relative;
padding-left: 35px !important; /* Ajustado */
margin-bottom: 25px; /* Mantiene tu separación original amplia */
color: #e0e0e0;
font-size: 1.2rem; /* Ligeramente ajustado para balance */
font-weight: 600;
line-height: 1.5;
transition: transform 0.3s ease;
}
.elementor-element-cb546d2 ul li i,
.elementor-element-cb546d2 ul li .tji {
position: absolute;
left: 0;
top: 3px;
color: #00c0ff !important;
font-size: 18px; /* Ajustado */
text-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
display: block !important;
opacity: 1 !important;
}
.elementor-element-cb546d2 ul li:hover {
transform: translateX(10px);
color: #ffffff;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
/* 5. BOTÓN "VER CATÁLOGO" - SOLUCIÓN A71 APLICADA */
.elementor-element-a1d91a6 .tj_btn_wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
perspective: 1000px;
}
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px; /* Gap reducido style A71 */
/* Degradado Vivo Animado */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 50%, #00c6ff 100%);
background-size: 200% auto;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 15px !important; /* Tamaño fijo seguro A71 */
letter-spacing: 0.5px;
text-transform: uppercase;
/* Padding optimizado A71 */
padding: 15px 25px !important;
border-radius: 50px;
border: none;
/* Sombra 3D */
box-shadow:
0 10px 25px rgba(0, 114, 255, 0.5),
0 4px 0 rgba(0, 80, 180, 1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: auto !important;
max-width: 100%;
white-space: nowrap !important;
text-decoration: none;
animation: shineButton 4s infinite linear;
overflow: hidden;
box-sizing: border-box;
}
@keyframes shineButton {
to { background-position: 200% center; }
}
/* Efecto brillo */
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn:hover::after {
left: 100%;
}
/* Texto del botón */
.elementor-element-a1d91a6 .btn_text,
.elementor-element-a1d91a6 .btn_text span {
line-height: 1 !important;
display: block !important;
padding: 0;
margin: 0;
flex-shrink: 0; /* Evita aplastamiento */
}
/* Círculo del icono (GIRATORIO) */
.elementor-element-a1d91a6 .btn_icon {
width: 42px; /* Ligeramente más pequeño style A71 */
height: 42px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
flex-shrink: 0;
}
.elementor-element-a1d91a6 .btn_icon i {
color: white;
font-size: 16px; /* Ajustado */
transition: color 0.3s ease;
}
/* === HOVER IMPACTO === */
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 20px 50px rgba(0, 198, 255, 0.7),
0 4px 0 rgba(0, 80, 180, 1);
}
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn:hover .btn_icon {
transform: rotate(360deg) scale(1.15); /* GIRO COMPLETO */
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn:hover .btn_icon i {
color: #0072ff;
}
/* 6. RESPONSIVE FORZADO (Asegura legibilidad A71/Móvil) */
@media (max-width: 980px) {
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn {
padding: 14px 20px !important;
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.elementor-element-7bc4a8c {
padding: 40px 20px;
}
.elementor-element-58eac44 h3.title {
font-size: 1.8rem;
text-align: center;
}
.elementor-element-a1d91a6 a.tj-primary-btn.white-btn {
width: 100% !important;
justify-content: center;
padding: 14px 20px !important;
}
.elementor-element-a1d91a6 .btn_icon {
width: 40px;
height: 40px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-879673d *//* ==========================================================================
KLAYPZUS SERVICES - CODIFICACIÓN (ESTILO A71 FIX / UNIVERSO 3D)
========================================================================== */
/* 1. CONTENEDOR PRINCIPAL: AMBIENTE CÓSMICO */
.elementor-element-879673d {
position: relative;
background: radial-gradient(circle at 50% 30%, #0a1128 0%, #000000 100%);
border-radius: 30px;
padding: 55px 35px; /* Padding lateral reducido (Estilo A71) */
border: 1px solid rgba(0, 192, 255, 0.15);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.95),
inset 0 0 40px rgba(0, 100, 255, 0.1);
transform: translateZ(0);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.elementor-element-879673d:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 30px 70px rgba(0, 0, 0, 1),
0 0 50px rgba(0, 150, 255, 0.3);
border-color: rgba(0, 200, 255, 0.4);
}
/* 2. IMAGEN: CRISTAL CURVO */
.elementor-element-de89d1f img {
border-radius: 25px !important;
width: 100%;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
transition: all 0.6s ease;
filter: brightness(0.95) contrast(1.1);
}
.elementor-element-de89d1f img:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.9),
0 0 30px rgba(0, 192, 255, 0.4);
filter: brightness(1.1);
border-color: rgba(0, 192, 255, 0.5);
}
/* 3. TÍTULO: NEÓN (Ajustado) */
.elementor-element-29854ae h2.title {
font-family: 'Poppins', sans-serif;
font-size: 2.2rem; /* Ajustado para seguridad en móvil */
font-weight: 800;
background: linear-gradient(90deg, #ffffff 0%, #00c0ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
margin: 30px 0 25px;
text-align: left;
position: relative;
z-index: 2;
}
/* 4. LISTA DE CODIFICACIÓN */
.elementor-element-3983a34 ul {
list-style: none !important;
padding: 0;
margin: 20px 0;
}
.elementor-element-3983a34 ul li {
position: relative;
padding-left: 35px !important; /* Ajustado */
margin-bottom: 25px; /* Mantiene tu separación original amplia */
color: #e0e0e0;
font-size: 1.2rem; /* Ligeramente ajustado para balance */
font-weight: 600;
line-height: 1.5;
transition: transform 0.3s ease;
}
.elementor-element-3983a34 ul li i,
.elementor-element-3983a34 ul li .tji {
position: absolute;
left: 0;
top: 3px;
color: #00c0ff !important;
font-size: 18px; /* Ajustado */
text-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
display: block !important;
opacity: 1 !important;
}
.elementor-element-3983a34 ul li:hover {
transform: translateX(10px);
color: #ffffff;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
/* 5. BOTÓN "VER CATÁLOGO" - SOLUCIÓN A71 APLICADA */
.elementor-element-f614d91 .tj_btn_wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
perspective: 1000px;
}
.elementor-element-f614d91 a.tj-primary-btn.white-btn {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px; /* Gap reducido style A71 */
/* Degradado Vivo Animado */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 50%, #00c6ff 100%);
background-size: 200% auto;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 15px !important; /* Tamaño fijo seguro A71 */
letter-spacing: 0.5px;
text-transform: uppercase;
/* Padding optimizado A71 */
padding: 15px 25px !important;
border-radius: 50px;
border: none;
/* Sombra 3D */
box-shadow:
0 10px 25px rgba(0, 114, 255, 0.5),
0 4px 0 rgba(0, 80, 180, 1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: auto !important;
max-width: 100%;
white-space: nowrap !important;
text-decoration: none;
animation: shineButton 4s infinite linear;
overflow: hidden;
box-sizing: border-box;
}
@keyframes shineButton {
to { background-position: 200% center; }
}
/* Efecto brillo */
.elementor-element-f614d91 a.tj-primary-btn.white-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}
.elementor-element-f614d91 a.tj-primary-btn.white-btn:hover::after {
left: 100%;
}
/* Texto del botón */
.elementor-element-f614d91 .btn_text,
.elementor-element-f614d91 .btn_text span {
line-height: 1 !important;
display: block !important;
padding: 0;
margin: 0;
flex-shrink: 0; /* Evita aplastamiento */
}
/* Círculo del icono (GIRATORIO) */
.elementor-element-f614d91 .btn_icon {
width: 42px; /* Ligeramente más pequeño style A71 */
height: 42px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
flex-shrink: 0;
}
.elementor-element-f614d91 .btn_icon i {
color: white;
font-size: 16px; /* Ajustado */
transition: color 0.3s ease;
}
/* === HOVER IMPACTO === */
.elementor-element-f614d91 a.tj-primary-btn.white-btn:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 20px 50px rgba(0, 198, 255, 0.7),
0 4px 0 rgba(0, 80, 180, 1);
}
.elementor-element-f614d91 a.tj-primary-btn.white-btn:hover .btn_icon {
transform: rotate(360deg) scale(1.15); /* GIRO COMPLETO */
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.elementor-element-f614d91 a.tj-primary-btn.white-btn:hover .btn_icon i {
color: #0072ff;
}
/* 6. RESPONSIVE FORZADO (Asegura legibilidad A71/Móvil) */
@media (max-width: 980px) {
.elementor-element-f614d91 a.tj-primary-btn.white-btn {
padding: 14px 20px !important;
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.elementor-element-879673d {
padding: 40px 20px;
}
.elementor-element-29854ae h2.title {
font-size: 1.8rem;
text-align: center;
}
.elementor-element-f614d91 a.tj-primary-btn.white-btn {
width: 100% !important;
justify-content: center;
padding: 14px 20px !important;
}
.elementor-element-f614d91 .btn_icon {
width: 40px;
height: 40px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1f9995a *//* ==========================================================================
KLAYPZUS SERVICES - PERSONAL DE CALIDAD (ESTILO TECH / UNIVERSO 3D)
========================================================================== */
/* 1. CONTENEDOR PRINCIPAL: AMBIENTE CÓSMICO */
.elementor-element-1f9995a {
position: relative;
background: radial-gradient(circle at 50% 30%, #0a1128 0%, #000000 100%);
border-radius: 30px;
padding: 55px 35px; /* Padding lateral seguro */
border: 1px solid rgba(0, 192, 255, 0.15);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.95),
inset 0 0 40px rgba(0, 100, 255, 0.1);
transform: translateZ(0);
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.elementor-element-1f9995a:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 30px 70px rgba(0, 0, 0, 1),
0 0 50px rgba(0, 150, 255, 0.3);
border-color: rgba(0, 200, 255, 0.4);
}
/* 2. IMAGEN: CRISTAL CURVO */
.elementor-element-e6a63a1 img {
border-radius: 25px !important;
width: 100%;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
transition: all 0.6s ease;
filter: brightness(0.95) contrast(1.1);
}
.elementor-element-e6a63a1 img:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.9),
0 0 30px rgba(0, 192, 255, 0.4);
filter: brightness(1.1);
border-color: rgba(0, 192, 255, 0.5);
}
/* 3. TÍTULO: NEÓN (Personal de Calidad) */
.elementor-element-e649983 h2.title {
font-family: 'Poppins', sans-serif;
font-size: 2.2rem;
font-weight: 800;
/* Gradiente Texto */
background: linear-gradient(90deg, #ffffff 0%, #00c0ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
margin: 30px 0 25px;
text-align: left;
position: relative;
z-index: 2;
}
/* Línea decorativa neón bajo el título */
.elementor-element-e649983 h2.title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #00d5ff, transparent);
border-radius: 2px;
}
/* 4. LISTA DE VERIFICACIÓN */
.elementor-element-c85a839 ul {
list-style: none !important;
padding: 0;
margin: 20px 0;
}
.elementor-element-c85a839 ul li {
position: relative;
padding-left: 35px !important;
margin-bottom: 25px;
color: #e0e0e0;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.5;
transition: transform 0.3s ease;
}
/* Iconos de la lista (Doble check) */
.elementor-element-c85a839 ul li i,
.elementor-element-c85a839 ul li .tji {
position: absolute;
left: 0;
top: 3px;
color: #00c0ff !important;
font-size: 18px;
text-shadow: 0 0 12px rgba(0, 192, 255, 0.8);
display: block !important;
opacity: 1 !important;
}
.elementor-element-c85a839 ul li:hover {
transform: translateX(10px);
color: #ffffff;
text-shadow: 0 0 10px rgba(0, 192, 255, 0.5);
}
/* 5. BOTÓN "VER CATÁLOGO" - SOLUCIÓN A71 APLICADA */
.elementor-element-b373533 .tj_btn_wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
perspective: 1000px;
}
.elementor-element-b373533 a.tj-primary-btn.white-btn {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
/* Degradado Vivo Animado */
background: linear-gradient(90deg, #00c6ff 0%, #0072ff 50%, #00c6ff 100%);
background-size: 200% auto;
color: white;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 15px !important; /* Tamaño fijo seguro A71 */
letter-spacing: 0.5px;
text-transform: uppercase;
/* Padding optimizado */
padding: 15px 25px !important;
border-radius: 50px;
border: none;
/* Sombra 3D */
box-shadow:
0 10px 25px rgba(0, 114, 255, 0.5),
0 4px 0 rgba(0, 80, 180, 1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: auto !important;
max-width: 100%;
white-space: nowrap !important;
text-decoration: none;
animation: shineButton 4s infinite linear;
overflow: hidden;
box-sizing: border-box;
}
/* Animación de brillo constante */
@keyframes shineButton {
to { background-position: 200% center; }
}
/* Efecto brillo al pasar */
.elementor-element-b373533 a.tj-primary-btn.white-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}
.elementor-element-b373533 a.tj-primary-btn.white-btn:hover::after {
left: 100%;
}
/* Texto del botón */
.elementor-element-b373533 .btn_text,
.elementor-element-b373533 .btn_text span {
line-height: 1 !important;
display: block !important;
padding: 0;
margin: 0;
flex-shrink: 0;
}
/* Círculo del icono (GIRATORIO) */
.elementor-element-b373533 .btn_icon {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
flex-shrink: 0;
}
.elementor-element-b373533 .btn_icon i {
color: white;
font-size: 16px;
transition: color 0.3s ease;
}
/* === HOVER IMPACTO === */
.elementor-element-b373533 a.tj-primary-btn.white-btn:hover {
transform: translateY(-5px) scale(1.03);
box-shadow:
0 20px 50px rgba(0, 198, 255, 0.7),
0 4px 0 rgba(0, 80, 180, 1);
}
.elementor-element-b373533 a.tj-primary-btn.white-btn:hover .btn_icon {
transform: rotate(360deg) scale(1.15); /* GIRO COMPLETO */
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.elementor-element-b373533 a.tj-primary-btn.white-btn:hover .btn_icon i {
color: #0072ff;
}
/* 6. RESPONSIVE FORZADO (Asegura legibilidad A71/Móvil) */
@media (max-width: 980px) {
.elementor-element-b373533 a.tj-primary-btn.white-btn {
padding: 14px 20px !important;
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.elementor-element-1f9995a {
padding: 40px 20px;
}
.elementor-element-e649983 h2.title {
font-size: 1.8rem;
text-align: center;
}
.elementor-element-e649983 h2.title::after {
left: 50%;
transform: translateX(-50%);
}
.elementor-element-b373533 a.tj-primary-btn.white-btn {
width: 100% !important;
justify-content: center;
padding: 14px 20px !important;
}
.elementor-element-b373533 .btn_icon {
width: 40px;
height: 40px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33cba24 *//* ==== FONDO PREMIUM CON MOVIMIENTO SUTIL - COMBINACIÓN AZUL/NEGRO/CELESTE ==== */
/* === CONTENEDOR PRINCIPAL (Fondo profesional con movimiento) === */
.elementor-element-33cba24 {
position: relative;
background: radial-gradient(circle at 30% 20%, #000512 0%, #000000 70%, #000208 100%);
min-height: 100vh;
padding: 80px 40px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
isolation: isolate;
transition: all 0.4s ease;
}
/* ==== FONDO ATMOSFÉRICO CON MOVIMIENTO FLUIDO ==== */
.elementor-element-33cba24::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at var(--star1-x, 20%) var(--star1-y, 30%), rgba(0, 180, 255, 0.15) 0%, transparent 40%),
radial-gradient(circle at var(--star2-x, 70%) var(--star2-y, 60%), rgba(0, 120, 220, 0.12) 0%, transparent 45%),
radial-gradient(circle at var(--star3-x, 40%) var(--star3-y, 80%), rgba(0, 90, 180, 0.1) 0%, transparent 50%);
z-index: -2;
animation: floatStars 25s infinite linear;
opacity: 0.85;
}
/* ==== BRUMA AZUL SUTIL CON MOVIMIENTO ==== */
.elementor-element-33cba24::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
background:
linear-gradient(45deg, transparent 40%, rgba(0, 60, 120, 0.08) 50%, transparent 60%),
linear-gradient(135deg, transparent 40%, rgba(0, 40, 80, 0.06) 50%, transparent 60%),
linear-gradient(225deg, transparent 40%, rgba(0, 80, 160, 0.05) 50%, transparent 60%),
linear-gradient(315deg, transparent 40%, rgba(0, 100, 200, 0.04) 50%, transparent 60%);
background-size: 100% 100%, 80% 80%, 60% 60%, 40% 40%;
transform: rotate(0deg);
z-index: -1;
animation: rotateBands 45s infinite linear;
opacity: 0.7;
pointer-events: none;
}
/* ==== ANIMACIONES PROFESIONALES ==== */
@keyframes floatStars {
0%, 100% {
--star1-x: 20%;
--star1-y: 30%;
--star2-x: 70%;
--star2-y: 60%;
--star3-x: 40%;
--star3-y: 80%;
}
25% {
--star1-x: 25%;
--star1-y: 25%;
--star2-x: 65%;
--star2-y: 65%;
--star3-x: 45%;
--star3-y: 75%;
}
50% {
--star1-x: 15%;
--star1-y: 35%;
--star2-x: 75%;
--star2-y: 55%;
--star3-x: 35%;
--star3-y: 85%;
}
75% {
--star1-x: 20%;
--star1-y: 30%;
--star2-x: 70%;
--star2-y: 60%;
--star3-x: 40%;
--star3-y: 80%;
}
}
@keyframes rotateBands {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ==== BRILLO ENVOLVENTE SUTIL ==== */
.elementor-element-33cba24::nth-child(3) {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 30, 70, 0.4) 100%);
pointer-events: none;
z-index: -1;
}
/* ==== CONTENEDOR PRINCIPAL INTERNO (PROTEGIDO DEL FONDO) ==== */
.elementor-element-33cba24 .e-con-inner {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: 1300px;
width: 100%;
position: relative;
z-index: 2;
/* Protección adicional para contenido */
backdrop-filter: blur(1px);
}
/* ==== TÍTULO PRINCIPAL — ELEGANTE Y LUMINOSO ==== */
.elementor-element-33cba24 .title-container {
text-align: center;
margin-bottom: 50px;
padding: 35px;
background: rgba(0, 18, 40, 0.45);
border-radius: 16px;
border: 1px solid rgba(0, 120, 200, 0.18);
backdrop-filter: blur(12px);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.55),
inset 0 0 15px rgba(0, 80, 150, 0.12);
transition: all 0.4s ease;
position: relative;
z-index: 2;
}
.elementor-element-33cba24 .title-container:hover {
border-color: rgba(0, 160, 230, 0.35);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.65),
inset 0 0 20px rgba(0, 120, 200, 0.22),
0 0 30px rgba(0, 140, 220, 0.18);
}
/* ==== GRID DE SERVICIOS — ESPACIADO DINÁMICO ==== */
.elementor-element-33cba24 .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 32px;
margin: 0;
width: 100%;
}
/* ==== TARJETA DE SERVICIO — DISEÑO "GLASSMORPHISM" ==== */
.elementor-element-33cba24 .service-item {
background: linear-gradient(160deg, rgba(0, 22, 45, 0.55), rgba(0, 8, 20, 0.75));
border-radius: 18px;
padding: 40px 30px;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(14px);
border: 1px solid rgba(0, 100, 180, 0.22);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.45),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
z-index: 1;
}
/* ==== EFECTO HOVER — ELEVACIÓN + BRILLO ==== */
.elementor-element-33cba24 .service-item:hover {
transform: translateY(-12px) scale(1.015);
border-color: rgba(0, 170, 240, 0.45);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.65),
0 0 30px rgba(0, 160, 230, 0.28),
inset 0 0 20px rgba(0, 90, 170, 0.18);
background: linear-gradient(160deg, rgba(0, 30, 60, 0.65), rgba(0, 12, 30, 0.85));
}
/* ==== ICONO — CON ANIMACIÓN Y GLOW ==== */
.elementor-element-33cba24 .service-icon {
text-align: center;
margin-bottom: 25px;
position: relative;
z-index: 2;
}
.elementor-element-33cba24 .service-icon img {
width: 90px;
height: 90px;
object-fit: contain;
border-radius: 50%;
padding: 18px;
background: rgba(0, 55, 110, 0.28);
border: 2px solid rgba(0, 160, 220, 0.38);
transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 0 8px rgba(0, 160, 220, 0.32));
}
.elementor-element-33cba24 .service-item:hover .service-icon img {
transform: scale(1.15) rotate(8deg);
border-color: rgba(0, 200, 255, 0.75);
background: rgba(0, 70, 140, 0.38);
filter: drop-shadow(0 0 15px rgba(0, 180, 240, 0.65));
}
/* ==== TÍTULO DEL SERVICIO — TEXTO CON GRADIENTE ==== */
.elementor-element-33cba24 .service-title {
font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
font-weight: 800;
font-size: 24px;
text-align: center;
background: linear-gradient(90deg, #00c8ff, #0080ff, #00b8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
transition: all 0.4s ease;
text-shadow: 0 0 10px rgba(0, 180, 255, 0.22);
position: relative;
z-index: 2;
}
.elementor-element-33cba24 .service-item:hover .service-title {
transform: scale(1.06);
text-shadow: 0 0 20px rgba(0, 200, 255, 0.55);
}
/* ==== LISTA DE CARACTERÍSTICAS ==== */
.elementor-element-33cba24 .service-features {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
position: relative;
z-index: 2;
}
.elementor-element-33cba24 .service-features li {
color: #c8e4ff;
font-size: 16px;
font-weight: 400;
margin-bottom: 14px;
padding: 12px 18px 12px 40px;
background: rgba(0, 35, 70, 0.25);
border-radius: 10px;
transition: all 0.35s ease;
position: relative;
border: 1px solid rgba(0, 90, 160, 0.18);
}
.elementor-element-33cba24 .service-features li:before {
content: "✓";
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #00d4ff;
font-weight: bold;
font-size: 16px;
text-shadow: 0 0 6px rgba(0, 200, 255, 0.5);
}
.elementor-element-33cba24 .service-item:hover .service-features li {
background: rgba(0, 55, 110, 0.35);
color: #ffffff;
border-color: rgba(0, 140, 210, 0.35);
transform: translateX(4px);
}
/* ==== CONTENEDOR DE CTA — BOTONES ==== */
.elementor-element-33cba24 .cta-container {
text-align: center;
margin-top: 50px;
padding: 35px;
background: rgba(0, 18, 40, 0.45);
border-radius: 16px;
border: 1px solid rgba(0, 140, 210, 0.18);
backdrop-filter: blur(10px);
box-shadow: inset 0 0 12px rgba(0, 90, 160, 0.12);
position: relative;
z-index: 2;
}
/* ==== BOTONES DENTRO DEL CTA ==== */
.elementor-element-33cba24 .cta-container .elementor-button {
background: linear-gradient(90deg, #0077ff, #00ccff);
color: white;
font-weight: 600;
padding: 14px 36px;
border-radius: 50px;
border: none;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow:
0 6px 20px rgba(0, 120, 220, 0.45),
inset 0 2px 0 rgba(255, 255, 255, 0.22);
transition: all 0.4s ease;
}
.elementor-element-33cba24 .cta-container .elementor-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 10px 25px rgba(0, 150, 240, 0.65),
0 0 25px rgba(0, 180, 255, 0.45),
inset 0 2px 0 rgba(255, 255, 255, 0.32);
}
/* ==== RESPONSIVE — MÓVIL ==== */
@media (max-width: 768px) {
.elementor-element-33cba24 {
padding: 50px 20px;
}
.elementor-element-33cba24 .services-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.elementor-element-33cba24 .service-item {
padding: 30px 20px;
}
.elementor-element-33cba24 .service-icon img {
width: 75px;
height: 75px;
}
.elementor-element-33cba24 .service-title {
font-size: 22px;
}
.elementor-element-33cba24 .title-container,
.elementor-element-33cba24 .cta-container {
padding: 25px 20px;
}
}
/* ==== MICRO-ANIMACIÓN DE ENTRADA ==== */
.elementor-element-33cba24 {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==== EFECTO SUTIL AL HOVER DEL CONTENEDOR PRINCIPAL ==== */
.elementor-element-33cba24:hover::before {
opacity: 1;
}/* End custom CSS */
/* Start custom CSS for tj-heading, class: .elementor-element-5c0b372 *//* ==========================================================================
KALYPZUS SERVICES - TÍTULO "NUESTROS CLIENTES" (ICONO FINO 60px - CURVAS SEPARADAS)
========================================================================== */
/* 1. CONTENEDOR DEL TÍTULO */
.tj_heading {
position: relative;
text-align: center;
padding: 30px 0 50px;
perspective: 1000px;
z-index: 10;
}
/* 2. TEXTO PRINCIPAL (H2) */
.tj_heading h2.title {
font-family: 'Poppins', sans-serif !important;
font-size: 3.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 4px;
line-height: 1.2;
margin: 0;
position: relative;
z-index: 1;
/* === FLEXBOX PARA ALINEACIÓN PERFECTA === */
display: inline-flex; /* Mantiene icono y texto en línea */
align-items: center; /* Centra verticalmente el icono con el texto */
justify-content: center;
gap: 20px; /* Espacio exacto entre el icono y la letra "N" */
/* Gradiente en el Texto */
background: linear-gradient(
110deg,
#889bb4 0%,
#ffffff 25%,
#00d5ff 50%,
#ffffff 75%,
#889bb4 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shineText 6s linear infinite;
/* Filtro 3D */
filter: drop-shadow(0 10px 0 rgba(0, 50, 100, 0.5))
drop-shadow(0 0 30px rgba(0, 213, 255, 0.6));
transition: all 0.5s ease;
}
/* ================= ICONO GLOBO FINO (60px) CON CURVAS MÁS SEPARADAS ================= */
.tj_heading h2.title::before {
content: '';
display: block; /* Importante para que respete el tamaño */
position: relative; /* Ya no absolute, para que use el Gap del flex */
/* Tamaño del icono */
width: 60px;
height: 60px;
flex-shrink: 0; /* Evita que el icono se aplaste */
/* === ICONO SVG ACTUALIZADO: LÍNEAS FINAS (0.8) Y CURVAS MÁS ABIERTAS/SEPARADAS === */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3Cpath d='M12 2a18 18 0 0 1 6 10 18 18 0 0 1-6 10'/%3E%3Cpath d='M12 2a18 18 0 0 0-6 10 18 18 0 0 0 6 10'/%3E%3Cpath d='M4 7c2 1 5 2 8 2s6-1 8-2'/%3E%3Cpath d='M4 17c2-1 5-2 8-2s6 1 8 2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* Filtros NEÓN CIAN para colorear el SVG blanco */
filter: drop-shadow(0 0 5px #00d5ff) drop-shadow(0 0 15px #00d5ff);
/* Animación "VIVA" (Rotación y Latido) */
animation: internetAlive 5s ease-in-out infinite;
}
/* Animación del Icono */
@keyframes internetAlive {
0%, 100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 5px #00d5ff) drop-shadow(0 0 10px #00d5ff);
}
50% {
transform: scale(1.15) rotate(10deg); /* Se agranda y gira un poco */
filter: drop-shadow(0 0 15px #00d5ff) drop-shadow(0 0 30px #00d5ff) brightness(1.2);
}
}
/* ======================================================================== */
/* Animación del brillo del texto */
@keyframes shineText {
to { background-position: 200% center; }
}
/* 3. LÍNEA DE ENERGÍA INFERIOR */
.tj_heading h2.title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 3px;
background: linear-gradient(90deg, transparent, #00d5ff, #ffffff, #00d5ff, transparent);
box-shadow: 0 0 20px rgba(0, 213, 255, 1);
animation: expandLine 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
border-radius: 100%;
}
@keyframes expandLine {
to { width: 80%; } /* Ocupa el 80% del ancho del conjunto */
}
/* 4. HOVER INTERACTIVO */
.tj_heading:hover h2.title {
transform: scale(1.02);
filter: drop-shadow(0 15px 5px rgba(0, 0, 0, 0.8))
drop-shadow(0 0 50px rgba(0, 213, 255, 0.9));
letter-spacing: 5px;
}
/* Acelerar icono al pasar el mouse */
.tj_heading:hover h2.title::before {
animation-duration: 1.5s;
}
.tj_heading:hover h2.title::after {
width: 100%;
background: linear-gradient(90deg, transparent, #ff00cc, #ffffff, #00d5ff, transparent);
}
/* 5. RESPONSIVE (MÓVIL) */
@media (max-width: 768px) {
.tj_heading h2.title {
font-size: 2rem !important;
letter-spacing: 1px;
flex-direction: column; /* En móvil, icono arriba del texto */
gap: 10px;
}
.tj_heading h2.title::before {
width: 45px;
height: 45px;
}
.tj_heading:hover h2.title {
letter-spacing: 2px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-683483b *//* --- OCULTAR FONDO DEL CONTENEDOR INTERNO QUE CONTIENE EL TÍTULO Y EL SLIDER --- */
/* Usamos el ID de Elementor para apuntar específicamente al contenedor hijo */
.elementor-element-05ee3d4 {
background-color: transparent !important; /* Asegura que no tenga color de fondo */
box-shadow: none !important; /* Elimina cualquier sombra que tenga */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-30e07f1 *//* ==========================================================================
EFECTO ESTRELLAS FUGACES - SOLO PARA CONTENEDOR NUESTROS CLIENTES (30e07f1)
========================================================================== */
/* 1. CONFIGURACIÓN DEL CONTENEDOR (Para contener las estrellas) */
.elementor-element-30e07f1 {
position: relative;
overflow: hidden !important; /* IMPORTANTE: Evita que las estrellas salgan de la sección */
z-index: 1;
}
/* 2. ESTRELLA FUGAZ 1 (Color Cian - Rápida) */
.elementor-element-30e07f1::before {
content: '';
position: absolute;
top: -50px;
right: 10%; /* Inicia en la parte superior derecha */
width: 300px; /* Largo de la cola */
height: 2px; /* Grosor */
/* Cola de cometa con degradado */
background: linear-gradient(90deg, #00d5ff, transparent);
box-shadow: 0 0 20px rgba(0, 213, 255, 0.8);
/* Rotación para caída diagonal */
transform: rotate(-45deg);
transform-origin: right;
/* Animación infinita */
animation: shootingStar 4s ease-in-out infinite;
opacity: 0;
z-index: 0; /* Detrás del contenido */
pointer-events: none; /* Permite clics en el slider */
}
/* 3. ESTRELLA FUGAZ 2 (Color Blanco - Más lenta y retrasada) */
.elementor-element-30e07f1::after {
content: '';
position: absolute;
top: -100px;
right: 40%; /* Inicia más al centro */
width: 200px;
height: 1px;
background: linear-gradient(90deg, #ffffff, transparent);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
transform: rotate(-45deg);
transform-origin: right;
animation: shootingStar 7s ease-in-out infinite;
animation-delay: 2s; /* Retraso para que no caigan juntas */
opacity: 0;
z-index: 0;
pointer-events: none;
}
/* 4. DEFINICIÓN DE LA ANIMACIÓN DE CAÍDA */
@keyframes shootingStar {
0% {
/* Posición inicial (fuera de pantalla arriba-derecha) */
transform: translate(0, 0) rotate(-45deg) scaleX(0);
opacity: 1;
}
10% {
/* Aparece la estela */
transform: translate(0, 0) rotate(-45deg) scaleX(1);
}
30% {
/* Cruza la pantalla hacia abajo-izquierda */
transform: translate(-1000px, 1000px) rotate(-45deg) scaleX(1);
opacity: 0;
}
100% {
/* Pausa invisible antes de reiniciar */
transform: translate(-1000px, 1000px) rotate(-45deg) scaleX(1);
opacity: 0;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0754586 *//* ==========================================================================
FIX URGENTE: CENTRADO PERFECTO DEL SELLO GIRATORIO
========================================================================== */
/* 1. El contenedor principal del círculo (El marco) */
.h7-process-circle, .about-circle {
position: absolute !important;
/* Ajusta la posición en la esquina */
bottom: 25px !important;
right: 25px !important;
/* FORZAMOS UN TAMAÑO CUADRADO EXACTO */
width: 120px !important;
height: 120px !important;
/* Estilos del fondo (Cristal Tech) */
background: rgba(0, 5, 20, 0.85) !important;
border: 2px solid #00efff !important; /* Borde más nítido */
border-radius: 50% !important;
box-shadow: 0 0 20px rgba(0, 239, 255, 0.4), inset 0 0 10px rgba(0, 239, 255, 0.2);
backdrop-filter: blur(10px);
/* CENTRADO FLEXBOX CRÍTICO */
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 20 !important;
overflow: visible !important; /* Permite que los brillos salgan si es necesario */
}
/* 2. El envoltorio que SÍ va a girar (Nuevo Fix) */
/* Si tu HTML tiene un div .circle-wrap envolviendo la imagen, esto es clave */
.h7-process-circle .circle-wrap {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* APLICAMOS LA ROTACIÓN AQUÍ AL CONTENEDOR, NO A LA IMAGEN */
animation: spinTech 15s linear infinite !important;
}
/* 3. La imagen del texto (KALYPZUS SERVICES...) */
.h7-process-circle .rotate-image {
/* Quitamos la animación de aquí */
animation: none !important;
/* Aseguramos que esté centrada dentro de su envoltorio giratorio */
max-width: 90% !important; /* Ajusta este valor si el texto toca los bordes */
max-height: 90% !important;
width: auto !important;
height: auto !important;
display: block !important;
margin: auto !important;
/* Filtro para que se vea brillante/blanco */
filter: brightness(0) invert(1) drop-shadow(0 0 2px #00efff) !important;
}
/* 4. El Icono Central (El Mundo) - ESTÁTICO EN EL CENTRO */
.h7-process-circle .logo-icon {
position: absolute !important;
/* Centrado absoluto perfecto */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 5 !important;
color: #fff !important;
font-size: 28px !important;
text-shadow: 0 0 15px #00efff;
/* Animación de latido opcional */
animation: heartBeat 2s ease-in-out infinite !important;
}
/* --- ANIMACIONES --- */
@keyframes spinTech {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes heartBeat {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px #00efff); }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}
/* --- MÓVIL --- */
@media (max-width: 767px) {
.h7-process-circle, .about-circle {
width: 90px !important;
height: 90px !important;
bottom: 15px !important;
right: 15px !important;
}
.h7-process-circle .logo-icon {
font-size: 22px !important;
}
}/* End custom CSS */
/* Start custom CSS for timeline-widget-addon, class: .elementor-element-8ab5889 *//* ==========================================================================
FIX DEFINITIVO: AÑO VIVO + LÍNEA DETRÁS (NO MÁS CORTES)
========================================================================== */
/* 1. LA LÍNEA VERTICAL (MANDATORIAMENTE AL FONDO) */
#twae-wrapper-8ab5889::before {
content: '';
position: absolute;
left: 50% !important;
transform: translateX(-50%) !important;
width: 3px;
height: 100%;
/* Tu estilo de línea cian */
background: linear-gradient(to bottom, transparent, #00d5ff 20%, #ffffff 50%, #00d5ff 80%, transparent);
box-shadow: 0 0 20px rgba(0, 213, 255, 0.5);
/* --- EL FIX CLAVE --- */
z-index: 0 !important; /* Nivel más bajo posible */
}
/* 2. ETIQUETA DEL AÑO (NÚCLEO VIVO - AL FRENTE) */
#twae-wrapper-8ab5889 .twae-year-label {
/* Posicionamiento para estar ENCIMA de la línea */
position: relative;
z-index: 999 !important; /* Nivel muy alto para tapar la línea */
/* Fondo "Vivo" (Degradado sólido que tapa la línea) */
background: linear-gradient(
270deg,
#000510, /* Negro azulado casi sólido en los bordes */
#002a4d,
#0055ff,
#00d5ff,
#002a4d,
#000510
) !important;
background-size: 400% 400% !important;
/* Estilos de Texto y Forma */
color: #ffffff !important;
font-family: 'Poppins', sans-serif;
font-size: 32px !important;
font-weight: 900 !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
padding: 15px 50px !important;
border: 2px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 50px !important;
/* Sombras para ocultar cualquier rastro de corte */
box-shadow:
0 0 0 5px #000000, /* Pequeño borde negro externo invisible que ayuda a tapar la línea si asoma */
0 0 30px rgba(0, 85, 255, 0.8),
inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
display: inline-flex;
align-items: center;
justify-content: center;
/* Animaciones Vivas */
animation:
vividGradient 6s ease infinite,
pulseLife 3s ease-in-out infinite alternate !important;
}
/* 3. ICONOS (ASEGURAR QUE TAMBIÉN TAPEN LA LÍNEA) */
#twae-wrapper-8ab5889 .twae-icon {
z-index: 100 !important; /* También por encima de la línea (0) */
background: radial-gradient(circle at 30% 30%, #00d5ff, #000000) !important; /* Fondo opaco */
}
/* --- ANIMACIONES --- */
@keyframes vividGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes pulseLife {
0% { transform: scale(1); box-shadow: 0 0 0 5px #000000, 0 0 20px rgba(0, 85, 255, 0.6); }
100% { transform: scale(1.05); box-shadow: 0 0 0 5px #000000, 0 0 50px rgba(0, 213, 255, 1); }
}
/* Ajuste Móvil */
@media (max-width: 767px) {
#twae-wrapper-8ab5889 .twae-year-label {
font-size: 24px !important;
padding: 12px 35px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7fc455 *//* ==========================================================================
SECCIÓN "EL VIAJE" - EDICIÓN FINAL: UNIVERSO VIVO Y ORGÁNICO (SIN PUNTOS IGUALES)
========================================================================== */
/* 1. LIMPIEZA */
.quantum-particle,
.elementor-element-e7fc455 > div[style*="background"] {
display: none !important;
}
/* 2. CONTENEDOR PRINCIPAL: EL ABISMO PROFUNDO */
.elementor-element-e7fc455 {
position: relative;
overflow: hidden !important;
background-color: #000000 !important; /* Negro Puro */
padding: 140px 20px;
z-index: 1;
/* Vignette profunda para centrar la atención */
box-shadow: inset 0 0 250px rgba(0,0,0,0.9);
}
/* --- CAPA 1: NEBULOSAS GASEOSAS QUE RESPIRAN (FONDO) --- */
.elementor-element-e7fc455::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
z-index: -3;
opacity: 0.5; /* Sutil */
/* Mezcla de gases orgánicos */
background-image:
radial-gradient(ellipse at 30% 40%, rgba(0, 89, 255, 0.4), transparent 50%), /* Azul */
radial-gradient(ellipse at 70% 60%, rgba(138, 43, 226, 0.3), transparent 50%), /* Púrpura */
radial-gradient(ellipse at 50% 20%, rgba(0, 239, 255, 0.3), transparent 40%); /* Cian */
filter: blur(80px); /* Desenfoque extremo para que parezca gas real */
animation: nebulaDriftAlive 60s ease-in-out infinite alternate;
}
@keyframes nebulaDriftAlive {
0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
50% { transform: translate(-50px, -30px) scale(1.1); opacity: 0.6; }
100% { transform: translate(20px, -60px) scale(1); opacity: 0.5; }
}
/* --- CAPA 2: CAMPO ESTELAR VARIADO Y VIVO (NO PUNTOS IGUALES) --- */
.elementor-element-e7fc455::after {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: -2;
/* CREACIÓN MANUAL DE ESTRELLAS VARIADAS:
Usamos múltiples gradientes radiales con diferentes tamaños (px),
diferentes colores (blanco, azulado) y diferentes posiciones (%)
para evitar un patrón de cuadrícula repetitivo. */
background-image:
/* Estrellas grandes y brillantes (Cercanas) */
radial-gradient(2px 2px at 20% 30%, #ffffff, transparent),
radial-gradient(2.5px 2.5px at 80% 15%, #00efff, transparent),
radial-gradient(2px 2px at 50% 80%, #ffffff, transparent),
/* Estrellas medianas (Relleno) */
radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,255,255,0.8), transparent),
radial-gradient(1.5px 1.5px at 90% 40%, rgba(0,239,255,0.7), transparent),
radial-gradient(1.5px 1.5px at 35% 25%, rgba(255,255,255,0.8), transparent),
/* Polvo estelar fino y distante (Fondo) */
radial-gradient(1px 1px at 5% 5%, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.4), transparent),
radial-gradient(0.8px 0.8px at 40% 50%, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,0.5), transparent);
background-size: 100% 100%; /* Asegura que no se repita el patrón */
/* Animación de centelleo suave */
animation: starsTwinkleAlive 8s ease-in-out infinite alternate;
}
@keyframes starsTwinkleAlive {
0% { opacity: 0.7; transform: scale(1); }
100% { opacity: 1; transform: scale(1.02); }
}
/* --- CAPA 3: FLUJO CÓSMICO / METEORITOS (MOVIMIENTO) --- */
.elementor-element-e7fc455 #twae-wrapper-8ab5889::after {
content: '';
position: absolute;
top: -150%; left: -50%; width: 200%; height: 300%;
z-index: -1;
opacity: 0.6;
/* Estelas de luz de diferentes longitudes y opacidades */
background-image:
linear-gradient(to bottom, transparent, rgba(0, 239, 255, 0.9), transparent), /* Brillante */
linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4), transparent), /* Tenue */
linear-gradient(to bottom, transparent, rgba(0, 150, 255, 0.7), transparent); /* Azul medio */
background-size: 2px 250px, 1px 150px, 3px 350px;
background-repeat: repeat-y;
background-position: 15% 0, 50% -100px, 85% -50px;
transform: rotate(-25deg); /* Inclinación */
animation: cosmicFlowAlive 5s linear infinite;
filter: drop-shadow(0 0 8px #00efff);
}
@keyframes cosmicFlowAlive {
0% { background-position: 15% -500px, 50% -600px, 85% -700px; }
100% { background-position: 15% 800px, 50% 700px, 85% 600px; }
}
/* ==========================================================================
ESTILOS DEL CONTENIDO (TIMELINE) - PARA QUE RESALTE
========================================================================== */
/* LÍNEA LÁSER CENTRAL */
.elementor-element-e7fc455 #twae-wrapper-8ab5889::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
width: 3px;
background: linear-gradient(to bottom, transparent, #00efff 20%, #ffffff 50%, #00efff 80%, transparent);
background-size: 100% 200%;
animation: laserFlow 2s linear infinite;
box-shadow: 0 0 30px #00efff;
z-index: 2;
}
@keyframes laserFlow { to { background-position: 0% -200%; } }
/* TARJETAS (Hologramas Oscuros) */
.elementor-element-e7fc455 .twae-content {
background: rgba(0, 8, 16, 0.8) !important; /* Vidrio oscuro */
backdrop-filter: blur(25px);
border: 1px solid rgba(0, 239, 255, 0.3) !important;
border-radius: 20px; padding: 40px;
box-shadow: 0 30px 70px #000;
z-index: 3;
position: relative;
transition: all 0.3s ease;
}
.elementor-element-e7fc455 .twae-story:hover .twae-content {
background: rgba(0, 239, 255, 0.12) !important;
border-color: #fff !important;
transform: translateY(-10px) scale(1.02);
box-shadow: 0 50px 100px #000, 0 0 40px rgba(0, 239, 255, 0.4);
}
/* TEXTOS Y DETALLES */
.elementor-element-e7fc455 h2,
.elementor-element-e7fc455 .sec-title {
color: #ffffff; text-shadow: 0 0 25px rgba(0, 239, 255, 0.9);
position: relative; z-index: 3; font-weight: 900;
}
.elementor-element-e7fc455 .twae-year-label {
background: #000 !important; border: 2px solid #00efff !important;
color: #00efff !important; box-shadow: 0 0 20px #00efff;
border-radius: 20px; padding: 5px 15px; font-weight: bold;
}
.elementor-element-e7fc455 .twae-icon {
background: #000 !important; border: 2px solid #fff !important;
color: #00efff !important; box-shadow: 0 0 25px #00efff; z-index: 3;
}
/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
.elementor-element-e7fc455 { padding: 80px 10px; }
.elementor-element-e7fc455 .twae-content {
margin-left: 45px !important; width: calc(100% - 55px) !important; padding: 25px !important;
}
.elementor-element-e7fc455 .twae-icon { left: 10px !important; }
}/* End custom CSS */
/* Start custom CSS for tj-marquee, class: .elementor-element-8d3387b *//*
* 1. Asegura que el contenedor del slider y el slider mismo puedan
* desbordar sin ser cortados si es necesario (aunque el widget de marquee
* maneja el movimiento, a veces el contenedor lo limita).
*/
.elementor-element-8d3387b .tj-marquee-section {
width: 100vw; /* Asegura que el ancho sea el total del viewport */
max-width: none; /* Elimina cualquier limitación de ancho */
overflow: visible !important; /* Muestra todo el contenido, incluso si desborda */
margin-left: calc(50% - 50vw); /* Truco para centrar y abarcar todo el ancho de la pantalla */
}
/* 2. Opcional: Si el texto está siendo cortado por un 'overflow: hidden' más arriba,
elimina ese 'overflow' del contenedor interno. */
.elementor-element-8d3387b .elementor-widget-container {
overflow: visible !important;
}
/* 3. Asegura que el slider tenga un ancho suficiente para que se vea continuo
(aunque esto se maneja más por el JS del Marquee/Swiper). */
#marquee-8d3387b {
width: 100%;
}/* End custom CSS */
/* Start custom CSS for icon, class: .elementor-element-7fd6f6d *//* === CONTENEDOR PRINCIPAL (opcional, mejora el alineado) === */
.elementor-element-528b4d5 {
display: flex;
align-items: center;
gap: 15px;
}
/* === ICONO CORPORATIVO BRILLANTE === */
.elementor-element-0991fe0 .elementor-icon {
color: #ffffff;
font-size: 65px;
text-shadow:
0 0 6px rgba(255, 255, 255, 0.8),
0 0 14px rgba(147, 207, 255, 0.6),
0 0 25px rgba(33, 150, 243, 0.4);
transition: all 0.4s ease;
}
/* Efecto sutil en hover */
.elementor-element-0991fe0 .elementor-icon:hover {
transform: scale(1.07);
text-shadow:
0 0 10px rgba(255, 255, 255, 0.9),
0 0 20px rgba(147, 207, 255, 0.7),
0 0 40px rgba(33, 150, 243, 0.5);
}
/* === TÍTULO CORPORATIVO IMPACTANTE === */
.elementor-element-6b9e8cf .elementor-heading-title {
font-size: 50px;
font-weight: 800;
color: #ffffff;
text-transform: uppercase;
text-align: left;
letter-spacing: 1.5px;
line-height: 1.2;
text-shadow:
0 0 6px rgba(255, 255, 255, 0.8),
0 0 15px rgba(147, 207, 255, 0.6),
0 0 25px rgba(33, 150, 243, 0.4);
transition: all 0.4s ease;
}
/* Suave realce al pasar el mouse */
.elementor-element-6b9e8cf .elementor-heading-title:hover {
transform: scale(1.03);
text-shadow:
0 0 10px rgba(255, 255, 255, 0.9),
0 0 20px rgba(147, 207, 255, 0.7),
0 0 35px rgba(33, 150, 243, 0.5);
}
/* === RESPONSIVE DESIGN === */
/* 💻 Laptop / Escritorio estándar */
@media (min-width: 1025px) {
.elementor-element-6b9e8cf .elementor-heading-title { font-size: 50px; }
.elementor-element-0991fe0 .elementor-icon { font-size: 65px; }
}
/* 📱 Tablet horizontal / mediana */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-element-6b9e8cf .elementor-heading-title { font-size: 38px; }
.elementor-element-0991fe0 .elementor-icon { font-size: 55px; }
}
/* 📱 Tablet vertical */
@media (min-width: 480px) and (max-width: 767px) {
.elementor-element-6b9e8cf .elementor-heading-title { font-size: 30px; }
.elementor-element-0991fe0 .elementor-icon { font-size: 45px; }
}
/* 📱 Celulares pequeños */
@media (max-width: 479px) {
.elementor-element-6b9e8cf .elementor-heading-title { font-size: 26px; }
.elementor-element-0991fe0 .elementor-icon { font-size: 38px; }
}
/* === PREVENCIÓN DE EFECTOS INDESEADOS (como fondo blanco) === */
.elementor-element-528b4d5:hover,
.elementor-element-6b9e8cf:hover,
.elementor-element-0991fe0:hover {
background: transparent !important;
box-shadow: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-85441e0 *//* Estilo para el Ícono dentro del Contenedor */
.elementor-element-7fd6f6d .elementor-icon {
color: #00bfff;
text-shadow:
0 0 7px #00bfff,
0 0 15px #00bfff;
}
/* Estilo para el Título (Heading) dentro del Contenedor */
.elementor-element-e48ee43 .elementor-heading-title {
color: #ffffff;
text-shadow:
0 0 5px rgba(0, 191, 255, 0.5),
0 0 15px rgba(0, 191, 255, 0.7),
0 0 30px rgba(0, 191, 255, 0.9);
letter-spacing: 1px;
font-weight: 700;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-085c404 *//* === CONTENEDOR GENERAL === */
.elementor-3383 .elementor-element.elementor-element-085c404 {
display: flex;
align-items: center; /* centra verticalmente imagen y texto */
justify-content: center;
gap: 60px; /* espacio horizontal entre imagen y sedes */
flex-wrap: wrap; /* se adapta en móviles */
background: linear-gradient(135deg, #0a1f3b, #1b3b6f);
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
color: #fff;
transition: all 0.5s ease;
}
/* === IMAGEN DEL MAPA === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img {
width: 100%;
max-width: 450px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,191,255,0.25);
transition: all 0.5s ease;
}
/* efecto “vivo” al pasar el mouse sobre el mapa */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img:hover {
transform: scale(1.04) rotate(1deg);
box-shadow: 0 12px 30px rgba(0,191,255,0.45);
filter: brightness(1.1);
}
/* === BLOQUE DE SEDES === */
.elementor-3383 .elementor-element.elementor-element-085c404 .e-con-inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
max-width: 520px;
}
/* === TÍTULOS DE SEDES (icon-list) === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-text {
color: #00bfff;
font-weight: 700;
font-size: 17px;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.4s ease;
position: relative;
}
/* efecto de iluminación y movimiento */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover .elementor-icon-list-text {
color: #ffcc00;
transform: translateX(10px);
text-shadow: 0 0 10px rgba(255,204,0,0.8);
}
/* íconos de ubicación */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-icon i {
color: #00bfff;
font-size: 18px;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover i {
color: #ffcc00;
transform: scale(1.2) rotate(10deg);
filter: drop-shadow(0 0 5px rgba(255,204,0,0.7));
}
/* === DIRECCIONES Y CORREOS === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor p {
margin: 5px 0 10px;
color: #dfeaff;
line-height: 1.6;
font-size: 15px;
transition: color 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor a {
color: #00bfff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor a:hover {
color: #ffcc00;
text-decoration: underline;
}
/* === EFECTO DE BLOQUE AL PASAR EL MOUSE POR CADA SEDE === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item {
background: rgba(255,255,255,0.05);
padding: 8px 12px;
border-radius: 10px;
transition: all 0.4s ease;
cursor: pointer;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover {
background: rgba(0,191,255,0.15);
transform: scale(1.02);
box-shadow: 0 0 15px rgba(0,191,255,0.2);
}
/* === RESPONSIVE (móvil) === */
@media (max-width: 768px) {
.elementor-3383 .elementor-element.elementor-element-085c404 {
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img {
max-width: 100%;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-text {
font-size: 16px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59bffd1 *//* --- 1. CONTENEDOR PRINCIPAL (CAJA AZUL) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 {
/* CLAVE: Altura automática y SIN límites */
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important; /* Cambiado a visible para evitar cortes */
/* Diseño Visual */
background-color: #06112a; /* Azul Navy */
border-radius: 16px;
padding: 30px 25px !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
/* Aseguramos que los elementos se apilen bien */
display: flex;
flex-direction: column;
}
/* --- 2. TÍTULOS DE LAS SEDES (BARRAS) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-icon-list {
background-color: #16264c;
border-radius: 8px;
padding: 8px 15px;
/* Espaciado compacto entre bloques */
margin-bottom: 2px !important;
margin-top: 15px !important;
/* Asegurar que la barra no se rompa */
width: 100%;
}
/* El primer título no lleva margen arriba */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-icon-list:first-child {
margin-top: 0 !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-item {
padding: 0;
display: flex;
align-items: center;
}
/* Texto del Título */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-text {
color: #ffffff;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-left: 10px;
}
/* Icono de Ubicación (Mapa) */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-icon i {
color: #00bfff;
font-size: 15px;
}
/* --- 3. DIRECCIÓN (TEXTO) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor p {
color: #dbeafe; /* Blanco suave */
font-size: 13px;
line-height: 1.4;
margin: 0;
padding-left: 5px;
}
/* --- 4. CORREO ELECTRÓNICO (FORZADO ABAJO) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"] {
/* CLAVE: display: flex fuerza el salto de línea y alineación */
display: flex !important;
align-items: center;
width: fit-content;
margin-top: 5px !important; /* Espacio superior para separarlo de la dirección */
color: #00bfff !important; /* Cian */
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
/* ICONO DE SOBRE AUTOMÁTICO */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]::before {
content: "\f0e0"; /* Icono de sobre */
font-family: "Font Awesome 5 Free"; /* Fuente de iconos Elementor */
font-weight: 900;
margin-right: 8px;
color: #00bfff;
font-size: 14px;
}
/* Efecto Hover */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]:hover {
color: #ffffff !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]:hover::before {
color: #ffffff;
}
/* Limpieza de saltos de línea extraños */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor br {
display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-38257de *//* Animación de flotación suave */
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, -15px); }
100% { transform: translate(0, 0px); }
}
/* Contenedor principal - Efecto flotante */
.elementor-3383 .elementor-element.elementor-element-38257de {
animation: floating 4s ease-in-out infinite;
padding: 20px;
}
/* Estilo para "Oficina Central" (Icon List) */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-item {
background: linear-gradient(90deg, rgba(0, 217, 255, 0.15) 0%, transparent 100%);
border-left: 4px solid #00d9ff;
padding: 10px 15px;
margin-bottom: 25px;
border-radius: 0 10px 10px 0;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-icon i {
color: #00d9ff;
font-size: 22px;
filter: drop-shadow(0 0 8px #00d9ff);
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-text {
color: #00d9ff;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(0, 217, 255, 0.8);
}
/* Estilo para el contenido HTML (Dirección) */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html p {
font-size: 26px !important; /* Más grande */
line-height: 1.8 !important;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(0, 191, 255, 0.6) !important;
}
/* Estilo para los Emojis */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html img.emoji {
width: 1.4em !important;
margin: 0 0.2em 0 0 !important;
vertical-align: -0.2em !important;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
/* Estilo y Hover del Email */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html a {
display: inline-block;
font-size: 24px !important;
margin-top: 10px;
padding: 5px 10px;
border-radius: 8px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(0, 217, 255, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html a:hover {
color: #ffffff !important;
background: rgba(0, 217, 255, 0.2);
border-color: #00d9ff;
transform: scale(1.05) translateX(10px);
box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0b0021f *//* 🌐 CONTENEDOR PRINCIPAL DEL MAPA */
.elementor-3383 .elementor-element.elementor-element-0b0021f {
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #0a192f 0%, #00111f 100%);
padding: 28px;
border-radius: 22px;
box-shadow: 0 0 25px rgba(0,191,255,0.3), inset 0 0 15px rgba(0,191,255,0.15);
overflow: hidden;
position: relative;
transition: all 0.5s ease;
animation: glowPulse 4s infinite ease-in-out;
}
/* 💫 EFECTO DE BRILLO ANIMADO */
@keyframes glowPulse {
0%, 100% {
box-shadow: 0 0 25px rgba(0,191,255,0.3), inset 0 0 15px rgba(0,191,255,0.15);
}
50% {
box-shadow: 0 0 40px rgba(0,191,255,0.5), inset 0 0 25px rgba(0,191,255,0.25);
}
}
/* 🌟 EFECTO HOVER */
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover {
transform: scale(1.03);
box-shadow: 0 0 50px rgba(0,191,255,0.6), inset 0 0 20px rgba(0,191,255,0.3);
background: radial-gradient(circle at center, #0d223d 0%, #000c1a 100%);
transition: all 0.4s ease-in-out;
}
/* 🗺️ MAPA INTERNO (iframe o canvas) */
.elementor-3383 .elementor-element.elementor-element-0b0021f iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f canvas {
width: 100% !important;
height: 450px !important;
border-radius: 18px;
border: 2px solid rgba(0,191,255,0.4);
box-shadow: 0 0 25px rgba(0,191,255,0.2);
overflow: hidden;
transition: all 0.4s ease;
}
/* ✨ EFECTO HOVER EN EL MAPA */
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover canvas {
border-color: #00e5ff;
box-shadow: 0 0 35px rgba(0,229,255,0.4), inset 0 0 15px rgba(0,191,255,0.25);
filter: brightness(1.1);
}
/* 📱 RESPONSIVE (MÓVIL) */
@media (max-width: 768px) {
.elementor-3383 .elementor-element.elementor-element-0b0021f {
padding: 15px;
border-radius: 16px;
}
.elementor-3383 .elementor-element.elementor-element-0b0021f iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f canvas {
height: 380px !important;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-085c404 *//* === CONTENEDOR GENERAL === */
.elementor-3383 .elementor-element.elementor-element-085c404 {
display: flex;
align-items: center; /* centra verticalmente imagen y texto */
justify-content: center;
gap: 60px; /* espacio horizontal entre imagen y sedes */
flex-wrap: wrap; /* se adapta en móviles */
background: linear-gradient(135deg, #0a1f3b, #1b3b6f);
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
color: #fff;
transition: all 0.5s ease;
}
/* === IMAGEN DEL MAPA === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img {
width: 100%;
max-width: 450px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,191,255,0.25);
transition: all 0.5s ease;
}
/* efecto “vivo” al pasar el mouse sobre el mapa */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img:hover {
transform: scale(1.04) rotate(1deg);
box-shadow: 0 12px 30px rgba(0,191,255,0.45);
filter: brightness(1.1);
}
/* === BLOQUE DE SEDES === */
.elementor-3383 .elementor-element.elementor-element-085c404 .e-con-inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
max-width: 520px;
}
/* === TÍTULOS DE SEDES (icon-list) === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-text {
color: #00bfff;
font-weight: 700;
font-size: 17px;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.4s ease;
position: relative;
}
/* efecto de iluminación y movimiento */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover .elementor-icon-list-text {
color: #ffcc00;
transform: translateX(10px);
text-shadow: 0 0 10px rgba(255,204,0,0.8);
}
/* íconos de ubicación */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-icon i {
color: #00bfff;
font-size: 18px;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover i {
color: #ffcc00;
transform: scale(1.2) rotate(10deg);
filter: drop-shadow(0 0 5px rgba(255,204,0,0.7));
}
/* === DIRECCIONES Y CORREOS === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor p {
margin: 5px 0 10px;
color: #dfeaff;
line-height: 1.6;
font-size: 15px;
transition: color 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor a {
color: #00bfff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor a:hover {
color: #ffcc00;
text-decoration: underline;
}
/* === EFECTO DE BLOQUE AL PASAR EL MOUSE POR CADA SEDE === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item {
background: rgba(255,255,255,0.05);
padding: 8px 12px;
border-radius: 10px;
transition: all 0.4s ease;
cursor: pointer;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover {
background: rgba(0,191,255,0.15);
transform: scale(1.02);
box-shadow: 0 0 15px rgba(0,191,255,0.2);
}
/* === RESPONSIVE (móvil) === */
@media (max-width: 768px) {
.elementor-3383 .elementor-element.elementor-element-085c404 {
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img {
max-width: 100%;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-text {
font-size: 16px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59bffd1 *//* --- 1. CONTENEDOR PRINCIPAL (CAJA AZUL) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 {
/* CLAVE: Altura automática y SIN límites */
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important; /* Cambiado a visible para evitar cortes */
/* Diseño Visual */
background-color: #06112a; /* Azul Navy */
border-radius: 16px;
padding: 30px 25px !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
/* Aseguramos que los elementos se apilen bien */
display: flex;
flex-direction: column;
}
/* --- 2. TÍTULOS DE LAS SEDES (BARRAS) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-icon-list {
background-color: #16264c;
border-radius: 8px;
padding: 8px 15px;
/* Espaciado compacto entre bloques */
margin-bottom: 2px !important;
margin-top: 15px !important;
/* Asegurar que la barra no se rompa */
width: 100%;
}
/* El primer título no lleva margen arriba */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-icon-list:first-child {
margin-top: 0 !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-item {
padding: 0;
display: flex;
align-items: center;
}
/* Texto del Título */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-text {
color: #ffffff;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-left: 10px;
}
/* Icono de Ubicación (Mapa) */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-icon i {
color: #00bfff;
font-size: 15px;
}
/* --- 3. DIRECCIÓN (TEXTO) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor p {
color: #dbeafe; /* Blanco suave */
font-size: 13px;
line-height: 1.4;
margin: 0;
padding-left: 5px;
}
/* --- 4. CORREO ELECTRÓNICO (FORZADO ABAJO) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"] {
/* CLAVE: display: flex fuerza el salto de línea y alineación */
display: flex !important;
align-items: center;
width: fit-content;
margin-top: 5px !important; /* Espacio superior para separarlo de la dirección */
color: #00bfff !important; /* Cian */
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
/* ICONO DE SOBRE AUTOMÁTICO */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]::before {
content: "\f0e0"; /* Icono de sobre */
font-family: "Font Awesome 5 Free"; /* Fuente de iconos Elementor */
font-weight: 900;
margin-right: 8px;
color: #00bfff;
font-size: 14px;
}
/* Efecto Hover */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]:hover {
color: #ffffff !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]:hover::before {
color: #ffffff;
}
/* Limpieza de saltos de línea extraños */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor br {
display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-38257de *//* Animación de flotación suave */
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, -15px); }
100% { transform: translate(0, 0px); }
}
/* Contenedor principal - Efecto flotante */
.elementor-3383 .elementor-element.elementor-element-38257de {
animation: floating 4s ease-in-out infinite;
padding: 20px;
}
/* Estilo para "Oficina Central" (Icon List) */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-item {
background: linear-gradient(90deg, rgba(0, 217, 255, 0.15) 0%, transparent 100%);
border-left: 4px solid #00d9ff;
padding: 10px 15px;
margin-bottom: 25px;
border-radius: 0 10px 10px 0;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-icon i {
color: #00d9ff;
font-size: 22px;
filter: drop-shadow(0 0 8px #00d9ff);
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-text {
color: #00d9ff;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(0, 217, 255, 0.8);
}
/* Estilo para el contenido HTML (Dirección) */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html p {
font-size: 26px !important; /* Más grande */
line-height: 1.8 !important;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(0, 191, 255, 0.6) !important;
}
/* Estilo para los Emojis */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html img.emoji {
width: 1.4em !important;
margin: 0 0.2em 0 0 !important;
vertical-align: -0.2em !important;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
/* Estilo y Hover del Email */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html a {
display: inline-block;
font-size: 24px !important;
margin-top: 10px;
padding: 5px 10px;
border-radius: 8px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(0, 217, 255, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html a:hover {
color: #ffffff !important;
background: rgba(0, 217, 255, 0.2);
border-color: #00d9ff;
transform: scale(1.05) translateX(10px);
box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0b0021f *//* 🌐 CONTENEDOR PRINCIPAL DEL MAPA */
.elementor-3383 .elementor-element.elementor-element-0b0021f {
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #0a192f 0%, #00111f 100%);
padding: 28px;
border-radius: 22px;
box-shadow: 0 0 25px rgba(0,191,255,0.3), inset 0 0 15px rgba(0,191,255,0.15);
overflow: hidden;
position: relative;
transition: all 0.5s ease;
animation: glowPulse 4s infinite ease-in-out;
}
/* 💫 EFECTO DE BRILLO ANIMADO */
@keyframes glowPulse {
0%, 100% {
box-shadow: 0 0 25px rgba(0,191,255,0.3), inset 0 0 15px rgba(0,191,255,0.15);
}
50% {
box-shadow: 0 0 40px rgba(0,191,255,0.5), inset 0 0 25px rgba(0,191,255,0.25);
}
}
/* 🌟 EFECTO HOVER */
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover {
transform: scale(1.03);
box-shadow: 0 0 50px rgba(0,191,255,0.6), inset 0 0 20px rgba(0,191,255,0.3);
background: radial-gradient(circle at center, #0d223d 0%, #000c1a 100%);
transition: all 0.4s ease-in-out;
}
/* 🗺️ MAPA INTERNO (iframe o canvas) */
.elementor-3383 .elementor-element.elementor-element-0b0021f iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f canvas {
width: 100% !important;
height: 450px !important;
border-radius: 18px;
border: 2px solid rgba(0,191,255,0.4);
box-shadow: 0 0 25px rgba(0,191,255,0.2);
overflow: hidden;
transition: all 0.4s ease;
}
/* ✨ EFECTO HOVER EN EL MAPA */
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover canvas {
border-color: #00e5ff;
box-shadow: 0 0 35px rgba(0,229,255,0.4), inset 0 0 15px rgba(0,191,255,0.25);
filter: brightness(1.1);
}
/* 📱 RESPONSIVE (MÓVIL) */
@media (max-width: 768px) {
.elementor-3383 .elementor-element.elementor-element-0b0021f {
padding: 15px;
border-radius: 16px;
}
.elementor-3383 .elementor-element.elementor-element-0b0021f iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f canvas {
height: 380px !important;
}
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-085c404 *//* === CONTENEDOR GENERAL === */
.elementor-3383 .elementor-element.elementor-element-085c404 {
display: flex;
align-items: center; /* centra verticalmente imagen y texto */
justify-content: center;
gap: 60px; /* espacio horizontal entre imagen y sedes */
flex-wrap: wrap; /* se adapta en móviles */
background: linear-gradient(135deg, #0a1f3b, #1b3b6f);
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
color: #fff;
transition: all 0.5s ease;
}
/* === IMAGEN DEL MAPA === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img {
width: 100%;
max-width: 450px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,191,255,0.25);
transition: all 0.5s ease;
}
/* efecto “vivo” al pasar el mouse sobre el mapa */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img:hover {
transform: scale(1.04) rotate(1deg);
box-shadow: 0 12px 30px rgba(0,191,255,0.45);
filter: brightness(1.1);
}
/* === BLOQUE DE SEDES === */
.elementor-3383 .elementor-element.elementor-element-085c404 .e-con-inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
max-width: 520px;
}
/* === TÍTULOS DE SEDES (icon-list) === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-text {
color: #00bfff;
font-weight: 700;
font-size: 17px;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.4s ease;
position: relative;
}
/* efecto de iluminación y movimiento */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover .elementor-icon-list-text {
color: #ffcc00;
transform: translateX(10px);
text-shadow: 0 0 10px rgba(255,204,0,0.8);
}
/* íconos de ubicación */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-icon i {
color: #00bfff;
font-size: 18px;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover i {
color: #ffcc00;
transform: scale(1.2) rotate(10deg);
filter: drop-shadow(0 0 5px rgba(255,204,0,0.7));
}
/* === DIRECCIONES Y CORREOS === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor p {
margin: 5px 0 10px;
color: #dfeaff;
line-height: 1.6;
font-size: 15px;
transition: color 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor a {
color: #00bfff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-text-editor a:hover {
color: #ffcc00;
text-decoration: underline;
}
/* === EFECTO DE BLOQUE AL PASAR EL MOUSE POR CADA SEDE === */
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item {
background: rgba(255,255,255,0.05);
padding: 8px 12px;
border-radius: 10px;
transition: all 0.4s ease;
cursor: pointer;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-item:hover {
background: rgba(0,191,255,0.15);
transform: scale(1.02);
box-shadow: 0 0 15px rgba(0,191,255,0.2);
}
/* === RESPONSIVE (móvil) === */
@media (max-width: 768px) {
.elementor-3383 .elementor-element.elementor-element-085c404 {
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-widget-image img {
max-width: 100%;
}
.elementor-3383 .elementor-element.elementor-element-085c404 .elementor-icon-list-text {
font-size: 16px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59bffd1 *//* --- 1. CONTENEDOR PRINCIPAL (CAJA AZUL) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 {
/* CLAVE: Altura automática y SIN límites */
height: auto !important;
min-height: auto !important;
max-height: none !important;
overflow: visible !important; /* Cambiado a visible para evitar cortes */
/* Diseño Visual */
background-color: #06112a; /* Azul Navy */
border-radius: 16px;
padding: 30px 25px !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
/* Aseguramos que los elementos se apilen bien */
display: flex;
flex-direction: column;
}
/* --- 2. TÍTULOS DE LAS SEDES (BARRAS) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-icon-list {
background-color: #16264c;
border-radius: 8px;
padding: 8px 15px;
/* Espaciado compacto entre bloques */
margin-bottom: 2px !important;
margin-top: 15px !important;
/* Asegurar que la barra no se rompa */
width: 100%;
}
/* El primer título no lleva margen arriba */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-icon-list:first-child {
margin-top: 0 !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-item {
padding: 0;
display: flex;
align-items: center;
}
/* Texto del Título */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-text {
color: #ffffff;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-left: 10px;
}
/* Icono de Ubicación (Mapa) */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-icon-list-icon i {
color: #00bfff;
font-size: 15px;
}
/* --- 3. DIRECCIÓN (TEXTO) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor p {
color: #dbeafe; /* Blanco suave */
font-size: 13px;
line-height: 1.4;
margin: 0;
padding-left: 5px;
}
/* --- 4. CORREO ELECTRÓNICO (FORZADO ABAJO) --- */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"] {
/* CLAVE: display: flex fuerza el salto de línea y alineación */
display: flex !important;
align-items: center;
width: fit-content;
margin-top: 5px !important; /* Espacio superior para separarlo de la dirección */
color: #00bfff !important; /* Cian */
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
/* ICONO DE SOBRE AUTOMÁTICO */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]::before {
content: "\f0e0"; /* Icono de sobre */
font-family: "Font Awesome 5 Free"; /* Fuente de iconos Elementor */
font-weight: 900;
margin-right: 8px;
color: #00bfff;
font-size: 14px;
}
/* Efecto Hover */
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]:hover {
color: #ffffff !important;
}
.elementor-3383 .elementor-element.elementor-element-59bffd1 a[href^="mailto"]:hover::before {
color: #ffffff;
}
/* Limpieza de saltos de línea extraños */
.elementor-3383 .elementor-element.elementor-element-59bffd1 .elementor-widget-text-editor br {
display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-38257de *//* Animación de flotación suave */
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, -15px); }
100% { transform: translate(0, 0px); }
}
/* Contenedor principal - Efecto flotante */
.elementor-3383 .elementor-element.elementor-element-38257de {
animation: floating 4s ease-in-out infinite;
padding: 20px;
}
/* Estilo para "Oficina Central" (Icon List) */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-item {
background: linear-gradient(90deg, rgba(0, 217, 255, 0.15) 0%, transparent 100%);
border-left: 4px solid #00d9ff;
padding: 10px 15px;
margin-bottom: 25px;
border-radius: 0 10px 10px 0;
transition: all 0.3s ease;
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-icon i {
color: #00d9ff;
font-size: 22px;
filter: drop-shadow(0 0 8px #00d9ff);
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-icon-list-text {
color: #00d9ff;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(0, 217, 255, 0.8);
}
/* Estilo para el contenido HTML (Dirección) */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html p {
font-size: 26px !important; /* Más grande */
line-height: 1.8 !important;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(0, 191, 255, 0.6) !important;
}
/* Estilo para los Emojis */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html img.emoji {
width: 1.4em !important;
margin: 0 0.2em 0 0 !important;
vertical-align: -0.2em !important;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
/* Estilo y Hover del Email */
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html a {
display: inline-block;
font-size: 24px !important;
margin-top: 10px;
padding: 5px 10px;
border-radius: 8px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(0, 217, 255, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.elementor-3383 .elementor-element.elementor-element-38257de .elementor-widget-html a:hover {
color: #ffffff !important;
background: rgba(0, 217, 255, 0.2);
border-color: #00d9ff;
transform: scale(1.05) translateX(10px);
box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0b0021f *//* 🌐 CONTENEDOR PRINCIPAL DEL MAPA */
.elementor-3383 .elementor-element.elementor-element-0b0021f {
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #0a192f 0%, #00111f 100%);
padding: 28px;
border-radius: 22px;
box-shadow: 0 0 25px rgba(0,191,255,0.3), inset 0 0 15px rgba(0,191,255,0.15);
overflow: hidden;
position: relative;
transition: all 0.5s ease;
animation: glowPulse 4s infinite ease-in-out;
}
/* 💫 EFECTO DE BRILLO ANIMADO */
@keyframes glowPulse {
0%, 100% {
box-shadow: 0 0 25px rgba(0,191,255,0.3), inset 0 0 15px rgba(0,191,255,0.15);
}
50% {
box-shadow: 0 0 40px rgba(0,191,255,0.5), inset 0 0 25px rgba(0,191,255,0.25);
}
}
/* 🌟 EFECTO HOVER */
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover {
transform: scale(1.03);
box-shadow: 0 0 50px rgba(0,191,255,0.6), inset 0 0 20px rgba(0,191,255,0.3);
background: radial-gradient(circle at center, #0d223d 0%, #000c1a 100%);
transition: all 0.4s ease-in-out;
}
/* 🗺️ MAPA INTERNO (iframe o canvas) */
.elementor-3383 .elementor-element.elementor-element-0b0021f iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f canvas {
width: 100% !important;
height: 450px !important;
border-radius: 18px;
border: 2px solid rgba(0,191,255,0.4);
box-shadow: 0 0 25px rgba(0,191,255,0.2);
overflow: hidden;
transition: all 0.4s ease;
}
/* ✨ EFECTO HOVER EN EL MAPA */
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f:hover canvas {
border-color: #00e5ff;
box-shadow: 0 0 35px rgba(0,229,255,0.4), inset 0 0 15px rgba(0,191,255,0.25);
filter: brightness(1.1);
}
/* 📱 RESPONSIVE (MÓVIL) */
@media (max-width: 768px) {
.elementor-3383 .elementor-element.elementor-element-0b0021f {
padding: 15px;
border-radius: 16px;
}
.elementor-3383 .elementor-element.elementor-element-0b0021f iframe,
.elementor-3383 .elementor-element.elementor-element-0b0021f canvas {
height: 380px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c662d07 *//* === FONDO ANIMADO COMPLETO - TODO EN CSS === */
/* Contenedor principal con posicionamiento relativo */
#e-n-tab-content-1413356741 {
position: relative;
background: linear-gradient(135deg, #0a1f3b 0%, #1b3b6f 100%) !important;
border-radius: 20px !important;
overflow: hidden !important;
padding: 30px !important;
}
/* Brújula gigante de fondo animada */
#e-n-tab-content-1413356741::before {
content: '🧭';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 300px;
opacity: 0.03;
animation: compassRotate 30s linear infinite;
z-index: 0;
}
@keyframes compassRotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Olas animadas - Capa 1 */
#e-n-tab-content-1413356741 .e-con-inner::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 60px;
background: url('data:image/svg+xml;utf8,') repeat-x;
animation: waveMove 15s linear infinite;
z-index: 1;
}
/* Olas animadas - Capa 2 */
#e-n-tab-content-1413356741 .e-con-inner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 60px;
background: url('data:image/svg+xml;utf8,') repeat-x;
animation: waveMove 10s linear infinite;
z-index: 1;
}
/* Olas animadas - Capa 3 usando otro elemento */
#e-n-tab-content-1413356741 .e-con::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 60px;
background: url('data:image/svg+xml;utf8,') repeat-x;
animation: waveMove 5s linear infinite;
z-index: 1;
}
@keyframes waveMove {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Efecto de profundidad oceánica */
#e-n-tab-content-1413356741 .e-con:nth-child(1)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top,
rgba(8, 25, 50, 0.8) 0%,
rgba(10, 31, 59, 0.4) 30%,
transparent 100%);
z-index: 0;
}
/* === PECES SALTANDO - Usando pseudo-elementos de diferentes contenedores === */
/* Pez 1 - Usando el primer widget de imagen */
#e-n-tab-content-1413356741 .elementor-widget-image::before {
content: '🐟';
position: absolute;
bottom: 80px;
left: 10%;
font-size: 24px;
z-index: 2;
animation: fishJump 8s ease-in-out infinite;
}
/* Pez 2 - Usando el primer widget de texto */
#e-n-tab-content-1413356741 .elementor-widget-text-editor:first-child::before {
content: '🐠';
position: absolute;
bottom: 60px;
left: 30%;
font-size: 24px;
z-index: 2;
animation: fishJump 8s ease-in-out infinite 2s;
}
/* Pez 3 - Usando el segundo widget de texto */
#e-n-tab-content-1413356741 .elementor-widget-text-editor:nth-child(2)::before {
content: '🐡';
position: absolute;
bottom: 70px;
left: 60%;
font-size: 24px;
z-index: 2;
animation: fishJump 8s ease-in-out infinite 4s;
}
/* Pez 4 - Usando el tercer widget de texto */
#e-n-tab-content-1413356741 .elementor-widget-text-editor:nth-child(3)::before {
content: '🦈';
position: absolute;
bottom: 90px;
left: 80%;
font-size: 24px;
z-index: 2;
animation: fishJump 8s ease-in-out infinite 6s;
}
@keyframes fishJump {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
50% {
transform: translateY(-40px) rotate(-10deg);
}
90% {
opacity: 1;
}
}
/* === BARCOS NAVEGANDO === */
/* Barco 1 - Usando el primer icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:first-child::before {
content: '⛵';
position: absolute;
bottom: 65px;
left: -50px;
font-size: 32px;
z-index: 2;
animation: boatSail 25s linear infinite;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}
/* Barco 2 - Usando el segundo icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(2)::before {
content: '🚤';
position: absolute;
bottom: 85px;
left: -50px;
font-size: 28px;
z-index: 2;
animation: boatSail 25s linear infinite 8s;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}
/* Barco 3 - Usando el tercer icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(3)::before {
content: '🛥️';
position: absolute;
bottom: 70px;
left: -50px;
font-size: 24px;
z-index: 2;
animation: boatSail 25s linear infinite 15s;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}
@keyframes boatSail {
0% {
left: -50px;
transform: rotate(5deg);
}
10% {
transform: rotate(-2deg);
}
20% {
transform: rotate(3deg);
}
30% {
transform: rotate(-1deg);
}
40% {
transform: rotate(2deg);
}
50% {
transform: rotate(0deg);
}
90% {
transform: rotate(-3deg);
}
100% {
left: 100%;
transform: rotate(5deg);
}
}
/* === PUNTOS GPS ANIMADOS === */
/* Punto GPS 1 - Usando el cuarto icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(4)::before {
content: '';
position: absolute;
top: 20%;
left: 15%;
width: 4px;
height: 4px;
background: rgba(0, 191, 255, 0.6);
border-radius: 50%;
animation: gpsBlink 3s infinite;
z-index: 0;
}
/* Punto GPS 2 - Usando el quinto icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(5)::before {
content: '';
position: absolute;
top: 30%;
left: 80%;
width: 4px;
height: 4px;
background: rgba(0, 191, 255, 0.6);
border-radius: 50%;
animation: gpsBlink 3s infinite 1s;
z-index: 0;
}
/* Punto GPS 3 - Usando el sexto icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(6)::before {
content: '';
position: absolute;
top: 70%;
left: 25%;
width: 4px;
height: 4px;
background: rgba(0, 191, 255, 0.6);
border-radius: 50%;
animation: gpsBlink 3s infinite 2s;
z-index: 0;
}
/* Punto GPS 4 - Usando el séptimo icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(7)::before {
content: '';
position: absolute;
top: 40%;
left: 60%;
width: 4px;
height: 4px;
background: rgba(0, 191, 255, 0.6);
border-radius: 50%;
animation: gpsBlink 3s infinite 0.5s;
z-index: 0;
}
/* Punto GPS 5 - Usando el octavo icon-list */
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(8)::before {
content: '';
position: absolute;
top: 60%;
left: 45%;
width: 4px;
height: 4px;
background: rgba(0, 191, 255, 0.6);
border-radius: 50%;
animation: gpsBlink 3s infinite 1.5s;
z-index: 0;
}
@keyframes gpsBlink {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.5); }
}
/* === BOTONES DE SEDES (Código anterior mantenido) === */
.e-n-tabs-heading {
display: flex !important;
gap: 20px !important;
margin-bottom: 40px !important;
position: relative !important;
z-index: 10 !important;
justify-content: center !important;
flex-wrap: wrap !important;
padding: 20px 0 !important;
}
.e-n-tab-title {
background: linear-gradient(135deg, #00bfff 0%, #0088cc 100%) !important;
border: none !important;
border-radius: 50px !important;
padding: 20px 40px !important;
color: white !important;
font-weight: 800 !important;
font-size: 16px !important;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
position: relative;
overflow: hidden;
box-shadow:
0 8px 25px rgba(0, 191, 255, 0.4),
0 4px 0 rgba(0, 123, 255, 0.6) !important;
min-width: 220px;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
.e-n-tab-title::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
transition: left 0.8s ease;
z-index: 1;
}
.e-n-tab-title:hover::before {
left: 100%;
}
.e-n-tab-title-text {
position: relative;
z-index: 2;
text-shadow:
0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(0, 191, 255, 0.4) !important;
color: #ffffff !important;
font-weight: 800 !important;
letter-spacing: 1.2px;
transition: all 0.3s ease !important;
}
.e-n-tab-title:hover {
transform: translateY(-5px) scale(1.05) !important;
box-shadow:
0 15px 35px rgba(0, 191, 255, 0.6),
0 6px 0 rgba(0, 100, 255, 0.8) !important;
background: linear-gradient(135deg, #00ccff 0%, #0099ff 100%) !important;
border-color: rgba(255, 255, 255, 0.6) !important;
}
.e-n-tab-title:hover .e-n-tab-title-text {
text-shadow:
0 0 15px rgba(255, 255, 255, 1),
0 0 25px rgba(0, 191, 255, 0.8) !important;
}
.e-n-tab-title:active {
transform: translateY(2px) scale(0.95) !important;
box-shadow:
0 3px 10px rgba(0, 191, 255, 0.4),
0 1px 0 rgba(0, 100, 255, 0.6) !important;
transition: all 0.1s ease !important;
background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%) !important;
}
.e-n-tab-title:active::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: pressWave 0.4s ease-out;
}
@keyframes pressWave {
0% {
width: 0;
height: 0;
opacity: 0.8;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
.e-n-tab-title[aria-selected="true"] {
background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%) !important;
animation: activePulse 2s infinite;
box-shadow:
0 10px 30px rgba(255, 204, 0, 0.5),
0 4px 0 rgba(255, 153, 0, 0.7) !important;
border-color: rgba(255, 255, 255, 0.8) !important;
}
.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
text-shadow:
0 0 15px rgba(255, 255, 255, 1),
0 0 25px rgba(255, 204, 0, 0.8) !important;
color: #fff8e1 !important;
}
@keyframes activePulse {
0%, 100% {
box-shadow:
0 10px 30px rgba(255, 204, 0, 0.5),
0 4px 0 rgba(255, 153, 0, 0.7);
}
50% {
box-shadow:
0 12px 35px rgba(255, 204, 0, 0.7),
0 5px 0 rgba(255, 153, 0, 0.9);
}
}
.e-n-tab-title[aria-selected="true"]::before {
content: '📍';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
animation: markerBounce 2s infinite;
z-index: 3;
}
@keyframes markerBounce {
0%, 100% { transform: translateY(-50%) scale(1); }
50% { transform: translateY(-50%) scale(1.2); }
}
#e-n-tab-title-1413356742[aria-selected="true"] {
background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%) !important;
box-shadow:
0 10px 30px rgba(255, 107, 107, 0.5),
0 4px 0 rgba(255, 71, 87, 0.7) !important;
}
#e-n-tab-title-1413356742[aria-selected="true"] .e-n-tab-title-text {
text-shadow:
0 0 15px rgba(255, 255, 255, 1),
0 0 25px rgba(255, 107, 107, 0.8) !important;
}
.e-n-tabs-heading::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, #00bfff, #ffcc00, #00bfff, transparent);
animation: connectionFlow 4s infinite;
}
@keyframes connectionFlow {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.e-n-tabs-heading::after {
content: '🧭';
position: absolute;
top: -35px;
right: 20px;
font-size: 24px;
animation: compassFloat 4s ease-in-out infinite;
filter: drop-shadow(0 2px 8px rgba(0, 191, 255, 0.5));
}
@keyframes compassFloat {
0%, 100% { transform: rotate(0deg) translateY(0px); }
25% { transform: rotate(5deg) translateY(-5px); }
75% { transform: rotate(-5deg) translateY(5px); }
}
@keyframes subtlePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.e-n-tab-title:not([aria-selected="true"]) {
animation: subtlePulse 3s ease-in-out infinite;
}
.e-n-tab-title:focus {
outline: 3px solid rgba(255, 255, 255, 0.8);
outline-offset: 3px;
}
.e-n-tab-title:focus:not(:hover) {
transform: scale(1.05) !important;
}
.e-n-tab-title,
.e-n-tab-title * {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Responsive para móviles */
@media (max-width: 768px) {
.e-n-tabs-heading {
flex-direction: column;
gap: 15px;
margin-bottom: 30px !important;
}
.e-n-tab-title {
padding: 18px 30px !important;
min-width: auto;
width: 100%;
font-size: 15px !important;
}
.e-n-tabs-heading::after {
display: none;
}
.e-n-tab-title[aria-selected="true"]::before {
right: 15px;
font-size: 16px;
}
.e-n-tabs-heading::before {
width: 90%;
bottom: -8px;
}
#e-n-tab-content-1413356741::before {
font-size: 150px;
}
#e-n-tab-content-1413356741 .elementor-widget-image::before,
#e-n-tab-content-1413356741 .elementor-widget-text-editor:first-child::before,
#e-n-tab-content-1413356741 .elementor-widget-text-editor:nth-child(2)::before,
#e-n-tab-content-1413356741 .elementor-widget-text-editor:nth-child(3)::before {
font-size: 18px;
}
#e-n-tab-content-1413356741 .elementor-icon-list:first-child::before,
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(2)::before,
#e-n-tab-content-1413356741 .elementor-icon-list:nth-child(3)::before {
font-size: 20px;
}
}
/* Asegurar que el contenido esté por encima de las animaciones de fondo */
.e-con-inner,
.e-n-tabs-heading,
.elementor-widget,
.elementor-icon-list-item,
.elementor-widget-text-editor {
position: relative;
z-index: 3;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-92c7581 *//* --- FONDO: EL UNIVERSO VIVIENTE --- */
.elementor-3383 .elementor-element.elementor-element-92c7581 {
background: radial-gradient(circle at 50% 100%, #1a0b36 0%, #05081c 40%, #000000 100%);
position: relative;
overflow: hidden;
padding: 60px 20px;
box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}
/* Animación de Nebulosa Sutil */
.elementor-3383 .elementor-element.elementor-element-92c7581::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background:
radial-gradient(1px 1px at 20% 30%, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 40% 70%, white, rgba(0,0,0,0)),
radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,0.8), rgba(0,0,0,0)),
radial-gradient(circle at 50% 50%, rgba(76, 29, 149, 0.1), rgba(0, 217, 255, 0.05));
background-size: 200px 200px, 100px 100px, 300px 300px, 100% 100%;
animation: galaxyMove 120s linear infinite;
opacity: 0.8;
pointer-events: none;
z-index: 0;
}
@keyframes galaxyMove {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* --- INTERFAZ: PESTAÑAS FUTURISTAS --- */
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tabs-heading {
position: relative;
z-index: 2;
gap: 30px;
margin-bottom: 50px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tab-title {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #a0a0a0 !important;
border-radius: 8px !important;
padding: 18px 45px !important;
font-family: 'Montserrat', sans-serif; /* O tu fuente principal */
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
}
/* Efecto de carga en Hover y Activo */
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tab-title::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 2px;
background: #00d9ff;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease;
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tab-title:hover,
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tab-title[aria-selected="true"] {
background: rgba(0, 217, 255, 0.1) !important;
color: #ffffff !important;
border-color: rgba(0, 217, 255, 0.5) !important;
box-shadow: 0 0 30px rgba(0, 217, 255, 0.2);
text-shadow: 0 0 10px rgba(0, 217, 255, 0.8);
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tab-title[aria-selected="true"]::after {
transform: scaleX(1);
transform-origin: left;
}
/* --- CONTENEDOR DE CONTENIDO (GLASSMORPHISM) --- */
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tabs-content {
position: relative;
z-index: 2;
}
/* Caja de Lista de Sedes (Holográfica) */
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-element-59bffd1 {
background: rgba(13, 18, 36, 0.6) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(0, 217, 255, 0.3);
border-radius: 16px;
padding: 40px !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
max-height: 650px;
overflow-y: auto;
transition: transform 0.3s ease;
}
/* Scrollbar Futurista */
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-element-59bffd1::-webkit-scrollbar {
width: 6px;
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-element-59bffd1::-webkit-scrollbar-track {
background: rgba(0,0,0,0.2);
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-element-59bffd1::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #00d9ff, #005bea);
border-radius: 10px;
}
/* --- LISTA DE UBICACIONES --- */
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-icon-list-item {
transition: transform 0.3s ease;
padding-left: 10px;
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-icon-list-text {
color: #ffffff;
font-size: 19px;
font-weight: 700;
letter-spacing: 0.5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-icon-list-icon i {
color: #ffba00; /* Acento Naranja Solar */
font-size: 22px;
filter: drop-shadow(0 0 8px rgba(255, 186, 0, 0.6));
animation: pulseIcon 3s infinite ease-in-out;
}
@keyframes pulseIcon {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(0.9); }
}
/* Texto de dirección */
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-widget-text-editor p {
color: #b4c6e8;
font-size: 15px;
margin-bottom: 25px;
padding-left: 42px; /* Alineado con el texto del título */
position: relative;
line-height: 1.7;
border-left: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s ease;
}
/* Hover en Bloque de Dirección */
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-widget-text-editor:hover p {
border-left: 1px solid #00d9ff;
padding-left: 48px;
color: white;
background: linear-gradient(90deg, rgba(0,217,255,0.05), transparent);
}
/* Enlaces (Correos) */
.elementor-3383 .elementor-element.elementor-element-92c7581 a[href^="mailto"] {
display: inline-block;
margin-top: 5px;
color: #00d9ff !important;
font-weight: 500;
text-decoration: none;
position: relative;
transition: 0.3s;
}
.elementor-3383 .elementor-element.elementor-element-92c7581 a[href^="mailto"]::before {
content: '✉';
margin-right: 5px;
}
.elementor-3383 .elementor-element.elementor-element-92c7581 a[href^="mailto"]:hover {
color: #ffba00 !important;
text-shadow: 0 0 15px rgba(255, 186, 0, 0.8);
transform: translateX(5px);
}
/* --- IMAGEN DEL MAPA (Izquierda) --- */
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-widget-image {
position: relative;
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-widget-image img {
border-radius: 16px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 20px 40px rgba(0,0,0,0.6);
filter: brightness(0.9) contrast(1.1);
transition: all 0.6s ease;
/* Efecto "Pantalla" */
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-widget-image:hover img {
filter: brightness(1.1) contrast(1.2) drop-shadow(0 0 20px rgba(0, 217, 255, 0.3));
transform: scale(1.02);
}
/* --- EFECTO RESPONSIVE --- */
@media (max-width: 768px) {
.elementor-3383 .elementor-element.elementor-element-92c7581 { padding: 30px 10px; }
.elementor-3383 .elementor-element.elementor-element-92c7581 .e-n-tab-title { width: 100%; text-align: center; margin-bottom: 10px; }
.elementor-3383 .elementor-element.elementor-element-92c7581 .elementor-element-59bffd1 { padding: 25px !important; }
}/* End custom CSS */
/* Start custom CSS for tj-heading, class: .elementor-element-d1eca4f *//* ============================================================
KALYPZUS TITLE - CORRECCIÓN DE VISIBILIDAD LIVE
============================================================ */
.elementor-element-d1eca4f .title {
position: relative;
display: flex !important; /* Forzar visibilidad */
align-items: center;
justify-content: center;
gap: 15px;
color: #ffffff !important;
font-family: 'Inter', sans-serif;
font-weight: 900 !important;
font-size: clamp(30px, 5vw, 55px) !important;
text-transform: uppercase;
margin: 0;
padding: 20px 0;
text-align: center;
/* Gradiente Metálico */
background: linear-gradient(90deg, #ffffff, #00d2ff, #ffffff);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine-kalypzus 3s linear infinite;
/* Evitar el blur inicial */
filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.2));
opacity: 1 !important;
visibility: visible !important;
}
/* Icono Maletín */
.elementor-element-d1eca4f .title::before {
content: "";
width: 45px;
height: 45px;
background-color: #00d2ff;
display: inline-block;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 15H4V8h16v11z'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 15H4V8h16v11z'/%3E%3C/svg%3E") no-repeat center;
animation: float-icon-kaly 2s ease-in-out infinite;
}
@keyframes shine-kalypzus {
to { background-position: 200% center; }
}
@keyframes float-icon-kaly {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Responsivo para móviles */
@media (max-width: 768px) {
.elementor-element-d1eca4f .title {
flex-direction: column;
font-size: 28px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-141a857 *//* =========================================================
FORMULARIO TRABAJA CON NOSOTROS - CSS FINAL
========================================================= */
/* =========================================================
0. FIX GLOBAL PARA QUE EL DROPDOWN NO SE OCULTE
========================================================= */
.uacf7-form-wrapper-container,
.uacff7-form-wrapper-container * {
overflow: visible !important;
}
/* =========================================================
1. CONTENEDOR MAESTRO
========================================================= */
.uacf7-form-wrapper-container {
background: linear-gradient(145deg, #0a192f 0%, #060e1a 100%) !important;
padding: 40px;
border-radius: 30px;
border: 1px solid rgba(0, 212, 255, 0.2);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9),
inset 0 0 20px rgba(0, 212, 255, 0.05);
display: flex;
flex-direction: column;
gap: 25px;
position: relative;
z-index: 1;
}
/* =========================================================
2. CAMPOS DE TEXTO
========================================================= */
.uacf7-form-wrapper-container .tj-input {
width: 100% !important;
height: 60px !important;
padding: 0 22px !important;
border-radius: 18px !important;
border: 1.5px solid rgba(0, 212, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.03) !important;
color: #00d4ff !important;
font-weight: 600 !important;
line-height: 60px !important;
transition: all 0.3s ease !important;
}
.uacf7-form-wrapper-container .tj-input:focus {
border-color: #00d4ff !important;
box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.05) !important;
}
.uacf7-form-wrapper-container .tj-input::placeholder {
color: rgba(111, 220, 255, 0.5) !important;
}
/* =========================================================
3. NICE SELECT - FIX DEFINITIVO
========================================================= */
.uacf7-form-wrapper-container .tj-input__wrapper {
position: relative !important;
z-index: 100 !important;
}
.uacf7-form-wrapper-container .tj-input__wrapper:has(.nice-select.open) {
z-index: 999999 !important;
}
.uacf7-form-wrapper-container .nice-select {
position: relative !important;
z-index: 200 !important;
min-height: 60px !important;
padding: 0 42px 0 22px !important;
border-radius: 18px !important;
display: flex !important;
align-items: center !important;
background: linear-gradient(145deg, rgba(0,0,0,.85), rgba(5,15,30,.85)) !important;
border: 1.5px solid rgba(0, 212, 255, 0.3) !important;
color: #00d4ff !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.uacf7-form-wrapper-container .nice-select.open {
border-color: #00d4ff !important;
box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
}
.uacf7-form-wrapper-container .nice-select .current {
line-height: 1.25 !important;
max-height: 2.6em;
overflow: hidden;
word-break: break-word;
white-space: normal !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
width: 100% !important;
padding-right: 25px !important;
}
.uacf7-form-wrapper-container .nice-select::after {
right: 18px !important;
border-color: #00d4ff !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* =========================================================
4. LISTA DESPLEGABLE
========================================================= */
.uacf7-form-wrapper-container .nice-select .list {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
z-index: 9999999 !important;
background: #060e1a !important;
border: 1.5px solid #00d4ff !important;
border-radius: 20px !important;
box-shadow: 0 30px 80px rgba(0,0,0,.95) !important;
max-height: 280px !important;
overflow-y: auto !important;
width: 100% !important;
}
.uacf7-form-wrapper-container .nice-select .option {
padding: 12px 18px !important;
line-height: 1.35 !important;
white-space: normal !important;
word-break: break-word !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 50px !important;
align-items: center !important;
color: rgba(255, 255, 255, 0.7) !important;
}
.uacf7-form-wrapper-container .nice-select .option:hover,
.uacf7-form-wrapper-container .nice-select .option.selected {
background: linear-gradient(90deg, #0072ff, #00d4ff) !important;
color: #ffffff !important;
font-weight: bold !important;
}
/* =========================================================
5. SUBIDA DE ARCHIVO (CV)
========================================================= */
.uacf7-form-wrapper-container .upload-btn {
height: 100px !important;
border-radius: 18px !important;
border: 2px dashed rgba(0, 212, 255, 0.4) !important;
background: rgba(0, 212, 255, 0.05) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.uacf7-form-wrapper-container .upload-btn:hover {
background: rgba(0, 212, 255, 0.1) !important;
border-color: #00d4ff !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 20px rgba(0, 212, 255, 0.2) !important;
}
.uacf7-form-wrapper-container .upload-btn span {
color: #00d4ff !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* =========================================================
6. BOTÓN ENVIAR CV
========================================================= */
.uacf7-form-wrapper-container .tj-form__btn {
display: block !important;
margin-top: 30px !important;
width: 100% !important;
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
}
.uacf7-form-wrapper-container .tj-form__btn .tj-primary-btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
height: 70px !important;
background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 25px !important;
font-size: 18px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
cursor: pointer !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4) !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
transition: all 0.3s ease !important;
overflow: visible !important;
}
.uacf7-form-wrapper-container .tj-form__btn .tj-primary-btn:hover {
transform: translateY(-3px) !important;
background: linear-gradient(90deg, #0056cc 0%, #00b8e6 100%) !important;
box-shadow: 0 15px 40px rgba(0, 212, 255, 0.6) !important;
}
/* =========================================================
7. SCROLLBAR PERSONALIZADO
========================================================= */
.uacf7-form-wrapper-container .nice-select .list::-webkit-scrollbar {
width: 8px !important;
}
.uacf7-form-wrapper-container .nice-select .list::-webkit-scrollbar-track {
background: rgba(0, 212, 255, 0.05) !important;
border-radius: 10px !important;
}
.uacf7-form-wrapper-container .nice-select .list::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #0072ff, #00d4ff) !important;
border-radius: 10px !important;
}
/* =========================================================
8. FIX DE VISIBILIDAD PARA EL FORMULARIO
========================================================= */
.uacf7-form-wrapper-container button[type="submit"],
.uacf7-form-wrapper-container input[type="submit"] {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* =========================================================
9. ESTILOS DE VALIDACIÓN EN CAMPOS (ERRORES NARANJA/ÁMBAR)
========================================================= */
.uacf7-form-wrapper-container .wpcf7-not-valid-tip img.emoji {
display: none !important;
}
.uacf7-form-wrapper-container .wpcf7-not-valid-tip {
color: #ffaa00 !important;
font-size: 12px !important;
font-weight: 600 !important;
margin-top: 8px !important;
margin-left: 10px !important;
display: block !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
animation: tooltipFadeIn 0.3s ease forwards !important;
}
.uacf7-form-wrapper-container .wpcf7-not-valid {
border-color: #ffaa00 !important;
box-shadow: 0 0 12px rgba(255, 170, 0, 0.2) !important;
}
/* =========================================================
10. ESTADO INICIAL DE LA CAJA DE RESPUESTA (SIEMPRE OCULTA)
========================================================= */
html body div.wpcf7-response-output,
html body .wpcf7 form .wpcf7-response-output,
.uacf7-form-wrapper-container .wpcf7-response-output {
display: none !important; /* Mantiene el contenedor invisible hasta enviar */
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
/* Formato Emojis dentro de la respuesta */
html body .wpcf7-response-output img.emoji {
display: inline-block !important;
width: 24px !important;
height: 24px !important;
vertical-align: middle !important;
margin: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
}
/* =========================================================
11. MENSAJE DE ERROR GENERAL (AL FALLAR ENVÍO)
========================================================= */
html body .wpcf7 form.invalid .wpcf7-response-output,
html body .wpcf7 form.failed .wpcf7-response-output,
html body .wpcf7 form.aborted .wpcf7-response-output {
display: flex !important; /* Aparece solo cuando hay error */
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
column-gap: 10px !important;
row-gap: 5px !important;
margin: 30px 0 0 0 !important;
padding: 25px 20px !important;
border-radius: 20px !important;
font-size: 16px !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.6 !important;
background: linear-gradient(45deg, #ffffff, #00d4ff, #ffffff) !important;
background-size: 200% 200% !important;
border: 2px solid #ff0000 !important;
color: #000000 !important;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
animation: bounceIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, gradientShift 3s infinite !important;
}
/* Emoji de teléfono rojo en el mensaje de error */
html body .wpcf7 form.invalid .wpcf7-response-output::before,
html body .wpcf7 form.failed .wpcf7-response-output::before,
html body .wpcf7 form.aborted .wpcf7-response-output::before {
content: '📞';
font-size: 24px;
margin-right: 10px;
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
}
/* =========================================================
12. MENSAJE DE ÉXITO ESPECTACULAR
========================================================= */
html body .wpcf7 form.sent .wpcf7-response-output {
display: flex !important; /* Aparece solo en caso de éxito */
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
column-gap: 10px !important;
row-gap: 5px !important;
margin: 30px 0 0 0 !important;
padding: 25px 20px !important;
border-radius: 20px !important;
font-size: 16px !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.6 !important;
background: linear-gradient(145deg, rgba(6, 14, 26, 0.95), rgba(0, 212, 255, 0.15)) !important;
border: 2px solid #00d4ff !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
box-shadow: 0 0 25px rgba(0, 212, 255, 0.3), inset 0 0 15px rgba(0, 212, 255, 0.1) !important;
animation: spectacularBounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, cyanGlowPulse 2.5s infinite alternate ease-in-out !important;
transform-origin: center bottom !important;
}
/* Emojis flotantes en el éxito */
html body .wpcf7 form.sent .wpcf7-response-output img.emoji {
filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.8)) !important;
animation: floatEmoji 3s ease-in-out infinite !important;
}
/* =========================================================
13. KEYFRAMES Y ANIMACIONES
========================================================= */
@keyframes tooltipFadeIn {
0% { opacity: 0; transform: translateY(-5px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.8) translateY(20px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spectacularBounceIn {
0% {
opacity: 0;
transform: scale(0.3) translateY(50px);
}
50% {
opacity: 1;
transform: scale(1.05) translateY(-10px);
}
70% {
transform: scale(0.95) translateY(5px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes cyanGlowPulse {
0% {
box-shadow: 0 0 15px rgba(0, 212, 255, 0.2), inset 0 0 10px rgba(0, 212, 255, 0.1);
border-color: #00d4ff !important;
}
100% {
box-shadow: 0 0 35px rgba(0, 212, 255, 0.6), inset 0 0 20px rgba(0, 212, 255, 0.3);
border-color: #6fdcff !important;
}
}
@keyframes floatEmoji {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.15); }
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* =========================================================
14. RESPONSIVE BÁSICO
========================================================= */
@media (max-width: 768px) {
.uacf7-form-wrapper-container {
padding: 25px !important;
gap: 20px !important;
}
.uacf7-form-wrapper-container .tj-input,
.uacf7-form-wrapper-container .nice-select {
height: 55px !important;
font-size: 14px !important;
}
.uacf7-form-wrapper-container .tj-form__btn .tj-primary-btn {
height: 60px !important;
font-size: 16px !important;
}
html body .wpcf7 form.invalid .wpcf7-response-output,
html body .wpcf7 form.failed .wpcf7-response-output,
html body .wpcf7 form.sent .wpcf7-response-output {
font-size: 14px !important;
padding: 20px 15px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2fee4 *//* ==========================================================================
TARJETA COMPACTA "BLUE TECH 3D" - MASTER UI EDITION (CARGA ESTABLE)
ID: 7b2fee4
========================================================================== */
/* --- 1. CONTENEDOR MAESTRO: ESTABILIDAD Y CARGA SUAVE --- */
.elementor-element-7b2fee4,
.elementor-element-7b2fee4 > .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
height: auto !important;
align-content: flex-start !important;
visibility: visible !important; /* Fuerza la visibilidad base */
}
.elementor-element-7b2fee4 {
position: relative;
overflow: hidden;
padding: 30px 20px !important;
border-radius: 24px !important;
background: linear-gradient(160deg, rgba(0, 26, 51, 0.9) 0%, rgba(0, 5, 10, 0.95) 100%) !important;
border: 1px solid rgba(0, 212, 255, 0.2) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 212, 255, 0.05) !important;
margin: 0 auto !important;
animation: smoothLoad 0.6s ease-out forwards !important; /* Simplificada la curva de animación */
}
.elementor-element-7b2fee4::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
transform: skewX(-20deg);
animation: cyberSweep 4s infinite linear;
pointer-events: none;
z-index: 0;
}
/* --- 2. ORDEN ESTRICTO DE ELEMENTOS Y ESPACIOS REDUCIDOS --- */
/* Añadimos 'display: block' o 'flex' a los subelementos para evitar que Elementor los colapse */
.elementor-element-7b2fee4 .elementor-element-9316f54 {
order: 1 !important;
width: 100% !important;
z-index: 2;
margin-bottom: 12px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.elementor-element-7b2fee4 .elementor-element-356f915 {
order: 2 !important;
width: 100% !important;
z-index: 2;
margin-bottom: 15px !important;
flex-grow: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.elementor-element-7b2fee4 .elementor-element-900adc9 {
order: 3 !important;
width: 100% !important;
z-index: 2;
margin-bottom: 0 !important;
display: flex !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* --- 3. TÍTULO: IMPACTO PROFESIONAL Y CARGA SEGURA --- */
.elementor-element-7b2fee4 .elementor-element-9316f54 .title,
.elementor-element-7b2fee4 .elementor-element-9316f54 h2 {
font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
font-weight: 900 !important;
text-transform: uppercase !important;
text-align: center !important;
margin: 0 !important;
line-height: 1.2 !important;
color: #ffffff !important;
letter-spacing: 1px !important;
text-shadow: 0 0 15px rgba(0, 212, 255, 0.6), 0 0 25px rgba(0, 212, 255, 0.2) !important;
display: block !important; /* Garantiza que el título ocupe su espacio */
animation: textPulse 3s infinite alternate ease-in-out !important;
}
/* --- 4. TEXTO: CRISTALINO Y LEGIBLE --- */
.elementor-element-7b2fee4 .elementor-element-356f915 p {
color: #e0f7fa !important;
font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
line-height: 1.5 !important;
text-align: center !important;
background: rgba(0, 26, 51, 0.5) !important;
padding: 15px 20px !important;
border-radius: 16px !important;
border: 1px solid rgba(0, 212, 255, 0.15) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
margin: 0 auto !important;
max-width: 95% !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
display: block !important;
}
.elementor-element-7b2fee4 .elementor-element-356f915 img.emoji {
width: 20px !important;
height: 20px !important;
vertical-align: middle !important;
margin: 0 3px !important;
filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.8)) !important;
animation: floatEmoji 3s ease-in-out infinite !important;
}
/* --- 5. IMAGEN: TAMAÑO CONTROLADO E INTERACTIVA --- */
.elementor-element-7b2fee4 .elementor-element-900adc9 img {
max-width: 75% !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
margin: 0 auto !important;
border-radius: 16px !important;
border: 1px solid rgba(0, 212, 255, 0.2) !important;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6) !important;
transition: transform 0.4s ease, border-color 0.4s ease !important;
}
.elementor-element-7b2fee4 .elementor-element-900adc9:hover img {
transform: translateY(-5px) scale(1.03) !important;
border-color: rgba(0, 212, 255, 0.8) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 212, 255, 0.4) !important;
}
/* --- 6. ANIMACIONES CLAVE --- */
/* Animación de carga ajustada para no ocultar elementos inicialmente */
@keyframes smoothLoad {
0% { transform: translateY(10px); opacity: 0.8; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes cyberSweep {
0% { left: -100%; }
50%, 100% { left: 200%; }
}
@keyframes textPulse {
0% { text-shadow: 0 0 15px rgba(0, 212, 255, 0.4); }
100% { text-shadow: 0 0 25px rgba(0, 212, 255, 0.8), 0 0 10px rgba(0, 212, 255, 0.5); }
}
@keyframes floatEmoji {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px) scale(1.1); }
}
/* --- 7. RESPONSIVE MASTER (TABLET Y MÓVIL) --- */
@media (max-width: 1024px) {
.elementor-element-7b2fee4 {
padding: 25px 15px !important;
width: 100% !important;
}
.elementor-element-7b2fee4 .elementor-element-900adc9 img {
max-width: 85% !important;
}
}
@media (max-width: 768px) {
.elementor-element-7b2fee4 {
padding: 20px 15px !important;
border-radius: 20px !important;
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.elementor-element-7b2fee4 .elementor-element-9316f54 {
margin-bottom: 10px !important;
}
.elementor-element-7b2fee4 .elementor-element-356f915 {
margin-bottom: 15px !important;
}
.elementor-element-7b2fee4 .elementor-element-356f915 p {
font-size: 14px !important;
padding: 12px 15px !important;
line-height: 1.4 !important;
border-radius: 12px !important;
max-width: 100% !important;
}
.elementor-element-7b2fee4 .elementor-element-900adc9 img {
max-width: 90% !important;
border-radius: 12px !important;
}
}/* End custom CSS */