.elementor-194 .elementor-element.elementor-element-e015e4c{--display:flex;--min-height:700px;--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-194 .elementor-element.elementor-element-e015e4c::before, .elementor-194 .elementor-element.elementor-element-e015e4c > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-e015e4c > .e-con-inner > .elementor-background-video-container::before, .elementor-194 .elementor-element.elementor-element-e015e4c > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-e015e4c > .e-con-inner > .elementor-background-slideshow::before, .elementor-194 .elementor-element.elementor-element-e015e4c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#02081740;--background-overlay:'';}.elementor-194 .elementor-element.elementor-element-e015e4c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-194 .elementor-element.elementor-element-67c0fa8{--display:flex;--min-height:250px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-194 .elementor-element.elementor-element-0f71c5c .elementor-heading-title{color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-194 .elementor-element.elementor-element-f3773ae{color:#C6D2E1;}.elementor-194 .elementor-element.elementor-element-e46f098{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-194 .elementor-element.elementor-element-e46f098.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-194 .elementor-element.elementor-element-1e3ddf7{--display:flex;}.elementor-194 .elementor-element.elementor-element-1e3ddf7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-194 .elementor-element.elementor-element-9487d2f .elementor-heading-title{color:#FFFFFF;}.elementor-194 .elementor-element.elementor-element-426b022 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:31px;font-weight:600;color:#FFFFFF;}.elementor-194 .elementor-element.elementor-element-c70a286{color:#C6D2E1;}.elementor-194 .elementor-element.elementor-element-e261382{--display:flex;}.elementor-194 .elementor-element.elementor-element-85bf6f3{--display:flex;}.elementor-194 .elementor-element.elementor-element-38208b9 .elementor-heading-title{color:#FFFFFF;}.elementor-194 .elementor-element.elementor-element-514a1d3 .elementor-heading-title{color:#FFFFFF;}.elementor-194 .elementor-element.elementor-element-b4ee74d{--display:flex;}.elementor-194 .elementor-element.elementor-element-9c65360 .elementor-heading-title{color:#FFFFFF;}.elementor-194 .elementor-element.elementor-element-d85440e .elementor-heading-title{color:#FFFFFF;}.elementor-194 .elementor-element.elementor-element-3318280{--display:flex;}.elementor-194 .elementor-element.elementor-element-1fbd3b1 .elementor-heading-title{color:#FFFFFF;}body.elementor-page-194:not(.elementor-motion-effects-element-type-background), body.elementor-page-194 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#07092E;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-194 .elementor-element.elementor-element-67c0fa8{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-194 .elementor-element.elementor-element-0f71c5c{text-align:center;}.elementor-194 .elementor-element.elementor-element-f3773ae{text-align:center;}}@media(min-width:768px){.elementor-194 .elementor-element.elementor-element-e015e4c{--width:100%;}.elementor-194 .elementor-element.elementor-element-67c0fa8{--content-width:100%;}.elementor-194 .elementor-element.elementor-element-1e3ddf7{--width:55%;}.elementor-194 .elementor-element.elementor-element-e261382{--content-width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-194 .elementor-element.elementor-element-67c0fa8{--content-width:90%;}}@media(max-width:767px){.elementor-194 .elementor-element.elementor-element-67c0fa8{--content-width:90%;}.elementor-194 .elementor-element.elementor-element-0f71c5c{text-align:center;}.elementor-194 .elementor-element.elementor-element-f3773ae{text-align:center;}}/* Start custom CSS for heading, class: .elementor-element-0f71c5c */.elementor-194 .elementor-element.elementor-element-0f71c5c mark { color: #FFFFFF !important; background: transparent !important; text-shadow: 0 0 7px rgba(29, 85, 166, 0.45), 0 0 15px rgba(29, 85, 166, 0.30), 0 0 24px rgba(216, 35, 63, 0.15); animation: recombidxPulse 3.5s infinite ease-in-out; } @keyframes recombidxPulse { 0%, 100% { text-shadow: 0 0 6px rgba(29, 85, 166, 0.35), 0 0 14px rgba(29, 85, 166, 0.25), 0 0 22px rgba(216, 35, 63, 0.12); } 50% { text-shadow: 0 0 9px rgba(29, 85, 166, 0.70), 0 0 20px rgba(29, 85, 166, 0.52), 0 0 34px rgba(216, 35, 63, 0.30); } } /* Reduce animaciones si el usuario así lo tiene configurado */ @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-0f71c5c mark { animation: none; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67c0fa8 *//* ========================================================= RECOMBIDX · CONTENEDOR INFERIOR DEL HERO VIDEO → TEXTO → FONDO GLOBAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-67c0fa8 { --fade-height: 170px; position: relative; z-index: 2; /* * Entramos sobre el vídeo. */ margin-top: calc(var(--fade-height) * -1); /* * El contenido comienza dentro * de la zona de transición. */ padding-top: calc(var(--fade-height) + 36px); /* * IMPORTANTE: * damos espacio DESPUÉS del texto para * que la transición termine antes de * comenzar la siguiente sección. */ padding-bottom: 105px; /* * El vídeo sigue siendo el fondo real. * Las capas estarán en los pseudo-elementos. */ background: transparent !important; border: none !important; box-shadow: none !important; overflow: hidden; isolation: isolate; } /* ========================================================= CAPA 1 DIFUMINADO + OSCURECIMIENTO PROGRESIVO DEL VIDEO ========================================================= */ .elementor-194 .elementor-element.elementor-element-67c0fa8::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; /* * Esta es la capa que hace legible * el título y el párrafo. * * Arriba casi no existe. * En la zona del texto oscurece. * Abajo termina en navy. */ background: linear-gradient( to bottom, rgba(7, 9, 46, 0) 0%, rgba(7, 9, 46, .04) 12%, rgba(7, 9, 46, .12) 24%, rgba(7, 9, 46, .28) 38%, rgba(7, 9, 46, .48) 51%, rgba(7, 9, 46, .66) 63%, rgba(7, 9, 46, .78) 74%, rgba(7, 9, 46, .88) 84%, rgba(7, 9, 46, .95) 93%, #07092E 100% ); /* * Difuminado real del vídeo. */ -webkit-backdrop-filter: blur(12px) saturate(.90); backdrop-filter: blur(12px) saturate(.90); /* * El blur también entra progresivamente. * Arriba el vídeo sigue nítido. */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,.24) 25%, rgba(0,0,0,.48) 39%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.90) 66%, #000 78%, #000 100% ); mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,.24) 25%, rgba(0,0,0,.48) 39%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.90) 66%, #000 78%, #000 100% ); } /* ========================================================= CAPA 2 ENLACE VISUAL CON EL FONDO GLOBAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-67c0fa8::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; /* * Solo ocupa la parte final. */ height: 165px; pointer-events: none; /* * Recuperamos exactamente la lógica * rojo / azul / púrpura del fondo global. * * Nada termina en una línea plana. */ background: radial-gradient( ellipse at 16% 100%, rgba(255,23,68,.085) 0%, rgba(255,23,68,.035) 27%, transparent 58% ), radial-gradient( ellipse at 84% 100%, rgba(0,174,239,.070) 0%, rgba(0,174,239,.028) 28%, transparent 60% ), radial-gradient( ellipse at 50% 100%, rgba(140,76,201,.035) 0%, transparent 52% ), linear-gradient( to bottom, rgba(7,9,46,0) 0%, rgba(7,9,46,.18) 20%, rgba(7,9,46,.46) 43%, rgba(7,9,46,.72) 64%, rgba(7,9,46,.90) 82%, #07092E 100% ); } /* ========================================================= CONTENIDO SIEMPRE ENCIMA ========================================================= */ .elementor-194 .elementor-element.elementor-element-67c0fa8 > .e-con-inner { position: relative; z-index: 3; } .elementor-194 .elementor-element.elementor-element-67c0fa8 > .elementor-element { position: relative; z-index: 3; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-194 .elementor-element.elementor-element-67c0fa8 { --fade-height: 145px; padding-top: calc(var(--fade-height) + 32px); padding-bottom: 85px; } .elementor-194 .elementor-element.elementor-element-67c0fa8::before { -webkit-backdrop-filter: blur(10px) saturate(.92); backdrop-filter: blur(10px) saturate(.92); } .elementor-194 .elementor-element.elementor-element-67c0fa8::after { height: 145px; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 767px) { .elementor-194 .elementor-element.elementor-element-67c0fa8 { --fade-height: 110px; padding-top: calc(var(--fade-height) + 26px); padding-bottom: 65px; } .elementor-194 .elementor-element.elementor-element-67c0fa8::before { background: linear-gradient( to bottom, rgba(7,9,46,0) 0%, rgba(7,9,46,.08) 16%, rgba(7,9,46,.25) 34%, rgba(7,9,46,.50) 50%, rgba(7,9,46,.70) 66%, rgba(7,9,46,.86) 82%, #07092E 100% ); -webkit-backdrop-filter: blur(8px) saturate(.92); backdrop-filter: blur(8px) saturate(.92); } .elementor-194 .elementor-element.elementor-element-67c0fa8::after { height: 115px; opacity: .88; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-9487d2f */.elementor-194 .elementor-element.elementor-element-9487d2f .elementor-heading-title { position: relative; display: inline-block; color: #F7F9FF; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2.2px; text-transform: uppercase; padding-bottom: 11px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.06); } /* Línea base: exactamente del ancho del texto */ .elementor-194 .elementor-element.elementor-element-9487d2f .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #FF1744 0%, #E52A56 25%, #7A3D86 50%, #3456A5 75%, #00AEEF 100% ); box-shadow: -2px 0 6px rgba(255, 23, 68, 0.18), 2px 0 6px rgba(0, 174, 239, 0.18); } /* Reflejo que atraviesa la línea */ .elementor-194 .elementor-element.elementor-element-9487d2f .elementor-heading-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.15) 44%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.15) 56%, transparent 62%, transparent 100% ); background-size: 280% 100%; background-position: 130% 0; filter: blur(0.3px) drop-shadow(0 0 4px rgba(255,255,255,0.55)); opacity: 0; animation: recombidxLineReflection 10s linear infinite; } /* La luz cruza y luego deja un pequeño descanso */ @keyframes recombidxLineReflection { 0% { background-position: 130% 0; opacity: 0; } 8% { opacity: 0; } 15% { opacity: 0.85; } 58% { opacity: 0.85; } 68% { background-position: -130% 0; opacity: 0; } 100% { background-position: -130% 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-9487d2f .elementor-heading-title::before { animation: none; opacity: 0; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-426b022 */.elementor-194 .elementor-element.elementor-element-426b022 .elementor-heading-title { color: #FFFFFF; font-size: clamp(34px, 3.2vw, 48px); font-weight: 700; line-height: 1.14; letter-spacing: -0.7px; max-width: 900px; margin: 0; text-wrap: balance; text-shadow: -2px 0 8px rgba(255, 23, 68, 0.18), 2px 0 8px rgba(0, 174, 239, 0.18); animation: recombidxH2Breath 5.5s infinite ease-in-out; } /* Respiración muy suave */ @keyframes recombidxH2Breath { 0%, 100% { text-shadow: -2px 0 7px rgba(255, 23, 68, 0.14), 2px 0 7px rgba(0, 174, 239, 0.14), -4px 0 14px rgba(255, 23, 68, 0.06), 4px 0 14px rgba(0, 174, 239, 0.06); } 50% { text-shadow: -3px 0 10px rgba(255, 23, 68, 0.32), 3px 0 10px rgba(0, 174, 239, 0.32), -6px 0 22px rgba(255, 23, 68, 0.14), 6px 0 22px rgba(0, 174, 239, 0.14); } } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-426b022 .elementor-heading-title { animation: none; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-38208b9 */.elementor-194 .elementor-element.elementor-element-38208b9 .elementor-heading-title { position: relative; display: inline-block; color: #F7F9FF; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2.2px; text-transform: uppercase; padding-bottom: 11px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.06); } /* Línea base: exactamente del ancho del texto */ .elementor-194 .elementor-element.elementor-element-38208b9 .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #FF1744 0%, #E52A56 25%, #7A3D86 50%, #3456A5 75%, #00AEEF 100% ); box-shadow: -2px 0 6px rgba(255, 23, 68, 0.18), 2px 0 6px rgba(0, 174, 239, 0.18); } /* Reflejo que atraviesa la línea */ .elementor-194 .elementor-element.elementor-element-38208b9 .elementor-heading-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.15) 44%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.15) 56%, transparent 62%, transparent 100% ); background-size: 280% 100%; background-position: 130% 0; filter: blur(0.3px) drop-shadow(0 0 4px rgba(255,255,255,0.55)); opacity: 0; animation: recombidxLineReflection 10s linear infinite; } /* La luz cruza y luego deja un pequeño descanso */ @keyframes recombidxLineReflection { 0% { background-position: 130% 0; opacity: 0; } 8% { opacity: 0; } 15% { opacity: 0.85; } 58% { opacity: 0.85; } 68% { background-position: -130% 0; opacity: 0; } 100% { background-position: -130% 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-38208b9 .elementor-heading-title::before { animation: none; opacity: 0; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-514a1d3 */.elementor-194 .elementor-element.elementor-element-514a1d3 .elementor-heading-title { color: #FFFFFF; font-size: clamp(34px, 3.2vw, 48px); font-weight: 700; line-height: 1.14; letter-spacing: -0.7px; width: 100%; max-width: none; margin: 0; /* Salto de línea completamente natural */ white-space: normal; text-wrap: wrap; word-break: normal; overflow-wrap: normal; hyphens: none; text-shadow: -2px 0 8px rgba(255, 23, 68, 0.18), 2px 0 8px rgba(0, 174, 239, 0.18); animation: recombidxH2Breath 5.5s infinite ease-in-out; } /* Respiración */ @keyframes recombidxH2Breath { 0%, 100% { text-shadow: -2px 0 7px rgba(255, 23, 68, 0.14), 2px 0 7px rgba(0, 174, 239, 0.14), -4px 0 14px rgba(255, 23, 68, 0.06), 4px 0 14px rgba(0, 174, 239, 0.06); } 50% { text-shadow: -3px 0 10px rgba(255, 23, 68, 0.32), 3px 0 10px rgba(0, 174, 239, 0.32), -6px 0 22px rgba(255, 23, 68, 0.14), 6px 0 22px rgba(0, 174, 239, 0.14); } } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-514a1d3 .elementor-heading-title { animation: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-188b82f *//* ========================================================= RECOMBIDX SHOWCASE INTERACTIVO DE SERVICIOS ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-services-showcase { --rx-red: #FF1744; --rx-blue: #00AEEF; --rx-purple: #8C4CC9; --rx-bg: #07092E; --rx-panel: #090C32; --rx-panel-hover: #0C1039; --rx-panel-active: #0B123D; --rx-white: #FFFFFF; --rx-text: #D5D8E6; display: flex; width: 100%; height: 490px; gap: 10px; overflow: hidden; } /* ========================================================= PANEL ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; border-radius: 22px; background: var(--rx-panel); cursor: pointer; isolation: isolate; outline: none; transition: flex-grow 1.25s cubic-bezier(.22,.61,.36,1), background 1s ease, transform .45s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active { flex-grow: 7; background: var(--rx-panel-active); cursor: default; } /* ========================================================= FONDO DEL PANEL ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( circle at 3% 18%, rgba(255,23,68,.17), transparent 31% ), radial-gradient( circle at 96% 82%, rgba(0,174,239,.18), transparent 35% ), linear-gradient( 135deg, rgba(255,255,255,.018), transparent 55% ); opacity: .22; transform: scale(1); transition: opacity 1.2s ease, transform 1.6s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active .rx-service-bg { opacity: 1; transform: scale(1.06); } /* ========================================================= HALO AZUL ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel::before { content: ""; position: absolute; width: 330px; height: 330px; right: -175px; top: -165px; border-radius: 50%; background: rgba(0,174,239,.11); filter: blur(65px); opacity: 0; z-index: 0; pointer-events: none; transition: opacity 1.2s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active::before { opacity: 1; } /* ========================================================= HALO ROJO ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel::after { content: ""; position: absolute; width: 290px; height: 290px; left: -180px; bottom: -165px; border-radius: 50%; background: rgba(255,23,68,.10); filter: blur(65px); opacity: 0; z-index: 0; pointer-events: none; transition: opacity 1.2s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active::after { opacity: 1; } /* ========================================================= ESTADO CERRADO ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-compact { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px 10px 27px; opacity: 1; transition: opacity .35s ease, transform .55s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-number { color: rgba(255,255,255,.43); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 1.7px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-short { color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .2px; opacity: .76; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); transition: opacity .3s ease, text-shadow .3s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active .rx-service-compact { opacity: 0; transform: translateX(-12px); pointer-events: none; } /* ========================================================= CONTENIDO DEL PANEL ABIERTO ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-content { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(190px, .88fr); align-items: center; gap: 32px; width: 100%; height: 100%; padding: 44px 42px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s ease, transform .6s ease, visibility 0s linear .65s; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active .rx-service-content { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .75s ease .38s, transform .85s ease .28s, visibility 0s linear 0s; } /* ========================================================= TEXTOS ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy { position: relative; z-index: 4; min-width: 0; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-index { display: block; margin-bottom: 19px; color: rgba(255,255,255,.43); font-size: 12px; font-weight: 700; letter-spacing: 1.9px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy h3 { margin: 0 0 18px; max-width: 540px; color: var(--rx-white); font-size: clamp(27px, 2.4vw, 39px); font-weight: 700; line-height: 1.08; letter-spacing: -.8px; white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy p { margin: 0; max-width: 510px; color: var(--rx-text); font-size: 15.5px; font-weight: 400; line-height: 1.72; } /* ========================================================= ENLACE ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 27px; color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; opacity: .88; transition: gap .3s ease, opacity .3s ease, text-shadow .3s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-link span { color: var(--rx-blue); font-size: 19px; line-height: 1; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-link:hover { gap: 14px; opacity: 1; text-shadow: 0 0 10px rgba(0,174,239,.16); } /* ========================================================= ÁREA VISUAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; opacity: 0; transform: scale(.88); transition: opacity .8s ease .48s, transform 1.1s cubic-bezier(.22,.61,.36,1) .38s; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active .rx-service-art { opacity: 1; transform: scale(1); } /* ========================================================= HALO DEL VISUAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art::before { content: ""; position: absolute; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, rgba(140,76,201,.16) 0%, rgba(0,174,239,.07) 38%, rgba(255,23,68,.025) 55%, transparent 72% ); filter: blur(17px); animation: rxArtBreath 6s ease-in-out infinite; } /* ========================================================= SVG GENERAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art svg { position: relative; z-index: 2; display: block; width: min(100%, 280px); height: auto; overflow: visible; filter: drop-shadow( -5px 0 10px rgba(255,23,68,.16) ) drop-shadow( 5px 0 10px rgba(0,174,239,.18) ); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art svg * { vector-effect: non-scaling-stroke; } /* Permite que las transformaciones SVG se hagan desde el centro del elemento */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art circle, .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art path, .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art g { transform-box: fill-box; transform-origin: center; } /* ========================================================= 01 — SCREENING ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-screening-points circle { fill: #F7FBFF; stroke: none; opacity: .65; filter: drop-shadow( 0 0 5px rgba(255,255,255,.38) ); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-screening-target { fill: rgba(7,9,46,.88); stroke: url(#rx-gradient-01); stroke-width: 2.5; filter: drop-shadow( 0 0 7px rgba(255,23,68,.24) ) drop-shadow( 0 0 8px rgba(0,174,239,.24) ); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-screening-scan { fill: none; stroke: url(#rx-gradient-01); stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 9 11; opacity: .5; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(1).is-active .rx-screening-scan { animation: rxScreeningScan 3.4s linear infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(1).is-active .rx-screening-target { animation: rxTargetPulse 2.5s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(1).is-active .rx-screening-points circle:nth-child(4) { animation: rxPointGlow 2.2s ease-in-out infinite; } /* ========================================================= 02 — PROTEÍNAS ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-protein-flow { fill: none; stroke: url(#rx-gradient-02); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 14; opacity: .55; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-protein-nodes circle { fill: rgba(7,9,46,.90); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(2).is-active .rx-protein-flow { animation: rxProteinFlow 3.4s linear infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(2).is-active .rx-protein-nodes circle:nth-child(3) { animation: rxProteinNodePulse 2.7s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(2).is-active .rx-protein-nodes circle:nth-child(5) { animation: rxProteinNodePulse 2.7s ease-in-out .45s infinite; } /* ========================================================= 03 — PCR / qPCR ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-pcr-secondary { opacity: .48; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-pcr-dot, .elementor-194 .elementor-element.elementor-element-188b82f .rx-pcr-dot-secondary { fill: #F7FBFF; stroke: none; filter: drop-shadow( 0 0 5px rgba(255,255,255,.55) ) drop-shadow( 0 0 9px rgba(0,174,239,.30) ); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(3).is-active .rx-pcr-primary { animation: rxPcrPrimary 2.8s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(3).is-active .rx-pcr-secondary { animation: rxPcrSecondary 2.8s ease-in-out .35s infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(3).is-active .rx-pcr-dot { animation: rxPcrDot 1.8s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(3).is-active .rx-pcr-dot-secondary { animation: rxPcrDot 1.8s ease-in-out .5s infinite; } /* ========================================================= 04 — CRISPR ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-cas-core { fill: rgba(7,9,46,.88); stroke: url(#rx-gradient-04); stroke-width: 2.5; filter: drop-shadow( -3px 0 7px rgba(255,23,68,.16) ) drop-shadow( 3px 0 7px rgba(0,174,239,.20) ); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-crispr-scan { fill: none; stroke: url(#rx-gradient-04); stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 10 12; opacity: .5; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(4).is-active .rx-crispr-cutmark { animation: rxCrisprCut 2.2s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(4).is-active .rx-crispr-scan { animation: rxCrisprScan 3s linear infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(4).is-active .rx-cas-core { animation: rxCasPulse 2.8s ease-in-out infinite; } /* ========================================================= 05 — INSUMOS ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-liquid { stroke: none; opacity: .92; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-liquid-red { fill: url(#rx-liquid-red); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-liquid-blue { fill: url(#rx-liquid-blue); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-bubble { fill: #F7FBFF; stroke: none; filter: drop-shadow( 0 0 6px rgba(255,255,255,.45) ); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(5).is-active .rx-liquid-red { animation: rxLiquidShift 3.2s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(5).is-active .rx-liquid-blue { animation: rxLiquidShift 3.2s ease-in-out .4s infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(5).is-active .rx-bubble-1 { animation: rxBubbleFloat 2.8s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(5).is-active .rx-bubble-2 { animation: rxBubbleFloat 3.1s ease-in-out .35s infinite; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:nth-child(5).is-active .rx-bubble-3 { animation: rxBubbleFloat 2.5s ease-in-out .7s infinite; } /* ========================================================= RESPIRACIÓN DEL ÁREA VISUAL ========================================================= */ @keyframes rxArtBreath { 0%, 100% { opacity: .52; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.055); } } /* ========================================================= ANIMACIONES SCREENING ========================================================= */ @keyframes rxScreeningScan { from { stroke-dashoffset: 0; opacity: .42; } 50% { opacity: 1; } to { stroke-dashoffset: -140; opacity: .42; } } @keyframes rxTargetPulse { 0%, 100% { transform: scale(1); opacity: .78; filter: drop-shadow( 0 0 4px rgba(255,23,68,.14) ) drop-shadow( 0 0 4px rgba(0,174,239,.14) ); } 50% { transform: scale(1.25); opacity: 1; filter: drop-shadow( 0 0 10px rgba(255,23,68,.35) ) drop-shadow( 0 0 12px rgba(0,174,239,.38) ); } } @keyframes rxPointGlow { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.55); opacity: 1; } } /* ========================================================= ANIMACIONES PROTEÍNAS ========================================================= */ @keyframes rxProteinFlow { from { stroke-dashoffset: 0; opacity: .45; } 50% { opacity: 1; } to { stroke-dashoffset: -140; opacity: .45; } } @keyframes rxProteinNodePulse { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.18); opacity: 1; filter: drop-shadow( 0 0 9px rgba(0,174,239,.26) ); } } /* ========================================================= ANIMACIONES PCR ========================================================= */ @keyframes rxPcrPrimary { 0%, 100% { opacity: .75; filter: drop-shadow( 0 0 0 rgba(0,174,239,0) ); } 50% { opacity: 1; filter: drop-shadow( 0 0 9px rgba(0,174,239,.34) ); } } @keyframes rxPcrSecondary { 0%, 100% { opacity: .35; } 50% { opacity: .85; } } @keyframes rxPcrDot { 0%, 100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.45); opacity: 1; } } /* ========================================================= ANIMACIONES CRISPR ========================================================= */ @keyframes rxCrisprCut { 0%, 100% { opacity: .62; filter: drop-shadow( 0 0 0 rgba(255,23,68,0) ); } 50% { opacity: 1; filter: drop-shadow( 0 0 9px rgba(255,23,68,.38) ) drop-shadow( 0 0 8px rgba(0,174,239,.22) ); } } @keyframes rxCrisprScan { from { stroke-dashoffset: 0; opacity: .4; } 50% { opacity: 1; } to { stroke-dashoffset: -120; opacity: .4; } } @keyframes rxCasPulse { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.07); opacity: 1; filter: drop-shadow( -4px 0 10px rgba(255,23,68,.24) ) drop-shadow( 4px 0 11px rgba(0,174,239,.27) ); } } /* ========================================================= ANIMACIONES INSUMOS ========================================================= */ @keyframes rxLiquidShift { 0%, 100% { transform: translateY(0); opacity: .82; } 50% { transform: translateY(-3px); opacity: 1; } } @keyframes rxBubbleFloat { 0% { transform: translateY(0) scale(.8); opacity: .15; } 18% { opacity: .95; } 75% { opacity: .7; } 100% { transform: translateY(-22px) scale(1.15); opacity: 0; } } /* ========================================================= INDICADOR DE TIEMPO ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-progress { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 2px; overflow: hidden; opacity: 0; transition: opacity .3s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active .rx-service-progress { opacity: 1; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-progress::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient( 90deg, var(--rx-red) 0%, var(--rx-purple) 50%, var(--rx-blue) 100% ); box-shadow: 0 0 8px rgba(255,23,68,.36), 0 0 8px rgba(0,174,239,.36); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-progress.is-running::after { animation: rxServiceTimer 8s linear forwards; } @keyframes rxServiceTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ========================================================= HOVER DE PANELES CERRADOS ========================================================= */ .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:not(.is-active):hover { background: var(--rx-panel-hover); transform: translateY(-3px); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel:not(.is-active):hover .rx-service-short { opacity: 1; text-shadow: -1px 0 7px rgba(255,23,68,.20), 1px 0 7px rgba(0,174,239,.22); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-194 .elementor-element.elementor-element-188b82f .rx-services-showcase { height: 460px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active { flex-grow: 7.8; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-content { grid-template-columns: minmax(0, 1.25fr) minmax(145px, .75fr); gap: 18px; padding: 36px 27px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art svg { width: min(100%, 215px); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy h3 { font-size: clamp(25px, 3vw, 34px); } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy p { font-size: 14.5px; } } /* ========================================================= MÓVIL ACORDEÓN VERTICAL ========================================================= */ @media (max-width: 767px) { .elementor-194 .elementor-element.elementor-element-188b82f .rx-services-showcase { display: flex; flex-direction: column; width: 100%; height: auto; gap: 8px; overflow: visible; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel, .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active { flex: none; width: 100%; height: 72px; border-radius: 16px; transition: height .85s cubic-bezier(.22,.61,.36,1), background .6s ease; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active { height: 430px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-compact { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; padding: 0 20px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-short { writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: 14px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 28px 23px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy { position: relative; z-index: 4; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-index { margin-bottom: 12px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy h3 { max-width: 90%; margin-bottom: 14px; font-size: 26px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-copy p { max-width: 90%; font-size: 14px; line-height: 1.62; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-link { margin-top: 19px; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art { position: absolute; right: -18px; bottom: -35px; z-index: 1; width: 195px; opacity: .17 !important; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel.is-active .rx-service-art { opacity: .30 !important; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art svg { width: min(100%, 210px); } } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-panel, .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-content, .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art, .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-bg { transition-duration: .01ms !important; } .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-art::before, .elementor-194 .elementor-element.elementor-element-188b82f .rx-screening-scan, .elementor-194 .elementor-element.elementor-element-188b82f .rx-screening-target, .elementor-194 .elementor-element.elementor-element-188b82f .rx-screening-points circle, .elementor-194 .elementor-element.elementor-element-188b82f .rx-protein-flow, .elementor-194 .elementor-element.elementor-element-188b82f .rx-protein-nodes circle, .elementor-194 .elementor-element.elementor-element-188b82f .rx-pcr-primary, .elementor-194 .elementor-element.elementor-element-188b82f .rx-pcr-secondary, .elementor-194 .elementor-element.elementor-element-188b82f .rx-pcr-dot, .elementor-194 .elementor-element.elementor-element-188b82f .rx-pcr-dot-secondary, .elementor-194 .elementor-element.elementor-element-188b82f .rx-crispr-cutmark, .elementor-194 .elementor-element.elementor-element-188b82f .rx-crispr-scan, .elementor-194 .elementor-element.elementor-element-188b82f .rx-cas-core, .elementor-194 .elementor-element.elementor-element-188b82f .rx-liquid, .elementor-194 .elementor-element.elementor-element-188b82f .rx-bubble, .elementor-194 .elementor-element.elementor-element-188b82f .rx-service-progress::after { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-9c65360 */.elementor-194 .elementor-element.elementor-element-9c65360 .elementor-heading-title { position: relative; display: inline-block; color: #F7F9FF; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2.2px; text-transform: uppercase; padding-bottom: 11px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.06); } /* Línea base: exactamente del ancho del texto */ .elementor-194 .elementor-element.elementor-element-9c65360 .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #FF1744 0%, #E52A56 25%, #7A3D86 50%, #3456A5 75%, #00AEEF 100% ); box-shadow: -2px 0 6px rgba(255, 23, 68, 0.18), 2px 0 6px rgba(0, 174, 239, 0.18); } /* Reflejo que atraviesa la línea */ .elementor-194 .elementor-element.elementor-element-9c65360 .elementor-heading-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.15) 44%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.15) 56%, transparent 62%, transparent 100% ); background-size: 280% 100%; background-position: 130% 0; filter: blur(0.3px) drop-shadow(0 0 4px rgba(255,255,255,0.55)); opacity: 0; animation: recombidxLineReflection 10s linear infinite; } /* La luz cruza y luego deja un pequeño descanso */ @keyframes recombidxLineReflection { 0% { background-position: 130% 0; opacity: 0; } 8% { opacity: 0; } 15% { opacity: 0.85; } 58% { opacity: 0.85; } 68% { background-position: -130% 0; opacity: 0; } 100% { background-position: -130% 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-9c65360 .elementor-heading-title::before { animation: none; opacity: 0; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-d85440e */.elementor-194 .elementor-element.elementor-element-d85440e .elementor-heading-title { color: #FFFFFF; font-size: clamp(34px, 3.2vw, 48px); font-weight: 700; line-height: 1.14; letter-spacing: -0.7px; width: 100%; max-width: none; margin: 0; /* Salto de línea completamente natural */ white-space: normal; text-wrap: wrap; word-break: normal; overflow-wrap: normal; hyphens: none; text-shadow: -2px 0 8px rgba(255, 23, 68, 0.18), 2px 0 8px rgba(0, 174, 239, 0.18); animation: recombidxH2Breath 5.5s infinite ease-in-out; } /* Respiración */ @keyframes recombidxH2Breath { 0%, 100% { text-shadow: -2px 0 7px rgba(255, 23, 68, 0.14), 2px 0 7px rgba(0, 174, 239, 0.14), -4px 0 14px rgba(255, 23, 68, 0.06), 4px 0 14px rgba(0, 174, 239, 0.06); } 50% { text-shadow: -3px 0 10px rgba(255, 23, 68, 0.32), 3px 0 10px rgba(0, 174, 239, 0.32), -6px 0 22px rgba(255, 23, 68, 0.14), 6px 0 22px rgba(0, 174, 239, 0.14); } } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-d85440e .elementor-heading-title { animation: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b31fb39 *//* ========================================================= RECOMBIDX · ÁREAS DE IMPACTO ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact { --rx-red: #FF1744; --rx-blue: #00AEEF; --rx-purple: #8C4CC9; --rx-bg: #07092E; --rx-card: #090D35; --rx-card-active: #0A0F3A; --rx-white: #FFFFFF; --rx-text: #D5D8E6; position: relative; width: 100%; padding: 20px 0 6px; overflow: hidden; } /* ========================================================= ESCENARIO ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-stage { position: relative; width: 100%; max-width: 1180px; height: 525px; margin: 0 auto; perspective: 1500px; } /* ========================================================= TARJETAS ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card { position: absolute; top: 50%; left: 50%; width: 440px; height: 455px; padding: 25px 34px 34px; overflow: hidden; border-radius: 27px; background: linear-gradient( 145deg, rgba(255,255,255,.022), transparent 52% ), var(--rx-card); opacity: 0; pointer-events: none; cursor: pointer; isolation: isolate; outline: none; transform: translate(-50%, -50%) scale(.70); transition: transform 1.15s cubic-bezier(.22,.61,.36,1), opacity .9s ease, filter .9s ease, background .9s ease; } /* ========================================================= CENTRAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center { z-index: 5; opacity: 1; pointer-events: auto; cursor: default; transform: translate(-50%, -50%) scale(1); background: radial-gradient( circle at 7% 12%, rgba(255,23,68,.075), transparent 34% ), radial-gradient( circle at 94% 78%, rgba(0,174,239,.09), transparent 38% ), var(--rx-card-active); box-shadow: 0 28px 70px rgba(0,0,0,.19); } /* ========================================================= LATERALES ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-left { z-index: 2; opacity: .31; pointer-events: auto; transform: translate(-153%, -50%) scale(.76); filter: saturate(.50) brightness(.70); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-right { z-index: 2; opacity: .31; pointer-events: auto; transform: translate(53%, -50%) scale(.76); filter: saturate(.50) brightness(.70); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-hidden { z-index: 0; opacity: 0; transform: translate(-50%, -50%) scale(.58); pointer-events: none; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-left:hover, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-right:hover { opacity: .55; filter: saturate(.78) brightness(.88); } /* ========================================================= ATMÓSFERA ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient( circle at 15% 20%, rgba(255,23,68,.13), transparent 35% ), radial-gradient( circle at 86% 73%, rgba(0,174,239,.14), transparent 38% ); transition: opacity 1.3s ease; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-impact-atmosphere { opacity: 1; } /* ========================================================= VISUAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 245px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual::before { content: ""; position: absolute; width: 250px; height: 190px; border-radius: 50%; background: radial-gradient( ellipse, rgba(140,76,201,.10), rgba(0,174,239,.035) 48%, transparent 72% ); filter: blur(19px); opacity: .4; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-impact-visual::before { animation: rxImpactAmbientBreath 6.5s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual svg { position: relative; z-index: 2; display: block; width: 100%; max-width: 360px; height: 245px; overflow: visible; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual svg * { vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; } /* ========================================================= TEXTO ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-copy { position: relative; z-index: 4; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-number { display: block; margin-bottom: 8px; color: rgba(255,255,255,.31); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.9px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-label { display: block; margin-bottom: 10px; color: rgba(255,255,255,.52); font-size: 10.5px; font-weight: 700; line-height: 1.35; letter-spacing: 1.45px; text-transform: uppercase; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-copy h3 { margin: 0 0 12px; color: var(--rx-white); font-size: 30px; font-weight: 700; line-height: 1.08; letter-spacing: -.6px; white-space: normal; word-break: normal; overflow-wrap: normal; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-copy p { margin: 0; color: var(--rx-text); font-size: 14px; line-height: 1.62; } /* ========================================================= 01 · HUMANA ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-head { fill: rgba(7,9,46,.80); stroke: url(#rx-human-gradient); stroke-width: 2; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-outline { fill: rgba(7,9,46,.24); stroke: url(#rx-human-gradient); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-field { fill: none; stroke: rgba(0,174,239,.12); stroke-width: 1; stroke-dasharray: 4 8; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-marker { fill: #07092E; stroke: url(#rx-human-gradient); stroke-width: 2.3; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-marker-ring { fill: none; stroke: url(#rx-human-gradient); stroke-width: 1.4; opacity: .4; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-scan-line { stroke: url(#rx-human-scan-gradient); stroke-width: 2; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-scan-glow { fill: url(#rx-human-scan-gradient); opacity: .10; filter: blur(5px); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-data { fill: #F7FBFF; stroke: rgba(255,255,255,.24); stroke-width: 1; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-data circle { stroke: none; filter: drop-shadow( 0 0 5px rgba(0,174,239,.40) ); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-human-scanner { animation: rxHumanScan 4.8s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-human-marker-ring { animation: rxHumanMarker 2.8s ease-in-out infinite; } /* ========================================================= 02 · SALUD ANIMAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-paw { filter: drop-shadow( -4px 0 8px rgba(255,23,68,.11) ) drop-shadow( 4px 0 8px rgba(0,174,239,.13) ); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-paw-main, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-paw-pad { fill: rgba(7,9,46,.82); stroke: url(#rx-animal-gradient); stroke-width: 2.5; stroke-linejoin: round; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-animal-scan-arc { fill: none; stroke: url(#rx-animal-gradient); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 8 13; opacity: .30; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-animal-dot { fill: #F7FBFF; stroke: none; opacity: .55; filter: drop-shadow( 0 0 5px rgba(0,174,239,.40) ); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-animal-scan-arc { animation: rxAnimalScan 4s linear infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-paw-pad.pad-1 { animation: rxPawGlow 3.8s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-paw-pad.pad-2 { animation: rxPawGlow 3.8s ease-in-out .18s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-paw-pad.pad-3 { animation: rxPawGlow 3.8s ease-in-out .36s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-paw-pad.pad-4 { animation: rxPawGlow 3.8s ease-in-out .54s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-paw-main { animation: rxPawMainGlow 4.7s ease-in-out infinite; } /* ========================================================= 03 · VEGETAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-stem, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-vein, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-roots path { fill: none; stroke: url(#rx-plant-gradient); stroke-linecap: round; stroke-linejoin: round; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-stem { stroke-width: 3; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-leaf { fill: rgba(7,9,46,.62); stroke: url(#rx-plant-gradient); stroke-width: 2.3; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-vein { stroke-width: 1.5; opacity: .55; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-roots path { stroke-width: 1.8; opacity: .63; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-energy { fill: #F7FBFF; stroke: none; opacity: .25; filter: drop-shadow( 0 0 7px rgba(0,174,239,.55) ); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-plant-energy.energy-1 { animation: rxPlantEnergy 3.6s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-plant-energy.energy-2 { animation: rxPlantEnergy 3.6s ease-in-out .6s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-plant-energy.energy-3 { animation: rxPlantEnergy 3.6s ease-in-out 1.2s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-plant-energy.energy-4 { animation: rxPlantEnergy 3.6s ease-in-out 1.8s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-plant-leaf { animation: rxLeafGlow 5s ease-in-out infinite; } /* ========================================================= 04 · INDUSTRIA ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-industry-lines { fill: rgba(7,9,46,.90); stroke: url(#rx-industry-gradient); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .55; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-body { fill: rgba(7,9,46,.67); stroke: url(#rx-industry-gradient); stroke-width: 2.5; stroke-linejoin: round; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-detail, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-shaft, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-blade { fill: none; stroke: url(#rx-industry-gradient); stroke-width: 2; stroke-linecap: round; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-liquid { fill: url(#rx-reactor-liquid); stroke: none; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-bubble { fill: #F7FBFF; stroke: none; opacity: .5; filter: drop-shadow( 0 0 6px rgba(0,174,239,.42) ); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-industry-signal { fill: none; stroke: url(#rx-industry-gradient); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-reactor-blade { animation: rxReactorMix 2.6s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-reactor-bubble.bubble-1 { animation: rxReactorBubble 3s ease-in infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-reactor-bubble.bubble-2 { animation: rxReactorBubble 3.5s ease-in .6s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-reactor-bubble.bubble-3 { animation: rxReactorBubble 3.2s ease-in 1.1s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-reactor-bubble.bubble-4 { animation: rxReactorBubble 2.8s ease-in 1.5s infinite; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center .rx-industry-signal { animation: rxIndustrySignal 3.4s ease-in-out infinite; } /* ========================================================= DOTS ========================================================= */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-dots { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-dot { appearance: none; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.20); cursor: pointer; transition: width .4s ease, background .4s ease, box-shadow .4s ease; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-dot.is-active { width: 30px; background: linear-gradient( 90deg, var(--rx-red), var(--rx-purple), var(--rx-blue) ); box-shadow: -2px 0 8px rgba(255,23,68,.23), 2px 0 8px rgba(0,174,239,.23); } /* ========================================================= ANIMACIONES ========================================================= */ @keyframes rxImpactAmbientBreath { 0%, 100% { opacity: .36; transform: scale(.96); } 50% { opacity: .78; transform: scale(1.05); } } @keyframes rxHumanScan { 0%, 12% { transform: translateY(0); opacity: 0; } 22% { opacity: 1; } 72% { opacity: 1; } 82%, 100% { transform: translateY(118px); opacity: 0; } } @keyframes rxHumanMarker { 0%, 100% { transform: scale(.82); opacity: .25; } 50% { transform: scale(1.25); opacity: .85; } } @keyframes rxAnimalScan { from { stroke-dashoffset: 0; opacity: .24; } 50% { opacity: .58; } to { stroke-dashoffset: -120; opacity: .24; } } @keyframes rxPawGlow { 0%, 100% { opacity: .78; filter: drop-shadow( 0 0 2px rgba(0,174,239,.08) ); } 50% { opacity: 1; filter: drop-shadow( -2px 0 6px rgba(255,23,68,.18) ) drop-shadow( 2px 0 7px rgba(0,174,239,.20) ); } } @keyframes rxPawMainGlow { 0%, 100% { opacity: .84; filter: drop-shadow( 0 0 3px rgba(140,76,201,.08) ); } 50% { opacity: 1; filter: drop-shadow( -3px 0 8px rgba(255,23,68,.18) ) drop-shadow( 3px 0 9px rgba(0,174,239,.20) ); } } @keyframes rxPlantEnergy { 0% { opacity: .10; transform: scale(.7); } 45% { opacity: 1; transform: scale(1.35); } 100% { opacity: .10; transform: scale(.7); } } @keyframes rxLeafGlow { 0%, 100% { filter: drop-shadow( 0 0 2px rgba(0,174,239,.08) ); } 50% { filter: drop-shadow( -3px 0 7px rgba(255,23,68,.15) ) drop-shadow( 3px 0 8px rgba(0,174,239,.20) ); } } @keyframes rxReactorMix { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes rxReactorBubble { 0% { transform: translateY(17px) scale(.65); opacity: 0; } 20% { opacity: .85; } 100% { transform: translateY(-52px) scale(1.15); opacity: 0; } } @keyframes rxIndustrySignal { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-stage { height: 505px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card { width: 400px; height: 435px; padding: 22px 29px 30px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-left { transform: translate(-132%, -50%) scale(.71); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-right { transform: translate(32%, -50%) scale(.71); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual { height: 225px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual svg { height: 225px; max-width: 330px; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 767px) { .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact { padding: 4px 0 6px; } /* * Antes lo llevamos a 530px. * Ahora volvemos a una sección compacta. */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-stage { height: 480px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card { width: calc(100% - 28px); max-width: 360px; /* * Compromiso entre los 435 originales * y los 485 excesivos. */ height: 448px; padding: 17px 20px 21px; border-radius: 20px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-center { transform: translate(-50%, -50%) scale(1); } /* * Solo mostramos la protagonista * en móvil. */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-left { opacity: 0; transform: translate(-120%, -50%) scale(.78); pointer-events: none; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card.is-right { opacity: 0; transform: translate(20%, -50%) scale(.78); pointer-events: none; } /* * El visual baja de 215px a 148px. * Así el espacio se usa donde importa: * el contenido. */ .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual { height: 148px; margin-bottom: 4px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual svg { width: 100%; max-width: 260px; height: 148px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual::before { width: 175px; height: 115px; filter: blur(15px); } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-number { margin-bottom: 5px; font-size: 9.5px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-label { margin-bottom: 7px; font-size: 9px; line-height: 1.25; letter-spacing: 1.12px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-copy h3 { margin-bottom: 8px; font-size: 24px; line-height: 1.07; letter-spacing: -.4px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-copy p { font-size: 13.3px; line-height: 1.50; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-dots { margin-top: 0; } } /* ========================================================= MÓVILES PEQUEÑOS ========================================================= */ @media (max-width: 390px) { .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-stage { height: 486px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card { width: calc(100% - 20px); height: 455px; padding: 16px 18px 20px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual { height: 140px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual svg { max-width: 245px; height: 140px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-copy h3 { font-size: 23px; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-copy p { font-size: 13px; line-height: 1.48; } } /* ========================================================= REDUCIR MOVIMIENTO ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-card { transition-duration: .01ms !important; } .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-impact-visual::before, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-scanner, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-human-marker-ring, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-animal-scan-arc, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-paw-main, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-paw-pad, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-energy, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-plant-leaf, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-blade, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-reactor-bubble, .elementor-194 .elementor-element.elementor-element-b31fb39 .rx-industry-signal { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-1fbd3b1 */.elementor-194 .elementor-element.elementor-element-1fbd3b1 .elementor-heading-title { position: relative; display: inline-block; color: #F7F9FF; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2.2px; text-transform: uppercase; padding-bottom: 11px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.06); } /* Línea base: exactamente del ancho del texto */ .elementor-194 .elementor-element.elementor-element-1fbd3b1 .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, #FF1744 0%, #E52A56 25%, #7A3D86 50%, #3456A5 75%, #00AEEF 100% ); box-shadow: -2px 0 6px rgba(255, 23, 68, 0.18), 2px 0 6px rgba(0, 174, 239, 0.18); } /* Reflejo que atraviesa la línea */ .elementor-194 .elementor-element.elementor-element-1fbd3b1 .elementor-heading-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.15) 44%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.15) 56%, transparent 62%, transparent 100% ); background-size: 280% 100%; background-position: 130% 0; filter: blur(0.3px) drop-shadow(0 0 4px rgba(255,255,255,0.55)); opacity: 0; animation: recombidxLineReflection 10s linear infinite; } /* La luz cruza y luego deja un pequeño descanso */ @keyframes recombidxLineReflection { 0% { background-position: 130% 0; opacity: 0; } 8% { opacity: 0; } 15% { opacity: 0.85; } 58% { opacity: 0.85; } 68% { background-position: -130% 0; opacity: 0; } 100% { background-position: -130% 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-1fbd3b1 .elementor-heading-title::before { animation: none; opacity: 0; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-3638ac3 *//* ========================================================= RECOMBIDX POR QUÉ ELEGIR RECOMBIDX CILINDRO / SCROLL CAPTURE ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why { --rx-red: #FF1744; --rx-blue: #00AEEF; --rx-white: #FFFFFF; --rx-text: #D5D8E6; position: relative; width: 100%; padding: 55px 0 70px; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible; } /* ========================================================= SIN RECUADROS ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-inner, .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-intro, .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-story, .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ========================================================= ESTRUCTURA GENERAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-inner { position: relative; display: grid; grid-template-columns: minmax(310px, .84fr) minmax(500px, 1.16fr); align-items: center; gap: clamp( 70px, 8vw, 135px ); width: min(100%, 1180px); min-height: 455px; margin: 0 auto; } /* ========================================================= COLUMNA IZQUIERDA ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-intro { position: relative; z-index: 3; max-width: 470px; } /* ========================================================= H2 ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-intro h2 { margin: 0 0 26px; color: var(--rx-white); font-size: clamp( 40px, 4vw, 57px ); font-weight: 700; line-height: 1.06; letter-spacing: -1.4px; white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none; text-shadow: -2px 0 8px rgba(255,23,68,.16), 2px 0 8px rgba(0,174,239,.16); animation: rxWhyTitleBreath 5.8s ease-in-out infinite; } /* ========================================================= TEXTO INTRODUCTORIO ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-lead { margin: 0; max-width: 445px; color: rgba(225,228,239,.88); font-size: 16px; font-weight: 400; line-height: 1.75; } /* ========================================================= CILINDRO ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-story { position: relative; width: 100%; height: 400px; overflow: hidden; outline: none; perspective: 1050px; perspective-origin: center center; } /* ========================================================= ELEMENTO BASE ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point { position: absolute; top: 50%; left: 0; width: calc(100% - 50px); display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 28px; align-items: start; padding: 20px 0; transform-style: preserve-3d; will-change: transform, opacity, filter; transition: transform .80s cubic-bezier(.22,.61,.36,1), opacity .68s ease, filter .68s ease; } /* ========================================================= ACTIVO ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active { z-index: 5; opacity: 1; pointer-events: auto; filter: blur(0) brightness(1); transform: translateY(-50%) translateZ(0) rotateX(0deg) scale(1); } /* ========================================================= ANTERIOR ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-prev { z-index: 2; opacity: .24; pointer-events: none; filter: blur(3.8px) brightness(.66); transform: translateY( calc(-50% - 132px) ) translateZ(-125px) rotateX(-30deg) scale(.84); } /* ========================================================= SIGUIENTE ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-next { z-index: 2; opacity: .24; pointer-events: none; filter: blur(3.8px) brightness(.66); transform: translateY( calc(-50% + 132px) ) translateZ(-125px) rotateX(30deg) scale(.84); } /* ========================================================= ANTERIORES LEJANOS ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-hidden-before { z-index: 1; opacity: 0; pointer-events: none; filter: blur(9px); transform: translateY( calc(-50% - 245px) ) translateZ(-230px) rotateX(-55deg) scale(.64); } /* ========================================================= SIGUIENTES LEJANOS ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-hidden-after { z-index: 1; opacity: 0; pointer-events: none; filter: blur(9px); transform: translateY( calc(-50% + 245px) ) translateZ(-230px) rotateX(55deg) scale(.64); } /* ========================================================= NÚMERO ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point-number { padding-top: 4px; color: rgba(255,255,255,.44); font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 2px; transition: color .48s ease, text-shadow .48s ease, transform .48s ease; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active .rx-why-point-number { color: #FFFFFF; text-shadow: -2px 0 8px rgba(255,23,68,.27), 2px 0 8px rgba(0,174,239,.29); } /* ========================================================= TÍTULOS DE LISTA ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point-content h3 { margin: 0 0 13px; max-width: 590px; color: rgba(255,255,255,.64); font-size: clamp( 23px, 2vw, 29px ); font-weight: 700; line-height: 1.15; letter-spacing: -.45px; transition: color .48s ease, text-shadow .48s ease, transform .48s ease; } /* ========================================================= PÁRRAFO ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point-content p { margin: 0; max-width: 600px; color: rgba(213,216,230,.46); font-size: 15px; line-height: 1.72; transition: color .48s ease, transform .48s ease; } /* ========================================================= CONTENIDO CENTRAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active .rx-why-point-content h3 { color: #FFFFFF; text-shadow: -2px 0 8px rgba(255,23,68,.13), 2px 0 8px rgba(0,174,239,.14); animation: rxWhyActiveTitle 4.8s ease-in-out infinite; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active .rx-why-point-content p { color: rgba(231,233,241,.92); } /* ========================================================= HOVER DEL CENTRAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active:hover .rx-why-point-number { transform: translateX(3px); text-shadow: -3px 0 11px rgba(255,23,68,.43), 3px 0 11px rgba(0,174,239,.44); } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active:hover .rx-why-point-content h3 { transform: translateX(4px); text-shadow: -3px 0 11px rgba(255,23,68,.28), 3px 0 11px rgba(0,174,239,.30); } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active:hover .rx-why-point-content p { color: #F0F1F6; transform: translateX(4px); } /* ========================================================= INDICADOR VERTICAL ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-indicator { position: absolute; z-index: 20; top: 50%; right: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transform: translateY(-50%); } /* ========================================================= INDICADORES ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-dot { appearance: none; display: block; width: 4px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.18); cursor: pointer; transition: height .42s ease, background .42s ease, box-shadow .42s ease, opacity .42s ease; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-dot:hover { background: rgba(255,255,255,.42); } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-dot.is-active { height: 30px; background: linear-gradient( 180deg, #FF1744 0%, #8C4CC9 50%, #00AEEF 100% ); box-shadow: 0 -3px 8px rgba(255,23,68,.20), 0 3px 8px rgba(0,174,239,.20); } /* ========================================================= IMPORTANTE YA NO HAY FADES RECTANGULARES ARRIBA / ABAJO ========================================================= */ .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-story::before, .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-story::after { content: none !important; display: none !important; } /* ========================================================= RESPIRACIÓN DEL H2 ========================================================= */ @keyframes rxWhyTitleBreath { 0%, 100% { text-shadow: -2px 0 7px rgba(255,23,68,.12), 2px 0 7px rgba(0,174,239,.12); } 50% { text-shadow: -3px 0 10px rgba(255,23,68,.27), 3px 0 10px rgba(0,174,239,.28), -6px 0 19px rgba(255,23,68,.07), 6px 0 19px rgba(0,174,239,.07); } } /* ========================================================= RESPIRACIÓN DEL TÍTULO ACTIVO ========================================================= */ @keyframes rxWhyActiveTitle { 0%, 100% { text-shadow: -2px 0 7px rgba(255,23,68,.09), 2px 0 7px rgba(0,174,239,.10); } 50% { text-shadow: -3px 0 10px rgba(255,23,68,.22), 3px 0 10px rgba(0,174,239,.23); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why { padding: 45px 10px 60px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-inner { grid-template-columns: minmax(270px, .82fr) minmax(400px, 1.18fr); gap: 48px; min-height: 430px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-intro h2 { font-size: clamp( 36px, 4.6vw, 48px ); } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point { width: calc(100% - 42px); grid-template-columns: 54px minmax(0, 1fr); gap: 19px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-prev { transform: translateY( calc(-50% - 124px) ) translateZ(-110px) rotateX(-29deg) scale(.83); } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-next { transform: translateY( calc(-50% + 124px) ) translateZ(-110px) rotateX(29deg) scale(.83); } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 767px) { .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why { padding: 42px 4px 52px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-inner { display: grid; grid-template-columns: 1fr; gap: 27px; min-height: auto; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-intro { max-width: none; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-intro h2 { max-width: 95%; margin-bottom: 17px; font-size: clamp( 34px, 9.5vw, 44px ); line-height: 1.07; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-lead { max-width: 95%; font-size: 14.5px; line-height: 1.64; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-story { height: 355px; perspective: 800px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point { width: calc(100% - 28px); grid-template-columns: 40px minmax(0, 1fr); gap: 12px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point-number { font-size: 12px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point-content h3 { font-size: 21px; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point-content p { font-size: 13.8px; line-height: 1.6; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-prev { opacity: .18; transform: translateY( calc(-50% - 118px) ) translateZ(-90px) rotateX(-26deg) scale(.80); } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-next { opacity: .18; transform: translateY( calc(-50% + 118px) ) translateZ(-90px) rotateX(26deg) scale(.80); } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-indicator { right: 0; } } /* ========================================================= REDUCIR MOVIMIENTO ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-intro h2, .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point.is-active .rx-why-point-content h3 { animation: none !important; } .elementor-194 .elementor-element.elementor-element-3638ac3 .rx-why-point { transition: opacity .15s linear; } }/* End custom CSS */ /* Start custom CSS *//* ========================================================= RECOMBIDX · FONDO GLOBAL VIVO VERSIÓN MÁS DINÁMICA ========================================================= */ body.elementor-page-194 { position: relative; background-color: #07092E; background-image: radial-gradient( ellipse at 16% 13%, rgba(255, 23, 68, .072) 0%, rgba(255, 23, 68, .030) 22%, transparent 50% ), radial-gradient( ellipse at 84% 25%, rgba(0, 174, 239, .058) 0%, rgba(0, 174, 239, .024) 22%, transparent 52% ), radial-gradient( ellipse at 53% 48%, rgba(140, 76, 201, .034) 0%, transparent 47% ), radial-gradient( ellipse at 19% 77%, rgba(255, 23, 68, .045) 0%, transparent 50% ), radial-gradient( ellipse at 83% 86%, rgba(0, 174, 239, .036) 0%, transparent 52% ), linear-gradient( 180deg, #07092E 0%, #080A31 28%, #07092E 58%, #080A30 82%, #07092E 100% ); background-repeat: no-repeat; background-size: cover; background-position: center top; overflow-x: clip; overflow-y: visible; } /* ========================================================= CAPA 1 · PEQUEÑAS / MEDIAS ========================================================= */ body.elementor-page-194::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform, opacity; background-image: /* ROJAS */ radial-gradient(circle at 5% 16%, rgba(255,23,68,.82) 0 1px, rgba(255,23,68,.28) 2px, transparent 7px), radial-gradient(circle at 14% 43%, rgba(255,23,68,.74) 0 1.5px, rgba(255,23,68,.22) 4px, transparent 11px), radial-gradient(circle at 22% 72%, rgba(255,23,68,.60) 0 2px, rgba(255,23,68,.17) 6px, transparent 15px), radial-gradient(circle at 31% 24%, rgba(255,23,68,.78) 0 1px, rgba(255,23,68,.22) 3px, transparent 9px), radial-gradient(circle at 39% 61%, rgba(255,23,68,.68) 0 1.5px, rgba(255,23,68,.18) 5px, transparent 12px), radial-gradient(circle at 49% 86%, rgba(255,23,68,.56) 0 2px, rgba(255,23,68,.15) 6px, transparent 15px), radial-gradient(circle at 59% 32%, rgba(255,23,68,.78) 0 1px, rgba(255,23,68,.20) 3px, transparent 9px), radial-gradient(circle at 70% 68%, rgba(255,23,68,.66) 0 1.5px, rgba(255,23,68,.17) 5px, transparent 13px), radial-gradient(circle at 82% 18%, rgba(255,23,68,.58) 0 2px, rgba(255,23,68,.15) 6px, transparent 15px), radial-gradient(circle at 93% 58%, rgba(255,23,68,.70) 0 1.5px, rgba(255,23,68,.18) 4px, transparent 12px), /* AZULES */ radial-gradient(circle at 8% 65%, rgba(0,174,239,.70) 0 1.5px, rgba(0,174,239,.18) 4px, transparent 11px), radial-gradient(circle at 17% 22%, rgba(0,174,239,.74) 0 1px, rgba(0,174,239,.18) 3px, transparent 8px), radial-gradient(circle at 27% 88%, rgba(0,174,239,.52) 0 2px, rgba(0,174,239,.13) 6px, transparent 14px), radial-gradient(circle at 36% 40%, rgba(0,174,239,.62) 0 1.5px, rgba(0,174,239,.16) 4px, transparent 11px), radial-gradient(circle at 45% 13%, rgba(0,174,239,.74) 0 1px, rgba(0,174,239,.17) 3px, transparent 8px), radial-gradient(circle at 55% 69%, rgba(0,174,239,.50) 0 2px, rgba(0,174,239,.12) 6px, transparent 14px), radial-gradient(circle at 65% 21%, rgba(0,174,239,.64) 0 1.5px, rgba(0,174,239,.16) 4px, transparent 11px), radial-gradient(circle at 75% 48%, rgba(0,174,239,.72) 0 1px, rgba(0,174,239,.17) 3px, transparent 8px), radial-gradient(circle at 86% 79%, rgba(0,174,239,.52) 0 2px, rgba(0,174,239,.12) 6px, transparent 14px), radial-gradient(circle at 96% 30%, rgba(0,174,239,.62) 0 1.5px, rgba(0,174,239,.15) 4px, transparent 11px); opacity: .62; filter: blur(.8px); animation: rxParticleLayerA 12s ease-in-out infinite alternate, rxParticleGlowA 4.8s ease-in-out infinite; } /* ========================================================= CAPA 2 · GRANDES / DIFUSAS ========================================================= */ body.elementor-page-194::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform, opacity; background-image: /* ROJO */ radial-gradient(circle at 10% 34%, rgba(255,23,68,.46) 0 3px, rgba(255,23,68,.18) 7px, rgba(255,23,68,.05) 15px, transparent 24px), radial-gradient(circle at 34% 80%, rgba(255,23,68,.42) 0 2.5px, rgba(255,23,68,.15) 8px, rgba(255,23,68,.04) 16px, transparent 25px), radial-gradient(circle at 57% 18%, rgba(255,23,68,.44) 0 3.5px, rgba(255,23,68,.15) 9px, rgba(255,23,68,.04) 17px, transparent 27px), radial-gradient(circle at 78% 61%, rgba(255,23,68,.40) 0 2.5px, rgba(255,23,68,.13) 8px, transparent 24px), radial-gradient(circle at 94% 89%, rgba(255,23,68,.40) 0 3px, rgba(255,23,68,.12) 8px, transparent 25px), /* AZUL */ radial-gradient(circle at 18% 83%, rgba(0,174,239,.40) 0 2.5px, rgba(0,174,239,.12) 8px, transparent 24px), radial-gradient(circle at 42% 38%, rgba(0,174,239,.40) 0 3px, rgba(0,174,239,.12) 8px, transparent 25px), radial-gradient(circle at 63% 82%, rgba(0,174,239,.36) 0 2.5px, rgba(0,174,239,.10) 8px, transparent 23px), radial-gradient(circle at 84% 27%, rgba(0,174,239,.40) 0 3px, rgba(0,174,239,.12) 8px, transparent 25px), /* PÚRPURA */ radial-gradient(circle at 29% 54%, rgba(140,76,201,.25) 0 2px, rgba(140,76,201,.08) 8px, transparent 22px), radial-gradient(circle at 72% 41%, rgba(140,76,201,.22) 0 2px, rgba(140,76,201,.07) 8px, transparent 22px); opacity: .42; filter: blur(3.6px); animation: rxParticleLayerB 18s ease-in-out infinite alternate, rxParticleGlowB 6.8s ease-in-out infinite; } /* ========================================================= MOVIMIENTO CAPA A MÁS AMPLIO Y MÁS RÁPIDO ========================================================= */ @keyframes rxParticleLayerA { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 18% { transform: translate3d(-12px, -20px, 0) scale(1.02) rotate(-0.4deg); } 36% { transform: translate3d(16px, -34px, 0) scale(.99) rotate(0.6deg); } 54% { transform: translate3d(-18px, -10px, 0) scale(1.03) rotate(-0.5deg); } 72% { transform: translate3d(10px, 14px, 0) scale(1.01) rotate(0.3deg); } 100% { transform: translate3d(20px, 22px, 0) scale(1) rotate(-0.2deg); } } /* ========================================================= MOVIMIENTO CAPA B MÁS LENTO, MÁS PROFUNDO ========================================================= */ @keyframes rxParticleLayerB { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 22% { transform: translate3d(18px, -12px, 0) scale(1.03) rotate(0.5deg); } 46% { transform: translate3d(-14px, -28px, 0) scale(1.06) rotate(-0.8deg); } 68% { transform: translate3d(15px, 10px, 0) scale(.98) rotate(0.4deg); } 100% { transform: translate3d(-18px, 20px, 0) scale(1.02) rotate(-0.5deg); } } /* ========================================================= PULSO DE BRILLO ========================================================= */ @keyframes rxParticleGlowA { 0%, 100% { opacity: .48; filter: blur(.8px); } 30% { opacity: .68; filter: blur(.5px); } 55% { opacity: .58; filter: blur(1px); } 78% { opacity: .72; filter: blur(.6px); } } @keyframes rxParticleGlowB { 0%, 100% { opacity: .28; filter: blur(3.6px); } 40% { opacity: .48; filter: blur(2.6px); } 70% { opacity: .38; filter: blur(4px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { body.elementor-page-194::before { opacity: .54; } body.elementor-page-194::after { opacity: .34; filter: blur(3.2px); } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 767px) { body.elementor-page-194::before { opacity: .46; } body.elementor-page-194::after { opacity: .27; filter: blur(3.4px); } } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media (prefers-reduced-motion: reduce) { body.elementor-page-194::before, body.elementor-page-194::after { animation: none !important; } }/* End custom CSS */