.elementor-520 .elementor-element.elementor-element-6954826{--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-520 .elementor-element.elementor-element-5a5e564.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-24f0263{--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:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-520 .elementor-element.elementor-element-8bbebbd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-520 .elementor-element.elementor-element-8bbebbd.elementor-element{--align-self:center;}.elementor-520 .elementor-element.elementor-element-8bbebbd.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-8bbebbd .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:12px;letter-spacing:6.9px;color:#01042C;}.elementor-520 .elementor-element.elementor-element-34fbf16.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-34fbf16{text-align:center;}.elementor-520 .elementor-element.elementor-element-34fbf16 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:71px;font-weight:900;color:#01042C;}.elementor-520 .elementor-element.elementor-element-e1e70aa.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-e1e70aa{text-align:center;font-family:"Bricolage Grotesque", Sans-serif;}.elementor-520 .elementor-element.elementor-element-32f35d1.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-4bf66c8{--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:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-520 .elementor-element.elementor-element-a245af0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-520 .elementor-element.elementor-element-a245af0.elementor-element{--align-self:center;}.elementor-520 .elementor-element.elementor-element-a245af0.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-a245af0 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:12px;letter-spacing:6.9px;color:#01042C;}.elementor-520 .elementor-element.elementor-element-cd5284d.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-cd5284d{text-align:center;}.elementor-520 .elementor-element.elementor-element-cd5284d .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:71px;font-weight:900;color:#01042C;}.elementor-520 .elementor-element.elementor-element-91a74e2.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-91a74e2{text-align:center;font-family:"Bricolage Grotesque", Sans-serif;}.elementor-520 .elementor-element.elementor-element-43de1c3.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-b628813 .elementor-button{background-color:transparent;font-family:"Bricolage Grotesque", Sans-serif;font-size:20px;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;background-image:linear-gradient(299deg, #00FFCD 0%, #5100FF 100%);}.elementor-520 .elementor-element.elementor-element-b628813{padding:30px 0px 0px 0px;}.elementor-520 .elementor-element.elementor-element-b628813.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-b628813 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-520 .elementor-element.elementor-element-b628813 .elementor-button .elementor-button-content-wrapper{gap:15px;}.elementor-520 .elementor-element.elementor-element-ce01ed1{--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:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-520 .elementor-element.elementor-element-ce90d08{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-520 .elementor-element.elementor-element-ce90d08.elementor-element{--align-self:center;}.elementor-520 .elementor-element.elementor-element-ce90d08.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-ce90d08 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:12px;letter-spacing:6.9px;color:#01042C;}.elementor-520 .elementor-element.elementor-element-91f9f10.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-91f9f10{text-align:center;}.elementor-520 .elementor-element.elementor-element-91f9f10 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:71px;font-weight:900;color:#01042C;}.elementor-520 .elementor-element.elementor-element-78a5a40.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-78a5a40{text-align:center;font-family:"Bricolage Grotesque", Sans-serif;}.elementor-520 .elementor-element.elementor-element-6f0db66.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-490a266 .elementor-button{background-color:transparent;font-family:"Bricolage Grotesque", Sans-serif;font-size:20px;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;background-image:linear-gradient(299deg, #00FFCD 0%, #5100FF 100%);}.elementor-520 .elementor-element.elementor-element-490a266{padding:40px 0px 0px 0px;}.elementor-520 .elementor-element.elementor-element-490a266.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-490a266 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-520 .elementor-element.elementor-element-490a266 .elementor-button .elementor-button-content-wrapper{gap:15px;}.elementor-520 .elementor-element.elementor-element-a0a6e24{--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:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-520 .elementor-element.elementor-element-327b74c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-520 .elementor-element.elementor-element-327b74c.elementor-element{--align-self:center;}.elementor-520 .elementor-element.elementor-element-327b74c.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-327b74c .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:12px;letter-spacing:6.9px;color:#01042C;}.elementor-520 .elementor-element.elementor-element-a75c9a6.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-a75c9a6{text-align:center;}.elementor-520 .elementor-element.elementor-element-a75c9a6 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:71px;font-weight:900;color:#01042C;}.elementor-520 .elementor-element.elementor-element-d35c3fd.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-d35c3fd{text-align:center;font-family:"Bricolage Grotesque", Sans-serif;}.elementor-520 .elementor-element.elementor-element-fcbbec9.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-520 .elementor-element.elementor-element-a98b1f6{--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:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-520 .elementor-element.elementor-element-7eb59fe{padding:0px 0px 80px 0px;}.elementor-520 .elementor-element.elementor-element-7eb59fe.xpro-widget-bg-overlay:before{transition:background 0.3s;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-520 .elementor-element.elementor-element-8bbebbd .elementor-heading-title{font-size:15px;}.elementor-520 .elementor-element.elementor-element-a245af0 .elementor-heading-title{font-size:15px;}.elementor-520 .elementor-element.elementor-element-ce90d08 .elementor-heading-title{font-size:15px;}.elementor-520 .elementor-element.elementor-element-327b74c .elementor-heading-title{font-size:15px;}}/* Start custom CSS for html, class: .elementor-element-5a5e564 *//* ========================================================= QUICK QUICK HERO GESTIÓN DE PROYECTOS CREATIVOS ANCHO CONTROLADO / WRAP NATURAL / RESPONSIVE ========================================================= */ /* ========================================================= HERO ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero { position: relative; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -10px !important; min-height: 720px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 90px 28px 80px; background: radial-gradient( circle at 7% 18%, rgba(113, 7, 187, .28) 0%, rgba(113, 7, 187, .13) 18%, rgba(113, 7, 187, .04) 35%, transparent 52% ), radial-gradient( circle at 94% 18%, rgba(15, 197, 186, .30) 0%, rgba(15, 197, 186, .13) 20%, rgba(0, 153, 255, .04) 38%, transparent 54% ), radial-gradient( circle at 50% 105%, rgba(37, 99, 255, .08) 0%, transparent 42% ), linear-gradient( 180deg, #ffffff 0%, #fcfbff 48%, #f8fbff 100% ); isolation: isolate; box-sizing: border-box; } /* ========================================================= RESET ELEMENTOR ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 { margin-top: 0 !important; padding-top: 0 !important; } .elementor-520 .elementor-element.elementor-element-5a5e564 .elementor-widget-container { margin-top: 0 !important; padding-top: 0 !important; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero > *:first-child { margin-top: 0; } /* ========================================================= HALOS DECORATIVOS ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero::before { content: ""; position: absolute; width: 620px; height: 620px; left: -260px; top: -250px; border-radius: 50%; background: radial-gradient( circle, rgba(106, 27, 255, .18) 0%, rgba(106, 27, 255, .08) 38%, transparent 70% ); filter: blur(18px); pointer-events: none; z-index: -1; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero::after { content: ""; position: absolute; width: 650px; height: 650px; right: -260px; top: -260px; border-radius: 50%; background: radial-gradient( circle, rgba(22, 214, 198, .20) 0%, rgba(24, 169, 255, .08) 42%, transparent 72% ); filter: blur(18px); pointer-events: none; z-index: -1; } /* ========================================================= CONTENIDO ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; text-align: center; box-sizing: border-box; } /* ========================================================= EYEBROW ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; font-family: "Bricolage Grotesque", sans-serif; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .26em; text-transform: uppercase; color: #01042C; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-eyebrow-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient( 135deg, #7107BB 0%, #0055FF 55%, #0FC5BA 100% ); box-shadow: 0 0 14px rgba(75, 45, 255, .35); } /* ========================================================= H1 GENERAL ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-title { width: 100%; /* * ESTE ES EL CAMBIO CLAVE. * * No dejamos que el título use todo el viewport. * Tiene un ancho controlado y el texto se acomoda * naturalmente dentro de él. */ max-width: 1260px; margin: 0 auto; font-family: "Bricolage Grotesque", sans-serif; text-align: center; color: #01042C; box-sizing: border-box; } /* ========================================================= TODOS LOS BLOQUES DEL H1 ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-main, .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-gradient, .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-soft { display: block; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; /* * Wrap natural */ white-space: normal; overflow-wrap: normal; word-break: normal; text-wrap: balance; } /* ========================================================= TITULAR PRINCIPAL ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-main { color: #01042C; font-size: clamp( 76px, 6.6vw, 118px ); font-weight: 900; line-height: .92; letter-spacing: -0.058em; } /* ========================================================= GRADIENTE ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-gradient { margin-top: 8px; font-size: clamp( 72px, 6.1vw, 108px ); font-weight: 900; line-height: .94; letter-spacing: -0.055em; background: linear-gradient( 90deg, #7107BB 0%, #5522FF 20%, #3151FF 40%, #087CFF 62%, #00A9E8 80%, #0FC5BA 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding: 0 .06em .04em .03em; filter: drop-shadow( 0 8px 18px rgba(75, 45, 255, .07) ); } /* ========================================================= FRASE FINA ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-soft { max-width: 1050px; margin-top: 12px; color: #01042C; font-size: clamp( 58px, 4.9vw, 82px ); font-weight: 350; line-height: .98; letter-spacing: -0.05em; } /* ========================================================= DESCRIPCIÓN ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-subtitle { width: 100%; max-width: 900px; margin: 40px auto 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.55; color: #4E5266; text-wrap: balance; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-subtitle-break { display: block; height: 18px; } /* ========================================================= BOTONES ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-family: "Bricolage Grotesque", sans-serif; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; } /* ========================================================= CTA PRINCIPAL ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn-primary { color: #ffffff; background: linear-gradient( 90deg, #7107BB 0%, #4B2DFF 30%, #0055FF 65%, #0FC5BA 100% ); box-shadow: 0 10px 28px rgba(75, 45, 255, .22); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn-primary span { color: #ffffff; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn-arrow { font-size: 21px; transition: transform .3s ease; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn-primary:hover { color: #ffffff; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(75, 45, 255, .28); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn-primary:hover .qq-logo-btn-arrow { transform: translateX(4px); } /* ========================================================= CTA SECUNDARIO ========================================================= */ .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn-secondary { color: #01042C; background: rgba(255, 255, 255, .70); border: 1px solid rgba(1, 4, 44, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn-secondary:hover { color: #01042C; transform: translateY(-3px); border-color: rgba(75, 45, 255, .25); background: rgba(255, 255, 255, .90); box-shadow: 0 10px 25px rgba(75, 45, 255, .10); } /* ========================================================= DESKTOP GRANDE 1600px+ ========================================================= */ @media (min-width: 1600px) { .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero { min-height: 760px; padding: 100px 28px 90px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-title { max-width: 1360px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-main { font-size: clamp( 96px, 6.1vw, 120px ); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-gradient { font-size: clamp( 90px, 5.7vw, 112px ); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-soft { max-width: 1100px; font-size: clamp( 64px, 4.5vw, 84px ); } } /* ========================================================= LAPTOP 1025px — 1399px ========================================================= */ @media (max-width: 1399px) and (min-width: 1025px) { .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-title { max-width: 1080px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-main { font-size: clamp( 68px, 6.4vw, 88px ); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-gradient { font-size: clamp( 64px, 6vw, 82px ); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-soft { max-width: 900px; font-size: clamp( 50px, 4.8vw, 66px ); } } /* ========================================================= TABLET HASTA 1024px ========================================================= */ @media (max-width: 1024px) { .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero { min-height: 650px; padding: 80px 32px 70px; margin-top: -10px !important; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero-inner { max-width: 900px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-eyebrow { margin-bottom: 24px; font-size: 10px; letter-spacing: .21em; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-title { max-width: 820px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-main { font-size: clamp( 56px, 7.8vw, 76px ); line-height: .94; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-gradient { font-size: clamp( 52px, 7.3vw, 70px ); line-height: .95; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-soft { max-width: 720px; font-size: clamp( 40px, 5.8vw, 54px ); line-height: 1; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-subtitle { max-width: 720px; margin-top: 32px; font-size: 17px; } } /* ========================================================= MOBILE HASTA 767px ========================================================= */ @media (max-width: 767px) { .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero { min-height: auto; margin-top: -10px !important; padding: 68px 20px 58px; background: radial-gradient( circle at 0% 12%, rgba(113, 7, 187, .20), transparent 40% ), radial-gradient( circle at 100% 18%, rgba(15, 197, 186, .20), transparent 42% ), linear-gradient( 180deg, #ffffff 0%, #fafbff 100% ); } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-eyebrow { max-width: 94%; margin-bottom: 22px; font-size: 9px; line-height: 1.55; letter-spacing: .15em; text-align: center; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-title { max-width: 100%; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-main { font-size: clamp( 43px, 12vw, 60px ); line-height: .97; letter-spacing: -0.045em; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-gradient { margin-top: 6px; font-size: clamp( 41px, 11.5vw, 57px ); line-height: .98; letter-spacing: -0.043em; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-soft { max-width: 95%; margin-top: 10px; font-size: clamp( 32px, 8.5vw, 43px ); font-weight: 350; line-height: 1; letter-spacing: -0.035em; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-subtitle { max-width: 92%; margin-top: 28px; font-size: 15px; line-height: 1.5; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-subtitle-break { height: 14px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-actions { flex-direction: column; gap: 10px; margin-top: 27px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn { width: 100%; max-width: 360px; } } /* ========================================================= MOBILE PEQUEÑO HASTA 420px ========================================================= */ @media (max-width: 420px) { .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-hero { margin-top: -10px !important; padding: 58px 16px 50px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-main { font-size: 41px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-gradient { font-size: 39px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-title-soft { font-size: 31px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-subtitle { font-size: 14px; } .elementor-520 .elementor-element.elementor-element-5a5e564 .qq-logo-btn { max-width: 100%; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-34fbf16 */.elementor-520 .elementor-element.elementor-element-34fbf16 .qq-gradient{ background: linear-gradient( 90deg, #6D0FEA 0%, #5238F5 20%, #1E63FF 48%, #1296E8 75%, #15D1B3 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; display:inline-block; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-32f35d1 *//* ========================================================= QUICK QUICK — PROCESOS CREATIVOS 2 COLUMNAS / 2 FILAS ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 1240px; margin: 0 auto; } /* ========================================================= TARJETA BASE ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 340px; padding: 30px 32px 32px; overflow: hidden; isolation: isolate; border: 1px solid rgba(1,4,44,.07); border-radius: 26px; background: #F8F8FC; box-shadow: 0 14px 35px rgba(1,4,44,.055); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease, background .4s ease; } /* ========================================================= FONDO DECORATIVO ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card::before { content: ""; position: absolute; width: 280px; height: 280px; top: -190px; right: -100px; border-radius: 50%; opacity: .13; z-index: -1; transition: transform .5s ease, opacity .4s ease; } /* ========================================================= COLORES INDIVIDUALES ========================================================= */ /* 01 — VIOLETA */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-01::before { background: #7107BB; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-01 .qq-process-number { color: #7107BB; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-01 .qq-process-tag { color: #7107BB; background: rgba(113,7,187,.07); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-01 .qq-process-line { background: linear-gradient( 90deg, #7107BB, #6330F4 ); } /* 02 — AZUL */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-02::before { background: #0055FF; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-02 .qq-process-number { color: #0055FF; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-02 .qq-process-tag { color: #0055FF; background: rgba(0,85,255,.07); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-02 .qq-process-line { background: linear-gradient( 90deg, #4B2DFF, #0055FF ); } /* 03 — CYAN */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-03::before { background: #0A9AE6; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-03 .qq-process-number { color: #087FD0; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-03 .qq-process-tag { color: #087FD0; background: rgba(10,154,230,.08); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-03 .qq-process-line { background: linear-gradient( 90deg, #0055FF, #0A9AE6 ); } /* 04 — TURQUESA */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-04::before { background: #0FC5BA; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-04 .qq-process-number { color: #079E98; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-04 .qq-process-tag { color: #078D88; background: rgba(15,197,186,.09); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-04 .qq-process-line { background: linear-gradient( 90deg, #0A9AE6, #0FC5BA ); } /* ========================================================= CABECERA ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 45px; } /* ========================================================= NÚMERO ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-number { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 14px; font-weight: 850; line-height: 1; letter-spacing: -.02em; } /* ========================================================= TAG ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 11px; border-radius: 999px; font-family: "Bricolage Grotesque", sans-serif; font-size: 7.5px; font-weight: 850; line-height: 1; letter-spacing: .15em; } /* ========================================================= CONTENIDO ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-content { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; } /* ========================================================= TÍTULO ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card h3 { margin: 0 0 18px; max-width: 480px; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(29px, 3vw, 40px); font-weight: 850; line-height: .96; letter-spacing: -.045em; color: #01042C; transition: color .35s ease, transform .35s ease; } /* ========================================================= TEXTO ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card p { max-width: 510px; margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.62; color: #666979; transition: color .35s ease; } /* ========================================================= LÍNEA INFERIOR ========================================================= */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-line { position: absolute; left: 32px; bottom: 0; width: 72px; height: 4px; border-radius: 10px 10px 0 0; transition: width .4s ease; } /* ========================================================= HOVER GENERAL ========================================================= */ @media (hover:hover) { .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card:hover { transform: translateY(-7px); border-color: transparent; box-shadow: 0 24px 50px rgba(35,25,130,.14); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card:hover::before { transform: scale(1.55); opacity: .20; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card:hover .qq-process-line { width: calc(100% - 64px); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card:hover h3 { transform: translateX(4px); } /* ========================================== 01 HOVER ========================================== */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-01:hover { background: radial-gradient( circle at 100% 0%, rgba(113,7,187,.12), transparent 45% ), linear-gradient( 135deg, #FCF9FF, #F7F4FF ); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-01:hover h3 { color: #6010B4; } /* ========================================== 02 HOVER ========================================== */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-02:hover { background: radial-gradient( circle at 100% 0%, rgba(0,85,255,.12), transparent 45% ), linear-gradient( 135deg, #FAFBFF, #F3F6FF ); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-02:hover h3 { color: #1747CF; } /* ========================================== 03 HOVER ========================================== */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-03:hover { background: radial-gradient( circle at 100% 0%, rgba(10,154,230,.13), transparent 45% ), linear-gradient( 135deg, #F9FCFF, #F1F9FF ); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-03:hover h3 { color: #0877C3; } /* ========================================== 04 HOVER ========================================== */ .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-04:hover { background: radial-gradient( circle at 100% 0%, rgba(15,197,186,.15), transparent 45% ), linear-gradient( 135deg, #F8FFFE, #EFFBF9 ); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card-04:hover h3 { color: #078D88; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card { min-height: 330px; padding: 27px 26px 29px; border-radius: 23px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-top { margin-bottom: 38px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card h3 { font-size: clamp(27px, 3.5vw, 34px); } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card p { font-size: 13px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-line { left: 26px; } } /* ========================================================= MOBILE — 1 COLUMNA ========================================================= */ @media (max-width:767px) { .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-cards { grid-template-columns: 1fr; gap: 13px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card { min-height: auto; padding: 24px 21px 26px; border-radius: 20px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card::before { width: 220px; height: 220px; top: -155px; right: -85px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-top { margin-bottom: 31px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-number { font-size: 12px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-tag { min-height: 25px; padding: 0 9px; font-size: 7px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card h3 { margin-bottom: 14px; font-size: 27px; line-height: .98; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card p { max-width: 100%; font-size: 12.8px; line-height: 1.58; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-line { left: 21px; width: 60px; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media (max-width:420px) { .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card { padding: 22px 18px 24px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card h3 { font-size: 25px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card p { font-size: 12.5px; } .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-line { left: 18px; } } /* ========================================================= REDUCIR MOVIMIENTO ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card, .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card::before, .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card h3, .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-card p, .elementor-520 .elementor-element.elementor-element-32f35d1 .qq-process-line { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-cd5284d */.elementor-520 .elementor-element.elementor-element-cd5284d .qq-gradient{ background: linear-gradient( 90deg, #6D0FEA 0%, #5238F5 20%, #1E63FF 48%, #1296E8 75%, #15D1B3 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; display:inline-block; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-43de1c3 *//* ========================================================= QUICK QUICK — TIMELINE ÁGIL DESKTOP HORIZONTAL / MOBILE VERTICAL ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; width: 100%; max-width: 1240px; margin: 0 auto; padding-top: 18px; } /* ========================================================= LÍNEA PRINCIPAL ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-timeline::before { content: ""; position: absolute; top: 54px; left: 9%; right: 9%; height: 4px; border-radius: 999px; background: linear-gradient( 90deg, #7107BB 0%, #4B2DFF 30%, #0055FF 65%, #0FC5BA 100% ); box-shadow: 0 0 18px rgba(75,45,255,.18); z-index: 0; } /* ========================================================= STEP ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; z-index: 2; } /* ========================================================= NODE ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-node { position: relative; display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; flex: 0 0 74px; margin-bottom: 22px; border-radius: 50%; background: linear-gradient( 135deg, #7107BB 0%, #4B2DFF 30%, #0055FF 65%, #0FC5BA 100% ); border: 5px solid #ffffff; box-shadow: 0 12px 27px rgba(75,45,255,.24); transition: transform .35s ease, box-shadow .35s ease; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-node span { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #ffffff; } /* ========================================================= CARD ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card { position: relative; width: 100%; min-height: 190px; padding: 25px 20px 22px; overflow: hidden; isolation: isolate; border-radius: 22px; background: radial-gradient( circle at 100% 0%, rgba(15,197,186,.08), transparent 36% ), radial-gradient( circle at 0% 100%, rgba(113,7,187,.06), transparent 42% ), #ffffff; border: 1px solid rgba(1,4,44,.08); box-shadow: 0 11px 28px rgba(1,4,44,.045); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* ========================================================= LÍNEA SUPERIOR ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card::before { content: ""; position: absolute; top: 0; left: 22px; width: 68px; height: 4px; border-radius: 0 0 10px 10px; background: linear-gradient( 90deg, #7107BB, #0055FF, #0FC5BA ); transition: width .35s ease; } /* ========================================================= HALO ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -80px; bottom: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(0,85,255,.08), transparent 70% ); z-index: -1; transition: transform .4s ease; } /* ========================================================= LABEL ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-label { display: block; margin-bottom: 11px; font-family: "Bricolage Grotesque", sans-serif; font-size: 8px; font-weight: 850; line-height: 1; letter-spacing: .16em; color: #4B2DFF; } /* ========================================================= TITLE ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card h3 { margin: 0 0 11px; font-family: "Bricolage Grotesque", sans-serif; font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: #01042C; } /* ========================================================= TEXT ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card p { margin: 0; font-size: 13px; line-height: 1.55; color: #666A7D; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step:hover .qq-agile-node { transform: scale(1.08); box-shadow: 0 16px 34px rgba(75,45,255,.30); } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step:hover .qq-agile-card { transform: translateY(-5px); border-color: rgba(75,45,255,.16); box-shadow: 0 19px 40px rgba(75,45,255,.09); } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step:hover .qq-agile-card::before { width: calc(100% - 44px); } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step:hover .qq-agile-card::after { transform: scale(1.25); } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step:hover .qq-agile-card h3 { background: linear-gradient( 90deg, #7107BB 0%, #4B2DFF 35%, #0055FF 70%, #0FC5BA 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* ========================================================= BLOQUE DE CIERRE ========================================================= */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 16px; width: 100%; max-width: 920px; margin: 24px auto 0; padding: 18px 22px; border-radius: 18px; background: linear-gradient( 90deg, rgba(113,7,187,.07), rgba(75,45,255,.06), rgba(0,85,255,.055), rgba(15,197,186,.07) ); border: 1px solid rgba(75,45,255,.09); } /* ICONO */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient( 135deg, #7107BB, #0055FF, #0FC5BA ); font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 800; color: #ffffff; box-shadow: 0 8px 18px rgba(75,45,255,.18); } /* TEXTO CIERRE */ .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close p { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.015em; color: #01042C; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close strong { font-weight: 800; background: linear-gradient( 90deg, #7107BB, #4B2DFF, #0055FF, #0FC5BA ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-timeline { gap: 15px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-timeline::before { top: 48px; left: 8%; right: 8%; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-node { width: 64px; height: 64px; flex-basis: 64px; margin-bottom: 19px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-node span { font-size: 16px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card { min-height: 185px; padding: 22px 17px 20px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card h3 { font-size: 18px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card p { font-size: 12.5px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close { max-width: 760px; } } /* ========================================================= MOBILE — TIMELINE VERTICAL ========================================================= */ @media (max-width:767px) { .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-timeline { display: flex; flex-direction: column; gap: 0; padding-top: 0; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-timeline::before { top: 31px; bottom: 31px; left: 31px; right: auto; width: 4px; height: auto; background: linear-gradient( 180deg, #7107BB 0%, #4B2DFF 30%, #0055FF 65%, #0FC5BA 100% ); } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: start; gap: 15px; width: 100%; margin-bottom: 17px; text-align: left; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step:last-child { margin-bottom: 0; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-node { width: 62px; height: 62px; flex-basis: auto; margin: 0; z-index: 3; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card { min-height: auto; padding: 20px 18px; border-radius: 18px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-label { margin-bottom: 8px; font-size: 8px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card h3 { margin-bottom: 8px; font-size: 19px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card p { font-size: 13px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close { grid-template-columns: 40px minmax(0,1fr); gap: 13px; margin-top: 20px; padding: 16px; border-radius: 16px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 19px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close p { font-size: 14px; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media (max-width:420px) { .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-timeline::before { left: 27px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-step { grid-template-columns: 56px minmax(0,1fr); gap: 12px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-node { width: 54px; height: 54px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-node span { font-size: 14px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card { padding: 18px 16px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card h3 { font-size: 18px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-card p { font-size: 12.5px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close { grid-template-columns: 1fr; padding: 15px; } .elementor-520 .elementor-element.elementor-element-43de1c3 .qq-agile-close-icon { width: 38px; height: 38px; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-91f9f10 */.elementor-520 .elementor-element.elementor-element-91f9f10 .qq-gradient{ background: linear-gradient( 90deg, #6D0FEA 0%, #5238F5 20%, #1E63FF 48%, #1296E8 75%, #15D1B3 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; display:inline-block; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6f0db66 *//* ========================================================= QUICK QUICK — IMPLEMENTACIÓN COR ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card { position: relative; width: 100%; overflow: hidden; isolation: isolate; border-radius: 30px; background: radial-gradient( circle at 10% 10%, rgba(150, 61, 255, .38), transparent 34% ), radial-gradient( circle at 92% 88%, rgba(15, 197, 186, .28), transparent 40% ), linear-gradient( 125deg, #250961 0%, #4520B9 28%, #2851DD 58%, #0C83D0 78%, #10B9B4 100% ); box-shadow: 0 24px 54px rgba(30,30,120,.18); } /* ========================================================= DECORACIÓN ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card::before { content: ""; position: absolute; width: 420px; height: 420px; top: -240px; right: -120px; border-radius: 50%; background: rgba(255,255,255,.10); z-index: -1; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card::after { content: ""; position: absolute; width: 300px; height: 300px; left: -170px; bottom: -170px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); z-index: -1; } /* ========================================================= INNER ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card-inner { position: relative; z-index: 2; width: 100%; padding: 54px; } /* ========================================================= CABECERA ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-header { max-width: 820px; margin-bottom: 34px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-eyebrow { display: block; margin-bottom: 14px; font-family: "Bricolage Grotesque", sans-serif; font-size: 9px; font-weight: 850; line-height: 1; letter-spacing: .18em; color: rgba(255,255,255,.66); } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-header h2 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(40px, 4.6vw, 66px); font-weight: 850; line-height: .95; letter-spacing: -.05em; color: #ffffff; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-header h2 span { display: block; margin-top: 5px; background: linear-gradient( 90deg, #D7B9FF 0%, #9BCBFF 50%, #8EFFF1 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ========================================================= GRID ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } /* ========================================================= ITEM ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item { position: relative; min-height: 210px; padding: 26px 24px; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .35s ease, background .35s ease, border-color .35s ease; } /* ========================================================= NÚMERO ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-number { display: block; margin-bottom: 22px; font-family: "Bricolage Grotesque", sans-serif; font-size: 13px; font-weight: 850; color: #91F5EA; } /* ========================================================= TÍTULO ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item h3 { margin: 0 0 11px; max-width: 90%; font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 800; line-height: 1.06; letter-spacing: -.03em; color: #ffffff; } /* ========================================================= TEXTO ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item p { margin: 0; max-width: 95%; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item:hover { transform: translateY(-5px); background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.22); } } /* ========================================================= NOTA ========================================================= */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-note { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: start; gap: 13px; margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: rgba(1,4,44,.18); border: 1px solid rgba(255,255,255,.10); } /* ICONO */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-note-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); font-family: "Bricolage Grotesque", sans-serif; font-size: 14px; font-weight: 850; color: #ffffff; } /* TEXTO NOTA */ .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-note p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.70); } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-note strong { color: #ffffff; font-weight: 800; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card-inner { padding: 44px 38px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-header h2 { font-size: clamp(38px, 6vw, 54px); } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-grid { gap: 14px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item { min-height: 195px; padding: 23px 21px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item h3 { font-size: 20px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card { border-radius: 22px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card-inner { padding: 32px 24px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-header { margin-bottom: 25px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-eyebrow { font-size: 8px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-header h2 { font-size: clamp(35px, 10.5vw, 46px); } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-grid { grid-template-columns: 1fr; gap: 12px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item { min-height: auto; padding: 22px 19px; border-radius: 17px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-number { margin-bottom: 16px; font-size: 12px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item h3 { font-size: 19px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item p { font-size: 13px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-note { grid-template-columns: 34px minmax(0,1fr); gap: 11px; padding: 16px; border-radius: 16px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-note-icon { width: 34px; height: 34px; font-size: 12px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-note p { font-size: 11.8px; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media (max-width:420px) { .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-card-inner { padding: 28px 20px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-header h2 { font-size: 33px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item { padding: 20px 17px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item h3 { font-size: 18px; } .elementor-520 .elementor-element.elementor-element-6f0db66 .qq-cor-item p { font-size: 12.5px; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-a75c9a6 */.elementor-520 .elementor-element.elementor-element-a75c9a6 .qq-gradient{ background: linear-gradient( 90deg, #6D0FEA 0%, #5238F5 20%, #1E63FF 48%, #1296E8 75%, #15D1B3 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; display:inline-block; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-fcbbec9 *//* ========================================================= QUICK QUICK — PROCESO TIMELINE DESKTOP HORIZONTAL / MOBILE VERTICAL ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 1240px; margin: 0 auto; padding-top: 16px; } /* ========================================================= LÍNEA HORIZONTAL ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-timeline::before { content: ""; position: absolute; top: 52px; left: 9%; right: 9%; height: 4px; border-radius: 999px; background: linear-gradient( 90deg, #7107BB 0%, #4B2DFF 30%, #0055FF 66%, #16D6C6 100% ); box-shadow: 0 0 18px rgba(75,45,255,.16); z-index: 0; } /* ========================================================= PASO ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; z-index: 2; } /* ========================================================= NODO ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node { position: relative; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex: 0 0 72px; margin-bottom: 22px; border-radius: 50%; background: linear-gradient( 135deg, #7107BB 0%, #4B2DFF 30%, #0055FF 66%, #16D6C6 100% ); border: 5px solid #ffffff; box-shadow: 0 11px 26px rgba(75,45,255,.23); transition: transform .35s ease, box-shadow .35s ease; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node span { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #ffffff; } /* ========================================================= TARJETA ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content { position: relative; width: 100%; min-height: 230px; padding: 25px 21px 22px; overflow: hidden; isolation: isolate; border-radius: 22px; background: radial-gradient( circle at 100% 0%, rgba(22,214,198,.08), transparent 36% ), radial-gradient( circle at 0% 100%, rgba(113,7,187,.06), transparent 42% ), #ffffff; border: 1px solid rgba(1,4,44,.08); box-shadow: 0 11px 28px rgba(1,4,44,.045); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* ========================================================= LÍNEA SUPERIOR ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content::before { content: ""; position: absolute; top: 0; left: 22px; width: 68px; height: 4px; border-radius: 0 0 10px 10px; background: linear-gradient( 90deg, #7107BB, #0055FF, #16D6C6 ); transition: width .35s ease; } /* ========================================================= HALO ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content::after { content: ""; position: absolute; width: 150px; height: 150px; right: -80px; bottom: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(0,85,255,.08), transparent 70% ); z-index: -1; transition: transform .4s ease; } /* ========================================================= LABEL ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-label { display: block; margin-bottom: 11px; font-family: "Bricolage Grotesque", sans-serif; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .15em; color: #4B2DFF; } /* ========================================================= TÍTULO ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content h3 { margin: 0 0 11px; font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: #01042C; } /* ========================================================= TEXTO ========================================================= */ .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #666A7D; } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) { .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step:hover .qq-process-node { transform: scale(1.08); box-shadow: 0 15px 32px rgba(75,45,255,.30); } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step:hover .qq-process-content { transform: translateY(-5px); border-color: rgba(75,45,255,.16); box-shadow: 0 19px 40px rgba(75,45,255,.09); } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step:hover .qq-process-content::before { width: calc(100% - 44px); } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step:hover .qq-process-content::after { transform: scale(1.25); } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step:hover .qq-process-content h3 { background: linear-gradient( 90deg, #7107BB 0%, #4B2DFF 35%, #0055FF 70%, #0FC5BA 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-timeline { gap: 15px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-timeline::before { top: 47px; left: 8%; right: 8%; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node { width: 64px; height: 64px; flex-basis: 64px; margin-bottom: 19px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node span { font-size: 17px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content { min-height: 220px; padding: 22px 17px 20px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-label { font-size: 7.5px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content h3 { font-size: 19px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content p { font-size: 12.5px; } } /* ========================================================= MOBILE — TIMELINE VERTICAL ========================================================= */ @media (max-width:767px) { .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-timeline { display: flex; flex-direction: column; gap: 0; padding-top: 0; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-timeline::before { top: 31px; bottom: 31px; left: 31px; right: auto; width: 4px; height: auto; background: linear-gradient( 180deg, #7107BB 0%, #4B2DFF 30%, #0055FF 66%, #16D6C6 100% ); } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: start; gap: 15px; width: 100%; margin-bottom: 17px; text-align: left; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step:last-child { margin-bottom: 0; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node { width: 62px; height: 62px; flex-basis: auto; margin: 0; z-index: 3; border-width: 5px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node span { font-size: 16px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content { min-height: auto; padding: 20px 18px; border-radius: 18px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-label { margin-bottom: 8px; font-size: 8px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content h3 { margin-bottom: 8px; font-size: 19px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content p { font-size: 13px; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media (max-width:420px) { .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-timeline::before { left: 27px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-step { grid-template-columns: 56px minmax(0,1fr); gap: 12px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node { width: 54px; height: 54px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node span { font-size: 14px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content { padding: 18px 16px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content h3 { font-size: 18px; } .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content p { font-size: 12.5px; } } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-node, .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content, .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content::before, .elementor-520 .elementor-element.elementor-element-fcbbec9 .qq-process-content::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7eb59fe *//*========================================= CTA QUICK QUICK ==========================================*/ .qq-cta{ position:relative; overflow:hidden; padding:80px; border-radius:34px; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 40%), linear-gradient( 130deg, #7417E8 0%, #5529F7 20%, #255EFF 55%, #16D7C7 100% ); background-size:250% 250%; animation:gradientMove 10s ease infinite; box-shadow: 0 30px 80px rgba(82,38,255,.18); } /*========================================= LUZ SUPERIOR ==========================================*/ .qq-cta:before{ content:""; position:absolute; top:-260px; right:-180px; width:700px; height:700px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); filter:blur(60px); pointer-events:none; } /*========================================= LUZ INFERIOR ==========================================*/ .qq-cta:after{ content:""; position:absolute; left:-250px; bottom:-260px; width:650px; height:650px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); filter:blur(70px); pointer-events:none; } /*========================================= Borde Glass ==========================================*/ .qq-cta{ border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(20px); } /*========================================= Contenido ==========================================*/ .qq-cta-content{ position:relative; z-index:5; } /*========================================= Eyebrow ==========================================*/ .qq-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.24em; font-weight:700; color:#FFFFFFAA; text-transform:uppercase; margin-bottom:24px; } .qq-eyebrow:before{ content:""; width:10px; height:10px; border-radius:50%; background:#17D7C7; box-shadow: 0 0 18px #17D7C7; } /*========================================= Titulo ==========================================*/ .qq-cta h2{ font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(46px,5vw,72px); font-weight:900; line-height:.95; color:white; margin:0 0 30px; letter-spacing:-.05em; } .qq-cta h2 span{ background:linear-gradient( 90deg, #FFFFFF, #DFFBFF ); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } /*========================================= Texto ==========================================*/ .qq-cta p{ font-size:22px; line-height:1.6; color:rgba(255,255,255,.88); margin-bottom:42px; } /*========================================= Botones ==========================================*/ .qq-buttons{ display:flex; gap:18px; flex-wrap:wrap; } /*========================================= Boton Principal ==========================================*/ .qq-btn-primary{ display:inline-flex; align-items:center; justify-content:center; padding:18px 34px; background:white; border-radius:999px; font-weight:700; font-size:18px; text-decoration:none; color:#5529F7; transition:.35s; } .qq-btn-primary:hover{ transform:translateY(-4px); box-shadow: 0 20px 35px rgba(0,0,0,.15); } /*========================================= Boton secundario ==========================================*/ .qq-btn-secondary{ display:inline-flex; align-items:center; justify-content:center; padding:18px 34px; border-radius:999px; border:1px solid rgba(255,255,255,.35); text-decoration:none; font-size:18px; font-weight:600; color:white; transition:.35s; background:rgba(255,255,255,.05); backdrop-filter:blur(12px); } .qq-btn-secondary:hover{ background:rgba(255,255,255,.15); transform:translateY(-4px); } /*========================================= Animacion ==========================================*/ @keyframes gradientMove{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } /*========================================= TABLET ==========================================*/ @media(max-width:1024px){ .qq-cta{ padding:60px; margin:90px 24px; } .qq-cta h2{ font-size:56px; } .qq-cta p{ font-size:20px; } } /*========================================= MOBILE ==========================================*/ @media(max-width:767px){ .qq-cta{ padding:40px 28px; border-radius:24px; margin:60px 18px; } .qq-cta-content{ max-width:100%; } .qq-cta h2{ font-size:42px; line-height:1; } .qq-cta p{ font-size:18px; } .qq-buttons{ flex-direction:column; } .qq-btn-primary, .qq-btn-secondary{ width:100%; font-size:17px; } }/* End custom CSS */