.elementor-523 .elementor-element.elementor-element-599e0de{--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-523 .elementor-element.elementor-element-287d8e0.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-523 .elementor-element.elementor-element-dd7a4c5{--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-523 .elementor-element.elementor-element-9ed33fe{--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-523 .elementor-element.elementor-element-9ed33fe.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-523 .elementor-element.elementor-element-1740090.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-523 .elementor-element.elementor-element-1a90c9d.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-523 .elementor-element.elementor-element-7d1c296{--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-523 .elementor-element.elementor-element-897c2d0.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-523 .elementor-element.elementor-element-d8f7628{--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-523 .elementor-element.elementor-element-cb5ef77{--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:50px;--padding-left:0px;--padding-right:0px;}.elementor-523 .elementor-element.elementor-element-5f4da96{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-523 .elementor-element.elementor-element-5f4da96.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-523 .elementor-element.elementor-element-5f4da96 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:12px;letter-spacing:6.9px;color:#01042C;}.elementor-523 .elementor-element.elementor-element-18bfa16.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-523 .elementor-element.elementor-element-18bfa16{text-align:center;}.elementor-523 .elementor-element.elementor-element-18bfa16 .elementor-heading-title{font-family:"Bricolage Grotesque", Sans-serif;font-size:71px;font-weight:900;color:#01042C;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper .eael-accordion_media-list{background-color:#FAFAFA;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper .eael-accordion_media-lists .eael-accordion_media-list:not(.active):hover{background-color:#01042C;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper .eael-accordion_media-list.active{background-color:var( --e-global-color-primary );}.elementor-523 .elementor-element.elementor-element-48da4c4.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion{border-radius:20px 20px 20px 20px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper{border-radius:20px 20px 20px 20px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .eael-accordion-tab-title, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper .eael-accordion_media-list .eael-accordion_media-content .eael-accordion_media-title{font-family:"Bricolage Grotesque", Sans-serif;font-weight:500;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-accordion-icon{font-size:16px;color:#333;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header svg.fa-accordion-icon{height:16px;width:16px;line-height:16px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list .eael-accordion_media-icon i{font-size:16px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list .eael-accordion_media-icon svg{height:16px;width:16px;line-height:16px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-accordion-icon, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper .eael-accordion_media-lists .eael-accordion_media-list{gap:10px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header{margin:0px 0px 10px 0px;border-radius:20px 20px 20px 20px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper .eael-accordion_media-lists .eael-accordion_media-title{margin:0px 0px 10px 0px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .eael-accordion-tab-title{color:#333;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-content .eael-accordion_media-title{color:#333;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-accordion-icon-svg svg{color:#333;fill:#333;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header svg{fill:#333;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list .eael-accordion_media-icon{color:#333;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-wrapper .eael-accordion_media-lists .eael-accordion_media-list{border-radius:20px 20px 20px 20px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover .eael-accordion-tab-title, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list:not(.active):hover .eael-accordion_media-title{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover .fa-accordion-icon{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover .fa-accordion-icon svg{color:#fff;fill:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover svg.fa-accordion-icon{fill:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list:hover .eael-accordion_media-icon i{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list:hover .eael-accordion_media-icon svg{fill:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .eael-accordion-tab-title{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-accordion-icon{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-accordion-icon svg{color:#fff;fill:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active svg.fa-accordion-icon{fill:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list.active .eael-accordion_media-icon i{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list.active .eael-accordion_media-icon svg{fill:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-content{color:#01042C;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list .eael-accordion_media-content .eael-accordion_media-description{color:#01042C;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-content, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-accordion_media-list .eael-accordion_media-content .eael-accordion_media-description{font-family:"Bricolage Grotesque", Sans-serif;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle, .elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header > .fa-toggle-svg{font-size:16px;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header svg.fa-toggle{height:16px;width:16px;line-height:16px;fill:#444;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle{color:#444;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle svg{color:#444;fill:#444;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-toggle{color:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-toggle svg{color:#fff;fill:#fff;}.elementor-523 .elementor-element.elementor-element-48da4c4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active svg.fa-toggle{fill:#fff;}.elementor-523 .elementor-element.elementor-element-ae916fe{--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:60px;--padding-bottom:080px;--padding-left:0px;--padding-right:0px;}.elementor-523 .elementor-element.elementor-element-b126177.xpro-widget-bg-overlay:before{transition:background 0.3s;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-523 .elementor-element.elementor-element-5f4da96 .elementor-heading-title{font-size:15px;}}@media(min-width:768px){.elementor-523 .elementor-element.elementor-element-9ed33fe{--width:47.291%;}.elementor-523 .elementor-element.elementor-element-7d1c296{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-287d8e0 *//* ========================================================= QUICK QUICK — HERO CONTACTO FULL WIDTH / RESPONSIVE ========================================================= */ /* ========================================================= RESET ELEMENTOR ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 { margin: 0 !important; padding: 0 !important; } .elementor-523 .elementor-element.elementor-element-287d8e0 .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* ========================================================= TIPOGRAFÍA ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero * { box-sizing: border-box; font-family: "Bricolage Grotesque", sans-serif !important; } /* ========================================================= HERO FULL WIDTH REAL ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero { position: relative; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -10px !important; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 0% 15%, rgba(113, 7, 187, .26) 0%, rgba(113, 7, 187, .10) 24%, transparent 47% ), radial-gradient( circle at 100% 10%, rgba(15, 197, 186, .23) 0%, rgba(0, 153, 255, .08) 25%, transparent 46% ), radial-gradient( circle at 65% 110%, rgba(75, 45, 255, .10) 0%, transparent 42% ), linear-gradient( 115deg, #f7f1ff 0%, #f5f6ff 49%, #eafaf9 100% ); } /* HALOS */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero::before { content: ""; position: absolute; width: 620px; height: 620px; left: -330px; top: -290px; border-radius: 50%; background: radial-gradient( circle, rgba(113, 7, 187, .15), transparent 68% ); filter: blur(10px); pointer-events: none; z-index: -1; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero::after { content: ""; position: absolute; width: 680px; height: 680px; right: -350px; bottom: -380px; border-radius: 50%; background: radial-gradient( circle, rgba(15, 197, 186, .16), transparent 68% ); filter: blur(12px); pointer-events: none; z-index: -1; } /* ========================================================= INNER ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: clamp(45px, 6vw, 95px); width: 100%; max-width: 1380px; min-height: 700px; margin: 0 auto; padding: 90px clamp(32px, 4vw, 65px) 82px; z-index: 2; } /* ========================================================= COPY ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-copy { min-width: 0; } /* ========================================================= EYEBROW ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 27px; font-size: 11px; font-weight: 750; line-height: 1.3; letter-spacing: .20em; text-transform: uppercase; color: #01042C; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: linear-gradient( 135deg, #7107BB, #0055FF, #0FC5BA ); box-shadow: 0 0 14px rgba(75, 45, 255, .30); } /* ========================================================= H1 ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title { width: 100%; margin: 0; padding: 0; letter-spacing: -.06em; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-dark, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-gradient, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-soft { display: block; } /* LÍNEA 01 */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-dark { font-size: clamp( 62px, 6.5vw, 105px ); font-weight: 850; line-height: .88; color: #01042C; } /* LÍNEA 02 */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-gradient { margin-top: 3px; padding-right: .05em; font-size: clamp( 62px, 6.5vw, 105px ); font-weight: 850; line-height: .90; background: linear-gradient( 90deg, #7107BB 0%, #5522FF 24%, #2057FF 50%, #008CEB 74%, #0FC5BA 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* LÍNEA 03 */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-soft { max-width: 720px; margin-top: 13px; font-size: clamp( 34px, 3.5vw, 55px ); font-weight: 420; line-height: .98; letter-spacing: -.045em; color: #01042C; } /* ========================================================= DESCRIPCIÓN ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-description { width: 100%; max-width: 650px; margin: 30px 0 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: #55596B; text-wrap: balance; } /* ========================================================= ACCIONES ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 750; line-height: 1; text-decoration: none !important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; } /* PRIMARIO */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn-primary { color: #ffffff !important; background: linear-gradient( 90deg, #7107BB, #4B2DFF 32%, #0055FF 67%, #0FC5BA ); box-shadow: 0 12px 28px rgba(75, 45, 255, .20); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn-primary span { font-size: 18px; transition: transform .3s ease; } /* SECUNDARIO */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn-secondary { color: #01042C !important; background: rgba(255, 255, 255, .64); border: 1px solid rgba(1, 4, 44, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ========================================================= VISUAL ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-visual { position: relative; width: 100%; min-height: 500px; display: flex; align-items: center; justify-content: center; } /* ========================================================= ORBITAS ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(75, 45, 255, .10); pointer-events: none; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit-01 { width: 450px; height: 450px; animation: qqContactOrbit 18s linear infinite; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit-02 { width: 340px; height: 340px; border-color: rgba(15, 197, 186, .15); animation: qqContactOrbitReverse 15s linear infinite; } /* ========================================================= TARJETA PRINCIPAL ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-main-card { position: relative; width: min(100%, 430px); padding: 27px; overflow: hidden; border-radius: 29px; background: rgba(255, 255, 255, .80); border: 1px solid rgba(255, 255, 255, .70); box-shadow: 0 28px 65px rgba(55, 36, 170, .13); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: rotate(-2deg); transition: transform .45s ease, box-shadow .45s ease; z-index: 3; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-main-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -100px; border-radius: 50%; background: rgba(15, 197, 186, .12); pointer-events: none; } /* ========================================================= CARD TOP ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-status { display: inline-flex; align-items: center; gap: 8px; font-size: 8px; font-weight: 800; letter-spacing: .14em; color: #4B2DFF; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-status span { width: 7px; height: 7px; border-radius: 50%; background: #0FC5BA; box-shadow: 0 0 0 5px rgba(15, 197, 186, .10); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-arrow { display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; flex: 0 0 37px; border-radius: 50%; background: #01042C; font-size: 16px; color: #ffffff; } /* ========================================================= MESSAGE ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-message { display: flex; flex-direction: column; gap: 10px; margin-top: 35px; padding: 22px 21px; border-radius: 18px; background: linear-gradient( 135deg, rgba(113, 7, 187, .06), rgba(0, 85, 255, .05), rgba(15, 197, 186, .06) ); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-message-line { display: block; height: 10px; border-radius: 999px; background: rgba(1, 4, 44, .09); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-line-01 { width: 82%; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-line-02 { width: 100%; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-line-03 { width: 61%; } /* ========================================================= TAGS ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-tags span { display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px; border-radius: 999px; background: rgba(75, 45, 255, .065); font-size: 8px; font-weight: 700; color: #4B2DFF; } /* ========================================================= FOOTER CARD ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-footer { display: flex; align-items: center; gap: 11px; margin-top: 28px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; background: linear-gradient( 135deg, #7107BB, #0055FF, #0FC5BA ); font-size: 12px; font-weight: 850; color: #ffffff; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-footer strong, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-footer small { display: block; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-footer strong { font-size: 12px; font-weight: 800; color: #01042C; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-card-footer small { margin-top: 2px; font-size: 9px; color: #868997; } /* ========================================================= TARJETAS FLOTANTES ========================================================= */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card { position: absolute; display: flex; align-items: center; gap: 11px; min-width: 175px; padding: 12px 14px; border-radius: 17px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .76); box-shadow: 0 14px 35px rgba(40, 30, 150, .11); backdrop-filter: blur(12px); z-index: 5; animation: qqContactFloat 5s ease-in-out infinite; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-floating-01 { top: 65px; right: -10px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-floating-02 { left: -20px; bottom: 55px; animation-delay: 1s; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-floating-icon { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 12px; background: linear-gradient( 135deg, #7107BB, #0055FF ); font-size: 15px; font-weight: 700; color: #ffffff; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card span, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card strong { display: block; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card span { margin-bottom: 2px; font-size: 6.5px; font-weight: 800; letter-spacing: .12em; color: #777A8B; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card strong { font-size: 10px; font-weight: 800; color: #01042C; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-main-card:hover { transform: rotate(0deg) translateY(-7px); box-shadow: 0 34px 75px rgba(55, 36, 170, .18); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 17px 34px rgba(75, 45, 255, .27); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn-primary:hover span { transform: translateX(4px); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn-secondary:hover { transform: translateY(-3px); background: #ffffff; border-color: rgba(75, 45, 255, .20); } } /* ========================================================= ANIMACIONES ========================================================= */ @keyframes qqContactFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes qqContactOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes qqContactOrbitReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width:1250px) { .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 45px; min-height: 650px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-dark, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-gradient { font-size: clamp( 55px, 6vw, 82px ); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-soft { font-size: clamp( 31px, 3.4vw, 45px ); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-visual { min-height: 460px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-floating-01 { right: 0; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-floating-02 { left: 0; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero-inner { grid-template-columns: 1fr; gap: 50px; min-height: auto; padding: 75px 34px 70px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-copy { max-width: 800px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-dark, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-gradient { font-size: clamp( 58px, 9vw, 84px ); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-soft { max-width: 700px; font-size: clamp( 34px, 5vw, 48px ); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-description { max-width: 680px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-visual { width: min(100%, 620px); min-height: 450px; margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero { margin-top: -10px !important; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero-inner { gap: 42px; padding: 58px 20px 55px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-eyebrow { margin-bottom: 22px; font-size: 8px; letter-spacing: .15em; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-dark, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-gradient { font-size: clamp( 45px, 13vw, 62px ); line-height: .92; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-soft { margin-top: 10px; font-size: clamp( 29px, 8vw, 38px ); } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-description { margin-top: 24px; font-size: 14px; line-height: 1.55; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-actions { margin-top: 25px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn { min-height: 47px; padding: 0 18px; font-size: 12px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-visual { min-height: 390px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-main-card { width: min(90%, 390px); padding: 23px; border-radius: 24px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card { min-width: 145px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-floating-01 { top: 25px; right: 0; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-floating-02 { left: 0; bottom: 25px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit-01 { width: 360px; height: 360px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit-02 { width: 275px; height: 275px; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media (max-width:460px) { .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-hero-inner { padding: 52px 16px 48px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-dark, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-gradient { font-size: 42px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-title-soft { font-size: 28px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-actions { flex-direction: column; align-items: stretch; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn { width: 100%; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-visual { min-height: 340px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-main-card { width: 94%; } /* En pantallas muy pequeñas ocultamos las tarjetas flotantes para no recargar. */ .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card { display: none; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit-01 { width: 310px; height: 310px; } .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit-02 { width: 235px; height: 235px; } } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-main-card, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-floating-card, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-orbit, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn, .elementor-523 .elementor-element.elementor-element-287d8e0 .qq-contact-btn span { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-1a90c9d *//* ========================================================= QUICK QUICK — CONTACTO ESTRUCTURA REAL ELEMENTOR FORMULARIO + TARJETAS ========================================================= */ /* ========================================================= RESET GENERAL ========================================================= */ .qq-contact-section-inner, .qq-contact-section-inner *, .qq-contact-left, .qq-contact-left *, .qq-contact-right, .qq-contact-right *, .qq-contact-form-wrap, .qq-contact-form-wrap * { box-sizing: border-box; font-family: "Bricolage Grotesque", sans-serif !important; } /* ========================================================= CONTENEDOR EXTERIOR ========================================================= */ .qq-contact-section-inner { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: clamp(40px, 5vw, 70px) !important; width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 90px 24px 90px !important; } /* ========================================================= COLUMNA IZQUIERDA ========================================================= */ .qq-contact-left { width: 55% !important; max-width: 650px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } /* ========================================================= COLUMNA DERECHA ========================================================= */ .qq-contact-right { width: 45% !important; max-width: 470px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } /* ========================================================= EYEBROW ========================================================= */ .qq-contact-left .qq-contact-section-eyebrow { margin-bottom: 12px !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .17em !important; text-transform: uppercase !important; color: #4B2DFF !important; } /* ========================================================= TÍTULO ========================================================= */ .qq-contact-left .qq-contact-section-title { max-width: 620px !important; margin: 0 0 14px !important; font-size: clamp( 38px, 4vw, 58px ) !important; font-weight: 850 !important; line-height: .96 !important; letter-spacing: -.05em !important; color: #01042C !important; } /* ========================================================= DESCRIPCIÓN ========================================================= */ .qq-contact-left .qq-contact-section-description { max-width: 590px !important; margin: 0 0 28px !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #5C6070 !important; } /* ========================================================= WRAP FORMULARIO ========================================================= */ .qq-contact-form-wrap { width: 100% !important; padding: 26px !important; border-radius: 24px !important; background: linear-gradient( 135deg, #F8F5FF 0%, #F6F8FF 50%, #F0FBFA 100% ) !important; border: 1px solid rgba(75,45,255,.08) !important; box-shadow: 0 16px 40px rgba(1,4,44,.05) !important; } /* ========================================================= WPFORMS GENERAL ========================================================= */ .qq-contact-form-wrap .wpforms-container, .qq-contact-form-wrap form, .qq-contact-form-wrap .wpforms-field-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* ========================================================= CAMPOS ========================================================= */ .qq-contact-form-wrap .wpforms-field { width: 100% !important; max-width: 100% !important; padding: 0 0 18px !important; margin: 0 !important; } /* ========================================================= LABELS ========================================================= */ .qq-contact-form-wrap .wpforms-field-label { display: block !important; margin-bottom: 8px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #01042C !important; } .qq-contact-form-wrap .wpforms-required-label { color: #4B2DFF !important; } /* ========================================================= INPUTS — ANCHO COMPLETO REAL ========================================================= */ .qq-contact-form-wrap input[type="text"], .qq-contact-form-wrap input[type="email"], .qq-contact-form-wrap input[type="tel"], .qq-contact-form-wrap input[type="number"], .qq-contact-form-wrap input[type="url"], .qq-contact-form-wrap select, .qq-contact-form-wrap textarea { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 50px !important; padding: 12px 14px !important; margin: 0 !important; border: 1px solid rgba(1,4,44,.11) !important; border-radius: 13px !important; outline: none !important; background: rgba(255,255,255,.92) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #01042C !important; box-shadow: none !important; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important; } /* ========================================================= WPFORMS INPUT CONTAINERS ========================================================= */ .qq-contact-form-wrap .wpforms-field-medium, .qq-contact-form-wrap .wpforms-field-large, .qq-contact-form-wrap .wpforms-field-small { width: 100% !important; max-width: 100% !important; } /* ========================================================= FILAS INTERNAS ========================================================= */ .qq-contact-form-wrap .wpforms-field-row { display: flex !important; width: 100% !important; max-width: 100% !important; gap: 16px !important; margin: 0 !important; } .qq-contact-form-wrap .wpforms-field-row-block { flex: 1 1 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; } /* ========================================================= COLUMNAS WPFORMS ========================================================= */ .qq-contact-form-wrap .wpforms-layout-column, .qq-contact-form-wrap [class*="wpforms-layout-column"] { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* ========================================================= TEXTAREA ========================================================= */ .qq-contact-form-wrap textarea { min-height: 150px !important; resize: vertical !important; } /* ========================================================= SELECT ========================================================= */ .qq-contact-form-wrap select { appearance: auto !important; -webkit-appearance: auto !important; } /* ========================================================= PLACEHOLDER ========================================================= */ .qq-contact-form-wrap input::placeholder, .qq-contact-form-wrap textarea::placeholder { color: rgba(1,4,44,.36) !important; } /* ========================================================= FOCUS ========================================================= */ .qq-contact-form-wrap input:focus, .qq-contact-form-wrap select:focus, .qq-contact-form-wrap textarea:focus { border-color: #4B2DFF !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(75,45,255,.08) !important; } /* ========================================================= BOTÓN ========================================================= */ .qq-contact-form-wrap button[type="submit"], .qq-contact-form-wrap .wpforms-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 49px !important; padding: 0 22px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 90deg, #7107BB 0%, #4B2DFF 32%, #0055FF 67%, #0FC5BA 100% ) !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1 !important; color: #ffffff !important; box-shadow: 0 11px 25px rgba(75,45,255,.20) !important; cursor: pointer !important; transition: transform .25s ease, box-shadow .25s ease !important; } @media (hover:hover) { .qq-contact-form-wrap button[type="submit"]:hover, .qq-contact-form-wrap .wpforms-submit:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 30px rgba(75,45,255,.27) !important; } } /* ========================================================= ERRORES ========================================================= */ .qq-contact-form-wrap label.wpforms-error { margin-top: 6px !important; font-size: 10px !important; color: #C92A3D !important; } /* ========================================================= TARJETAS DERECHA ========================================================= */ .qq-contact-right .qq-contact-info-column { display: flex !important; flex-direction: column !important; gap: 14px !important; } /* ========================================================= TARJETA INFO ========================================================= */ .qq-contact-right .qq-contact-info-card { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 16px !important; align-items: start !important; padding: 22px !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid rgba(1,4,44,.08) !important; box-shadow: 0 10px 28px rgba(1,4,44,.05) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; } @media (hover:hover) { .qq-contact-right .qq-contact-info-card:hover { transform: translateY(-4px) !important; border-color: rgba(75,45,255,.14) !important; box-shadow: 0 16px 34px rgba(1,4,44,.08) !important; } } /* ========================================================= ICONO ========================================================= */ .qq-contact-right .qq-contact-info-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; border-radius: 15px !important; background: linear-gradient( 135deg, rgba(113,7,187,.10), rgba(0,85,255,.10), rgba(15,197,186,.12) ) !important; font-size: 18px !important; font-weight: 800 !important; color: #4B2DFF !important; } /* ========================================================= LABEL ========================================================= */ .qq-contact-right .qq-contact-info-label { display: block !important; margin-bottom: 5px !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .15em !important; color: #4B2DFF !important; } /* ========================================================= TÍTULO TARJETA ========================================================= */ .qq-contact-right .qq-contact-info-content h3 { margin: 0 0 6px !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.025em !important; color: #01042C !important; } /* ========================================================= TEXTO TARJETA ========================================================= */ .qq-contact-right .qq-contact-info-content p { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #686B78 !important; } /* ========================================================= LINKS ========================================================= */ .qq-contact-right .qq-contact-info-content a { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; font-weight: 750 !important; color: #4B2DFF !important; text-decoration: none !important; } .qq-contact-right .qq-contact-info-content a span { transition: transform .25s ease !important; } @media (hover:hover) { .qq-contact-right .qq-contact-info-content a:hover span { transform: translateX(4px) !important; } } /* ========================================================= TARJETA ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-card { position: relative !important; overflow: hidden !important; padding: 26px !important; border-radius: 22px !important; background: linear-gradient( 125deg, #21084F 0%, #4324BC 46%, #0867C9 75%, #0AA8AA 100% ) !important; box-shadow: 0 15px 36px rgba(40,30,150,.13) !important; } .qq-contact-right .qq-contact-help-card::before { content: ""; position: absolute; width: 190px; height: 190px; right: -100px; top: -110px; border-radius: 50%; background: rgba(255,255,255,.07); } /* ========================================================= BADGE ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-badge { display: inline-flex !important; align-items: center !important; min-height: 25px !important; padding: 0 9px !important; margin-bottom: 14px !important; border-radius: 999px !important; background: rgba(255,255,255,.11) !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .13em !important; color: #ffffff !important; } /* ========================================================= TÍTULO ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-card h3 { position: relative !important; max-width: 390px !important; margin: 0 0 11px !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #ffffff !important; } /* ========================================================= TEXTO ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-card p { position: relative !important; max-width: 400px !important; margin: 0 !important; font-size: 12px !important; line-height: 1.55 !important; color: rgba(255,255,255,.72) !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .qq-contact-section-inner { flex-direction: column !important; gap: 45px !important; max-width: 780px !important; padding: 75px 26px !important; } .qq-contact-left, .qq-contact-right { width: 100% !important; max-width: none !important; } .qq-contact-right .qq-contact-info-column { display: grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap: 14px !important; } .qq-contact-right .qq-contact-help-card { grid-column: 1 / -1 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .qq-contact-section-inner { padding: 58px 18px !important; gap: 38px !important; } .qq-contact-left .qq-contact-section-title { font-size: 38px !important; line-height: .98 !important; } .qq-contact-left .qq-contact-section-description { margin-bottom: 24px !important; font-size: 14px !important; } .qq-contact-form-wrap { padding: 20px !important; border-radius: 19px !important; } .qq-contact-form-wrap .wpforms-field-row { flex-direction: column !important; gap: 0 !important; } .qq-contact-right .qq-contact-info-column { grid-template-columns: 1fr !important; gap: 11px !important; } .qq-contact-right .qq-contact-info-card { padding: 18px !important; border-radius: 17px !important; } .qq-contact-right .qq-contact-help-card { padding: 22px !important; border-radius: 19px !important; } .qq-contact-right .qq-contact-help-card h3 { font-size: 21px !important; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media (max-width:420px) { .qq-contact-section-inner { padding-left: 14px !important; padding-right: 14px !important; } .qq-contact-form-wrap { padding: 17px !important; } .qq-contact-left .qq-contact-section-title { font-size: 34px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-dd7a4c5 *//* ========================================================= QUICK QUICK — CONTACTO ESTRUCTURA REAL ELEMENTOR ========================================================= */ /* ========================================================= RESET GENERAL ========================================================= */ .qq-contact-section-inner, .qq-contact-section-inner *, .qq-contact-left, .qq-contact-left *, .qq-contact-right, .qq-contact-right *, .qq-contact-form-wrap, .qq-contact-form-wrap * { box-sizing: border-box; font-family: "Bricolage Grotesque", sans-serif !important; } /* ========================================================= CONTENEDOR EXTERIOR ========================================================= */ .qq-contact-section-inner { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: clamp(40px, 5vw, 70px) !important; width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 90px 24px 90px !important; } /* ========================================================= COLUMNA IZQUIERDA ========================================================= */ .qq-contact-left { width: 55% !important; max-width: 650px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } /* ========================================================= COLUMNA DERECHA ========================================================= */ .qq-contact-right { width: 45% !important; max-width: 470px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } /* ========================================================= EYEBROW IZQUIERDO ========================================================= */ .qq-contact-left .qq-contact-section-eyebrow { margin-bottom: 12px !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .17em !important; text-transform: uppercase !important; color: #4B2DFF !important; } /* ========================================================= TÍTULO ========================================================= */ .qq-contact-left .qq-contact-section-title { max-width: 620px !important; margin: 0 0 14px !important; font-size: clamp( 38px, 4vw, 58px ) !important; font-weight: 850 !important; line-height: .96 !important; letter-spacing: -.05em !important; color: #01042C !important; } /* ========================================================= DESCRIPCIÓN ========================================================= */ .qq-contact-left .qq-contact-section-description { max-width: 590px !important; margin: 0 0 28px !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #5C6070 !important; } /* ========================================================= WRAP FORMULARIO ========================================================= */ .qq-contact-form-wrap { width: 100% !important; padding: 26px !important; border-radius: 24px !important; background: linear-gradient( 135deg, #F8F5FF 0%, #F6F8FF 50%, #F0FBFA 100% ) !important; border: 1px solid rgba(75,45,255,.08) !important; box-shadow: 0 16px 40px rgba(1,4,44,.05) !important; } /* ========================================================= WPFORMS GENERAL ========================================================= */ .qq-contact-form-wrap .wpforms-container { width: 100% !important; margin: 0 !important; } .qq-contact-form-wrap .wpforms-field-container { width: 100% !important; } /* ========================================================= CAMPOS ========================================================= */ .qq-contact-form-wrap .wpforms-field { padding: 0 0 18px !important; } /* ========================================================= LABELS ========================================================= */ .qq-contact-form-wrap .wpforms-field-label { display: block !important; margin-bottom: 8px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #01042C !important; } .qq-contact-form-wrap .wpforms-required-label { color: #4B2DFF !important; } /* ========================================================= INPUTS / SELECT / TEXTAREA ========================================================= */ .qq-contact-form-wrap input[type="text"], .qq-contact-form-wrap input[type="email"], .qq-contact-form-wrap input[type="tel"], .qq-contact-form-wrap input[type="number"], .qq-contact-form-wrap select, .qq-contact-form-wrap textarea { width: 100% !important; min-height: 50px !important; padding: 12px 14px !important; border: 1px solid rgba(1,4,44,.11) !important; border-radius: 13px !important; outline: none !important; background: rgba( 255, 255, 255, .88 ) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #01042C !important; box-shadow: none !important; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important; } /* TEXTAREA */ .qq-contact-form-wrap textarea { min-height: 150px !important; resize: vertical !important; } /* PLACEHOLDER */ .qq-contact-form-wrap input::placeholder, .qq-contact-form-wrap textarea::placeholder { color: rgba( 1, 4, 44, .36 ) !important; } /* ========================================================= FOCUS ========================================================= */ .qq-contact-form-wrap input:focus, .qq-contact-form-wrap select:focus, .qq-contact-form-wrap textarea:focus { border-color: #4B2DFF !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba( 75, 45, 255, .08 ) !important; } /* ========================================================= DOS COLUMNAS INTERNAS WPFORMS SI WPForms YA LAS CREA EN DOS COLUMNAS ========================================================= */ .qq-contact-form-wrap .wpforms-field-row { display: flex !important; gap: 16px !important; } .qq-contact-form-wrap .wpforms-field-row-block { flex: 1 1 0 !important; } /* ========================================================= BOTÓN ========================================================= */ .qq-contact-form-wrap button[type="submit"], .qq-contact-form-wrap .wpforms-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 49px !important; padding: 0 22px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 90deg, #7107BB 0%, #4B2DFF 32%, #0055FF 67%, #0FC5BA 100% ) !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1 !important; color: #ffffff !important; box-shadow: 0 11px 25px rgba( 75, 45, 255, .20 ) !important; cursor: pointer !important; transition: transform .25s ease, box-shadow .25s ease !important; } @media (hover:hover) { .qq-contact-form-wrap button[type="submit"]:hover, .qq-contact-form-wrap .wpforms-submit:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 30px rgba( 75, 45, 255, .27 ) !important; } } /* ========================================================= ERRORES ========================================================= */ .qq-contact-form-wrap label.wpforms-error { margin-top: 6px !important; font-size: 10px !important; color: #C92A3D !important; } /* ========================================================= TARJETAS DERECHA ========================================================= */ .qq-contact-right .qq-contact-info-column { display: flex !important; flex-direction: column !important; gap: 14px !important; } /* ========================================================= TARJETA INFO ========================================================= */ .qq-contact-right .qq-contact-info-card { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 16px !important; align-items: start !important; padding: 22px !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid rgba( 1, 4, 44, .08 ) !important; box-shadow: 0 10px 28px rgba( 1, 4, 44, .05 ) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; } @media (hover:hover) { .qq-contact-right .qq-contact-info-card:hover { transform: translateY(-4px) !important; border-color: rgba( 75, 45, 255, .14 ) !important; box-shadow: 0 16px 34px rgba( 1, 4, 44, .08 ) !important; } } /* ========================================================= ICONO ========================================================= */ .qq-contact-right .qq-contact-info-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; border-radius: 15px !important; background: linear-gradient( 135deg, rgba(113,7,187,.10), rgba(0,85,255,.10), rgba(15,197,186,.12) ) !important; font-size: 18px !important; font-weight: 800 !important; color: #4B2DFF !important; } /* ========================================================= LABEL ========================================================= */ .qq-contact-right .qq-contact-info-label { display: block !important; margin-bottom: 5px !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .15em !important; color: #4B2DFF !important; } /* ========================================================= TÍTULO TARJETA ========================================================= */ .qq-contact-right .qq-contact-info-content h3 { margin: 0 0 6px !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.025em !important; color: #01042C !important; } /* ========================================================= TEXTO TARJETA ========================================================= */ .qq-contact-right .qq-contact-info-content p { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #686B78 !important; } /* ========================================================= LINKS ========================================================= */ .qq-contact-right .qq-contact-info-content a { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; font-weight: 750 !important; color: #4B2DFF !important; text-decoration: none !important; } .qq-contact-right .qq-contact-info-content a span { transition: transform .25s ease !important; } @media (hover:hover) { .qq-contact-right .qq-contact-info-content a:hover span { transform: translateX(4px) !important; } } /* ========================================================= TARJETA ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-card { position: relative !important; overflow: hidden !important; padding: 26px !important; border-radius: 22px !important; background: linear-gradient( 125deg, #21084F 0%, #4324BC 46%, #0867C9 75%, #0AA8AA 100% ) !important; box-shadow: 0 15px 36px rgba( 40, 30, 150, .13 ) !important; } .qq-contact-right .qq-contact-help-card::before { content: ""; position: absolute; width: 190px; height: 190px; right: -100px; top: -110px; border-radius: 50%; background: rgba( 255, 255, 255, .07 ); } /* ========================================================= BADGE ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-badge { display: inline-flex !important; align-items: center !important; min-height: 25px !important; padding: 0 9px !important; margin-bottom: 14px !important; border-radius: 999px !important; background: rgba( 255, 255, 255, .11 ) !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .13em !important; color: #ffffff !important; } /* ========================================================= TÍTULO ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-card h3 { position: relative !important; max-width: 390px !important; margin: 0 0 11px !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #ffffff !important; } /* ========================================================= TEXTO ORIENTACIÓN ========================================================= */ .qq-contact-right .qq-contact-help-card p { position: relative !important; max-width: 400px !important; margin: 0 !important; font-size: 12px !important; line-height: 1.55 !important; color: rgba( 255, 255, 255, .72 ) !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .qq-contact-section-inner { flex-direction: column !important; gap: 45px !important; max-width: 780px !important; padding: 75px 26px !important; } .qq-contact-left, .qq-contact-right { width: 100% !important; max-width: none !important; } .qq-contact-right .qq-contact-info-column { display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 14px !important; } .qq-contact-right .qq-contact-help-card { grid-column: 1 / -1 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .qq-contact-section-inner { padding: 58px 18px !important; gap: 38px !important; } .qq-contact-left .qq-contact-section-title { font-size: 38px !important; line-height: .98 !important; } .qq-contact-left .qq-contact-section-description { margin-bottom: 24px !important; font-size: 14px !important; } .qq-contact-form-wrap { padding: 20px !important; border-radius: 19px !important; } .qq-contact-right .qq-contact-info-column { grid-template-columns: 1fr !important; gap: 11px !important; } .qq-contact-right .qq-contact-info-card { padding: 18px !important; border-radius: 17px !important; } .qq-contact-right .qq-contact-help-card { padding: 22px !important; border-radius: 19px !important; } .qq-contact-right .qq-contact-help-card h3 { font-size: 21px !important; } } /* ========================================================= MOBILE PEQUEÑO ========================================================= */ @media (max-width:420px) { .qq-contact-section-inner { padding-left: 14px !important; padding-right: 14px !important; } .qq-contact-form-wrap { padding: 17px !important; } .qq-contact-left .qq-contact-section-title { font-size: 34px !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-18bfa16 */.elementor-523 .elementor-element.elementor-element-18bfa16 .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-b126177 *//*========================================= 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 */