.elementor-965 .elementor-element.elementor-element-6bb4e7d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--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-965 .elementor-element.elementor-element-4093362{--display:flex;--min-height:75vh;--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;--justify-content:center;}.elementor-965 .elementor-element.elementor-element-4093362:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-4093362 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-965 .elementor-element.elementor-element-9526636{--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-965 .elementor-element.elementor-element-2e0fe9a{--display:flex;--justify-content:center;}.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-965 .elementor-element.elementor-element-efb0ed0 .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:50px;font-weight:600;color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-b6132e3 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-647180f{--display:flex;--justify-content:center;}.elementor-965 .elementor-element.elementor-element-f9e714b{--display:flex;}.elementor-965 .elementor-element.elementor-element-f19d73b{--display:flex;--min-height:75vh;--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;--justify-content:center;}.elementor-965 .elementor-element.elementor-element-f19d73b:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-f19d73b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ksagencymkt.com/wp-content/uploads/2026/01/FONDO_WEB-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-965 .elementor-element.elementor-element-4269a86{--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-965 .elementor-element.elementor-element-c48c0c1{--display:flex;}.elementor-965 .elementor-element.elementor-element-6f8bf04 .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:50px;font-weight:600;color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-e58eed7 .elementor-heading-title{color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-7d2a693{--display:flex;--justify-content:center;}.elementor-965 .elementor-element.elementor-element-ce91ed4{--display:flex;}.elementor-965 .elementor-element.elementor-element-e721fd9{--display:flex;--min-height:75vh;--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;--justify-content:center;}.elementor-965 .elementor-element.elementor-element-e721fd9:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-e721fd9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ksagencymkt.com/wp-content/uploads/2026/01/FONDO_WEB-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-965 .elementor-element.elementor-element-6d2ca73{--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-965 .elementor-element.elementor-element-aedd629{--display:flex;--justify-content:center;}.elementor-965 .elementor-element.elementor-element-64fdebb .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:50px;font-weight:600;color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-74045a6 .elementor-heading-title{color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-d3d0a4c{--display:flex;--justify-content:center;}.elementor-965 .elementor-element.elementor-element-f234270{--display:flex;}.elementor-965 .elementor-element.elementor-element-0458b20{--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-965 .elementor-element.elementor-element-0458b20:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-0458b20 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EBEBEB;}.elementor-965 .elementor-element.elementor-element-dff7070{padding:50px 0px 50px 0px;text-align:center;}.elementor-965 .elementor-element.elementor-element-dff7070 .elementor-heading-title{font-family:"Raleway", Sans-serif;font-size:20px;font-weight:600;color:#000000;}.elementor-965 .elementor-element.elementor-element-2db1e6b{--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-965 .elementor-element.elementor-element-2db1e6b:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-2db1e6b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EBEBEB;}.elementor-965 .elementor-element.elementor-element-95d8396{--display:flex;}.elementor-965 .elementor-element.elementor-element-8e1a240{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-965 .elementor-element.elementor-element-432a08e{text-align:end;}.elementor-965 .elementor-element.elementor-element-432a08e .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:40px;font-weight:600;color:#2B1341;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-965 .elementor-element.elementor-element-bef90af{--divider-border-style:solid;--divider-color:#5E278B;--divider-border-width:4.5px;margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + -50px) -10px;padding:0px 0px 0px 0px;}.elementor-965 .elementor-element.elementor-element-bef90af .elementor-divider-separator{width:20%;margin:0 auto;margin-right:0;}.elementor-965 .elementor-element.elementor-element-bef90af .elementor-divider{text-align:right;padding-block-start:15px;padding-block-end:15px;}.elementor-965 .elementor-element.elementor-element-6ec9e7a{padding:50px 0px 50px 0px;text-align:end;}.elementor-965 .elementor-element.elementor-element-6ec9e7a .elementor-heading-title{font-family:"Raleway", Sans-serif;font-size:20px;font-weight:600;color:#000000;}.elementor-965 .elementor-element.elementor-element-46be3d5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-counter .elementor-counter-number-wrapper{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-counter .elementor-counter-title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-965 .elementor-element.elementor-element-adff33f .elementor-counter-number-wrapper{color:#666666;font-family:"Raleway", Sans-serif;font-weight:600;}.elementor-965 .elementor-element.elementor-element-df01ea2 .elementor-counter-number-wrapper{color:#666666;font-family:"Raleway", Sans-serif;font-weight:600;}.elementor-965 .elementor-element.elementor-element-134b06a .elementor-counter-number-wrapper{color:#666666;font-family:"Raleway", Sans-serif;font-weight:600;}.elementor-965 .elementor-element.elementor-element-308b29e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:30px 0px;--row-gap:30px;--column-gap:0px;}.elementor-965 .elementor-element.elementor-element-308b29e:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-308b29e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ksagencymkt.com/wp-content/uploads/2026/01/FONDO_WEB.jpg");background-position:center center;background-repeat:repeat;background-size:cover;}.elementor-965 .elementor-element.elementor-element-88e97f4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-965 .elementor-element.elementor-element-88e97f4.e-con{--align-self:center;}.elementor-965 .elementor-element.elementor-element-f09053f{text-align:center;}.elementor-965 .elementor-element.elementor-element-f09053f .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-5455a11{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-965 .elementor-element.elementor-element-6f27fd3{--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-965 .elementor-element.elementor-element-6f27fd3:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-6f27fd3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111111;}.elementor-965 .elementor-element.elementor-element-96f3fe2{--display:flex;}.elementor-965 .elementor-element.elementor-element-b297836{--display:flex;}.elementor-965 .elementor-element.elementor-element-c55083c{text-align:center;}.elementor-965 .elementor-element.elementor-element-c55083c .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-b4433a7{--display:flex;}.elementor-965 .elementor-element.elementor-element-97f1442{--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-965 .elementor-element.elementor-element-97f1442:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-97f1442 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111111;}.elementor-965 .elementor-element.elementor-element-825938f{--display:flex;}.elementor-965 .elementor-element.elementor-element-a831967{--display:flex;}.elementor-965 .elementor-element.elementor-element-e3ea298{text-align:center;}.elementor-965 .elementor-element.elementor-element-e3ea298 .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-965 .elementor-element.elementor-element-970aa2b{--display:flex;}.elementor-965 .elementor-element.elementor-element-af5adc8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-965 .elementor-element.elementor-element-af5adc8:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-af5adc8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EBEBEB;}.elementor-965 .elementor-element.elementor-element-3a5d7bb{--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-965 .elementor-element.elementor-element-0752abd{--display:flex;}.elementor-965 .elementor-element.elementor-element-0752abd.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-965 .elementor-element.elementor-element-d933d47{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-965 .elementor-element.elementor-element-bb5a62e{text-align:end;}.elementor-965 .elementor-element.elementor-element-bb5a62e .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:53px;font-weight:600;color:#2B1341;}.elementor-965 .elementor-element.elementor-element-673b931{text-align:end;}.elementor-965 .elementor-element.elementor-element-673b931 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:18px;font-weight:500;color:#000000;}.elementor-965 .elementor-element.elementor-element-2d73eb3{--display:flex;}.elementor-965 .elementor-element.elementor-element-66243a8{--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-965 .elementor-element.elementor-element-66243a8:not(.elementor-motion-effects-element-type-background), .elementor-965 .elementor-element.elementor-element-66243a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EBEBEB;}.elementor-965 .elementor-element.elementor-element-0cdcc43{--display:flex;}.elementor-965 .elementor-element.elementor-element-c100242{text-align:center;}.elementor-965 .elementor-element.elementor-element-c100242 .elementor-heading-title{font-family:"Ramabhadra", Sans-serif;font-size:54px;font-weight:600;color:#2B1341;}.elementor-965 .elementor-element.elementor-element-c100242 .elementor-heading-title a:hover, .elementor-965 .elementor-element.elementor-element-c100242 .elementor-heading-title a:focus{color:#D5C724;}.elementor-965 .elementor-element.elementor-element-c100242 .elementor-heading-title a{transition-duration:0.7s;}.elementor-965 .elementor-element.elementor-element-6629303{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-965 .elementor-element.elementor-element-647180f{--justify-content:center;}.elementor-965 .elementor-element.elementor-element-7d2a693{--justify-content:center;}.elementor-965 .elementor-element.elementor-element-d3d0a4c{--justify-content:center;}}@media(min-width:768px){.elementor-965 .elementor-element.elementor-element-4093362{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-9526636{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-f19d73b{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-e721fd9{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-0458b20{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-2db1e6b{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-308b29e{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-88e97f4{--width:70%;}.elementor-965 .elementor-element.elementor-element-6f27fd3{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-97f1442{--content-width:1600px;}.elementor-965 .elementor-element.elementor-element-af5adc8{--content-width:1525px;}.elementor-965 .elementor-element.elementor-element-0752abd{--width:25.089%;}}/* Start custom CSS for html, class: .elementor-element-020822d *//* ===================== BOTÓN CTA ===================== */ .btn-ks { display: inline-block; padding: 16px 36px; background: linear-gradient(135deg, #7C3AED, #f198c0); color: #fff; font-size: 16px; font-weight: 700; border-radius: 999px; text-decoration: none !important; box-shadow: 0 10px 30px rgba(124,58,237,.4); transition: transform .2s ease; } .btn-ks:hover { color: black; transform: translateY(-2px); } /* ===================== PANEL – CIRCLE SHRINK ===================== */ .form-panel { --x: 50vw; --y: 50vh; position: fixed; inset: 0; background: radial-gradient(circle at top, #1a0b2e, #0b0614 65%); backdrop-filter: blur(16px); z-index: 9999; clip-path: circle(0% at var(--x) var(--y)); transition: clip-path 1.1s cubic-bezier(.25,1,.3,1); pointer-events: none; display: flex; align-items: center; justify-content: center; } .form-panel.active { clip-path: circle(150% at var(--x) var(--y)); pointer-events: auto; } /* ===================== CONTENIDO CENTRAL ===================== */ .form-content { width: 90%; max-width: 520px; background: linear-gradient(180deg, #140b24, #0b0614); padding: 42px; border-radius: 28px; color: #F5F3FF; text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(124,58,237,.18); } /* ===================== GAME STEPS ===================== */ .game-step { display: none; animation: fadeUp .5s ease; } .game-step.active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .game-step p { color: #C4B5FD; } /* ===================== OPCIONES / BOTONES ===================== */ .choices { display: grid; gap: 14px; margin-top: 24px; } .choices button { padding: 16px; border-radius: 16px; border: none; font-weight: 600; cursor: pointer; background: #140b24; color: #F5F3FF; box-shadow: inset 0 0 0 1px rgba(124,58,237,.25), 0 10px 20px rgba(0,0,0,.4); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .choices button:hover { transform: translateY(-2px) scale(1.02); background: linear-gradient(135deg, #7C3AED, #22D3EE); box-shadow: 0 18px 40px rgba(124,58,237,.45); } /* ===================== CERRAR ===================== */ .close-form { position: absolute; top: 24px; right: 24px; font-size: 26px; background: none; border: none; color: #fff; cursor: pointer; } /* ===================== ICONOS FLOTANTES ===================== */ .floating-icons span { position: absolute; font-size: 22px; opacity: 0.12; animation: float 6s infinite ease-in-out; } .floating-icons span:nth-child(1) { top: 20%; left: 10%; } .floating-icons span:nth-child(2) { top: 70%; left: 15%; animation-delay: 1s; } .floating-icons span:nth-child(3) { top: 30%; right: 12%; animation-delay: 2s; } .floating-icons span:nth-child(4) { top: 65%; right: 18%; animation-delay: 3s; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* ===================== MOBILE ===================== */ @media (max-width: 600px) { .form-content { padding: 28px; border-radius: 22px; } .btn-ks { width: 100%; text-align: center; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-48cc224 */.orbit-wrapper { width: 320px; height: 320px; position: relative; margin: auto; overflow: hidden; } .orbit-circle { width: 100%; height: 100%; position: relative; animation: spin 20s linear infinite; } .orbit-item { width: 94px; height: 94px; position: absolute; top: 50%; left: 50%; margin: -47px; object-fit: contain; } /* Desktop radius */ .i1 { transform: rotate(0deg) translateX(113px); } .i2 { transform: rotate(72deg) translateX(113px); } .i3 { transform: rotate(144deg) translateX(113px); } .i4 { transform: rotate(216deg) translateX(113px); } .i5 { transform: rotate(288deg) translateX(113px); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 📱 Tablets & Mobile */ @media (max-width: 768px) { .orbit-wrapper { width: 220px; height: 220px; } .orbit-item { width: 56px; height: 56px; margin: -28px; } /* Reducimos SOLO el radio */ .i1 { transform: rotate(0deg) translateX(78px); } .i2 { transform: rotate(72deg) translateX(78px); } .i3 { transform: rotate(144deg) translateX(78px); } .i4 { transform: rotate(216deg) translateX(78px); } .i5 { transform: rotate(288deg) translateX(78px); } } /* ===================== HEART / GLOW EFFECT (SAFE) ===================== */ @keyframes softGlow { 0% { filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); } 40% { filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.55)); } 70% { filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.35)); } 100% { filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); } } .orbit-item { animation: softGlow 2.8s ease-in-out infinite; } /* Desfase natural */ .i2 { animation-delay: .4s; } .i3 { animation-delay: .8s; } .i4 { animation-delay: 1.2s; } .i5 { animation-delay: 1.6s; } /* Hover elegante (desktop) */ @media (hover: hover) { .orbit-item:hover { filter: drop-shadow(0 0 22px rgba(192, 132, 252, 0.85)); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0c4e22d *//* ===================== BOTÓN CTA ===================== */ .btn-ks { display: inline-block; padding: 16px 36px; background: linear-gradient(135deg, #7C3AED, #22D3EE); color: #fff; font-size: 16px; font-weight: 700; border-radius: 999px; text-decoration: none !important; box-shadow: 0 10px 30px rgba(124,58,237,.4); transition: transform .2s ease; } .btn-ks:hover { transform: translateY(-2px); } /* ===================== PANEL – CIRCLE SHRINK ===================== */ .form-panel { --x: 50vw; --y: 50vh; position: fixed; inset: 0; background: radial-gradient(circle at top, #1a0b2e, #0b0614 65%); backdrop-filter: blur(16px); z-index: 9999; clip-path: circle(0% at var(--x) var(--y)); transition: clip-path 1.1s cubic-bezier(.25,1,.3,1); pointer-events: none; display: flex; align-items: center; justify-content: center; } .form-panel.active { clip-path: circle(150% at var(--x) var(--y)); pointer-events: auto; } /* ===================== CONTENIDO CENTRAL ===================== */ .form-content { width: 90%; max-width: 520px; background: linear-gradient(180deg, #140b24, #0b0614); padding: 42px; border-radius: 28px; color: #F5F3FF; text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(124,58,237,.18); } /* ===================== GAME STEPS ===================== */ .game-step { display: none; animation: fadeUp .5s ease; } .game-step.active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .game-step p { color: #C4B5FD; } /* ===================== OPCIONES / BOTONES ===================== */ .choices { display: grid; gap: 14px; margin-top: 24px; } .choices button { padding: 16px; border-radius: 16px; border: none; font-weight: 600; cursor: pointer; background: #140b24; color: #F5F3FF; box-shadow: inset 0 0 0 1px rgba(124,58,237,.25), 0 10px 20px rgba(0,0,0,.4); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .choices button:hover { transform: translateY(-2px) scale(1.02); background: linear-gradient(135deg, #7C3AED, #22D3EE); box-shadow: 0 18px 40px rgba(124,58,237,.45); } /* ===================== CERRAR ===================== */ .close-form { position: absolute; top: 24px; right: 24px; font-size: 26px; background: none; border: none; color: #fff; cursor: pointer; } /* ===================== ICONOS FLOTANTES ===================== */ .floating-icons span { position: absolute; font-size: 22px; opacity: 0.12; animation: float 6s infinite ease-in-out; } .floating-icons span:nth-child(1) { top: 20%; left: 10%; } .floating-icons span:nth-child(2) { top: 70%; left: 15%; animation-delay: 1s; } .floating-icons span:nth-child(3) { top: 30%; right: 12%; animation-delay: 2s; } .floating-icons span:nth-child(4) { top: 65%; right: 18%; animation-delay: 3s; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* ===================== MOBILE ===================== */ @media (max-width: 600px) { .form-content { padding: 28px; border-radius: 22px; } .btn-ks { width: 100%; text-align: center; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-dea5e72 */.orbit-wrapper { width: 320px; height: 320px; position: relative; margin: auto; overflow: hidden; } .orbit-circle { width: 100%; height: 100%; position: relative; animation: spin 20s linear infinite; } .orbit-item { width: 94px; height: 94px; position: absolute; top: 50%; left: 50%; margin: -47px; object-fit: contain; } /* Desktop radius */ .i1 { transform: rotate(0deg) translateX(113px); } .i2 { transform: rotate(72deg) translateX(113px); } .i3 { transform: rotate(144deg) translateX(113px); } .i4 { transform: rotate(216deg) translateX(113px); } .i5 { transform: rotate(288deg) translateX(113px); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 📱 Tablets & Mobile */ @media (max-width: 768px) { .orbit-wrapper { width: 220px; height: 220px; } .orbit-item { width: 56px; height: 56px; margin: -28px; } /* Reducimos SOLO el radio */ .i1 { transform: rotate(0deg) translateX(78px); } .i2 { transform: rotate(72deg) translateX(78px); } .i3 { transform: rotate(144deg) translateX(78px); } .i4 { transform: rotate(216deg) translateX(78px); } .i5 { transform: rotate(288deg) translateX(78px); } } /* ===================== HEART / GLOW EFFECT (SAFE) ===================== */ @keyframes softGlow { 0% { filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); } 40% { filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.55)); } 70% { filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.35)); } 100% { filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); } } .orbit-item { animation: softGlow 2.8s ease-in-out infinite; } /* Desfase natural */ .i2 { animation-delay: .4s; } .i3 { animation-delay: .8s; } .i4 { animation-delay: 1.2s; } .i5 { animation-delay: 1.6s; } /* Hover elegante (desktop) */ @media (hover: hover) { .orbit-item:hover { filter: drop-shadow(0 0 22px rgba(192, 132, 252, 0.85)); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6638d75 *//* ===================== BOTÓN CTA ===================== */ .btn-ks { display: inline-block; padding: 16px 36px; background: linear-gradient(135deg, #7C3AED, #22D3EE); color: #fff; font-size: 16px; font-weight: 700; border-radius: 999px; text-decoration: none !important; box-shadow: 0 10px 30px rgba(124,58,237,.4); transition: transform .2s ease; } .btn-ks:hover { transform: translateY(-2px); } /* ===================== PANEL – CIRCLE SHRINK ===================== */ .form-panel { --x: 50vw; --y: 50vh; position: fixed; inset: 0; background: radial-gradient(circle at top, #1a0b2e, #0b0614 65%); backdrop-filter: blur(16px); z-index: 9999; clip-path: circle(0% at var(--x) var(--y)); transition: clip-path 1.1s cubic-bezier(.25,1,.3,1); pointer-events: none; display: flex; align-items: center; justify-content: center; } .form-panel.active { clip-path: circle(150% at var(--x) var(--y)); pointer-events: auto; } /* ===================== CONTENIDO CENTRAL ===================== */ .form-content { width: 90%; max-width: 520px; background: linear-gradient(180deg, #140b24, #0b0614); padding: 42px; border-radius: 28px; color: #F5F3FF; text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(124,58,237,.18); } /* ===================== GAME STEPS ===================== */ .game-step { display: none; animation: fadeUp .5s ease; } .game-step.active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .game-step p { color: #C4B5FD; } /* ===================== OPCIONES / BOTONES ===================== */ .choices { display: grid; gap: 14px; margin-top: 24px; } .choices button { padding: 16px; border-radius: 16px; border: none; font-weight: 600; cursor: pointer; background: #140b24; color: #F5F3FF; box-shadow: inset 0 0 0 1px rgba(124,58,237,.25), 0 10px 20px rgba(0,0,0,.4); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .choices button:hover { transform: translateY(-2px) scale(1.02); background: linear-gradient(135deg, #7C3AED, #22D3EE); box-shadow: 0 18px 40px rgba(124,58,237,.45); } /* ===================== CERRAR ===================== */ .close-form { position: absolute; top: 24px; right: 24px; font-size: 26px; background: none; border: none; color: #fff; cursor: pointer; } /* ===================== ICONOS FLOTANTES ===================== */ .floating-icons span { position: absolute; font-size: 22px; opacity: 0.12; animation: float 6s infinite ease-in-out; } .floating-icons span:nth-child(1) { top: 20%; left: 10%; } .floating-icons span:nth-child(2) { top: 70%; left: 15%; animation-delay: 1s; } .floating-icons span:nth-child(3) { top: 30%; right: 12%; animation-delay: 2s; } .floating-icons span:nth-child(4) { top: 65%; right: 18%; animation-delay: 3s; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* ===================== MOBILE ===================== */ @media (max-width: 600px) { .form-content { padding: 28px; border-radius: 22px; } .btn-ks { width: 100%; text-align: center; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-ce530d5 */.circle-scope { width: 520px; max-width: 100%; aspect-ratio: 1 / 1; position: relative; margin: auto; overflow: hidden; } .circle-inner { width: 100%; height: 100%; position: relative; } /* 🔵 REGLA BASE SOLO POSICIÓN */ .circle-base, .circle-top, .circle-center { position: absolute; left: 50%; object-fit: contain; } /* 🔵 CÍRCULOS */ .circle-base, .circle-top { top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(0.88); } .circle-base { z-index: 1; } .circle-top { z-index: 2; } /* 🟢 CHARCO */ .circle-center { top: 56%; /* bajado un poco */ width: 75%; height: auto; transform: translate(-50%, -50%); z-index: 3; } /* 🔥 WRAPPER IMG DELANTE DEL CHARCO */ .circle-front-wrapper { position: absolute; top: 53%; /* posición base */ left: 50%; /* centrado horizontal */ transform: translate(-50%, -50%); z-index: 4; pointer-events: none; } /* 🔥 IMG DELANTE DEL CHARCO */ .circle-front { width: 85%; height: auto; /* animación flotante suave */ animation: float 2s ease-in-out infinite; } /* 🌊 Animación flotando lento */ @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } } @media (max-width: 768px) { .circle-base, .circle-top { transform: translate(-50%, -50%) scale(0.82); } .circle-center { width: 65%; top: 58%; } .circle-front-wrapper { top: 50%; } .circle-front { width: 90%; } } /* 🟣 CONTENEDOR DE ICONOS */ .circle-icons { position: absolute; inset: 0; z-index: 3; /* sobre las líneas, bajo la img frontal */ pointer-events: none; } /* 🟣 ICONO BASE */ .circle-icon { position: absolute; width: 74px; height: 54px; object-fit: contain; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 🎯 POSICIONES INDIVIDUALES (SOBRE LAS LINEAS) */ .icon-1 { transform: translate(-50%, -50%) translate(180px, -60px); } .icon-2 { transform: translate(-50%, -50%) translate(-220px, -40px); } .icon-3 { transform: translate(-50%, -50%) translate(0px, 210px); } .icon-4 { transform: translate(-50%, -50%) translate(120px, 100px); } .icon-5 { transform: translate(-50%, -50%) translate(-10px, -220px); } @media (max-width: 768px) { .circle-icon { width: 45px; height: 62px; } .icon-1 { transform: translate(-50%, -50%) translate(100px, -40px); } .icon-2 { transform: translate(-50%, -50%) translate(-110px, -20px); } .icon-3 { transform: translate(-50%, -50%) translate(0px, 120px); } .icon-4 { transform: translate(-50%, -50%) translate(70px, 50px); } .icon-5 { transform: translate(-50%, -50%) translate(-10px, -100px); } } @keyframes heartBeat { 0% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } 60% { transform: scale(1); } 100% { transform: scale(1); } } /* ❤️ IMG INTERNA QUE LATE */ .icon-heart { width: 100%; height: 100%; object-fit: contain; animation: heartBeat 3.5s ease-in-out infinite; transform-origin: center; } .icon-1 .icon-heart { animation-delay: 0s; } .icon-2 .icon-heart { animation-delay: 0.6s; } .icon-3 .icon-heart { animation-delay: 1.2s; } .icon-4 .icon-heart { animation-delay: 1.8s; } .icon-5 .icon-heart { animation-delay: 2.4s; }/* End custom CSS */ /* Start custom CSS for counter, class: .elementor-element-adff33f */.glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 20px 10px rgba(255, 255, 255, 1); position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent ); } .glass-card::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3) ); }/* End custom CSS */ /* Start custom CSS for counter, class: .elementor-element-df01ea2 */.glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 20px 10px rgba(255, 255, 255, 1); position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent ); } .glass-card::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3) ); }/* End custom CSS */ /* Start custom CSS for counter, class: .elementor-element-134b06a */.glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 20px 10px rgba(255, 255, 255, 1); position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent ); } .glass-card::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3) ); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-54760d9 */